@forwardreach/saas-ui 0.4.0 → 0.7.0

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/overflow-menu.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { type IconButtonProps } from "./button.js";
+export interface OverflowMenuProps {
+    /** Accessible label and tooltip for the trigger button. Defaults to "More actions". */
+    label?: string;
+    /** Which edge of the trigger the panel aligns to. Defaults to "end". */
+    align?: "start" | "center" | "end";
+    /** Trigger icon-button size. Defaults to "icon-sm". */
+    size?: IconButtonProps["size"];
+    /** Trigger icon-button visual variant. Defaults to "ghost". */
+    variant?: IconButtonProps["variant"];
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Open the panel by default (uncontrolled). Mainly useful in tests. */
+    defaultOpen?: boolean;
+    /**
+     * Trap focus and lock scroll while open (Radix's default). Pass `false` for a
+     * lightweight menu that doesn't take the page modal — appropriate for inline
+     * affordances embedded in a larger surface.
+     */
+    modal?: boolean;
+    /**
+     * Portal the panel to `document.body` (the default). Pass `false` to render it
+     * inline next to the trigger, keeping it inside the trigger's DOM subtree.
+     */
+    portal?: boolean;
+    /** Extra classes for the trigger button. */
+    triggerClassName?: string;
+    /** Extra classes for the panel. */
+    contentClassName?: string;
+    /** Menu contents — typically `OverflowMenuItem`s separated by `OverflowMenuSeparator`. */
+    children: React.ReactNode;
+}
+/**
+ * A "⋯" icon-button that opens a dropdown of low-frequency, whole-object actions.
+ * Built on the Radix `DropdownMenu` primitives; compose the panel with
+ * `OverflowMenuItem` (and `OverflowMenuSeparator`) as children.
+ */
+export declare function OverflowMenu({ label, align, size, variant, disabled, defaultOpen, modal, portal, triggerClassName, contentClassName, children, }: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenuItem as OverflowMenuItem, DropdownMenuSeparator as OverflowMenuSeparator, } from "./dropdown-menu.js";

package/dist/components/overflow-menu.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+import * as React from "react";
+import { IconButton } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./dropdown-menu.js";
+/**
+ * A "⋯" icon-button that opens a dropdown of low-frequency, whole-object actions.
+ * Built on the Radix `DropdownMenu` primitives; compose the panel with
+ * `OverflowMenuItem` (and `OverflowMenuSeparator`) as children.
+ */
+export function OverflowMenu({ label = "More actions", align = "end", size = "icon-sm", variant = "ghost", disabled, defaultOpen, modal, portal, triggerClassName, contentClassName, children, }) {
+    return (_jsxs(DropdownMenu, { defaultOpen: defaultOpen, modal: modal, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { className: triggerClassName, disabled: disabled, label: label, size: size, variant: variant, children: _jsx(MoreHorizontal, {}) }) }), _jsx(DropdownMenuContent, { align: align, className: contentClassName, portal: portal, children: children })] }));
+}
+export { DropdownMenuItem as OverflowMenuItem, DropdownMenuSeparator as OverflowMenuSeparator, } from "./dropdown-menu.js";

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.4.0",
+  "version": "0.7.0",
   "description": "Brand-neutral React UI primitives and SaaS app patterns for ForwardReach-owned business applications.",
   "type": "module",
   "private": false,