@sableui/react 0.6.1 → 0.7.0

package/dist/components/textarea/textarea.js

@@ -0,0 +1,38 @@
+// src/components/textarea/textarea.tsx
+import { Field as BaseField } from "@base-ui/react/field";
+import { cn } from "../../lib/cn.js";
+import { FIELD_INVALID, FIELD_SHELL, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { useDensity, useTypeTier } from "../../lib/density.js";
+import { jsx } from "react/jsx-runtime";
+function Textarea({
+  autoResize,
+  className,
+  ref,
+  ...props
+}) {
+  const tier = useTypeTier();
+  const density = useDensity();
+  return /* @__PURE__ */ jsx(
+    BaseField.Control,
+    {
+      ref,
+      render: /* @__PURE__ */ jsx("textarea", {}),
+      className: cn(
+        "flex min-h-20 w-full p-3 text-foreground",
+        // The shell Input wears too — lib/field-shell. Hand-copied, this had
+        // already lost the invalid ring Input shows on focus.
+        FIELD_SHELL,
+        FIELD_INVALID,
+        autoResize && "field-sizing-content resize-none",
+        tier.body,
+        density === "comfortable" && MOBILE_FIELD_TIER,
+        className
+      ),
+      ...props
+    }
+  );
+}
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/components/textarea/textarea.meta.js

@@ -0,0 +1,117 @@
+// src/components/textarea/textarea.meta.ts
+var textareaMeta = {
+  name: "Textarea",
+  summary: "Styled native multi-line text control. Soft-square, card surface, --ring focus, and an aria-invalid destructive error state.",
+  status: "stable",
+  keywords: [
+    "textarea",
+    "multi line input",
+    "form",
+    "text"
+  ],
+  usage: {
+    description: "Use Textarea for multi-line freeform text entry such as notes, descriptions, or messages.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use labels, helper text, and character limits when expectations are specific."
+      },
+      {
+        guidance: "do",
+        description: "Size it to the expected amount of input without making the page feel blocked."
+      },
+      {
+        guidance: "do",
+        description: "Keep a focusable field at 16px or larger on mobile. iOS Safari zooms the whole page when a focused textarea computes under 16px and never zooms back out. Textarea handles this itself \u2014 below the sm breakpoint it renders text-body-lg (17px) and returns to text-body-md at sm and up. Build a custom field the same way: a second paired tier under a max-sm: variant, never a hand-set font-size."
+      },
+      {
+        guidance: "dont",
+        description: "Do not override the type with a page tier below 16px (text-body-md, text-body-sm) without a >=16px mobile arm \u2014 that reintroduces the iOS focus zoom."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Textarea for short single-line values; use Input."
+      },
+      {
+        guidance: "dont",
+        description: "Do not leave it at the default height for long-form input. A two-row textarea for a paragraph forces the user to write through a letterbox."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Input",
+      "Form",
+      "Label"
+    ]
+  },
+  props: [
+    {
+      name: "aria-invalid",
+      type: "boolean",
+      description: "When true, swaps the input border to the destructive token to signal a validation error."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Dims the control to 50% and blocks pointer interaction."
+    },
+    {
+      name: "rows",
+      type: "number",
+      description: "Native textarea row count. The floor is min-h-20 on the spacing scale, so it moves with density."
+    },
+    {
+      name: "autoResize",
+      type: "boolean",
+      default: "false",
+      description: "Grows to fit content via CSS field-sizing: content (no JS). The min-height stays the floor; browsers without field-sizing fall back to the fixed min-height."
+    },
+    {
+      name: "...props",
+      type: 'ComponentPropsWithRef<"textarea">',
+      description: "All native textarea attributes (value, placeholder, onChange, name, ref, \u2026)."
+    }
+  ],
+  tokensUsed: [
+    "input",
+    "card",
+    "foreground",
+    "muted-foreground",
+    "ring",
+    "destructive"
+  ],
+  a11y: [
+    "Renders a native <textarea> \u2014 label association, keyboard, and screen-reader semantics come for free.",
+    "Renders through Base UI's Field.Control: inside a Field it picks up the label, description, error and validity wiring from context.",
+    "Pair with a <label htmlFor> (or aria-label) for an accessible name.",
+    "Set aria-invalid and reference an error message via aria-describedby to announce validation failures.",
+    "Focus-visible draws a 2px ring in the --ring token."
+  ],
+  examples: [
+    {
+      label: "Default",
+      code: '<Textarea placeholder="Write a caption\u2026" />'
+    },
+    {
+      label: "With rows",
+      code: '<Textarea rows={6} placeholder="Tell the story behind this edition\u2026" />'
+    },
+    {
+      label: "Auto-resize",
+      code: '<Textarea autoResize placeholder="Grows as you type\u2026" />'
+    },
+    {
+      label: "Invalid",
+      code: '<Textarea aria-invalid defaultValue="Too long" />'
+    },
+    {
+      label: "Disabled",
+      code: '<Textarea disabled defaultValue="Captions lock once the edition is minted." />'
+    }
+  ]
+};
+export {
+  textareaMeta
+};

