@karni/ui 0.3.1 → 0.4.0

package/dist/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.js","sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind (v3) preset for @karni/ui consumers.\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 users: see the README recipe (@source into dist) instead.\n */\nimport type { Config } from \"tailwindcss\";\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--karni-background) / <alpha-value>)\",\n        foreground: \"hsl(var(--karni-foreground) / <alpha-value>)\",\n        card: {\n          DEFAULT: \"hsl(var(--karni-card) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-card-foreground) / <alpha-value>)\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--karni-popover) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-popover-foreground) / <alpha-value>)\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--karni-primary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-primary-foreground) / <alpha-value>)\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--karni-secondary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-secondary-foreground) / <alpha-value>)\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--karni-muted) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-muted-foreground) / <alpha-value>)\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--karni-accent) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-accent-foreground) / <alpha-value>)\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--karni-destructive) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-destructive-foreground) / <alpha-value>)\",\n        },\n        border: \"hsl(var(--karni-border) / <alpha-value>)\",\n        input: \"hsl(var(--karni-input) / <alpha-value>)\",\n        ring: \"hsl(var(--karni-ring) / <alpha-value>)\",\n        chart: {\n          \"1\": \"hsl(var(--karni-chart-1) / <alpha-value>)\",\n          \"2\": \"hsl(var(--karni-chart-2) / <alpha-value>)\",\n          \"3\": \"hsl(var(--karni-chart-3) / <alpha-value>)\",\n          \"4\": \"hsl(var(--karni-chart-4) / <alpha-value>)\",\n          \"5\": \"hsl(var(--karni-chart-5) / <alpha-value>)\",\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: \"hsl(var(--karni-border) / <alpha-value>)\",\n      },\n      borderRadius: {\n        lg: \"var(--karni-radius)\",\n        md: \"calc(var(--karni-radius) - 2px)\",\n        sm: \"calc(var(--karni-radius) - 4px)\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"names":["karniPreset"],"mappings":"AAsBA,MAAMA,IAAc;AAAA;AAAA;AAAA,EAGlB,UAAU;AAAA,EACV,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAEF,aAAa;AAAA;AAAA,QAEX,SAAS;AAAA,MAAA;AAAA,MAEX,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"tailwind-preset.js","names":["color","name","SPACE_STEPS","spacing","scale","step","FONT_SIZES","fontSize","size","leading","karniPreset"],"sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset for @karni/ui consumers (Tailwind 3, and 4 through @config).\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 loads the same config through `@config` in CSS, next to\n * `@import \"@karni/ui/tailwind-v4.css\"` (see the README).\n */\nimport type { Config } from \"tailwindcss\";\n\n/**\n * A colour token as a Tailwind colour. Wrapping it in color-mix with\n * `<alpha-value>` keeps opacity modifiers (`bg-primary/50`) working in\n * Tailwind 3 as well as 4, for any colour format the token holds.\n */\nfunction color(name: string): string {\n  return `color-mix(in srgb, var(--karni-color-${name}) calc(<alpha-value> * 100%), transparent)`;\n}\n\n/** The spacing scale: each step reads --karni-space-<n>, else n × --karni-space-unit. */\nexport const SPACE_STEPS = [\n  0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48,\n  52, 56, 60, 64, 72, 80, 96, 128,\n] as const;\n\nfunction spacing(): Record<string, string> {\n  const scale: Record<string, string> = {\n    0: \"0px\",\n    px: \"var(--karni-space-px, 1px)\",\n  };\n  for (const step of SPACE_STEPS) {\n    const name = String(step).replace(\".\", \"-\");\n    scale[String(step)] =\n      `var(--karni-space-${name}, calc(var(--karni-space-unit, 0.25rem) * ${step}))`;\n  }\n  return scale;\n}\n\nconst FONT_SIZES = {\n  xs: [\"0.75rem\", \"1rem\"],\n  sm: [\"0.875rem\", \"1.25rem\"],\n  base: [\"1rem\", \"1.5rem\"],\n  lg: [\"1.125rem\", \"1.75rem\"],\n  xl: [\"1.25rem\", \"1.75rem\"],\n  \"2xl\": [\"1.5rem\", \"2rem\"],\n} as const;\n\nfunction fontSize(): Record<string, [string, { lineHeight: string }]> {\n  return Object.fromEntries(\n    Object.entries(FONT_SIZES).map(([name, [size, leading]]) => [\n      name,\n      [\n        `var(--karni-font-size-${name}, ${size})`,\n        { lineHeight: `var(--karni-font-leading-${name}, ${leading})` },\n      ],\n    ]),\n  );\n}\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: color(\"background\"),\n        foreground: color(\"foreground\"),\n        card: { DEFAULT: color(\"card\"), foreground: color(\"card-foreground\") },\n        popover: { DEFAULT: color(\"popover\"), foreground: color(\"popover-foreground\") },\n        primary: {\n          DEFAULT: color(\"primary\"),\n          foreground: color(\"primary-foreground\"),\n          hover: color(\"primary-hover\"),\n        },\n        secondary: {\n          DEFAULT: color(\"secondary\"),\n          foreground: color(\"secondary-foreground\"),\n          hover: color(\"secondary-hover\"),\n        },\n        muted: {\n          DEFAULT: color(\"muted\"),\n          foreground: color(\"muted-foreground\"),\n          subtle: color(\"muted-subtle\"),\n        },\n        accent: { DEFAULT: color(\"accent\"), foreground: color(\"accent-foreground\") },\n        destructive: {\n          DEFAULT: color(\"destructive\"),\n          foreground: color(\"destructive-foreground\"),\n          hover: color(\"destructive-hover\"),\n          subtle: color(\"destructive-subtle\"),\n          border: color(\"destructive-border\"),\n        },\n        border: color(\"border\"),\n        input: color(\"input\"),\n        ring: color(\"ring\"),\n        overlay: color(\"overlay\"),\n        chart: {\n          \"1\": color(\"chart-1\"),\n          \"2\": color(\"chart-2\"),\n          \"3\": color(\"chart-3\"),\n          \"4\": color(\"chart-4\"),\n          \"5\": color(\"chart-5\"),\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: color(\"border\"),\n      },\n      spacing: spacing(),\n      borderRadius: {\n        DEFAULT: \"var(--karni-radius-sm, 0.25rem)\",\n        sm: \"var(--karni-radius-sm, 0.25rem)\",\n        md: \"var(--karni-radius-md, 0.375rem)\",\n        lg: \"var(--karni-radius-lg, 0.5rem)\",\n        xl: \"var(--karni-radius-xl, 0.75rem)\",\n        full: \"var(--karni-radius-full, 9999px)\",\n      },\n      fontFamily: {\n        sans: \"var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)\",\n        mono: \"var(--karni-font-mono, ui-monospace, monospace)\",\n      },\n      fontSize: fontSize(),\n      fontWeight: {\n        normal: \"var(--karni-font-weight-normal, 400)\",\n        medium: \"var(--karni-font-weight-medium, 500)\",\n        semibold: \"var(--karni-font-weight-semibold, 600)\",\n        bold: \"var(--karni-font-weight-bold, 700)\",\n      },\n      lineHeight: { none: \"var(--karni-font-leading-none, 1)\" },\n      textUnderlineOffset: { \"4\": \"var(--karni-font-underline-offset, 4px)\" },\n      letterSpacing: {\n        tight: \"var(--karni-font-tracking-tight, -0.025em)\",\n        wide: \"var(--karni-font-tracking-wide, 0.025em)\",\n      },\n      boxShadow: {\n        sm: \"var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        DEFAULT: \"var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        md: \"var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))\",\n        lg: \"var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))\",\n      },\n      borderWidth: {\n        DEFAULT: \"var(--karni-border-width, 1px)\",\n        \"2\": \"var(--karni-border-width-2, 2px)\",\n      },\n      divideWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      outlineWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      ringWidth: {\n        \"1\": \"var(--karni-ring-width-1, 1px)\",\n        \"2\": \"var(--karni-ring-width, 2px)\",\n      },\n      ringOffsetWidth: { \"2\": \"var(--karni-ring-offset-width, 2px)\" },\n      zIndex: {\n        raised: \"var(--karni-z-raised, 10)\",\n        drawer: \"var(--karni-z-drawer, 40)\",\n        popover: \"var(--karni-z-popover, 50)\",\n        modal: \"var(--karni-z-modal, 50)\",\n        toast: \"var(--karni-z-toast, 100)\",\n      },\n      opacity: {\n        \"50\": \"var(--karni-opacity-50, 0.5)\",\n        \"60\": \"var(--karni-opacity-60, 0.6)\",\n        \"70\": \"var(--karni-opacity-70, 0.7)\",\n        \"90\": \"var(--karni-opacity-90, 0.9)\",\n      },\n      transitionDuration: { DEFAULT: \"var(--karni-duration, 150ms)\" },\n      transitionTimingFunction: { DEFAULT: \"var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))\" },\n      animation: {\n        pulse: \"pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n        spin: \"spin var(--karni-duration-spin, 1s) linear infinite\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"mappings":"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"}

