@forwardreach/saas-ui 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # Changelog
 
+## 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/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/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";

package/dist/components/form-field.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+export interface FormFieldContextValue {
+    /** Id the participating control should adopt. */
+    id: string;
+    /** Space-separated ids of the description/error elements, if any. */
+    describedBy?: string;
+    /** True when the field is in an error state. */
+    invalid: boolean;
+}
+/**
+ * Read the enclosing `FormField` context, if any. Package controls use this
+ * to adopt the generated `id`/`aria-describedby`/`aria-invalid` wiring;
+ * standalone controls (no enclosing field) get `null` and render unchanged.
+ */
+export declare function useFormField(): FormFieldContextValue | null;
+/**
+ * Merge `FormField` context wiring into a control's own props. The field owns
+ * the control's `id` so the label and control stay associated (customize it via
+ * `FormField`'s `htmlFor`, not the control). An explicit `aria-describedby` on
+ * the control is concatenated with — not replaced by — the field's
+ * description/error ids so error announcement is never dropped. An explicit
+ * `aria-invalid` still wins.
+ */
+export declare function useFormFieldProps<T extends {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+}>(props: T): T;
+export interface FormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Field label. */
+    label: React.ReactNode;
+    /** Optional supporting copy shown under the label. */
+    description?: React.ReactNode;
+    /** Error message; when set the field is marked invalid. */
+    error?: React.ReactNode;
+    /** Explicit control id; defaults to a generated id. */
+    htmlFor?: string;
+    /** The control. Package controls pick up the field wiring automatically. */
+    children: React.ReactNode;
+}
+/**
+ * Label + description + control + error wrapper with standardized typography
+ * and accessibility wiring. Generates an id shared between the label's
+ * `htmlFor` and the control, and threads `aria-describedby`/`aria-invalid`
+ * to package controls (`Input`, `Textarea`, `Select`, `Combobox`) via
+ * context. Non-package controls can adopt the same id manually via `htmlFor`.
+ */
+export declare function FormField({ label, description, error, htmlFor, className, children, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-field.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+const FormFieldContext = React.createContext(null);
+/**
+ * Read the enclosing `FormField` context, if any. Package controls use this
+ * to adopt the generated `id`/`aria-describedby`/`aria-invalid` wiring;
+ * standalone controls (no enclosing field) get `null` and render unchanged.
+ */
+export function useFormField() {
+    return React.useContext(FormFieldContext);
+}
+/**
+ * Merge `FormField` context wiring into a control's own props. The field owns
+ * the control's `id` so the label and control stay associated (customize it via
+ * `FormField`'s `htmlFor`, not the control). An explicit `aria-describedby` on
+ * the control is concatenated with — not replaced by — the field's
+ * description/error ids so error announcement is never dropped. An explicit
+ * `aria-invalid` still wins.
+ */
+export function useFormFieldProps(props) {
+    const field = useFormField();
+    if (!field)
+        return props;
+    const describedBy = [props["aria-describedby"], field.describedBy].filter(Boolean).join(" ") ||
+        undefined;
+    return {
+        ...props,
+        id: field.id,
+        "aria-describedby": describedBy,
+        "aria-invalid": props["aria-invalid"] ?? (field.invalid || undefined),
+    };
+}
+/**
+ * Label + description + control + error wrapper with standardized typography
+ * and accessibility wiring. Generates an id shared between the label's
+ * `htmlFor` and the control, and threads `aria-describedby`/`aria-invalid`
+ * to package controls (`Input`, `Textarea`, `Select`, `Combobox`) via
+ * context. Non-package controls can adopt the same id manually via `htmlFor`.
+ */
+export function FormField({ label, description, error, htmlFor, className, children, ...props }) {
+    const generatedId = React.useId();
+    const id = htmlFor ?? generatedId;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+    const describedBy = [description ? descriptionId : null, error ? errorId : null]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const contextValue = React.useMemo(() => ({ id, describedBy, invalid: Boolean(error) }), [id, describedBy, error]);
+    return (_jsxs("div", { className: cn("space-y-1.5", className), ...props, children: [_jsx("label", { className: "block text-sm font-medium text-[color:var(--ssui-text)]", htmlFor: id, children: label }), description ? (_jsx("p", { className: "text-xs text-[color:var(--ssui-text-muted)]", id: descriptionId, children: description })) : null, _jsx(FormFieldContext.Provider, { value: contextValue, children: children }), error ? (_jsx("p", { className: "text-xs text-[color:var(--ssui-destructive)]", id: errorId, children: error })) : null] }));
+}

package/dist/components/index.d.ts

@@ -1,9 +1,13 @@
+export * from "./account-menu.js";
 export * from "./audit-log.js";
 export * from "./avatar.js";
 export * from "./badge.js";
 export * from "./brand-icons.js";
 export * from "./button.js";
+export * from "./choice-card.js";
+export * from "./combobox.js";
 export * from "./confirm-dialog.js";
+export * from "./form-field.js";
 export * from "./copy-field.js";
 export * from "./dialog.js";
 export * from "./dropdown-menu.js";
@@ -17,14 +21,21 @@ export * from "./list-shell.js";
 export * from "./login.js";
 export * from "./overflow-menu.js";
 export * from "./page-header.js";
+export * from "./rail-toggle.js";
 export * from "./request-access.js";
 export * from "./scroll-area.js";
 export * from "./search-input.js";
+export * from "./select.js";
 export * from "./separator.js";
+export * from "./settings-layout.js";
+export * from "./settings-nav.js";
 export * from "./settings-section.js";
 export * from "./skeleton.js";
 export * from "./status-pill.js";
+export * from "./switch.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
+export * from "./time-zone-field.js";
 export * from "./toolbar.js";
 export * from "./tooltip.js";
+export * from "./workspace-switcher.js";

package/dist/components/index.js

@@ -1,9 +1,13 @@
+export * from "./account-menu.js";
 export * from "./audit-log.js";
 export * from "./avatar.js";
 export * from "./badge.js";
 export * from "./brand-icons.js";
 export * from "./button.js";
+export * from "./choice-card.js";
+export * from "./combobox.js";
 export * from "./confirm-dialog.js";
+export * from "./form-field.js";
 export * from "./copy-field.js";
 export * from "./dialog.js";
 export * from "./dropdown-menu.js";
@@ -17,14 +21,21 @@ export * from "./list-shell.js";
 export * from "./login.js";
 export * from "./overflow-menu.js";
 export * from "./page-header.js";
+export * from "./rail-toggle.js";
 export * from "./request-access.js";
 export * from "./scroll-area.js";
 export * from "./search-input.js";
+export * from "./select.js";
 export * from "./separator.js";
+export * from "./settings-layout.js";
+export * from "./settings-nav.js";
 export * from "./settings-section.js";
 export * from "./skeleton.js";
 export * from "./status-pill.js";
+export * from "./switch.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
+export * from "./time-zone-field.js";
 export * from "./toolbar.js";
 export * from "./tooltip.js";
+export * from "./workspace-switcher.js";

package/dist/components/input.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils/cn.js";
-export const Input = React.forwardRef(({ className, type = "text", ...props }, ref) => (_jsx("input", { ref: ref, type: type, className: cn("flex h-10 w-full rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-3 py-2 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", className), ...props })));
+import { useFormFieldProps } from "./form-field.js";
+export const Input = React.forwardRef(({ className, type = "text", ...props }, ref) => (_jsx("input", { ref: ref, type: type, className: cn("flex h-10 w-full rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-3 py-2 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", className), ...useFormFieldProps(props) })));
 Input.displayName = "Input";

package/dist/components/rail-toggle.d.ts

@@ -0,0 +1,19 @@
+export interface RailToggleProps {
+    /** Current rail state; the toggle renders the action that would change it. */
+    collapsed: boolean;
+    onToggle: () => void;
+    /** Accessible label + tooltip when the rail is expanded. Defaults to "Collapse sidebar". */
+    collapseLabel?: string;
+    /** Accessible label + tooltip when the rail is collapsed. Defaults to "Expand sidebar". */
+    expandLabel?: string;
+    /** Optional shortcut rendered muted next to the tooltip label (e.g. "⌘\\"). */
+    shortcutHint?: string;
+    className?: string;
+}
+/**
+ * Icon-only ghost toggle for collapsing/expanding the app-shell rail, meant to
+ * sit in the rail header beside the `WorkspaceSwitcher`. Presentational on
+ * purpose: collapse state, persistence, and any keyboard shortcut binding are
+ * consumer-owned — this only reflects state and fires `onToggle`.
+ */
+export declare function RailToggle({ collapsed, onToggle, collapseLabel, expandLabel, shortcutHint, className, }: RailToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/rail-toggle.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+/**
+ * Icon-only ghost toggle for collapsing/expanding the app-shell rail, meant to
+ * sit in the rail header beside the `WorkspaceSwitcher`. Presentational on
+ * purpose: collapse state, persistence, and any keyboard shortcut binding are
+ * consumer-owned — this only reflects state and fires `onToggle`.
+ */
+export function RailToggle({ collapsed, onToggle, collapseLabel = "Collapse sidebar", expandLabel = "Expand sidebar", shortcutHint, className, }) {
+    const label = collapsed ? expandLabel : collapseLabel;
+    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
+    return (_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-expanded": !collapsed, "aria-label": label, onClick: onToggle, className: cn("flex size-8 shrink-0 items-center justify-center rounded-[var(--ssui-radius-sm)] text-[color:var(--ssui-text-subtle)] outline-none transition-colors hover:bg-[color:var(--ssui-overlay-hover)] hover:text-[color:var(--ssui-text-muted)] focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)]", className), children: _jsx(Icon, { className: "size-4" }) }) }), _jsxs(TooltipContent, { side: collapsed ? "right" : "bottom", children: [label, shortcutHint ? (_jsx("span", { className: "ms-1.5 text-[color:var(--ssui-text-subtle)]", children: shortcutHint })) : null] })] }) }));
+}

package/dist/components/select.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+}
+/**
+ * Styled native `<select>` matching the shared `Input` look, with a trailing
+ * chevron. Native on purpose: correct mobile behavior and form participation
+ * with zero positioning code. Participates in `FormField` wiring.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select.js

@@ -0,0 +1,12 @@
+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";
+/**
+ * Styled native `<select>` matching the shared `Input` look, with a trailing
+ * chevron. Native on purpose: correct mobile behavior and form participation
+ * with zero positioning code. Participates in `FormField` wiring.
+ */
+export const Select = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs("div", { className: cn("relative", className), children: [_jsx("select", { ref: ref, className: "flex h-10 w-full cursor-pointer appearance-none 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 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", ...useFormFieldProps(props), children: children }), _jsx(ChevronDown, { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[color:var(--ssui-text-subtle)]" })] })));
+Select.displayName = "Select";

package/dist/components/settings-layout.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface SettingsLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Settings navigation, typically a `SettingsNav`. */
+    nav: React.ReactNode;
+}
+/**
+ * Centered, max-width settings shell: nav as a left sidebar beside the
+ * content on `md+`, stacked above full-width content on small screens.
+ */
+export declare function SettingsLayout({ nav, className, children, ...props }: SettingsLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings-layout.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+/**
+ * Centered, max-width settings shell: nav as a left sidebar beside the
+ * content on `md+`, stacked above full-width content on small screens.
+ */
+export function SettingsLayout({ nav, className, children, ...props }) {
+    return (_jsxs("div", { className: cn("mx-auto flex max-w-6xl flex-col gap-6 px-4 py-5 md:flex-row md:px-8 md:py-8", className), ...props, children: [nav, _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+}

package/dist/components/settings-nav.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export interface SettingsNavItem {
+    href: string;
+    label: React.ReactNode;
+    /** Optional leading icon (e.g. a lucide icon element). */
+    icon?: React.ReactNode;
+}
+export interface SettingsNavGroup {
+    label: React.ReactNode;
+    items: SettingsNavItem[];
+}
+/**
+ * Minimal contract for an injected link component: it must accept `href`,
+ * `className`, `aria-current`, and children. Next.js `Link` satisfies this.
+ */
+export type SettingsNavLinkComponent = React.ElementType<{
+    href: string;
+    className?: string;
+    "aria-current"?: "page";
+    children?: React.ReactNode;
+}>;
+export interface SettingsNavProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+    /** Navigation groups, each a labeled set of items. */
+    groups: SettingsNavGroup[];
+    /** Href of the active item. Ignored when `isActive` is provided. */
+    activeHref?: string;
+    /** Predicate for active state; use for nested-route or alias matching. */
+    isActive?: (href: string) => boolean;
+    /**
+     * Component used to render item links (e.g. Next.js `Link`).
+     * Defaults to a plain anchor.
+     */
+    linkComponent?: SettingsNavLinkComponent;
+    /** Heading shown above the groups. Defaults to "Settings". */
+    heading?: React.ReactNode;
+    /** Accessible label for the nav landmark. Defaults to "Settings". */
+    "aria-label"?: string;
+}
+/**
+ * Grouped settings navigation: section-labeled link groups with icons and
+ * active highlighting. Renders as a sidebar column on `md+` and collapses to
+ * a horizontally scrollable row on small screens (pair with `SettingsLayout`).
+ * Router-agnostic: active state comes from `activeHref`/`isActive` and links
+ * render through `linkComponent`.
+ */
+export declare function SettingsNav({ groups, activeHref, isActive, linkComponent, heading, className, "aria-label": ariaLabel, ...props }: SettingsNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings-nav.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SlidersHorizontal } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+/**
+ * Grouped settings navigation: section-labeled link groups with icons and
+ * active highlighting. Renders as a sidebar column on `md+` and collapses to
+ * a horizontally scrollable row on small screens (pair with `SettingsLayout`).
+ * Router-agnostic: active state comes from `activeHref`/`isActive` and links
+ * render through `linkComponent`.
+ */
+export function SettingsNav({ groups, activeHref, isActive, linkComponent, heading = "Settings", className, "aria-label": ariaLabel = "Settings", ...props }) {
+    const LinkComponent = linkComponent ?? "a";
+    const activeFor = isActive ?? ((href) => href === activeHref);
+    return (_jsxs("aside", { className: cn("space-y-3 md:w-56 md:shrink-0", className), ...props, children: [heading ? (_jsxs("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase text-[color:var(--ssui-text-subtle)]", children: [_jsx(SlidersHorizontal, { "aria-hidden": "true", className: "size-3.5" }), heading] })) : null, _jsx("nav", { "aria-label": ariaLabel, className: "flex gap-4 overflow-x-auto pb-1 md:flex-col md:gap-5 md:overflow-visible md:pb-0", children: groups.map((group, groupIndex) => (_jsxs("div", { className: "min-w-max md:min-w-0", children: [_jsx("div", { className: "mb-1.5 px-2.5 text-[0.68rem] font-semibold uppercase text-[color:var(--ssui-text-subtle)]", children: group.label }), _jsx("div", { className: "flex gap-1 md:flex-col", children: group.items.map((item) => {
+                                const active = activeFor(item.href);
+                                return (_jsxs(LinkComponent, { href: item.href, "aria-current": active ? "page" : undefined, className: cn("flex shrink-0 items-center gap-2 rounded-[var(--ssui-radius)] px-2.5 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)]", active
+                                        ? "bg-[color:var(--ssui-surface-muted)] text-[color:var(--ssui-text)]"
+                                        : "text-[color:var(--ssui-text-muted)] hover:bg-[color:var(--ssui-overlay-hover)] hover:text-[color:var(--ssui-text)]"), children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 [&_svg]:size-4", children: item.icon })) : null, item.label] }, item.href));
+                            }) })] }, groupIndex))) })] }));
+}

package/dist/components/switch.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "type" | "role" | "aria-checked"> {
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Uncontrolled initial state. */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** When set, submits the value under this name via a hidden checkbox. */
+    name?: string;
+    /** Submitted value when checked. Defaults to "on". */
+    value?: string;
+}
+/**
+ * Accessible boolean toggle: a `role="switch"` button with a track and thumb.
+ * Space/Enter toggle (native button activation), `aria-checked` reflects
+ * state. Track colors come from `--ssui-switch-track` /
+ * `--ssui-switch-track-checked` tokens with neutral fallbacks. Optional form
+ * participation via a hidden checkbox when `name` is provided.
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/switch.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { useFormFieldProps } from "./form-field.js";
+/**
+ * Accessible boolean toggle: a `role="switch"` button with a track and thumb.
+ * Space/Enter toggle (native button activation), `aria-checked` reflects
+ * state. Track colors come from `--ssui-switch-track` /
+ * `--ssui-switch-track-checked` tokens with neutral fallbacks. Optional form
+ * participation via a hidden checkbox when `name` is provided.
+ */
+export const Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, name, value = "on", className, disabled, onClick, ...props }, ref) => {
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+    const isChecked = checked ?? uncontrolledChecked;
+    function handleClick(event) {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (checked === undefined)
+            setUncontrolledChecked(!isChecked);
+        onCheckedChange?.(!isChecked);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": isChecked, "data-state": isChecked ? "checked" : "unchecked", disabled: disabled, onClick: handleClick, className: cn("inline-flex h-6 w-10 shrink-0 items-center rounded-full border border-transparent p-0.5 transition-colors 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", isChecked
+                    ? "bg-[color:var(--ssui-switch-track-checked,var(--ssui-primary))]"
+                    : "bg-[color:var(--ssui-switch-track,var(--ssui-border))]", className), ...useFormFieldProps(props), children: _jsx("span", { "aria-hidden": "true", className: cn("block size-5 rounded-full bg-[color:var(--ssui-switch-thumb,#ffffff)] shadow-sm transition-transform", isChecked ? "translate-x-4" : "translate-x-0") }) }), name ? (_jsx("input", { type: "checkbox", "aria-hidden": "true", tabIndex: -1, className: "sr-only", checked: isChecked, disabled: disabled, name: name, value: value, readOnly: true })) : null] }));
+});
+Switch.displayName = "Switch";

package/dist/components/textarea.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils/cn.js";
-export const Textarea = React.forwardRef(({ className, rows = 4, ...props }, ref) => (_jsx("textarea", { ref: ref, rows: rows, className: cn("flex min-h-24 w-full resize-y rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-3 py-2 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", className), ...props })));
+import { useFormFieldProps } from "./form-field.js";
+export const Textarea = React.forwardRef(({ className, rows = 4, ...props }, ref) => (_jsx("textarea", { ref: ref, rows: rows, className: cn("flex min-h-24 w-full resize-y rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-3 py-2 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", className), ...useFormFieldProps(props) })));
 Textarea.displayName = "Textarea";

package/dist/components/time-zone-field.d.ts

@@ -0,0 +1,30 @@
+import type { TimeZoneOption } from "../utils/time-zones.js";
+export type TimeZoneMode = "auto" | "fixed";
+export interface TimeZoneFieldProps {
+    /** Initial mode. Defaults to "auto". */
+    defaultMode?: TimeZoneMode;
+    /** Initial fixed zone. Defaults to the detected browser zone. */
+    defaultTimeZone?: string;
+    /** Notified whenever mode or zone changes. */
+    onChange?: (state: {
+        mode: TimeZoneMode;
+        timeZone: string;
+    }) => void;
+    /**
+     * Zone options to render; defaults to `timeZoneOptions()` computed
+     * client-side. Provide to SSR the list or trim it.
+     */
+    options?: TimeZoneOption[];
+    /** Accessible label for the mode choice. Defaults to "Time zone mode". */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Composite time-zone preference control: an auto/fixed mode choice rendered
+ * as `ChoiceCard`s (auto shows the detected browser zone inline) plus a
+ * filterable zone `Combobox` shown only in fixed mode. Search matches zone
+ * names with spaces or underscores and offset text ("GMT+09"). Submits
+ * through hidden inputs — `timeZoneMode`, `timeZone`, `browserTimeZone` —
+ * for server-action form handling.
+ */
+export declare function TimeZoneField({ defaultMode, defaultTimeZone, onChange, options, className, "aria-label": ariaLabel, }: TimeZoneFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/time-zone-field.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { detectBrowserTimeZone, formatTimeZoneOffset, timeZoneOptions, } from "../utils/time-zones.js";
+import { ChoiceCard, ChoiceCardGroup } from "./choice-card.js";
+import { Combobox } from "./combobox.js";
+function matchesZoneQuery(option, query) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return true;
+    const underscored = normalized.replaceAll(" ", "_");
+    const haystacks = [
+        option.value.toLowerCase(),
+        option.label.toLowerCase(),
+        typeof option.trailing === "string" ? option.trailing.toLowerCase() : "",
+    ];
+    return haystacks.some((haystack) => haystack.includes(normalized) || haystack.includes(underscored));
+}
+/**
+ * Composite time-zone preference control: an auto/fixed mode choice rendered
+ * as `ChoiceCard`s (auto shows the detected browser zone inline) plus a
+ * filterable zone `Combobox` shown only in fixed mode. Search matches zone
+ * names with spaces or underscores and offset text ("GMT+09"). Submits
+ * through hidden inputs — `timeZoneMode`, `timeZone`, `browserTimeZone` —
+ * for server-action form handling.
+ */
+export function TimeZoneField({ defaultMode = "auto", defaultTimeZone, onChange, options, className, "aria-label": ariaLabel = "Time zone mode", }) {
+    const [mode, setMode] = React.useState(defaultMode);
+    const [browserTimeZone, setBrowserTimeZone] = React.useState("UTC");
+    const [fixedTimeZone, setFixedTimeZone] = React.useState(defaultTimeZone ?? "");
+    // Detection runs in an effect so server and first client render agree.
+    React.useEffect(() => {
+        const detected = detectBrowserTimeZone();
+        setBrowserTimeZone(detected);
+        setFixedTimeZone((current) => current || detected);
+    }, []);
+    // Building the full IANA list constructs one `Intl.DateTimeFormat` per zone
+    // (~400 of them, tens of ms). The combobox only renders in fixed mode, so
+    // defer the build until fixed is first selected, then cache it for the
+    // component's lifetime. Consumer-provided `options` skip the build entirely.
+    const builtOptionsRef = React.useRef(null);
+    const comboboxOptions = React.useMemo(() => {
+        if (options) {
+            return options.map((zone) => ({
+                value: zone.value,
+                label: zone.label,
+                trailing: zone.offset,
+            }));
+        }
+        if (mode !== "fixed")
+            return [];
+        if (!builtOptionsRef.current) {
+            builtOptionsRef.current = timeZoneOptions().map((zone) => ({
+                value: zone.value,
+                label: zone.label,
+                trailing: zone.offset,
+            }));
+        }
+        return builtOptionsRef.current;
+    }, [options, mode]);
+    function update(next) {
+        const nextMode = next.mode ?? mode;
+        const nextZone = next.timeZone ?? fixedTimeZone;
+        if (next.mode !== undefined)
+            setMode(next.mode);
+        if (next.timeZone !== undefined)
+            setFixedTimeZone(next.timeZone);
+        onChange?.({ mode: nextMode, timeZone: nextZone });
+    }
+    return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("input", { name: "timeZoneMode", type: "hidden", value: mode }), _jsx("input", { name: "timeZone", type: "hidden", value: fixedTimeZone }), _jsx("input", { name: "browserTimeZone", type: "hidden", value: browserTimeZone }), _jsxs(ChoiceCardGroup, { "aria-label": ariaLabel, onValueChange: (value) => update({ mode: value }), value: mode, children: [_jsx(ChoiceCard, { description: _jsxs(_Fragment, { children: ["Use the browser time zone", _jsxs("span", { className: "mt-0.5 block font-mono text-[color:var(--ssui-text-muted)]", children: [browserTimeZone, " (", formatTimeZoneOffset(browserTimeZone), ")"] })] }), title: "Auto", value: "auto" }), _jsx(ChoiceCard, { description: "Always use one time zone", title: "Fixed", value: "fixed" })] }), mode === "fixed" ? (_jsx(Combobox, { "aria-label": "Fixed time zone", emptyMessage: "No matching time zones", filter: matchesZoneQuery, onValueChange: (value) => update({ timeZone: value }), options: comboboxOptions, placeholder: "America/New_York", value: fixedTimeZone })) : null] }));
+}

