@forwardreach/saas-ui 0.5.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- `Switch` themes its thumb per state via a new optional
+  `--ssui-switch-thumb-checked` token (defaulting to `--ssui-switch-thumb`, so
+  existing consumers are unchanged). A single thumb color only works when the
+  checked track and the unchecked track sit on the same side of the lightness
+  scale; a product whose primary is near-white got a white thumb on a near-white
+  checked track, leaving the control unable to show on versus off.
+
+- Add the multi-select and disclosure primitives the settings kit was missing:
+
+  - `FieldGroup` — the group analogue of `FormField`: a `fieldset`/`legend`
+    wrapper with the same label/description/error typography and
+    `aria-describedby`/`aria-invalid` wiring. `FormField` can only label a single
+    control through `htmlFor`, so a set of controls answering one question (a
+    checkbox group, a radio group, a composite input) previously had no correct
+    labelling primitive.
+  - `Checkbox` — styled native checkbox that participates in `FormField` wiring
+    like the other controls.
+  - `CheckboxGroup` / `CheckboxGroupItem` — multi-select group whose options share
+    one form field name, so the submission arrives as repeated entries under that
+    name. The mirror image of `ChoiceCardGroup`, with the same bordered-target
+    presentation and support for controlled or uncontrolled selection.
+  - `Collapsible` / `CollapsibleTrigger` / `CollapsibleContent` — disclosure region
+    for keeping secondary detail (an edit form, an advanced section) out of the way
+    until it is asked for. The trigger carries `aria-expanded`/`aria-controls` and
+    supports `asChild` so a `Button` can be the trigger; the region stays mounted
+    and hidden with the `hidden` attribute, so `aria-controls` always resolves and
+    an open form's in-progress state survives a collapse.
+
+  The component gallery gains a "Form Fields And Groups" section covering these
+  alongside the existing `FormField`/`Select`/`Switch`/`ChoiceCardGroup` kit, plus
+  a "Collapsible" section.
+
+## 0.7.0
+
+### Minor Changes
+
+- Add the settings shell and form primitive kit:
+
+  - `SettingsLayout` / `SettingsNav` — centered max-width settings shell with a
+    grouped, icon-capable sidebar nav (horizontal-scroll row on small screens).
+    Router-agnostic: active state comes from `activeHref` or an `isActive`
+    predicate and links render through an injectable `linkComponent`.
+  - `FormField` — label/description/control/error wrapper that generates and
+    threads `id`/`aria-describedby`/`aria-invalid` to package controls via
+    context; `Input`, `Textarea`, `Select`, `Switch`, and `Combobox` participate.
+  - `Select` — native select styled to match `Input`, with chevron.
+  - `Switch` — `role="switch"` toggle themed by new optional
+    `--ssui-switch-track` / `--ssui-switch-track-checked` / `--ssui-switch-thumb`
+    tokens (neutral fallbacks); optional form participation via `name`.
+  - `ChoiceCardGroup` / `ChoiceCard` — radio group rendered as selectable
+    bordered cards over native radios.
+  - `Combobox` — filterable single-select with WAI-ARIA combobox semantics,
+    wrap-around active-option keyboard navigation, and Enter-commit of the
+    highlighted option.
+  - `TimeZoneField` — auto/fixed time-zone composite (detected zone shown in
+    the auto card, zone combobox with offset-aware search in fixed mode) that
+    submits `timeZoneMode`/`timeZone`/`browserTimeZone` hidden inputs.
+  - Time-zone utilities (`timeZoneOptions`, `formatTimeZoneOffset`,
+    `detectBrowserTimeZone`, `COMMON_TIME_ZONES`) exported for server-side reuse.
+
+## 0.6.0
+
+### Minor Changes
+
+- Add `RailToggle` (icon-only rail collapse/expand toggle with tooltip + shortcut hint, presentational) and polish `WorkspaceSwitcher`/`AccountMenu` popup presentation: 10px side offset, panel min-width tied to the trigger width, and trigger chevrons that rotate while the menu is open.
+
+- Add `AccountMenu` and `WorkspaceSwitcher` — the shared app-shell menu pair.
+
+  `AccountMenu` is the bottom-left identity menu: a full-width account card
+  trigger (avatar, name, email, chevron-up; avatar-only with a name tooltip when
+  `collapsed`) opening a Radix menu with a fixed anatomy — identity header,
+  optional theme selector row, consumer-provided items (`AccountMenuItem`), then
+  a separated Sign out. The theme row is a segmented `menuitemradio` control
+  (Sun/Moon/Monitor) that supports both two-option (light/dark) and three-option
+  (light/dark/system) configurations and keeps the menu open on selection.
+
+  `WorkspaceSwitcher` is the top-left workspace context menu: a brand badge +
+  active workspace name + chevron-down trigger (badge-only with a tooltip when
+  `collapsed`) opening a list of workspaces with the active row checked and not
+  re-selectable, plus an optional separated "New workspace" action. Selection is
+  callback-based (`onSelect(id)`).
+
+  Both components support the collapsed icon-rail state (menus open to the
+  right) and wrap their tooltips in a local `TooltipProvider`, so consumers need
+  no extra setup.
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/components/account-menu.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type AccountMenuThemeValue = "light" | "dark" | "system";
+export interface AccountMenuTheme {
+    /** Currently active theme. */
+    value: AccountMenuThemeValue;
+    /** Which options to offer. Defaults to all three (light/dark/system). */
+    options?: ReadonlyArray<AccountMenuThemeValue>;
+    onChange: (value: AccountMenuThemeValue) => void;
+}
+export interface AccountMenuProps {
+    name: string;
+    email?: string;
+    /** Avatar image URL; initials fall back from `name`. */
+    image?: string | null;
+    /** Icon-only rail state: avatar-only trigger with a name tooltip, menu opens right. */
+    collapsed?: boolean;
+    /** Omit to hide the theme row entirely. */
+    theme?: AccountMenuTheme;
+    /** Label for the theme row. Defaults to "Theme". */
+    themeLabel?: string;
+    /**
+     * Consumer menu entries (e.g. a Settings link), rendered between the theme
+     * row and the separated Sign out item. Use `AccountMenuItem`s.
+     */
+    children?: React.ReactNode;
+    onSignOut: () => void | Promise<void>;
+    /** Defaults to "Sign out". */
+    signOutLabel?: string;
+    /** Open the menu by default (uncontrolled). Mainly useful in tests. */
+    defaultOpen?: boolean;
+    /** Extra classes for the trigger card. */
+    className?: string;
+}
+/**
+ * Bottom-left identity menu for the app shell: a full-width account card
+ * (avatar, name, email, chevron-up) opening a menu with a fixed anatomy —
+ * identity header, optional theme selector row, consumer items, then a
+ * separated Sign out. Workspace switching deliberately does not belong here;
+ * that's the top-left `WorkspaceSwitcher`.
+ */
+export declare function AccountMenu({ name, email, image, collapsed, theme, themeLabel, children, onSignOut, signOutLabel, defaultOpen, className, }: AccountMenuProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenuItem as AccountMenuItem, DropdownMenuSeparator as AccountMenuSeparator, } from "./dropdown-menu.js";

