@epicbagel/saas-kit 1.3.0 → 1.4.0

package/dist/primitives/field.js

@@ -1,249 +1,22 @@
 "use client";
 "use client";
 import {
-  Separator
-} from "../chunk-HYTILYE5.js";
-import {
-  Label
-} from "../chunk-E2TQMDO7.js";
-import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/field.tsx
-import { useMemo } from "react";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "fieldset",
-    {
-      "data-slot": "field-set",
-      className: cn(
-        "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__ */ jsx(
-    "legend",
-    {
-      "data-slot": "field-legend",
-      "data-variant": variant,
-      className: cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "field-group",
-      className: cn(
-        "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 = cva(
-  "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__ */ jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "field",
-      "data-orientation": orientation,
-      className: cn(fieldVariants({ orientation }), className),
-      ...props
-    }
-  );
-}
-function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "field-content",
-      className: cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function FieldLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Label,
-    {
-      "data-slot": "field-label",
-      className: cn(
-        "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__ */ jsx(
-    "div",
-    {
-      "data-slot": "field-label",
-      className: cn(
-        "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__ */ jsx(
-    "p",
-    {
-      "data-slot": "field-description",
-      className: cn(
-        "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__ */ jsxs(
-    "div",
-    {
-      "data-slot": "field-separator",
-      "data-content": !!children,
-      className: cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ jsx(
-          "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 = useMemo(() => {
-    if (children) return children;
-    if (!errors?.length) return null;
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values()
-    ];
-    if (uniqueErrors.length === 1) return uniqueErrors[0]?.message;
-    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
-      (error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
-    ) });
-  }, [children, errors]);
-  if (!content) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "alert",
-      "data-slot": "field-error",
-      className: cn("text-sm font-normal text-destructive", className),
-      ...props,
-      children: content
-    }
-  );
-}
-function FormField({
-  label,
-  htmlFor,
-  actions,
-  description,
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), ...props, children: [
-    (label || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      typeof label === "string" ? /* @__PURE__ */ jsx(Label, { htmlFor, children: label }) : label,
-      actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions })
-    ] }),
-    children,
-    description && /* @__PURE__ */ jsx("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__ */ jsx(
-    "div",
-    {
-      className: cn("grid", gap === "default" ? "gap-4" : "gap-8", columnStyles[columns], className),
-      ...props
-    }
-  );
-}
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGrid,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+  FormField
+} from "../chunk-TWCJMFST.js";
+import "../chunk-HYTILYE5.js";
+import "../chunk-E2TQMDO7.js";
+import "../chunk-G6SRSWXB.js";
 export {
   Field,
   FieldContent,

package/dist/primitives/radio-group.cjs

@@ -1,46 +1,11 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 "use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/radio-group.tsx
-var _reactradiogroup = require('@radix-ui/react-radio-group'); var RadioGroupPrimitive = _interopRequireWildcard(_reactradiogroup);
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-var _lucidereact = require('lucide-react');
-var _jsxruntime = require('react/jsx-runtime');
-var RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  RadioGroupPrimitive.Root,
-  {
-    ref,
-    "data-slot": "radio-group",
-    className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid gap-3", className),
-    ...props
-  }
-));
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  RadioGroupPrimitive.Item,
-  {
-    ref,
-    "data-slot": "radio-group-item",
-    className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-      "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      RadioGroupPrimitive.Indicator,
-      {
-        "data-slot": "radio-group-indicator",
-        className: "relative flex items-center justify-center",
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleIcon, { className: "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" })
-      }
-    )
-  }
-));
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+var _chunkHAP6USTPcjs = require('../chunk-HAP6USTP.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.RadioGroup = RadioGroup; exports.RadioGroupItem = RadioGroupItem;
+exports.RadioGroup = _chunkHAP6USTPcjs.RadioGroup; exports.RadioGroupItem = _chunkHAP6USTPcjs.RadioGroupItem;

package/dist/primitives/radio-group.js

@@ -1,45 +1,10 @@
 "use client";
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/radio-group.tsx
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import * as React from "react";
-import { CircleIcon } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-var RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  RadioGroupPrimitive.Root,
-  {
-    ref,
-    "data-slot": "radio-group",
-    className: cn("grid gap-3", className),
-    ...props
-  }
-));
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  RadioGroupPrimitive.Item,
-  {
-    ref,
-    "data-slot": "radio-group-item",
-    className: cn(
-      "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      RadioGroupPrimitive.Indicator,
-      {
-        "data-slot": "radio-group-indicator",
-        className: "relative flex items-center justify-center",
-        children: /* @__PURE__ */ jsx(CircleIcon, { className: "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" })
-      }
-    )
-  }
-));
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+  RadioGroup,
+  RadioGroupItem
+} from "../chunk-HAQOT2CD.js";
+import "../chunk-G6SRSWXB.js";
 export {
   RadioGroup,
   RadioGroupItem

package/dist/primitives/theme-selector.cjs

@@ -0,0 +1,188 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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";
+"use client";
+
+
+
+var _chunkD5EHW3O2cjs = require('../chunk-D5EHW3O2.cjs');
+require('../chunk-GXHGMI3Z.cjs');
+
+
+
+var _chunkHAP6USTPcjs = require('../chunk-HAP6USTP.cjs');
+
+
+
+
+
+
+
+
+
+var _chunkZJFYOXSMcjs = require('../chunk-ZJFYOXSM.cjs');
+require('../chunk-NQK5ZWC7.cjs');
+
+
+var _chunkT2ZFSPE4cjs = require('../chunk-T2ZFSPE4.cjs');
+require('../chunk-IQZLUT2Y.cjs');
+
+
+
+
+var _chunkU3YFP6ZVcjs = require('../chunk-U3YFP6ZV.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/theme-selector.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var MODES = ["light", "dark", "system"];
+var DEFAULT_PALETTES = [_chunkU3YFP6ZVcjs.NEUTRAL_PALETTE];
+function isMode(value) {
+  return MODES.includes(value);
+}
+function PalettePreview({ palette, mode, className }) {
+  const tokens = mode ? palette[mode] : void 0;
+  const style = _react.useMemo.call(void 0, 
+    () => tokens ? _chunkU3YFP6ZVcjs.paletteStyle.call(void 0, tokens, palette.radius) : void 0,
+    [tokens, palette.radius]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    {
+      "data-slot": "palette-preview",
+      "data-theme": palette.id,
+      "data-mode": mode,
+      "aria-hidden": "true",
+      style,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "pointer-events-none flex h-24 w-full select-none overflow-hidden rounded-md border border-border bg-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex w-1/4 flex-col gap-1.5 bg-sidebar p-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-3/4 rounded-full bg-sidebar-primary" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-full rounded-full bg-sidebar-accent" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-2/3 rounded-full bg-sidebar-accent" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-5/6 rounded-full bg-sidebar-accent" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex min-w-0 flex-1 flex-col gap-2 p-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-2 w-1/3 rounded-full bg-foreground/70" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-auto h-3 w-8 rounded-sm bg-primary" })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-1 flex-col gap-1.5 rounded-lg border border-border bg-card p-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-full rounded-full bg-muted-foreground/40" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-4/5 rounded-full bg-muted-foreground/40" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex gap-1 pt-0.5", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-4 rounded-full bg-[hsl(var(--chart-1))]" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-4 rounded-full bg-[hsl(var(--chart-2))]" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-1.5 w-4 rounded-full bg-[hsl(var(--chart-3))]" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function PaletteOption({ palette, id }) {
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkZJFYOXSMcjs.FieldLabel,
+    {
+      htmlFor: id,
+      className: "cursor-pointer transition-colors not-has-data-[state=checked]:hover:border-foreground/30",
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZJFYOXSMcjs.Field, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex overflow-hidden rounded-md border border-border", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            PalettePreview,
+            {
+              palette,
+              mode: "light",
+              className: "w-1/2 rounded-none border-0 border-r border-border"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PalettePreview, { palette, mode: "dark", className: "w-1/2 rounded-none border-0" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZJFYOXSMcjs.Field, { orientation: "horizontal", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZJFYOXSMcjs.FieldContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZJFYOXSMcjs.FieldTitle, { id: titleId, children: palette.label }),
+            palette.description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZJFYOXSMcjs.FieldDescription, { id: descriptionId, children: palette.description }) : null
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkHAP6USTPcjs.RadioGroupItem,
+            {
+              value: palette.id,
+              id,
+              "aria-labelledby": titleId,
+              "aria-describedby": palette.description ? descriptionId : void 0
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function ThemeSelector({
+  palettes = DEFAULT_PALETTES,
+  palette = _chunkU3YFP6ZVcjs.NEUTRAL_THEME_ID,
+  onPaletteChange,
+  mode = "system",
+  onModeChange,
+  paletteLabel = "Theme",
+  paletteDescription,
+  modeLabel = "Mode",
+  modeDescription,
+  lightLabel = "Light",
+  darkLabel = "Dark",
+  systemLabel = "System",
+  className
+}) {
+  const id = _react.useId.call(void 0, );
+  const modeOptions = [
+    { value: "light", label: lightLabel, icon: _lucidereact.Sun },
+    { value: "dark", label: darkLabel, icon: _lucidereact.Moon },
+    { value: "system", label: systemLabel, icon: _lucidereact.Monitor }
+  ];
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZJFYOXSMcjs.FieldGroup, { "data-slot": "theme-selector", className: _chunkKWLSBTB2cjs.cn.call(void 0, "gap-6", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZJFYOXSMcjs.FieldSet, { className: "gap-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZJFYOXSMcjs.FieldLegend, { variant: "label", children: modeLabel }),
+      modeDescription ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZJFYOXSMcjs.FieldDescription, { children: modeDescription }) : null,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkD5EHW3O2cjs.ToggleGroup,
+        {
+          type: "single",
+          variant: "outline",
+          value: _nullishCoalesce(mode, () => ( "")),
+          onValueChange: (next) => {
+            if (isMode(next)) _optionalChain([onModeChange, 'optionalCall', _ => _(next)]);
+          },
+          className: "grid w-full grid-cols-3",
+          children: modeOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkD5EHW3O2cjs.ToggleGroupItem, { value: option.value, className: "min-w-0", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2ZFSPE4cjs.Icon, { icon: option.icon }),
+            option.label
+          ] }, option.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZJFYOXSMcjs.FieldSet, { className: "gap-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZJFYOXSMcjs.FieldLegend, { variant: "label", children: paletteLabel }),
+      paletteDescription ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZJFYOXSMcjs.FieldDescription, { children: paletteDescription }) : null,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkHAP6USTPcjs.RadioGroup,
+        {
+          value: _nullishCoalesce(palette, () => ( "")),
+          onValueChange: (next) => _optionalChain([onPaletteChange, 'optionalCall', _2 => _2(next)]),
+          className: "grid-cols-1 sm:@sm/field-group:grid-cols-2 @2xl/field-group:grid-cols-3",
+          children: palettes.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PaletteOption, { palette: option, id: `${id}-palette-${option.id}` }, option.id))
+        }
+      )
+    ] })
+  ] });
+}
+
+
+
+exports.PalettePreview = PalettePreview; exports.ThemeSelector = ThemeSelector;

