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

package/dist/tailwind/index.d.ts

@@ -1,7 +1,7 @@
-/**
- * Veevart Design System - Tailwind Configuration Types
- */
-
+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;
@@ -15,54 +15,6 @@ export interface ColorPalette {
     900: string;
     DEFAULT: string;
 }
-
-export interface Colors {
-    brand: {
-        primary: ColorPalette;
-    };
-    semantic: {
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        info: string;
-    };
-    neutral: {
-        white: string;
-        black: string;
-        gray: Omit<ColorPalette, 'DEFAULT'>;
-    };
-    palettes: {
-        secondary: ColorPalette;
-        danger: ColorPalette;
-        success: ColorPalette;
-        warning: ColorPalette;
-    };
-}
-
-export interface Typography {
-    fontFamily: {
-        sans: string[];
-        mono: string[];
-    };
-    fontSize: Record<string, [string, { lineHeight: string }]>;
-    fontWeight: Record<string, string>;
-    lineHeight: Record<string, string>;
-}
-
-export interface Spacing {
-    [key: string]: string;
-}
-
-export interface TailwindTheme {
-    colors: Record<string, unknown>;
-    fontFamily: Typography['fontFamily'];
-    spacing: Spacing;
-    fontSize: Typography['fontSize'];
-    fontWeight: Typography['fontWeight'];
-    lineHeight: Typography['lineHeight'];
-}
-
 export interface HeroUIColorOverrides {
     primary?: string | Partial<ColorPalette>;
     secondary?: string | Partial<ColorPalette>;
@@ -70,53 +22,186 @@ export interface HeroUIColorOverrides {
     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: {
-                primary: ColorPalette;
-                secondary: ColorPalette;
-                danger: ColorPalette;
-                success: ColorPalette;
-                warning: ColorPalette;
-            };
+            colors: HeroUIThemeColors;
         };
     };
 }
-
-export interface VeevartPreset {
-    theme: {
-        extend: TailwindTheme;
+/**
+ * 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";
+        };
     };
-    darkMode: 'class';
-}
-
-export interface Tokens {
-    colors: Colors;
-    typography: Typography;
-    spacing: Spacing;
-    tailwindTheme: TailwindTheme;
-}
-
+    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";
+    };
+};
 /**
- * Veevart Design System Tailwind preset
- *
- * @example
- * const { veevartPreset } = require('@veevarts/design-system/tailwind');
- *
- * module.exports = {
- *     presets: [veevartPreset],
- *     content: [...],
- * };
+ * 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 const veevartPreset: VeevartPreset;
-
+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
  *
@@ -124,53 +209,333 @@ export const veevartPreset: VeevartPreset;
  * @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 function createHeroUIConfig(overrides?: HeroUIConfigOverrides): HeroUIConfig;
-
-/**
- * Design System tokens
- */
-export const tokens: Tokens;
-
-/**
- * Color tokens
- */
-export const colors: Colors;
-
-/**
- * Typography tokens
- */
-export const typography: Typography;
-
-/**
- * Spacing tokens
- */
-export const spacing: Spacing;
-
-/**
- * Tailwind theme extension
- */
-export const tailwindTheme: TailwindTheme;
-
-/**
- * Default HeroUI theme configuration
- */
-export const defaultHeroUITheme: HeroUIConfig['themes'];
-
+export declare function createHeroUIConfig(overrides?: HeroUIConfigOverrides): HeroUIConfig;
 /**
- * Deep merge utility
+ * 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 function deepMerge<T extends object>(target: T, source: Partial<T>): T;
-
+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";
+};
 /**
- * Normalize a color value to a full palette
+ * All tokens bundled together for convenience
  */
-export function normalizeColorPalette(
-    color: string | Partial<ColorPalette>,
-    defaultPalette: ColorPalette,
-): ColorPalette;
+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

@@ -1,424 +1,293 @@
-/**
- * Veevart Design System - Tailwind Configuration
- *
- * This module exports Tailwind CSS configuration utilities that can be used
- * by consuming applications to maintain consistent styling with the Design System.
- *
- * @example
- * // In your tailwind.config.js
- * const { veevartPreset } = require('@veevarts/design-system/tailwind');
- *
- * module.exports = {
- *     presets: [veevartPreset],
- *     content: [...],
- * };
- *
- * @example
- * // With custom overrides (e.g., client-specific primary color)
- * const { createHeroUIConfig, tokens } = require('@veevarts/design-system/tailwind');
- * const { heroui } = require('@heroui/react');
- *
- * const clientPrimaryColor = '#FF0000'; // From API
- *
- * module.exports = {
- *     theme: { extend: tokens.tailwindTheme },
- *     plugins: [
- *         heroui(createHeroUIConfig({
- *             colors: {
- *                 primary: clientPrimaryColor,
- *             },
- *         })),
- *     ],
- * };
- */
-
-// =============================================================================
-// TOKENS
-// =============================================================================
-
-/**
- * Color tokens for the Design System
- */
-const 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',
-        },
-    },
+"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);
 
-/**
- * Typography tokens
- */
-const typography = {
-    fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'monospace'],
-    },
-    fontSize: {
-        xs: ['0.75rem', { lineHeight: '1rem' }],
-        sm: ['0.875rem', { lineHeight: '1.25rem' }],
-        base: ['1rem', { lineHeight: '1.5rem' }],
-        lg: ['1.125rem', { lineHeight: '1.75rem' }],
-        xl: ['1.25rem', { lineHeight: '1.75rem' }],
-        '2xl': ['1.5rem', { lineHeight: '2rem' }],
-        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+// 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"
     },
-    fontWeight: {
-        normal: '400',
-        medium: '500',
-        semibold: '600',
-        bold: '700',
+    danger: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#B62214",
+      600: "#a31e12",
+      700: "#8b1a0f",
+      800: "#73160d",
+      900: "#5c120a",
+      DEFAULT: "#B62214"
     },
