@nextlyhq/ui 0.0.2-alpha.35 → 0.0.2-alpha.39

package/dist/tailwind-preset.d.cts

@@ -0,0 +1,80 @@
+declare const uiPreset: {
+    theme: {
+        extend: {
+            colors: {
+                border: string;
+                input: string;
+                ring: string;
+                background: string;
+                foreground: string;
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    solid: string;
+                    foreground: string;
+                };
+                success: {
+                    DEFAULT: string;
+                    solid: string;
+                    foreground: string;
+                };
+                warning: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+            };
+            borderRadius: {
+                lg: string;
+                md: string;
+                sm: string;
+            };
+            keyframes: {
+                "accordion-down": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+                "accordion-up": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            animation: {
+                "accordion-down": string;
+                "accordion-up": string;
+            };
+        };
+    };
+};
+
+export { uiPreset as default, uiPreset };

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,80 @@
+declare const uiPreset: {
+    theme: {
+        extend: {
+            colors: {
+                border: string;
+                input: string;
+                ring: string;
+                background: string;
+                foreground: string;
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    solid: string;
+                    foreground: string;
+                };
+                success: {
+                    DEFAULT: string;
+                    solid: string;
+                    foreground: string;
+                };
+                warning: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+            };
+            borderRadius: {
+                lg: string;
+                md: string;
+                sm: string;
+            };
+            keyframes: {
+                "accordion-down": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+                "accordion-up": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            animation: {
+                "accordion-down": string;
+                "accordion-up": string;
+            };
+        };
+    };
+};
+
+export { uiPreset as default, uiPreset };

package/dist/tailwind-preset.mjs

@@ -0,0 +1,93 @@
+// src/tailwind-preset.ts
+var statusScale = (base) => ({
+  50: `color-mix(in srgb, var(${base}), white 95%)`,
+  100: `color-mix(in srgb, var(${base}), white 90%)`,
+  200: `color-mix(in srgb, var(${base}), white 70%)`,
+  300: `color-mix(in srgb, var(${base}), white 50%)`,
+  400: `color-mix(in srgb, var(${base}), white 30%)`,
+  500: `var(${base})`,
+  600: `color-mix(in srgb, var(${base}), black 10%)`,
+  700: `color-mix(in srgb, var(${base}), black 30%)`,
+  800: `color-mix(in srgb, var(${base}), black 50%)`,
+  900: `color-mix(in srgb, var(${base}), black 70%)`,
+  950: `color-mix(in srgb, var(${base}), black 85%)`
+});
+var uiPreset = {
+  theme: {
+    extend: {
+      colors: {
+        border: "var(--nx-border)",
+        input: "var(--nx-input)",
+        ring: "var(--nx-ring)",
+        background: "var(--nx-background)",
+        foreground: "var(--nx-foreground)",
+        primary: {
+          DEFAULT: "var(--nx-primary)",
+          foreground: "var(--nx-primary-foreground)"
+        },
+        secondary: {
+          DEFAULT: "var(--nx-secondary)",
+          foreground: "var(--nx-secondary-foreground)"
+        },
+        destructive: {
+          DEFAULT: "var(--nx-destructive)",
+          // Saturated fill for solid buttons, distinct from the text-tuned base.
+          solid: "var(--nx-destructive-solid)",
+          foreground: "var(--nx-destructive-foreground)",
+          ...statusScale("--nx-destructive")
+        },
+        success: {
+          DEFAULT: "var(--nx-success)",
+          solid: "var(--nx-success-solid)",
+          foreground: "var(--nx-success-foreground)",
+          ...statusScale("--nx-success")
+        },
+        warning: {
+          DEFAULT: "var(--nx-warning)",
+          foreground: "var(--nx-warning-foreground)",
+          ...statusScale("--nx-warning")
+        },
+        muted: {
+          DEFAULT: "var(--nx-muted)",
+          foreground: "var(--nx-muted-foreground)"
+        },
+        accent: {
+          DEFAULT: "var(--nx-accent)",
+          foreground: "var(--nx-accent-foreground)"
+        },
+        popover: {
+          DEFAULT: "var(--nx-popover)",
+          foreground: "var(--nx-popover-foreground)"
+        },
+        card: {
+          DEFAULT: "var(--nx-card)",
+          foreground: "var(--nx-card-foreground)"
+        }
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1)",
+        "accordion-up": "accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1)"
+      }
+    }
+  }
+};
+var tailwind_preset_default = uiPreset;
+
+export { tailwind_preset_default as default, uiPreset };
+//# sourceMappingURL=tailwind-preset.mjs.map
+//# sourceMappingURL=tailwind-preset.mjs.map

