@veevarts/design-system 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/tailwind/index.d.ts

@@ -0,0 +1,541 @@
+import { colors } from '../tokens/colors';
+import { typography } from '../tokens/typography';
+import { spacing } from '../tokens/spacing';
+export { colors, typography, spacing };
+export interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    DEFAULT: string;
+}
+export interface HeroUIColorOverrides {
+    primary?: string | Partial<ColorPalette>;
+    secondary?: string | Partial<ColorPalette>;
+    success?: string | Partial<ColorPalette>;
+    warning?: string | Partial<ColorPalette>;
+    danger?: string | Partial<ColorPalette>;
+}
+export interface HeroUIConfigOverrides {
+    colors?: HeroUIColorOverrides;
+    themes?: Record<string, unknown>;
+}
+export interface HeroUIThemeColors {
+    primary: ColorPalette;
+    secondary: ColorPalette;
+    danger: ColorPalette;
+    success: ColorPalette;
+    warning: ColorPalette;
+}
+export interface HeroUIConfig {
+    themes: {
+        light: {
+            colors: HeroUIThemeColors;
+        };
+    };
+}
+/**
+ * Tailwind theme extension with Veevart tokens
+ */
+export declare const tailwindTheme: {
+    colors: {
+        secondary: "#000000";
+        success: "#057A54";
+        warning: "#F5A524";
+        danger: "#B62214";
+        info: "#2563EB";
+        white: "#FFFFFF";
+        black: "#000000";
+        gray: {
+            readonly 50: "#F9FAFB";
+            readonly 100: "#F3F4F6";
+            readonly 200: "#E5E7EB";
+            readonly 300: "#D1D5DB";
+            readonly 400: "#9CA3AF";
+            readonly 500: "#6B7280";
+            readonly 600: "#4B5563";
+            readonly 700: "#374151";
+            readonly 800: "#1F2937";
+            readonly 900: "#111827";
+        };
+        primary: {
+            readonly 50: "#fef5f1";
+            readonly 100: "#fde8e0";
+            readonly 200: "#fbd5c7";
+            readonly 300: "#f7b79f";
+            readonly 400: "#f18d68";
+            readonly 500: "#C14615";
+            readonly 600: "#a83b11";
+            readonly 700: "#8b2f0e";
+            readonly 800: "#73260d";
+            readonly 900: "#5f210c";
+            readonly DEFAULT: "#C14615";
+        };
+    };
+    fontFamily: {
+        readonly primary: "\"NeueMontreal\", system-ui, sans-serif";
+        readonly secondary: "\"Scholar\", Georgia, serif";
+        readonly sans: "\"NeueMontreal\", system-ui, sans-serif";
+        readonly serif: "\"Scholar\", Georgia, serif";
+        readonly mono: "\"JetBrains Mono\", Consolas, monospace";
+    };
+    spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+        readonly '3xl': "4rem";
+        readonly '4xl': "6rem";
+        readonly '5xl': "8rem";
+    };
+    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";
+    };
+    fontWeight: {
+        readonly normal: "400";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    lineHeight: {
+        readonly tight: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.75";
+    };
+};
+/**
+ * Deep merge utility for objects
+ */
+export declare function deepMerge<T>(target: T, source: Partial<T>): T;
+/**
+ * Creates a color palette from a single color value
+ * If a string is provided, it creates a basic palette with that color as the base
+ * If an object with shades is provided, it uses those directly
+ */
+export declare function normalizeColorPalette(color: string | Partial<ColorPalette>, defaultPalette: ColorPalette): ColorPalette;
+/**
+ * Default HeroUI theme configuration
+ */
+export declare const defaultHeroUITheme: {
+    light: {
+        colors: {
+            primary: {
+                readonly 50: "#fef5f1";
+                readonly 100: "#fde8e0";
+                readonly 200: "#fbd5c7";
+                readonly 300: "#f7b79f";
+                readonly 400: "#f18d68";
+                readonly 500: "#C14615";
+                readonly 600: "#a83b11";
+                readonly 700: "#8b2f0e";
+                readonly 800: "#73260d";
+                readonly 900: "#5f210c";
+                readonly DEFAULT: "#C14615";
+            };
+            secondary: {
+                readonly 50: "#f9fafb";
+                readonly 100: "#f3f4f6";
+                readonly 200: "#e5e7eb";
+                readonly 300: "#d1d5db";
+                readonly 400: "#9ca3af";
+                readonly 500: "#000000";
+                readonly 600: "#000000";
+                readonly 700: "#000000";
+                readonly 800: "#000000";
+                readonly 900: "#000000";
+                readonly DEFAULT: "#000000";
+            };
+            danger: {
+                readonly 50: "#fef2f2";
+                readonly 100: "#fee2e2";
+                readonly 200: "#fecaca";
+                readonly 300: "#fca5a5";
+                readonly 400: "#f87171";
+                readonly 500: "#B62214";
+                readonly 600: "#a31e12";
+                readonly 700: "#8b1a0f";
+                readonly 800: "#73160d";
+                readonly 900: "#5c120a";
+                readonly DEFAULT: "#B62214";
+            };
+            success: {
+                readonly 50: "#ecfdf5";
+                readonly 100: "#d1fae5";
+                readonly 200: "#a7f3d0";
+                readonly 300: "#6ee7b7";
+                readonly 400: "#34d399";
+                readonly 500: "#057A54";
+                readonly 600: "#046c4a";
+                readonly 700: "#035e40";
+                readonly 800: "#025035";
+                readonly 900: "#01422b";
+                readonly DEFAULT: "#057A54";
+            };
+            warning: {
+                readonly 50: "#fffbeb";
+                readonly 100: "#fef3c7";
+                readonly 200: "#fde68a";
+                readonly 300: "#fcd34d";
+                readonly 400: "#fbbf24";
+                readonly 500: "#F5A524";
+                readonly 600: "#d97706";
+                readonly 700: "#b45309";
+                readonly 800: "#92400e";
+                readonly 900: "#78350f";
+                readonly DEFAULT: "#F5A524";
+            };
+        };
+    };
+};
+/**
+ * Creates HeroUI configuration with optional overrides
+ *
+ * @param overrides - Configuration overrides
+ * @returns HeroUI plugin configuration
+ *
+ * @example
+ * // Simple color override
+ * createHeroUIConfig({
+ *     colors: {
+ *         primary: '#FF0000',
+ *     },
+ * });
+ *
+ * @example
+ * // Full palette override
+ * createHeroUIConfig({
+ *     colors: {
+ *         primary: {
+ *             50: '#fff1f1',
+ *             100: '#ffe1e1',
+ *             500: '#FF0000',
+ *             DEFAULT: '#FF0000',
+ *         },
+ *     },
+ * });
+ */
+export declare function createHeroUIConfig(overrides?: HeroUIConfigOverrides): HeroUIConfig;
+/**
+ * Veevart Design System Tailwind preset
+ *
+ * Use this preset in your tailwind.config.js to get all Veevart tokens
+ * and styling defaults.
+ *
+ * @example
+ * const { veevartPreset } = require('@veevarts/design-system/tailwind');
+ *
+ * module.exports = {
+ *     presets: [veevartPreset],
+ *     content: [...],
+ * };
+ */
+export declare const veevartPreset: {
+    theme: {
+        extend: {
+            colors: {
+                secondary: "#000000";
+                success: "#057A54";
+                warning: "#F5A524";
+                danger: "#B62214";
+                info: "#2563EB";
+                white: "#FFFFFF";
+                black: "#000000";
+                gray: {
+                    readonly 50: "#F9FAFB";
+                    readonly 100: "#F3F4F6";
+                    readonly 200: "#E5E7EB";
+                    readonly 300: "#D1D5DB";
+                    readonly 400: "#9CA3AF";
+                    readonly 500: "#6B7280";
+                    readonly 600: "#4B5563";
+                    readonly 700: "#374151";
+                    readonly 800: "#1F2937";
+                    readonly 900: "#111827";
+                };
+                primary: {
+                    readonly 50: "#fef5f1";
+                    readonly 100: "#fde8e0";
+                    readonly 200: "#fbd5c7";
+                    readonly 300: "#f7b79f";
+                    readonly 400: "#f18d68";
+                    readonly 500: "#C14615";
+                    readonly 600: "#a83b11";
+                    readonly 700: "#8b2f0e";
+                    readonly 800: "#73260d";
+                    readonly 900: "#5f210c";
+                    readonly DEFAULT: "#C14615";
+                };
+            };
+            fontFamily: {
+                readonly primary: "\"NeueMontreal\", system-ui, sans-serif";
+                readonly secondary: "\"Scholar\", Georgia, serif";
+                readonly sans: "\"NeueMontreal\", system-ui, sans-serif";
+                readonly serif: "\"Scholar\", Georgia, serif";
+                readonly mono: "\"JetBrains Mono\", Consolas, monospace";
+            };
+            spacing: {
+                readonly xs: "0.25rem";
+                readonly sm: "0.5rem";
+                readonly md: "1rem";
+                readonly lg: "1.5rem";
+                readonly xl: "2rem";
+                readonly '2xl': "3rem";
+                readonly '3xl': "4rem";
+                readonly '4xl': "6rem";
+                readonly '5xl': "8rem";
+            };
+            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";
+            };
+            fontWeight: {
+                readonly normal: "400";
+                readonly semibold: "600";
+                readonly bold: "700";
+            };
+            lineHeight: {
+                readonly tight: "1.25";
+                readonly normal: "1.5";
+                readonly relaxed: "1.75";
+            };
+        };
+    };
+    darkMode: "class";
+};
+/**
+ * All tokens bundled together for convenience
+ */
+export declare const tokens: {
+    colors: {
+        readonly brand: {
+            readonly primary: {
+                readonly 50: "#fef5f1";
+                readonly 100: "#fde8e0";
+                readonly 200: "#fbd5c7";
+                readonly 300: "#f7b79f";
+                readonly 400: "#f18d68";
+                readonly 500: "#C14615";
+                readonly 600: "#a83b11";
+                readonly 700: "#8b2f0e";
+                readonly 800: "#73260d";
+                readonly 900: "#5f210c";
+                readonly DEFAULT: "#C14615";
+            };
+        };
+        readonly semantic: {
+            readonly secondary: "#000000";
+            readonly success: "#057A54";
+            readonly warning: "#F5A524";
+            readonly danger: "#B62214";
+            readonly info: "#2563EB";
+        };
+        readonly neutral: {
+            readonly white: "#FFFFFF";
+            readonly black: "#000000";
+            readonly gray: {
+                readonly 50: "#F9FAFB";
+                readonly 100: "#F3F4F6";
+                readonly 200: "#E5E7EB";
+                readonly 300: "#D1D5DB";
+                readonly 400: "#9CA3AF";
+                readonly 500: "#6B7280";
+                readonly 600: "#4B5563";
+                readonly 700: "#374151";
+                readonly 800: "#1F2937";
+                readonly 900: "#111827";
+            };
+        };
+        readonly palettes: {
+            readonly secondary: {
+                readonly 50: "#f9fafb";
+                readonly 100: "#f3f4f6";
+                readonly 200: "#e5e7eb";
+                readonly 300: "#d1d5db";
+                readonly 400: "#9ca3af";
+                readonly 500: "#000000";
+                readonly 600: "#000000";
+                readonly 700: "#000000";
+                readonly 800: "#000000";
+                readonly 900: "#000000";
+                readonly DEFAULT: "#000000";
+            };
+            readonly danger: {
+                readonly 50: "#fef2f2";
+                readonly 100: "#fee2e2";
+                readonly 200: "#fecaca";
+                readonly 300: "#fca5a5";
+                readonly 400: "#f87171";
+                readonly 500: "#B62214";
+                readonly 600: "#a31e12";
+                readonly 700: "#8b1a0f";
+                readonly 800: "#73160d";
+                readonly 900: "#5c120a";
+                readonly DEFAULT: "#B62214";
+            };
+            readonly success: {
+                readonly 50: "#ecfdf5";
+                readonly 100: "#d1fae5";
+                readonly 200: "#a7f3d0";
+                readonly 300: "#6ee7b7";
+                readonly 400: "#34d399";
+                readonly 500: "#057A54";
+                readonly 600: "#046c4a";
+                readonly 700: "#035e40";
+                readonly 800: "#025035";
+                readonly 900: "#01422b";
+                readonly DEFAULT: "#057A54";
+            };
+            readonly warning: {
+                readonly 50: "#fffbeb";
+                readonly 100: "#fef3c7";
+                readonly 200: "#fde68a";
+                readonly 300: "#fcd34d";
+                readonly 400: "#fbbf24";
+                readonly 500: "#F5A524";
+                readonly 600: "#d97706";
+                readonly 700: "#b45309";
+                readonly 800: "#92400e";
+                readonly 900: "#78350f";
+                readonly DEFAULT: "#F5A524";
+            };
+        };
+    };
+    typography: {
+        readonly fontFamily: {
+            readonly primary: "\"NeueMontreal\", system-ui, sans-serif";
+            readonly secondary: "\"Scholar\", Georgia, serif";
+            readonly sans: "\"NeueMontreal\", system-ui, sans-serif";
+            readonly serif: "\"Scholar\", Georgia, serif";
+            readonly mono: "\"JetBrains Mono\", Consolas, monospace";
+        };
+        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 fontWeight: {
+            readonly normal: "400";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+    spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+        readonly '3xl': "4rem";
+        readonly '4xl': "6rem";
+        readonly '5xl': "8rem";
+    };
+    tailwindTheme: {
+        colors: {
+            secondary: "#000000";
+            success: "#057A54";
+            warning: "#F5A524";
+            danger: "#B62214";
+            info: "#2563EB";
+            white: "#FFFFFF";
+            black: "#000000";
+            gray: {
+                readonly 50: "#F9FAFB";
+                readonly 100: "#F3F4F6";
+                readonly 200: "#E5E7EB";
+                readonly 300: "#D1D5DB";
+                readonly 400: "#9CA3AF";
+                readonly 500: "#6B7280";
+                readonly 600: "#4B5563";
+                readonly 700: "#374151";
+                readonly 800: "#1F2937";
+                readonly 900: "#111827";
+            };
+            primary: {
+                readonly 50: "#fef5f1";
+                readonly 100: "#fde8e0";
+                readonly 200: "#fbd5c7";
+                readonly 300: "#f7b79f";
+                readonly 400: "#f18d68";
+                readonly 500: "#C14615";
+                readonly 600: "#a83b11";
+                readonly 700: "#8b2f0e";
+                readonly 800: "#73260d";
+                readonly 900: "#5f210c";
+                readonly DEFAULT: "#C14615";
+            };
+        };
+        fontFamily: {
+            readonly primary: "\"NeueMontreal\", system-ui, sans-serif";
+            readonly secondary: "\"Scholar\", Georgia, serif";
+            readonly sans: "\"NeueMontreal\", system-ui, sans-serif";
+            readonly serif: "\"Scholar\", Georgia, serif";
+            readonly mono: "\"JetBrains Mono\", Consolas, monospace";
+        };
+        spacing: {
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "1rem";
+            readonly lg: "1.5rem";
+            readonly xl: "2rem";
+            readonly '2xl': "3rem";
+            readonly '3xl': "4rem";
+            readonly '4xl': "6rem";
+            readonly '5xl': "8rem";
+        };
+        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";
+        };
+        fontWeight: {
+            readonly normal: "400";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+};