@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/buttons.js

@@ -0,0 +1,191 @@
+'use strict';
+
+// src/tokens/buttons.ts
+var buttonSizes = {
+  sm: {
+    height: "32px",
+    paddingX: "8px",
+    paddingY: "4px",
+    fontSize: "14px",
+    iconSize: "16px",
+    borderRadius: "10px"
+  },
+  md: {
+    height: "40px",
+    paddingX: "16px",
+    paddingY: "8px",
+    fontSize: "16px",
+    iconSize: "20px",
+    borderRadius: "12px"
+  },
+  lg: {
+    height: "48px",
+    paddingX: "24px",
+    paddingY: "12px",
+    fontSize: "18px",
+    iconSize: "24px",
+    borderRadius: "16px"
+  }
+};
+var buttonSizeClasses = {
+  sm: {
+    base: "h-8 px-2 py-1 text-sm rounded-[10px]",
+    icon: "h-8 w-8 rounded-[10px]",
+    iconSize: "w-4 h-4"
+  },
+  md: {
+    base: "h-10 px-4 py-2 text-base rounded-xl",
+    icon: "h-10 w-10 rounded-xl",
+    iconSize: "w-5 h-5"
+  },
+  lg: {
+    base: "h-12 px-6 py-3 text-lg rounded-2xl",
+    icon: "h-12 w-12 rounded-2xl",
+    iconSize: "w-[22px] h-[22px]"
+  }
+};
+var buttonVariants = {
+  primary: "filled",
+  secondary: "outlined",
+  ghost: "text-only",
+  icon: "icon-only"
+};
+var buttonColors = {
+  primary: "default",
+  secondary: "purple",
+  success: "green",
+  warning: "orange",
+  destructive: "red",
+  neutral: "gray"
+};
+var buttonStates = {
+  default: "normal",
+  hover: "highlighted",
+  pressed: "active",
+  disabled: "inactive",
+  loading: "processing"
+};
+var buttonVariantClasses = {
+  // Primary variants
+  primary: {
+    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",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500"
+  },
+  // Secondary variants (outlined)
+  secondary: {
+    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",
+    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",
+    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",
+    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",
+    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",
+    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"
+  },
+  // Ghost variants (text only)
+  ghost: {
+    primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent",
+    warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent",
+    destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent",
+    neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent"
+  }
+};
+var 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]";
+var buttonIconClasses = {
+  left: "mr-2",
+  right: "ml-2",
+  only: ""
+};
+var buttonLoadingClasses = {
+  spinner: "animate-spin",
+  container: "flex items-center justify-center gap-2",
+  text: "opacity-70"
+};
+var getButtonSizeClasses = (size, isIcon) => {
+  return isIcon ? buttonSizeClasses[size].icon : buttonSizeClasses[size].base;
+};
+var getButtonVariantClasses = (variant, color) => {
+  var _a;
+  if (variant === "icon") {
+    return buttonVariantClasses.ghost[color];
+  }
+  return ((_a = buttonVariantClasses[variant]) == null ? void 0 : _a[color]) || "";
+};
+var getButtonIconSize = (size) => {
+  return buttonSizeClasses[size].iconSize;
+};
+var defaultButtonConfig = {
+  variant: "primary",
+  size: "md",
+  color: "primary",
+  type: "button"
+};
+var buttonTheme = {
+  light: {
+    focus: "focus-visible:ring-ring",
+    disabled: "disabled:opacity-50"
+  },
+  dark: {
+    focus: "focus-visible:ring-ring",
+    disabled: "disabled:opacity-50"
+  }
+};
+var buttonTokens = {
+  sizes: buttonSizes,
+  sizeClasses: buttonSizeClasses,
+  variants: buttonVariants,
+  colors: buttonColors,
+  states: buttonStates,
+  variantClasses: buttonVariantClasses,
+  baseClasses: buttonBaseClasses,
+  iconClasses: buttonIconClasses,
+  loadingClasses: buttonLoadingClasses,
+  defaultConfig: defaultButtonConfig,
+  theme: buttonTheme
+};
+var buttonAnimations = {
+  scale: "active:scale-95",
+  fadeIn: "animate-in fade-in-0 duration-200",
+  fadeOut: "animate-out fade-out-0 duration-200",
+  slideIn: "animate-in slide-in-from-left-1 duration-200",
+  slideOut: "animate-out slide-out-to-left-1 duration-200"
+};
+var loadingSpinnerSVG = `
+  <svg className="animate-spin" fill="none" viewBox="0 0 24 24">
+    <circle 
+      className="opacity-25" 
+      cx="12" 
+      cy="12" 
+      r="10" 
+      stroke="currentColor" 
+      strokeWidth="4"
+    />
+    <path 
+      className="opacity-75" 
+      fill="currentColor" 
+      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"
+    />
+  </svg>
+`;
+
+exports.buttonAnimations = buttonAnimations;
+exports.buttonBaseClasses = buttonBaseClasses;
+exports.buttonColors = buttonColors;
+exports.buttonIconClasses = buttonIconClasses;
+exports.buttonLoadingClasses = buttonLoadingClasses;
+exports.buttonSizeClasses = buttonSizeClasses;
+exports.buttonSizes = buttonSizes;
+exports.buttonStates = buttonStates;
+exports.buttonTheme = buttonTheme;
+exports.buttonTokens = buttonTokens;
+exports.buttonVariantClasses = buttonVariantClasses;
+exports.buttonVariants = buttonVariants;
+exports.defaultButtonConfig = defaultButtonConfig;
+exports.getButtonIconSize = getButtonIconSize;
+exports.getButtonSizeClasses = getButtonSizeClasses;
+exports.getButtonVariantClasses = getButtonVariantClasses;
+exports.loadingSpinnerSVG = loadingSpinnerSVG;

