@forwardreach/saas-ui 0.5.0 → 0.8.0

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface FieldGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "children"> {
+    /** Group label, rendered as the fieldset's legend. */
+    legend: React.ReactNode;
+    /** Optional supporting copy shown under the legend. */
+    description?: React.ReactNode;
+    /** Error message; when set the group is marked invalid. */
+    error?: React.ReactNode;
+    /** The controls belonging to this group. */
+    children: React.ReactNode;
+}
+/**
+ * The group analogue of `FormField`: a `fieldset`/`legend` wrapper with the same
+ * label/description/error typography, for a set of controls that answer one
+ * question together (checkbox groups, radio groups, composite inputs).
+ *
+ * `FormField` is wrong for these — its `label`/`htmlFor` pair can only point at a
+ * single control, so with several controls the label either names just one of them
+ * or names nothing. `legend` labels the whole set, which is what a screen reader
+ * needs to announce before reading the options.
+ */
+export declare function FieldGroup({ legend, description, error, className, children, ...props }: FieldGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/field-group.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+/**
+ * The group analogue of `FormField`: a `fieldset`/`legend` wrapper with the same
+ * label/description/error typography, for a set of controls that answer one
+ * question together (checkbox groups, radio groups, composite inputs).
+ *
+ * `FormField` is wrong for these — its `label`/`htmlFor` pair can only point at a
+ * single control, so with several controls the label either names just one of them
+ * or names nothing. `legend` labels the whole set, which is what a screen reader
+ * needs to announce before reading the options.
+ */
+export function FieldGroup({ legend, description, error, className, children, ...props }) {
+    const id = React.useId();
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+    const describedBy = [description ? descriptionId : null, error ? errorId : null]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (_jsxs("fieldset", { "aria-describedby": describedBy, "aria-invalid": error ? true : undefined, className: cn("min-w-0 space-y-1.5", className), ...props, children: [_jsx("legend", { className: "text-sm font-medium text-[color:var(--ssui-text)]", children: legend }), description ? (_jsx("p", { className: "text-xs text-[color:var(--ssui-text-muted)]", id: descriptionId, children: description })) : null, children, error ? (_jsx("p", { className: "text-xs text-[color:var(--ssui-destructive)]", id: errorId, children: error })) : null] }));
+}

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,16 @@
+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 "./checkbox.js";
+export * from "./choice-card.js";
+export * from "./collapsible.js";
+export * from "./combobox.js";
 export * from "./confirm-dialog.js";
+export * from "./field-group.js";
+export * from "./form-field.js";
 export * from "./copy-field.js";
 export * from "./dialog.js";
 export * from "./dropdown-menu.js";
@@ -17,14 +24,22 @@ 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 "./role-menu.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,16 @@
+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 "./checkbox.js";
+export * from "./choice-card.js";
+export * from "./collapsible.js";
+export * from "./combobox.js";
 export * from "./confirm-dialog.js";
+export * from "./field-group.js";
+export * from "./form-field.js";
 export * from "./copy-field.js";
 export * from "./dialog.js";
 export * from "./dropdown-menu.js";
@@ -17,14 +24,22 @@ 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 "./role-menu.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/role-menu.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+export interface RoleMenuOption {
+    value: string;
+    label: string;
+    /** One line on what the role grants. Shown in the popup, never on the trigger. */
+    description: string;
+    /** Optional leading icon, sized by the caller (16px reads correctly here). */
+    icon?: React.ReactNode;
+    /**
+     * Withholds this one option while leaving the rest selectable, and says why —
+     * a workspace's last admin, a plan the account cannot downgrade to. The reason
+     * is shown in place of the description.
+     *
+     * Presence is what withholds: there is no separate `disabled` flag, because an
+     * option withheld without an explanation is a dead row that answers none of
+     * the question the reader now has. Pass `undefined` to leave it selectable, so
+     * a computed case stays one expression:
+     * `unavailableReason: isLastAdmin ? "…" : undefined`.
+     */
+    unavailableReason?: string;
+}
+export interface RoleMenuDestructiveItem {
+    label: string;
+    onSelect: () => void | Promise<void>;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RoleMenuProps {
+    options: ReadonlyArray<RoleMenuOption>;
+    /** Selected option value. The component never changes this itself. */
+    value: string;
+    /** Called with the chosen value; never fired for the option already selected. */
+    onValueChange: (value: string) => void | Promise<void>;
+    /** Heading above the options, e.g. "Select role". Omitted when absent. */
+    heading?: React.ReactNode;
+    /** Rendered below the options, separated — typically a documentation link. */
+    footer?: React.ReactNode;
+    /** Rendered last, separated, styled as destructive. Typically "Remove from workspace". */
+    destructiveItem?: RoleMenuDestructiveItem;
+    /**
+     * Submits the selected value with the surrounding form through a hidden input.
+     * Omit it in a list that applies on selection: a Radix menu is not a form
+     * control, and an unconditional hidden input would litter every such row.
+     */
+    name?: string;
+    /** Disables the whole control. To withhold one option, use its `unavailableReason`. */
+    disabled?: boolean;
+    /**
+     * Which edge of the trigger the popup aligns to. Defaults to `"start"`; a
+     * right-aligned trigger (a table's last column) wants `"end"` so the popup
+     * opens inward rather than relying on collision detection to rescue it.
+     */
+    align?: "start" | "center" | "end";
+    /** Trigger id. Supplied by an enclosing `FormField` when there is one. */
+    id?: string;
+    /**
+     * Names the trigger's purpose, e.g. `"Role for Ada Lovelace"` in a member
+     * list. The selected label is appended to whatever is passed — the accessible
+     * name has to contain the trigger's visible text for voice control (WCAG
+     * 2.5.3), and a row's own name has to say which row it belongs to. Defaults to
+     * `"Change role (current: …)"`, and is dropped entirely inside a `FormField`,
+     * whose label already names the control.
+     */
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    /** Open the menu by default (uncontrolled). Useful for tests and controlled-open consumers. */
+    defaultOpen?: boolean;
+    /** Extra classes for the trigger. */
+    className?: string;
+}
+/**
+ * Single choice from a small closed set where each option needs a sentence.
+ *
+ * The third answer to "pick one of a few" in this package, and the one to reach
+ * for when the options need explaining: `Select` is a native `<select>` whose
+ * options may hold only text, and `Combobox` is a filterable input for lists long
+ * enough to search. A role set is neither — two or three options, each carrying a
+ * meaning the reader cannot infer from its name.
+ *
+ * Options are radio items rather than plain menu items, so assistive technology
+ * announces the option set and which member of it is current instead of leaving
+ * the checkmark as a purely visual cue. The check is drawn here rather than by
+ * Radix's `ItemIndicator` because it sits opposite a two-line label, where the
+ * indicator's leading placement fights the description.
+ *
+ * The component owns no invariant. Which option is unavailable and why is the
+ * consumer's to say, and a consumer that renders a stale `unavailableReason` has
+ * a display bug rather than a hole — the server it submits to is expected to
+ * refuse the change on its own.
+ */
+export declare function RoleMenu({ options, value, onValueChange, heading, footer, destructiveItem, name, disabled, align, defaultOpen, className, ...ariaProps }: RoleMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RoleMenu {
+    var displayName: string;
+}

package/dist/components/role-menu.js

@@ -0,0 +1,52 @@
+"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 { Check, ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { useFormField, useFormFieldProps } from "./form-field.js";
+/**
+ * Single choice from a small closed set where each option needs a sentence.
+ *
+ * The third answer to "pick one of a few" in this package, and the one to reach
+ * for when the options need explaining: `Select` is a native `<select>` whose
+ * options may hold only text, and `Combobox` is a filterable input for lists long
+ * enough to search. A role set is neither — two or three options, each carrying a
+ * meaning the reader cannot infer from its name.
+ *
+ * Options are radio items rather than plain menu items, so assistive technology
+ * announces the option set and which member of it is current instead of leaving
+ * the checkmark as a purely visual cue. The check is drawn here rather than by
+ * Radix's `ItemIndicator` because it sits opposite a two-line label, where the
+ * indicator's leading placement fights the description.
+ *
+ * The component owns no invariant. Which option is unavailable and why is the
+ * consumer's to say, and a consumer that renders a stale `unavailableReason` has
+ * a display bug rather than a hole — the server it submits to is expected to
+ * refuse the change on its own.
+ */
+export function RoleMenu({ options, value, onValueChange, heading, footer, destructiveItem, name, disabled, align = "start", defaultOpen, className, ...ariaProps }) {
+    const selected = options.find((option) => option.value === value);
+    const selectedLabel = selected?.label ?? value;
+    const headingId = React.useId();
+    // An enclosing `FormField` owns the trigger's id and error wiring, the same
+    // way it owns `Input`'s and `Combobox`'s — without this the field's label
+    // points at an id no element carries and its error is never announced.
+    const field = useFormField();
+    const { "aria-label": ariaLabel, ...fieldProps } = useFormFieldProps(ariaProps);
+    // A row of ten triggers all named "Member" says nothing about what they do or
+    // whose role they change, so the name carries purpose and current value —
+    // `WorkspaceSwitcher`'s reasoning. A `FormField`'s visible label does that job
+    // better, and an `aria-label` would override it, so inside one there is none.
+    const triggerLabel = ariaLabel
+        ? `${ariaLabel} (current: ${selectedLabel})`
+        : field
+            ? undefined
+            : `Change role (current: ${selectedLabel})`;
+    return (_jsxs(_Fragment, { children: [name ? _jsx("input", { disabled: disabled, name: name, type: "hidden", value: value }) : null, _jsxs(DropdownMenu, { defaultOpen: defaultOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { ...fieldProps, "aria-label": triggerLabel, className: cn("inline-flex h-8 items-center gap-1.5 rounded-[var(--ssui-radius-sm)] px-2 text-sm text-[color:var(--ssui-text)] transition-colors", "hover:bg-[color:var(--ssui-overlay-hover)] 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:pointer-events-none disabled:opacity-70", className), disabled: disabled, type: "button", children: [selectedLabel, _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 text-[color:var(--ssui-text-subtle)]" })] }) }), _jsxs(DropdownMenuContent, { align: align, className: "w-72 p-1.5", collisionPadding: 8, children: [heading ? (_jsx(DropdownMenuLabel, { className: "px-2 py-1", id: headingId, children: heading })) : null, _jsx(DropdownMenuRadioGroup, { "aria-labelledby": heading ? headingId : undefined, onValueChange: (next) => {
+                                    if (next !== value)
+                                        void onValueChange(next);
+                                }, value: value, children: options.map((option) => (_jsxs(DropdownMenuPrimitive.RadioItem, { className: cn("relative flex cursor-default select-none items-start gap-2.5 rounded-[var(--ssui-radius-sm)] px-2 py-2 text-sm outline-none transition-colors", "focus:bg-[color:var(--ssui-overlay-hover)] data-[highlighted]:bg-[color:var(--ssui-overlay-hover)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"), disabled: option.unavailableReason !== undefined, value: option.value, children: [option.icon ? (_jsx("span", { "aria-hidden": "true", className: "mt-0.5 shrink-0 text-[color:var(--ssui-text-subtle)]", children: option.icon })) : null, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-medium", children: option.label }), _jsx("span", { className: "mt-0.5 block text-xs leading-snug text-[color:var(--ssui-text-muted)]", children: option.unavailableReason ?? option.description })] }), option.value === value ? (_jsx(Check, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0 text-[color:var(--ssui-text)]" })) : null] }, option.value))) }), destructiveItem ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2.5 px-2 py-2 text-[color:var(--ssui-destructive)] focus:text-[color:var(--ssui-destructive)] data-[highlighted]:text-[color:var(--ssui-destructive)]", disabled: destructiveItem.disabled, onSelect: () => void destructiveItem.onSelect(), children: [destructiveItem.icon ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0", children: destructiveItem.icon })) : null, destructiveItem.label] })] })) : null, footer ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx("div", { className: "px-2 py-1.5 text-xs text-[color:var(--ssui-text-muted)]", children: footer })] })) : null] })] })] }));
+}
+RoleMenu.displayName = "RoleMenu";

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,35 @@
+"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 shadow-sm transition-transform", 
+                    // The thumb is themed per state. A single thumb color only works when the
+                    // checked track (the primary) and the unchecked track sit on the same side
+                    // of the lightness scale; a product whose primary is near-white gets a white
+                    // thumb on a near-white track and the control stops reading as on or off.
+                    isChecked
+                        ? "bg-[color:var(--ssui-switch-thumb-checked,var(--ssui-switch-thumb,#ffffff))] translate-x-4"
+                        : "bg-[color:var(--ssui-switch-thumb,#ffffff)] 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";