@quinkit/ui 0.1.0

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@quinkit/ui",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Quinkit UI is a commercial, domain-specific React UI component library built as a shadcn/ui extension.",
+  "type": "module",
+  "homepage": "https://quinkit-ui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nomiwsd/quinkit-ui.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/nomiwsd/quinkit-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": {
+      "default": "./src/styles/globals.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "latest",
+    "@tailwindcss/vite": "latest",
+    "@testing-library/jest-dom": "latest",
+    "@testing-library/react": "latest",
+    "@testing-library/user-event": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "jsdom": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "latest",
+    "tailwindcss": "latest",
+    "tsup": "latest",
+    "typescript": "^5.9.3",
+    "vitest": "latest"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.16",
+    "@radix-ui/react-alert-dialog": "^1.1.19",
+    "@radix-ui/react-aspect-ratio": "^1.1.11",
+    "@radix-ui/react-avatar": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.3.7",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-label": "^2.1.11",
+    "@radix-ui/react-navigation-menu": "^1.2.18",
+    "@radix-ui/react-popover": "^1.1.19",
+    "@radix-ui/react-progress": "^1.1.12",
+    "@radix-ui/react-radio-group": "^1.4.3",
+    "@radix-ui/react-scroll-area": "^1.2.14",
+    "@radix-ui/react-select": "^2.3.3",
+    "@radix-ui/react-separator": "^1.1.11",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.12",
+    "@tanstack/react-table": "^8.21.3",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "react-day-picker": "^10.0.1",
+    "react-hook-form": "^7.81.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build-storybook": "storybook build",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "storybook": "storybook dev -p 0 --no-open --ci",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,150 @@
+@import "./tokens/typography.css";
+@import "tailwindcss";
+@import "./tokens/primitives.css";
+@import "./tokens/semantic.css";
+@import "./tokens/dark.css";
+@import "./themes/dashboard.css";
+@import "./themes/ecommerce.css";
+@import "./themes/healthcare.css";
+@import "./themes/fintech.css";
+@import "./themes/edtech.css";
+@import "./themes/dashboard-executive.css";
+@import "./themes/dashboard-glass.css";
+@import "./themes/dashboard-data.css";
+@import "./themes/ecommerce-luxury.css";
+@import "./themes/ecommerce-playful.css";
+@import "./themes/ecommerce-minimal.css";
+@import "./themes/healthcare-clinical.css";
+@import "./themes/healthcare-wellness.css";
+@import "./themes/healthcare-urgent.css";
+@import "./themes/fintech-wealth.css";
+@import "./themes/fintech-crypto.css";
+@import "./themes/fintech-modern.css";
+@import "./themes/edtech-campus.css";
+@import "./themes/edtech-kids.css";
+@import "./themes/edtech-professional.css";
+@import "./tokens/charts.css";
+@import "./tokens/palettes.css";
+
+/* Tailwind v4 source detection is relative to this stylesheet. Include both
+ * the UI package and the dev app so utilities used outside packages/ui are
+ * generated when consumers import this stylesheet directly in the monorepo. */
+@source "../";
+@source "../../../../apps/dev/app";
+
+/* Bridge ui-* tokens into Tailwind's @theme so utilities like bg-primary,
+ * text-muted-foreground, border-border, ring-ring resolve. Uses @theme inline
+ * because these reference other CSS variables (Tailwind v4 requirement). */
+@theme inline {
+  --font-sans: var(--ui-font-body);
+  --font-serif: var(--ui-font-serif);
+  --font-mono: var(--ui-font-mono);
+  --font-heading: var(--ui-font-heading);
+  --font-body: var(--ui-font-body);
+
+  --text-xs: var(--ui-text-xs);
+  --text-xs--line-height: var(--ui-text-xs--line-height);
+  --text-sm: var(--ui-text-sm);
+  --text-sm--line-height: var(--ui-text-sm--line-height);
+  --text-base: var(--ui-text-base);
+  --text-base--line-height: var(--ui-text-base--line-height);
+  --text-lg: var(--ui-text-lg);
+  --text-lg--line-height: var(--ui-text-lg--line-height);
+  --text-xl: var(--ui-text-xl);
+  --text-xl--line-height: var(--ui-text-xl--line-height);
+  --text-2xl: var(--ui-text-2xl);
+  --text-2xl--line-height: var(--ui-text-2xl--line-height);
+  --text-3xl: var(--ui-text-3xl);
+  --text-3xl--line-height: var(--ui-text-3xl--line-height);
+  --text-4xl: var(--ui-text-4xl);
+  --text-4xl--line-height: var(--ui-text-4xl--line-height);
+  --text-5xl: var(--ui-text-5xl);
+  --text-5xl--line-height: var(--ui-text-5xl--line-height);
+  --text-6xl: var(--ui-text-6xl);
+  --text-6xl--line-height: var(--ui-text-6xl--line-height);
+  --text-7xl: var(--ui-text-7xl);
+  --text-7xl--line-height: var(--ui-text-7xl--line-height);
+  --text-8xl: var(--ui-text-8xl);
+  --text-8xl--line-height: var(--ui-text-8xl--line-height);
+  --text-9xl: var(--ui-text-9xl);
+  --text-9xl--line-height: var(--ui-text-9xl--line-height);
+
+  --leading-none: var(--ui-leading-none);
+  --leading-tight: var(--ui-leading-tight);
+  --leading-snug: var(--ui-leading-snug);
+  --leading-normal: var(--ui-leading-normal);
+  --leading-relaxed: var(--ui-leading-relaxed);
+  --leading-loose: var(--ui-leading-loose);
+  --tracking-tighter: var(--ui-tracking-tighter);
+  --tracking-tight: var(--ui-tracking-tight);
+  --tracking-normal: var(--ui-tracking-normal);
+  --tracking-wide: var(--ui-tracking-wide);
+  --tracking-wider: var(--ui-tracking-wider);
+  --tracking-widest: var(--ui-tracking-widest);
+
+  --color-background: var(--ui-color-background);
+  --color-foreground: var(--ui-color-foreground);
+
+  --color-card: var(--ui-color-card);
+  --color-card-foreground: var(--ui-color-card-foreground);
+
+  --color-popover: var(--ui-color-popover);
+  --color-popover-foreground: var(--ui-color-popover-foreground);
+
+  --color-primary: var(--ui-color-primary);
+  --color-primary-foreground: var(--ui-color-primary-foreground);
+
+  --color-secondary: var(--ui-color-secondary);
+  --color-secondary-foreground: var(--ui-color-secondary-foreground);
+
+  --color-muted: var(--ui-color-muted);
+  --color-muted-foreground: var(--ui-color-muted-foreground);
+
+  --color-accent: var(--ui-color-accent);
+  --color-accent-foreground: var(--ui-color-accent-foreground);
+
+  --color-destructive: var(--ui-color-destructive);
+  --color-destructive-foreground: var(--ui-color-destructive-foreground);
+
+  --color-success: var(--ui-color-success);
+  --color-success-foreground: var(--ui-color-success-foreground);
+
+  --color-warning: var(--ui-color-warning);
+  --color-warning-foreground: var(--ui-color-warning-foreground);
+
+  --color-border: var(--ui-color-border);
+  --color-input: var(--ui-color-input);
+  --color-ring: var(--ui-color-ring);
+
+  --color-chart-1: var(--ui-color-chart-1);
+  --color-chart-2: var(--ui-color-chart-2);
+  --color-chart-3: var(--ui-color-chart-3);
+  --color-chart-4: var(--ui-color-chart-4);
+  --color-chart-5: var(--ui-color-chart-5);
+
+  --radius-sm: var(--ui-radius-sm);
+  --radius-md: var(--ui-radius-md);
+  --radius-lg: var(--ui-radius-lg);
+  --radius-xl: var(--ui-radius-xl);
+}
+
+@layer base {
+  body {
+    font-family: var(--ui-font-body);
+    letter-spacing: var(--ui-tracking-body, 0em);
+    line-height: var(--ui-leading-body, 1.6);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .font-heading {
+    font-family: var(--ui-font-heading);
+    font-weight: var(--ui-weight-heading, 700);
+    letter-spacing: var(--ui-tracking-heading, -0.02em);
+    line-height: var(--ui-leading-heading, 1.15);
+  }
+}

package/src/styles/theme-switcher.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  type Appearance,
+  applyAppearance,
+  applyPalette,
+  getStoredAppearance,
+  getStoredPalette,
+  type UiPalette,
+  uiPalettes
+} from "../lib/palettes";
+
+/**
+ * Minimal palette + appearance switcher.
+ * - SSR-safe: reads storage only after mount, so server and first client
+ *   render agree (avoids hydration mismatch).
+ * - Persists to localStorage via the appliers in palettes.ts.
+ * - No `any`.
+ *
+ * For zero-flash theming, also run a tiny inline script in <head> that sets
+ * document.documentElement.dataset.palette + the `dark` class from storage
+ * before React hydrates. This component then syncs with it.
+ */
+export function ThemeSwitcher() {
+  const [mounted, setMounted] = useState(false);
+  const [palette, setPalette] = useState<UiPalette>("neutral-slate");
+  const [appearance, setAppearance] = useState<Appearance>("system");
+
+  useEffect(() => {
+    setPalette(getStoredPalette());
+    setAppearance(getStoredAppearance());
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (mounted) applyPalette(palette);
+  }, [mounted, palette]);
+
+  useEffect(() => {
+    if (!mounted) return;
+    applyAppearance(appearance);
+    if (appearance !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => applyAppearance("system");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [mounted, appearance]);
+
+  // Render a stable shell until mounted to keep SSR/CSR output identical.
+  if (!mounted) {
+    return <div aria-hidden className="h-9" />;
+  }
+
+  const appearances: Appearance[] = ["light", "dark", "system"];
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <label className="flex items-center gap-2 text-sm text-muted-foreground">
+        Palette
+        <select
+          value={palette}
+          onChange={(e) => setPalette(e.target.value as UiPalette)}
+          className="rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {uiPalettes.map((p) => (
+            <option key={p.value} value={p.value}>
+              {p.name} ({p.category})
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <fieldset className="inline-flex rounded-md border border-input p-0.5">
+        <legend className="sr-only">Appearance</legend>
+        {appearances.map((a) => (
+          <button
+            key={a}
+            type="button"
+            aria-pressed={appearance === a}
+            onClick={() => setAppearance(a)}
+            className={
+              "rounded px-2.5 py-1 text-sm capitalize transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+              (appearance === a
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:text-foreground")
+            }
+          >
+            {a}
+          </button>
+        ))}
+      </fieldset>
+    </div>
+  );
+}

package/src/styles/themes/dashboard-data.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/dashboard-data.css */
+
+[data-theme="dashboard-data"] {
+  --ui-font-heading: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: 0em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.2;
+  --ui-leading-body: 1.55;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0rem;
+  --ui-radius-md: 0rem;
+  --ui-radius-lg: 0.125rem;
+  --ui-radius-xl: 0.25rem;
+  --ui-color-background: oklch(0.985 0 0);
+  --ui-color-foreground: oklch(0.18 0 0);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.18 0 0);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.18 0 0);
+  --ui-color-primary: oklch(0.715 0.126 215);
+  --ui-color-primary-foreground: oklch(0.2 0.02 215);
+  --ui-color-secondary: oklch(0.962 0 0);
+  --ui-color-secondary-foreground: oklch(0.29 0 0);
+  --ui-color-accent: oklch(0.95 0.03 215);
+  --ui-color-accent-foreground: oklch(0.3 0.07 215);
+  --ui-color-muted: oklch(0.968 0 0);
+  --ui-color-muted-foreground: oklch(0.5 0 0);
+  --ui-color-border: oklch(0.916 0 0);
+  --ui-color-input: oklch(0.916 0 0);
+  --ui-color-ring: oklch(0.715 0.126 215);
+  --ui-color-chart-1: oklch(0.62 0.15 200);
+  --ui-color-chart-2: oklch(0.6 0.2 300);
+  --ui-color-chart-3: oklch(0.66 0.15 150);
+  --ui-color-chart-4: oklch(0.72 0.15 75);
+  --ui-color-chart-5: oklch(0.62 0.2 25);
+}
+
+.dark[data-theme="dashboard-data"],
+[data-theme="dashboard-data"].dark {
+  --ui-color-background: oklch(0.16 0 0);
+  --ui-color-foreground: oklch(0.96 0 0);
+  --ui-color-card: oklch(0.2 0 0);
+  --ui-color-card-foreground: oklch(0.96 0 0);
+  --ui-color-popover: oklch(0.2 0 0);
+  --ui-color-popover-foreground: oklch(0.96 0 0);
+  --ui-color-primary: oklch(0.715 0.126 215);
+  --ui-color-primary-foreground: oklch(0.2 0.02 215);
+  --ui-color-secondary: oklch(0.274 0 0);
+  --ui-color-secondary-foreground: oklch(0.972 0 0);
+  --ui-color-accent: oklch(0.3 0.05 215);
+  --ui-color-accent-foreground: oklch(0.92 0.04 215);
+  --ui-color-muted: oklch(0.274 0 0);
+  --ui-color-muted-foreground: oklch(0.712 0 0);
+  --ui-color-border: oklch(0.305 0 0);
+  --ui-color-input: oklch(0.33 0 0);
+  --ui-color-ring: oklch(0.715 0.126 215);
+  --ui-color-chart-1: oklch(0.72 0.14 200);
+  --ui-color-chart-2: oklch(0.7 0.18 300);
+  --ui-color-chart-3: oklch(0.74 0.14 150);
+  --ui-color-chart-4: oklch(0.8 0.14 75);
+  --ui-color-chart-5: oklch(0.7 0.18 25);
+}