package/dist/tailwind-preset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.mjs","sourcesContent":["/**\n * Tailwind CSS preset for @nextlyhq/ui components.\n *\n * Defines the CSS custom property contract that all UI components expect.\n * Consumers must provide the actual CSS variable values in their stylesheets.\n *\n * Usage (Tailwind v3, ESM):\n *   // tailwind.config.ts\n *   import uiPreset from \"@nextlyhq/ui/tailwind-preset\";\n *   export default { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v3, CommonJS):\n *   // tailwind.config.js\n *   const { uiPreset } = require(\"@nextlyhq/ui/tailwind-preset\");\n *   module.exports = { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v4 with @config):\n *   Consumers define the equivalent @theme tokens in their CSS.\n *   This file serves as the reference contract.\n */\n/**\n * The numbered shade scale for a status color, mixed from its base the same way\n * the v4 `@theme` block does, so v3 preset consumers get the same utilities the\n * components emit (`bg-destructive-700`, `bg-success-100 text-success-700`, ...).\n */\nconst statusScale = (base: string): Record<number, string> => ({\n  50: `color-mix(in srgb, var(${base}), white 95%)`,\n  100: `color-mix(in srgb, var(${base}), white 90%)`,\n  200: `color-mix(in srgb, var(${base}), white 70%)`,\n  300: `color-mix(in srgb, var(${base}), white 50%)`,\n  400: `color-mix(in srgb, var(${base}), white 30%)`,\n  500: `var(${base})`,\n  600: `color-mix(in srgb, var(${base}), black 10%)`,\n  700: `color-mix(in srgb, var(${base}), black 30%)`,\n  800: `color-mix(in srgb, var(${base}), black 50%)`,\n  900: `color-mix(in srgb, var(${base}), black 70%)`,\n  950: `color-mix(in srgb, var(${base}), black 85%)`,\n});\n\nconst uiPreset = {\n  theme: {\n    extend: {\n      colors: {\n        border: \"var(--nx-border)\",\n        input: \"var(--nx-input)\",\n        ring: \"var(--nx-ring)\",\n        background: \"var(--nx-background)\",\n        foreground: \"var(--nx-foreground)\",\n        primary: {\n          DEFAULT: \"var(--nx-primary)\",\n          foreground: \"var(--nx-primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--nx-secondary)\",\n          foreground: \"var(--nx-secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--nx-destructive)\",\n          // Saturated fill for solid buttons, distinct from the text-tuned base.\n          solid: \"var(--nx-destructive-solid)\",\n          foreground: \"var(--nx-destructive-foreground)\",\n          ...statusScale(\"--nx-destructive\"),\n        },\n        success: {\n          DEFAULT: \"var(--nx-success)\",\n          solid: \"var(--nx-success-solid)\",\n          foreground: \"var(--nx-success-foreground)\",\n          ...statusScale(\"--nx-success\"),\n        },\n        warning: {\n          DEFAULT: \"var(--nx-warning)\",\n          foreground: \"var(--nx-warning-foreground)\",\n          ...statusScale(\"--nx-warning\"),\n        },\n        muted: {\n          DEFAULT: \"var(--nx-muted)\",\n          foreground: \"var(--nx-muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--nx-accent)\",\n          foreground: \"var(--nx-accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--nx-popover)\",\n          foreground: \"var(--nx-popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--nx-card)\",\n          foreground: \"var(--nx-card-foreground)\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n        \"accordion-up\": \"accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n      },\n    },\n  },\n};\n\n// Exported both ways on purpose. CommonJS cannot represent a default-only\n// module without `module.exports =`, which makes the emitted declarations\n// disagree with the runtime shape (attw's FalseExportDefault); a named export\n// alongside it keeps `require()` and `import` consistent and typed.\nexport { uiPreset };\nexport default uiPreset;\n"]}

package/dist/theme.css

@@ -177,6 +177,9 @@
   --color-destructive-800: color-mix(in srgb, var(--nx-destructive), black 50%);
   --color-destructive-900: color-mix(in srgb, var(--nx-destructive), black 70%);
   --color-destructive-950: color-mix(in srgb, var(--nx-destructive), black 85%);
+  /* Saturated fill for solid buttons; distinct from the text-tuned base so
+   * white on-color text stays AA in both modes. */
+  --color-destructive-solid: var(--nx-destructive-solid);
   --color-destructive-foreground: var(--nx-destructive-foreground);
 
   --color-success: var(--nx-success);
@@ -191,6 +194,8 @@
   --color-success-800: color-mix(in srgb, var(--nx-success), black 50%);
   --color-success-900: color-mix(in srgb, var(--nx-success), black 70%);
   --color-success-950: color-mix(in srgb, var(--nx-success), black 85%);
+  /* Saturated fill for solid usage; distinct from the text-tuned base. */
+  --color-success-solid: var(--nx-success-solid);
   --color-success-foreground: var(--nx-success-foreground);
 
   --color-warning: var(--nx-warning);
@@ -620,24 +625,34 @@
 
   /* Utility colors */
   --nx-muted: oklch(0.9696 0 0);
-  --nx-muted-foreground: oklch(0.5547 0.0407 257.44);
+  /* Darkened so muted text clears WCAG 4.5:1 on the muted surface (was 4.35:1). */
+  --nx-muted-foreground: oklch(0.54 0.0407 257.44);
   /* slate-500 */
   --nx-accent: oklch(0.5547 0.0407 257.44);
   /* Slate-500 per user request #64748b */
   --nx-accent-foreground: oklch(1 0 0);
   /* white */
 
-  /* State colors - WCAG 2.2 AA Compliant */
-  --nx-destructive: oklch(0.6368 0.2078 25.33);
-  /* red-500 (#ef4444) */
+  /* State colors - WCAG 2.2 AA Compliant.
+   * Each status has two roles kept as separate tokens, the industry-standard
+   * split (Radix/Primer): the base token is the readable TEXT color used by
+   * `text-destructive` and derived shades, and `-solid` is the saturated FILL
+   * used by buttons under white on-color text. One value cannot serve both in
+   * dark mode (a fill dark enough for white text is too dark to read as text
+   * on the page), so they diverge there. */
+  /* Darkened from red-500; renders as #d92c32, ~4.8:1 as text on white. */
+  --nx-destructive: oklch(0.5778 0.2078 25.33);
+  --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
   --nx-destructive-foreground: oklch(1 0 0);
   /* white */
-  --nx-success: oklch(0.6273 0.17 149.2);
-  /* green-600 (#16a34a) - AA compliant */
+  /* Darkened from green-600; renders as #00852c, ~4.8:1 as text on white. */
+  --nx-success: oklch(0.53 0.17 149.2);
+  --nx-success-solid: oklch(0.53 0.17 149.2);
   --nx-success-foreground: oklch(1 0 0);
   /* white */
-  --nx-warning: oklch(0.7686 0.1646 70.11);
-  /* amber-500 (#f59e0b) */
+  /* Darkened from amber-500 so it reads as text on white at WCAG 4.5:1 (was
+   * 2.15:1); its light shades still tint badge/alert surfaces. */
+  --nx-warning: oklch(0.565 0.1646 70.11);
   --nx-warning-foreground: oklch(0.2079 0.0399 265.73);
   /* slate-900 - REQUIRED for AA contrast (warning-500 on white = 3.4:1, fails AA) */
 
@@ -656,13 +671,15 @@
    * held above 4.5:1 on --nx-code-bg since code is small text. */
   --nx-code-bg: oklch(0.9761 0.0035 247.86);
   --nx-code-fg: oklch(0.2079 0.0399 265.73);
-  --nx-code-comment: oklch(0.5547 0.0407 257.44);
+  /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
+  --nx-code-comment: oklch(0.541 0.0407 257.44);
   --nx-code-keyword: oklch(0.4882 0.2172 303.9);
   --nx-code-string: oklch(0.4478 0.1189 152.1);
   --nx-code-number: oklch(0.5106 0.1518 44.2);
   --nx-code-function: oklch(0.4757 0.1444 254.6);
   --nx-code-operator: oklch(0.4936 0.1418 8.4);
-  --nx-code-punctuation: oklch(0.5547 0.0407 257.44);
+  /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
+  --nx-code-punctuation: oklch(0.541 0.0407 257.44);
   --nx-code-variable: oklch(0.4694 0.1173 62.3);
   --nx-code-tag: oklch(0.5054 0.1905 27.5);
   --nx-code-deleted: oklch(0.5054 0.1905 27.5);
@@ -673,11 +690,12 @@
    * subtle = decorative dividers/cards; default = tables/groups;
    * strong = interactive control edges (inputs/checkbox) for prominence. */
   --nx-border-subtle: oklch(0 0 0 / 0.08);
-  --nx-border: oklch(0 0 0 / 0.13);
-  --nx-border-strong: oklch(0 0 0 / 0.3);
-  --nx-input: oklch(
-    0.7384 0.0116 286.11
-  ); /* zinc-400: stronger visible field border (was zinc-300, too faint) */
+  /* Alpha raised so the composited border clears WCAG 3:1 on the page (was 1.35:1). */
+  --nx-border: oklch(0 0 0 / 0.445);
+  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 2.11:1). */
+  --nx-border-strong: oklch(0 0 0 / 0.502);
+  /* Darkened so the field border clears WCAG 3:1 on the page (was 2.32:1). */
+  --nx-input: oklch(0.6454 0.0116 286.11);
   --nx-ring: var(--nx-primary);
 
   /* Chart colors for data visualization */
@@ -720,7 +738,8 @@
   /* slate-100 */
   --nx-sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
   /* slate-900 */
-  --nx-sidebar-border: oklch(0.929 0.0126 255.53);
+  /* Darkened so the sidebar border clears WCAG 3:1 on its surface (was 1.23:1). */
+  --nx-sidebar-border: oklch(0.6446 0.0126 255.53);
   /* slate-200 */
   --nx-sidebar-ring: var(--nx-primary);
 
@@ -746,7 +765,10 @@
    * read as distinct surfaces in dark mode instead of merging into the page */
   --nx-card-foreground: oklch(0.9838 0.0035 247.86);
   /* slate-50 */
-  --nx-popover: oklch(0.369 0.0249 257.44);
+  /* Darkened toward the card elevation so borders, inputs, and muted text
+   * placed on a popover clear their WCAG minimums (border was 2.85:1, input
+   * 1.73:1); the surface was too light for its own contents. */
+  --nx-popover: oklch(0.24 0.0249 257.44);
   /* slate-800 */
   --nx-popover-foreground: oklch(0.9838 0.0035 247.86);
   /* slate-50 */
@@ -773,13 +795,23 @@
   --nx-accent-foreground: oklch(1 0 0);
   /* white */
 
-  /* State colors - WCAG 2.2 AA Compliant (Dark Mode) */
-  --nx-destructive: oklch(0.6368 0.2078 25.33);
-  /* red-500 */
+  /* State colors - WCAG 2.2 AA Compliant (Dark Mode).
+   * The base token is lightened from the fill color so it reads as text on the
+   * dark page at 4.5:1; `-solid` keeps the darker fill so white on-color text
+   * on buttons still clears 4.5:1. Warning is already light enough to read on
+   * dark, so its base is unchanged here. */
+  /* Lightened red so it reads as text at WCAG 4.5:1 on the dark page and on the
+   * lighter popover surface (was 4.17:1 on the page, 4.25:1 on a popover). */
+  --nx-destructive: oklch(0.65 0.2078 25.33);
+  /* Darker red fill so white on-color button text clears 4.5:1. */
+  --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
   --nx-destructive-foreground: oklch(1 0 0);
   /* white */
-  --nx-success: oklch(0.7229 0.1921 149.58);
-  /* green-500 - brighter for dark mode */
+  /* Lightened green so it reads as text at WCAG 4.5:1 on the dark page and on
+   * the lighter popover surface (was 4.17:1 on the page, 4.29:1 on a popover). */
+  --nx-success: oklch(0.6 0.1921 149.58);
+  /* Darker green fill so white on-color button text clears 4.5:1. */
+  --nx-success-solid: oklch(0.5225 0.1921 149.58);
   --nx-success-foreground: oklch(1 0 0);
   /* white */
   --nx-warning: oklch(0.7686 0.1646 70.11);
@@ -815,11 +847,13 @@
    * Recomputed as white-over-dark alpha (not a flipped hex) so dividers read
    * on the deep background without glowing. Was ~1.2:1 (too faint). */
   --nx-border-subtle: oklch(1 0 0 / 0.08);
-  --nx-border: oklch(1 0 0 / 0.13);
-  --nx-border-strong: oklch(1 0 0 / 0.34);
-  --nx-input: oklch(
-    0.4987 0.0128 285.92
-  ); /* stronger visible field border (was zinc-700, too faint) */
+  /* Alpha raised so the composited border clears WCAG 3:1 on the page (was 1.36:1). */
+  --nx-border: oklch(1 0 0 / 0.366);
+  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 3.00:1). */
+  --nx-border-strong: oklch(1 0 0 / 0.418);
+  /* Brightened so the field border clears WCAG 3:1 on the lighter popover
+   * surface as well as the page and card (was 1.73:1 on a popover). */
+  --nx-input: oklch(0.54 0.0128 285.92);
   --nx-ring: var(--nx-primary);
 
   /* Chart colors for data visualization (same as light mode) */
