@brdgapp/ui 0.1.1 → 1.0.0

package/components/column-sort-button.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Tip } from "@brdgapp/ui/components/info-hint";
+import { cn } from "@brdgapp/ui/lib/utils";
+function ColumnSortButton({ icon: Icon, label, tooltip, direction, describe, onClick, ...rest }) {
+    const state = direction && describe ? `, sorted ${describe[direction]}` : "";
+    return (_jsx(Tip, { text: tooltip, children: _jsxs(ButtonPrimitive, { ...rest, "data-slot": "column-sort-button", onClick: (e) => {
+                e.stopPropagation();
+                onClick();
+            }, "aria-label": `Sort by ${label.toLowerCase()}${state}`, className: cn("-mx-1.5 inline-flex items-center gap-1.5 rounded px-1.5 py-0.5 text-[12px] font-bold whitespace-nowrap outline-none transition-colors", "hover:bg-[var(--surface-tertiary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)]", direction ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"), children: [_jsx(Icon, { "aria-hidden": "true", className: "size-3.5 text-[var(--text-muted)]" }), label, direction === "desc" ? (_jsx(ArrowDown, { "aria-hidden": "true", className: "size-3 shrink-0 text-[var(--primary)]" })) : direction === "asc" ? (_jsx(ArrowUp, { "aria-hidden": "true", className: "size-3 shrink-0 text-[var(--primary)]" })) : (_jsx(ArrowUpDown, { "aria-hidden": "true", className: "size-3 shrink-0 opacity-40" }))] }) }));
+}
+export { ColumnSortButton };

package/components/confirm-dialog.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+type ConfirmDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    /** A question naming the thing: "Stop sharing with Leah Okonkwo?" */
+    title: string;
+    /** What happens, in a sentence or two. Can emphasise a name. */
+    body: React.ReactNode;
+    /** The action, naming the object: "Stop sharing". Never "OK" or "Yes". */
+    confirmLabel: string;
+    confirmIcon?: React.ReactNode;
+    /** Red confirm button and a warning icon, for things that can't be undone. */
+    destructive?: boolean;
+    /** The action is running: the confirm button spins, and the dialog can't be dismissed. */
+    busy?: boolean;
+    onConfirm: () => void | Promise<void>;
+};
+declare function ConfirmDialog({ open, onClose, title, body, confirmLabel, confirmIcon, destructive, busy, onConfirm }: ConfirmDialogProps): React.JSX.Element;
+export { ConfirmDialog };
+export type { ConfirmDialogProps };

package/components/confirm-dialog.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { TriangleAlert } from "lucide-react";
+import { Button } from "@brdgapp/ui/components/button";
+function ConfirmDialog({ open, onClose, title, body, confirmLabel, confirmIcon, destructive = false, busy = false, onConfirm }) {
+    return (_jsx(AlertDialog.Root, { open: open, onOpenChange: (next) => {
+            // Escape and Cancel close it — but never mid-request: hiding the dialog then would hide the
+            // outcome, and the person can't tell whether the thing happened.
+            if (!next && !busy)
+                onClose();
+        }, children: _jsxs(AlertDialog.Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "fixed inset-0 z-[90] bg-black/40 backdrop-blur-sm transition-opacity duration-300 ease-out data-[ending-style]:duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsxs(AlertDialog.Popup, { "data-slot": "confirm-dialog", className: "fixed top-1/2 left-1/2 z-[90] w-[88vw] max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-6 shadow-[var(--shadow-dialog)] outline-none transition-[opacity,scale] duration-300 ease-out data-[ending-style]:duration-200 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0", children: [destructive ? (_jsx("span", { "aria-hidden": "true", className: "mb-4 flex size-10 items-center justify-center rounded-full bg-[var(--error-bg)] text-[var(--danger-text)]", children: _jsx(TriangleAlert, { className: "size-5" }) })) : null, _jsx(AlertDialog.Title, { className: "text-18 font-bold tracking-tight text-[var(--text-primary)]", children: title }), _jsx(AlertDialog.Description, { render: _jsx("div", {}), className: "mt-2 text-[13px] leading-relaxed text-[var(--text-body)]", children: body }), _jsxs("div", { className: "mt-5 flex gap-2", children: [_jsx(AlertDialog.Close, { disabled: busy, render: _jsx(Button, { variant: "secondary", size: "md", fullWidth: true, children: "Cancel" }) }), _jsx(Button, { variant: destructive ? "destructive" : "primary", size: "md", fullWidth: true, loading: busy, icon: confirmIcon, onClick: async () => {
+                                        await onConfirm();
+                                        onClose();
+                                    }, children: confirmLabel })] })] })] }) }));
+}
+export { ConfirmDialog };

package/components/copy-field.d.ts

@@ -0,0 +1,17 @@
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+type CopyFieldProps = ElementProps<HTMLButtonElement> & {
+    value: string;
+    kind: "email" | "phone";
+    /** `row`: a full-width contact row with a Copy hint on hover. `inline`: a compact meta item. */
+    variant?: "row" | "inline";
+    /** Inline only: the stronger body colour, for a prominent identity line. */
+    strong?: boolean;
+    /** Inline only: text size. */
+    size?: 12 | 14;
+    /** Inline only: show the mail / phone icon. */
+    showIcon?: boolean;
+    className?: string;
+};
+declare function CopyField({ value, kind, variant, strong, size, showIcon, className, ...rest }: CopyFieldProps): import("react").JSX.Element;
+export { CopyField };
+export type { CopyFieldProps };

