@forwardreach/saas-ui 0.4.0

package/dist/components/request-access.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyRound, Mail } from "lucide-react";
+import * as React from "react";
+import { isPlausibleEmail } from "../utils/email.js";
+import { useFlowRunner } from "../utils/flow-runner.js";
+import { AuthFeedback, AuthHeader, AuthLinkLine, AuthShell, AuthSpinner } from "./auth-shell.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+const REQUEST_FLOW = "request";
+const ACCESS_CODE_FLOW = "access-code";
+function Card({ children }) {
+    return (_jsx("div", { className: "space-y-3 rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] p-4", children: children }));
+}
+export function RequestAccess({ accessCode, description, logo, request, signIn, title = "Request access" }) {
+    const flows = useFlowRunner();
+    const emailInputId = React.useId();
+    const codeInputId = React.useId();
+    const [email, setEmail] = React.useState("");
+    const [code, setCode] = React.useState("");
+    const [requestSent, setRequestSent] = React.useState(false);
+    const trimmedEmail = email.trim();
+    const trimmedCode = code.trim();
+    async function handleRequestSubmit(event) {
+        event.preventDefault();
+        if (flows.busy || !isPlausibleEmail(trimmedEmail))
+            return;
+        const sent = await flows.run(REQUEST_FLOW, () => request.submit(trimmedEmail));
+        if (sent)
+            setRequestSent(true);
+    }
+    async function handleCodeSubmit(event) {
+        if (!accessCode)
+            return;
+        event.preventDefault();
+        if (flows.busy || trimmedCode.length === 0)
+            return;
+        await flows.run(ACCESS_CODE_FLOW, () => accessCode.submit(trimmedCode));
+    }
+    return (_jsxs(AuthShell, { children: [_jsx(AuthHeader, { description: description, logo: logo, title: title }), _jsxs("div", { className: "space-y-5", children: [_jsxs(Card, { children: [requestSent ? (_jsx(AuthFeedback, { tone: "status", children: request.successMessage ?? "Access request sent. We'll email you." })) : (_jsxs("form", { "aria-busy": flows.busyKey === REQUEST_FLOW || undefined, "aria-label": "Request access", className: "space-y-2", onSubmit: handleRequestSubmit, children: [_jsx("label", { className: "block", htmlFor: emailInputId, children: _jsxs("span", { className: "mb-1.5 flex items-center gap-1.5 text-xs font-medium text-[color:var(--ssui-text-muted)]", children: [_jsx(Mail, { "aria-hidden": "true", className: "size-3.5" }), "Email"] }) }), _jsx(Input, { autoComplete: "email", disabled: flows.busy, id: emailInputId, inputMode: "email", name: "email", onChange: (event) => setEmail(event.target.value), placeholder: "you@example.com", type: "email", value: email }), _jsxs(Button, { "aria-busy": flows.busyKey === REQUEST_FLOW || undefined, className: "w-full justify-center", disabled: flows.busy || !isPlausibleEmail(trimmedEmail), type: "submit", variant: "primary", children: [flows.busyKey === REQUEST_FLOW ? _jsx(AuthSpinner, {}) : null, "Request access"] })] })), _jsx(AuthFeedback, { tone: "error", children: flows.errorFor(REQUEST_FLOW) })] }), accessCode ? (_jsxs(Card, { children: [_jsxs("form", { "aria-busy": flows.busyKey === ACCESS_CODE_FLOW || undefined, "aria-label": "Access code", className: "space-y-2", onSubmit: handleCodeSubmit, children: [_jsx("label", { className: "block", htmlFor: codeInputId, children: _jsxs("span", { className: "mb-1.5 flex items-center gap-1.5 text-xs font-medium text-[color:var(--ssui-text-muted)]", children: [_jsx(KeyRound, { "aria-hidden": "true", className: "size-3.5" }), "Have an access code?"] }) }), _jsx(Input, { autoComplete: "one-time-code", disabled: flows.busy, id: codeInputId, name: "code", onChange: (event) => setCode(event.target.value), placeholder: "Access code", value: code }), _jsxs(Button, { "aria-busy": flows.busyKey === ACCESS_CODE_FLOW || undefined, className: "w-full justify-center", disabled: flows.busy || trimmedCode.length === 0, type: "submit", variant: "secondary", children: [flows.busyKey === ACCESS_CODE_FLOW ? _jsx(AuthSpinner, {}) : null, "Continue"] })] }), _jsx(AuthFeedback, { tone: "error", children: flows.errorFor(ACCESS_CODE_FLOW) })] })) : null] }), signIn ? (_jsx("div", { className: "mt-6", children: _jsx(AuthLinkLine, { link: signIn.link, prompt: signIn.prompt ?? "Existing user?" }) })) : null] }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,4 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const ScrollArea = React.forwardRef(({ children, className, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+export const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, className: cn("flex touch-none select-none rounded-full p-0.5 transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className), orientation: orientation, ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-[color:var(--ssui-border-strong)]" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

package/dist/components/search-input.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type InputProps } from "./input.js";
+export interface SearchInputProps extends Omit<InputProps, "type"> {
+    clearLabel?: string;
+    onClear?: () => void;
+}
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/search-input.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { IconButton } from "./button.js";
+import { Input } from "./input.js";
+export const SearchInput = React.forwardRef(({ className, clearLabel = "Clear search", onClear, placeholder = "Search", value, ...props }, ref) => {
+    const hasValue = typeof value === "string" && value.length > 0;
+    return (_jsxs("div", { className: cn("relative w-full", className), children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[color:var(--ssui-text-subtle)]", "aria-hidden": "true" }), _jsx(Input, { ref: ref, className: "pl-9 pr-9", placeholder: placeholder, type: "search", value: value, ...props }), hasValue && onClear ? (_jsx(IconButton, { className: "absolute right-1 top-1/2 -translate-y-1/2", label: clearLabel, onClick: onClear, size: "icon-sm", type: "button", variant: "ghost", children: _jsx(X, {}) })) : null] }));
+});
+SearchInput.displayName = "SearchInput";

package/dist/components/separator.d.ts

@@ -0,0 +1,3 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/separator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, className: cn("shrink-0 bg-[color:var(--ssui-border)]", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className), decorative: decorative, orientation: orientation, ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface SettingsSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** Section heading. */
+    title: React.ReactNode;
+    /** Optional supporting copy shown under the title. */
+    description?: React.ReactNode;
+    /** Optional leading icon rendered before the title. */
+    icon?: React.ReactNode;
+    /** Optional header-aligned action (button, link, etc.). */
+    action?: React.ReactNode;
+    /** Optional footer content rendered under the body. */
+    footer?: React.ReactNode;
+}
+/**
+ * Titled card used as the repeating visual unit across settings surfaces:
+ * a heading with optional description and header action, plus a body slot.
+ */
+export declare function SettingsSection({ title, description, icon, action, footer, className, children, ...props }: SettingsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings-section.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";
+/**
+ * Titled card used as the repeating visual unit across settings surfaces:
+ * a heading with optional description and header action, plus a body slot.
+ */
+export function SettingsSection({ title, description, icon, action, footer, className, children, ...props }) {
+    return (_jsxs("section", { className: cn("rounded-[var(--ssui-radius-lg)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] p-4", className), ...props, children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("h2", { className: "flex items-center gap-2 text-sm font-semibold text-[color:var(--ssui-text)]", children: [icon ? (_jsx("span", { className: "shrink-0 [&_svg]:size-4", "aria-hidden": "true", children: icon })) : null, title] }), description ? (_jsx("div", { className: "text-sm text-[color:var(--ssui-text-muted)]", children: description })) : null] }), action ? (_jsx("div", { className: "flex shrink-0 flex-wrap gap-2", children: action })) : null] }), children ? _jsx("div", { className: "mt-4", children: children }) : null, footer ? _jsx("div", { className: "mt-4", children: footer }) : null] }));
+}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn("animate-pulse rounded-[var(--ssui-radius)] bg-[color:var(--ssui-surface-muted)]", className), ...props }));
+}

