@veevarts/design-system 1.0.0-alpha.15 → 1.0.0-alpha.17

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";
+        };
+    };
+};

package/dist/tailwind/index.js

@@ -0,0 +1,293 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tailwind/index.ts
+var index_exports = {};
+__export(index_exports, {
+  colors: () => colors,
+  createHeroUIConfig: () => createHeroUIConfig,
+  deepMerge: () => deepMerge,
+  defaultHeroUITheme: () => defaultHeroUITheme,
+  normalizeColorPalette: () => normalizeColorPalette,
+  spacing: () => spacing,
+  tailwindTheme: () => tailwindTheme,
+  tokens: () => tokens,
+  typography: () => typography,
+  veevartPreset: () => veevartPreset
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/tokens/colors.ts
+var colors = {
+  brand: {
+    primary: {
+      50: "#fef5f1",
+      100: "#fde8e0",
+      200: "#fbd5c7",
+      300: "#f7b79f",
+      400: "#f18d68",
+      500: "#C14615",
+      600: "#a83b11",
+      700: "#8b2f0e",
+      800: "#73260d",
+      900: "#5f210c",
+      DEFAULT: "#C14615"
+    }
+  },
+  semantic: {
+    secondary: "#000000",
+    success: "#057A54",
+    warning: "#F5A524",
+    danger: "#B62214",
+    info: "#2563EB"
+  },
+  neutral: {
+    white: "#FFFFFF",
+    black: "#000000",
+    gray: {
+      50: "#F9FAFB",
+      100: "#F3F4F6",
+      200: "#E5E7EB",
+      300: "#D1D5DB",
+      400: "#9CA3AF",
+      500: "#6B7280",
+      600: "#4B5563",
+      700: "#374151",
+      800: "#1F2937",
+      900: "#111827"
+    }
+  },
+  palettes: {
+    secondary: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#000000",
+      600: "#000000",
+      700: "#000000",
+      800: "#000000",
+      900: "#000000",
+      DEFAULT: "#000000"
+    },
+    danger: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#B62214",
+      600: "#a31e12",
+      700: "#8b1a0f",
+      800: "#73160d",
+      900: "#5c120a",
+      DEFAULT: "#B62214"
+    },
+    success: {
+      50: "#ecfdf5",
+      100: "#d1fae5",
+      200: "#a7f3d0",
+      300: "#6ee7b7",
+      400: "#34d399",
+      500: "#057A54",
+      600: "#046c4a",
+      700: "#035e40",
+      800: "#025035",
+      900: "#01422b",
+      DEFAULT: "#057A54"
+    },
+    warning: {
+      50: "#fffbeb",
+      100: "#fef3c7",
+      200: "#fde68a",
+      300: "#fcd34d",
+      400: "#fbbf24",
+      500: "#F5A524",
+      600: "#d97706",
+      700: "#b45309",
+      800: "#92400e",
+      900: "#78350f",
+      DEFAULT: "#F5A524"
+    }
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    primary: '"NeueMontreal", system-ui, sans-serif',
+    secondary: '"Scholar", Georgia, serif',
+    sans: '"NeueMontreal", system-ui, sans-serif',
+    serif: '"Scholar", Georgia, serif',
+    mono: '"JetBrains Mono", Consolas, monospace'
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem"
+    // 48px
+  },
+  fontWeight: {
+    normal: "400",
+    // Available for both NeueMontreal and Scholar
+    semibold: "600",
+    // Available for NeueMontreal only
+    bold: "700"
+    // Available for NeueMontreal only
+  },
+  lineHeight: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75"
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  xs: "0.25rem",
+  // 4px - Fine control (½ of base unit)
+  sm: "0.5rem",
+  // 8px - Base unit
+  md: "1rem",
+  // 16px
+  lg: "1.5rem",
+  // 24px
+  xl: "2rem",
+  // 32px
+  "2xl": "3rem",
+  // 48px
+  "3xl": "4rem",
+  // 64px
+  "4xl": "6rem",
+  // 96px
+  "5xl": "8rem"
+  // 128px
+};
+
+// src/tailwind/index.ts
+var tailwindTheme = {
+  colors: {
+    ...colors.brand,
+    ...colors.neutral,
+    ...colors.semantic
+  },
+  fontFamily: typography.fontFamily,
+  spacing,
+  fontSize: typography.fontSize,
+  fontWeight: typography.fontWeight,
+  lineHeight: typography.lineHeight
+};
+function deepMerge(target, source) {
+  if (!source || typeof source !== "object") {
+    return target;
+  }
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(targetValue, sourceValue);
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+function normalizeColorPalette(color, defaultPalette) {
+  if (typeof color === "string") {
+    return {
+      ...defaultPalette,
+      500: color,
+      DEFAULT: color
+    };
+  }
+  return { ...defaultPalette, ...color };
+}
+var defaultHeroUITheme = {
+  light: {
+    colors: {
+      primary: colors.brand.primary,
+      secondary: colors.palettes.secondary,
+      danger: colors.palettes.danger,
+      success: colors.palettes.success,
+      warning: colors.palettes.warning
+    }
+  }
+};
+function createHeroUIConfig(overrides = {}) {
+  const { colors: colorOverrides = {}, themes: themeOverrides = {} } = overrides;
+  const lightColors = {
+    primary: colorOverrides.primary ? normalizeColorPalette(colorOverrides.primary, colors.brand.primary) : colors.brand.primary,
+    secondary: colorOverrides.secondary ? normalizeColorPalette(colorOverrides.secondary, colors.palettes.secondary) : colors.palettes.secondary,
+    danger: colorOverrides.danger ? normalizeColorPalette(colorOverrides.danger, colors.palettes.danger) : colors.palettes.danger,
+    success: colorOverrides.success ? normalizeColorPalette(colorOverrides.success, colors.palettes.success) : colors.palettes.success,
+    warning: colorOverrides.warning ? normalizeColorPalette(colorOverrides.warning, colors.palettes.warning) : colors.palettes.warning
+  };
+  const baseConfig = {
+    themes: {
+      light: {
+        colors: lightColors
+      }
+    }
+  };
+  if (themeOverrides && Object.keys(themeOverrides).length > 0) {
+    return deepMerge(baseConfig, { themes: themeOverrides });
+  }
+  return baseConfig;
+}
+var veevartPreset = {
+  theme: {
+    extend: tailwindTheme
+  },
+  darkMode: "class"
+};
+var tokens = {
+  colors,
+  typography,
+  spacing,
+  tailwindTheme
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colors,
+  createHeroUIConfig,
+  deepMerge,
+  defaultHeroUITheme,
+  normalizeColorPalette,
+  spacing,
+  tailwindTheme,
+  tokens,
+  typography,
+  veevartPreset
+});

package/package.json

@@ -1,17 +1,30 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.0.0-alpha.15",
+    "version": "1.0.0-alpha.17",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./tailwind": {
+            "types": "./dist/tailwind/index.d.ts",
+            "require": "./dist/tailwind/index.js",
+            "import": "./dist/tailwind/index.js"
+        }
+    },
     "files": [
         "dist"
     ],
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
+        "build": "vite build && npm run build:tailwind",
+        "build:tailwind": "esbuild src/tailwind/index.ts --bundle --platform=node --format=cjs --outfile=dist/tailwind/index.js && tsc -p src/tailwind/tsconfig.json",
         "lint": "eslint .",
         "preview": "vite preview",
         "test": "vitest --run",