@epicbagel/saas-kit 1.3.0 → 1.4.0

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

package/dist/primitives/theme-selector.js

@@ -0,0 +1,188 @@
+"use client";
+"use client";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "../chunk-X3PRMR5G.js";
+import "../chunk-FJLINIC6.js";
+import {
+  RadioGroup,
+  RadioGroupItem
+} from "../chunk-HAQOT2CD.js";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle
+} from "../chunk-TWCJMFST.js";
+import "../chunk-HYTILYE5.js";
+import {
+  Icon
+} from "../chunk-KN4RPX35.js";
+import "../chunk-E2TQMDO7.js";
+import {
+  NEUTRAL_PALETTE,
+  NEUTRAL_THEME_ID,
+  paletteStyle
+} from "../chunk-F3DAFAMD.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/theme-selector.tsx
+import { useId, useMemo } from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MODES = ["light", "dark", "system"];
+var DEFAULT_PALETTES = [NEUTRAL_PALETTE];
+function isMode(value) {
+  return MODES.includes(value);
+}
+function PalettePreview({ palette, mode, className }) {
+  const tokens = mode ? palette[mode] : void 0;
+  const style = useMemo(
+    () => tokens ? paletteStyle(tokens, palette.radius) : void 0,
+    [tokens, palette.radius]
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "palette-preview",
+      "data-theme": palette.id,
+      "data-mode": mode,
+      "aria-hidden": "true",
+      style,
+      className: cn(
+        "pointer-events-none flex h-24 w-full select-none overflow-hidden rounded-md border border-border bg-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex w-1/4 flex-col gap-1.5 bg-sidebar p-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-3/4 rounded-full bg-sidebar-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-full rounded-full bg-sidebar-accent" }),
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-2/3 rounded-full bg-sidebar-accent" }),
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-5/6 rounded-full bg-sidebar-accent" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-2 p-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-2 w-1/3 rounded-full bg-foreground/70" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-auto h-3 w-8 rounded-sm bg-primary" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-1.5 rounded-lg border border-border bg-card p-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-1.5 w-full rounded-full bg-muted-foreground/40" }),
+            /* @__PURE__ */ jsx("span", { className: "h-1.5 w-4/5 rounded-full bg-muted-foreground/40" }),
+            /* @__PURE__ */ jsxs("span", { className: "flex gap-1 pt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-4 rounded-full bg-[hsl(var(--chart-1))]" }),
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-4 rounded-full bg-[hsl(var(--chart-2))]" }),
+              /* @__PURE__ */ jsx("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__ */ jsx(
+    FieldLabel,
+    {
+      htmlFor: id,
+      className: "cursor-pointer transition-colors not-has-data-[state=checked]:hover:border-foreground/30",
+      children: /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex overflow-hidden rounded-md border border-border", children: [
+          /* @__PURE__ */ jsx(
+            PalettePreview,
+            {
+              palette,
+              mode: "light",
+              className: "w-1/2 rounded-none border-0 border-r border-border"
+            }
+          ),
+          /* @__PURE__ */ jsx(PalettePreview, { palette, mode: "dark", className: "w-1/2 rounded-none border-0" })
+        ] }),
+        /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+          /* @__PURE__ */ jsxs(FieldContent, { children: [
+            /* @__PURE__ */ jsx(FieldTitle, { id: titleId, children: palette.label }),
+            palette.description ? /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: palette.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            RadioGroupItem,
+            {
+              value: palette.id,
+              id,
+              "aria-labelledby": titleId,
+              "aria-describedby": palette.description ? descriptionId : void 0
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function ThemeSelector({
+  palettes = DEFAULT_PALETTES,
+  palette = NEUTRAL_THEME_ID,
+  onPaletteChange,
+  mode = "system",
+  onModeChange,
+  paletteLabel = "Theme",
+  paletteDescription,
+  modeLabel = "Mode",
+  modeDescription,
+  lightLabel = "Light",
+  darkLabel = "Dark",
+  systemLabel = "System",
+  className
+}) {
+  const id = useId();
+  const modeOptions = [
+    { value: "light", label: lightLabel, icon: Sun },
+    { value: "dark", label: darkLabel, icon: Moon },
+    { value: "system", label: systemLabel, icon: Monitor }
+  ];
+  return /* @__PURE__ */ jsxs(FieldGroup, { "data-slot": "theme-selector", className: cn("gap-6", className), children: [
+    /* @__PURE__ */ jsxs(FieldSet, { className: "gap-3", children: [
+      /* @__PURE__ */ jsx(FieldLegend, { variant: "label", children: modeLabel }),
+      modeDescription ? /* @__PURE__ */ jsx(FieldDescription, { children: modeDescription }) : null,
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          variant: "outline",
+          value: mode ?? "",
+          onValueChange: (next) => {
+            if (isMode(next)) onModeChange?.(next);
+          },
+          className: "grid w-full grid-cols-3",
+          children: modeOptions.map((option) => /* @__PURE__ */ jsxs(ToggleGroupItem, { value: option.value, className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: option.icon }),
+            option.label
+          ] }, option.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FieldSet, { className: "gap-3", children: [
+      /* @__PURE__ */ jsx(FieldLegend, { variant: "label", children: paletteLabel }),
+      paletteDescription ? /* @__PURE__ */ jsx(FieldDescription, { children: paletteDescription }) : null,
+      /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          value: palette ?? "",
+          onValueChange: (next) => onPaletteChange?.(next),
+          className: "grid-cols-1 sm:@sm/field-group:grid-cols-2 @2xl/field-group:grid-cols-3",
+          children: palettes.map((option) => /* @__PURE__ */ jsx(PaletteOption, { palette: option, id: `${id}-palette-${option.id}` }, option.id))
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PalettePreview,
+  ThemeSelector
+};

package/dist/primitives/toggle-group.cjs

@@ -1,51 +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";
 
 
-var _chunkGXHGMI3Zcjs = require('../chunk-GXHGMI3Z.cjs');
 
+var _chunkD5EHW3O2cjs = require('../chunk-D5EHW3O2.cjs');
+require('../chunk-GXHGMI3Z.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/toggle-group.tsx
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-var _reacttogglegroup = require('@radix-ui/react-toggle-group'); var ToggleGroupPrimitive = _interopRequireWildcard(_reacttogglegroup);
-var _jsxruntime = require('react/jsx-runtime');
-var ToggleGroupContext = React.createContext({
-  size: "default",
-  variant: "default"
-});
-var ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center justify-center gap-1", className),
-    ...props,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToggleGroupContext.Provider, { value: { variant, size }, children })
-  }
-));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React.forwardRef(({ className, children, variant, size, grow = false, textSize = "inherit", ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        _chunkGXHGMI3Zcjs.toggleVariants.call(void 0, {
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        grow && "flex-1",
-        textSize === "xs" && "text-xs",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-
-
-exports.ToggleGroup = ToggleGroup; exports.ToggleGroupItem = ToggleGroupItem;
+exports.ToggleGroup = _chunkD5EHW3O2cjs.ToggleGroup; exports.ToggleGroupItem = _chunkD5EHW3O2cjs.ToggleGroupItem;

package/dist/primitives/toggle-group.js

@@ -1,50 +1,10 @@
 "use client";
 import {
-  toggleVariants
-} from "../chunk-FJLINIC6.js";
-import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/toggle-group.tsx
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { jsx } from "react/jsx-runtime";
-var ToggleGroupContext = React.createContext({
-  size: "default",
-  variant: "default"
-});
-var ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    className: cn("flex items-center justify-center gap-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-  }
-));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React.forwardRef(({ className, children, variant, size, grow = false, textSize = "inherit", ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        grow && "flex-1",
-        textSize === "xs" && "text-xs",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+  ToggleGroup,
+  ToggleGroupItem
+} from "../chunk-X3PRMR5G.js";
+import "../chunk-FJLINIC6.js";
+import "../chunk-G6SRSWXB.js";
 export {
   ToggleGroup,
   ToggleGroupItem

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -1150,6 +1150,16 @@
         "default": "./dist/primitives/textarea.cjs"
       }
     },
+    "./primitives/theme-selector": {
+      "import": {
+        "types": "./dist/primitives/theme-selector.d.ts",
+        "default": "./dist/primitives/theme-selector.js"
+      },
+      "require": {
+        "types": "./dist/primitives/theme-selector.d.cts",
+        "default": "./dist/primitives/theme-selector.cjs"
+      }
+    },
     "./primitives/thinking-screen": {
       "import": {
         "types": "./dist/primitives/thinking-screen.d.ts",