@forwardreach/saas-ui 0.4.0

package/dist/components/dialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { IconButton } from "./button.js";
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-[color:var(--ssui-overlay)]", className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+export const DialogContent = React.forwardRef(({ children, className, showClose = true, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--ssui-radius-lg)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-6 text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)] focus:outline-none", className), ...props, children: [children, showClose ? (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(IconButton, { className: "absolute right-3 top-3", label: "Close", size: "icon-sm", variant: "ghost", children: _jsx(X, {}) }) })) : null] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+export function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex flex-col gap-1.5 text-left", className), ...props }));
+}
+export function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+export const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold text-[color:var(--ssui-text)]", className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+export const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-[color:var(--ssui-text-muted)]", className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,23 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+export declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/dropdown-menu.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenuSubTrigger = React.forwardRef(({ children, className, inset, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm text-[color:var(--ssui-text)] outline-none focus:bg-[color:var(--ssui-surface-muted)] data-[state=open]:bg-[color:var(--ssui-surface-muted)]", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto size-4" })] })));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+export const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-40 overflow-hidden rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-1 text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)]", className), ...props })));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+export const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-44 overflow-hidden rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-elevated)] p-1 text-[color:var(--ssui-text)] shadow-[var(--ssui-shadow-md)]", className), ...props }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+export const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-[var(--ssui-radius-sm)] px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+export const DropdownMenuCheckboxItem = React.forwardRef(({ children, className, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, checked: checked, className: cn("relative flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+export const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-[var(--ssui-radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[color:var(--ssui-surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "size-2 fill-current" }) }) }), children] })));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+export const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-xs font-medium text-[color:var(--ssui-text-muted)]", inset && "pl-8", className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+export const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-[color:var(--ssui-border)]", className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+export function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { className: cn("ml-auto text-xs text-[color:var(--ssui-text-subtle)]", className), ...props }));
+}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    actions?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    message?: React.ReactNode;
+    title?: React.ReactNode;
+}
+export declare function EmptyState({ actions, className, description, icon, message, title, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/empty-state.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";
+export function EmptyState({ actions, className, description, icon, message, title, ...props }) {
+    const heading = title ?? message;
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 rounded-[var(--ssui-radius-lg)] border border-dashed border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-6 py-10 text-center", className), ...props, children: [icon ? (_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-[color:var(--ssui-surface-muted)] text-[color:var(--ssui-text-muted)]", "aria-hidden": "true", children: icon })) : null, heading ? (_jsx("h3", { className: "max-w-md text-base font-semibold text-[color:var(--ssui-text)]", children: heading })) : null, description ? (_jsx("div", { className: "max-w-lg text-sm text-[color:var(--ssui-text-muted)]", children: description })) : null, actions ? _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: actions }) : null] }));
+}