package/components/copy-field.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { Check, Copy, Mail, Phone } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+function CopyField({ value, kind, variant = "row", strong = false, size = 12, showIcon = true, className, ...rest }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = setTimeout(() => setCopied(false), 1500);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch {
+            // Clipboard blocked (permissions or an insecure page): nothing to undo.
+        }
+    }
+    const Icon = kind === "email" ? Mail : Phone;
+    const label = `Copy ${kind === "email" ? "email" : "phone number"}`;
+    const announcement = (_jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copied" : "" }));
+    if (variant === "inline") {
+        return (_jsxs(ButtonPrimitive, { ...rest, "data-slot": "copy-field", onClick: copy, "aria-label": `${label}: ${value}`, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--primary)]", size === 14 ? "text-[14px]" : "text-[12px]", strong
+                ? "text-[var(--text-body)] hover:text-[var(--text-primary)]"
+                : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]", className), children: [copied ? (_jsx(Check, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-[var(--success)]" })) : showIcon ? (_jsx(Icon, { "aria-hidden": "true", className: "size-3.5 shrink-0" })) : null, _jsx("span", { className: "truncate", children: copied ? "Copied" : value }), announcement] }));
+    }
+    return (_jsxs(ButtonPrimitive, { ...rest, "data-slot": "copy-field", onClick: copy, "aria-label": `${label}: ${value}`, className: cn("group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left outline-none transition-colors", "hover:bg-[var(--surface-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)]", className), children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-[var(--text-disabled)]" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-[var(--text-body)] group-hover:text-[var(--text-primary)]", children: value }), _jsxs("span", { "aria-hidden": "true", className: cn("inline-flex shrink-0 items-center gap-1 text-[12px] font-semibold transition-opacity", copied
+                    ? "text-[var(--success-text)] opacity-100"
+                    : "text-[var(--text-muted)] [@media(hover:hover)]:opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"), children: [copied ? _jsx(Check, { className: "size-3.5" }) : _jsx(Copy, { className: "size-3.5" }), copied ? "Copied" : "Copy"] }), announcement] }));
+}
+export { CopyField };

package/components/data-state.d.ts

@@ -0,0 +1,44 @@
+import type * as React from "react";
+import { type IllustrationName } from "@brdgapp/ui/components/illustration";
+type DataStatus = "loading" | "error" | "success";
+type EmptyContent = {
+    /** A bare Lucide icon, shown in a soft circle. Use `illustration` instead where a drawing fits. */
+    icon?: React.ReactNode;
+    /** One of Bridge's drawings, in place of the icon: "people", "intros", "search"… */
+    illustration?: IllustrationName;
+    /** "sm" (80px) inside a card or side panel; "md" (120px, the default) for a page's main region. */
+    illustrationSize?: "sm" | "md";
+    /** Say what would be here, not just that it's empty: "No intros yet". */
+    title: string;
+    /** What the person gets once there's data, or how to get some. */
+    description?: string;
+    /** One action, usually a primary Button. */
+    action?: React.ReactNode;
+};
+type DataStateProps<T> = {
+    status: DataStatus;
+    data: T | undefined;
+    /**
+     * The loading body. Make it the same size and shape as the loaded content (rows, cells, tiles), so
+     * nothing moves when the data arrives.
+     */
+    skeleton: React.ReactNode;
+    /** Decides whether loaded data counts as empty. Defaults to: an empty array, null or undefined. */
+    isEmpty?: (data: T) => boolean;
+    empty: EmptyContent;
+    /** What failed to load, finishing "Couldn't load …": "introductions", "this profile". */
+    errorSubject: string;
+    /** Load again. When given, the error shows a Retry action. */
+    onRetry?: () => void;
+    /** The loaded body. Only called with data that isn't empty. */
+    children: (data: T) => React.ReactNode;
+    className?: string;
+};
+/**
+ * The one way a data region shows loading, empty and error. It goes INSIDE the card or section: the
+ * frame (title, icon, hint) always renders, and only this body changes. A region never disappears
+ * because its data is missing, and loading never takes over the whole page.
+ */
+declare function DataState<T>({ status, data, skeleton, isEmpty, empty, errorSubject, onRetry, children, className, }: DataStateProps<T>): React.JSX.Element;
+export { DataState };
+export type { DataStateProps, DataStatus, EmptyContent };