package/dist/tailwind-v4.css

@@ -0,0 +1,31 @@
+/* @karni/ui under Tailwind 4: import once, after Tailwind itself.
+ *
+ *   @import "tailwindcss";
+ *   @import "@karni/ui/tailwind-v4.css";
+ *   @config "../tailwind.config.ts";   (the @karni/ui preset)
+ *
+ * Tailwind 3 projects do not import this file: Tailwind 3 rejects an
+ * `@layer base` outside its own stylesheet, and needs nothing here.
+ *
+ * A bare `border` uses the --karni-color-border token, as under Tailwind 3, whose
+ * preflight applies the preset's default border color. Tailwind 4 defaults
+ * borders to currentColor. In the base layer this rule sits below every
+ * utility, so `border-input`, `border-destructive` and the rest still win;
+ * `:root` lifts it just above Tailwind's own reset. */
+@layer base {
+  :root *,
+  :root ::before,
+  :root ::after,
+  :root ::backdrop,
+  :root ::file-selector-button {
+    border-color: var(--karni-color-border);
+  }
+}
+
+/* Tailwind 4 reads transition timing from its own theme variables rather
+ * than the preset; point them at the motion tokens (which drop to 0ms under
+ * prefers-reduced-motion). */
+@theme {
+  --default-transition-duration: var(--karni-duration);
+  --default-transition-timing-function: var(--karni-ease);
+}