@@ -846,8 +880,8 @@
   /* slate-800 */
   --nx-sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
   /* slate-50 */
-  --nx-sidebar-border: oklch(0.2321 0.0129 257.43);
-  /* subtle slate-900 */
+  /* Lightened so the sidebar border clears WCAG 3:1 on its surface (was 1.19:1). */
+  --nx-sidebar-border: oklch(0.4975 0.0129 257.43);
   --nx-sidebar-ring: var(--nx-primary);
 
   /* Data table specific colors - dark mode */

package/dist/utils.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;
+//# sourceMappingURL=utils.cjs.map
+//# sourceMappingURL=utils.cjs.map

package/dist/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":["twMerge","clsx"],"mappings":";;;;;;AAeO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"utils.cjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Utility function to merge class names with Tailwind CSS support.\n *\n * Combines clsx for conditional class names with tailwind-merge\n * to properly handle Tailwind CSS class conflicts.\n *\n * @example\n * ```typescript\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'\n * cn('text-muted-foreground', condition && 'text-foreground')\n * ```\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"]}

package/dist/utils.d.cts

@@ -0,0 +1,17 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Utility function to merge class names with Tailwind CSS support.
+ *
+ * Combines clsx for conditional class names with tailwind-merge
+ * to properly handle Tailwind CSS class conflicts.
+ *
+ * @example
+ * ```typescript
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * cn('text-muted-foreground', condition && 'text-foreground')
+ * ```
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.d.ts