package/dist/components/status-pill.d.ts

@@ -0,0 +1,7 @@
+import { type BadgeProps } from "./badge.js";
+export interface StatusPillProps extends BadgeProps {
+    /** Render a small leading status dot in the active variant's color. */
+    dot?: boolean;
+    status?: BadgeProps["variant"];
+}
+export declare function StatusPill({ children, className, dot, status, variant, ...props }: StatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-pill.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { Badge } from "./badge.js";
+export function StatusPill({ children, className, dot = false, status = "neutral", variant, ...props }) {
+    return (_jsxs(Badge, { className: cn("capitalize", className), variant: variant ?? status, ...props, children: [dot ? (_jsx("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-[currentColor]", "data-status-dot": "" })) : null, children] }));
+}

package/dist/components/tabs.d.ts

@@ -0,0 +1,6 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+export declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const Tabs = TabsPrimitive.Root;
+export const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center justify-center rounded-[var(--ssui-radius)] bg-[color:var(--ssui-surface-muted)] p-1 text-[color:var(--ssui-text-muted)]", className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+export const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-[var(--ssui-radius-sm)] px-3 py-1.5 text-sm font-medium 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:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[color:var(--ssui-surface)] data-[state=active]:text-[color:var(--ssui-text)] data-[state=active]:shadow-sm", className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+export const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 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)]", className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;

