@epicbagel/saas-kit 1.3.0 → 1.5.0

package/dist/chunk-ZJFYOXSM.cjs

@@ -0,0 +1,260 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunkNQK5ZWC7cjs = require('./chunk-NQK5ZWC7.cjs');
+
+
+var _chunkIQZLUT2Ycjs = require('./chunk-IQZLUT2Y.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/field.tsx
+var _react = require('react');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-group",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = _classvarianceauthority.cva.call(void 0, 
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: { orientation: "vertical" }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkIQZLUT2Ycjs.Label,
+    {
+      "data-slot": "field-label",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-label",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      "data-slot": "field-description",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQK5ZWC7cjs.Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = _react.useMemo.call(void 0, () => {
+    if (children) return children;
+    if (!_optionalChain([errors, 'optionalAccess', _ => _.length])) return null;
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [_optionalChain([error, 'optionalAccess', _2 => _2.message]), error])).values()
+    ];
+    if (uniqueErrors.length === 1) return _optionalChain([uniqueErrors, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.message]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => _optionalChain([error, 'optionalAccess', _5 => _5.message]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "text-sm font-normal text-destructive", className),
+      ...props,
+      children: content
+    }
+  );
+}
+function FormField({
+  label,
+  htmlFor,
+  actions,
+  description,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-1.5", className), ...props, children: [
+    (label || actions) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-2", children: [
+      typeof label === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIQZLUT2Ycjs.Label, { htmlFor, children: label }) : label,
+      actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1", children: actions })
+    ] }),
+    children,
+    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+  ] });
+}
+var columnStyles = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3"
+};
+function FieldGrid({ columns = 2, gap = "default", className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid", gap === "default" ? "gap-4" : "gap-8", columnStyles[columns], className),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.FieldSet = FieldSet; exports.FieldLegend = FieldLegend; exports.FieldGroup = FieldGroup; exports.Field = Field; exports.FieldContent = FieldContent; exports.FieldLabel = FieldLabel; exports.FieldTitle = FieldTitle; exports.FieldDescription = FieldDescription; exports.FieldSeparator = FieldSeparator; exports.FieldError = FieldError; exports.FormField = FormField; exports.FieldGrid = FieldGrid;

package/dist/lib/neutral-theme.cjs

@@ -1,238 +1,41 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-// src/lib/neutral-theme.ts
-var SEMANTIC_TOKENS = [
-  "background",
-  "foreground",
-  "card",
-  "card-foreground",
-  "popover",
-  "popover-foreground",
-  "primary",
-  "primary-foreground",
-  "secondary",
-  "secondary-foreground",
-  "muted",
-  "muted-foreground",
-  "accent",
-  "accent-foreground",
-  "destructive",
-  "destructive-foreground",
-  "border",
-  "input",
-  "ring",
-  "chart-1",
-  "chart-2",
-  "chart-3",
-  "chart-4",
-  "chart-5",
-  "sidebar-background",
-  "sidebar-foreground",
-  "sidebar-primary",
-  "sidebar-primary-foreground",
-  "sidebar-accent",
-  "sidebar-accent-foreground",
-  "sidebar-border",
-  "sidebar-ring"
-];
-function hexToRgb(hex) {
-  const h = hex.replace("#", "").trim();
-  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
-  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
-    throw new Error(`Not a hex colour: ${hex}`);
-  }
-  return [
-    parseInt(full.slice(0, 2), 16),
-    parseInt(full.slice(2, 4), 16),
-    parseInt(full.slice(4, 6), 16)
-  ];
-}
-function hexToHsl(hex) {
-  const [r255, g255, b255] = hexToRgb(hex);
-  const r = r255 / 255;
-  const g = g255 / 255;
-  const b = b255 / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const l = (max + min) / 2;
-  const d = max - min;
-  let h = 0;
-  let s = 0;
-  if (d !== 0) {
-    s = d / (1 - Math.abs(2 * l - 1));
-    if (max === r) h = (g - b) / d % 6;
-    else if (max === g) h = (b - r) / d + 2;
-    else h = (r - g) / d + 4;
-    h *= 60;
-    if (h < 0) h += 360;
-  }
-  const round = (n) => Math.round(n * 10) / 10;
-  return `${round(h)} ${round(s * 100)}% ${round(l * 100)}%`;
-}
-function luminance(hex) {
-  const [r, g, b] = hexToRgb(hex).map((v) => {
-    const c = v / 255;
-    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-function contrastRatio(a, b) {
-  const la = luminance(a);
-  const lb = luminance(b);
-  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
-  return (hi + 0.05) / (lo + 0.05);
-}
-function bestForeground(bg, candidates) {
-  let best = candidates[0];
-  let bestRatio = 0;
-  for (const c of candidates) {
-    const ratio = contrastRatio(bg, c);
-    if (ratio > bestRatio) {
-      best = c;
-      bestRatio = ratio;
-    }
-  }
-  return best;
-}
-var NEUTRAL_RADIUS = "0rem";
-function neutral(mode) {
-  const light = mode === "light";
-  const danger = "#d71921";
-  const mono = light ? {
-    bg: "#ffffff",
-    fg: "#000000",
-    surface: "#f5f5f5",
-    subtle: "#666666",
-    border: "#e5e5e5",
-    sidebar: "#fafafa",
-    strong: "#333333"
-  } : {
-    bg: "#000000",
-    fg: "#ffffff",
-    surface: "#1a1a1a",
-    subtle: "#999999",
-    border: "#333333",
-    sidebar: "#0d0d0d",
-    strong: "#cccccc"
-  };
-  return {
-    background: mono.bg,
-    foreground: mono.fg,
-    card: mono.bg,
-    "card-foreground": mono.fg,
-    popover: mono.bg,
-    "popover-foreground": mono.fg,
-    primary: mono.fg,
-    "primary-foreground": mono.bg,
-    secondary: mono.surface,
-    "secondary-foreground": mono.fg,
-    muted: mono.surface,
-    "muted-foreground": mono.subtle,
-    accent: mono.surface,
-    "accent-foreground": mono.fg,
-    destructive: danger,
-    "destructive-foreground": bestForeground(danger, ["#ffffff", "#000000"]),
-    border: mono.border,
-    input: mono.border,
-    ring: mono.fg,
-    "chart-1": light ? "#333333" : "#cccccc",
-    "chart-2": light ? "#4d4d4d" : "#b3b3b3",
-    "chart-3": light ? "#666666" : "#999999",
-    "chart-4": light ? "#808080" : "#808080",
-    "chart-5": light ? "#999999" : "#666666",
-    "sidebar-background": mono.sidebar,
-    "sidebar-foreground": mono.fg,
-    "sidebar-primary": mono.fg,
-    "sidebar-primary-foreground": mono.bg,
-    "sidebar-accent": mono.surface,
-    "sidebar-accent-foreground": mono.fg,
-    "sidebar-border": mono.border,
-    "sidebar-ring": mono.border
-  };
-}
-var NEUTRAL = {
-  light: neutral("light"),
-  dark: neutral("dark")
-};
-function colorAlias(token) {
-  if (token.startsWith("chart-")) return null;
-  if (token === "sidebar-background") return "--color-sidebar";
-  return `--color-${token}`;
-}
-function paletteDeclarations(tokens, names, radius, { indent = "  ", aliasSource = "neutral-theme.ts" } = {}) {
-  const value = (token) => {
-    const hex = tokens[token];
-    if (hex === void 0) throw new Error(`Missing token: ${token}`);
-    return hexToHsl(hex);
-  };
-  const lines = [`${indent}--radius: ${radius};`];
-  for (const token of names) {
-    lines.push(`${indent}--${token}: ${value(token)};`);
-  }
-  lines.push(`${indent}--sidebar: ${value("sidebar-background")};`);
-  lines.push(`${indent}/* Tailwind-facing aliases \u2014 see ${aliasSource} */`);
-  for (const token of names) {
-    const alias = colorAlias(token);
-    if (alias) lines.push(`${indent}${alias}: hsl(var(--${token}));`);
-  }
-  lines.push(`${indent}--radius-sm: calc(var(--radius) - 4px);`);
-  lines.push(`${indent}--radius-md: calc(var(--radius) - 2px);`);
-  lines.push(`${indent}--radius-lg: var(--radius);`);
-  lines.push(`${indent}--radius-xl: calc(var(--radius) + 4px);`);
-  lines.push(`${indent}--radius-2xl: calc(var(--radius) + 8px);`);
-  return lines.join("\n");
-}
-function paletteBlock(selector, declarations, indent = "") {
-  const head = selector.split("\n").map((line) => indent + line).join("\n");
-  return `${head} {
-${declarations}
-${indent}}
-`;
-}
-function layerBlock(name, rules) {
-  return `@layer ${name} {
-${rules.join("\n")}}
-`;
-}
-var DARK_ROOT_SELECTOR = ":root:where(.dark)";
-function baseLayerPalette(light, dark, indent = "  ") {
-  return layerBlock("base", [
-    paletteBlock(":root", light, indent),
-    paletteBlock(DARK_ROOT_SELECTOR, dark, indent)
-  ]);
-}
-var PALETTE_GENERATED_HEADER = `/* GENERATED FILE \u2014 do not edit.
- * Source: src/lib/neutral-theme.ts \xB7 Regenerate: pnpm gen:themes
- *
- * The neutral palette: light on :root, dark when the root carries the
- * \`.dark\` class. It sits in \`@layer base\`, so any unlayered palette rule
- * or a host's own :root overrides wins on layer order alone. Imported by
- * tokens.css; every --color-* alias and the radius scale are re-declared
- * alongside the tokens they read.
- */`;
-function renderPaletteCss() {
-  const declarations = (mode) => paletteDeclarations(NEUTRAL[mode], SEMANTIC_TOKENS, NEUTRAL_RADIUS, {
-    indent: "    "
-  });
-  return [
-    PALETTE_GENERATED_HEADER,
-    baseLayerPalette(declarations("light"), declarations("dark"))
-  ].join("\n");
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-exports.NEUTRAL = NEUTRAL; exports.NEUTRAL_RADIUS = NEUTRAL_RADIUS; exports.PALETTE_GENERATED_HEADER = PALETTE_GENERATED_HEADER; exports.SEMANTIC_TOKENS = SEMANTIC_TOKENS; exports.baseLayerPalette = baseLayerPalette; exports.bestForeground = bestForeground; exports.colorAlias = colorAlias; exports.contrastRatio = contrastRatio; exports.hexToHsl = hexToHsl; exports.hexToRgb = hexToRgb; exports.layerBlock = layerBlock; exports.luminance = luminance; exports.paletteBlock = paletteBlock; exports.paletteDeclarations = paletteDeclarations; exports.renderPaletteCss = renderPaletteCss;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _chunkU3YFP6ZVcjs = require('../chunk-U3YFP6ZV.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.NEUTRAL = _chunkU3YFP6ZVcjs.NEUTRAL; exports.NEUTRAL_PALETTE = _chunkU3YFP6ZVcjs.NEUTRAL_PALETTE; exports.NEUTRAL_RADIUS = _chunkU3YFP6ZVcjs.NEUTRAL_RADIUS; exports.NEUTRAL_THEME_ID = _chunkU3YFP6ZVcjs.NEUTRAL_THEME_ID; exports.PALETTE_GENERATED_HEADER = _chunkU3YFP6ZVcjs.PALETTE_GENERATED_HEADER; exports.SEMANTIC_TOKENS = _chunkU3YFP6ZVcjs.SEMANTIC_TOKENS; exports.baseLayerPalette = _chunkU3YFP6ZVcjs.baseLayerPalette; exports.bestForeground = _chunkU3YFP6ZVcjs.bestForeground; exports.colorAlias = _chunkU3YFP6ZVcjs.colorAlias; exports.contrastRatio = _chunkU3YFP6ZVcjs.contrastRatio; exports.hexToHsl = _chunkU3YFP6ZVcjs.hexToHsl; exports.hexToRgb = _chunkU3YFP6ZVcjs.hexToRgb; exports.layerBlock = _chunkU3YFP6ZVcjs.layerBlock; exports.luminance = _chunkU3YFP6ZVcjs.luminance; exports.paletteBlock = _chunkU3YFP6ZVcjs.paletteBlock; exports.paletteDeclarations = _chunkU3YFP6ZVcjs.paletteDeclarations; exports.paletteStyle = _chunkU3YFP6ZVcjs.paletteStyle; exports.renderPaletteCss = _chunkU3YFP6ZVcjs.renderPaletteCss;

package/dist/lib/neutral-theme.d.cts

@@ -1,6 +1,7 @@
 /**
  * The neutral palette, plus the token contract, colour maths and CSS
- * rendering that every palette shares.
+ * rendering that every palette shares, and the shape a theme picker offers
+ * a palette in (`ThemePalette`).
  *
  * Neutral is plain black and white with square corners. `pnpm gen:themes`
  * renders it to `src/styles/palette.gen.css`, which `styles/tokens.css`
@@ -47,6 +48,38 @@ declare function bestForeground(bg: string, candidates: string[]): string;
 declare const NEUTRAL_RADIUS = "0rem";
 /** The neutral palette's semantic tokens, per mode, as hex. */
 declare const NEUTRAL: Readonly<Record<ThemeMode, SemanticTokenMap>>;
+/**
+ * The `data-theme` value the neutral palette answers to. The stylesheet
+ * paints the neutral palette wherever no palette is named, so stamping this
+ * id changes nothing on screen; a host stores it like any other pick.
+ */
+declare const NEUTRAL_THEME_ID = "minimal";
+/**
+ * A palette a theme picker offers (`primitives/theme-selector`).
+ *
+ * `id` is the palette's `data-theme` value, and what a host stores when
+ * someone picks it. The tokens are optional. Given for a mode, a preview of
+ * that mode paints from them directly (`paletteStyle`), whatever palette the
+ * page around it is in. Without them, the preview carries `data-theme` and
+ * `data-mode` instead, and the page's palette CSS has to paint those on any
+ * element, not just the root.
+ */
+interface ThemePalette {
+    /** The `data-theme` value. Stable: hosts store it. */
+    readonly id: string;
+    /** Display name. */
+    readonly label: string;
+    /** One line under the name. */
+    readonly description?: string;
+    /** `--radius` for the palette's previews. Leave out to keep the page's. */
+    readonly radius?: string;
+    /** Light mode's semantic tokens, as hex. */
+    readonly light?: Readonly<SemanticTokenMap>;
+    /** Dark mode's semantic tokens, as hex. */
+    readonly dark?: Readonly<SemanticTokenMap>;
+}
+/** The neutral palette as a picker offers it: the kit's default. */
+declare const NEUTRAL_PALETTE: ThemePalette;
 /**
  * The Tailwind colour name each token feeds, or null for tokens with no
  * utility (the chart series are read directly as `var(--chart-1)`).
@@ -65,6 +98,15 @@ interface PaletteDeclarationOptions {
  * aliases and the radius scale.
  */
 declare function paletteDeclarations(tokens: Readonly<Record<string, string>>, names: readonly string[], radius: string, { indent, aliasSource }?: PaletteDeclarationOptions): string;
+/**
+ * `paletteDeclarations` as an inline style: the same custom properties with
+ * the same values, for one element (`style={paletteStyle(tokens, radius)}`).
+ * The element then paints in that palette whatever palette the page around
+ * it is in, because the `--color-*` aliases are declared, and so
+ * substituted, on the element itself. Without `radius` it keeps the page's
+ * `--radius`. This is how `PalettePreview` paints a palette's tokens.
+ */
+declare function paletteStyle(tokens: Readonly<Record<string, string>>, radius?: string, names?: readonly string[]): Record<string, string>;
 /**
  * One rule: `selector { declarations }`, newline-terminated. `indent`
  * prefixes each selector line and the closing brace, for a rule nested in
@@ -89,4 +131,4 @@ declare const PALETTE_GENERATED_HEADER = "/* GENERATED FILE \u2014 do not edit.\
 /** `src/styles/palette.gen.css`: the neutral palette, light then dark. */
 declare function renderPaletteCss(): string;
 
-export { NEUTRAL, NEUTRAL_RADIUS, PALETTE_GENERATED_HEADER, type PaletteDeclarationOptions, SEMANTIC_TOKENS, type SemanticToken, type SemanticTokenMap, type ThemeMode, baseLayerPalette, bestForeground, colorAlias, contrastRatio, hexToHsl, hexToRgb, layerBlock, luminance, paletteBlock, paletteDeclarations, renderPaletteCss };
+export { NEUTRAL, NEUTRAL_PALETTE, NEUTRAL_RADIUS, NEUTRAL_THEME_ID, PALETTE_GENERATED_HEADER, type PaletteDeclarationOptions, SEMANTIC_TOKENS, type SemanticToken, type SemanticTokenMap, type ThemeMode, type ThemePalette, baseLayerPalette, bestForeground, colorAlias, contrastRatio, hexToHsl, hexToRgb, layerBlock, luminance, paletteBlock, paletteDeclarations, paletteStyle, renderPaletteCss };

package/dist/lib/neutral-theme.d.ts

@@ -1,6 +1,7 @@
 /**
  * The neutral palette, plus the token contract, colour maths and CSS
- * rendering that every palette shares.
+ * rendering that every palette shares, and the shape a theme picker offers
+ * a palette in (`ThemePalette`).
  *
  * Neutral is plain black and white with square corners. `pnpm gen:themes`
  * renders it to `src/styles/palette.gen.css`, which `styles/tokens.css`
@@ -47,6 +48,38 @@ declare function bestForeground(bg: string, candidates: string[]): string;
 declare const NEUTRAL_RADIUS = "0rem";
 /** The neutral palette's semantic tokens, per mode, as hex. */
 declare const NEUTRAL: Readonly<Record<ThemeMode, SemanticTokenMap>>;
+/**
+ * The `data-theme` value the neutral palette answers to. The stylesheet
+ * paints the neutral palette wherever no palette is named, so stamping this
+ * id changes nothing on screen; a host stores it like any other pick.
+ */
+declare const NEUTRAL_THEME_ID = "minimal";
+/**
+ * A palette a theme picker offers (`primitives/theme-selector`).
+ *
+ * `id` is the palette's `data-theme` value, and what a host stores when
+ * someone picks it. The tokens are optional. Given for a mode, a preview of
+ * that mode paints from them directly (`paletteStyle`), whatever palette the
+ * page around it is in. Without them, the preview carries `data-theme` and
+ * `data-mode` instead, and the page's palette CSS has to paint those on any
+ * element, not just the root.
+ */
+interface ThemePalette {
+    /** The `data-theme` value. Stable: hosts store it. */
+    readonly id: string;
+    /** Display name. */
+    readonly label: string;
+    /** One line under the name. */
+    readonly description?: string;
+    /** `--radius` for the palette's previews. Leave out to keep the page's. */
+    readonly radius?: string;
+    /** Light mode's semantic tokens, as hex. */
+    readonly light?: Readonly<SemanticTokenMap>;
+    /** Dark mode's semantic tokens, as hex. */
+    readonly dark?: Readonly<SemanticTokenMap>;
+}
+/** The neutral palette as a picker offers it: the kit's default. */
+declare const NEUTRAL_PALETTE: ThemePalette;
 /**
  * The Tailwind colour name each token feeds, or null for tokens with no
  * utility (the chart series are read directly as `var(--chart-1)`).
@@ -65,6 +98,15 @@ interface PaletteDeclarationOptions {
  * aliases and the radius scale.
  */
 declare function paletteDeclarations(tokens: Readonly<Record<string, string>>, names: readonly string[], radius: string, { indent, aliasSource }?: PaletteDeclarationOptions): string;
+/**
+ * `paletteDeclarations` as an inline style: the same custom properties with
+ * the same values, for one element (`style={paletteStyle(tokens, radius)}`).
+ * The element then paints in that palette whatever palette the page around
+ * it is in, because the `--color-*` aliases are declared, and so
+ * substituted, on the element itself. Without `radius` it keeps the page's
+ * `--radius`. This is how `PalettePreview` paints a palette's tokens.
+ */
+declare function paletteStyle(tokens: Readonly<Record<string, string>>, radius?: string, names?: readonly string[]): Record<string, string>;
 /**
  * One rule: `selector { declarations }`, newline-terminated. `indent`
  * prefixes each selector line and the closing brace, for a rule nested in
@@ -89,4 +131,4 @@ declare const PALETTE_GENERATED_HEADER = "/* GENERATED FILE \u2014 do not edit.\
 /** `src/styles/palette.gen.css`: the neutral palette, light then dark. */
 declare function renderPaletteCss(): string;
 
-export { NEUTRAL, NEUTRAL_RADIUS, PALETTE_GENERATED_HEADER, type PaletteDeclarationOptions, SEMANTIC_TOKENS, type SemanticToken, type SemanticTokenMap, type ThemeMode, baseLayerPalette, bestForeground, colorAlias, contrastRatio, hexToHsl, hexToRgb, layerBlock, luminance, paletteBlock, paletteDeclarations, renderPaletteCss };
+export { NEUTRAL, NEUTRAL_PALETTE, NEUTRAL_RADIUS, NEUTRAL_THEME_ID, PALETTE_GENERATED_HEADER, type PaletteDeclarationOptions, SEMANTIC_TOKENS, type SemanticToken, type SemanticTokenMap, type ThemeMode, type ThemePalette, baseLayerPalette, bestForeground, colorAlias, contrastRatio, hexToHsl, hexToRgb, layerBlock, luminance, paletteBlock, paletteDeclarations, paletteStyle, renderPaletteCss };