-    lineHeight: {
-        tight: '1.25',
-        normal: '1.5',
-        relaxed: '1.75',
+    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"
+    }
+  }
 };
 
-/**
- * Spacing tokens
- */
-const spacing = {
-    px: '1px',
-    0: '0',
-    0.5: '0.125rem',
-    1: '0.25rem',
-    1.5: '0.375rem',
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    11: '2.75rem',
-    12: '3rem',
-    14: '3.5rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem',
+// 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"
+  }
 };
 
-// =============================================================================
-// TAILWIND THEME EXTENSION
-// =============================================================================
-
-/**
- * Tailwind theme extension with Veevart tokens
- */
-const tailwindTheme = {
-    colors: {
-        ...colors.brand,
-        ...colors.neutral,
-        ...colors.semantic,
-    },
-    fontFamily: typography.fontFamily,
-    spacing: spacing,
-    fontSize: typography.fontSize,
-    fontWeight: typography.fontWeight,
-    lineHeight: typography.lineHeight,
+// 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
 };
 
-// =============================================================================
-// HEROUI CONFIGURATION
-// =============================================================================
-
-/**
- * Default HeroUI theme configuration
- */
-const defaultHeroUITheme = {
-    light: {
-        colors: {
-            primary: colors.brand.primary,
-            secondary: colors.palettes.secondary,
-            danger: colors.palettes.danger,
-            success: colors.palettes.success,
-            warning: colors.palettes.warning,
-        },
-    },
+// 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
 };
-
-/**
- * Deep merge utility for objects
- * @param {object} target - Target object
- * @param {object} source - Source object to merge
- * @returns {object} Merged object
- */
 function deepMerge(target, source) {
-    const result = { ...target };
-
-    for (const key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-            if (
-                source[key] &&
-                typeof source[key] === 'object' &&
-                !Array.isArray(source[key]) &&
-                target[key] &&
-                typeof target[key] === 'object' &&
-                !Array.isArray(target[key])
-            ) {
-                result[key] = deepMerge(target[key], source[key]);
-            } else {
-                result[key] = source[key];
-            }
-        }
+  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;
+  }
+  return result;
 }
-
-/**
- * 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
- *
- * @param {string|object} color - Color value or palette object
- * @param {object} defaultPalette - Default palette to use as base
- * @returns {object} Color palette
- */
 function normalizeColorPalette(color, defaultPalette) {
-    if (typeof color === 'string') {
-        return {
-            ...defaultPalette,
-            500: color,
-            DEFAULT: color,
-        };
-    }
-    return { ...defaultPalette, ...color };
+  if (typeof color === "string") {
+    return {
+      ...defaultPalette,
+      500: color,
+      DEFAULT: color
+    };
+  }
+  return { ...defaultPalette, ...color };
 }
-
-/**
- * Creates HeroUI configuration with optional overrides
- *
- * @param {object} overrides - Configuration overrides
- * @param {object} overrides.colors - Color overrides
- * @param {string|object} overrides.colors.primary - Primary color or palette
- * @param {string|object} overrides.colors.secondary - Secondary color or palette
- * @param {string|object} overrides.colors.success - Success color or palette
- * @param {string|object} overrides.colors.warning - Warning color or palette
- * @param {string|object} overrides.colors.danger - Danger color or palette
- * @param {object} overrides.themes - Additional theme configuration
- * @returns {object} HeroUI plugin configuration
- *
- * @example
- * // Simple color override
- * createHeroUIConfig({
- *     colors: {
- *         primary: '#FF0000',
- *     },
- * });
- *
- * @example
- * // Full palette override
- * createHeroUIConfig({
- *     colors: {
- *         primary: {
- *             50: '#fff1f1',
- *             100: '#ffe1e1',
- *             // ... more shades
- *             500: '#FF0000',
- *             DEFAULT: '#FF0000',
- *         },
- *     },
- * });
- */
+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;
-
-    // Build the light theme colors with 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,
-            },
-        },
-    };
-
-    // Merge with additional theme overrides if provided
-    if (themeOverrides && Object.keys(themeOverrides).length > 0) {
-        return deepMerge(baseConfig, { themes: themeOverrides });
+  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
+      }
     }
-
-    return baseConfig;
+  };
+  if (themeOverrides && Object.keys(themeOverrides).length > 0) {
+    return deepMerge(baseConfig, { themes: themeOverrides });
+  }
+  return baseConfig;
 }
-
-// =============================================================================
-// TAILWIND PRESET
-// =============================================================================
-
-/**
- * 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: [...],
- * };
- */
-const veevartPreset = {
-    theme: {
-        extend: tailwindTheme,
-    },
-    darkMode: 'class',
+var veevartPreset = {
+  theme: {
+    extend: tailwindTheme
+  },
+  darkMode: "class"
 };
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-module.exports = {
-    // Main exports
-    veevartPreset,
-    createHeroUIConfig,
-
-    // Tokens for direct access
-    tokens: {
-        colors,
-        typography,
-        spacing,
-        tailwindTheme,
-    },
-
-    // Individual token exports
-    colors,
-    typography,
-    spacing,
-    tailwindTheme,
-
-    // Default HeroUI theme (for reference)
-    defaultHeroUITheme,
-
-    // Utilities
-    deepMerge,
-    normalizeColorPalette,
+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,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.0.0-alpha.16",
+    "version": "1.0.0-alpha.17",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build && npm run build:tailwind",
-        "build:tailwind": "mkdir -p dist/tailwind && cp src/tailwind/index.js dist/tailwind/index.js && cp src/tailwind/index.d.ts dist/tailwind/index.d.ts",
+        "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",