package/src/styles/themes/dashboard-executive.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/dashboard-executive.css */
+
+[data-theme="dashboard-executive"] {
+  --ui-font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.02em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.1;
+  --ui-leading-body: 1.5;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0.125rem;
+  --ui-radius-md: 0.25rem;
+  --ui-radius-lg: 0.375rem;
+  --ui-radius-xl: 0.5rem;
+  --ui-color-background: oklch(0.994 0.003 255);
+  --ui-color-foreground: oklch(0.2 0.02 255);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.2 0.02 255);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.2 0.02 255);
+  --ui-color-primary: oklch(0.546 0.215 263);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0.006 255);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 255);
+  --ui-color-accent: oklch(0.95 0.03 263);
+  --ui-color-accent-foreground: oklch(0.3 0.07 263);
+  --ui-color-muted: oklch(0.968 0.006 255);
+  --ui-color-muted-foreground: oklch(0.5 0.024 255);
+  --ui-color-border: oklch(0.916 0.006 255);
+  --ui-color-input: oklch(0.916 0.006 255);
+  --ui-color-ring: oklch(0.546 0.215 263);
+  --ui-color-chart-1: oklch(0.6 0.15 263);
+  --ui-color-chart-2: oklch(0.62 0.15 303);
+  --ui-color-chart-3: oklch(0.62 0.15 358);
+  --ui-color-chart-4: oklch(0.62 0.15 53);
+  --ui-color-chart-5: oklch(0.62 0.15 118);
+}
+
+.dark[data-theme="dashboard-executive"],
+[data-theme="dashboard-executive"].dark {
+  --ui-color-background: oklch(0.17 0.02 255);
+  --ui-color-foreground: oklch(0.96 0.005 255);
+  --ui-color-card: oklch(0.205 0.022 255);
+  --ui-color-card-foreground: oklch(0.96 0.005 255);
+  --ui-color-popover: oklch(0.205 0.022 255);
+  --ui-color-popover-foreground: oklch(0.96 0.005 255);
+  --ui-color-primary: oklch(0.766 0.2 263);
+  --ui-color-primary-foreground: oklch(0.2 0.02 263);
+  --ui-color-secondary: oklch(0.274 0.01 255);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 255);
+  --ui-color-accent: oklch(0.3 0.05 263);
+  --ui-color-accent-foreground: oklch(0.92 0.04 263);
+  --ui-color-muted: oklch(0.274 0.01 255);
+  --ui-color-muted-foreground: oklch(0.712 0.016 255);
+  --ui-color-border: oklch(0.305 0.01 255);
+  --ui-color-input: oklch(0.33 0.01 255);
+  --ui-color-ring: oklch(0.766 0.2 263);
+  --ui-color-chart-1: oklch(0.6 0.15 263);
+  --ui-color-chart-2: oklch(0.72 0.14 303);
+  --ui-color-chart-3: oklch(0.72 0.14 358);
+  --ui-color-chart-4: oklch(0.72 0.14 53);
+  --ui-color-chart-5: oklch(0.72 0.14 118);
+}