package/components/data-state.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@brdgapp/ui/components/button";
+import { Illustration } from "@brdgapp/ui/components/illustration";
+import { cn } from "@brdgapp/ui/lib/utils";
+function defaultIsEmpty(data) {
+    return data == null || (Array.isArray(data) && data.length === 0);
+}
+/**
+ * The one way a data region shows loading, empty and error. It goes INSIDE the card or section: the
+ * frame (title, icon, hint) always renders, and only this body changes. A region never disappears
+ * because its data is missing, and loading never takes over the whole page.
+ */
+function DataState({ status, data, skeleton, isEmpty = defaultIsEmpty, empty, errorSubject, onRetry, children, className, }) {
+    const state = status !== "success" ? status : data === undefined || isEmpty(data) ? "empty" : "ready";
+    return (_jsxs("div", { "data-slot": "data-state", "data-state": state, "aria-busy": state === "loading" || undefined, "aria-live": "polite", className: cn("min-w-0", className), children: [state === "loading" ? skeleton : null, state === "error" ? _jsx(DataStateError, { subject: errorSubject, onRetry: onRetry }) : null, state === "empty" ? _jsx(DataStateEmpty, { ...empty }) : null, state === "ready" ? children(data) : null] }));
+}
+function DataStateEmpty({ icon, illustration, illustrationSize = "md", title, description, action }) {
+    return (_jsxs("div", { "data-slot": "data-state-empty", className: "flex flex-col items-center gap-4 px-6 py-10 text-center", children: [illustration ? (_jsx(Illustration, { name: illustration, size: illustrationSize })) : icon ? (_jsx("span", { "aria-hidden": "true", className: "flex size-12 items-center justify-center rounded-full bg-[var(--surface-secondary)] text-[var(--text-disabled)] [&_svg]:size-6", children: icon })) : null, _jsxs("div", { children: [_jsx("p", { className: "text-16 font-bold tracking-tight text-[var(--text-primary)]", children: title }), description ? (_jsx("p", { className: "mx-auto mt-1 max-w-xs text-[13px] leading-relaxed text-[var(--text-body)]", children: description })) : null] }), action] }));
+}
+function DataStateError({ subject, onRetry }) {
+    return (_jsxs("div", { "data-slot": "data-state-error", role: "alert", className: "flex flex-col items-center gap-3 px-6 py-10 text-center", children: [_jsx("span", { "aria-hidden": "true", className: "flex size-12 items-center justify-center rounded-full bg-[var(--error-bg)] text-[var(--danger-text)] [&_svg]:size-6", children: _jsx(AlertCircle, {}) }), _jsxs("p", { className: "text-16 font-bold tracking-tight text-[var(--text-primary)]", children: ["Couldn\u2019t load ", subject] }), onRetry ? (_jsx(Button, { variant: "link", size: "sm", onClick: onRetry, children: "Try again" })) : (_jsx("p", { className: "text-[13px] text-[var(--text-body)]", children: "Try again shortly." }))] }));
+}
+export { DataState };

package/components/data-table.d.ts

@@ -0,0 +1,65 @@
+import type * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+type DataTableColumn<T> = {
+    key: string;
+    label: string;
+    icon: LucideIcon;
+    /** Comfortable width in px. The column never gets narrower; below the total, the table scrolls. */
+    minWidth: number;
+    /** Share of any extra width on wide screens. Default 1; a small badge column might use 0.3. */
+    weight?: number;
+    /** Explains the column in a tooltip on its header. */
+    tooltip?: string;
+    /** Replaces the default header, e.g. with ColumnSortButton or ColumnFilterMenu. */
+    headerContent?: React.ReactNode;
+    render: (row: T) => React.ReactNode;
+};
+type ColumnMeta = Pick<DataTableColumn<unknown>, "key" | "label" | "icon" | "minWidth" | "weight" | "tooltip">;
+/** The default column header: icon + label, with an optional explanation. */
+declare function DataTableHeader({ icon: Icon, label, tooltip }: {
+    icon: LucideIcon;
+    label: string;
+    tooltip?: string;
+}): React.JSX.Element;
+type DataTableProps<T> = {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    /** Makes rows clickable (and reachable with Tab, opened with Enter). */
+    onRowClick?: (row: T) => void;
+    /** Called on hover or focus, to warm data a click will need. Keep it cheap and repeatable. */
+    onRowPrefetch?: (row: T) => void;
+    /** Extra attributes for each row (`data-*`, `aria-*`, `id`). The table's own row props win. */
+    rowProps?: (row: T) => ElementProps<HTMLDivElement>;
+    /** Names the table for screen readers: "Introductions". */
+    "aria-label"?: string;
+};
+declare function DataTable<T>({ columns, rows, rowKey, onRowClick, onRowPrefetch, rowProps, ...props }: DataTableProps<T>): React.JSX.Element;
+/**
+ * The loading body for a DataTable. Takes the same column list (without `render`), so its widths and
+ * column count can't drift from the real table. To make the swap to real data jump-free, pass the
+ * loaded row's `rowHeight` and, if the table has a pager, `pagination`.
+ */
+declare function DataTableSkeleton({ columns, rows, rowHeight, pagination, }: {
+    columns: ColumnMeta[];
+    rows?: number;
+    /** A loaded row's height in px, not counting its 1px divider (a row with a 28px avatar is 56). */
+    rowHeight?: number;
+    /** Reserve the pager's 52px under the rows. */
+    pagination?: boolean;
+}): React.JSX.Element;
+/**
+ * The pager under a DataTable: "1–15 of 34", previous, page numbers, next. Needs an EXACT total: with
+ * an estimated count or varying page sizes, the page numbers would lie — use "load more" there.
+ * Renders nothing when there is only one page.
+ */
+declare function DataTablePagination({ page, pageSize, totalCount, loading, onPageChange, }: {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    loading?: boolean;
+    onPageChange: (page: number) => void;
+}): React.JSX.Element | null;
+export { DataTable, DataTableHeader, DataTableSkeleton, DataTablePagination };
+export type { DataTableColumn, DataTableProps };