@@ -0,0 +1,17 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Utility function to merge class names with Tailwind CSS support.
+ *
+ * Combines clsx for conditional class names with tailwind-merge
+ * to properly handle Tailwind CSS class conflicts.
+ *
+ * @example
+ * ```typescript
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * cn('text-muted-foreground', condition && 'text-foreground')
+ * ```
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.mjs

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=utils.mjs.map
+//# sourceMappingURL=utils.mjs.map

package/dist/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;;AAeO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"utils.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Utility function to merge class names with Tailwind CSS support.\n *\n * Combines clsx for conditional class names with tailwind-merge\n * to properly handle Tailwind CSS class conflicts.\n *\n * @example\n * ```typescript\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'\n * cn('text-muted-foreground', condition && 'text-foreground')\n * ```\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"]}

package/docs/plugin-ui-authoring.md

@@ -20,8 +20,8 @@ points:
 | `@nextlyhq/ui/styles.css` | Pre-compiled bundle (Tailwind + tokens + reset). Zero config.             | Standalone UI, or a quick embed with no build wiring.   |
 
 **Inside a Nextly admin plugin you usually need neither.** The admin already loads
-`@nextlyhq/admin/style.css`, which defines every token scoped to `.adminapp` (and
-`.adminapp.dark` for dark mode). Plugin admin views render inside that scope, so the tokens
+`@nextlyhq/admin/style.css`, which defines every token scoped to `.nextly-admin` (and
+`.nextly-admin.dark` for dark mode). Plugin admin views render inside that scope, so the tokens
 are already on the page. Your plugin CSS should **consume** those tokens, never redefine
 them.
 
