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

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/dist/theme/index.d.ts

@@ -10,12 +10,36 @@ export declare const theme: {
             readonly 200: "#fbd5c7";
             readonly 300: "#f7b79f";
             readonly 400: "#f18d68";
-            readonly 500: "#C14615";
+            readonly 500: {
+                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 600: "#a83b11";
             readonly 700: "#8b2f0e";
             readonly 800: "#73260d";
             readonly 900: "#5f210c";
-            readonly DEFAULT: "#C14615";
+            readonly DEFAULT: {
+                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 secondary: {
             readonly 50: "#f9fafb";

package/dist/tokens/colors.d.ts

@@ -4,8 +4,19 @@
  */
 export declare const colors: {
     readonly brand: {
-        readonly primary: "#C14615";
-        readonly secondary: "#000000";
+        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";
@@ -30,5 +41,59 @@ export declare const colors: {
             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";
+        };
+    };
 };
 export type ColorToken = typeof colors;

package/package.json

@@ -1,17 +1,30 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.0.0-alpha.6",
+    "version": "1.0.0-alpha.7",
     "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",
@@ -47,6 +60,7 @@
     },
     "dependencies": {
         "@iconify/react": "^6.0.2",
+        "react-hook-form": "^7.56.4",
         "vite-plugin-css-injected-by-js": "3.5.2",
         "vite-plugin-dts": "4.5.4"
     },