package/dist/primitives/theme-selector.d.cts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ThemePalette, ThemeMode } from '../lib/neutral-theme.cjs';
+
+/** Light, dark, or whatever the device prefers. */
+type ThemeSelectorMode = ThemeMode | "system";
+interface PalettePreviewProps {
+    /** The palette to paint. */
+    palette: ThemePalette;
+    /**
+     * Pin one mode. When the palette has that mode's tokens, they paint the
+     * preview directly, whatever palette or mode the page is in. Without
+     * them, or without a mode, the preview carries `data-theme` (and
+     * `data-mode`) and the page's palette CSS paints it; left off, it follows
+     * the page's mode.
+     */
+    mode?: ThemeMode;
+    className?: string;
+}
+/**
+ * A miniature app in one palette: a sidebar, a header with a primary
+ * action, and a card holding the first three chart colours. Built from the
+ * same token utilities the app uses (`bg-sidebar`, `bg-primary`,
+ * `rounded-lg`, ...), so the corners follow the palette's radius too.
+ * Decorative: hidden from assistive technology.
+ */
+declare function PalettePreview({ palette, mode, className }: PalettePreviewProps): react_jsx_runtime.JSX.Element;
+interface ThemeSelectorProps {
+    /**
+     * The palettes to offer, in display order. Defaults to the kit's neutral
+     * palette alone. A palette with tokens previews from them; one without
+     * relies on the page's palette CSS (see `ThemePalette`).
+     */
+    palettes?: readonly ThemePalette[];
+    /**
+     * The chosen palette's id. Defaults to the neutral palette's. Pass `null`
+     * while it isn't known yet (before the stored pick is read), so no card
+     * is marked rather than the wrong one.
+     */
+    palette?: string | null;
+    /** Called with a palette's id when someone picks it. */
+    onPaletteChange?: (palette: string) => void;
+    /** The chosen mode. Defaults to `system`; `null` marks none. */
+    mode?: ThemeSelectorMode | null;
+    /** Called when someone picks a mode. */
+    onModeChange?: (mode: ThemeSelectorMode) => void;
+    /** The palette group's legend. Defaults to "Theme". */
+    paletteLabel?: ReactNode;
+    /** A line under the palette group's legend. */
+    paletteDescription?: ReactNode;
+    /** The mode group's legend. Defaults to "Mode". */
+    modeLabel?: ReactNode;
+    /** A line under the mode group's legend. */
+    modeDescription?: ReactNode;
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+    className?: string;
+}
+/**
+ * Appearance settings: light, dark or system, then a grid of palettes.
+ *
+ * The two are independent axes (every palette ships both modes), and the
+ * selector owns neither: it shows the values it is given and reports picks
+ * through `onModeChange` and `onPaletteChange`. Wire it to whatever applies
+ * them, typically next-themes for the mode and a `data-theme` attribute on
+ * `<html>` for the palette.
+ *
+ * It knows no palette but the kit's neutral one, its default: pass the
+ * palettes a host offers. Each palette is a radio card (arrow keys move
+ * between them) previewing both modes. The grid is one column on a phone
+ * (below `sm`), and otherwise sizes to the selector rather than the
+ * viewport, so it fits a dialog as well as a settings page: one column while
+ * the selector is narrower than 24rem, two from there, three from 42rem.
+ */
+declare function ThemeSelector({ palettes, palette, onPaletteChange, mode, onModeChange, paletteLabel, paletteDescription, modeLabel, modeDescription, lightLabel, darkLabel, systemLabel, className, }: ThemeSelectorProps): react_jsx_runtime.JSX.Element;
+
+export { PalettePreview, type PalettePreviewProps, ThemeSelector, type ThemeSelectorMode, type ThemeSelectorProps };