package/components/data-table.js

@@ -0,0 +1,84 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { Tip } from "@brdgapp/ui/components/info-hint";
+import { cn } from "@brdgapp/ui/lib/utils";
+function gridTemplate(columns) {
+    return columns.map((c) => `minmax(${c.minWidth}px, ${c.weight ?? 1}fr)`).join(" ");
+}
+function minTableWidth(columns) {
+    return columns.reduce((sum, c) => sum + c.minWidth, 0);
+}
+function cellPadding(index, count) {
+    if (index === 0)
+        return "pl-6 pr-3";
+    if (index === count - 1)
+        return "pl-3 pr-6";
+    return "px-3";
+}
+/** The default column header: icon + label, with an optional explanation. */
+function DataTableHeader({ icon: Icon, label, tooltip }) {
+    return (_jsx(Tip, { text: tooltip, focusable: Boolean(tooltip), children: _jsxs("span", { "data-slot": "data-table-header", className: "inline-flex items-center gap-1.5 text-[12px] font-bold whitespace-nowrap text-[var(--text-secondary)]", children: [_jsx(Icon, { "aria-hidden": "true", className: "size-3.5 text-[var(--text-muted)]" }), label] }) }));
+}
+function HeaderRow({ columns, template }) {
+    return (_jsx("div", { role: "row", className: "grid border-b border-[var(--border-divider)] bg-[var(--surface-secondary)]/40", style: { gridTemplateColumns: template }, children: columns.map((c, i) => (
+        // Height comes from the content, as in Bridge OS: 42px for a plain header, 46px with a sort or
+        // filter button. (Open question for Aman: one fixed height would stop the 4px skeleton jump on
+        // sortable tables but make plain headers taller.)
+        _jsx("div", { role: "columnheader", className: cn(cellPadding(i, columns.length), "flex items-center py-3"), children: c.headerContent ?? _jsx(DataTableHeader, { icon: c.icon, label: c.label, tooltip: c.tooltip }) }, c.key))) }));
+}
+function DataTable({ columns, rows, rowKey, onRowClick, onRowPrefetch, rowProps, ...props }) {
+    const template = gridTemplate(columns);
+    return (_jsx("div", { "data-slot": "data-table", className: "overflow-x-auto", children: _jsxs("div", { role: "table", "aria-label": props["aria-label"], style: { minWidth: minTableWidth(columns) }, children: [_jsx(HeaderRow, { columns: columns, template: template }), _jsx("div", { role: "rowgroup", children: rows.map((row) => (_createElement("div", { ...rowProps?.(row), key: rowKey(row), role: "row", "data-slot": "data-table-row", tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                            ? (e) => {
+                                // Only the row itself: a button inside the row handles its own keys.
+                                if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                                    e.preventDefault();
+                                    onRowClick(row);
+                                }
+                            }
+                            : undefined, onMouseEnter: onRowPrefetch ? () => onRowPrefetch(row) : undefined, onFocus: onRowPrefetch ? () => onRowPrefetch(row) : undefined, className: cn("grid border-b border-[var(--border-divider)] transition-colors last:border-0", onRowClick
+                            ? "cursor-pointer outline-none hover:bg-[var(--surface-tertiary)] focus-visible:bg-[var(--surface-tertiary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-inset"
+                            : "hover:bg-[var(--surface-secondary)]/40"), style: { gridTemplateColumns: template } }, columns.map((c, i) => (_jsx("div", { role: "cell", className: cn(cellPadding(i, columns.length), "flex min-w-0 items-center py-3.5"), children: _jsx("div", { className: "w-full min-w-0", children: c.render(row) }) }, c.key)))))) })] }) }));
+}
+/**
+ * The loading body for a DataTable. Takes the same column list (without `render`), so its widths and
+ * column count can't drift from the real table. To make the swap to real data jump-free, pass the
+ * loaded row's `rowHeight` and, if the table has a pager, `pagination`.
+ */
+function DataTableSkeleton({ columns, rows = 5, rowHeight, pagination = false, }) {
+    const template = gridTemplate(columns);
+    return (_jsxs("div", { "data-slot": "data-table-skeleton", "aria-hidden": "true", className: "overflow-x-auto", children: [_jsxs("div", { style: { minWidth: minTableWidth(columns) }, children: [_jsx(HeaderRow, { columns: columns, template: template }), Array.from({ length: rows }, (_, r) => (_jsx("div", { className: "grid border-b border-[var(--border-divider)] last:border-0", style: { gridTemplateColumns: template }, children: columns.map((c, i) => (
+                        // The height goes on the cells, so the row's divider adds to it exactly as in the real table.
+                        _jsx("div", { className: cn(cellPadding(i, columns.length), "flex min-w-0 items-center py-3.5"), style: { minHeight: rowHeight }, children: _jsx("div", { className: "h-3.5 w-full max-w-[160px] animate-pulse rounded bg-[var(--surface-tertiary)] motion-reduce:animate-none" }) }, c.key))) }, r)))] }), pagination ? (_jsxs("div", { className: "flex h-[52px] items-center justify-between px-6", children: [_jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-[var(--surface-tertiary)] motion-reduce:animate-none" }), _jsx("div", { className: "h-7 w-32 animate-pulse rounded-lg bg-[var(--surface-tertiary)] motion-reduce:animate-none" })] })) : null] }));
+}
+const pagerButton = "flex size-7 items-center justify-center rounded-lg text-[var(--text-muted)] outline-none transition-colors hover:bg-[var(--surface-secondary)] hover:text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)] disabled:cursor-not-allowed disabled:opacity-50";
+/** 1 … 4 5 6 … 12 — first and last always, the current page ±1, an ellipsis for gaps. */
+function pageList(page, totalPages) {
+    if (totalPages <= 7)
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    const pages = [1];
+    if (page > 3)
+        pages.push("…");
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++)
+        pages.push(i);
+    if (page < totalPages - 2)
+        pages.push("…");
+    pages.push(totalPages);
+    return pages;
+}
+/**
+ * The pager under a DataTable: "1–15 of 34", previous, page numbers, next. Needs an EXACT total: with
+ * an estimated count or varying page sizes, the page numbers would lie — use "load more" there.
+ * Renders nothing when there is only one page.
+ */
+function DataTablePagination({ page, pageSize, totalCount, loading = false, onPageChange, }) {
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    if (totalPages <= 1)
+        return null;
+    const n = (v) => v.toLocaleString("en-US");
+    return (_jsxs("nav", { "data-slot": "data-table-pagination", "aria-label": "Pages", className: "flex items-center justify-between gap-4 px-6 py-3", children: [_jsxs("p", { className: "shrink-0 text-[12px] tabular-nums text-[var(--text-muted)]", children: [n((page - 1) * pageSize + 1), "\u2013", n(Math.min(page * pageSize, totalCount)), " of ", n(totalCount)] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ButtonPrimitive, { onClick: () => onPageChange(page - 1), disabled: page === 1 || loading, "aria-label": "Previous page", className: pagerButton, children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-3.5" }) }), pageList(page, totalPages).map((p, i) => p === "…" ? (_jsx("span", { "aria-hidden": "true", className: "flex size-7 items-center justify-center text-[12px] text-[var(--text-muted)]", children: "\u2026" }, `gap-${i}`)) : (_jsx(ButtonPrimitive, { onClick: () => onPageChange(p), disabled: loading, "aria-label": `Page ${p}`, "aria-current": p === page ? "page" : undefined, className: cn(pagerButton, "w-auto min-w-7 px-1.5 text-[12px] font-semibold tabular-nums disabled:opacity-100", p === page && "bg-[var(--primary-solid)] text-white hover:bg-[var(--primary-solid)] hover:text-white"), children: loading && p === page ? _jsx(Loader2, { "aria-hidden": "true", className: "mx-auto size-3 animate-spin" }) : p }, p))), _jsx(ButtonPrimitive, { onClick: () => onPageChange(page + 1), disabled: page === totalPages || loading, "aria-label": "Next page", className: pagerButton, children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-3.5" }) })] })] }));
+}
+export { DataTable, DataTableHeader, DataTableSkeleton, DataTablePagination };

package/components/dialog.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+type DialogProps = {
+    open: boolean;
+    onClose: () => void;
+    /** What the dialog does: "Add a network", "Edit Saltmarsh Partners". */
+    title: string;
+    /** One optional line under the title. */
+    description?: React.ReactNode;
+    /** The form. */
+    children: React.ReactNode;
+    /** The buttons. Put a destructive action first (it sits on the left), then Cancel and the primary action. */
+    footer?: React.ReactNode;
+    /** A save is running: the dialog can't be dismissed until it finishes. */
+    busy?: boolean;
+    className?: string;
+};
+declare function Dialog({ open, onClose, title, description, children, footer, busy, className }: DialogProps): React.JSX.Element;
+export { Dialog };
+export type { DialogProps };

package/components/dialog.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import { IconButton } from "@brdgapp/ui/components/icon-button";
+import { cn } from "@brdgapp/ui/lib/utils";
+function Dialog({ open, onClose, title, description, children, footer, busy = false, className }) {
+    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: (next) => !next && !busy && onClose(), children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-[90] bg-black/40 backdrop-blur-sm transition-opacity duration-300 ease-out data-[ending-style]:duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog", className: cn("fixed top-1/2 left-1/2 z-[90] flex max-h-[calc(100dvh-32px)] w-[calc(100vw-32px)] max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] shadow-[var(--shadow-dialog)] outline-none", "transition-[opacity,scale] duration-300 ease-out data-[ending-style]:duration-200 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0", className), children: [_jsxs("header", { "data-slot": "dialog-header", className: "flex items-start gap-3 px-6 pt-6 pb-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(DialogPrimitive.Title, { className: "text-18 font-bold tracking-tight text-[var(--text-primary)]", children: title }), description ? (_jsx(DialogPrimitive.Description, { className: "mt-1 text-[13px] text-[var(--text-body)]", children: description })) : null] }), _jsx(DialogPrimitive.Close, { disabled: busy, render: _jsx(IconButton, { "aria-label": "Close", size: "sm", className: "-mt-1 -mr-2", children: _jsx(X, {}) }) })] }), _jsx("div", { "data-slot": "dialog-body", className: "min-h-0 flex-1 overflow-y-auto px-6 pb-2", children: children }), footer ? (_jsx("footer", { "data-slot": "dialog-footer", className: "flex items-center justify-end gap-2 px-6 pt-4 pb-6", children: footer })) : null] })] }) }));
+}
+export { Dialog };