package/src/styles/themes/dashboard-glass.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/dashboard-glass.css */
+
+[data-theme="dashboard-glass"] {
+  --ui-font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: -0.015em;
+  --ui-tracking-body: 0em;
+  --ui-leading-heading: 1.15;
+  --ui-leading-body: 1.6;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0.5rem;
+  --ui-radius-md: 0.75rem;
+  --ui-radius-lg: 1rem;
+  --ui-radius-xl: 1.5rem;
+  --ui-color-background: oklch(0.985 0.012 300);
+  --ui-color-foreground: oklch(0.24 0.03 300);
+  --ui-color-card: oklch(1 0.006 300 / 0.62);
+  --ui-color-card-foreground: oklch(0.24 0.03 300);
+  --ui-color-popover: oklch(1 0.006 300 / 0.62);
+  --ui-color-popover-foreground: oklch(0.24 0.03 300);
+  --ui-color-primary: oklch(0.622 0.212 284);
+  --ui-color-primary-foreground: oklch(0.2 0.02 284);
+  --ui-color-secondary: oklch(0.962 0.006 300);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 300);
+  --ui-color-accent: oklch(0.774 0.126 292);
+  --ui-color-accent-foreground: oklch(0.2 0.02 292);
+  --ui-color-muted: oklch(0.968 0.006 300);
+  --ui-color-muted-foreground: oklch(0.5 0.024 300);
+  --ui-color-border: oklch(0.916 0.006 300);
+  --ui-color-input: oklch(0.916 0.006 300);
+  --ui-color-ring: oklch(0.622 0.212 284);
+  --ui-color-chart-1: oklch(0.6 0.15 284);
+  --ui-color-chart-2: oklch(0.62 0.15 324);
+  --ui-color-chart-3: oklch(0.62 0.15 19);
+  --ui-color-chart-4: oklch(0.62 0.15 74);
+  --ui-color-chart-5: oklch(0.62 0.15 139);
+}
+
+.dark[data-theme="dashboard-glass"],
+[data-theme="dashboard-glass"].dark {
+  --ui-color-background: oklch(0.18 0.022 300);
+  --ui-color-foreground: oklch(0.96 0.008 300);
+  --ui-color-card: oklch(0.26 0.03 300 / 0.55);
+  --ui-color-card-foreground: oklch(0.96 0.008 300);
+  --ui-color-popover: oklch(0.26 0.03 300 / 0.55);
+  --ui-color-popover-foreground: oklch(0.96 0.008 300);
+  --ui-color-primary: oklch(0.68 0.2 284);
+  --ui-color-primary-foreground: oklch(0.2 0.02 284);
+  --ui-color-secondary: oklch(0.274 0.01 300);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 300);
+  --ui-color-accent: oklch(0.774 0.126 292);
+  --ui-color-accent-foreground: oklch(0.2 0.02 292);
+  --ui-color-muted: oklch(0.274 0.01 300);
+  --ui-color-muted-foreground: oklch(0.712 0.016 300);
+  --ui-color-border: oklch(0.305 0.01 300);
+  --ui-color-input: oklch(0.33 0.01 300);
+  --ui-color-ring: oklch(0.68 0.2 284);
+  --ui-color-chart-1: oklch(0.6 0.15 284);
+  --ui-color-chart-2: oklch(0.72 0.14 324);
+  --ui-color-chart-3: oklch(0.72 0.14 19);
+  --ui-color-chart-4: oklch(0.72 0.14 74);
+  --ui-color-chart-5: oklch(0.72 0.14 139);
+}