package/dist/components/account-menu.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ChevronUp, LogOut, Monitor, Moon, Sun } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { Avatar } from "./avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+const THEME_OPTION_META = {
+    light: { icon: Sun, label: "Light" },
+    dark: { icon: Moon, label: "Dark" },
+    system: { icon: Monitor, label: "System" },
+};
+const ALL_THEME_OPTIONS = ["light", "dark", "system"];
+/**
+ * Bottom-left identity menu for the app shell: a full-width account card
+ * (avatar, name, email, chevron-up) opening a menu with a fixed anatomy —
+ * identity header, optional theme selector row, consumer items, then a
+ * separated Sign out. Workspace switching deliberately does not belong here;
+ * that's the top-left `WorkspaceSwitcher`.
+ */
+export function AccountMenu({ name, email, image, collapsed = false, theme, themeLabel = "Theme", children, onSignOut, signOutLabel = "Sign out", defaultOpen, className, }) {
+    const themeOptions = theme?.options ?? ALL_THEME_OPTIONS;
+    // Mirror open state for the chevron cue: the trigger's data-state is
+    // unreliable here because TooltipTrigger's own data-state wins the
+    // asChild prop merge over DropdownMenuTrigger's.
+    const [open, setOpen] = React.useState(defaultOpen ?? false);
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": collapsed ? name : "Account", className: cn("flex h-10 w-full items-center gap-2 rounded-[var(--ssui-radius)] px-1.5 text-left outline-none transition-colors hover:bg-[color:var(--ssui-overlay-hover)] focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)]", collapsed
+                                        ? // Collapsed = avatar-only: the text column/chevron are omitted
+                                            // from the layout entirely (not just faded) so the trigger
+                                            // truly fits an icon rail instead of relying on clipping.
+                                            "justify-center px-0"
+                                        : "border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)]", className), children: [_jsx(Avatar, { className: "shrink-0", name: name, size: 28, src: image }), !collapsed && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[13px] font-medium leading-tight text-[color:var(--ssui-text)]", children: name }), email ? (_jsx("span", { className: "truncate text-[11px] leading-tight text-[color:var(--ssui-text-muted)]", children: email })) : null] }), _jsx(ChevronUp, { className: cn("size-4 shrink-0 text-[color:var(--ssui-text-subtle)] transition-transform duration-150", open && "rotate-180") })] }))] }) }) }), collapsed ? _jsx(TooltipContent, { side: "right", children: name }) : null] }) }), _jsxs(DropdownMenuContent, { align: collapsed ? "end" : "start", className: "w-60 min-w-[var(--radix-dropdown-menu-trigger-width)]", side: collapsed ? "right" : "top", sideOffset: 10, children: [_jsx(DropdownMenuLabel, { children: _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "truncate text-sm font-medium text-[color:var(--ssui-text)]", children: name }), email ? (_jsx("span", { className: "truncate text-xs font-normal text-[color:var(--ssui-text-muted)]", children: email })) : null] }) }), _jsx(DropdownMenuSeparator, {}), theme ? (_jsx(DropdownMenuRadioGroup, { value: theme.value, onValueChange: (value) => theme.onChange(value), children: _jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5", children: [_jsx("span", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: themeLabel }), _jsx("div", { className: "flex gap-0.5 rounded-[var(--ssui-radius-sm)] border border-[color:var(--ssui-border)] p-0.5", children: themeOptions.map((option) => {
+                                        const { icon: Icon, label } = THEME_OPTION_META[option];
+                                        return (_jsx(DropdownMenuPrimitive.RadioItem, { "aria-label": label, className: "flex size-7 cursor-default select-none items-center justify-center rounded-[calc(var(--ssui-radius-sm)-1px)] text-[color:var(--ssui-text-muted)] outline-none transition-colors focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)] data-[state=checked]:bg-[color:var(--ssui-overlay-hover)] data-[state=checked]:text-[color:var(--ssui-text)]", 
+                                            // Keep the menu open: theme picking is a tweak-and-compare loop.
+                                            onSelect: (event) => event.preventDefault(), title: label, value: option, children: _jsx(Icon, { className: "size-4" }) }, option));
+                                    }) })] }) })) : null, children, theme || children ? _jsx(DropdownMenuSeparator, {}) : null, _jsxs(DropdownMenuItem, { onSelect: () => void onSignOut(), children: [_jsx(LogOut, { className: "size-4 text-[color:var(--ssui-text-muted)]" }), signOutLabel] })] })] }));
+}
+export { DropdownMenuItem as AccountMenuItem, DropdownMenuSeparator as AccountMenuSeparator, } from "./dropdown-menu.js";