package/components/drawer.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+declare const WIDTH: {
+    readonly item: "max-w-xl";
+    readonly list: "max-w-2xl";
+};
+type DrawerProps = {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    /** One line under the title: who, when. */
+    subtitle?: React.ReactNode;
+    /** `item` 576px for one record; `list` 672px for a list. */
+    size?: keyof typeof WIDTH;
+    /** Actions beside the close button, such as an ActionMenu. */
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+};
+declare function Drawer({ open, onClose, title, subtitle, size, actions, children, className }: DrawerProps): React.JSX.Element;
+export { Drawer };
+export type { DrawerProps };

package/components/drawer.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import { IconButton } from "@brdgapp/ui/components/icon-button";
+import { cn } from "@brdgapp/ui/lib/utils";
+// The right-hand panel for one item's details or a short list (approved 2026-11-02, "Panes, rails and
+// sheets"). Shape from Bridge OS's intro / relationship / week drawers: slides in from the right, below
+// the 56px top bar, over a dimmed page; Escape or ✕ closes it. Two widths: `item` (576px, one intro)
+// and `list` (672px, a relationship or a week of contacts). Built on Base UI Dialog: focus is trapped
+// and returns to the opener; a drawer opened from a drawer closes first on Escape. z-[60], Bridge's
+// layer for search and drawers, so menus (80) and confirms (90) opened from it sit above.
+const WIDTH = { item: "max-w-xl", list: "max-w-2xl" };
+function Drawer({ open, onClose, title, subtitle, size = "item", actions, children, className }) {
+    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: (next) => !next && onClose(), children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-x-0 top-14 bottom-0 z-[60] bg-black/30 transition-opacity duration-300 ease-out data-[ending-style]:duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsxs(DialogPrimitive.Popup, { "data-slot": "drawer", "data-size": size, className: cn("fixed top-14 right-0 bottom-0 z-[60] flex w-full flex-col border-l border-[var(--border-default)] bg-[var(--surface-elevated)] shadow-[var(--shadow-drawer)] outline-none", "transition-transform duration-300 ease-out data-[ending-style]:duration-200 data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full", WIDTH[size], className), children: [_jsxs("header", { "data-slot": "drawer-header", className: "flex items-start gap-2 border-b border-[var(--border-divider)] px-6 py-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(DialogPrimitive.Title, { className: "truncate text-18 font-bold tracking-tight text-[var(--text-primary)]", children: title }), subtitle ? (_jsx(DialogPrimitive.Description, { className: "mt-0.5 truncate text-[12px] text-[var(--text-muted)]", children: subtitle })) : null] }), actions, _jsx(DialogPrimitive.Close, { render: _jsx(IconButton, { "aria-label": "Close", size: "sm", children: _jsx(X, {}) }) })] }), _jsx("div", { "data-slot": "drawer-body", className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-5", children: children })] })] }) }));
+}
+export { Drawer };