package/src/styles/themes/dashboard.css

@@ -0,0 +1,46 @@
+/* dashboard.css — Executive Clarity kit theme.
+ * Activated with: <html data-theme="dashboard">
+ */
+
+[data-theme="dashboard"] {
+  --ui-color-primary: oklch(0.22 0.035 260);
+  --ui-color-primary-foreground: oklch(0.99 0 0);
+  --ui-color-secondary: oklch(0.96 0.008 260);
+  --ui-color-secondary-foreground: oklch(0.3 0.02 260);
+  --ui-color-accent: oklch(0.94 0.015 260);
+  --ui-color-accent-foreground: oklch(0.45 0.16 260);
+  --ui-color-muted: oklch(0.965 0.008 260);
+  --ui-color-muted-foreground: oklch(0.52 0.02 260);
+  --ui-color-border: oklch(0.9 0.01 260);
+  --ui-color-input: oklch(0.9 0.01 260);
+  --ui-color-ring: oklch(0.5 0.18 260);
+  --ui-color-chart-1: oklch(0.45 0.12 260);
+  --ui-color-chart-2: oklch(0.6 0.13 212);
+  --ui-color-chart-3: oklch(0.62 0.13 155);
+  --ui-color-chart-4: oklch(0.74 0.13 85);
+  --ui-color-chart-5: oklch(0.6 0.16 25);
+  --ui-radius-sm: 0.25rem;
+  --ui-radius-md: 0.375rem;
+  --ui-radius-lg: 0.5rem;
+  --ui-radius-xl: 0.75rem;
+}
+
+.dark[data-theme="dashboard"],
+[data-theme="dashboard"].dark {
+  --ui-color-primary: oklch(0.93 0.015 260);
+  --ui-color-primary-foreground: oklch(0.18 0.03 260);
+  --ui-color-secondary: oklch(0.24 0.015 260);
+  --ui-color-secondary-foreground: oklch(0.98 0.01 260);
+  --ui-color-accent: oklch(0.28 0.02 260);
+  --ui-color-accent-foreground: oklch(0.7 0.14 260);
+  --ui-color-muted: oklch(0.24 0.015 260);
+  --ui-color-muted-foreground: oklch(0.7 0.02 260);
+  --ui-color-border: oklch(0.28 0.015 260);
+  --ui-color-input: oklch(0.3 0.015 260);
+  --ui-color-ring: oklch(0.65 0.15 260);
+  --ui-color-chart-1: oklch(0.72 0.13 260);
+  --ui-color-chart-2: oklch(0.72 0.12 212);
+  --ui-color-chart-3: oklch(0.72 0.13 155);
+  --ui-color-chart-4: oklch(0.8 0.13 85);
+  --ui-color-chart-5: oklch(0.7 0.16 25);
+}

