@forwardreach/saas-ui 0.5.0 → 0.8.0

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,12 @@
   --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;
+  /* Thumb color while checked. Defaults to the unchecked thumb; override when the
+     checked track (--ssui-switch-track-checked) is too light for a white thumb. */
+  --ssui-switch-thumb-checked: #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.8.0",
   "description": "Brand-neutral React UI primitives and SaaS app patterns for ForwardReach-owned business applications.",
   "type": "module",
   "private": false,