package/dist/components/filter-chip.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface FilterChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    onPressedChange?: (pressed: boolean) => void;
+    onRemove?: () => void;
+    pressed?: boolean;
+    removeLabel?: string;
+}
+export declare function FilterChip({ children, className, onPressedChange, onRemove, pressed, removeLabel, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export interface FilterChipGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function FilterChipGroup({ className, ...props }: FilterChipGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter-chip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export function FilterChip({ children, className, onPressedChange, onRemove, pressed = false, removeLabel = "Remove filter", ...props }) {
+    const label = (_jsx("span", { className: "inline-flex h-full min-w-0 items-center truncate px-3 text-sm font-medium leading-none", children: children }));
+    return (_jsxs("span", { className: cn("inline-flex h-8 max-w-full items-center overflow-hidden rounded-full border text-[color:var(--ssui-text)]", pressed
+            ? "border-[color:var(--ssui-primary)] bg-[color:var(--ssui-status-info-bg)]"
+            : "border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)]", className), ...props, children: [onPressedChange ? (_jsx("button", { "aria-pressed": pressed, className: "flex h-full min-w-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)]", onClick: () => onPressedChange(!pressed), type: "button", children: label })) : (label), onRemove ? (_jsx("button", { "aria-label": removeLabel, className: "mr-1 flex size-6 items-center justify-center rounded-full text-[color:var(--ssui-text-muted)] outline-none hover:bg-[color:var(--ssui-overlay-hover)] focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)]", onClick: onRemove, type: "button", children: _jsx(X, { className: "size-3.5" }) })) : null] }));
+}
+export function FilterChipGroup({ className, ...props }) {
+    return _jsx("div", { className: cn("flex flex-wrap gap-2", className), ...props });
+}

package/dist/components/getting-started.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface Step {
+    /** Short step heading. */
+    title: React.ReactNode;
+    /** Optional rich description or supporting content for the step. */
+    description?: React.ReactNode;
+}
+export interface StepListProps extends Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> {
+    /** Ordered steps rendered as a numbered list. */
+    steps: Step[];
+}
+/**
+ * Ordered, numbered step list for doc-forward onboarding. Renders a semantic
+ * `<ol>` with numbered markers, a step title, and optional rich description.
+ */
+export declare function StepList({ steps, className, ...props }: StepListProps): import("react/jsx-runtime").JSX.Element;
+export interface GettingStartedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Optional intro heading above the steps. */
+    title?: React.ReactNode;
+    /** Optional intro copy above the steps. */
+    description?: React.ReactNode;
+    /** Ordered onboarding steps. */
+    steps: Step[];
+    /** Optional content rendered below the steps (notes, links, warnings). */
+    children?: React.ReactNode;
+}
+/**
+ * Doc-forward getting-started block: optional intro copy, a numbered
+ * {@link StepList}, and optional trailing content.
+ */
+export declare function GettingStarted({ title, description, steps, children, className, ...props }: GettingStartedProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/getting-started.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+/**
+ * Ordered, numbered step list for doc-forward onboarding. Renders a semantic
+ * `<ol>` with numbered markers, a step title, and optional rich description.
+ */
+export function StepList({ steps, className, ...props }) {
+    return (_jsx("ol", { className: cn("space-y-4", className), ...props, children: steps.map((step, index) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-[color:var(--ssui-surface-muted)] text-xs font-semibold text-[color:var(--ssui-text)]", children: index + 1 }), _jsxs("div", { className: "min-w-0 space-y-1 pt-0.5", children: [_jsx("div", { className: "text-sm font-medium text-[color:var(--ssui-text)]", children: step.title }), step.description ? (_jsx("div", { className: "text-sm text-[color:var(--ssui-text-muted)]", children: step.description })) : null] })] }, index))) }));
+}
+/**
+ * Doc-forward getting-started block: optional intro copy, a numbered
+ * {@link StepList}, and optional trailing content.
+ */
+export function GettingStarted({ title, description, steps, children, className, ...props }) {
+    return (_jsxs("div", { className: cn("space-y-4", className), ...props, children: [title || description ? (_jsxs("div", { className: "space-y-1", children: [title ? (_jsx("div", { className: "text-sm font-semibold text-[color:var(--ssui-text)]", children: title })) : null, description ? (_jsx("div", { className: "text-sm text-[color:var(--ssui-text-muted)]", children: description })) : null] })) : null, _jsx(StepList, { steps: steps }), children ? _jsx("div", { children: children }) : null] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,29 @@
+export * from "./audit-log.js";
+export * from "./avatar.js";
+export * from "./badge.js";
+export * from "./brand-icons.js";
+export * from "./button.js";
+export * from "./confirm-dialog.js";
+export * from "./copy-field.js";
+export * from "./dialog.js";
+export * from "./dropdown-menu.js";
+export * from "./empty-state.js";
+export * from "./filter-chip.js";
+export * from "./getting-started.js";
+export * from "./inline-notice.js";
+export * from "./inline-rename-input.js";
+export * from "./input.js";
+export * from "./list-shell.js";
+export * from "./login.js";
+export * from "./page-header.js";
+export * from "./request-access.js";
+export * from "./scroll-area.js";
+export * from "./search-input.js";
+export * from "./separator.js";
+export * from "./settings-section.js";
+export * from "./skeleton.js";
+export * from "./status-pill.js";
+export * from "./tabs.js";
+export * from "./textarea.js";
+export * from "./toolbar.js";
+export * from "./tooltip.js";

package/dist/components/index.js

@@ -0,0 +1,29 @@
+export * from "./audit-log.js";
+export * from "./avatar.js";
+export * from "./badge.js";
+export * from "./brand-icons.js";
+export * from "./button.js";
+export * from "./confirm-dialog.js";
+export * from "./copy-field.js";
+export * from "./dialog.js";
+export * from "./dropdown-menu.js";
+export * from "./empty-state.js";
+export * from "./filter-chip.js";
+export * from "./getting-started.js";
+export * from "./inline-notice.js";
+export * from "./inline-rename-input.js";
+export * from "./input.js";
+export * from "./list-shell.js";
+export * from "./login.js";
+export * from "./page-header.js";
+export * from "./request-access.js";
+export * from "./scroll-area.js";
+export * from "./search-input.js";
+export * from "./separator.js";
+export * from "./settings-section.js";
+export * from "./skeleton.js";
+export * from "./status-pill.js";
+export * from "./tabs.js";
+export * from "./textarea.js";
+export * from "./toolbar.js";
+export * from "./tooltip.js";

package/dist/components/inline-notice.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type InlineNoticeVariant = "info" | "success" | "warning" | "danger";
+export interface InlineNoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    actions?: React.ReactNode;
+    /**
+     * Where action buttons render relative to the content.
+     * - "block" (default): stacked below the content, full width.
+     * - "inline": grouped with the dismiss control on the right on >=sm screens,
+     *   stacking below the content on narrow screens (a more compact layout).
+     */
+    actionsPlacement?: "inline" | "block";
+    autoDismissMs?: number;
+    dismissLabel?: string;
+    hideIcon?: boolean;
+    icon?: React.ReactNode;
+    onDismiss?: () => void;
+    /**
+     * Externally-controlled visibility. When provided, the component renders from
+     * `open` and never hides itself: dismiss and auto-dismiss only invoke
+     * `onDismiss`, leaving mount/unmount to the consumer. Omit for the default
+     * uncontrolled (self-hiding) behavior.
+     */
+    open?: boolean;
+    title?: React.ReactNode;
+    variant?: InlineNoticeVariant;
+}
+export declare function InlineNotice({ actions, actionsPlacement, autoDismissMs, children, className, dismissLabel, hideIcon, icon, onDismiss, open, title, variant, ...props }: InlineNoticeProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inline-notice.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { IconButton } from "./button.js";
+const noticeStyles = {
+    info: "border-[color:var(--ssui-notice-info-border)] bg-[color:var(--ssui-notice-info-bg)] text-[color:var(--ssui-notice-info-text)]",
+    success: "border-[color:var(--ssui-notice-success-border)] bg-[color:var(--ssui-notice-success-bg)] text-[color:var(--ssui-notice-success-text)]",
+    warning: "border-[color:var(--ssui-notice-warning-border)] bg-[color:var(--ssui-notice-warning-bg)] text-[color:var(--ssui-notice-warning-text)]",
+    danger: "border-[color:var(--ssui-notice-danger-border)] bg-[color:var(--ssui-notice-danger-bg)] text-[color:var(--ssui-notice-danger-text)]"
+};
+const noticeIcons = {
+    info: Info,
+    success: CheckCircle2,
+    warning: AlertTriangle,
+    danger: XCircle
+};
+export function InlineNotice({ actions, actionsPlacement = "block", autoDismissMs, children, className, dismissLabel = "Dismiss notice", hideIcon = false, icon, onDismiss, open, title, variant = "info", ...props }) {
+    const isControlled = open !== undefined;
+    const [visible, setVisible] = React.useState(true);
+    const isVisible = isControlled ? open : visible;
+    const Icon = noticeIcons[variant];
+    React.useEffect(() => {
+        if (autoDismissMs === undefined || !isVisible)
+            return;
+        const timer = window.setTimeout(() => {
+            if (!isControlled)
+                setVisible(false);
+            onDismiss?.();
+        }, autoDismissMs);
+        return () => window.clearTimeout(timer);
+    }, [autoDismissMs, isControlled, isVisible, onDismiss]);
+    if (!isVisible)
+        return null;
+    const role = variant === "danger" || variant === "warning" ? "alert" : "status";
+    const iconNode = hideIcon ? null : (_jsx("div", { className: "mt-0.5 shrink-0", "aria-hidden": "true", children: icon ?? _jsx(Icon, { className: "size-4" }) }));
+    const contentNode = (_jsxs("div", { className: "space-y-1", children: [title ? _jsx("div", { className: "font-medium", children: title }) : null, children ? _jsx("div", { children: children }) : null] }));
+    const dismissNode = onDismiss ? (_jsx(IconButton, { className: "-mr-1 -mt-1 text-current hover:bg-[color:var(--ssui-overlay-hover)]", label: dismissLabel, onClick: () => {
+            if (!isControlled)
+                setVisible(false);
+            onDismiss();
+        }, size: "icon-sm", type: "button", variant: "ghost", children: _jsx(X, {}) })) : null;
+    if (actionsPlacement === "inline") {
+        return (_jsxs("div", { role: role, className: cn("flex flex-col gap-3 rounded-[var(--ssui-radius)] border p-3 text-sm sm:flex-row sm:items-start sm:justify-between", noticeStyles[variant], className), ...props, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [iconNode, _jsx("div", { className: "min-w-0 flex-1", children: contentNode })] }), actions || dismissNode ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2 self-start sm:shrink-0 sm:flex-nowrap", children: [actions, dismissNode] })) : null] }));
+    }
+    return (_jsxs("div", { role: role, className: cn("flex gap-3 rounded-[var(--ssui-radius)] border p-3 text-sm", noticeStyles[variant], className), ...props, children: [iconNode, _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [contentNode, actions ? _jsx("div", { className: "flex flex-wrap gap-2", children: actions }) : null] }), dismissNode] }));
+}

package/dist/components/inline-rename-input.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type InputProps } from "./input.js";
+export interface InlineRenameInputProps extends Omit<InputProps, "defaultValue" | "onCancel" | "onSubmit" | "value"> {
+    initialValue?: string;
+    onCancel?: () => void;
+    onSubmit: (value: string) => void;
+    selectOnMount?: boolean;
+    submitOnBlur?: boolean;
+    value?: string;
+}
+export declare const InlineRenameInput: React.ForwardRefExoticComponent<InlineRenameInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/inline-rename-input.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "./input.js";
+export const InlineRenameInput = React.forwardRef(({ initialValue = "", onCancel, onBlur, onChange, onSubmit, onKeyDown, selectOnMount = true, submitOnBlur = true, value, ...props }, forwardedRef) => {
+    const [draft, setDraft] = React.useState(value ?? initialValue);
+    const inputRef = React.useRef(null);
+    const skippedBlurRef = React.useRef(false);
+    React.useImperativeHandle(forwardedRef, () => inputRef.current);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setDraft(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.focus();
+        if (selectOnMount) {
+            input.select();
+        }
+    }, [selectOnMount]);
+    const commit = React.useCallback(() => {
+        skippedBlurRef.current = true;
+        onSubmit(draft);
+    }, [draft, onSubmit]);
+    return (_jsx(Input, { ref: inputRef, value: draft, onBlur: (event) => {
+            onBlur?.(event);
+            if (skippedBlurRef.current) {
+                skippedBlurRef.current = false;
+                return;
+            }
+            if (submitOnBlur) {
+                onSubmit(draft);
+            }
+        }, onChange: (event) => {
+            setDraft(event.target.value);
+            onChange?.(event);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.nativeEvent.isComposing)
+                return;
+            if (event.key === "Enter") {
+                event.preventDefault();
+                commit();
+                event.currentTarget.blur();
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                skippedBlurRef.current = true;
+                setDraft(value ?? initialValue);
+                onCancel?.();
+                event.currentTarget.blur();
+            }
+        }, ...props }));
+});
+InlineRenameInput.displayName = "InlineRenameInput";

package/dist/components/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input.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 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 })));
+Input.displayName = "Input";

package/dist/components/list-shell.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface ListShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    empty?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    toolbar?: React.ReactNode;
+}
+export declare function ListShell({ children, className, empty, footer, header, toolbar, ...props }: ListShellProps): import("react/jsx-runtime").JSX.Element;
+export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    actions?: React.ReactNode;
+    asChild?: boolean;
+    description?: React.ReactNode;
+    leading?: React.ReactNode;
+    metadata?: React.ReactNode;
+    title?: React.ReactNode;
+}
+export declare const ListRow: React.ForwardRefExoticComponent<ListRowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/list-shell.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export function ListShell({ children, className, empty, footer, header, toolbar, ...props }) {
+    const hasContent = React.Children.count(children) > 0;
+    return (_jsxs("section", { className: cn("overflow-hidden rounded-[var(--ssui-radius-lg)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)]", className), ...props, children: [header ? (_jsx("div", { className: "border-b border-[color:var(--ssui-border)] px-4 py-3", children: header })) : null, toolbar ? (_jsx("div", { className: "border-b border-[color:var(--ssui-border)] px-4 py-3", children: toolbar })) : null, hasContent ? (_jsx("div", { className: "divide-y divide-[color:var(--ssui-border)]", children: children })) : (empty), footer ? (_jsx("div", { className: "border-t border-[color:var(--ssui-border)] px-4 py-3", children: footer })) : null] }));
+}
+export const ListRow = React.forwardRef(({ actions, asChild = false, children, className, description, leading, metadata, title, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsxs(Comp, { ref: ref, className: cn("flex min-h-14 items-center gap-3 px-4 py-3 text-sm text-[color:var(--ssui-text)]", className), ...props, children: [leading ? _jsx("div", { className: "shrink-0", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "truncate font-medium", children: title }) : null, description ? (_jsx("div", { className: "truncate text-[color:var(--ssui-text-muted)]", children: description })) : null, children] }), metadata ? (_jsx("div", { className: "hidden shrink-0 text-[color:var(--ssui-text-muted)] sm:block", children: metadata })) : null, actions ? _jsx("div", { className: "shrink-0", children: actions }) : null] }));
+});
+ListRow.displayName = "ListRow";