package/src/styles/themes/ecommerce-luxury.css

@@ -0,0 +1,64 @@
+/* FILE: packages/ui/src/styles/themes/ecommerce-luxury.css */
+
+[data-theme="ecommerce-luxury"] {
+  --ui-font-heading: "Playfair Display", ui-serif, Georgia, serif;
+  --ui-font-body: "Lato", ui-sans-serif, system-ui, sans-serif;
+  --ui-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
+  --ui-tracking-heading: 0em;
+  --ui-tracking-body: 0.01em;
+  --ui-leading-heading: 1.05;
+  --ui-leading-body: 1.65;
+  --ui-weight-heading: 600;
+  --ui-radius-sm: 0rem;
+  --ui-radius-md: 0rem;
+  --ui-radius-lg: 0.125rem;
+  --ui-radius-xl: 0.25rem;
+  --ui-color-background: oklch(0.992 0.004 60);
+  --ui-color-foreground: oklch(0.22 0.01 60);
+  --ui-color-card: oklch(1 0 0);
+  --ui-color-card-foreground: oklch(0.22 0.01 60);
+  --ui-color-popover: oklch(1 0 0);
+  --ui-color-popover-foreground: oklch(0.22 0.01 60);
+  --ui-color-primary: oklch(0.3 0.009 59);
+  --ui-color-primary-foreground: oklch(0.985 0 0);
+  --ui-color-secondary: oklch(0.962 0.006 60);
+  --ui-color-secondary-foreground: oklch(0.29 0.018 60);
+  --ui-color-accent: oklch(0.728 0.099 82);
+  --ui-color-accent-foreground: oklch(0.2 0.02 82);
+  --ui-color-muted: oklch(0.968 0.006 60);
+  --ui-color-muted-foreground: oklch(0.5 0.024 60);
+  --ui-color-border: oklch(0.916 0.006 60);
+  --ui-color-input: oklch(0.916 0.006 60);
+  --ui-color-ring: oklch(0.3 0.009 59);
+  --ui-color-chart-1: oklch(0.6 0.15 59);
+  --ui-color-chart-2: oklch(0.62 0.15 99);
+  --ui-color-chart-3: oklch(0.62 0.15 154);
+  --ui-color-chart-4: oklch(0.62 0.15 209);
+  --ui-color-chart-5: oklch(0.62 0.15 274);
+}
+
+.dark[data-theme="ecommerce-luxury"],
+[data-theme="ecommerce-luxury"].dark {
+  --ui-color-background: oklch(0.155 0.006 60);
+  --ui-color-foreground: oklch(0.95 0.006 60);
+  --ui-color-card: oklch(0.185 0.008 60);
+  --ui-color-card-foreground: oklch(0.95 0.006 60);
+  --ui-color-popover: oklch(0.185 0.008 60);
+  --ui-color-popover-foreground: oklch(0.95 0.006 60);
+  --ui-color-primary: oklch(0.68 0.009 59);
+  --ui-color-primary-foreground: oklch(0.2 0.02 59);
+  --ui-color-secondary: oklch(0.274 0.01 60);
+  --ui-color-secondary-foreground: oklch(0.972 0.01 60);
+  --ui-color-accent: oklch(0.728 0.099 82);
+  --ui-color-accent-foreground: oklch(0.2 0.02 82);
+  --ui-color-muted: oklch(0.274 0.01 60);
+  --ui-color-muted-foreground: oklch(0.712 0.016 60);
+  --ui-color-border: oklch(0.305 0.01 60);
+  --ui-color-input: oklch(0.33 0.01 60);
+  --ui-color-ring: oklch(0.68 0.009 59);
+  --ui-color-chart-1: oklch(0.6 0.15 59);
+  --ui-color-chart-2: oklch(0.72 0.14 99);
+  --ui-color-chart-3: oklch(0.72 0.14 154);
+  --ui-color-chart-4: oklch(0.72 0.14 209);
+  --ui-color-chart-5: oklch(0.72 0.14 274);
+}