@grupor5/raya 0.2.1 → 0.2.3

package/dist/tokens/buttons.d.mts

@@ -0,0 +1,277 @@
+/**
+ * Button Design Tokens - Raya Design System
+ *
+ * Defines the button system tokens including sizes, variants, colors, and states
+ * for consistent button usage across the design system.
+ */
+declare const buttonSizes: {
+    readonly sm: {
+        readonly height: "32px";
+        readonly paddingX: "8px";
+        readonly paddingY: "4px";
+        readonly fontSize: "14px";
+        readonly iconSize: "16px";
+        readonly borderRadius: "10px";
+    };
+    readonly md: {
+        readonly height: "40px";
+        readonly paddingX: "16px";
+        readonly paddingY: "8px";
+        readonly fontSize: "16px";
+        readonly iconSize: "20px";
+        readonly borderRadius: "12px";
+    };
+    readonly lg: {
+        readonly height: "48px";
+        readonly paddingX: "24px";
+        readonly paddingY: "12px";
+        readonly fontSize: "18px";
+        readonly iconSize: "24px";
+        readonly borderRadius: "16px";
+    };
+};
+declare const buttonSizeClasses: {
+    readonly sm: {
+        readonly base: "h-8 px-2 py-1 text-sm rounded-[10px]";
+        readonly icon: "h-8 w-8 rounded-[10px]";
+        readonly iconSize: "w-4 h-4";
+    };
+    readonly md: {
+        readonly base: "h-10 px-4 py-2 text-base rounded-xl";
+        readonly icon: "h-10 w-10 rounded-xl";
+        readonly iconSize: "w-5 h-5";
+    };
+    readonly lg: {
+        readonly base: "h-12 px-6 py-3 text-lg rounded-2xl";
+        readonly icon: "h-12 w-12 rounded-2xl";
+        readonly iconSize: "w-[22px] h-[22px]";
+    };
+};
+declare const buttonVariants: {
+    readonly primary: "filled";
+    readonly secondary: "outlined";
+    readonly ghost: "text-only";
+    readonly icon: "icon-only";
+};
+declare const buttonColors: {
+    readonly primary: "default";
+    readonly secondary: "purple";
+    readonly success: "green";
+    readonly warning: "orange";
+    readonly destructive: "red";
+    readonly neutral: "gray";
+};
+declare const buttonStates: {
+    readonly default: "normal";
+    readonly hover: "highlighted";
+    readonly pressed: "active";
+    readonly disabled: "inactive";
+    readonly loading: "processing";
+};
+declare const buttonVariantClasses: {
+    readonly primary: {
+        readonly primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500";
+    };
+    readonly secondary: {
+        readonly primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+    };
+    readonly ghost: {
+        readonly primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent";
+    };
+};
+declare const buttonBaseClasses = "inline-flex items-center justify-center gap-2 whitespace-nowrap font-regular transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-2 focus-visible:border-[--stroke-color-focus-border]";
+declare const buttonIconClasses: {
+    readonly left: "mr-2";
+    readonly right: "ml-2";
+    readonly only: "";
+};
+declare const buttonLoadingClasses: {
+    readonly spinner: "animate-spin";
+    readonly container: "flex items-center justify-center gap-2";
+    readonly text: "opacity-70";
+};
+type ButtonSize = keyof typeof buttonSizes;
+type ButtonVariant = keyof typeof buttonVariants;
+type ButtonColor = keyof typeof buttonColors;
+type ButtonState = keyof typeof buttonStates;
+declare const getButtonSizeClasses: (size: ButtonSize, isIcon?: boolean) => string;
+declare const getButtonVariantClasses: (variant: ButtonVariant, color: ButtonColor) => string;
+declare const getButtonIconSize: (size: ButtonSize) => string;
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    icon?: string;
+    iconLeft?: string;
+    iconRight?: string;
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    type?: 'button' | 'submit' | 'reset';
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    asChild?: boolean;
+}
+declare const defaultButtonConfig: {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    color: ButtonColor;
+    type: "button";
+};
+declare const buttonTheme: {
+    light: {
+        focus: string;
+        disabled: string;
+    };
+    dark: {
+        focus: string;
+        disabled: string;
+    };
+};
+declare const buttonTokens: {
+    sizes: {
+        readonly sm: {
+            readonly height: "32px";
+            readonly paddingX: "8px";
+            readonly paddingY: "4px";
+            readonly fontSize: "14px";
+            readonly iconSize: "16px";
+            readonly borderRadius: "10px";
+        };
+        readonly md: {
+            readonly height: "40px";
+            readonly paddingX: "16px";
+            readonly paddingY: "8px";
+            readonly fontSize: "16px";
+            readonly iconSize: "20px";
+            readonly borderRadius: "12px";
+        };
+        readonly lg: {
+            readonly height: "48px";
+            readonly paddingX: "24px";
+            readonly paddingY: "12px";
+            readonly fontSize: "18px";
+            readonly iconSize: "24px";
+            readonly borderRadius: "16px";
+        };
+    };
+    sizeClasses: {
+        readonly sm: {
+            readonly base: "h-8 px-2 py-1 text-sm rounded-[10px]";
+            readonly icon: "h-8 w-8 rounded-[10px]";
+            readonly iconSize: "w-4 h-4";
+        };
+        readonly md: {
+            readonly base: "h-10 px-4 py-2 text-base rounded-xl";
+            readonly icon: "h-10 w-10 rounded-xl";
+            readonly iconSize: "w-5 h-5";
+        };
+        readonly lg: {
+            readonly base: "h-12 px-6 py-3 text-lg rounded-2xl";
+            readonly icon: "h-12 w-12 rounded-2xl";
+            readonly iconSize: "w-[22px] h-[22px]";
+        };
+    };
+    variants: {
+        readonly primary: "filled";
+        readonly secondary: "outlined";
+        readonly ghost: "text-only";
+        readonly icon: "icon-only";
+    };
+    colors: {
+        readonly primary: "default";
+        readonly secondary: "purple";
+        readonly success: "green";
+        readonly warning: "orange";
+        readonly destructive: "red";
+        readonly neutral: "gray";
+    };
+    states: {
+        readonly default: "normal";
+        readonly hover: "highlighted";
+        readonly pressed: "active";
+        readonly disabled: "inactive";
+        readonly loading: "processing";
+    };
+    variantClasses: {
+        readonly primary: {
+            readonly primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500";
+        };
+        readonly secondary: {
+            readonly primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        };
+        readonly ghost: {
+            readonly primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent";
+        };
+    };
+    baseClasses: string;
+    iconClasses: {
+        readonly left: "mr-2";
+        readonly right: "ml-2";
+        readonly only: "";
+    };
+    loadingClasses: {
+        readonly spinner: "animate-spin";
+        readonly container: "flex items-center justify-center gap-2";
+        readonly text: "opacity-70";
+    };
+    defaultConfig: {
+        variant: ButtonVariant;
+        size: ButtonSize;
+        color: ButtonColor;
+        type: "button";
+    };
+    theme: {
+        light: {
+            focus: string;
+            disabled: string;
+        };
+        dark: {
+            focus: string;
+            disabled: string;
+        };
+    };
+};
+declare const buttonAnimations: {
+    readonly scale: "active:scale-95";
+    readonly fadeIn: "animate-in fade-in-0 duration-200";
+    readonly fadeOut: "animate-out fade-out-0 duration-200";
+    readonly slideIn: "animate-in slide-in-from-left-1 duration-200";
+    readonly slideOut: "animate-out slide-out-to-left-1 duration-200";
+};
+declare const loadingSpinnerSVG = "\n  <svg className=\"animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n    <circle \n      className=\"opacity-25\" \n      cx=\"12\" \n      cy=\"12\" \n      r=\"10\" \n      stroke=\"currentColor\" \n      strokeWidth=\"4\"\n    />\n    <path \n      className=\"opacity-75\" \n      fill=\"currentColor\" \n      d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n";
+
+export { type ButtonColor, type ButtonProps, type ButtonSize, type ButtonState, type ButtonVariant, buttonAnimations, buttonBaseClasses, buttonColors, buttonIconClasses, buttonLoadingClasses, buttonSizeClasses, buttonSizes, buttonStates, buttonTheme, buttonTokens, buttonVariantClasses, buttonVariants, defaultButtonConfig, getButtonIconSize, getButtonSizeClasses, getButtonVariantClasses, loadingSpinnerSVG };