@@ -36,52 +36,52 @@ Tokens are **complete color values** (OKLCH). Reference them directly:
 
 ```css
 .my-panel {
-  background: var(--card);
-  color: var(--foreground);
-  border: 1px solid var(--border);
+  background: var(--nx-card);
+  color: var(--nx-foreground);
+  border: 1px solid var(--nx-border);
   border-radius: var(--radius);
 }
 ```
 
 ### Never wrap a token in `hsl()` / `rgb()`
 
-Older Nextly builds stored tokens as bare HSL channels (`--primary: 221 83% 53%`) and code
-wrapped them: `hsl(var(--primary))`. **That convention is gone.** Tokens are now full colors
-(`--primary: oklch(0 0 0)`), so `hsl(var(--primary))` becomes `hsl(oklch(0 0 0))`, which is
+Older Nextly builds stored tokens as bare HSL channels (`--nx-primary: 221 83% 53%`) and code
+wrapped them: `hsl(var(--nx-primary))`. **That convention is gone.** Tokens are now full colors
+(`--nx-primary: oklch(0 0 0)`), so `hsl(var(--nx-primary))` becomes `hsl(oklch(0 0 0))`, which is
 invalid CSS — the browser drops the declaration and your element loses its color. Always:
 
 ```css
 /* ✗ wrong — produces hsl(oklch(...)), silently dropped */
-color: hsl(var(--foreground));
+color: hsl(var(--nx-foreground));
 
 /* ✓ right */
-color: var(--foreground);
+color: var(--nx-foreground);
 ```
 
 ### Alpha / transparency
 