package/dist/components/textarea.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea.js

@@ -0,0 +1,5 @@
+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 })));
+Textarea.displayName = "Textarea";

package/dist/components/toolbar.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function Toolbar({ className, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/toolbar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export function Toolbar({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", className), ...props }));
+}
+export function ToolbarGroup({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), ...props }));
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,6 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+export declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+export declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+export const TooltipContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 max-w-72 overflow-hidden rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] px-3 py-1.5 text-xs text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)]", className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./utils/index.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./utils/index.js";

package/dist/styles/index.css

@@ -0,0 +1,71 @@
+:root {
+  --ssui-bg: #ffffff;
+  --ssui-surface: #ffffff;
+    --ssui-surface-muted: #f4f6f8;
+    --ssui-surface-elevated: #ffffff;
+    --ssui-overlay: rgb(15 23 42 / 0.48);
+    --ssui-overlay-hover: rgb(17 24 39 / 0.08);
+    --ssui-text: #111827;
+  --ssui-text-muted: #667085;
+  --ssui-text-subtle: #98a2b3;
+  --ssui-text-inverse: #ffffff;
+  --ssui-border: #d0d5dd;
+  --ssui-border-strong: #98a2b3;
+  --ssui-primary: #2563eb;
+  --ssui-primary-hover: #1d4ed8;
+  --ssui-primary-foreground: #ffffff;
+  --ssui-accent-subtle: #eff6ff;
+  --ssui-accent-subtle-foreground: #1e3a8a;
+  --ssui-destructive: #dc2626;
+  --ssui-destructive-hover: #b91c1c;
+  --ssui-destructive-foreground: #ffffff;
+  --ssui-focus-ring: #2563eb;
+  --ssui-radius-sm: 0.25rem;
+  --ssui-radius: 0.375rem;
+  --ssui-radius-lg: 0.5rem;
+  --ssui-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.08);
+  --ssui-shadow-md: 0 12px 24px rgb(16 24 40 / 0.12);
+  --ssui-notice-info-bg: #eff6ff;
+  --ssui-notice-info-text: #1e3a8a;
+  --ssui-notice-info-border: #bfdbfe;
+  --ssui-notice-success-bg: #ecfdf3;
+  --ssui-notice-success-text: #05603a;
+  --ssui-notice-success-border: #abefc6;
+  --ssui-notice-warning-bg: #fffaeb;
+  --ssui-notice-warning-text: #93370d;
+  --ssui-notice-warning-border: #fedf89;
+  --ssui-notice-danger-bg: #fef3f2;
+  --ssui-notice-danger-text: #912018;
+  --ssui-notice-danger-border: #fecdca;
+  --ssui-status-neutral-bg: #f4f6f8;
+  --ssui-status-neutral-text: #344054;
+  --ssui-status-info-bg: #eff6ff;
+  --ssui-status-info-text: #1e3a8a;
+  --ssui-status-success-bg: #ecfdf3;
+  --ssui-status-success-text: #05603a;
+  --ssui-status-warning-bg: #fffaeb;
+  --ssui-status-warning-text: #93370d;
+  --ssui-status-danger-bg: #fef3f2;
+  --ssui-status-danger-text: #912018;
+  --ssui-avatar-1-bg: #eef2ff;
+  --ssui-avatar-1-text: #3730a3;
+  --ssui-avatar-2-bg: #ecfdf5;
+  --ssui-avatar-2-text: #065f46;
+  --ssui-avatar-3-bg: #fff7ed;
+  --ssui-avatar-3-text: #9a3412;
+  --ssui-avatar-4-bg: #fdf2f8;
+  --ssui-avatar-4-text: #9d174d;
+  --ssui-avatar-5-bg: #f0f9ff;
+  --ssui-avatar-5-text: #075985;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/email.d.ts