package/dist/components/theme-selector/index.js

@@ -0,0 +1,11 @@
+// src/components/theme-selector/index.ts
+import {
+  ThemeSelector,
+  ThemePreview
+} from "./theme-selector.js";
+import { themeSelectorMeta } from "./theme-selector.meta.js";
+export {
+  ThemePreview,
+  ThemeSelector,
+  themeSelectorMeta
+};

package/dist/components/theme-selector/theme-selector.js

@@ -0,0 +1,145 @@
+// src/components/theme-selector/theme-selector.tsx
+import { Radio as RadioBase } from "@base-ui/react/radio";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { RadioGroup } from "../radio/radio.js";
+import {
+  defaultThemeId,
+  featuredThemeManifests
+} from "../../themes/registry.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function themeCaption(theme, defaultId) {
+  if (theme.id === defaultId) return "Default";
+  if (theme.modes.length === 1) {
+    const mode = theme.modes[0];
+    return `${mode[0].toUpperCase()}${mode.slice(1)} only`;
+  }
+  return null;
+}
+function ThemePreview({ theme, mode = theme.defaultMode, size = "md" }) {
+  const face = { fontFamily: theme.fonts.display ?? theme.fonts.sans };
+  return /* @__PURE__ */ jsx("span", { className: "contents [--picker-u:var(--picker-option-u,var(--spacing))]", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-sable-theme": theme.id,
+      "aria-hidden": true,
+      className: cn(
+        mode,
+        "shrink-0 overflow-hidden border border-border bg-background text-foreground",
+        // Sized in the APP's spacing unit (--picker-u, resolved on the option):
+        // inside this scope `h-16` meant the previewed theme's unit, and themes
+        // set different ones, so Prism's tile came out shorter than Poppy's and
+        // the names below no longer lined up.
+        size === "md" ? [
+          "grid h-[calc(var(--picker-u)*16)] w-full grid-cols-[1fr_auto] gap-[calc(var(--picker-u)*2)] rounded-md p-[calc(var(--picker-u)*2)]",
+          // The selection outline, in the APP's ink: --picker-* are resolved on
+          // the option, outside this scope, so they arrive as the app's colours.
+          // (A list row shows selection with its own fill instead.)
+          "outline-offset-2 motion-interactive",
+          "group-hover:outline-1 group-hover:outline-[color-mix(in_oklab,var(--picker-ink)_35%,transparent)]",
+          "group-aria-checked:outline-2 group-aria-checked:outline-(--picker-ink)",
+          "group-focus-visible:outline-2 group-focus-visible:outline-(--picker-focus)"
+        ] : "flex h-[calc(var(--picker-u)*6)] w-[calc(var(--picker-u)*11)] items-center justify-between gap-[calc(var(--picker-u)*1)] rounded-xs px-[calc(var(--picker-u)*1.5)]"
+      ),
+      children: size === "md" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-title-lg leading-none", style: face, children: "Aa" }),
+          /* @__PURE__ */ jsx("span", { className: "h-[calc(var(--picker-u)*3.5)] w-[calc(var(--picker-u)*10)] rounded-[calc(var(--button-radius,9999px)*0.35)] bg-primary" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex w-[calc(var(--picker-u)*11)] flex-col justify-end gap-[calc(var(--picker-u)*1)] rounded-[calc(var(--radius-lg)*0.4)] border border-border bg-card p-[calc(var(--picker-u)*1.5)]", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-[calc(var(--picker-u)*1)] w-full rounded-full bg-foreground/70" }),
+          /* @__PURE__ */ jsx("span", { className: "h-[calc(var(--picker-u)*1)] w-2/3 rounded-full bg-muted-foreground/40" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-caption leading-none", style: face, children: "Aa" }),
+        /* @__PURE__ */ jsx("span", { className: "h-[calc(var(--picker-u)*2)] w-[calc(var(--picker-u)*3.5)] rounded-[calc(var(--button-radius,9999px)*0.2)] bg-primary" })
+      ] })
+    }
+  ) });
+}
+var PICKER_INK = "[--picker-ink:var(--foreground)] [--picker-focus:var(--ring)] [--picker-option-u:var(--spacing)]";
+function ThemeSelector({
+  value,
+  onValueChange,
+  themes = featuredThemeManifests,
+  mode,
+  label = "Design theme",
+  layout = "cards",
+  className,
+  ref,
+  ...props
+}) {
+  if (layout === "list") {
+    return /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        ref,
+        "aria-label": label,
+        value,
+        onValueChange: (next) => onValueChange(next),
+        className: cn("relative flex flex-col gap-0.5", className),
+        ...props,
+        children: themes.map((theme) => /* @__PURE__ */ jsxs(
+          RadioBase.Root,
+          {
+            value: theme.id,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            nativeButton: true,
+            className: cn(
+              // sable-frame-inner: concentric inside a sable-frame host (a frame-styled
+              // popover, a docked panel); the theme's small radius anywhere else.
+              "group flex h-(--control-sm) w-full items-center gap-2 px-1.5 text-start motion-interactive sable-frame-inner",
+              PICKER_INK,
+              // Menu / Select rows' fills and ink, so a theme list beside a
+              // menu reads as the same kind of row.
+              "hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
+              "aria-checked:bg-accent aria-checked:text-accent-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ThemePreview, { theme, mode: mode ?? theme.defaultMode, size: "sm" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-ui-md", children: theme.label }),
+              /* @__PURE__ */ jsx(Icon, { name: "check", className: "shrink-0 text-xs text-primary opacity-0 motion-interactive group-aria-checked:opacity-100" })
+            ]
+          },
+          theme.id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      ref,
+      "aria-label": label,
+      value,
+      onValueChange: (next) => onValueChange(next),
+      className: cn("relative grid grid-cols-[repeat(auto-fill,minmax(--spacing(32),1fr))] gap-x-3 gap-y-4", className),
+      ...props,
+      children: themes.map((theme) => {
+        const caption = themeCaption(theme, defaultThemeId);
+        return /* @__PURE__ */ jsxs(
+          RadioBase.Root,
+          {
+            value: theme.id,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            nativeButton: true,
+            className: cn("group flex min-w-0 flex-col gap-2 text-start focus-visible:outline-none", PICKER_INK),
+            children: [
+              /* @__PURE__ */ jsx(ThemePreview, { theme, mode: mode ?? theme.defaultMode, size: "md" }),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-label-md text-muted-foreground motion-interactive group-hover:text-foreground group-aria-checked:text-foreground", children: theme.label }),
+                caption ? /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-caption text-muted-foreground", children: caption }) : null
+              ] })
+            ]
+          },
+          theme.id
+        );
+      })
+    }
+  );
+}
+ThemeSelector.displayName = "ThemeSelector";
+export {
+  ThemePreview,
+  ThemeSelector
+};