package/dist/tokens/buttons.d.ts

@@ -0,0 +1,277 @@
+/**
+ * Button Design Tokens - Raya Design System
+ *
+ * Defines the button system tokens including sizes, variants, colors, and states
+ * for consistent button usage across the design system.
+ */
+declare const buttonSizes: {
+    readonly sm: {
+        readonly height: "32px";
+        readonly paddingX: "8px";
+        readonly paddingY: "4px";
+        readonly fontSize: "14px";
+        readonly iconSize: "16px";
+        readonly borderRadius: "10px";
+    };
+    readonly md: {
+        readonly height: "40px";
+        readonly paddingX: "16px";
+        readonly paddingY: "8px";
+        readonly fontSize: "16px";
+        readonly iconSize: "20px";
+        readonly borderRadius: "12px";
+    };
+    readonly lg: {
+        readonly height: "48px";
+        readonly paddingX: "24px";
+        readonly paddingY: "12px";
+        readonly fontSize: "18px";
+        readonly iconSize: "24px";
+        readonly borderRadius: "16px";
+    };
+};
+declare const buttonSizeClasses: {
+    readonly sm: {
+        readonly base: "h-8 px-2 py-1 text-sm rounded-[10px]";
+        readonly icon: "h-8 w-8 rounded-[10px]";
+        readonly iconSize: "w-4 h-4";
+    };
+    readonly md: {
+        readonly base: "h-10 px-4 py-2 text-base rounded-xl";
+        readonly icon: "h-10 w-10 rounded-xl";
+        readonly iconSize: "w-5 h-5";
+    };
+    readonly lg: {
+        readonly base: "h-12 px-6 py-3 text-lg rounded-2xl";
+        readonly icon: "h-12 w-12 rounded-2xl";
+        readonly iconSize: "w-[22px] h-[22px]";
+    };
+};
+declare const buttonVariants: {
+    readonly primary: "filled";
+    readonly secondary: "outlined";
+    readonly ghost: "text-only";
+    readonly icon: "icon-only";
+};
+declare const buttonColors: {
+    readonly primary: "default";
+    readonly secondary: "purple";
+    readonly success: "green";
+    readonly warning: "orange";
+    readonly destructive: "red";
+    readonly neutral: "gray";
+};
+declare const buttonStates: {
+    readonly default: "normal";
+    readonly hover: "highlighted";
+    readonly pressed: "active";
+    readonly disabled: "inactive";
+    readonly loading: "processing";
+};
+declare const buttonVariantClasses: {
+    readonly primary: {
+        readonly primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+        readonly neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500";
+    };
+    readonly secondary: {
+        readonly primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+    };
+    readonly ghost: {
+        readonly primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent";
+        readonly neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent";
+    };
+};
+declare const buttonBaseClasses = "inline-flex items-center justify-center gap-2 whitespace-nowrap font-regular transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-2 focus-visible:border-[--stroke-color-focus-border]";
+declare const buttonIconClasses: {
+    readonly left: "mr-2";
+    readonly right: "ml-2";
+    readonly only: "";
+};
+declare const buttonLoadingClasses: {
+    readonly spinner: "animate-spin";
+    readonly container: "flex items-center justify-center gap-2";
+    readonly text: "opacity-70";
+};
+type ButtonSize = keyof typeof buttonSizes;
+type ButtonVariant = keyof typeof buttonVariants;
+type ButtonColor = keyof typeof buttonColors;
+type ButtonState = keyof typeof buttonStates;
+declare const getButtonSizeClasses: (size: ButtonSize, isIcon?: boolean) => string;
+declare const getButtonVariantClasses: (variant: ButtonVariant, color: ButtonColor) => string;
+declare const getButtonIconSize: (size: ButtonSize) => string;
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    icon?: string;
+    iconLeft?: string;
+    iconRight?: string;
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    type?: 'button' | 'submit' | 'reset';
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    asChild?: boolean;
+}
+declare const defaultButtonConfig: {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    color: ButtonColor;
+    type: "button";
+};
+declare const buttonTheme: {
+    light: {
+        focus: string;
+        disabled: string;
+    };
+    dark: {
+        focus: string;
+        disabled: string;
+    };
+};
+declare const buttonTokens: {
+    sizes: {
+        readonly sm: {
+            readonly height: "32px";
+            readonly paddingX: "8px";
+            readonly paddingY: "4px";
+            readonly fontSize: "14px";
+            readonly iconSize: "16px";
+            readonly borderRadius: "10px";
+        };
+        readonly md: {
+            readonly height: "40px";
+            readonly paddingX: "16px";
+            readonly paddingY: "8px";
+            readonly fontSize: "16px";
+            readonly iconSize: "20px";
+            readonly borderRadius: "12px";
+        };
+        readonly lg: {
+            readonly height: "48px";
+            readonly paddingX: "24px";
+            readonly paddingY: "12px";
+            readonly fontSize: "18px";
+            readonly iconSize: "24px";
+            readonly borderRadius: "16px";
+        };
+    };
+    sizeClasses: {
+        readonly sm: {
+            readonly base: "h-8 px-2 py-1 text-sm rounded-[10px]";
+            readonly icon: "h-8 w-8 rounded-[10px]";
+            readonly iconSize: "w-4 h-4";
+        };
+        readonly md: {
+            readonly base: "h-10 px-4 py-2 text-base rounded-xl";
+            readonly icon: "h-10 w-10 rounded-xl";
+            readonly iconSize: "w-5 h-5";
+        };
+        readonly lg: {
+            readonly base: "h-12 px-6 py-3 text-lg rounded-2xl";
+            readonly icon: "h-12 w-12 rounded-2xl";
+            readonly iconSize: "w-[22px] h-[22px]";
+        };
+    };
+    variants: {
+        readonly primary: "filled";
+        readonly secondary: "outlined";
+        readonly ghost: "text-only";
+        readonly icon: "icon-only";
+    };
+    colors: {
+        readonly primary: "default";
+        readonly secondary: "purple";
+        readonly success: "green";
+        readonly warning: "orange";
+        readonly destructive: "red";
+        readonly neutral: "gray";
+    };
+    states: {
+        readonly default: "normal";
+        readonly hover: "highlighted";
+        readonly pressed: "active";
+        readonly disabled: "inactive";
+        readonly loading: "processing";
+    };
+    variantClasses: {
+        readonly primary: {
+            readonly primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500";
+            readonly neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500";
+        };
+        readonly secondary: {
+            readonly primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent";
+        };
+        readonly ghost: {
+            readonly primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent";
+            readonly neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent";
+        };
+    };
+    baseClasses: string;
+    iconClasses: {
+        readonly left: "mr-2";
+        readonly right: "ml-2";
+        readonly only: "";
+    };
+    loadingClasses: {
+        readonly spinner: "animate-spin";
+        readonly container: "flex items-center justify-center gap-2";
+        readonly text: "opacity-70";
+    };
+    defaultConfig: {
+        variant: ButtonVariant;
+        size: ButtonSize;
+        color: ButtonColor;
+        type: "button";
+    };
+    theme: {
+        light: {
+            focus: string;
+            disabled: string;
+        };
+        dark: {
+            focus: string;
+            disabled: string;
+        };
+    };
+};
+declare const buttonAnimations: {
+    readonly scale: "active:scale-95";
+    readonly fadeIn: "animate-in fade-in-0 duration-200";
+    readonly fadeOut: "animate-out fade-out-0 duration-200";
+    readonly slideIn: "animate-in slide-in-from-left-1 duration-200";
+    readonly slideOut: "animate-out slide-out-to-left-1 duration-200";
+};
+declare const loadingSpinnerSVG = "\n  <svg className=\"animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n    <circle \n      className=\"opacity-25\" \n      cx=\"12\" \n      cy=\"12\" \n      r=\"10\" \n      stroke=\"currentColor\" \n      strokeWidth=\"4\"\n    />\n    <path \n      className=\"opacity-75\" \n      fill=\"currentColor\" \n      d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n";
+
+export { type ButtonColor, type ButtonProps, type ButtonSize, type ButtonState, type ButtonVariant, buttonAnimations, buttonBaseClasses, buttonColors, buttonIconClasses, buttonLoadingClasses, buttonSizeClasses, buttonSizes, buttonStates, buttonTheme, buttonTokens, buttonVariantClasses, buttonVariants, defaultButtonConfig, getButtonIconSize, getButtonSizeClasses, getButtonVariantClasses, loadingSpinnerSVG };