package/components/expandable-bio.d.ts

@@ -0,0 +1,8 @@
+type ExpandableBioProps = {
+    text: string;
+    size?: 12 | 14;
+    className?: string;
+};
+declare function ExpandableBio({ text, size, className }: ExpandableBioProps): import("react").JSX.Element;
+export { ExpandableBio };
+export type { ExpandableBioProps };

package/components/expandable-bio.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "@brdgapp/ui/components/button";
+import { cn } from "@brdgapp/ui/lib/utils";
+function ExpandableBio({ text, size = 12, className }) {
+    const trimmed = text.trim();
+    const [expanded, setExpanded] = useState(false);
+    const [truncatable, setTruncatable] = useState(false);
+    const ref = useRef(null);
+    const id = useId();
+    useEffect(() => {
+        const el = ref.current;
+        // Measure only while collapsed, so expanding never flips the flag off.
+        if (!el || expanded)
+            return;
+        // ResizeObserver's first callback runs async, so state isn't set synchronously in the effect.
+        const observer = new ResizeObserver(() => setTruncatable(el.scrollHeight > el.clientHeight + 1));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [trimmed, expanded]);
+    return (_jsxs("div", { "data-slot": "expandable-bio", className: className, children: [_jsx("p", { id: id, ref: ref, 
+                // Size before line height: the class merger lets a font size override an earlier line height.
+                className: cn("text-[var(--text-body)]", size === 14 ? "text-[14px]" : "text-[12px]", "leading-relaxed", !expanded && "line-clamp-1"), children: trimmed }), truncatable || expanded ? (_jsx(Button, { variant: "link", size: "xs", className: "mt-1", "aria-expanded": expanded, "aria-controls": id, onClick: () => setExpanded((v) => !v), children: expanded ? "See less" : "See more" })) : null] }));
+}
+export { ExpandableBio };

package/components/field.d.ts

@@ -0,0 +1,29 @@
+import type * as React from "react";
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+type FieldProps = Omit<FieldPrimitive.Root.Props, "className"> & {
+    /** The value has a problem. Turns the control red and lets FieldError show. */
+    invalid?: boolean;
+    className?: string;
+};
+/** One field. Put a FieldLabel, the control (Input, TagInput…), and optionally FieldDescription and FieldError inside. */
+declare function Field({ className, invalid, ...props }: FieldProps): React.JSX.Element;
+type FieldLabelProps = Omit<FieldPrimitive.Label.Props, "className"> & {
+    /** Adds "(optional)" after the label, in muted text. Required fields get no mark. */
+    optional?: boolean;
+    className?: string;
+};
+declare function FieldLabel({ className, optional, children, ...props }: FieldLabelProps): React.JSX.Element;
+type FieldDescriptionProps = Omit<FieldPrimitive.Description.Props, "className"> & {
+    className?: string;
+};
+/** Help text under the control: what the value is for. Read out with the field. */
+declare function FieldDescription({ className, ...props }: FieldDescriptionProps): React.JSX.Element;
+type FieldErrorProps = Omit<FieldPrimitive.Error.Props, "className" | "match"> & {
+    className?: string;
+};
+/** What's wrong and how to fix it. Shows whenever it has text; pair it with `invalid` on the Field. */
+declare function FieldError({ className, children, ...props }: FieldErrorProps): React.JSX.Element | null;
+/** Stacks fields 16px apart. */
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };
+export type { FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldProps };

package/components/field.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { AlertCircle } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** One field. Put a FieldLabel, the control (Input, TagInput…), and optionally FieldDescription and FieldError inside. */
+function Field({ className, invalid, ...props }) {
+    return _jsx(FieldPrimitive.Root, { "data-slot": "field", invalid: invalid, className: cn("flex flex-col gap-1.5", className), ...props });
+}
+function FieldLabel({ className, optional, children, ...props }) {
+    return (_jsxs(FieldPrimitive.Label, { "data-slot": "field-label", className: cn("text-[14px] font-medium text-[var(--text-primary)]", className), ...props, children: [children, optional ? _jsx("span", { className: "font-normal text-[var(--text-muted)]", children: " (optional)" }) : null] }));
+}
+/** Help text under the control: what the value is for. Read out with the field. */
+function FieldDescription({ className, ...props }) {
+    return _jsx(FieldPrimitive.Description, { "data-slot": "field-description", className: cn("text-[12px] text-[var(--text-muted)]", className), ...props });
+}
+/** What's wrong and how to fix it. Shows whenever it has text; pair it with `invalid` on the Field. */
+function FieldError({ className, children, ...props }) {
+    if (!children)
+        return null;
+    return (_jsxs(FieldPrimitive.Error, { "data-slot": "field-error", match: true, className: cn("flex items-start gap-1.5 text-[12px] text-[var(--danger-text)]", className), ...props, children: [_jsx(AlertCircle, { "aria-hidden": "true", className: "mt-px size-3.5 shrink-0" }), _jsx("span", { children: children })] }));
+}
+/** Stacks fields 16px apart. */
+function FieldGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "field-group", className: cn("flex flex-col gap-4", className), ...props });
+}
+export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };

package/components/filter-chip.d.ts

@@ -0,0 +1,11 @@
+import { Toggle } from "@base-ui/react/toggle";
+type FilterChipProps = Omit<Toggle.Props, "className" | "pressed" | "defaultPressed"> & {
+    /** Whether this filter is on. The parent owns it. */
+    active?: boolean;
+    /** A count shown after the label, such as "All 128". */
+    count?: number;
+    className?: string;
+};
+declare function FilterChip({ active, count, className, children, ...props }: FilterChipProps): import("react").JSX.Element;
+export { FilterChip };
+export type { FilterChipProps };

package/components/filter-chip.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { cn } from "@brdgapp/ui/lib/utils";
+function FilterChip({ active = false, count, className, children, ...props }) {
+    return (_jsxs(Toggle, { "data-slot": "filter-chip", pressed: active, className: cn("inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[13px] font-semibold transition-colors duration-150 outline-none", "focus-visible:ring-2 focus-visible:ring-[var(--primary)]", "border-[var(--text-disabled)] bg-transparent text-[var(--text-secondary)] hover:border-[var(--text-muted)] hover:text-[var(--text-primary)]", "data-[pressed]:border-[var(--text-muted)] data-[pressed]:bg-[var(--surface-tertiary)] data-[pressed]:text-[var(--text-primary)]", "disabled:pointer-events-none disabled:opacity-50", className), ...props, children: [children, count != null ? (_jsx("span", { "data-slot": "filter-chip-count", className: "font-normal tabular-nums text-[var(--text-muted)]", children: count.toLocaleString("en-GB") })) : null] }));
+}
+export { FilterChip };

package/components/filter-pill.d.ts

