import * as tailwind_variants from 'tailwind-variants'; import { VariantProps } from 'tailwind-variants'; import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config'; /** * Button wrapper **Tailwind Variants** component * * const classNames = button({...}) * * @example * */ declare const button: tailwind_variants.TVReturnType<{ variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }, undefined, string[], tailwind_variants_dist_config.TVConfig<{ variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }, { variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }>, { variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }, undefined, tailwind_variants.TVReturnType<{ variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }, undefined, string[], tailwind_variants_dist_config.TVConfig<{ variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }, { variant: { solid: ""; bordered: "border-small bg-transparent"; light: "bg-transparent"; flat: ""; faded: "border-small"; shadow: ""; ghost: "border-small bg-transparent"; }; size: { sm: "px-unit-3 h-unit-9 text-small gap-unit-2 rounded-small"; md: "px-unit-4 h-unit-10 text-medium gap-unit-2 rounded-small"; lg: "px-unit-6 h-unit-12 text-xl gap-unit-3 rounded-medium"; }; color: { default: ""; primary: ""; secondary: ""; success: ""; warning: ""; danger: ""; }; radius: { none: "rounded-none"; sm: "rounded-small"; md: "rounded-medium"; lg: "rounded-large"; full: "rounded-full"; }; fullWidth: { true: "w-full"; }; isDisabled: { true: "opacity-disabled pointer-events-none"; }; isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none"; }; isIconOnly: { true: "px-unit-0 !gap-unit-0"; false: "[&>svg]:max-w-[theme(spacing.unit-8)]"; }; disableAnimation: { true: "!transition-none"; false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"; }; }>, unknown, unknown, undefined>>; /** * ButtonGroup wrapper **Tailwind Variants** component * * const classNames = buttonGroup({...}) * * @example *