package/dist/tokens/buttons.mjs

@@ -0,0 +1,173 @@
+// src/tokens/buttons.ts
+var buttonSizes = {
+  sm: {
+    height: "32px",
+    paddingX: "8px",
+    paddingY: "4px",
+    fontSize: "14px",
+    iconSize: "16px",
+    borderRadius: "10px"
+  },
+  md: {
+    height: "40px",
+    paddingX: "16px",
+    paddingY: "8px",
+    fontSize: "16px",
+    iconSize: "20px",
+    borderRadius: "12px"
+  },
+  lg: {
+    height: "48px",
+    paddingX: "24px",
+    paddingY: "12px",
+    fontSize: "18px",
+    iconSize: "24px",
+    borderRadius: "16px"
+  }
+};
+var buttonSizeClasses = {
+  sm: {
+    base: "h-8 px-2 py-1 text-sm rounded-[10px]",
+    icon: "h-8 w-8 rounded-[10px]",
+    iconSize: "w-4 h-4"
+  },
+  md: {
+    base: "h-10 px-4 py-2 text-base rounded-xl",
+    icon: "h-10 w-10 rounded-xl",
+    iconSize: "w-5 h-5"
+  },
+  lg: {
+    base: "h-12 px-6 py-3 text-lg rounded-2xl",
+    icon: "h-12 w-12 rounded-2xl",
+    iconSize: "w-[22px] h-[22px]"
+  }
+};
+var buttonVariants = {
+  primary: "filled",
+  secondary: "outlined",
+  ghost: "text-only",
+  icon: "icon-only"
+};
+var buttonColors = {
+  primary: "default",
+  secondary: "purple",
+  success: "green",
+  warning: "orange",
+  destructive: "red",
+  neutral: "gray"
+};
+var buttonStates = {
+  default: "normal",
+  hover: "highlighted",
+  pressed: "active",
+  disabled: "inactive",
+  loading: "processing"
+};
+var buttonVariantClasses = {
+  // Primary variants
+  primary: {
+    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",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500"
+  },
+  // Secondary variants (outlined)
+  secondary: {
+    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",
+    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",
+    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",
+    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",
+    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",
+    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"
+  },
+  // Ghost variants (text only)
+  ghost: {
+    primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent",
+    warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent",
+    destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent",
+    neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent"
+  }
+};
+var 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]";
+var buttonIconClasses = {
+  left: "mr-2",
+  right: "ml-2",
+  only: ""
+};
+var buttonLoadingClasses = {
+  spinner: "animate-spin",
+  container: "flex items-center justify-center gap-2",
+  text: "opacity-70"
+};
+var getButtonSizeClasses = (size, isIcon) => {
+  return isIcon ? buttonSizeClasses[size].icon : buttonSizeClasses[size].base;
+};
+var getButtonVariantClasses = (variant, color) => {
+  var _a;
+  if (variant === "icon") {
+    return buttonVariantClasses.ghost[color];
+  }
+  return ((_a = buttonVariantClasses[variant]) == null ? void 0 : _a[color]) || "";
+};
+var getButtonIconSize = (size) => {
+  return buttonSizeClasses[size].iconSize;
+};
+var defaultButtonConfig = {
+  variant: "primary",
+  size: "md",
+  color: "primary",
+  type: "button"
+};
+var buttonTheme = {
+  light: {
+    focus: "focus-visible:ring-ring",
+    disabled: "disabled:opacity-50"
+  },
+  dark: {
+    focus: "focus-visible:ring-ring",
+    disabled: "disabled:opacity-50"
+  }
+};
+var buttonTokens = {
+  sizes: buttonSizes,
+  sizeClasses: buttonSizeClasses,
+  variants: buttonVariants,
+  colors: buttonColors,
+  states: buttonStates,
+  variantClasses: buttonVariantClasses,
+  baseClasses: buttonBaseClasses,
+  iconClasses: buttonIconClasses,
+  loadingClasses: buttonLoadingClasses,
+  defaultConfig: defaultButtonConfig,
+  theme: buttonTheme
+};
+var buttonAnimations = {
+  scale: "active:scale-95",
+  fadeIn: "animate-in fade-in-0 duration-200",
+  fadeOut: "animate-out fade-out-0 duration-200",
+  slideIn: "animate-in slide-in-from-left-1 duration-200",
+  slideOut: "animate-out slide-out-to-left-1 duration-200"
+};
+var loadingSpinnerSVG = `
+  <svg className="animate-spin" fill="none" viewBox="0 0 24 24">
+    <circle 
+      className="opacity-25" 
+      cx="12" 
+      cy="12" 
+      r="10" 
+      stroke="currentColor" 
+      strokeWidth="4"
+    />
+    <path 
+      className="opacity-75" 
+      fill="currentColor" 
+      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"
+    />
+  </svg>
+`;
+
+export { buttonAnimations, buttonBaseClasses, buttonColors, buttonIconClasses, buttonLoadingClasses, buttonSizeClasses, buttonSizes, buttonStates, buttonTheme, buttonTokens, buttonVariantClasses, buttonVariants, defaultButtonConfig, getButtonIconSize, getButtonSizeClasses, getButtonVariantClasses, loadingSpinnerSVG };

