@vtx-ui/react 0.0.1-beta.1 → 0.0.1-beta.10

package/dist/types/theme/tokens.d.ts

@@ -2,257 +2,312 @@
  * Design tokens for the VTX UI library
  * These tokens define the core visual language of the design system
  */
-export declare const COLOR_KEYS: number[];
+export declare const COLOR_KEYS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 /**
- * Normalizes a colors object so that any string value (e.g., primary: "#fff")
- * is expanded to an object with all color keys, while objects are left as-is.
- * Direct object keys (e.g., primary: { 100: "#fff" }) are preserved.
+ * Generates a color palette from a single hex color
+ * Creates lighter shades (50-400) and darker shades (600-900) based on the base color (500)
+ */
+export declare function generateColorShades(hexColor: string): Record<number, string>;
+/**
+ * Normalizes a colors object so that:
+ * - String values (e.g., primary: "#fff") are expanded to full color palettes
+ * - Object values with specific shades are preserved and merged with generated shades
+ * - Allows mixing: primary: { 500: "#fff", 600: "#000" } will generate other shades from 500
  */
 export declare function normalizeColors(colors: Record<string, any>): Record<string, any>;
 export declare const tokens: {
-    readonly colors: {
-        readonly primary: {
-            readonly 50: "#eff6ff";
-            readonly 100: "#dbeafe";
-            readonly 200: "#bfdbfe";
-            readonly 300: "#93c5fd";
-            readonly 400: "#60a5fa";
-            readonly 500: "#3b82f6";
-            readonly 600: "#2563eb";
-            readonly 700: "#1d4ed8";
-            readonly 800: "#1e40af";
-            readonly 900: "#1e3a8a";
-        };
-        readonly secondary: {
-            readonly 50: "#f5f3ff";
-            readonly 100: "#ede9fe";
-            readonly 200: "#ddd6fe";
-            readonly 300: "#c4b5fd";
-            readonly 400: "#a78bfa";
-            readonly 500: "#8b5cf6";
-            readonly 600: "#7c3aed";
-            readonly 700: "#6d28d9";
-            readonly 800: "#5b21b6";
-            readonly 900: "#4c1d95";
+    colors: {
+        primary: Record<number, string>;
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
         };
-        readonly neutral: {
-            readonly 50: "#fafafa";
-            readonly 100: "#f5f5f5";
-            readonly 200: "#e5e5e5";
-            readonly 300: "#d4d4d4";
-            readonly 400: "#a3a3a3";
-            readonly 500: "#737373";
-            readonly 600: "#525252";
-            readonly 700: "#404040";
-            readonly 800: "#262626";
-            readonly 900: "#171717";
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
         };
-        readonly success: {
-            readonly 50: "#f0fdf4";
-            readonly 500: "#22c55e";
-            readonly 600: "#16a34a";
-            readonly 700: "#15803d";
+        success: {
+            50: string;
+            500: string;
+            600: string;
+            700: string;
         };
-        readonly warning: {
-            readonly 50: "#fffbeb";
-            readonly 500: "#f59e0b";
-            readonly 600: "#d97706";
-            readonly 700: "#b45309";
+        warning: {
+            50: string;
+            500: string;
+            600: string;
+            700: string;
         };
-        readonly error: {
-            readonly 50: "#fef2f2";
-            readonly 500: "#ef4444";
-            readonly 600: "#dc2626";
-            readonly 700: "#b91c1c";
+        error: {
+            50: string;
+            500: string;
+            600: string;
+            700: string;
         };
-        readonly info: {
-            readonly 50: "#eff6ff";
-            readonly 500: "#3b82f6";
-            readonly 600: "#2563eb";
-            readonly 700: "#1d4ed8";
+        info: {
+            50: string;
+            500: string;
+            600: string;
+            700: string;
         };
     };
-    readonly spacing: {
-        readonly 0: "0";
-        readonly 1: "0.25rem";
-        readonly 2: "0.5rem";
-        readonly 3: "0.75rem";
-        readonly 4: "1rem";
-        readonly 5: "1.25rem";
-        readonly 6: "1.5rem";
-        readonly 8: "2rem";
-        readonly 10: "2.5rem";
-        readonly 12: "3rem";
-        readonly 16: "4rem";
-        readonly 20: "5rem";
-        readonly 24: "6rem";
+    spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+        24: string;
     };
-    readonly typography: {
-        readonly fontFamily: {
-            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
-            readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
+    typography: {
+        fontFamily: {
+            sans: string;
+            mono: string;
         };
-        readonly fontSize: {
-            readonly xs: "0.75rem";
-            readonly sm: "0.875rem";
-            readonly base: "1rem";
-            readonly lg: "1.125rem";
-            readonly xl: "1.25rem";
-            readonly '2xl': "1.5rem";
-            readonly '3xl': "1.875rem";
-            readonly '4xl': "2.25rem";
-            readonly '5xl': "3rem";
-            readonly '6xl': "3.75rem";
-            readonly '7xl': "4.5rem";
-            readonly '8xl': "6rem";
-            readonly '9xl': "8rem";
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+            '7xl': string;
+            '8xl': string;
+            '9xl': string;
         };
-        readonly fontWeight: {
-            readonly thin: "100";
-            readonly extralight: "200";
-            readonly light: "300";
-            readonly normal: "400";
-            readonly medium: "500";
-            readonly semibold: "600";
-            readonly bold: "700";
-            readonly extrabold: "800";
-            readonly black: "900";
+        fontWeight: {
+            thin: string;
+            extralight: string;
+            light: string;
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+            extrabold: string;
+            black: string;
         };
-        readonly lineHeight: {
-            readonly none: "1";
-            readonly tight: "1.25";
-            readonly snug: "1.375";
-            readonly normal: "1.5";
-            readonly relaxed: "1.625";
-            readonly loose: "2";
+        lineHeight: {
+            none: string;
+            tight: string;
+            snug: string;
+            normal: string;
+            relaxed: string;
+            loose: string;
         };
-        readonly letterSpacing: {
-            readonly tighter: "-0.05em";
-            readonly tight: "-0.025em";
-            readonly normal: "0";
-            readonly wide: "0.025em";
-            readonly wider: "0.05em";
-            readonly widest: "0.1em";
+        letterSpacing: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
         };
-        readonly textVariants: {
-            readonly h1: {
-                readonly fontSize: "3.75rem";
-                readonly fontWeight: "700";
-                readonly lineHeight: "1.2";
-                readonly letterSpacing: "-0.025em";
+        textVariants: {
+            h1: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly h2: {
-                readonly fontSize: "3rem";
-                readonly fontWeight: "700";
-                readonly lineHeight: "1.25";
-                readonly letterSpacing: "-0.025em";
+            h2: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly h3: {
-                readonly fontSize: "2.25rem";
-                readonly fontWeight: "600";
-                readonly lineHeight: "1.3";
-                readonly letterSpacing: "-0.025em";
+            h3: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly h4: {
-                readonly fontSize: "1.875rem";
-                readonly fontWeight: "600";
-                readonly lineHeight: "1.35";
-                readonly letterSpacing: "0";
+            h4: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly h5: {
-                readonly fontSize: "1.5rem";
-                readonly fontWeight: "600";
-                readonly lineHeight: "1.4";
-                readonly letterSpacing: "0";
+            h5: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly h6: {
-                readonly fontSize: "1.25rem";
-                readonly fontWeight: "600";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0";
+            h6: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly body1: {
-                readonly fontSize: "1rem";
-                readonly fontWeight: "400";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0";
+            body1: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly body2: {
-                readonly fontSize: "0.875rem";
-                readonly fontWeight: "400";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0";
+            body2: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly subtitle1: {
-                readonly fontSize: "1.125rem";
-                readonly fontWeight: "500";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0";
+            subtitle1: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly subtitle2: {
-                readonly fontSize: "1rem";
-                readonly fontWeight: "500";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0";
+            subtitle2: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly caption: {
-                readonly fontSize: "0.75rem";
-                readonly fontWeight: "400";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0.025em";
+            caption: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly overline: {
-                readonly fontSize: "0.75rem";
-                readonly fontWeight: "600";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0.1em";
-                readonly textTransform: "uppercase";
+            overline: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
+                textTransform: string;
             };
-            readonly button: {
-                readonly fontSize: "0.875rem";
-                readonly fontWeight: "600";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0.025em";
+            button: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
-            readonly label: {
-                readonly fontSize: "0.875rem";
-                readonly fontWeight: "500";
-                readonly lineHeight: "1.5";
-                readonly letterSpacing: "0";
+            label: {
+                fontSize: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
             };
         };
     };
-    readonly borderRadius: {
-        readonly none: "0";
-        readonly sm: "0.125rem";
-        readonly base: "0.25rem";
-        readonly md: "0.375rem";
-        readonly lg: "0.5rem";
-        readonly xl: "0.75rem";
-        readonly '2xl': "1rem";
-        readonly full: "9999px";
+    borderRadius: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
     };
-    readonly shadows: {
-        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-        readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-        readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-        readonly none: "none";
+    shadows: {
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        none: string;
     };
-    readonly transitions: {
-        readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
-        readonly base: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
-        readonly slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)";
+    transitions: {
+        fast: string;
+        base: string;
+        slow: string;
     };
-    readonly zIndex: {
-        readonly dropdown: 1000;
-        readonly sticky: 1100;
-        readonly modal: 1200;
-        readonly tooltip: 1300;
-        readonly notification: 1400;
+    zIndex: {
+        dropdown: number;
+        sticky: number;
+        modal: number;
+        tooltip: number;
+        notification: number;
     };
 };
-export type Tokens = typeof tokens;
-export type ColorScale = keyof typeof tokens.colors;
-export type ColorShade = keyof typeof tokens.colors.primary;
+export type ColorPalette = {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+};
+export type Colors = {
+    primary: ColorPalette;
+    secondary: ColorPalette;
+    neutral: ColorPalette;
+    success: ColorPalette;
+    warning: ColorPalette;
+    error: ColorPalette;
+    info: ColorPalette;
+};
+export type CustomColorValue = string | ColorPalette;
+export type CustomColors = {
+    primary?: CustomColorValue;
+    secondary?: CustomColorValue;
+    neutral?: CustomColorValue;
+    success?: CustomColorValue;
+    warning?: CustomColorValue;
+    error?: CustomColorValue;
+    info?: CustomColorValue;
+    [key: string]: CustomColorValue | undefined;
+};
+export type Tokens = {
+    colors: Colors;
+    spacing: Record<string | number, string>;
+    typography: typeof tokens.typography;
+    borderRadius: Record<string, string>;
+    shadows: Record<string, string>;
+    transitions: Record<string, string>;
+    zIndex: Record<string, number>;
+};
+export type CustomTokens = {
+    colors?: CustomColors;
+    spacing?: Partial<Tokens['spacing']>;
+    typography?: Partial<Tokens['typography']>;
+    borderRadius?: Partial<Tokens['borderRadius']>;
+    shadows?: Partial<Tokens['shadows']>;
+    transitions?: Partial<Tokens['transitions']>;
+    zIndex?: Partial<Tokens['zIndex']>;
+};
+export type ColorScale = keyof Colors;
+export type ColorShade = keyof ColorPalette;
+/**
+ * Helper function for creating custom tokens with proper type inference
+ * @example
+ * const myTokens = createCustomTokens({
+ *   colors: {
+ *     primary: '#0c6b58',  // Auto-generates 50-900 shades
+ *     secondary: { 500: '#ff5722', 600: '#f4511e' },  // Partial palette
+ *   }
+ * });
+ */
+export declare function createCustomTokens(tokens: CustomTokens): CustomTokens;

package/dist/types/utils/parseClass.d.ts

@@ -0,0 +1 @@
+export declare function parseClass(className: string): string;