@inui/design-system 0.0.0-stage → 1.22.0

package/dist/theme.css

@@ -0,0 +1,417 @@
+/*
+ * Design token registration, plus document-wide emission for direct
+ * importers. index.css pulls this in via `@reference` (registers, emits
+ * nothing); a direct `theme.css` import emits unscoped on `:root`.
+ */
+
+/* Dark mode is class-driven (.dark on <html>), not prefers-color-scheme. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * Registration only (`reference` emits nothing — avoids the `:root, :host`
+ * leak a plain `@theme` would cause). `static` keeps every token registered
+ * even if unused. EDIT VALUES IN theme-tokens.css, then mirror them here —
+ * values here are only `var()` fallbacks, never what actually renders.
+ */
+@theme static reference {
+  /* "DM Sans Variable" first — fontsource's variable build registers under
+     that name, not "DM Sans" (see .storybook/preview.tsx). */
+  --font-sans:
+    "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    "DM Mono", ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
+
+  /* Level 1 primitives — see theme-tokens.css for the full rationale, including
+     the Tailwind-convention shade renumbering (50…950 + 1000/1100/1200 extension).
+     Every semantic token below is Level 2, referencing these via var(). */
+  --color-indigo-50: #f5f6ff;
+  --color-indigo-100: #e5e8ff;
+  --color-indigo-200: #d6daff;
+  --color-indigo-300: #c7ccff;
+  --color-indigo-400: #b3baff;
+  --color-indigo-500: #9faafe;
+  --color-indigo-600: #8993fa;
+  --color-indigo-700: #7380f7;
+  --color-indigo-800: #5a67f6;
+  --color-indigo-900: #4256d7;
+  --color-indigo-950: #2f4aac;
+  --color-indigo-1000: #223987;
+  --color-indigo-1100: #192b66;
+  --color-indigo-1200: #101c46;
+  --color-red-50: #fff7f5;
+  --color-red-100: #ffe1db;
+  --color-red-200: #ffd4cc;
+  --color-red-300: #fec0b4;
+  --color-red-400: #fcac9c;
+  --color-red-500: #f49480;
+  --color-red-600: #ed765e;
+  --color-red-700: #e45b3f;
+  --color-red-800: #df3011;
+  --color-red-900: #bd1c00;
+  --color-red-950: #9e200a;
+  --color-red-1000: #791a06;
+  --color-red-1100: #5c1305;
+  --color-red-1200: #3f0e03;
+  --color-cyan-50: #eefafc;
+  --color-cyan-100: #cff1f7;
+  --color-cyan-200: #b6e8f2;
+  --color-cyan-300: #96dfee;
+  --color-cyan-400: #6ed3e7;
+  --color-cyan-500: #33c4e1;
+  --color-cyan-600: #00b2d6;
+  --color-cyan-700: #009fc7;
+  --color-cyan-800: #008cb3;
+  --color-cyan-900: #007599;
+  --color-cyan-950: #006080;
+  --color-cyan-1000: #004766;
+  --color-cyan-1100: #003952;
+  --color-cyan-1200: #002738;
+  --color-violet-50: #faf6fe;
+  --color-violet-100: #f0e7fd;
+  --color-violet-200: #e4d5fb;
+  --color-violet-300: #dcc7fa;
+  --color-violet-400: #cfb4f8;
+  --color-violet-500: #c0a0f3;
+  --color-violet-600: #ac87ee;
+  --color-violet-700: #9e72e9;
+  --color-violet-800: #8854e8;
+  --color-violet-900: #6f47cd;
+  --color-violet-950: #5b3ba5;
+  --color-violet-1000: #462d80;
+  --color-violet-1100: #322361;
+  --color-violet-1200: #211844;
+  --color-yellow-50: #fff9e5;
+  --color-yellow-100: #fff5d6;
+  --color-yellow-200: #fff0c2;
+  --color-yellow-300: #ffe9a8;
+  --color-yellow-400: #fee18b;
+  --color-yellow-500: #fbd86f;
+  --color-yellow-600: #f8cd4f;
+  --color-yellow-700: #f5c32e;
+  --color-yellow-800: #f5ba0a;
+  --color-yellow-900: #d6a100;
+  --color-yellow-950: #ad8200;
+  --color-yellow-1000: #856300;
+  --color-yellow-1100: #664d00;
+  --color-yellow-1200: #473600;
+  --color-green-50: #f1f9f0;
+  --color-green-100: #dcf0db;
+  --color-green-200: #cbe8c9;
+  --color-green-300: #b6dfb3;
+  --color-green-400: #9dd49b;
+  --color-green-500: #7ec57d;
+  --color-green-600: #5eb55e;
+  --color-green-700: #3aa63c;
+  --color-green-800: #009900;
+  --color-green-900: #008000;
+  --color-green-950: #006b00;
+  --color-green-1000: #005200;
+  --color-green-1100: #003d04;
+  --color-green-1200: #002904;
+  --color-orange-50: #ffeed1;
+  --color-orange-100: #ffe8c2;
+  --color-orange-200: #ffdca3;
+  --color-orange-300: #ffca7a;
+  --color-orange-400: #ffb657;
+  --color-orange-500: #ffa333;
+  --color-orange-600: #ff9114;
+  --color-orange-700: #eb7900;
+  --color-orange-800: #d66c00;
+  --color-orange-900: #bd5b00;
+  --color-orange-950: #a34c00;
+  --color-orange-1000: #8a3b00;
+  --color-orange-1100: #6b2900;
+  --color-orange-1200: #4d1c00;
+  --color-pink-50: #fff5f9;
+  --color-pink-100: #fee1eb;
+  --color-pink-200: #fccfdf;
+  --color-pink-300: #fabdd2;
+  --color-pink-400: #f6a7c4;
+  --color-pink-500: #ef8fb2;
+  --color-pink-600: #e7739e;
+  --color-pink-700: #de5487;
+  --color-pink-800: #d62974;
+  --color-pink-900: #bb165b;
+  --color-pink-950: #991a44;
+  --color-pink-1000: #751538;
+  --color-pink-1100: #5a112d;
+  --color-pink-1200: #3d0b20;
+  --color-teal-50: #effaf9;
+  --color-teal-100: #cff2ef;
+  --color-teal-200: #b8eae5;
+  --color-teal-300: #98e2dc;
+  --color-teal-400: #6fd8d2;
+  --color-teal-500: #2fcac0;
+  --color-teal-600: #00b8ae;
+  --color-teal-700: #00a89d;
+  --color-teal-800: #008f88;
+  --color-teal-900: #007a74;
+  --color-teal-950: #00665f;
+  --color-teal-1000: #004d47;
+  --color-teal-1100: #003d3a;
+  --color-teal-1200: #002926;
+  --color-fuchsia-50: #fdf6fc;
+  --color-fuchsia-100: #f8e2f5;
+  --color-fuchsia-200: #f3d3ef;
+  --color-fuchsia-300: #efc2e9;
+  --color-fuchsia-400: #e7ace1;
+  --color-fuchsia-500: #dd92d5;
+  --color-fuchsia-600: #d17acd;
+  --color-fuchsia-700: #c55ec1;
+  --color-fuchsia-800: #b83db8;
+  --color-fuchsia-900: #9d2d9f;
+  --color-fuchsia-950: #842a82;
+  --color-fuchsia-1000: #651f64;
+  --color-fuchsia-1100: #4e184d;
+  --color-fuchsia-1200: #371036;
+  --color-lime-50: #f5faed;
+  --color-lime-100: #e4efd3;
+  --color-lime-200: #d5e6bb;
+  --color-lime-300: #c5dc9e;
+  --color-lime-400: #b2d07d;
+  --color-lime-500: #9dc057;
+  --color-lime-600: #87b018;
+  --color-lime-700: #779d00;
+  --color-lime-800: #688900;
+  --color-lime-900: #577400;
+  --color-lime-950: #476000;
+  --color-lime-1000: #364900;
+  --color-lime-1100: #283800;
+  --color-lime-1200: #1a2700;
+  --color-blue-50: #f0f9ff;
+  --color-blue-100: #d6eeff;
+  --color-blue-200: #c2e4ff;
+  --color-blue-300: #a8d8ff;
+  --color-blue-400: #8bcafe;
+  --color-blue-500: #6fb7fb;
+  --color-blue-600: #4fa3f8;
+  --color-blue-700: #2e8ef5;
+  --color-blue-800: #0a74f5;
+  --color-blue-900: #0060d6;
+  --color-blue-950: #0051ad;
+  --color-blue-1000: #003e85;
+  --color-blue-1100: #003066;
+  --color-blue-1200: #002147;
+  --color-neutral-50: #f7f7f7;
+  --color-neutral-100: #ebebeb;
+  --color-neutral-200: #e0e0e0;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #c4c4c4;
+  --color-neutral-500: #b5b5b5;
+  --color-neutral-600: #a3a3a3;
+  --color-neutral-700: #858585;
+  --color-neutral-800: #636363;
+  --color-neutral-900: #575757;
+  --color-neutral-950: #424242;
+  --color-neutral-1000: #333333;
+  --color-neutral-1100: #242424;
+  --color-neutral-1200: #1a1a1a;
+  --color-white: #ffffff;
+
+  --color-background: var(--color-neutral-50);
+  --color-foreground: var(--color-neutral-1200);
+  --color-card: var(--color-white);
+  --color-card-foreground: var(--color-neutral-1200);
+  --color-popover: var(--color-white);
+  --color-popover-foreground: var(--color-neutral-1200);
+  --color-primary: var(--color-blue-900);
+  --color-primary-foreground: var(--color-white);
+  --color-primary-hover: var(--color-blue-1000);
+  --color-primary-active: var(--color-blue-1100);
+  --color-secondary: var(--color-neutral-50);
+  --color-secondary-foreground: var(--color-neutral-1200);
+  --color-muted: var(--color-neutral-100);
+  --color-muted-foreground: var(--color-neutral-900);
+  --color-muted-hover: var(--color-neutral-200);
+  --color-muted-active: var(--color-neutral-300);
+  /* Lighter than muted-foreground on purpose — see theme-tokens.css. */
+  --color-disabled-foreground: var(--color-neutral-800);
+  /* Matches --color-muted, not border/input — accent is a hover wash, not an outline. */
+  --color-accent: var(--color-neutral-100);
+  --color-accent-foreground: var(--color-neutral-1200);
+  --color-destructive: var(--color-red-900);
+  --color-destructive-foreground: var(--color-white);
+  --color-destructive-hover: var(--color-red-950);
+  --color-destructive-active: var(--color-red-1100);
+  --color-destructive-light: var(--color-red-100);
+  --color-destructive-ultra-light: var(--color-red-50);
+  --color-destructive-text: var(--color-red-950);
+  --color-success: var(--color-green-800);
+  --color-success-foreground: var(--color-neutral-1200);
+  --color-success-light: var(--color-green-100);
+  --color-success-ultra-light: var(--color-green-50);
+  --color-success-text: var(--color-green-1000);
+  --color-warning: var(--color-yellow-950);
+  --color-warning-foreground: var(--color-neutral-1200);
+  --color-warning-light: var(--color-yellow-100);
+  --color-warning-ultra-light: var(--color-yellow-50);
+  --color-warning-text: var(--color-yellow-1100);
+  --color-warning-solid-text: var(--color-neutral-1200);
+  --color-alert: var(--color-orange-800);
+  --color-alert-foreground: var(--color-neutral-1200);
+  --color-alert-light: var(--color-orange-100);
+  --color-alert-ultra-light: var(--color-orange-50);
+  --color-alert-text: var(--color-orange-1000);
+  --color-info: var(--color-blue-950);
+  --color-info-foreground: var(--color-white);
+  --color-info-light: var(--color-blue-100);
+  --color-info-ultra-light: var(--color-blue-50);
+  --color-info-text: var(--color-blue-1100);
+  --color-surface: var(--color-white);
+  --color-surface-foreground: var(--color-neutral-1200);
+  --color-surface-chat: var(--color-white);
+  --color-surface-chat-foreground: var(--color-neutral-1200);
+  --color-surface-canvas: var(--color-neutral-50);
+  --color-surface-canvas-foreground: var(--color-neutral-1200);
+  /* Matches Neutral-200 / shadcn's actual subtlety — see theme-tokens.css
+     for the full rationale (traded the WCAG 1.4.11 3:1 floor on purpose). */
+  --color-border: var(--color-neutral-200);
+  --color-border-subtle: var(--color-neutral-100);
+  --color-input: var(--color-neutral-200);
+  /* Darker step of Primary (Blue-950), not neutral gray — see
+     theme-tokens.css for the full rationale. */
+  --color-ring: var(--color-blue-950);
+  --color-ring-destructive: var(--color-red-400);
+  --color-overlay: rgb(26 26 26 / 0.35);
+
+  /* AI identity gradient */
+  --color-ai-grad-from: #e81f76;
+  --color-ai-grad-to: #eb5324;
+  --color-ai-grad-from-alpha: 0.8;
+  --color-ai-wash: #ffc208;
+  --color-ai-wash-alpha: 0.24;
+  /* pre-baked for linear-gradient() */
+  --color-ai-grad-from-fade: color-mix(in srgb, #e81f76 80%, transparent);
+  --color-ai-wash-fade: color-mix(in srgb, #ffc208 24%, transparent);
+
+  /* Sidebar — matches --color-background, not --color-card, so a card sits
+     visibly raised against it. */
+  --color-sidebar: var(--color-neutral-50);
+  --color-sidebar-foreground: var(--color-neutral-1200);
+  --color-sidebar-primary: var(--color-blue-900);
+  --color-sidebar-primary-foreground: var(--color-white);
+  --color-sidebar-accent: var(--color-neutral-100);
+  --color-sidebar-accent-foreground: var(--color-neutral-1200);
+  --color-sidebar-border: var(--color-neutral-200);
+  --color-sidebar-ring: var(--color-blue-950);
+
+  /* Chart ramp — Accent 1-8 primitives at their -900 step, independent from
+     status colors/primary. See theme-tokens.css for the full rationale. */
+  --color-chart-1: var(--color-orange-900);
+  --color-chart-2: var(--color-violet-900);
+  --color-chart-3: var(--color-indigo-900);
+  --color-chart-4: var(--color-lime-900);
+  --color-chart-5: var(--color-cyan-900);
+  --color-chart-6: var(--color-pink-900);
+  --color-chart-7: var(--color-teal-900);
+  --color-chart-8: var(--color-fuchsia-900);
+
+  /* Shadows — neutral gray-1200 base (Night), not pure black */
+  --shadow-md:
+    0 4px 6px -1px rgb(26 26 26 / 0.1), 0 2px 4px -2px rgb(26 26 26 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(26 26 26 / 0.1), 0 4px 6px -4px rgb(26 26 26 / 0.1);
+  --shadow-popover: 0 0 20px -4px rgb(26 26 26 / 0.18);
+  /* AI glow, outward, blur layer only — the crisp ring is a separate
+     `@utility shadow-ai-glow` below (box-shadow can't paint the ring's
+     gradient). See theme-tokens.css for the full rationale. */
+  --shadow-ai-glow-blur: 0 0 16px 4px var(--color-ai-wash-fade);
+  /* AI glow, inward — a background-image glow (not a ring/border) for
+     row/column-scale AI marking, and a bottom-edge variant for whole-table
+     AI presence. See theme-tokens.css for the full rationale. */
+  --background-image-ai-glow: linear-gradient(
+    to right,
+    var(--color-ai-wash-fade),
+    transparent 20%
+  );
+  --background-image-ai-glow-bottom: linear-gradient(
+    to top,
+    var(--color-ai-wash-fade),
+    transparent 15%
+  );
+
+  /* Animation */
+  --animate-step-in: mmds-step-in 180ms ease-out both;
+}
+
+/* AI glow, outward, ring layer — a plain CSS variable can't hold a
+   gradient-shaped box-shadow ring, so this is an explicit `@utility`, not a
+   theme value: box-shadow only paints the soft blur (--shadow-ai-glow-blur
+   above); the crisp 1px ring is a `::before` painted with the SAME
+   two-stop gradient (ai-wash → ai-grad-from) the AI Card recipe's gradient
+   outline uses, so both read as the same colour family instead of a flat
+   approximation. `mask-composite: exclude` (the standard gradient-border
+   trick) keeps the gradient visible only in the 1px padding ring and fully
+   transparent everywhere else, so it never covers content and needs no
+   wrapper div — that's the whole point of this variant over the outline. */
+@utility shadow-ai-glow {
+  position: relative;
+  box-shadow: var(--shadow-ai-glow-blur);
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(
+      to right,
+      var(--color-ai-wash),
+      var(--color-ai-grad-from)
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+}
+
+/* Authoritative values, for direct importers only — `@reference` means index.css
+   never reaches this rule. theme-tokens.css carries dark mode too. */
+:root {
+  @import "./theme-tokens.css";
+}
+
+/* Tailwind v4 dropped the old v3 default of resolving an unsuffixed border
+   utility (bare `border`/`border-b`/`border-t`/etc., no color class) to
+   gray-200 — it now resolves to `currentColor` instead, a documented
+   breaking change. MMDS's own components (Table's TableRow, Card's
+   CardFooter, Dialog's DialogFooter, Sidebar's rail edge, and others) rely
+   on that old default and never write `border-border` explicitly on every
+   one of them — same as shadcn/ui's own source, which this is forked from.
+   Path A (index.css, the prebuilt scoped stylesheet) already restores it
+   via this exact rule inside its own preflight. A direct `theme.css`
+   import has no preflight of its own, so a consuming Tailwind v4 build
+   never gets it — every one of those dividers silently renders in
+   `currentColor` (usually near-black body text) instead of the intended
+   `--color-border`. This is Tailwind's own documented v3→v4 compatibility
+   snippet (also what shadcn's CLI now scaffolds into new v4 projects'
+   `globals.css`), just pointed at the design token instead of a hardcoded
+   gray — not an MMDS-specific patch, so it stays correct across future
+   Tailwind/shadcn versions instead of drifting from them. */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+  }
+}
+
+/* Prefixed because `@keyframes` names resolve document-wide and can't be scoped.
+   Also duplicated in index.css, which `@reference` stops from inheriting it. */
+@keyframes mmds-step-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/package.json

@@ -1,6 +1,106 @@
 {
   "name": "@inui/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.22.0",
+  "description": "Magic Masala design system — the full shadcn/ui component set on Tailwind CSS v4 with a customisable token layer.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "lucide-react": ">=1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@shadcn/react": "^0.3.0",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "radix-ui": "^1.6.7",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.12.2",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.0",
+    "@fontsource-variable/dm-sans": "^5.3.0",
+    "@fontsource/dm-mono": "^5.3.0",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-themes": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "eslint": "^10.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.5.10",
+    "fast-glob": "^3.3.3",
+    "globals": "^17.0.0",
+    "lucide-react": "^1.31.0",
+    "playwright": "^1.62.1",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "react": "^19.2.8",
+    "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^19.2.8",
+    "shadcn": "^4.17.0",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^4.3.3",
+    "tsc-alias": "^1.9.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^8.2.1"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "pnpm run docgen && storybook dev -p 6006",
+    "storybook": "pnpm run docgen && storybook dev -p 6006",
+    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
+    "build:js": "vite build -c vite.lib.config.ts",
+    "build:types": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:css": "tailwindcss -i src/styles/index.css -o dist/styles.css --minify && cp src/styles/theme.css src/styles/theme-tokens.css dist/",
+    "build:storybook": "pnpm run build:types && pnpm run docgen && storybook build -o storybook-static",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,css,md,json}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,css,md,json}\"",
+    "release": "test -n \"$PACKAGE_VERSION\" && npm pkg set version=\"$PACKAGE_VERSION\" && pnpm publish --no-git-checks --access public --tag \"${DIST_TAG:-latest}\"",
+    "docgen": "node scripts/gen-docgen.mjs",
+    "usage-guidelines": "node scripts/gen-usage-guidelines.mjs",
+    "check-contrast": "node scripts/check-foreground-contrast.mjs",
+    "check-clinical-contrast": "node scripts/check-clinical-contrast.mjs",
+    "check-colorblind-distinction": "node scripts/check-colorblind-distinction.mjs",
+    "test-a11y": "node scripts/axe-scan.mjs"
+  }
 }