package/dist/components/theme-selector/theme-selector.meta.js

@@ -0,0 +1,181 @@
+// src/components/theme-selector/theme-selector.meta.ts
+var themeSelectorMeta = {
+  name: "ThemeSelector",
+  summary: "A presentational radiogroup for choosing a Sable design theme from theme manifests \u2014 tiles that draw each theme as a miniature of its own interface (its colours, type and corner shape) for a settings page, or compact rows for tool chrome. Pair it with useSableTheme().themeId and setThemeId when the app uses SableThemeProvider.",
+  status: "stable",
+  // keywords and related were inherited from lib/component-guidance.ts until that
+  // entry was removed as dead code. They belong here now: the fall-through is
+  // per-field (`meta.keywords ?? metaGuidance.keywords`), so deleting the central
+  // entry drops every field the meta does not state itself.
+  keywords: ["theme selector", "theme", "appearance", "skin", "design theme", "preset"],
+  related: { components: ["ThemeSwitcher", "Popover", "RadioCard"] },
+  usage: {
+    description: 'Use ThemeSelector wherever a person picks a theme. The default `cards` layout is page-register furniture: a miniature of each theme\'s interface (its background, "Aa" in its display face, a card, and a primary button in its own corner shape), with the name and a caption only where one distinguishes it (the default theme, or a single-mode theme). Use `layout="list"` in tool chrome, a popover, or any docked panel \u2014 five cards is the wrong object for a 256px surface, however it is sized. For colour mode (light/dark/system) use ThemeSwitcher, which is a segmented control and belongs in chrome as-is.',
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Use layout="list" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show a small tile of each theme, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (`sable-frame sable-surface sable-surface-popover sable-frame-popover` \u2014 PopoverContent is not one; give it that class list, or its p-4 leaves the rows unnested) and their corners nest concentrically.'
+      },
+      {
+        guidance: "do",
+        description: "Pass mode={useSableTheme().mode} so every preview renders in the colour mode actually in use, rather than in each theme's manifest default."
+      },
+      {
+        guidance: "do",
+        description: 'Use ThemeSelector when switching is free: it is a radio group, so arrow keys check the next theme and onValueChange fires on every press \u2014 the page restyles as you go, which is the point of a live theme switcher. When a switch has a cost (it opens a "discard changes?" confirm, loads fonts, or resets other settings), use a DisclosurePicker list instead, with a `ThemePreview size="sm"` as each option\'s `media`: arrows only move there, and Enter, Space or a click commits.'
+      },
+      {
+        guidance: "do",
+        description: "Load each theme's fonts in the host app. Every card carries a type specimen in that theme's own face so people can compare typography as well as color. A theme whose fonts are not loaded falls back to system-ui, and its specimen stops telling the truth."
+      },
+      {
+        guidance: "dont",
+        description: 'Add a viewport breakpoint to force a column count \u2014 `className="sm:grid-cols-1"` or similar. `sm:` keys off the VIEWPORT, not this component\'s container, so on a wide screen it does nothing for a narrow parent. The cards grid already reflows on its own width via auto-fit.'
+      },
+      {
+        guidance: "dont",
+        description: "Put the cards layout in workspace chrome. It was built for a settings page; in a 256px popover the cards clip their labels to a single character and grow to roughly twice their intended height."
+      },
+      {
+        // Recovered from lib/component-guidance.ts, whose entry for this
+        // component was silently shadowed the moment this `usage` block was
+        // added — `meta.usage ?? metaGuidance.usage` means the meta wins whole,
+        // so a partial override destroys whatever it does not restate.
+        guidance: "dont",
+        description: "Use ThemeSelector for light / dark / system colour mode. That is ThemeSwitcher \u2014 a segmented control. This picks the design theme, which is a different axis entirely, and the two are frequently confused."
+      }
+    ],
+    anatomy: [
+      {
+        name: "ThemeSelector",
+        required: true,
+        description: "The radiogroup of themes, as cards or list rows."
+      },
+      {
+        name: "ThemePreview",
+        required: false,
+        description: "The tile each option draws, exported for showing a theme outside the picker \u2014 the row naming the current theme, or the `media` of each option in a commit-on-Enter DisclosurePicker list."
+      }
+    ]
+  },
+  props: [
+    {
+      name: "value",
+      type: "ThemeId",
+      description: "The currently selected Sable design theme id."
+    },
+    {
+      name: "onValueChange",
+      type: "(themeId: ThemeId) => void",
+      description: "Called with the next design theme id when an option is chosen."
+    },
+    {
+      name: "themes",
+      type: "readonly ThemeManifest[]",
+      default: "themeManifests",
+      description: "Theme manifests to render. Defaults to Sable's built-in themes."
+    },
+    {
+      name: "mode",
+      type: '"light" | "dark"',
+      description: "Preview mode for each theme's tile. Pass useSableTheme().mode to match the current color mode; omitted cards use their manifest defaultMode."
+    },
+    {
+      name: "label",
+      type: "string",
+      default: '"Design theme"',
+      description: "Accessible label for the radiogroup."
+    },
+    {
+      name: "layout",
+      type: '"cards" | "list"',
+      default: '"cards"',
+      description: 'Presentation. "cards" is the page-register picker (~144px per card); "list" is one compact --control-sm row per theme, for chrome and popovers. A presentation variant, not a size \u2014 "list" is not "cards, smaller" \u2014 which is why it is a prop rather than a density scope.'
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Merged onto the outer radiogroup grid."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "ThemePreview",
+      type: '{ theme: ThemeManifest; mode?: "light" | "dark"; size?: "md" | "sm" }',
+      description: `The tile each option draws: the theme as a miniature of itself (background, "Aa" in its display face, a card, a primary button in its own corner shape), in its own scope. Exported for anywhere that shows a theme outside the picker, e.g. a row naming the current preset, or each option of a DisclosurePicker list where a pick has a cost. Sized in the caller's spacing unit, so it lines up with the row it sits in.`
+    }
+  ],
+  tokensUsed: [
+    "input",
+    "card",
+    "border",
+    "background",
+    "primary",
+    "primary-foreground",
+    "accent",
+    "muted",
+    "muted-foreground",
+    "ring"
+  ],
+  a11y: [
+    'The container is role="radiogroup" with an aria-label; each card is a role="radio" button with aria-checked reflecting the selected theme.',
+    "Standard radio keyboard: arrow keys move the check \u2014 calling onValueChange on each press \u2014 and Space checks the focused option. That instant switching is right for a free, reversible choice; where a switch has a cost, use a DisclosurePicker list (a listbox: arrows move, Enter commits) with ThemePreview tiles instead.",
+    "Focus-visible draws a 2px ring on the focused card.",
+    "The selected card wears the shared selection-card checked ring (the same as RadioCard and CheckboxCard), a muted fill and a check icon, so selection does not rely on colour alone.",
+    "Presentational only: it does not change the document theme; pass useSableTheme().setThemeId or apply the change in onValueChange."
+  ],
+  examples: [
+    {
+      label: "When a switch has a cost: a DisclosurePicker list of ThemePreview tiles",
+      code: `// Arrows move; Enter, Space or a click commits \u2014 so whatever the switch costs
+// (a confirm, a font load, a reset) happens once, on the pick.
+const { themeId, setThemeId, themes, mode } = useSableTheme()
+const current = themes.find((theme) => theme.id === themeId)
+<DisclosurePicker>
+  <DisclosurePickerTrigger aria-label={\`Theme: \${current?.label}\`} media={current ? <ThemePreview theme={current} mode={mode} size="sm" /> : null}>
+    {current?.label}
+  </DisclosurePickerTrigger>
+  <DisclosurePickerPanel>
+    <DisclosurePickerList aria-label="Theme" value={themeId} onValueChange={setThemeId}>
+      {themes.map((theme) => (
+        <DisclosurePickerOption key={theme.id} value={theme.id} media={<ThemePreview theme={theme} mode={mode} size="sm" />}>
+          {theme.label}
+        </DisclosurePickerOption>
+      ))}
+    </DisclosurePickerList>
+  </DisclosurePickerPanel>
+</DisclosurePicker>`
+    },
+    {
+      label: "With SableThemeProvider",
+      code: "const { themeId, setThemeId, themes, mode } = useSableTheme()\n<ThemeSelector value={themeId} onValueChange={setThemeId} themes={themes} mode={mode} />"
+    },
+    {
+      label: "Controlled",
+      code: 'const [themeId, setThemeId] = useState<ThemeId>("sable")\n<ThemeSelector value={themeId} onValueChange={setThemeId} />'
+    },
+    {
+      label: "In chrome \u2014 a popover or a docked panel",
+      code: `// Five 144px cards is the wrong object for a 256px surface. Rows are.
+<PopoverContent align="end" className="w-64 p-3">
+  <ThemeSwitcher value={preference} onValueChange={setPreference} />
+  <ThemeSelector layout="list" value={themeId} onValueChange={setThemeId} mode={mode} />
+</PopoverContent>`
+    },
+    {
+      label: "Do not reach for a viewport breakpoint",
+      code: `// \u2717 \`sm:\` keys off the VIEWPORT, not this component's container. On a wide
+//   screen it does nothing at all for a narrow parent \u2014 and this exact
+//   workaround, once documented here, is how the cards layout ended up in a
+//   256px popover clipping "Default" to "D".
+<ThemeSelector className="sm:grid-cols-1" value={themeId} onValueChange={setThemeId} />
+
+// \u2713 The cards grid already reflows on its own width (auto-fit, 9rem tracks).
+//   For a genuinely narrow surface, change the presentation instead.
+<ThemeSelector layout="list" value={themeId} onValueChange={setThemeId} />`
+    }
+  ]
+};
+export {
+  themeSelectorMeta
+};