package/dist/components/workspace-switcher.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface WorkspaceSwitcherWorkspace {
+    id: string;
+    name: string;
+}
+export interface WorkspaceSwitcherProps {
+    workspaces: ReadonlyArray<WorkspaceSwitcherWorkspace>;
+    activeWorkspaceId: string;
+    /** Called with the selected workspace id; never fired for the active row. */
+    onSelect: (id: string) => void | Promise<void>;
+    /**
+     * Brand badge rendered at the left of the trigger (e.g. a product tile).
+     * Defaults to a primary-colored tile with the active workspace's initials.
+     */
+    badge?: React.ReactNode;
+    /** Icon-only rail state: badge-only trigger with a name tooltip, menu opens right. */
+    collapsed?: boolean;
+    /** Renders a separated "New workspace" item when provided. */
+    onCreateWorkspace?: () => void;
+    /** Defaults to "New workspace". */
+    createWorkspaceLabel?: string;
+    /** Open the menu by default (uncontrolled). Mainly useful in tests. */
+    defaultOpen?: boolean;
+    /** Extra classes for the trigger. */
+    className?: string;
+}
+/**
+ * Top-left workspace context menu for the app shell: a trigger showing the
+ * brand badge and active workspace name, opening a list of the user's
+ * workspaces with the active one checked. Identity/session actions
+ * deliberately do not belong here; that's the bottom-left `AccountMenu`.
+ */
+export declare function WorkspaceSwitcher({ workspaces, activeWorkspaceId, onSelect, badge, collapsed, onCreateWorkspace, createWorkspaceLabel, defaultOpen, className, }: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/workspace-switcher.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronDown, Plus } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { getInitials } from "../utils/initials.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+/**
+ * Top-left workspace context menu for the app shell: a trigger showing the
+ * brand badge and active workspace name, opening a list of the user's
+ * workspaces with the active one checked. Identity/session actions
+ * deliberately do not belong here; that's the bottom-left `AccountMenu`.
+ */
+export function WorkspaceSwitcher({ workspaces, activeWorkspaceId, onSelect, badge, collapsed = false, onCreateWorkspace, createWorkspaceLabel = "New workspace", defaultOpen, className, }) {
+    const active = workspaces.find((workspace) => workspace.id === activeWorkspaceId);
+    const activeName = active?.name ?? "";
+    // 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 ? activeName : `Switch workspace (current: ${activeName})`, 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 = badge-only: the label/chevron are omitted from the
+                                    // layout entirely (not just faded) so the trigger truly fits an
+                                    // icon rail instead of relying on horizontal clipping.
+                                    collapsed && "justify-center px-0", className), children: [_jsx("span", { className: "flex shrink-0 items-center justify-center", children: badge ?? (_jsx("span", { className: "flex size-7 items-center justify-center rounded-[var(--ssui-radius-sm)] bg-[color:var(--ssui-primary)] text-xs font-semibold text-[color:var(--ssui-primary-foreground)]", children: getInitials(activeName) })) }), !collapsed && (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-medium leading-tight text-[color:var(--ssui-text)]", children: activeName }), _jsx(ChevronDown, { 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: activeName }) : null] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-60 min-w-[var(--radix-dropdown-menu-trigger-width)]", side: collapsed ? "right" : "bottom", sideOffset: 10, children: [_jsx(DropdownMenuPrimitive.RadioGroup, { value: activeWorkspaceId, onValueChange: (id) => {
+                            if (id !== activeWorkspaceId)
+                                void onSelect(id);
+                        }, children: workspaces.map((workspace) => {
+                            const isActive = workspace.id === activeWorkspaceId;
+                            return (_jsxs(DropdownMenuPrimitive.RadioItem, { value: workspace.id, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm text-[color:var(--ssui-text)] outline-none transition-colors focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)]", isActive && "font-medium"), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: workspace.name }), isActive ? (_jsx(Check, { className: "size-4 shrink-0 text-[color:var(--ssui-primary)]" })) : null] }, workspace.id));
+                        }) }), onCreateWorkspace ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => onCreateWorkspace(), children: [_jsx(Plus, { className: "size-4 text-[color:var(--ssui-text-muted)]" }), createWorkspaceLabel] })] })) : null] })] }));
+}

