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

package/dist/tailwind/index.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Veevart Design System - Tailwind Configuration Types
+ */
+
+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 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>;
+    success?: string | Partial<ColorPalette>;
+    warning?: string | Partial<ColorPalette>;
+    danger?: string | Partial<ColorPalette>;
+}
+
+export interface HeroUIConfigOverrides {
+    colors?: HeroUIColorOverrides;
+    themes?: Record<string, unknown>;
+}
+
+export interface HeroUIConfig {
+    themes: {
+        light: {
+            colors: {
+                primary: ColorPalette;
+                secondary: ColorPalette;
+                danger: ColorPalette;
+                success: ColorPalette;
+                warning: ColorPalette;
+            };
+        };
+    };
+}
+
+export interface VeevartPreset {
+    theme: {
+        extend: TailwindTheme;
+    };
+    darkMode: 'class';
+}
+
+export interface Tokens {
+    colors: Colors;
+    typography: Typography;
+    spacing: Spacing;
+    tailwindTheme: TailwindTheme;
+}
+
+/**
+ * Veevart Design System Tailwind preset
+ *
+ * @example
+ * const { veevartPreset } = require('@veevarts/design-system/tailwind');
+ *
+ * module.exports = {
+ *     presets: [veevartPreset],
+ *     content: [...],
+ * };
+ */
+export const veevartPreset: VeevartPreset;
+
+/**
+ * Creates HeroUI configuration with optional overrides
+ *
+ * @param overrides - Configuration overrides
+ * @returns HeroUI plugin configuration
+ *
+ * @example
+ * createHeroUIConfig({
+ *     colors: {
+ *         primary: '#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'];
+
+/**
+ * Deep merge utility
+ */
+export function deepMerge<T extends object>(target: T, source: Partial<T>): T;
+
+/**
+ * Normalize a color value to a full palette
+ */
+export function normalizeColorPalette(
+    color: string | Partial<ColorPalette>,
+    defaultPalette: ColorPalette,
+): ColorPalette;

package/dist/tailwind/index.js

@@ -0,0 +1,424 @@
+/**
+ * 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',
+        },
+    },
+};
+
+/**
+ * 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' }],
+    },
+    fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+    lineHeight: {
+        tight: '1.25',
+        normal: '1.5',
+        relaxed: '1.75',
+    },
+};
+
+/**
+ * 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',
+};
+
+// =============================================================================
+// 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,
+};
+
+// =============================================================================
+// 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,
+        },
+    },
+};
+
+/**
+ * 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];
+            }
+        }
+    }
+
+    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 };
+}
+
+/**
+ * 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',
+ *         },
+ *     },
+ * });
+ */
+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 });
+    }
+
+    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',
+};
+
+// =============================================================================
+// 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,
+};

package/package.json

@@ -1,17 +1,30 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.0.0-alpha.14",
+    "version": "1.0.0-alpha.16",
     "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": "mkdir -p dist/tailwind && cp src/tailwind/index.js dist/tailwind/index.js && cp src/tailwind/index.d.ts dist/tailwind/index.d.ts",
         "lint": "eslint .",
         "preview": "vite preview",
         "test": "vitest --run",