@epicbagel/saas-kit 1.3.0 → 1.4.0

package/README.md

@@ -219,6 +219,62 @@ import { FilePreview } from "@epicbagel/saas-kit/primitives/file-preview";
 `primitives/document-preview` is the same dialog with every `src` in the
 browser's viewer, as it was in ui-kit; its API is unchanged.
 
+## Theme selector (1.4.0)
+
+`primitives/theme-selector` is a page of appearance settings: light, dark or
+system, then a grid of palettes, each previewing both modes. It owns no
+state: it shows the `palette` and `mode` it is given and reports picks, and
+the app applies and stores them. The palette is a `data-theme` attribute on
+`<html>` and the mode the `.dark` class: two independent axes.
+
+```tsx
+import { ThemeSelector, type ThemeSelectorMode } from "@epicbagel/saas-kit/primitives/theme-selector";
+import { NEUTRAL_PALETTE, type ThemePalette } from "@epicbagel/saas-kit/lib/neutral-theme";
+
+const PALETTES: ThemePalette[] = [NEUTRAL_PALETTE, ...yourPalettes];
+
+export function Appearance() {
+  const [palette, setPalette] = useState(NEUTRAL_PALETTE.id);
+  const [mode, setMode] = useState<ThemeSelectorMode>("system");
+  // Apply them: set `data-theme` on <html> to the palette, and toggle
+  // `.dark` for the mode (next-themes does that part for you).
+  return (
+    <ThemeSelector
+      palettes={PALETTES}
+      palette={palette}
+      onPaletteChange={setPalette}
+      mode={mode}
+      onModeChange={setMode}
+    />
+  );
+}
+```
+
+- **Palettes come in.** The selector knows only the kit's neutral palette,
+  `NEUTRAL_PALETTE` (`lib/neutral-theme`), which it offers alone when given
+  no `palettes`. Its id is `minimal`, the value the stylesheet's default
+  already answers to, so storing it changes nothing on screen.
+- **A `ThemePalette`** is an `id` (its `data-theme` value, and what you
+  store), a `label`, and optionally a `description`, a `radius` and each
+  mode's semantic tokens as hex (`light`, `dark`: the token contract in
+  `lib/neutral-theme`). Given the tokens, a preview paints from them inline
+  (`paletteStyle`), whatever palette the page is in. Without them it carries
+  `data-theme` and `data-mode`, so your palette CSS must select any element
+  (`[data-theme="<id>"]`, not `:root[data-theme="<id>"]`), re-declare the
+  `--color-*` aliases there (`paletteDeclarations` writes them) and answer
+  `[data-mode="light"]` and `[data-mode="dark"]`.
+- **Before the stored pick is known**, pass `null` for `palette` or `mode`:
+  nothing is marked rather than the wrong option. Omitted, they default to
+  the neutral palette and `system`.
+- **Layout.** One column on a phone (below `sm`). Otherwise the grid
+  follows the selector's own width, so the same component fits a dialog and
+  a settings page: one column while it is narrower than 24rem, two from
+  there, three from 42rem.
+- **Words.** `modeLabel` ("Mode"), `paletteLabel` ("Theme"), `lightLabel`,
+  `darkLabel`, `systemLabel`, and optional `modeDescription` and
+  `paletteDescription`. Each palette's card is named by its `label` and
+  described by its `description`.
+
 ## License
 
 MIT. Some components and styles are adapted from shadcn/ui, and the file

package/dist/chunk-D5EHW3O2.cjs

@@ -0,0 +1,52 @@
+"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 _chunkGXHGMI3Zcjs = require('./chunk-GXHGMI3Z.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;

package/dist/chunk-F3DAFAMD.js

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

package/dist/chunk-HAP6USTP.cjs

@@ -0,0 +1,46 @@
+"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 _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;
+
+
+
+
+exports.RadioGroup = RadioGroup; exports.RadioGroupItem = RadioGroupItem;

package/dist/chunk-HAQOT2CD.js

@@ -0,0 +1,46 @@
+"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;
+
+export {
+  RadioGroup,
+  RadioGroupItem
+};