package/dist/components/button.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "outline" | "secondary" | "ghost" | "ghost-accent" | "destructive" | null | undefined;
-    size?: "icon" | "sm" | "md" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/components/checkbox.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+}
+/**
+ * Styled native checkbox. Native on purpose: form participation, indeterminate
+ * support and platform semantics come from the browser, and only the box itself
+ * needs theming. Participates in `FormField` wiring like the other controls.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export interface CheckboxGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue" | "children"> {
+    /** Group label, rendered as the fieldset's legend. */
+    legend: React.ReactNode;
+    /** Optional supporting copy shown under the legend. */
+    description?: React.ReactNode;
+    /** Error message; when set the group is marked invalid. */
+    error?: React.ReactNode;
+    /** Form field name shared by every option in the group. */
+    name?: string;
+    /** Controlled selection. */
+    value?: readonly string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Disables every option in the group. */
+    disabled?: boolean;
+    /** `CheckboxGroupItem`s. */
+    children: React.ReactNode;
+}
+/**
+ * Multi-select group: a `FieldGroup` whose options share one form field name, so
+ * the submission arrives as repeated entries under that name. The mirror image of
+ * `ChoiceCardGroup`, which is the single-select form of the same pattern.
+ *
+ * Selection is tracked in context rather than left to the DOM so the group can be
+ * driven as a controlled component, but the underlying inputs stay native — an
+ * uncontrolled group still submits correctly with no JavaScript involvement.
+ */
+export declare function CheckboxGroup({ legend, description, error, name, value, defaultValue, onValueChange, disabled, className, children, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckboxGroupItemProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
+    /** Value submitted when this option is checked. */
+    value: string;
+    /** Option label. */
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+/**
+ * One option inside a `CheckboxGroup`: a bordered label wrapping a native
+ * checkbox. Bordered rather than bare so a row of options reads as a set of
+ * targets, and so the whole chip is clickable rather than just the box.
+ */
+export declare function CheckboxGroupItem({ value, label, disabled, className, ...props }: CheckboxGroupItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { FieldGroup } from "./field-group.js";
+import { useFormFieldProps } from "./form-field.js";
+/**
+ * Styled native checkbox. Native on purpose: form participation, indeterminate
+ * support and platform semantics come from the browser, and only the box itself
+ * needs theming. Participates in `FormField` wiring like the other controls.
+ */
+export const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx("input", { ref: ref, type: "checkbox", className: cn("size-4 shrink-0 cursor-pointer rounded-[calc(var(--ssui-radius)/2)] border border-[color:var(--ssui-border)] accent-[color:var(--ssui-primary)] transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:cursor-not-allowed disabled:opacity-50", className), ...useFormFieldProps(props) })));
+Checkbox.displayName = "Checkbox";
+const CheckboxGroupContext = React.createContext(null);
+/**
+ * Multi-select group: a `FieldGroup` whose options share one form field name, so
+ * the submission arrives as repeated entries under that name. The mirror image of
+ * `ChoiceCardGroup`, which is the single-select form of the same pattern.
+ *
+ * Selection is tracked in context rather than left to the DOM so the group can be
+ * driven as a controlled component, but the underlying inputs stay native — an
+ * uncontrolled group still submits correctly with no JavaScript involvement.
+ */
+export function CheckboxGroup({ legend, description, error, name, value, defaultValue, onValueChange, disabled, className, children, ...props }) {
+    const generatedName = React.useId();
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const selected = value ?? uncontrolledValue;
+    const contextValue = React.useMemo(() => {
+        const selectedSet = new Set(selected);
+        return {
+            name: name ?? generatedName,
+            disabled,
+            isSelected: (option) => selectedSet.has(option),
+            toggle: (option) => {
+                const next = selectedSet.has(option)
+                    ? selected.filter((entry) => entry !== option)
+                    : [...selected, option];
+                if (value === undefined)
+                    setUncontrolledValue(next);
+                onValueChange?.(next);
+            },
+        };
+    }, [disabled, generatedName, name, onValueChange, selected, value]);
+    return (_jsx(FieldGroup, { description: description, error: error, legend: legend, className: className, ...props, children: _jsx("div", { className: "flex flex-wrap gap-2 pt-0.5", children: _jsx(CheckboxGroupContext.Provider, { value: contextValue, children: children }) }) }));
+}
+/**
+ * One option inside a `CheckboxGroup`: a bordered label wrapping a native
+ * checkbox. Bordered rather than bare so a row of options reads as a set of
+ * targets, and so the whole chip is clickable rather than just the box.
+ */
+export function CheckboxGroupItem({ value, label, disabled, className, ...props }) {
+    const group = React.useContext(CheckboxGroupContext);
+    if (!group) {
+        throw new Error("CheckboxGroupItem must be rendered inside a CheckboxGroup");
+    }
+    const checked = group.isSelected(value);
+    const isDisabled = disabled ?? group.disabled;
+    return (_jsxs("label", { className: cn("inline-flex cursor-pointer items-center gap-2 rounded-[var(--ssui-radius)] border px-2.5 py-1.5 text-sm transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[color:var(--ssui-focus-ring)]", checked
+            ? "border-[color:var(--ssui-border-strong)] bg-[color:var(--ssui-surface-muted)] text-[color:var(--ssui-text)]"
+            : "border-[color:var(--ssui-border)] text-[color:var(--ssui-text-muted)] hover:bg-[color:var(--ssui-overlay-hover)]", isDisabled && "cursor-not-allowed opacity-50", className), ...props, children: [_jsx(Checkbox, { checked: checked, disabled: isDisabled, name: group.name, onChange: () => group.toggle(value), value: value }), label] }));
+}

package/dist/components/choice-card.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface ChoiceCardGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Form field name shared by the underlying radios. */
+    name?: string;
+    /** Controlled selected value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible label for the radio group. */
+    "aria-label"?: string;
+}
+/**
+ * Radio group rendered as selectable bordered cards. Uses native radio
+ * inputs, so form participation and arrow-key navigation between cards come
+ * from the browser. Children are `ChoiceCard`s.
+ */
+export declare function ChoiceCardGroup({ name, value, defaultValue, onValueChange, className, children, ...props }: ChoiceCardGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface ChoiceCardProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
+    /** Value submitted when this card is selected. */
+    value: string;
+    /** Card title. */
+    title: React.ReactNode;
+    /** Optional supporting copy under the title. */
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+/**
+ * One selectable card inside a `ChoiceCardGroup`: a bordered label wrapping a
+ * native radio plus title and supporting text. The selected card gets the
+ * emphasized border and muted fill.
+ */
+export declare function ChoiceCard({ value, title, description, disabled, className, children, ...props }: ChoiceCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/choice-card.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+const ChoiceCardGroupContext = React.createContext(null);
+/**
+ * Radio group rendered as selectable bordered cards. Uses native radio
+ * inputs, so form participation and arrow-key navigation between cards come
+ * from the browser. Children are `ChoiceCard`s.
+ */
+export function ChoiceCardGroup({ name, value, defaultValue, onValueChange, className, children, ...props }) {
+    const generatedName = React.useId();
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const selected = value ?? uncontrolledValue;
+    const contextValue = React.useMemo(() => ({
+        name: name ?? generatedName,
+        value: selected,
+        setValue: (next) => {
+            if (value === undefined)
+                setUncontrolledValue(next);
+            onValueChange?.(next);
+        },
+    }), [name, generatedName, selected, value, onValueChange]);
+    return (_jsx("div", { role: "radiogroup", className: cn("grid gap-2 md:grid-cols-2", className), ...props, children: _jsx(ChoiceCardGroupContext.Provider, { value: contextValue, children: children }) }));
+}
+/**
+ * One selectable card inside a `ChoiceCardGroup`: a bordered label wrapping a
+ * native radio plus title and supporting text. The selected card gets the
+ * emphasized border and muted fill.
+ */
+export function ChoiceCard({ value, title, description, disabled, className, children, ...props }) {
+    const group = React.useContext(ChoiceCardGroupContext);
+    if (!group) {
+        throw new Error("ChoiceCard must be rendered inside a ChoiceCardGroup");
+    }
+    const selected = group.value === value;
+    return (_jsxs("label", { className: cn("flex cursor-pointer gap-2 rounded-[var(--ssui-radius)] border px-3 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[color:var(--ssui-focus-ring)]", selected
+            ? "border-[color:var(--ssui-border-strong)] bg-[color:var(--ssui-surface-muted)] text-[color:var(--ssui-text)]"
+            : "border-[color:var(--ssui-border)] text-[color:var(--ssui-text-muted)] hover:bg-[color:var(--ssui-overlay-hover)]", disabled && "cursor-not-allowed opacity-50", className), ...props, children: [_jsx("input", { checked: selected, className: "mt-0.5 size-4 shrink-0 accent-current focus-visible:outline-none", disabled: disabled, name: group.name, onChange: () => group.setValue(value), type: "radio", value: value }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm font-medium", children: title }), description ? (_jsx("span", { className: "block text-xs text-[color:var(--ssui-text-subtle)]", children: description })) : null, children] })] }));
+}

package/dist/components/collapsible.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface CollapsibleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Prevents the trigger from toggling the region. */
+    disabled?: boolean;
+}
+/**
+ * Disclosure region: a trigger that shows and hides a block of content, used to
+ * keep secondary detail — an edit form, an advanced section — out of the way
+ * until it is asked for.
+ *
+ * The content stays mounted and is hidden with the `hidden` attribute rather than
+ * unmounted, so `aria-controls` always resolves to a real element and an open
+ * form's in-progress state survives a collapse.
+ */
+export declare function Collapsible({ open, defaultOpen, onOpenChange, disabled, className, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render the consumer's own element (e.g. a `Button`) as the trigger. */
+    asChild?: boolean;
+    /** Children rendered while the region is open, if it differs from the closed label. */
+    openChildren?: React.ReactNode;
+}
+/**
+ * Toggles the enclosing `Collapsible`. Always a real `button` (or the consumer's
+ * element via `asChild`) carrying `aria-expanded`/`aria-controls`, so the
+ * relationship between control and region is announced rather than implied by
+ * position.
+ */
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** The region shown and hidden by `CollapsibleTrigger`. */
+export declare function CollapsibleContent({ className, children, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/collapsible.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+const CollapsibleContext = React.createContext(null);
+function useCollapsibleContext(component) {
+    const context = React.useContext(CollapsibleContext);
+    if (!context) {
+        throw new Error(`${component} must be rendered inside a Collapsible`);
+    }
+    return context;
+}
+/**
+ * Disclosure region: a trigger that shows and hides a block of content, used to
+ * keep secondary detail — an edit form, an advanced section — out of the way
+ * until it is asked for.
+ *
+ * The content stays mounted and is hidden with the `hidden` attribute rather than
+ * unmounted, so `aria-controls` always resolves to a real element and an open
+ * form's in-progress state survives a collapse.
+ */
+export function Collapsible({ open, defaultOpen = false, onOpenChange, disabled, className, children, ...props }) {
+    const contentId = React.useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const isOpen = open ?? uncontrolledOpen;
+    const contextValue = React.useMemo(() => ({
+        open: isOpen,
+        contentId,
+        disabled,
+        setOpen: (next) => {
+            if (open === undefined)
+                setUncontrolledOpen(next);
+            onOpenChange?.(next);
+        },
+    }), [contentId, disabled, isOpen, onOpenChange, open]);
+    return (_jsx("div", { className: cn(className), "data-state": isOpen ? "open" : "closed", ...props, children: _jsx(CollapsibleContext.Provider, { value: contextValue, children: children }) }));
+}
+/**
+ * Toggles the enclosing `Collapsible`. Always a real `button` (or the consumer's
+ * element via `asChild`) carrying `aria-expanded`/`aria-controls`, so the
+ * relationship between control and region is announced rather than implied by
+ * position.
+ */
+export const CollapsibleTrigger = React.forwardRef(({ asChild = false, children, openChildren, onClick, ...props }, ref) => {
+    const { open, setOpen, contentId, disabled } = useCollapsibleContext("CollapsibleTrigger");
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, "aria-controls": contentId, "aria-expanded": open, "data-state": open ? "open" : "closed", disabled: disabled, onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || disabled)
+                return;
+            setOpen(!open);
+        }, type: asChild ? undefined : "button", ...props, children: open && openChildren !== undefined ? openChildren : children }));
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+/** The region shown and hidden by `CollapsibleTrigger`. */
+export function CollapsibleContent({ className, children, ...props }) {
+    const { open, contentId } = useCollapsibleContext("CollapsibleContent");
+    return (_jsx("div", { className: cn(className), "data-state": open ? "open" : "closed", hidden: !open, id: contentId, ...props, children: children }));
+}

package/dist/components/combobox.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Optional trailing content (e.g. a GMT offset) shown right-aligned. */
+    trailing?: React.ReactNode;
+}
+export interface ComboboxProps {
+    /** Full option list; the component filters it against the typed query. */
+    options: ComboboxOption[];
+    /** Selected option value. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Filter predicate; defaults to case-insensitive substring match on the
+     * option label and value with spaces treated as underscores.
+     */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Message shown when no option matches. Defaults to "No matches". */
+    emptyMessage?: React.ReactNode;
+    id?: string;
+    name?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    className?: string;
+}
+/**
+ * Filterable single-select following the WAI-ARIA combobox pattern: a text
+ * input filtering a listbox popup. ArrowUp/ArrowDown move the active-option
+ * highlight with wrap-around and scroll-into-view, Enter commits the active
+ * option, Escape closes, and losing focus closes without committing a
+ * partial value. Selection submits via a hidden input when `name` is set.
+ */
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/combobox.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { useFormFieldProps } from "./form-field.js";
+function defaultFilter(option, query) {
+    const normalized = query.trim().toLowerCase().replaceAll(" ", "_");
+    if (!normalized)
+        return true;
+    return (option.value.toLowerCase().includes(normalized) ||
+        option.label.toLowerCase().replaceAll(" ", "_").includes(normalized));
+}
+/**
+ * Filterable single-select following the WAI-ARIA combobox pattern: a text
+ * input filtering a listbox popup. ArrowUp/ArrowDown move the active-option
+ * highlight with wrap-around and scroll-into-view, Enter commits the active
+ * option, Escape closes, and losing focus closes without committing a
+ * partial value. Selection submits via a hidden input when `name` is set.
+ */
+export const Combobox = React.forwardRef(({ options, value, onValueChange, filter = defaultFilter, placeholder, disabled, emptyMessage = "No matches", className, name, ...ariaProps }, ref) => {
+    const fieldProps = useFormFieldProps(ariaProps);
+    const generatedId = React.useId();
+    const id = fieldProps.id ?? generatedId;
+    const listboxId = `${id}-listbox`;
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState(null);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const listRef = React.useRef(null);
+    const selectedOption = options.find((option) => option.value === value);
+    const filtered = query === null
+        ? options
+        : options.filter((option) => filter(option, query));
+    const inputValue = query ?? selectedOption?.label ?? "";
+    const activeOption = activeIndex >= 0 ? filtered[activeIndex] : undefined;
+    function openList() {
+        setOpen(true);
+        setActiveIndex(-1);
+    }
+    function close() {
+        setOpen(false);
+        setQuery(null);
+        setActiveIndex(-1);
+    }
+    function commit(option) {
+        onValueChange?.(option.value);
+        close();
+    }
+    function moveActive(delta) {
+        if (filtered.length === 0)
+            return;
+        const next = activeIndex < 0
+            ? delta === 1
+                ? 0
+                : filtered.length - 1
+            : (activeIndex + delta + filtered.length) % filtered.length;
+        setActiveIndex(next);
+        listRef.current
+            ?.querySelector(`[data-index="${next}"]`)
+            ?.scrollIntoView({ block: "nearest" });
+    }
+    function handleKeyDown(event) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!open) {
+                openList();
+                return;
+            }
+            moveActive(event.key === "ArrowDown" ? 1 : -1);
+            return;
+        }
+        if (event.key === "Enter") {
+            if (open && activeOption) {
+                event.preventDefault();
+                commit(activeOption);
+            }
+            return;
+        }
+        if (event.key === "Escape") {
+            if (open) {
+                event.stopPropagation();
+                close();
+            }
+        }
+    }
+    return (_jsxs("div", { className: cn("relative", className), onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                close();
+            }
+        }, children: [_jsx("input", { ...fieldProps, ref: ref, id: id, role: "combobox", type: "text", "aria-autocomplete": "list", "aria-controls": listboxId, "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeOption ? `${id}-option-${activeOption.value}` : undefined, autoComplete: "off", className: "flex h-10 w-full rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] py-2 pl-3 pr-9 text-sm text-[color:var(--ssui-text)] shadow-sm transition-colors placeholder:text-[color:var(--ssui-text-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:cursor-not-allowed disabled:bg-[color:var(--ssui-surface-muted)] disabled:opacity-70", disabled: disabled, onChange: (event) => {
+                    setQuery(event.target.value);
+                    setOpen(true);
+                    setActiveIndex(-1);
+                }, onFocus: openList, onKeyDown: handleKeyDown, placeholder: placeholder, value: inputValue }), _jsx("button", { "aria-label": "Show options", className: "absolute right-1 top-1 grid size-8 place-items-center rounded-[var(--ssui-radius-sm)] text-[color:var(--ssui-text-subtle)] transition-colors hover:bg-[color:var(--ssui-overlay-hover)] hover:text-[color:var(--ssui-text)] disabled:pointer-events-none disabled:opacity-50", disabled: disabled, onClick: () => {
+                    setQuery(null);
+                    openList();
+                    document.getElementById(id)?.focus();
+                }, tabIndex: -1, type: "button", children: _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }) }), name ? _jsx("input", { name: name, type: "hidden", value: value ?? "" }) : null, open ? (_jsx("div", { className: "absolute z-50 mt-1 max-h-64 w-full overflow-y-auto rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-1 shadow-[var(--ssui-shadow-md)]", id: listboxId, ref: listRef, role: "listbox", children: filtered.length > 0 ? (filtered.map((option, index) => (_jsxs("button", { "aria-selected": option.value === value, className: cn("flex w-full items-center justify-between gap-3 rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-left text-sm transition-colors", index === activeIndex &&
+                        "bg-[color:var(--ssui-overlay-hover)]", option.value === value
+                        ? "bg-[color:var(--ssui-surface-muted)] text-[color:var(--ssui-text)]"
+                        : "text-[color:var(--ssui-text-muted)] hover:bg-[color:var(--ssui-overlay-hover)]"), "data-index": index, id: `${id}-option-${option.value}`, onClick: () => commit(option), onMouseDown: (event) => event.preventDefault(), onMouseMove: () => setActiveIndex(index), role: "option", tabIndex: -1, type: "button", children: [_jsx("span", { className: "truncate", children: option.label }), option.trailing !== undefined ? (_jsx("span", { className: "shrink-0 font-mono text-xs text-[color:var(--ssui-text-subtle)]", children: option.trailing })) : null] }, option.value)))) : (_jsx("div", { className: "px-2 py-1.5 text-sm text-[color:var(--ssui-text-subtle)]", children: emptyMessage })) })) : null] }));
+});
+Combobox.displayName = "Combobox";