package/dist/styles/index.css

@@ -20,6 +20,9 @@
   --ssui-destructive-hover: #b91c1c;
   --ssui-destructive-foreground: #ffffff;
   --ssui-focus-ring: #2563eb;
+  --ssui-switch-track: var(--ssui-border);
+  --ssui-switch-track-checked: var(--ssui-primary);
+  --ssui-switch-thumb: #ffffff;
   --ssui-radius-sm: 0.25rem;
   --ssui-radius: 0.375rem;
   --ssui-radius-lg: 0.5rem;

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./cn.js";
 export * from "./initials.js";
 export * from "./time.js";
+export * from "./time-zones.js";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
 export * from "./cn.js";
 export * from "./initials.js";
 export * from "./time.js";
+export * from "./time-zones.js";

package/dist/utils/time-zones.d.ts

@@ -0,0 +1,26 @@
+export interface TimeZoneOption {
+    /** IANA zone id, e.g. "America/New_York". */
+    value: string;
+    /** Display label, e.g. "America/New_York". */
+    label: string;
+    /** Current offset label, e.g. "GMT-04:00". */
+    offset: string;
+    /** Offset in minutes, for sorting. */
+    offsetMinutes: number;
+}
+/**
+ * Zones surfaced ahead of the full IANA list — the major business hubs both
+ * consuming products' audiences are most likely to pick.
+ */
+export declare const COMMON_TIME_ZONES: string[];
+/** Detect the browser's IANA time zone, falling back to UTC. */
+export declare function detectBrowserTimeZone(): string;
+/** Format a zone's current UTC offset as "GMT±HH:MM". Unknown zones map to GMT+00:00. */
+export declare function formatTimeZoneOffset(timeZone: string, date?: Date): string;
+/**
+ * Build the ordered, offset-annotated zone option list `TimeZoneField`
+ * renders: common zones first, then every zone the runtime supports, each
+ * sorted by current offset then name. Offsets are computed for `date`
+ * (defaults to now), so DST is reflected.
+ */
+export declare function timeZoneOptions(date?: Date): TimeZoneOption[];