package/dist/tokens/colors.d.mts

@@ -0,0 +1,65 @@
+declare const colors: {
+    primary: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
+    };
+    secondary: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
+    };
+    neutral: {
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+    red: {
+        600: string;
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+    };
+    yellow: {
+        300: string;
+        200: string;
+        100: string;
+        10: string;
+    };
+    green: {
+        600: string;
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+        10: string;
+    };
+};
+
+export { colors };

package/dist/tokens/colors.d.ts

@@ -0,0 +1,65 @@
+declare const colors: {
+    primary: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
+    };
+    secondary: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+        1100: string;
+        1200: string;
+    };
+    neutral: {
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+    red: {
+        600: string;
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+    };
+    yellow: {
+        300: string;
+        200: string;
+        100: string;
+        10: string;
+    };
+    green: {
+        600: string;
+        500: string;
+        400: string;
+        300: string;
+        200: string;
+        100: string;
+        10: string;
+    };
+};
+
+export { colors };

package/dist/tokens/colors.js

@@ -0,0 +1,68 @@
+'use strict';
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    100: "#faf9fb",
+    200: "#eeedf1",
+    300: "#dbd9e1",
+    400: "#c3c0cd",
+    500: "#a8a3b6",
+    600: "#8b859e",
+    700: "#706984",
+    800: "#585267",
+    900: "#423e4e",
+    1e3: "#312e3a",
+    1100: "#26242d",
+    1200: "#222028"
+  },
+  secondary: {
+    100: "#fbf7fc",
+    200: "#f2e4f6",
+    300: "#e4c7ed",
+    400: "#d3a2e1",
+    500: "#c07ad4",
+    600: "#ac50c7",
+    700: "#9037ab",
+    800: "#722b86",
+    900: "#592269",
+    1e3: "#481b55",
+    1100: "#42194e",
+    1200: "#1d0b23"
+  },
+  neutral: {
+    500: "#bdb3b3",
+    400: "#bdb3b3",
+    300: "#d2caca",
+    200: "#e7e2e2",
+    100: "#fbfafa",
+    10: "#ffffff",
+    20: "#f9f9f9",
+    30: "#f2f2f2"
+  },
+  red: {
+    600: "#dc2626",
+    500: "#ee4444",
+    400: "#e86e6e",
+    300: "#fca5a5",
+    200: "#e86e6e",
+    100: "#f3b7b7"
+  },
+  yellow: {
+    300: "#f59e0b",
+    200: "#f8be5c",
+    100: "#fcdfae",
+    10: "#fcdfaeB3"
+  },
+  green: {
+    600: "#096849",
+    500: "#10b981",
+    400: "#10b981",
+    300: "#10b981",
+    200: "#10b981",
+    100: "#D0FAE5",
+    10: "#beba6bB3"
+  }
+};
+
+exports.colors = colors;