package/dist/vite-plugin.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./script-BVJ9BbPm.cjs");function t(){return{name:`karni-theme`,transformIndexHtml:()=>[{tag:`script`,children:e.t,injectTo:`head-prepend`}]}}exports.karniTheme=t;
+//# sourceMappingURL=vite-plugin.cjs.map

package/dist/vite-plugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.cjs","names":["KARNI_THEME_SCRIPT","require_script","karniTheme"],"sources":["../vite-plugin.ts"],"sourcesContent":["/**\n * `@karni/ui/vite`: what a Vite app needs from @karni/ui at build time.\n *\n *   import { karniTheme } from \"@karni/ui/vite\";\n *   export default defineConfig({ plugins: [react(), karniTheme()] });\n *\n * Typed structurally, so it needs no `vite` types of its own.\n */\nimport { KARNI_THEME_SCRIPT } from \"./src/theme/script\";\n\n/** One tag Vite's `transformIndexHtml` adds to index.html. */\nexport interface KarniHtmlTag {\n  tag: \"script\";\n  children: string;\n  injectTo: \"head-prepend\";\n}\n\n/** The plugin object `karniTheme()` returns (a Vite `Plugin`). */\nexport interface KarniThemePlugin {\n  name: \"karni-theme\";\n  transformIndexHtml: () => KarniHtmlTag[];\n}\n\n/**\n * Puts KARNI_THEME_SCRIPT first in index.html's <head>, so the page paints\n * in the user's theme (stored, else the system's) before React starts.\n * Pair it with <ThemeProvider> around the app. Escape hatch: leave the\n * plugin out and inline KARNI_THEME_SCRIPT yourself (another storage key,\n * another framework).\n */\nexport function karniTheme(): KarniThemePlugin {\n  return {\n    name: \"karni-theme\",\n    transformIndexHtml: () => [\n      { tag: \"script\", children: KARNI_THEME_SCRIPT, injectTo: \"head-prepend\" },\n    ],\n  };\n}\n"],"mappings":"A,4GA8BA,SAAgBE,GAA+B,CAC7C,MAAO,CACL,KAAM,cACN,uBAA0B,CACxB,CAAE,IAAK,SAAU,SAAUF,EAAAA,EAAoB,SAAU,cAAe,CAC1E,CACF,CACF,C"}

package/dist/vite-plugin.d.ts