@@ -0,0 +1,2 @@
+/** Cheap plausibility check used to gate email submit buttons; real validation happens server-side. */
+export declare function isPlausibleEmail(value: string): boolean;

package/dist/utils/email.js

@@ -0,0 +1,5 @@
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+/** Cheap plausibility check used to gate email submit buttons; real validation happens server-side. */
+export function isPlausibleEmail(value) {
+    return EMAIL_PATTERN.test(value.trim());
+}

package/dist/utils/flow-runner.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface FlowRunner {
+    /** True while any flow is in flight; callers disable every interactive control. */
+    busy: boolean;
+    /** Key of the in-flight flow, for marking the active control busy. */
+    busyKey: string | null;
+    clearError: () => void;
+    /** The message for a rejected flow, or null if that flow has no error. */
+    errorFor: (key: string) => React.ReactNode;
+    /** Runs a flow's async handler; resolves true on success, false on a caught rejection. */
+    run: (key: string, action: () => Promise<void>) => Promise<boolean>;
+}
+/**
+ * Owns the async flow state (single in-flight flow, error scoped to the flow
+ * that rejected) shared by Login and RequestAccess. Rejections surface the
+ * thrown Error's message as user-facing copy per the package convention.
+ */
+export declare function useFlowRunner(): FlowRunner;

package/dist/utils/flow-runner.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+const GENERIC_ERROR_MESSAGE = "Something went wrong. Please try again.";
+/**
+ * Owns the async flow state (single in-flight flow, error scoped to the flow
+ * that rejected) shared by Login and RequestAccess. Rejections surface the
+ * thrown Error's message as user-facing copy per the package convention.
+ */
+export function useFlowRunner() {
+    const [busyKey, setBusyKey] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const run = React.useCallback(async (key, action) => {
+        setBusyKey(key);
+        setError(null);
+        try {
+            await action();
+            return true;
+        }
+        catch (cause) {
+            setError({
+                key,
+                message: cause instanceof Error && cause.message
+                    ? cause.message
+                    : GENERIC_ERROR_MESSAGE
+            });
+            return false;
+        }
+        finally {
+            setBusyKey(null);
+        }
+    }, []);
+    const clearError = React.useCallback(() => setError(null), []);
+    return {
+        busy: busyKey !== null,
+        busyKey,
+        clearError,
+        errorFor: (key) => (error?.key === key ? error.message : null),
+        run
+    };
+}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

package/dist/utils/initials.d.ts

@@ -0,0 +1,10 @@
+export interface InitialsInput {
+    name?: string | null;
+    email?: string | null;
+    fallback?: string | null;
+}
+export interface GetInitialsOptions {
+    maxLength?: number;
+    fallback?: string;
+}
+export declare function getInitials(input: InitialsInput | string | null | undefined, options?: GetInitialsOptions): string;

package/dist/utils/initials.js