-You can no longer do `hsl(var(--primary) / 0.1)`. Use `color-mix`:
+You can no longer do `hsl(var(--nx-primary) / 0.1)`. Use `color-mix`:
 
 ```css
 /* 10% primary over transparent */
-background: color-mix(in srgb, var(--primary) 10%, transparent);
+background: color-mix(in srgb, var(--nx-primary) 10%, transparent);
 
 /* a subtle hover tint from the foreground */
-background: color-mix(in srgb, var(--foreground) 6%, transparent);
+background: color-mix(in srgb, var(--nx-foreground) 6%, transparent);
 ```
 
 ### The tokens you may use
 
-Colors: `--background` / `--foreground`, `--card` / `--card-foreground`,
-`--popover` / `--popover-foreground`, `--primary` / `--primary-foreground`,
-`--secondary` / `--secondary-foreground`, `--muted` / `--muted-foreground`,
-`--accent` / `--accent-foreground`, `--destructive`, `--success`, `--warning`,
-`--border`, `--border-strong`, `--input`, `--ring`,
-`--sidebar-background` and the `--sidebar-*` family.
+Colors: `--nx-background` / `--nx-foreground`, `--nx-card` / `--nx-card-foreground`,
+`--nx-popover` / `--nx-popover-foreground`, `--nx-primary` / `--nx-primary-foreground`,
+`--nx-secondary` / `--nx-secondary-foreground`, `--nx-muted` / `--nx-muted-foreground`,
+`--nx-accent` / `--nx-accent-foreground`, `--nx-destructive`, `--nx-success`, `--nx-warning`,
+`--nx-border`, `--nx-border-strong`, `--nx-input`, `--nx-ring`,
+`--nx-sidebar-background` and the `--nx-sidebar-*` family.
 
 Sizing: `--radius` (the system is square — this is `0`; always route corner radius through
-it so a future rounding is one edit), and the control-height scale `--control-height`,
-`--control-height-sm`, `--control-height-md`, `--control-height-lg` for anything that should
+it so a future rounding is one edit), and the control-height scale `--nx-control-height`,
+`--nx-control-height-sm`, `--nx-control-height-md`, `--nx-control-height-lg` for anything that should
 line up with admin inputs and buttons.
 
 Do not hardcode hex, `rgb()`, `rgba()`, or named colors. The only literals allowed are