@@ -0,0 +1,34 @@
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+type FilterPillOption<T extends string> = {
+    value: T;
+    label: string;
+};
+/** The menu body shared by FilterPill and ColumnFilterMenu. */
+declare function FilterMenuPopup<T extends string>({ value, options, onChange, width, align, }: {
+    value: T;
+    options: FilterPillOption<T>[];
+    onChange: (value: T) => void;
+    width: number;
+    align: "start" | "end";
+}): import("react").JSX.Element;
+/** The same choices as FilterMenuPopup, as a bottom sheet: what phones get below 768px. */
+declare function FilterSheet<T extends string>({ open, onClose, title, value, options, onChange, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    value: T;
+    options: FilterPillOption<T>[];
+    onChange: (value: T) => void;
+}): import("react").JSX.Element;
+type FilterPillProps<T extends string> = ElementProps<HTMLButtonElement> & {
+    value: T;
+    /** The first option is the resting "All" state. */
+    options: FilterPillOption<T>[];
+    onChange: (value: T) => void;
+    /** What is being filtered: "Degree", "Status". Read as "Degree: 1st". */
+    ariaLabel?: string;
+    className?: string;
+};
+declare function FilterPill<T extends string>({ value, options, onChange, ariaLabel, className, ...rest }: FilterPillProps<T>): import("react").JSX.Element;
+export { FilterPill, FilterMenuPopup, FilterSheet };
+export type { FilterPillOption, FilterPillProps };

package/components/filter-pill.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu } from "@base-ui/react/menu";
+import { Check, ChevronDown } from "lucide-react";
+import { BottomSheet, BottomSheetOption } from "@brdgapp/ui/components/bottom-sheet";
+import { useIsMobile } from "@brdgapp/ui/hooks/use-is-mobile";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** The menu body shared by FilterPill and ColumnFilterMenu. */
+function FilterMenuPopup({ value, options, onChange, width, align, }) {
+    return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { side: "bottom", align: align, sideOffset: 6, collisionPadding: 8, className: "z-[80]", children: _jsx(Menu.Popup, { "data-slot": "filter-menu", style: { minWidth: width }, className: "max-h-[320px] overflow-y-auto rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] py-1 shadow-[var(--shadow-menu)] outline-none transition-opacity duration-200 ease-out data-[ending-style]:duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0", children: _jsx(Menu.RadioGroup, { value: value, onValueChange: (v) => onChange(v), children: options.map((option) => (_jsxs(Menu.RadioItem, { value: option.value, closeOnClick: true, "data-slot": "filter-menu-option", className: "group flex w-full cursor-default items-center justify-between gap-3 px-3 py-2 text-left text-[13px] text-[var(--text-body)] outline-none transition-colors data-[checked]:font-semibold data-[checked]:text-[var(--text-primary)] data-[highlighted]:bg-[var(--surface-secondary)] hover:bg-[var(--surface-secondary)]", children: [_jsx("span", { className: "truncate", children: option.label }), _jsx(Menu.RadioItemIndicator, { className: "inline-flex shrink-0", children: _jsx(Check, { "aria-hidden": "true", className: "size-4 text-[var(--primary)]" }) })] }, option.value))) }) }) }) }));
+}
+/** The same choices as FilterMenuPopup, as a bottom sheet: what phones get below 768px. */
+function FilterSheet({ open, onClose, title, value, options, onChange, }) {
+    return (_jsx(BottomSheet, { open: open, onClose: onClose, title: title, children: _jsx("div", { role: "radiogroup", "aria-label": title, "data-slot": "filter-sheet", children: options.map((option) => (_jsx(BottomSheetOption, { selected: option.value === value, onSelect: () => {
+                    onChange(option.value);
+                    onClose();
+                }, children: option.label }, option.value))) }) }));
+}
+function FilterPill({ value, options, onChange, ariaLabel = "Filter", className, ...rest }) {
+    const [open, setOpen] = useState(false);
+    const mobile = useIsMobile();
+    const active = value !== options[0]?.value;
+    const label = options.find((o) => o.value === value)?.label ?? options[0]?.label ?? "";
+    const triggerClass = cn("inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-[13px] font-semibold outline-none transition-colors", "focus-visible:ring-2 focus-visible:ring-[var(--primary)]", active
+        ? "border-[var(--border-hover)] bg-[var(--surface-tertiary)] text-[var(--text-primary)]"
+        : "border-[var(--border-default)] bg-transparent text-[var(--text-muted)] hover:text-[var(--text-body)]", className);
+    const inner = (_jsxs(_Fragment, { children: [label, _jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-3.5 text-[var(--text-muted)] transition-transform", open && "rotate-180") })] }));
+    // Phones: the choices slide up from the bottom, near the thumb, in 44px rows.
+    if (mobile) {
+        return (_jsxs(_Fragment, { children: [_jsx("button", { ...rest, type: "button", "data-slot": "filter-pill", "aria-haspopup": "dialog", "aria-label": `${ariaLabel}: ${label}`, className: triggerClass, onClick: () => setOpen(true), children: inner }), _jsx(FilterSheet, { open: open, onClose: () => setOpen(false), title: ariaLabel, value: value, options: options, onChange: onChange })] }));
+    }
+    return (_jsxs(Menu.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Menu.Trigger, { ...rest, "data-slot": "filter-pill", "aria-label": `${ariaLabel}: ${label}`, className: triggerClass, children: inner }), _jsx(FilterMenuPopup, { value: value, options: options, onChange: onChange, width: 200, align: "end" })] }));
+}
+export { FilterPill, FilterMenuPopup, FilterSheet };