package/dist/components/login.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface LoginProvider {
+    /** Selects the built-in brand icon (`google`, `microsoft`, `github`); unknown ids render label-only. */
+    id: string;
+    label: React.ReactNode;
+    /** Rejections surface the Error's message next to this provider's button. */
+    signIn: () => Promise<void>;
+}
+export interface LoginMagicLinkConfig {
+    defaultEmail?: string;
+    /** Rejections surface the Error's message; on resolve the form swaps to the sent confirmation. */
+    sendLink: (email: string) => Promise<void>;
+    sentMessage?: (email: string) => React.ReactNode;
+    submitLabel?: React.ReactNode;
+}
+export interface LoginDevLoginConfig {
+    label?: React.ReactNode;
+    open: () => Promise<void>;
+}
+export interface LoginRequestAccessConfig {
+    /** Consumer-supplied link element (e.g. the app router's `<Link>`), so the package stays framework-independent. */
+    link: React.ReactNode;
+    prompt?: React.ReactNode;
+}
+export interface LoginProps {
+    description?: React.ReactNode;
+    devLogin?: LoginDevLoginConfig;
+    /** Rare escape hatch rendered below the request-access line. */
+    footer?: React.ReactNode;
+    logo?: React.ReactNode;
+    magicLink?: LoginMagicLinkConfig;
+    providers?: LoginProvider[];
+    /** Initial error shown in the provider section, e.g. from an OAuth `?error=` redirect. */
+    providersError?: React.ReactNode;
+    requestAccess?: LoginRequestAccessConfig;
+    /** Visually hidden when a logo is provided; the wordmark carries the branding. */
+    title: React.ReactNode;
+}
+export declare function Login({ description, devLogin, footer, logo, magicLink, providers, providersError, requestAccess, title }: LoginProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/login.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FlaskConical, 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 { brandIconsByProviderId } from "./brand-icons.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+const MAGIC_LINK_FLOW = "magic-link";
+const DEV_LOGIN_FLOW = "dev-login";
+export function Login({ description, devLogin, footer, logo, magicLink, providers = [], providersError, requestAccess, title }) {
+    const flows = useFlowRunner();
+    const emailInputId = React.useId();
+    const [email, setEmail] = React.useState(() => magicLink?.defaultEmail ?? "");
+    const [sentEmail, setSentEmail] = React.useState(null);
+    const [interacted, setInteracted] = React.useState(false);
+    const trimmedEmail = email.trim();
+    const emailReady = isPlausibleEmail(trimmedEmail);
+    const hasDivider = providers.length > 0 && Boolean(magicLink);
+    function startFlow(key, action) {
+        setInteracted(true);
+        return flows.run(key, action);
+    }
+    async function handleMagicLinkSubmit(event) {
+        if (!magicLink)
+            return;
+        event.preventDefault();
+        if (flows.busy || !emailReady)
+            return;
+        const sent = await startFlow(MAGIC_LINK_FLOW, () => magicLink.sendLink(trimmedEmail));
+        if (sent)
+            setSentEmail(trimmedEmail);
+    }
+    return (_jsxs(AuthShell, { children: [_jsx(AuthHeader, { description: description, logo: logo, srOnlyTitleWithLogo: true, title: title }), _jsxs("div", { className: "space-y-5", children: [providers.length > 0 || providersError ? (_jsxs("section", { "aria-label": "Sign-in options", className: "space-y-2", children: [providers.map((provider) => {
+                                const flowKey = `provider:${provider.id}`;
+                                const active = flows.busyKey === flowKey;
+                                const BrandIcon = brandIconsByProviderId[provider.id];
+                                return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Button, { "aria-busy": active || undefined, className: "w-full justify-center", disabled: flows.busy, onClick: () => {
+                                                void startFlow(flowKey, provider.signIn);
+                                            }, type: "button", variant: "secondary", children: [active ? (_jsx(AuthSpinner, {})) : BrandIcon ? (_jsx(BrandIcon, {})) : null, provider.label] }), _jsx(AuthFeedback, { tone: "error", children: flows.errorFor(flowKey) })] }, provider.id));
+                            }), !interacted ? (_jsx(AuthFeedback, { tone: "error", children: providersError })) : null] })) : null, hasDivider ? (_jsxs("div", { "aria-hidden": "true", className: "flex items-center gap-3 text-xs text-[color:var(--ssui-text-subtle)]", children: [_jsx("span", { className: "h-px flex-1 bg-[color:var(--ssui-border)]" }), _jsx("span", { children: "or" }), _jsx("span", { className: "h-px flex-1 bg-[color:var(--ssui-border)]" })] })) : null, magicLink ? (_jsxs("section", { "aria-label": "Email sign-in", className: "space-y-2", children: [sentEmail === null ? (_jsxs("form", { "aria-busy": flows.busyKey === MAGIC_LINK_FLOW || undefined, "aria-label": "Magic link sign-in", className: "space-y-2", onSubmit: handleMagicLinkSubmit, 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 === MAGIC_LINK_FLOW || undefined, className: "w-full justify-center", disabled: flows.busy || !emailReady, type: "submit", variant: "primary", children: [flows.busyKey === MAGIC_LINK_FLOW ? _jsx(AuthSpinner, {}) : _jsx(Mail, {}), magicLink.submitLabel ?? "Continue with email link"] })] })) : (_jsxs("div", { className: "space-y-3", children: [_jsx(AuthFeedback, { tone: "status", children: magicLink.sentMessage?.(sentEmail) ?? (_jsxs(_Fragment, { children: ["We sent a sign-in link to", " ", _jsx("span", { className: "font-medium text-[color:var(--ssui-text)]", children: sentEmail }), ". Check your inbox."] })) }), _jsxs(Button, { "aria-busy": flows.busyKey === MAGIC_LINK_FLOW || undefined, className: "w-full justify-center", disabled: flows.busy, onClick: () => {
+                                            void startFlow(MAGIC_LINK_FLOW, () => magicLink.sendLink(sentEmail));
+                                        }, type: "button", variant: "secondary", children: [flows.busyKey === MAGIC_LINK_FLOW ? _jsx(AuthSpinner, {}) : null, "Resend link"] }), _jsx(Button, { className: "w-full justify-center", disabled: flows.busy, onClick: () => {
+                                            setSentEmail(null);
+                                            flows.clearError();
+                                        }, type: "button", variant: "ghost", children: "Use a different email" })] })), _jsx(AuthFeedback, { tone: "error", children: flows.errorFor(MAGIC_LINK_FLOW) })] })) : null] }), devLogin ? (_jsxs("section", { className: "mt-5 space-y-2 border-t border-dashed border-[color:var(--ssui-border)] pt-4", children: [_jsxs(Button, { "aria-busy": flows.busyKey === DEV_LOGIN_FLOW || undefined, className: "w-full justify-center border-dashed bg-transparent text-[color:var(--ssui-text-muted)] hover:text-[color:var(--ssui-text)]", disabled: flows.busy, onClick: () => {
+                            void startFlow(DEV_LOGIN_FLOW, devLogin.open);
+                        }, type: "button", variant: "outline", children: [flows.busyKey === DEV_LOGIN_FLOW ? _jsx(AuthSpinner, {}) : _jsx(FlaskConical, {}), devLogin.label ?? "Open dev workspace"] }), _jsx(AuthFeedback, { tone: "error", children: flows.errorFor(DEV_LOGIN_FLOW) })] })) : null, requestAccess || footer ? (_jsxs("div", { className: "mt-6 space-y-2", children: [requestAccess ? (_jsx(AuthLinkLine, { link: requestAccess.link, prompt: requestAccess.prompt ?? "Need access?" })) : null, footer ? (_jsx("div", { className: "text-sm text-[color:var(--ssui-text-muted)]", children: footer })) : null] })) : null] }));
+}