@@ -0,0 +1,19 @@
+/** One tag Vite's `transformIndexHtml` adds to index.html. */
+export interface KarniHtmlTag {
+    tag: "script";
+    children: string;
+    injectTo: "head-prepend";
+}
+/** The plugin object `karniTheme()` returns (a Vite `Plugin`). */
+export interface KarniThemePlugin {
+    name: "karni-theme";
+    transformIndexHtml: () => KarniHtmlTag[];
+}
+/**
+ * Puts KARNI_THEME_SCRIPT first in index.html's <head>, so the page paints
+ * in the user's theme (stored, else the system's) before React starts.
+ * Pair it with <ThemeProvider> around the app. Escape hatch: leave the
+ * plugin out and inline KARNI_THEME_SCRIPT yourself (another storage key,
+ * another framework).
+ */
+export declare function karniTheme(): KarniThemePlugin;

package/dist/vite-plugin.js

@@ -0,0 +1,16 @@
+import { t as e } from "./script-D1fn4Dm4.js";
+//#region vite-plugin.ts
+function t() {
+	return {
+		name: "karni-theme",
+		transformIndexHtml: () => [{
+			tag: "script",
+			children: e,
+			injectTo: "head-prepend"
+		}]
+	};
+}
+//#endregion
+export { t as karniTheme };
+
+//# sourceMappingURL=vite-plugin.js.map

package/dist/vite-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.js","names":["KARNI_THEME_SCRIPT","karniTheme"],"sources":["../vite-plugin.ts"],"sourcesContent":["/**\n * `@karni/ui/vite`: what a Vite app needs from @karni/ui at build time.\n *\n *   import { karniTheme } from \"@karni/ui/vite\";\n *   export default defineConfig({ plugins: [react(), karniTheme()] });\n *\n * Typed structurally, so it needs no `vite` types of its own.\n */\nimport { KARNI_THEME_SCRIPT } from \"./src/theme/script\";\n\n/** One tag Vite's `transformIndexHtml` adds to index.html. */\nexport interface KarniHtmlTag {\n  tag: \"script\";\n  children: string;\n  injectTo: \"head-prepend\";\n}\n\n/** The plugin object `karniTheme()` returns (a Vite `Plugin`). */\nexport interface KarniThemePlugin {\n  name: \"karni-theme\";\n  transformIndexHtml: () => KarniHtmlTag[];\n}\n\n/**\n * Puts KARNI_THEME_SCRIPT first in index.html's <head>, so the page paints\n * in the user's theme (stored, else the system's) before React starts.\n * Pair it with <ThemeProvider> around the app. Escape hatch: leave the\n * plugin out and inline KARNI_THEME_SCRIPT yourself (another storage key,\n * another framework).\n */\nexport function karniTheme(): KarniThemePlugin {\n  return {\n    name: \"karni-theme\",\n    transformIndexHtml: () => [\n      { tag: \"script\", children: KARNI_THEME_SCRIPT, injectTo: \"head-prepend\" },\n    ],\n  };\n}\n"],"mappings":";;AA8BA,SAAgBC,IAA+B;CAC7C,OAAO;EACL,MAAM;EACN,0BAA0B,CACxB;GAAE,KAAK;GAAU,UAAUD;GAAoB,UAAU;EAAe,CAC1E;CACF;AACF"}

package/eslint-plugin/index.js

@@ -24,6 +24,7 @@ import maxPageLines from "./rules/max-page-lines.js";
 import noDeepImports from "./rules/no-deep-imports.js";
 import noDirectHttp from "./rules/no-direct-http.js";
 import noRawElements from "./rules/no-raw-elements.js";