@@ -96,7 +96,7 @@ a stylesheet. They are already token-driven, accessible, and dark-mode-correct.
 
 ```tsx
 import { Button, Input, Select, Switch, Badge } from "@nextlyhq/ui";
-import { cn } from "@nextlyhq/ui";
+import { cn } from "@nextlyhq/ui/utils";
 
 <Button variant="outline" size="sm">Add field</Button>
 <Input placeholder="Form name" />
@@ -114,13 +114,13 @@ control). When you write it, it must obey the token contract in section 2 and be
 
 ## 4. Dark mode is automatic — don't fight it
 
-The admin flips every token under `.adminapp.dark`. If you only ever reference tokens, your
+The admin flips every token under `.nextly-admin.dark`. If you only ever reference tokens, your
 UI switches with it and you never write a dark rule.
 
 - **Never** hardcode a light or dark color.
 - **Never** gate admin theming on `@media (prefers-color-scheme: dark)` — admin dark mode is
-  class-based (`.dark` / `.adminapp.dark`), independent of the OS. A media query makes your
-  UI ignore the admin's own theme toggle. Use Tailwind's `dark:` variant or `.adminapp.dark`
+  class-based (`.dark` / `.nextly-admin.dark`), independent of the OS. A media query makes your
+  UI ignore the admin's own theme toggle. Use Tailwind's `dark:` variant or `.nextly-admin.dark`
   descendant selectors if you truly need a mode-specific tweak.
 
 ---
@@ -169,7 +169,7 @@ allowlist in the script with a one-line reason — don't silence the whole check
 
 - [ ] Colors come from `var(--token)` — no `hsl()`/`rgb()` wrappers, no hardcoded values.
 - [ ] Alpha uses `color-mix(in srgb, var(--token) N%, transparent)`.
-- [ ] Corner radius routes through `var(--radius)`; control heights use `--control-height*`.
+- [ ] Corner radius routes through `var(--radius)`; control heights use `--nx-control-height*`.
 - [ ] New UI uses `@nextlyhq/ui` components + Tailwind utilities where practical.
 - [ ] No `@media (prefers-color-scheme)`; dark mode inherited from the admin.
 - [ ] Class names are prefixed/scoped; no bare element selectors.