@epicbagel/saas-kit 1.2.3 → 1.4.0

package/dist/primitives/responsive-dialog.cjs

@@ -1,142 +1,26 @@
-"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";
-
-
-
-
-
-
-
-
-
-var _chunk2BHI5ZWJcjs = require('../chunk-2BHI5ZWJ.cjs');
-
-
-
-
-
-
-
-
-
-var _chunkWDXEJDMOcjs = require('../chunk-WDXEJDMO.cjs');
-
-
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
-
-// src/primitives/responsive-dialog.tsx
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-var _reactresponsive = require('react-responsive');
-var _jsxruntime = require('react/jsx-runtime');
-var DesktopContext = React.createContext(false);
-var useIsDesktop = () => React.useContext(DesktopContext);
-var DESKTOP_QUERY = { minWidth: 1024 };
-var ResponsiveDialog = ({ children, ...props }) => {
-  const isDesktop = _reactresponsive.useMediaQuery.call(void 0, DESKTOP_QUERY);
-  const Root = isDesktop ? _chunkWDXEJDMOcjs.Dialog : _chunk2BHI5ZWJcjs.Drawer;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ...props, children }) });
-};
-ResponsiveDialog.displayName = "ResponsiveDialog";
-var ResponsiveDialogTrigger = ({
-  children,
-  ...props
-}) => {
-  const Trigger = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTrigger : _chunk2BHI5ZWJcjs.DrawerTrigger;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Trigger, { ...props, children });
-};
-ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
-var ResponsiveDialogClose = ({
-  children,
-  ...props
-}) => {
-  const Close = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogClose : _chunk2BHI5ZWJcjs.DrawerClose;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Close, { ...props, children });
-};
-ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
-var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
-  if (useIsDesktop()) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWDXEJDMOcjs.DialogContent,
-      {
-        ref,
-        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
-          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2BHI5ZWJcjs.DrawerContent,
-    {
-      ref,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, "max-h-[92vh]", className),
-      ...props,
-      children
-    }
-  );
-});
-ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
-var ResponsiveDialogHeader = ({
-  className,
-  visibility = "visible",
-  ...props
-}) => {
-  const Header = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogHeader : _chunk2BHI5ZWJcjs.DrawerHeader;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Header,
-    {
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
-      ...props
-    }
-  );
-};
-ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
-var ResponsiveDialogBody = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
-ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
-var ResponsiveDialogFooter = ({
-  className,
-  layout = "auto",
-  ...props
-}) => {
-  const isDesktop = useIsDesktop();
-  const Footer = isDesktop ? _chunkWDXEJDMOcjs.DialogFooter : _chunk2BHI5ZWJcjs.DrawerFooter;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Footer,
-    {
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
-        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
-        className
-      ),
-      ...props
-    }
-  );
-};
-ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
-var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
-  const Title = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTitle : _chunk2BHI5ZWJcjs.DrawerTitle;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Title, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
-});
-ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
-var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
-  const Description = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogDescription : _chunk2BHI5ZWJcjs.DrawerDescription;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
-});
-ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
-
-
-
-
-
-
-
-
-
-
-exports.ResponsiveDialog = ResponsiveDialog; exports.ResponsiveDialogBody = ResponsiveDialogBody; exports.ResponsiveDialogClose = ResponsiveDialogClose; exports.ResponsiveDialogContent = ResponsiveDialogContent; exports.ResponsiveDialogDescription = ResponsiveDialogDescription; exports.ResponsiveDialogFooter = ResponsiveDialogFooter; exports.ResponsiveDialogHeader = ResponsiveDialogHeader; exports.ResponsiveDialogTitle = ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+
+
+
+
+
+var _chunkBTHYGHOHcjs = require('../chunk-BTHYGHOH.cjs');
+require('../chunk-2BHI5ZWJ.cjs');
+require('../chunk-WDXEJDMO.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+
+
+
+
+
+
+
+
+exports.ResponsiveDialog = _chunkBTHYGHOHcjs.ResponsiveDialog; exports.ResponsiveDialogBody = _chunkBTHYGHOHcjs.ResponsiveDialogBody; exports.ResponsiveDialogClose = _chunkBTHYGHOHcjs.ResponsiveDialogClose; exports.ResponsiveDialogContent = _chunkBTHYGHOHcjs.ResponsiveDialogContent; exports.ResponsiveDialogDescription = _chunkBTHYGHOHcjs.ResponsiveDialogDescription; exports.ResponsiveDialogFooter = _chunkBTHYGHOHcjs.ResponsiveDialogFooter; exports.ResponsiveDialogHeader = _chunkBTHYGHOHcjs.ResponsiveDialogHeader; exports.ResponsiveDialogTitle = _chunkBTHYGHOHcjs.ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = _chunkBTHYGHOHcjs.ResponsiveDialogTrigger;

package/dist/primitives/responsive-dialog.js

@@ -1,134 +1,18 @@
 "use client";
 import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger
-} from "../chunk-4HWCNRK4.js";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from "../chunk-3QT5VYZ3.js";
-import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/responsive-dialog.tsx
-import * as React from "react";
-import { useMediaQuery } from "react-responsive";
-import { jsx } from "react/jsx-runtime";
-var DesktopContext = React.createContext(false);
-var useIsDesktop = () => React.useContext(DesktopContext);
-var DESKTOP_QUERY = { minWidth: 1024 };
-var ResponsiveDialog = ({ children, ...props }) => {
-  const isDesktop = useMediaQuery(DESKTOP_QUERY);
-  const Root = isDesktop ? Dialog : Drawer;
-  return /* @__PURE__ */ jsx(DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ jsx(Root, { ...props, children }) });
-};
-ResponsiveDialog.displayName = "ResponsiveDialog";
-var ResponsiveDialogTrigger = ({
-  children,
-  ...props
-}) => {
-  const Trigger = useIsDesktop() ? DialogTrigger : DrawerTrigger;
-  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
-};
-ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
-var ResponsiveDialogClose = ({
-  children,
-  ...props
-}) => {
-  const Close = useIsDesktop() ? DialogClose : DrawerClose;
-  return /* @__PURE__ */ jsx(Close, { ...props, children });
-};
-ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
-var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
-  if (useIsDesktop()) {
-    return /* @__PURE__ */ jsx(
-      DialogContent,
-      {
-        ref,
-        className: cn(
-          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
-          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    DrawerContent,
-    {
-      ref,
-      className: cn("max-h-[92vh]", className),
-      ...props,
-      children
-    }
-  );
-});
-ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
-var ResponsiveDialogHeader = ({
-  className,
-  visibility = "visible",
-  ...props
-}) => {
-  const Header = useIsDesktop() ? DialogHeader : DrawerHeader;
-  return /* @__PURE__ */ jsx(
-    Header,
-    {
-      className: cn(useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
-      ...props
-    }
-  );
-};
-ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
-var ResponsiveDialogBody = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
-ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
-var ResponsiveDialogFooter = ({
-  className,
-  layout = "auto",
-  ...props
-}) => {
-  const isDesktop = useIsDesktop();
-  const Footer = isDesktop ? DialogFooter : DrawerFooter;
-  return /* @__PURE__ */ jsx(
-    Footer,
-    {
-      className: cn(
-        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
-        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
-        className
-      ),
-      ...props
-    }
-  );
-};
-ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
-var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
-  const Title = useIsDesktop() ? DialogTitle : DrawerTitle;
-  return /* @__PURE__ */ jsx(Title, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
-});
-ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
-var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
-  const Description = useIsDesktop() ? DialogDescription : DrawerDescription;
-  return /* @__PURE__ */ jsx(Description, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
-});
-ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger
+} from "../chunk-JTI4244T.js";
+import "../chunk-4HWCNRK4.js";
+import "../chunk-3QT5VYZ3.js";
+import "../chunk-G6SRSWXB.js";
 export {
   ResponsiveDialog,
   ResponsiveDialogBody,

package/dist/primitives/section.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkLELBCBDTcjs = require('../chunk-LELBCBDT.cjs');
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
 
 
-var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+var _chunkLELBCBDTcjs = require('../chunk-LELBCBDT.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');

package/dist/primitives/section.js

@@ -1,10 +1,10 @@
 "use client";
-import {
-  Heading
-} from "../chunk-H2O6NMLZ.js";
 import {
   Text
 } from "../chunk-EIY5LLSP.js";
+import {
+  Heading
+} from "../chunk-H2O6NMLZ.js";
 import {
   cn
 } from "../chunk-G6SRSWXB.js";

package/dist/primitives/switch-field.cjs

@@ -7,10 +7,10 @@ var _chunk2XDFTB2Wcjs = require('../chunk-2XDFTB2W.cjs');
 var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
 
 
-var _chunkIQZLUT2Ycjs = require('../chunk-IQZLUT2Y.cjs');
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
 
 
-var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+var _chunkIQZLUT2Ycjs = require('../chunk-IQZLUT2Y.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');

package/dist/primitives/switch-field.js

@@ -5,12 +5,12 @@ import {
 import {
   Card
 } from "../chunk-35YMAIEL.js";
-import {
-  Label
-} from "../chunk-E2TQMDO7.js";
 import {
   Text
 } from "../chunk-EIY5LLSP.js";
+import {
+  Label
+} from "../chunk-E2TQMDO7.js";
 import {
   cn
 } from "../chunk-G6SRSWXB.js";

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