package/dist/components/theme-switcher/index.js

@@ -0,0 +1,7 @@
+// src/components/theme-switcher/index.ts
+import { ThemeSwitcher } from "./theme-switcher.js";
+import { themeSwitcherMeta } from "./theme-switcher.meta.js";
+export {
+  ThemeSwitcher,
+  themeSwitcherMeta
+};

package/dist/components/theme-switcher/theme-switcher.js

@@ -0,0 +1,106 @@
+"use client";
+
+// src/components/theme-switcher/theme-switcher.tsx
+import { Radio as RadioBase } from "@base-ui/react/radio";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import {
+  SEGMENTED_INNER_RADIUS,
+  SEGMENTED_ITEM,
+  SEGMENTED_STEP,
+  SEGMENTED_TRACK
+} from "../../lib/segmented.js";
+import { RadioGroup } from "../radio/radio.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OPTIONS = [
+  { value: "light", icon: "sun", label: "Light" },
+  { value: "dark", icon: "moon", label: "Dark" },
+  { value: "system", icon: "desktop", label: "System" }
+];
+function ThemeSwitcher({
+  value,
+  onValueChange,
+  label = "Theme",
+  className,
+  ref,
+  ...props
+}) {
+  const activeIndex = OPTIONS.findIndex((o) => o.value === value);
+  return /* @__PURE__ */ jsxs(
+    RadioGroup,
+    {
+      ref,
+      "aria-label": label,
+      value,
+      onValueChange: (next) => onValueChange(next),
+      className: cn(
+        // `w-fit` as well as `inline-flex`, and it is load-bearing: `display`
+        // does not protect a flex ITEM. In any `flex flex-col` parent — the most
+        // ordinary way to stack a label above a control — `align-items: stretch`
+        // overrides the intrinsic width, and because the three buttons stay a
+        // fixed size-7 you get a full-width capsule with the icons stranded at
+        // the left. A segmented control of fixed-size options must never stretch.
+        // Pass `className="w-full"` if you genuinely want it to.
+        // `flex-row` overrides RadioGroup's stacked default.
+        // The shared segmented track (lib/segmented), also ToggleGroup's
+        // appearance="segmented".
+        SEGMENTED_TRACK,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute start-0.5 top-0.5 size-7 bg-accent transition-[translate,opacity] duration-(--motion-duration-base) ease-emphasized",
+              SEGMENTED_INNER_RADIUS,
+              "[translate:calc(var(--segment-index)*var(--segment-step))_0] rtl:[translate:calc(var(--segment-index)*var(--segment-step)*-1)_0]",
+              activeIndex < 0 && "opacity-0"
+            ),
+            style: {
+              "--segment-index": Math.max(activeIndex, 0),
+              "--segment-step": SEGMENTED_STEP
+            }
+          }
+        ),
+        OPTIONS.map((option) => {
+          const checked = option.value === value;
+          return /* @__PURE__ */ jsx(
+            RadioBase.Root,
+            {
+              value: option.value,
+              render: /* @__PURE__ */ jsx("button", { type: "button" }),
+              nativeButton: true,
+              "aria-label": option.label,
+              title: option.label,
+              className: cn(
+                SEGMENTED_ITEM,
+                // The checked icon sits on the bg-accent pill, so its ink must be
+                // accent-foreground — legible on a saturated accent (a saturated theme accent)
+                // and identical to foreground for neutral accents.
+                "aria-checked:text-accent-foreground aria-checked:hover:text-accent-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: option.icon,
+                  className: cn(
+                    "text-sm transition-transform duration-(--motion-duration-base) ease-spring",
+                    checked && "scale-110"
+                  )
+                }
+              )
+            },
+            option.value
+          );
+        })
+      ]
+    }
+  );
+}
+ThemeSwitcher.displayName = "ThemeSwitcher";
+export {
+  ThemeSwitcher
+};