@epicbagel/saas-kit 1.3.0 → 1.5.0

package/dist/primitives/message.d.cts

@@ -1,5 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { ButtonProps } from './button.cjs';
+import { TooltipContent } from './tooltip.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-tooltip';
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
@@ -9,5 +14,34 @@ declare function MessageAvatar({ className, ...props }: React.ComponentProps<"di
 declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * A row of `MessageAction`s under a message: copy, then any others (a thumbs
+ * up or down). It sits at the message's side, the start of a turn from the
+ * other party and the end of one aligned to the end, and collapses when it
+ * holds nothing.
+ */
+declare function MessageActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type MessageActionProps = Omit<ButtonProps, "size" | "aria-label"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+};
+/**
+ * One action in a `MessageActions` row: an icon-only ghost button (pass the
+ * icon as its child) with a tooltip and an accessible name. It is 2rem
+ * square, and 2.75rem on a touch screen, where the tooltip can't show on
+ * hover, so a finger has the kit's usual target.
+ */
+declare const MessageAction: React.ForwardRefExoticComponent<Omit<ButtonProps, "aria-label" | "size"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+} & React.RefAttributes<HTMLButtonElement>>;
 
-export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+export { Message, MessageAction, type MessageActionProps, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/primitives/message.d.ts

@@ -1,5 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { ButtonProps } from './button.js';
+import { TooltipContent } from './tooltip.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-tooltip';
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
@@ -9,5 +14,34 @@ declare function MessageAvatar({ className, ...props }: React.ComponentProps<"di
 declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * A row of `MessageAction`s under a message: copy, then any others (a thumbs
+ * up or down). It sits at the message's side, the start of a turn from the
+ * other party and the end of one aligned to the end, and collapses when it
+ * holds nothing.
+ */
+declare function MessageActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type MessageActionProps = Omit<ButtonProps, "size" | "aria-label"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+};
+/**
+ * One action in a `MessageActions` row: an icon-only ghost button (pass the
+ * icon as its child) with a tooltip and an accessible name. It is 2rem
+ * square, and 2.75rem on a touch screen, where the tooltip can't show on
+ * hover, so a finger has the kit's usual target.
+ */
+declare const MessageAction: React.ForwardRefExoticComponent<Omit<ButtonProps, "aria-label" | "size"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+} & React.RefAttributes<HTMLButtonElement>>;
 
-export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+export { Message, MessageAction, type MessageActionProps, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/primitives/message.js

@@ -1,15 +1,21 @@
 "use client";
 import {
   Message,
+  MessageAction,
+  MessageActions,
   MessageAvatar,
   MessageContent,
   MessageFooter,
   MessageGroup,
   MessageHeader
-} from "../chunk-JZOBIPFC.js";
+} from "../chunk-FGISSYXG.js";
+import "../chunk-ZRLUUZHK.js";
+import "../chunk-HQRWRRZJ.js";
 import "../chunk-G6SRSWXB.js";
 export {
   Message,
+  MessageAction,
+  MessageActions,
   MessageAvatar,
   MessageContent,
   MessageFooter,

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 };

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

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ThemePalette, ThemeMode } from '../lib/neutral-theme.js';
+
+/** 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 };