package/dist/tokens/colors.mjs

@@ -0,0 +1,66 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    100: "#faf9fb",
+    200: "#eeedf1",
+    300: "#dbd9e1",
+    400: "#c3c0cd",
+    500: "#a8a3b6",
+    600: "#8b859e",
+    700: "#706984",
+    800: "#585267",
+    900: "#423e4e",
+    1e3: "#312e3a",
+    1100: "#26242d",
+    1200: "#222028"
+  },
+  secondary: {
+    100: "#fbf7fc",
+    200: "#f2e4f6",
+    300: "#e4c7ed",
+    400: "#d3a2e1",
+    500: "#c07ad4",
+    600: "#ac50c7",
+    700: "#9037ab",
+    800: "#722b86",
+    900: "#592269",
+    1e3: "#481b55",
+    1100: "#42194e",
+    1200: "#1d0b23"
+  },
+  neutral: {
+    500: "#bdb3b3",
+    400: "#bdb3b3",
+    300: "#d2caca",
+    200: "#e7e2e2",
+    100: "#fbfafa",
+    10: "#ffffff",
+    20: "#f9f9f9",
+    30: "#f2f2f2"
+  },
+  red: {
+    600: "#dc2626",
+    500: "#ee4444",
+    400: "#e86e6e",
+    300: "#fca5a5",
+    200: "#e86e6e",
+    100: "#f3b7b7"
+  },
+  yellow: {
+    300: "#f59e0b",
+    200: "#f8be5c",
+    100: "#fcdfae",
+    10: "#fcdfaeB3"
+  },
+  green: {
+    600: "#096849",
+    500: "#10b981",
+    400: "#10b981",
+    300: "#10b981",
+    200: "#10b981",
+    100: "#D0FAE5",
+    10: "#beba6bB3"
+  }
+};
+
+export { colors };