package/dist/components/page-header.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    actions?: React.ReactNode;
+    breadcrumbs?: React.ReactNode;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    metadata?: React.ReactNode;
+    title: React.ReactNode;
+}
+export declare function PageHeader({ actions, breadcrumbs, className, description, eyebrow, metadata, title, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/page-header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export function PageHeader({ actions, breadcrumbs, className, description, eyebrow, metadata, title, ...props }) {
+    return (_jsxs("header", { className: cn("flex flex-col gap-4 border-b border-[color:var(--ssui-border)] pb-4 sm:flex-row sm:items-end sm:justify-between", className), ...props, children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [breadcrumbs ? _jsx("div", { children: breadcrumbs }) : null, eyebrow ? (_jsx("div", { className: "text-xs font-medium uppercase text-[color:var(--ssui-text-muted)]", children: eyebrow })) : null, _jsxs("div", { className: "space-y-1", children: [_jsx("h1", { className: "truncate text-2xl font-semibold text-[color:var(--ssui-text)]", children: title }), description ? (_jsx("div", { className: "max-w-3xl text-sm text-[color:var(--ssui-text-muted)]", children: description })) : null] }), metadata ? _jsx("div", { className: "flex flex-wrap gap-2", children: metadata }) : null] }), actions ? _jsx("div", { className: "flex shrink-0 flex-wrap gap-2", children: actions }) : null] }));
+}

package/dist/components/request-access.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface RequestAccessRequestConfig {
+    /** Rejections surface the Error's message inside the request card. */
+    submit: (email: string) => Promise<void>;
+    successMessage?: React.ReactNode;
+}
+export interface RequestAccessCodeConfig {
+    /** Rejections surface the Error's message inside the access-code card. */
+    submit: (code: string) => Promise<void>;
+}
+export interface RequestAccessSignInConfig {
+    /** Consumer-supplied link element (e.g. the app router's `<Link>`), so the package stays framework-independent. */
+    link: React.ReactNode;
+    prompt?: React.ReactNode;
+}
+export interface RequestAccessProps {
+    /** Optional access-code card; omitted entirely when not provided. */
+    accessCode?: RequestAccessCodeConfig;
+    description?: React.ReactNode;
+    logo?: React.ReactNode;
+    request: RequestAccessRequestConfig;
+    signIn?: RequestAccessSignInConfig;
+    title?: React.ReactNode;
+}
+export declare function RequestAccess({ accessCode, description, logo, request, signIn, title }: RequestAccessProps): import("react/jsx-runtime").JSX.Element;