package/dist/utils/time-zones.js

@@ -0,0 +1,79 @@
+/**
+ * Zones surfaced ahead of the full IANA list — the major business hubs both
+ * consuming products' audiences are most likely to pick.
+ */
+export const COMMON_TIME_ZONES = [
+    "UTC",
+    "America/New_York",
+    "America/Chicago",
+    "America/Denver",
+    "America/Los_Angeles",
+    "America/Toronto",
+    "America/Vancouver",
+    "Europe/London",
+    "Europe/Paris",
+    "Europe/Berlin",
+    "Asia/Kolkata",
+    "Asia/Singapore",
+    "Asia/Tokyo",
+    "Australia/Sydney",
+];
+/** Detect the browser's IANA time zone, falling back to UTC. */
+export function detectBrowserTimeZone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    }
+    catch {
+        return "UTC";
+    }
+}
+/** Format a zone's current UTC offset as "GMT±HH:MM". Unknown zones map to GMT+00:00. */
+export function formatTimeZoneOffset(timeZone, date = new Date()) {
+    try {
+        const parts = new Intl.DateTimeFormat("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone,
+            timeZoneName: "longOffset",
+        }).formatToParts(date);
+        const offset = parts.find((part) => part.type === "timeZoneName")?.value;
+        return offset && offset !== "GMT" ? offset : "GMT+00:00";
+    }
+    catch {
+        return "GMT+00:00";
+    }
+}
+function offsetMinutesFromLabel(offset) {
+    const match = offset.match(/^GMT([+-])(\d{2}):(\d{2})$/);
+    if (!match)
+        return 0;
+    const minutes = Number(match[2]) * 60 + Number(match[3]);
+    return match[1] === "-" ? -minutes : minutes;
+}
+function toOption(value, date) {
+    const offset = formatTimeZoneOffset(value, date);
+    return {
+        value,
+        label: value,
+        offset,
+        offsetMinutes: offsetMinutesFromLabel(offset),
+    };
+}
+/**
+ * Build the ordered, offset-annotated zone option list `TimeZoneField`
+ * renders: common zones first, then every zone the runtime supports, each
+ * sorted by current offset then name. Offsets are computed for `date`
+ * (defaults to now), so DST is reflected.
+ */
+export function timeZoneOptions(date = new Date()) {
+    const intl = Intl;
+    const allZones = intl.supportedValuesOf?.("timeZone") ?? [];
+    const common = new Set(COMMON_TIME_ZONES);
+    const sortByOffsetThenName = (a, b) => a.offsetMinutes - b.offsetMinutes || a.value.localeCompare(b.value);
+    const commonOptions = COMMON_TIME_ZONES.map((zone) => toOption(zone, date)).sort(sortByOffsetThenName);
+    const rest = allZones
+        .filter((zone) => !common.has(zone))
+        .map((zone) => toOption(zone, date))
+        .sort(sortByOffsetThenName);
+    return [...commonOptions, ...rest];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forwardreach/saas-ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Brand-neutral React UI primitives and SaaS app patterns for ForwardReach-owned business applications.",
   "type": "module",
   "private": false,