+import noStyleLiterals from "./rules/no-style-literals.js";
 
 const plugin = {
   meta: {
@@ -35,6 +36,9 @@ const plugin = {
     "max-page-lines": maxPageLines,
     "no-deep-imports": noDeepImports,
     "no-direct-http": noDirectHttp,
+    // Not in `recommended`: a project with its own design system uses its own
+    // palette. @karni/ui enables it for its own source; projects may opt in.
+    "no-style-literals": noStyleLiterals,
   },
   // Filled below so the config entries can reference the plugin object itself.
   configs: {},

package/eslint-plugin/rules/max-page-lines.js

@@ -34,7 +34,7 @@ export default {
     messages: {
       tooLong:
         "Page file is {{count}} physical lines (max {{max}}). Past the cap you are rebuilding " +
-        "something @karni/ui ships — compose Page/ResourceTable/ResourceForm/ResourceDetail and " +
+        "something @karni/ui ships. Compose Page/ResourceTable/ResourceForm/ResourceDetail and " +
         "their props, or move logic into hooks/components. " +
         "Opt out only with an explained disable: /* eslint-disable karni/max-page-lines -- <reason> */",
     },

package/eslint-plugin/rules/no-deep-imports.js

@@ -30,7 +30,7 @@ export default {
     messages: {
       deepImport:
         'Deep import "{{source}}" reaches into @karni/ui internals. Import from the public ' +
-        'barrel "@karni/ui" and compose/extend the exported component — vendoring an internal ' +
+        'barrel "@karni/ui" and compose/extend the exported component. Vendoring an internal ' +
         "copy forks it. " +
         "Opt out only with an explained disable: " +
         "// eslint-disable-next-line karni/no-deep-imports -- <reason>",

package/eslint-plugin/rules/no-direct-http.js

@@ -72,7 +72,7 @@ export default {
       fetch:
         "Direct fetch() outside the api client directory. Use the generated typed hooks " +
         "(useResourceList/useResourceItem/useResourceMutations) or the KarniClient from " +
-        "@karni/ui — raw HTTP lives only under the allowed api/ paths. " +
+        "@karni/ui. Raw HTTP lives only under the allowed api/ paths. " +
         "Opt out only with an explained disable: " +
         "// eslint-disable-next-line karni/no-direct-http -- <reason>",
       axios:

package/eslint-plugin/rules/no-raw-elements.js

@@ -37,7 +37,7 @@ export default {
     ],
     messages: {
       rawElement:
-        "Raw <{{element}}> is Karni boilerplate — compose {{replacement}} from @karni/ui instead. " +
+        "Raw <{{element}}> is Karni boilerplate. Compose {{replacement}} from @karni/ui instead. " +
         "Opt out only with an explained disable: " +
         "// eslint-disable-next-line karni/no-raw-elements -- <reason>",
     },

package/eslint-plugin/rules/no-style-literals.js

@@ -0,0 +1,222 @@
+/**
+ * karni/no-style-literals — every visual value resolves from a design token.
+ *
+ * @karni/ui's preset maps Tailwind's scales (colours, spacing, type, radius,
+ * shadow, stacking, opacity, motion) onto --karni-* custom properties, so a
+ * project retheming those properties retheming every component. A class
+ * outside those scales compiles to a literal the theme cannot reach: an
+ * arbitrary value (`w-[13px]`, `bg-[#fff]`), Tailwind's palette
+ * (`bg-slate-500`), an opacity modifier on a colour (`bg-primary/90`), a step
+ * the spacing scale does not have, or a literal in an inline style.
+ *
+ * The rule checks the whitespace-separated class tokens of every string in
+ * the file and the values of inline `style={{ ... }}` objects. Computed style
+ * values (data-driven widths, percentages) are allowed: only literals fail.
+ */
+import { docsUrl } from "../lib/docs.js";
+
+/** The preset's spacing steps (keep in sync with SPACE_STEPS in tailwind-preset.ts). */
+const SPACE_STEPS = new Set([
+  "0",
+  "px",
+  "0.5",
+  "1",
+  "1.5",
+  "2",
+  "2.5",
+  "3",
+  "3.5",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12",
+  "14",
+  "16",
+  "20",
+  "24",
+  "28",
+  "32",
+  "36",
+  "40",
+  "44",
+  "48",
+  "52",
+  "56",
+  "60",
+  "64",
+  "72",
+  "80",
+  "96",
+  "128",
+]);
+
+const SPACING_UTILITY =
+  /^-?(?:p[xytrblse]?|m[xytrblse]?|gap(?:-[xy])?|space-[xy]|w|h|size|min-w|min-h|max-w|max-h|inset(?:-[xy])?|top|right|bottom|left|start|end|translate-[xy]|scroll-[mp][xytrblse]?|basis|indent)-(\d+(?:\.\d+)?)$/;
+
+const PALETTE =
+  "slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|black|white";
+const COLOR_UTILITY =
+  "bg|text|border(?:-[xytrblse])?|ring|ring-offset|outline|fill|stroke|from|via|to|divide|placeholder|decoration|accent|caret|shadow";
+const PALETTE_CLASS = new RegExp(`^(?:${COLOR_UTILITY})-(?:${PALETTE})(?:-\\d+)?(?:/\\d+)?$`);
+const OPACITY_MODIFIER = new RegExp(`^(?:${COLOR_UTILITY})-[a-z][\\w-]*/\\d+$`);
+
+/** Classes whose value comes from Tailwind's default theme, not a --karni-* token. */
+const UNMAPPED = [
+  [
+    /^max-w-(?:xs|sm|md|lg|xl|[2-7]xl|prose|screen-\w+)$/,
+    "a named max-width (use a spacing step, e.g. max-w-96)",
+  ],
+  [/^text-(?:[3-9]xl)$/, "a type size outside the --karni-font-size-* scale (xs to 2xl)"],
+  [/^-?z-\d+$/, "a numeric z-index (use z-raised, z-drawer, z-popover, z-modal or z-toast)"],
+  [/^opacity-(?!(?:0|50|60|70|90|100)$)\d+$/, "an opacity outside the --karni-opacity-* steps"],
+  [/^(?:duration|delay)-\d+$/, "a literal duration (transitions read --karni-duration)"],
+  [
+    /^rounded(?:-[tblrse]{1,2})?-(?:2xl|3xl)$/,
+    "a radius outside --karni-radius-* (sm to xl, full)",
+  ],
+  [/^shadow-(?:xl|2xl|inner)$/, "a shadow outside --karni-shadow-* (sm, md, lg)"],
+  [/^font-(?:thin|extralight|light|extrabold|black)$/, "a weight outside --karni-font-weight-*"],
+  [/^leading-(?!none$)[\w.]+$/, "a line height outside the type scale"],
+  [/^tracking-(?:tighter|wider|widest|normal)$/, "letter spacing outside --karni-font-tracking-*"],
+  [
+    /^(?:border(?:-[xytrblse])?|ring-offset|outline)-(?!0$|2$)\d+$/,
+    "a line width outside --karni-border-width / --karni-ring-*",
+  ],
+  [/^ring-(?!0$|1$|2$)\d+$/, "a ring width outside --karni-ring-width*"],
+  [/^underline-offset-(?!4$)\d+$/, "an underline offset outside --karni-font-underline-offset"],
+  [/^divide-[xy](?:-\d+)?$/, "a divider whose width Tailwind 4 hard-codes (use [&>*+*]:border-t)"],
+];
+
+const HEX = /#[0-9a-fA-F]{3,8}\b/;
+const LITERAL_IN_VALUE = /\d|#|\b(?:rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color)\(/;
+
+/** The base utility of a class token: variants (`hover:`, `md:`, `data-[x]:`) and `!` stripped. */
+function utilityOf(token) {
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < token.length; i += 1) {
+    const ch = token[i];
+    if (ch === "[") depth += 1;
+    else if (ch === "]") depth -= 1;
+    else if (ch === ":" && depth === 0) start = i + 1;
+  }
+  return token.slice(start).replace(/^!/, "");
+}
+
+/** Why `utility` is a literal, or null when it resolves from a token. */
+function problemOf(utility) {
+  const arbitrary = /^-?[\w-]*\[(.+)\]$/.exec(utility);
+  if (arbitrary) {
+    const value = arbitrary[1]
+      .replace(/var\(--[\w-]+(?:,[^)]*)?\)/g, "")
+      .replace(/\d+fr\b/g, "")
+      .replace(/\b(?:min|max|fit)-content\b/g, "");
+    return LITERAL_IN_VALUE.test(value) ? "an arbitrary literal value" : null;
+  }
+  if (PALETTE_CLASS.test(utility)) return "a Tailwind palette colour (use a --karni-color-* token)";
+  if (OPACITY_MODIFIER.test(utility)) {
+    return "an opacity modifier on a colour (use a token such as bg-primary-hover or bg-muted-subtle)";
+  }
+  const spacing = SPACING_UTILITY.exec(utility);
+  if (spacing && !SPACE_STEPS.has(spacing[1]))
+    return "a step the --karni-space-* scale does not have";
+  for (const [pattern, why] of UNMAPPED) if (pattern.test(utility)) return why;
+  return null;
+}
+
+function checkClasses(context, node, text) {
+  if (HEX.test(text)) {
+    context.report({
+      node,
+      messageId: "literal",
+      data: { value: HEX.exec(text)[0], why: "a hex colour" },
+    });
+  }
+  for (const token of text.split(/\s+/)) {
+    if (!token) continue;
+    const why = problemOf(utilityOf(token));
+    if (why) context.report({ node, messageId: "literal", data: { value: token, why } });
+  }
+}
+
+function literalStyleValue(node) {
+  if (node.type === "Literal") {
+    if (typeof node.value === "number") return node.value !== 0;
+    return (
+      typeof node.value === "string" &&
+      LITERAL_IN_VALUE.test(node.value.replace(/var\(--[\w-]+\)/g, ""))
+    );
+  }
+  if (node.type === "TemplateLiteral" && node.expressions.length === 0) {
+    return LITERAL_IN_VALUE.test(node.quasis[0].value.cooked ?? "");
+  }
+  return false;
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      url: docsUrl("no-style-literals"),
+      description:
+        "Every visual value resolves from a --karni-* token: no arbitrary literal values, palette colours, colour opacity modifiers or literal inline styles.",
+    },
+    schema: [],
+    messages: {
+      literal:
+        '"{{value}}" is {{why}}: the theme cannot reach it. Use a class from the @karni/ui preset ' +
+        "(it resolves from --karni-* tokens), or add a token to styles.css and the preset. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-style-literals -- <reason>",
+    },
+  },
+
+  create(context) {
+    return {
+      Literal(node) {
+        if (typeof node.value !== "string") return;
+        if (
+          node.parent?.type === "ImportDeclaration" ||
+          node.parent?.type === "ExportNamedDeclaration"
+        )
+          return;
+        if (node.parent?.type === "Property" && node.parent.key === node) return;
+        if (insideStyleObject(node)) return;
+        checkClasses(context, node, node.value);
+      },
+      TemplateElement(node) {
+        if (insideStyleObject(node)) return;
+        checkClasses(context, node, node.value.cooked ?? "");
+      },
+      JSXAttribute(node) {
+        if (node.name.name !== "style") return;
+        const expression =
+          node.value?.type === "JSXExpressionContainer" ? node.value.expression : null;
+        if (expression?.type !== "ObjectExpression") return;
+        for (const property of expression.properties) {
+          if (property.type === "Property" && literalStyleValue(property.value)) {
+            context.report({
+              node: property.value,
+              messageId: "literal",
+              data: { value: context.sourceCode.getText(property), why: "a literal inline style" },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+/** Inline style values are checked by the JSXAttribute visitor, not as class strings. */
+function insideStyleObject(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (current.type === "JSXAttribute") return current.name.name === "style";
+    if (current.type === "JSXElement" || current.type === "Program") return false;
+  }
+  return false;
+}

package/eslint-plugin/rules.json

@@ -8,19 +8,25 @@
   {
     "id": "karni/max-page-lines",
     "title": "A page file is longer than its cap (50 lines by default)",
-    "why": "Pages compose @karni/ui components; a long page is rebuilding something Karni ships.",
+    "why": "Pages compose @karni/ui components. A long page is rebuilding something Karni ships.",
     "fix": "Compose Page / ResourceTable / ResourceForm / ResourceDetail and their props, or move logic into hooks and components. Opt out only with `/* eslint-disable karni/max-page-lines -- <reason> */`."
   },
   {
     "id": "karni/no-deep-imports",
     "title": "An import reaches into @karni/ui internals",
-    "why": "Only the package root is public API (docs/stability.md); internals change without notice, and a vendored copy forks the component.",
+    "why": "Only the package root is public API (docs/stability.md). Internals change without notice, and a vendored copy forks the component.",
     "fix": "Import from \"@karni/ui\" and compose or extend the exported component. Opt out only with `// eslint-disable-next-line karni/no-deep-imports -- <reason>`."
   },
   {
     "id": "karni/no-direct-http",
     "title": "fetch / axios / XMLHttpRequest / WebSocket outside the api client",
-    "why": "The generated typed hooks and KarniClient handle auth, errors, retries and types in one place; ad-hoc HTTP calls bypass all of it.",
-    "fix": "Use the generated typed hooks (useResourceList / useResourceItem / useResourceMutations) or createKarniClient from @karni/ui; keep transports under the api/ directory. Opt out only with `// eslint-disable-next-line karni/no-direct-http -- <reason>`."
+    "why": "The generated typed hooks and KarniClient handle auth, errors, retries and types in one place. Ad-hoc HTTP calls bypass all of it.",
+    "fix": "Use the generated typed hooks (useResourceList / useResourceItem / useResourceMutations) or createKarniClient from @karni/ui, and keep transports under the api/ directory. Opt out only with `// eslint-disable-next-line karni/no-direct-http -- <reason>`."
+  },
+  {
+    "id": "karni/no-style-literals",
+    "title": "A class or inline style holds a literal value instead of a design token",
+    "why": "@karni/ui's preset resolves every colour, spacing step, radius, type size, shadow, z-index, opacity and duration from a --karni-* custom property, so one stylesheet (or `karni ui detect`) rethemes every component. A literal (`w-[13px]`, `bg-slate-500`, `bg-primary/90`, `style={{ color: \"#333\" }}`) is out of the theme's reach.",
+    "fix": "Use a class from the @karni/ui preset (`bg-primary-hover`, `bg-muted-subtle`, `max-w-96`, `z-popover`), or add the token to styles.css and the preset. @karni/ui enables this rule for its own source. A project opts in with `\"karni/no-style-literals\": \"error\"`. Opt out only with `// eslint-disable-next-line karni/no-style-literals -- <reason>`."
   }
 ]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@karni/ui",
-  "version": "0.3.1",
-  "description": "React components for the Karni Django + React framework: schema-driven resource tables, forms, detail views and auth, generated from the backend's OpenAPI document, plus themable primitives and an ESLint preset.",
+  "version": "0.4.0",
+  "description": "React components for Karni: schema-driven tables, forms, detail views and auth. Karni is an open-source Django + React framework for building with AI coding agents. Your agent writes only your domain. The API, admin, permissions and React screens come from a package you upgrade, not code it rewrites in each project. One rule set covers Claude Code, Cursor and Copilot. The build fails when an agent hand-writes what Karni ships.",
   "keywords": [
     "react",
     "django",
@@ -48,11 +48,17 @@
       "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/styles.css",
+    "./tailwind-v4.css": "./dist/tailwind-v4.css",
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.js",
       "require": "./dist/tailwind-preset.cjs"
     },
+    "./vite": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.js",
+      "require": "./dist/vite-plugin.cjs"
+    },
     "./manifest.json": "./dist/manifest.json",
     "./eslint-plugin": "./eslint-plugin/index.js",
     "./package.json": "./package.json"
@@ -62,7 +68,7 @@
   "types": "./dist/src/index.d.ts",
   "scripts": {
     "dev": "vite build --watch",
-    "build": "tsc --noEmit && vite build && node scripts/generate-manifest.mjs",
+    "build": "tsc --noEmit && eslint src --max-warnings 0 && vite build && node scripts/generate-manifest.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "eslint .",
@@ -78,10 +84,10 @@
     ]
   },
   "peerDependencies": {
-    "eslint": ">=9.0.0",
     "@hookform/resolvers": "^3.0.0",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.0.0",
+    "eslint": ">=9.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
@@ -105,38 +111,39 @@
   "devDependencies": {
     "@eslint/js": "^9.39.5",
     "@hookform/resolvers": "^3.9.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-vite": "^8.3.0",
+    "@storybook/react": "^10.6.3",
+    "@storybook/react-vite": "^10.6.3",
+    "@tailwindcss/postcss": "^4.3.3",
     "@tanstack/react-query": "^5.104.3",
     "@tanstack/react-table": "^8.20.5",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.8",
-    "@types/node": "^20.16.0",
+    "@types/node": "^24.0.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.7.0",
-    "autoprefixer": "^10.4.20",
+    "@vitejs/plugin-react": "^6.1.2",
+    "axe-core": "^4.14.0",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^15.15.0",
     "jsdom": "^25.0.0",
     "msw": "^2.4.4",
-    "msw-storybook-addon": "^2.0.3",
+    "msw-storybook-addon": "^3.0.3",
+    "playwright": "^1.64.1",
     "postcss": "^8.5.30",
     "prettier": "^3.9.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.90.0",
-    "storybook": "^8.3.0",
-    "tailwindcss": "^3.4.10",
+    "storybook": "^10.6.3",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.71.2",
-    "vite": "^6.4.4",
+    "vite": "^8.3.4",
     "vite-plugin-dts": "^5.1.2",
-    "vitest": "^4.1.12",
+    "vitest": "^5.0.5",
     "zod": "^3.23.8"
   },
   "peerDependenciesMeta": {
@@ -147,9 +154,5 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
-  },
-  "overrides": {
-    "postcss-selector-parser": "^7.1.7",
-    "uuid": "^11.1.1"
   }
 }