@@ -0,0 +1,27 @@
+function cleanPart(part) {
+    return part.trim().replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu, "");
+}
+export function getInitials(input, options = {}) {
+    const maxLength = Math.max(1, options.maxLength ?? 2);
+    const fallback = options.fallback ??
+        (typeof input === "object" ? input?.fallback : undefined) ??
+        "?";
+    const name = typeof input === "string" ? input : input?.name;
+    const email = typeof input === "object" ? input?.email : undefined;
+    const source = name?.trim() || email?.split("@")[0] || "";
+    const parts = source
+        .split(/[\s._-]+/u)
+        .map(cleanPart)
+        .filter(Boolean);
+    if (parts.length === 0) {
+        return fallback.slice(0, maxLength).toLocaleUpperCase();
+    }
+    if (parts.length === 1) {
+        return parts[0].slice(0, maxLength).toLocaleUpperCase();
+    }
+    return parts
+        .slice(0, maxLength)
+        .map((part) => part[0])
+        .join("")
+        .toLocaleUpperCase();
+}

package/dist/utils/time.d.ts

@@ -0,0 +1,5 @@
+export interface FormatRelativeTimeOptions {
+    now?: Date | number | string;
+    numeric?: "auto" | "always";
+}
+export declare function formatRelativeTime(value: Date | number | string, options?: FormatRelativeTimeOptions): string;

package/dist/utils/time.js

@@ -0,0 +1,46 @@
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+function toDate(value) {
+    return value instanceof Date ? value : new Date(value);
+}
+function format(amount, unit, future) {
+    const value = `${amount}${unit}`;
+    return future ? `in ${value}` : `${value} ago`;
+}
+export function formatRelativeTime(value, options = {}) {
+    const target = toDate(value);
+    const now = toDate(options.now ?? Date.now());
+    if (Number.isNaN(target.getTime()) || Number.isNaN(now.getTime())) {
+        return "Unknown";
+    }
+    const diff = target.getTime() - now.getTime();
+    const abs = Math.abs(diff);
+    const future = diff > 0;
+    if (abs < 45 * SECOND) {
+        return future && abs > 5 * SECOND ? "in a few seconds" : "just now";
+    }
+    if (abs < 45 * MINUTE) {
+        return format(Math.round(abs / MINUTE), "m", future);
+    }
+    if (abs < 22 * HOUR) {
+        return format(Math.round(abs / HOUR), "h", future);
+    }
+    if (abs < 36 * HOUR && options.numeric !== "always") {
+        return future ? "tomorrow" : "yesterday";
+    }
+    if (abs < 6 * DAY) {
+        return format(Math.round(abs / DAY), "d", future);
+    }
+    if (abs < 4 * WEEK) {
+        return format(Math.round(abs / WEEK), "w", future);
+    }
+    if (abs < YEAR) {
+        return format(Math.round(abs / MONTH), "mo", future);
+    }
+    return format(Math.round(abs / YEAR), "y", future);
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@forwardreach/saas-ui",
+  "version": "0.4.0",
+  "description": "Brand-neutral React UI primitives and SaaS app patterns for ForwardReach-owned business applications.",
+  "type": "module",
+  "private": false,
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/forwardreach/saas-shared.git",
+    "directory": "packages/saas-ui"
+  },
+  "homepage": "https://github.com/forwardreach/saas-shared/tree/main/packages/saas-ui#readme",
+  "bugs": {
+    "url": "https://github.com/forwardreach/saas-shared/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js"
+    },
+    "./styles.css": "./dist/styles/index.css",
+    "./styles": "./dist/styles/index.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^26.1.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "pnpm clean && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
+    "dev": "node scripts/copy-styles.mjs && tsc -p tsconfig.build.json --watch",
+    "check:brand": "node scripts/check-brand-neutrality.mjs",
+    "clean": "rimraf dist coverage dist-pack *.tgz",
+    "pack:local": "pnpm build && mkdir -p dist-pack && pnpm pack --pack-destination dist-pack",
+    "test": "vitest run && pnpm check:brand",
+    "typecheck": "tsc --noEmit"
+  }
+}