@brdgapp/ui 0.1.2 → 1.0.0

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 };

package/components/hover-card.d.ts

@@ -0,0 +1,21 @@
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+type HoverCardProps = PreviewCardPrimitive.Root.Props;
+/** Holds the trigger and the card. */
+declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;
+type HoverCardTriggerProps = Omit<PreviewCardPrimitive.Trigger.Props, "className"> & {
+    /** Layout only. The trigger is usually a person's name or a logo, styled where it's used. */
+    className?: string;
+};
+/**
+ * What people hover: a name or a logo. A link by default (`href` to the full profile); pass `render` to
+ * use your router's link or a button instead.
+ */
+declare function HoverCardTrigger({ delay, closeDelay, className, ...props }: HoverCardTriggerProps): import("react").JSX.Element;
+type HoverCardContentProps = Omit<PreviewCardPrimitive.Popup.Props, "className"> & Pick<PreviewCardPrimitive.Positioner.Props, "side" | "align"> & {
+    /** Width only: `w-72`, `w-[374px]`. 320px by default. */
+    className?: string;
+};
+/** The card. Read-only: what something is, never buttons. */
+declare function HoverCardContent({ side, align, className, ...props }: HoverCardContentProps): import("react").JSX.Element;
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps };

package/components/hover-card.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** Holds the trigger and the card. */
+function HoverCard(props) {
+    return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+/**
+ * What people hover: a name or a logo. A link by default (`href` to the full profile); pass `render` to
+ * use your router's link or a button instead.
+ */
+function HoverCardTrigger({ delay = 300, closeDelay = 150, className, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", delay: delay, closeDelay: closeDelay, className: cn("rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)]", className), ...props }));
+}
+/** The card. Read-only: what something is, never buttons. */
+function HoverCardContent({ side = "bottom", align = "start", className, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Portal, { children: _jsx(PreviewCardPrimitive.Positioner, { side: side, align: align, sideOffset: 6, collisionPadding: 12, className: "z-[80]", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("w-80 max-w-[calc(100vw-24px)] origin-[var(--transform-origin)] rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-3 text-[13px] text-[var(--text-body)] shadow-[var(--shadow-dropdown)] outline-none", "transition-[opacity,scale] duration-200 ease-out data-[ending-style]:duration-150 motion-reduce:transition-none", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0", className), ...props }) }) }));
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/components/icon-button.d.ts

@@ -0,0 +1,16 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const iconButtonVariants: (props?: ({
+    variant?: "default" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type IconButtonProps = Omit<ButtonPrimitive.Props, "className" | "aria-label"> & VariantProps<typeof iconButtonVariants> & {
+    /** Required: an icon has no visible name, so this is what screen readers say. Name the action: "Close". */
+    "aria-label": string;
+    /** The action is running: shows a spinner, disables the button, sets `aria-busy`. */
+    loading?: boolean;
+    className?: string;
+};
+declare function IconButton({ className, variant, size, loading, disabled, children, ...props }: IconButtonProps): import("react").JSX.Element;
+export { IconButton, iconButtonVariants };
+export type { IconButtonProps };

package/components/icon-button.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+// The one icon-only button: close, kebab, back, copy, sync. Always round. Ported from Bridge OS
+// src/components/ui/icon-button.tsx onto Base UI Button. All sizes clear the 24px minimum target.
+const iconButtonVariants = cva([
+    "inline-grid shrink-0 place-items-center rounded-full border border-transparent",
+    "transition-colors duration-150 ease-out outline-none",
+    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-primary)]",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:size-4",
+], {
+    variants: {
+        variant: {
+            default: "text-[var(--text-muted)] hover:bg-[var(--surface-secondary)] hover:text-[var(--text-primary)] focus-visible:ring-[var(--primary)]",
+            danger: "text-[var(--text-muted)] hover:bg-[var(--error-bg)] hover:text-[var(--danger-text)] focus-visible:ring-[var(--error)]",
+        },
+        size: {
+            sm: "size-7",
+            md: "size-8",
+            lg: "size-9",
+        },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+});
+function IconButton({ className, variant, size, loading = false, disabled, children, ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "icon-button", className: cn(iconButtonVariants({ variant, size }), className), disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: _jsx("span", { "aria-hidden": "true", className: "inline-grid place-items-center", children: loading ? _jsx(Loader2, { className: "animate-spin" }) : children }) }));
+}
+export { IconButton, iconButtonVariants };

package/components/illustration.d.ts

@@ -0,0 +1,33 @@
+declare const DRAWINGS: {
+    readonly people: () => import("react").JSX.Element;
+    readonly intros: () => import("react").JSX.Element;
+    readonly companies: () => import("react").JSX.Element;
+    readonly messages: () => import("react").JSX.Element;
+    readonly activity: () => import("react").JSX.Element;
+    readonly meetings: () => import("react").JSX.Element;
+    readonly lists: () => import("react").JSX.Element;
+    readonly jobs: () => import("react").JSX.Element;
+    readonly connect: () => import("react").JSX.Element;
+    readonly search: () => import("react").JSX.Element;
+    readonly filters: () => import("react").JSX.Element;
+    readonly done: () => import("react").JSX.Element;
+    readonly error: () => import("react").JSX.Element;
+};
+export type IllustrationName = keyof typeof DRAWINGS;
+export declare const ILLUSTRATION_NAMES: IllustrationName[];
+declare const SIZE: {
+    readonly sm: "w-20";
+    readonly md: "w-30";
+    readonly lg: "w-40";
+};
+type IllustrationProps = {
+    name: IllustrationName;
+    /** 80px wide in cards and side panels, 120px for a page's empty state, 160px for a screen with nothing else on it. */
+    size?: keyof typeof SIZE;
+    /** Only when the picture says something the words beside it don't. Usually leave it off: it's decoration. */
+    title?: string;
+    className?: string;
+};
+/** One of Bridge's drawings for empty states. Usually through DataState's `illustration`. */
+declare function Illustration({ name, size, title, className }: IllustrationProps): import("react").JSX.Element;
+export { Illustration };

package/components/illustration.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "@brdgapp/ui/lib/utils";
+// Bridge's drawings for empty states: tiny scenes made of Bridge's own UI pieces (cards, faces, lines for
+// text, one blue button or mark) on a patch of the dot grid. Style chosen by Aman 2026-11-03 ("mini product
+// scene"), after the feature-card pictures in Bridge OS's profile tab. Subjects from the empty states across
+// all 12 apps (people, intros, companies, messages, activity, meetings, lists, jobs, sync; search, filters,
+// done, error). Every color is a token, so a drawing follows light and dark with no second file.
+// ---- Pieces ----------------------------------------------------------------------------------------------
+const CARD = "fill-[var(--surface-elevated)] stroke-[var(--border-default)]";
+const SOFT = "fill-[var(--surface-secondary)] stroke-[var(--border-default)]";
+const FACE = {
+    blue: ["fill-[var(--info-bg)]", "fill-[var(--info)]"],
+    purple: ["fill-[var(--purple-bg)]", "fill-[var(--purple)]"],
+    green: ["fill-[var(--success-bg)]", "fill-[var(--success)]"],
+};
+function Card({ x, y, w, h, r = 7, back = false, className }) {
+    return _jsx("rect", { x: x, y: y, width: w, height: h, rx: r, vectorEffect: "non-scaling-stroke", className: cn(CARD, back && "opacity-60", className) });
+}
+/** A face in a circle: head and shoulders, in one of the avatar tints. */
+function Face({ cx, cy, r = 8, tone = "blue" }) {
+    const [bg, fg] = FACE[tone];
+    const s = r * 0.62;
+    return (_jsxs("g", { children: [_jsx("circle", { cx: cx, cy: cy, r: r, className: bg }), _jsx("circle", { cx: cx, cy: cy - r * 0.22, r: r * 0.34, className: fg }), _jsx("path", { d: `M${cx - s} ${cy + r * 0.62}a${s} ${s * 0.85} 0 0 1 ${2 * s} 0z`, className: fg })] }));
+}
+/** A line of text. `strong` for a name or title, plain for the line under it. */
+function Line({ x, y, w, strong = false }) {
+    return _jsx("rect", { x: x, y: y, width: w, height: 4, rx: 2, className: strong ? "fill-[var(--text-disabled)] opacity-60" : "fill-[var(--border-default)]" });
+}
+/** The one blue thing in a drawing: a button. */
+function Pill({ x, y, w, h = 9 }) {
+    return _jsx("rect", { x: x, y: y, width: w, height: h, rx: h / 2, className: "fill-[var(--primary)]" });
+}
+function Chip({ x, y, w }) {
+    return _jsx("rect", { x: x, y: y, width: w, height: 9, rx: 4.5, vectorEffect: "non-scaling-stroke", className: SOFT });
+}
+/** A place where something would be, but isn't. */
+function Empty({ x, y, w, h, r = 6 }) {
+    return _jsx("rect", { x: x, y: y, width: w, height: h, rx: r, fill: "none", strokeDasharray: "3 3", vectorEffect: "non-scaling-stroke", className: "stroke-[var(--text-disabled)] opacity-60" });
+}
+const MARK = "stroke-[var(--primary)]";
+const WHITE = "stroke-white";
+// ---- Drawings (120 × 96) ------------------------------------------------------------------------------
+const DRAWINGS = {
+    people: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 38, y: 16, w: 58, h: 34, back: true }), _jsx(Card, { x: 22, y: 32, w: 66, h: 46, r: 8 }), _jsx(Face, { cx: 37, cy: 47 }), _jsx(Line, { x: 50, y: 42, w: 28, strong: true }), _jsx(Line, { x: 50, y: 50, w: 18 }), _jsx(Pill, { x: 30, y: 63, w: 30 })] })),
+    intros: () => (_jsxs(_Fragment, { children: [_jsx(Face, { cx: 30, cy: 44, r: 13 }), _jsx(Face, { cx: 90, cy: 44, r: 13, tone: "purple" }), _jsx("line", { x1: 46, y1: 44, x2: 74, y2: 44, strokeWidth: 1.5, strokeDasharray: "3 3", className: "stroke-[var(--text-disabled)]" }), _jsx(Pill, { x: 45, y: 64, w: 30 })] })),
+    companies: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 38, y: 14, w: 58, h: 32, back: true }), _jsx(Card, { x: 22, y: 30, w: 68, h: 48, r: 8 }), _jsx("rect", { x: 30, y: 38, width: 16, height: 16, rx: 4, vectorEffect: "non-scaling-stroke", className: SOFT }), _jsx("rect", { x: 34, y: 46, width: 2.5, height: 5, rx: 0.5, className: "fill-[var(--text-disabled)]" }), _jsx("rect", { x: 37.5, y: 42, width: 2.5, height: 9, rx: 0.5, className: "fill-[var(--text-disabled)]" }), _jsx("rect", { x: 41, y: 44, width: 2.5, height: 7, rx: 0.5, className: "fill-[var(--text-disabled)]" }), _jsx(Line, { x: 52, y: 40, w: 30, strong: true }), _jsx(Line, { x: 52, y: 48, w: 20 }), _jsx(Chip, { x: 30, y: 63, w: 22 }), _jsx(Pill, { x: 56, y: 63, w: 24 })] })),
+    messages: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 16, y: 20, w: 58, h: 26, r: 9 }), _jsx(Line, { x: 24, y: 28, w: 36, strong: true }), _jsx(Line, { x: 24, y: 36, w: 24 }), _jsx("rect", { x: 46, y: 54, width: 58, height: 24, rx: 9, className: "fill-[var(--primary)]" }), _jsx("rect", { x: 54, y: 62, width: 34, height: 4, rx: 2, className: "fill-white opacity-80" }), _jsx("rect", { x: 54, y: 69, width: 20, height: 4, rx: 2, className: "fill-white opacity-50" })] })),
+    activity: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 18, y: 14, w: 84, h: 20, r: 6 }), _jsx(Face, { cx: 29, cy: 24, r: 6 }), _jsx(Line, { x: 40, y: 20, w: 34, strong: true }), _jsx(Line, { x: 40, y: 27, w: 22 }), _jsx("circle", { cx: 93, cy: 24, r: 2.8, className: "fill-[var(--primary)]" }), _jsx(Card, { x: 18, y: 38, w: 84, h: 20, r: 6 }), _jsx(Face, { cx: 29, cy: 48, r: 6, tone: "purple" }), _jsx(Line, { x: 40, y: 44, w: 28, strong: true }), _jsx(Line, { x: 40, y: 51, w: 18 }), _jsx(Card, { x: 18, y: 62, w: 84, h: 20, r: 6, back: true }), _jsx(Face, { cx: 29, cy: 72, r: 6, tone: "green" }), _jsx(Line, { x: 40, y: 68, w: 30, strong: true }), _jsx(Line, { x: 40, y: 75, w: 20 })] })),
+    meetings: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 24, y: 14, w: 72, h: 68, r: 8 }), _jsx(Line, { x: 32, y: 22, w: 26, strong: true }), [0, 1, 2, 3].flatMap((row) => [0, 1, 2, 3, 4].map((col) => {
+                const on = row === 1 && col === 2;
+                return _jsx("rect", { x: 32 + col * 12, y: 34 + row * 11, width: 9, height: 7, rx: 2, className: on ? "fill-[var(--primary)]" : "fill-[var(--surface-secondary)]" }, `${row}-${col}`);
+            }))] })),
+    lists: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 34, y: 14, w: 60, h: 40, back: true }), _jsx(Card, { x: 24, y: 24, w: 64, h: 54, r: 8 }), [0, 1, 2].map((j) => (_jsxs("g", { children: [_jsx("rect", { x: 32, y: 34 + j * 13, width: 7, height: 7, rx: 2, vectorEffect: "non-scaling-stroke", className: SOFT }), _jsx(Line, { x: 44, y: 35.5 + j * 13, w: 30 - j * 6, strong: j === 0 })] }, j))), _jsx("path", { d: "M76 24h8v13l-4-3-4 3z", className: "fill-[var(--primary)]" })] })),
+    jobs: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 22, y: 20, w: 76, h: 58, r: 8 }), _jsx("rect", { x: 30, y: 28, width: 16, height: 16, rx: 4, vectorEffect: "non-scaling-stroke", className: SOFT }), _jsx("rect", { x: 33.5, y: 34, width: 9, height: 7, rx: 1.5, fill: "none", vectorEffect: "non-scaling-stroke", className: "stroke-[var(--text-disabled)]" }), _jsx("path", { d: "M36 34v-1.5h4V34", fill: "none", vectorEffect: "non-scaling-stroke", className: "stroke-[var(--text-disabled)]" }), _jsx(Line, { x: 52, y: 30, w: 34, strong: true }), _jsx(Line, { x: 52, y: 38, w: 22 }), _jsx(Chip, { x: 30, y: 52, w: 20 }), _jsx(Chip, { x: 54, y: 52, w: 20 }), _jsx(Pill, { x: 30, y: 64, w: 28 })] })),
+    connect: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 12, y: 30, w: 32, h: 32, r: 8 }), _jsx("rect", { x: 19, y: 38, width: 18, height: 16, rx: 2, fill: "none", vectorEffect: "non-scaling-stroke", className: "stroke-[var(--text-disabled)]" }), _jsx("line", { x1: 19, y1: 42, x2: 37, y2: 42, vectorEffect: "non-scaling-stroke", className: "stroke-[var(--text-disabled)]" }), _jsx(Card, { x: 76, y: 30, w: 32, h: 32, r: 8 }), _jsx(Face, { cx: 92, cy: 46, r: 9 }), _jsx("line", { x1: 44, y1: 46, x2: 76, y2: 46, strokeWidth: 1.5, strokeDasharray: "3 3", className: "stroke-[var(--text-disabled)]" }), _jsx("circle", { cx: 60, cy: 46, r: 8, className: "fill-[var(--primary)]" }), _jsx("path", { d: "M56 44h7l-2-2M64 48h-7l2 2", fill: "none", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round", className: WHITE })] })),
+    search: () => (_jsxs(_Fragment, { children: [_jsx("rect", { x: 16, y: 16, width: 88, height: 18, rx: 9, vectorEffect: "non-scaling-stroke", className: CARD }), _jsx("circle", { cx: 27, cy: 24.5, r: 3.6, fill: "none", strokeWidth: 1.6, className: MARK }), _jsx("line", { x1: 29.7, y1: 27.2, x2: 32.5, y2: 30, strokeWidth: 1.6, strokeLinecap: "round", className: MARK }), _jsx(Line, { x: 38, y: 23, w: 30 }), _jsx(Empty, { x: 16, y: 42, w: 88, h: 16 }), _jsx(Empty, { x: 16, y: 64, w: 88, h: 16 })] })),
+    filters: () => (_jsxs(_Fragment, { children: [_jsx(Chip, { x: 16, y: 16, w: 24 }), _jsx("rect", { x: 44, y: 16, width: 30, height: 9, rx: 4.5, strokeWidth: 1.4, className: "fill-[var(--info-bg)] stroke-[var(--primary)]" }), _jsx(Chip, { x: 78, y: 16, w: 26 }), _jsx(Empty, { x: 16, y: 36, w: 88, h: 18 }), _jsx(Empty, { x: 16, y: 60, w: 88, h: 18 })] })),
+    done: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 22, y: 20, w: 68, h: 58, r: 8 }), [0, 1, 2].map((j) => (_jsxs("g", { children: [_jsx("circle", { cx: 33, cy: 34 + j * 14, r: 4, className: "fill-[var(--surface-secondary)]" }), _jsx("path", { d: `M31 ${34 + j * 14}l1.4 1.4 2.6-2.8`, fill: "none", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round", className: "stroke-[var(--text-disabled)]" }), _jsx(Line, { x: 42, y: 32 + j * 14, w: 36 - j * 8, strong: j === 0 })] }, j))), _jsx("circle", { cx: 88, cy: 22, r: 10, className: "fill-[var(--primary)]" }), _jsx("path", { d: "M83.5 22l3 3 5.5-6", fill: "none", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: WHITE })] })),
+    error: () => (_jsxs(_Fragment, { children: [_jsx(Card, { x: 22, y: 16, w: 76, h: 46, r: 8 }), _jsx(Line, { x: 32, y: 26, w: 40, strong: true }), _jsx(Line, { x: 32, y: 36, w: 20 }), _jsx(Line, { x: 60, y: 36, w: 26 }), _jsx(Line, { x: 32, y: 46, w: 14 }), _jsx(Line, { x: 52, y: 46, w: 10 }), _jsx("circle", { cx: 86, cy: 27, r: 6, className: "fill-[var(--surface-secondary)]" }), _jsx("rect", { x: 85.2, y: 23.5, width: 1.6, height: 4.5, rx: 0.8, className: "fill-[var(--text-muted)]" }), _jsx("circle", { cx: 86, cy: 30.3, r: 0.9, className: "fill-[var(--text-muted)]" }), _jsx(Pill, { x: 42, y: 70, w: 36 })] })),
+};
+export const ILLUSTRATION_NAMES = Object.keys(DRAWINGS);
+const SIZE = { sm: "w-20", md: "w-30", lg: "w-40" };
+/** One of Bridge's drawings for empty states. Usually through DataState's `illustration`. */
+function Illustration({ name, size = "md", title, className }) {
+    const grid = useId();
+    return (_jsxs("svg", { "data-slot": "illustration", viewBox: "0 0 120 96", role: title ? "img" : undefined, "aria-label": title, "aria-hidden": title ? undefined : true, focusable: "false", className: cn("aspect-[5/4] h-auto shrink-0", SIZE[size], className), children: [_jsx("defs", { children: _jsx("pattern", { id: grid, width: 8, height: 8, patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: 4, cy: 4, r: 0.8, className: "fill-[var(--primary)] opacity-20" }) }) }), _jsx("rect", { x: 4, y: 4, width: 112, height: 88, rx: 12, fill: `url(#${grid})` }), DRAWINGS[name]()] }));
+}
+export { Illustration };

package/components/info-hint.d.ts

@@ -0,0 +1,29 @@
+import type * as React from "react";
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+/** An ⓘ that explains the thing next to it. Opens on hover, focus or tap. */
+declare function InfoHint({ text, className, ...rest }: {
+    text: string;
+    className?: string;
+} & ElementProps<HTMLButtonElement>): React.JSX.Element;
+/**
+ * Wraps content that isn't already a control (a chip, a count) in a button with a tooltip.
+ * The content itself must say what it is; the tooltip only adds detail.
+ */
+declare function HoverTip({ text, children, className, ...rest }: {
+    text: string;
+    children: React.ReactNode;
+    className?: string;
+} & ElementProps<HTMLButtonElement>): React.JSX.Element;
+/**
+ * A tooltip for something that is already a control (a sort button) or a plain label. The child
+ * becomes the trigger, so no button is nested inside another. `focusable` makes a plain label a tab
+ * stop; `disabled` hides the tip (for example while the control's own menu is open).
+ */
+declare function Tip({ text, children, disabled, focusable, className, }: {
+    text?: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    focusable?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export { InfoHint, HoverTip, Tip };

package/components/info-hint.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { Info } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+// Bridge's explain-this bubbles, ported from Bridge OS src/components/ui/info-hint.tsx (same API).
+// Bridge OS hand-built each one (portal + measured position + clamping). They now sit on Base UI:
+//   InfoHint → Popover that opens on hover AND on tap, so touch and screen-reader users can read it
+//              (Base UI: "popups that open when hovering an info icon should use Popover").
+//   HoverTip, Tip → Tooltip: a visual extra for mouse and keyboard users; the control keeps its own name.
+// All render outside the page (portal), so a glass card's overflow can't clip them, and they shift to
+// stay on screen. They open instantly, as in Bridge OS.
+const BUBBLE = "z-[80] w-max max-w-[min(16rem,calc(100vw-24px))] rounded-lg border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-[12px] leading-snug text-[var(--text-body)] shadow-[var(--shadow-dropdown)] outline-none " +
+    "transition-opacity duration-200 ease-out data-[ending-style]:duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+/** An ⓘ that explains the thing next to it. Opens on hover, focus or tap. */
+function InfoHint({ text, className, ...rest }) {
+    return (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { ...rest, openOnHover: true, delay: 0, "data-slot": "info-hint", "aria-label": text, className: cn("inline-flex shrink-0 rounded-full text-[var(--text-disabled)] outline-none transition-colors hover:text-[var(--text-muted)]", "focus-visible:text-[var(--text-muted)] focus-visible:ring-2 focus-visible:ring-[var(--primary)]", className), children: _jsx(Info, { "aria-hidden": "true", className: "size-3.5" }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { side: "bottom", sideOffset: 6, collisionPadding: 12, className: "z-[80]", children: _jsx(Popover.Popup, { "data-slot": "info-hint-popup", className: cn(BUBBLE, "w-60"), children: text }) }) })] }));
+}
+function TipBubble({ text }) {
+    return (_jsx(Tooltip.Portal, { children: _jsx(Tooltip.Positioner, { side: "bottom", sideOffset: 6, collisionPadding: 12, className: "z-[80]", children: _jsx(Tooltip.Popup, { "data-slot": "tip-popup", className: BUBBLE, children: text }) }) }));
+}
+/**
+ * Wraps content that isn't already a control (a chip, a count) in a button with a tooltip.
+ * The content itself must say what it is; the tooltip only adds detail.
+ */
+function HoverTip({ text, children, className, ...rest }) {
+    return (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { ...rest, delay: 0, "data-slot": "hover-tip", className: cn("outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)] rounded", className), children: children }), _jsx(TipBubble, { text: text })] }));
+}
+/**
+ * A tooltip for something that is already a control (a sort button) or a plain label. The child
+ * becomes the trigger, so no button is nested inside another. `focusable` makes a plain label a tab
+ * stop; `disabled` hides the tip (for example while the control's own menu is open).
+ */
+function Tip({ text, children, disabled, focusable, className, }) {
+    if (!text)
+        return _jsx(_Fragment, { children: children });
+    const trigger = !focusable && isValidElement(children) ? children : (_jsx("span", { tabIndex: focusable ? 0 : undefined, className: cn("inline-flex", focusable && "rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)]", className), children: children }));
+    return (_jsxs(Tooltip.Root, { disabled: disabled, children: [_jsx(Tooltip.Trigger, { delay: 0, render: trigger, "data-slot": "tip" }), _jsx(TipBubble, { text: text })] }));
+}
+export { InfoHint, HoverTip, Tip };

package/components/input.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+type InputProps = Omit<InputPrimitive.Props, "className"> & {
+    /** Layout only: `max-w-sm`, `flex-1`. */
+    className?: string;
+};
+declare function Input({ className, type, ...props }: InputProps): React.JSX.Element;
+export { Input };
+export type { InputProps };

package/components/input.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cn } from "@brdgapp/ui/lib/utils";
+// A one-line text field. Started from shadcn's Base UI input, then put on Bridge's look: Bridge OS's own
+// Input (src/components/ui/input.tsx) and Add a network use a 40px white box with 14px text, 16px on phones
+// so iOS doesn't zoom into the field (picked
+// 2026-11-03 over Edit contact's 36px grey box). Same height as SearchInput, so they line up.
+// Inside a Field, the label, help text and error are tied to it automatically.
+// The placeholder uses --text-muted, not --text-disabled as in Bridge OS: disabled grey is 2:1 on white.
+const inputClasses = cn("h-11 md:h-10 w-full min-w-0 rounded-lg border border-[var(--border-default)] bg-[var(--surface-primary)] px-3.5", "text-16 md:text-14 text-[var(--text-primary)] placeholder:text-[var(--text-muted)]", "transition-colors duration-150 ease-out outline-none", "hover:border-[var(--border-hover)]", "focus-visible:border-[var(--primary)] focus-visible:ring-2 focus-visible:ring-[var(--primary)]/20", "aria-invalid:border-[var(--error)] aria-invalid:hover:border-[var(--error)] aria-invalid:focus-visible:border-[var(--error)] aria-invalid:focus-visible:ring-[var(--error)]/20", "data-[invalid]:border-[var(--error)] data-[invalid]:hover:border-[var(--error)] data-[invalid]:focus-visible:border-[var(--error)] data-[invalid]:focus-visible:ring-[var(--error)]/20", "disabled:cursor-not-allowed disabled:opacity-50");
+function Input({ className, type = "text", ...props }) {
+    return _jsx(InputPrimitive, { "data-slot": "input", type: type, className: cn(inputClasses, className), ...props });
+}
+export { Input };

package/components/network-graph.d.ts

@@ -0,0 +1,48 @@
+type Person = {
+    name: string;
+    src?: string;
+};
+declare const SIZES: {
+    readonly sm: {
+        readonly width: "w-[200px]";
+        readonly center: "lg";
+        readonly inner: "md";
+        readonly outer: "sm";
+        readonly you: "size-10 text-12";
+    };
+    readonly md: {
+        readonly width: "w-[280px]";
+        readonly center: "xl";
+        readonly inner: "lg";
+        readonly outer: "md";
+        readonly you: "size-12 text-13";
+    };
+    readonly lg: {
+        readonly width: "w-[360px]";
+        readonly center: "2xl";
+        readonly inner: "xl";
+        readonly outer: "lg";
+        readonly you: "size-16 text-16";
+    };
+};
+type NetworkGraphProps = {
+    /** The people around the middle. The first 6 sit close; up to 10 more sit further out. */
+    people: Person[];
+    /** Who is in the middle. Leave it off for "You". */
+    center?: Person;
+    /** Names whose line shows in blue: an intro path, someone new. */
+    highlight?: string[];
+    size?: keyof typeof SIZES;
+    /** Lines and faces come in one after another when it first shows. Off under reduced motion. */
+    animate?: boolean;
+    /**
+     * Say what the picture shows, for screen readers: "You and 8 people you know". Leave it off when the words
+     * beside it already say it; it's then hidden from them.
+     */
+    label?: string;
+    className?: string;
+};
+/** A network: you (or someone) in the middle, people around, a line to each. */
+declare function NetworkGraph({ people, center, highlight, size, animate, label, className }: NetworkGraphProps): import("react").JSX.Element;
+export { NetworkGraph };
+export type { NetworkGraphProps };

package/components/network-graph.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "@brdgapp/ui/components/avatar";
+import { cn } from "@brdgapp/ui/lib/utils";
+const SIZES = {
+    sm: { width: "w-[200px]", center: "lg", inner: "md", outer: "sm", you: "size-10 text-12" },
+    md: { width: "w-[280px]", center: "xl", inner: "lg", outer: "md", you: "size-12 text-13" },
+    lg: { width: "w-[360px]", center: "2xl", inner: "xl", outer: "lg", you: "size-16 text-16" },
+};
+const INNER = 6;
+const OUTER = 10;
+function place(i, count, radius, offset) {
+    const a = offset + (i / count) * Math.PI * 2 - Math.PI / 2;
+    return { x: 50 + radius * Math.cos(a), y: 50 + radius * Math.sin(a) };
+}
+/** A network: you (or someone) in the middle, people around, a line to each. */
+function NetworkGraph({ people, center, highlight = [], size = "md", animate = true, label, className }) {
+    const s = SIZES[size];
+    const inner = people.slice(0, INNER);
+    const outer = people.slice(INNER, INNER + OUTER);
+    const innerAt = inner.map((_, i) => place(i, inner.length, 30, 0));
+    const outerAt = outer.map((_, i) => place(i, outer.length, 45, Math.PI / outer.length));
+    const lit = new Set(highlight);
+    // Outer people hang off the nearest close-in person, so the picture reads as friends of friends.
+    const nearest = (p) => innerAt.reduce((best, q, i) => (Math.hypot(q.x - p.x, q.y - p.y) < Math.hypot(innerAt[best].x - p.x, innerAt[best].y - p.y) ? i : best), 0);
+    const step = (n) => (animate ? { animationDelay: `${n * 60}ms` } : undefined);
+    const enter = animate ? "motion-safe:animate-scale-in [animation-fill-mode:both]" : "";
+    const fade = animate ? "motion-safe:animate-fade-in [animation-fill-mode:both]" : "";
+    const lines = [
+        ...innerAt.map((p, i) => ({ from: { x: 50, y: 50 }, to: p, on: lit.has(inner[i].name), n: i })),
+        ...(innerAt.length ? outerAt.map((p, i) => ({ from: innerAt[nearest(p)], to: p, on: lit.has(outer[i].name), n: inner.length + i })) : []),
+    ];
+    return (_jsxs("div", { "data-slot": "network-graph", role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, 
+        // A set width (not w-full), so it keeps its size inside a parent that shrinks to fit; max-w-full lets it
+        // shrink on a narrow screen.
+        className: cn("relative aspect-square max-w-full shrink-0", s.width, className), children: [_jsx("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 size-full", "aria-hidden": "true", children: lines.map((l, i) => (_jsx("line", { x1: l.from.x, y1: l.from.y, x2: l.to.x, y2: l.to.y, vectorEffect: "non-scaling-stroke", strokeWidth: l.on ? 1.5 : 1, strokeDasharray: l.on ? undefined : "3 3", className: cn(l.on ? "stroke-[var(--primary)]" : "stroke-[var(--text-disabled)]", fade), style: step(l.n) }, i))) }), _jsxs("div", { "aria-hidden": "true", className: "contents", children: [[...inner.map((p, i) => ({ p, at: innerAt[i], ring: "inner", n: i })), ...outer.map((p, i) => ({ p, at: outerAt[i], ring: "outer", n: inner.length + i }))].map(({ p, at, ring, n }) => (_jsx("span", { className: cn("absolute -translate-x-1/2 -translate-y-1/2", enter), style: { left: `${at.x}%`, top: `${at.y}%`, ...step(n + 1) }, children: _jsx(Avatar, { name: p.name, src: p.src, size: ring === "inner" ? s.inner : s.outer, className: cn(lit.has(p.name) && "ring-2 ring-[var(--primary)] ring-offset-2 ring-offset-[var(--surface-primary)]") }) }, `${p.name}-${n}`))), _jsx("span", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", enter), children: center ? (_jsx(Avatar, { name: center.name, src: center.src, size: s.center })) : (_jsx("span", { className: cn("flex items-center justify-center rounded-full bg-[var(--primary-solid)] font-bold text-white", s.you), children: "You" })) })] })] }));
+}
+export { NetworkGraph };

package/components/page-banner.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const pageBannerVariants: (props?: ({
+    variant?: "warning" | "error" | "success" | "info" | null | undefined;
+    placement?: "inline" | "page" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type PageBannerProps = VariantProps<typeof pageBannerVariants> & {
+    /** A bare Lucide icon; takes the banner's colour. */
+    icon?: React.ReactNode;
+    /** One short line. */
+    children: React.ReactNode;
+    /** One link or button at the end. */
+    action?: React.ReactNode;
+    /** With placement "page": the page column's width class (LAYOUT_FORM, LAYOUT_WIDE…) so the text lines up. */
+    contentWidthClass?: string;
+    className?: string;
+};
+declare function PageBanner({ variant, placement, icon, children, action, contentWidthClass, className }: PageBannerProps): React.JSX.Element;
+export { PageBanner, pageBannerVariants };
+export type { PageBannerProps };

package/components/page-banner.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@brdgapp/ui/lib/utils";
+// The full-width alert strip under the top navigation. Ported from Bridge OS
+// src/components/ui/page-banner.tsx with the same API. New: `placement="inline"` for a banner inside a
+// card or a page that isn't in Bridge OS's shell. The default, "page", behaves exactly as before.
+const pageBannerVariants = cva("border-b", {
+    variants: {
+        variant: {
+            // `info` has no -text token, so it uses --info for text and icon.
+            info: "border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]",
+            warning: "border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning-text)]",
+            success: "border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success-text)]",
+            error: "border-[var(--error-border)] bg-[var(--error-bg)] text-[var(--error-text)]",
+        },
+        placement: {
+            // Breaks out of the centred page column to the screen edges, cancels the shell's top padding so
+            // it sits flush under the 56px nav, and stays pinned there while scrolling.
+            page: "sticky top-14 z-30 -mt-8 mb-6 mx-[calc(50%-50vw)] w-screen py-3",
+            inline: "rounded-xl border py-3",
+        },
+    },
+    defaultVariants: { variant: "info", placement: "page" },
+});
+function PageBanner({ variant, placement, icon, children, action, contentWidthClass, className }) {
+    const isPage = (placement ?? "page") === "page";
+    return (_jsx("div", { "data-slot": "page-banner", className: cn(pageBannerVariants({ variant, placement }), className), children: _jsxs("div", { className: cn("flex items-center gap-2 [&_svg]:size-4 [&_svg]:shrink-0", isPage ? cn(contentWidthClass, "mx-auto px-4 sm:px-6 lg:px-8") : "px-4"), children: [icon ? (_jsx("span", { "data-slot": "page-banner-icon", "aria-hidden": "true", className: "inline-flex", children: icon })) : null, _jsx("div", { className: "min-w-0 flex-1 text-[13px] font-semibold", children: children }), action] }) }));
+}
+export { PageBanner, pageBannerVariants };

package/components/scene.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type SceneProps = {
+    /** The real components, laid out as the picture. Nothing in them can be clicked or focused. */
+    children: ReactNode;
+    /** `grid`: the dot grid. `blue`: a blue wash, for the one hero picture of a promo. */
+    tone?: "grid" | "blue";
+    /** Size and layout only: `h-56`, `aspect-[4/3]`. */
+    className?: string;
+};
+/** A picture made of Bridge's own components. Decorative: hidden from screen readers and can't be clicked. */
+declare function Scene({ children, tone, className }: SceneProps): import("react").JSX.Element;
+export { Scene };

package/components/scene.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** A picture made of Bridge's own components. Decorative: hidden from screen readers and can't be clicked. */
+function Scene({ children, tone = "grid", className }) {
+    return (_jsxs("div", { "data-slot": "scene", "aria-hidden": "true", inert: true, className: cn("relative flex items-center justify-center overflow-hidden rounded-xl select-none [&_*]:pointer-events-none", tone === "grid" ? "bg-[var(--info-bg)] bg-dot-grid" : "bg-[var(--primary-solid)]", className), children: [tone === "blue" ? _jsx("span", { className: "absolute -top-1/3 -right-1/4 size-2/3 rounded-full bg-white/15 blur-3xl" }) : null, _jsx("div", { className: "relative", children: children })] }));
+}
+export { Scene };

package/components/search-input.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+type SearchInputProps = Omit<React.ComponentProps<"input">, "type"> & {
+    /** Clears the field. The clear button shows only when there is a value. */
+    onClear?: () => void;
+};
+declare function SearchInput({ className, value, onClear, ...props }: SearchInputProps): React.JSX.Element;
+export { SearchInput };
+export type { SearchInputProps };

package/components/search-input.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { Search, X } from "lucide-react";
+import { IconButton } from "@brdgapp/ui/components/icon-button";
+import { cn } from "@brdgapp/ui/lib/utils";
+// `className` goes on the wrapper, not the input, so a width limit keeps the clear button inside the pill.
+function SearchInput({ className, value, onClear, ...props }) {
+    const hasValue = value !== undefined && String(value).length > 0;
+    return (_jsxs("div", { "data-slot": "search-input", className: cn("group relative", className), children: [_jsx(Search, { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--text-disabled)] transition-colors group-focus-within:text-[var(--primary)]" }), _jsx(InputPrimitive, { "data-slot": "search-input-field", type: "search", value: value, className: cn("h-11 md:h-10 w-full rounded-full border border-[var(--border-default)] bg-[var(--surface-secondary)] py-2 pr-10 pl-10", "text-16 md:text-14 text-[var(--text-primary)] placeholder:text-[var(--text-muted)]", "transition-all duration-150 ease-out outline-none", "focus:border-[var(--primary)] focus:bg-[var(--surface-primary)] focus:ring-2 focus:ring-[var(--primary)]/20", 
+                // Hide the browser's own clear button; this component draws its own.
+                "[&::-webkit-search-cancel-button]:appearance-none"), ...props }), hasValue && onClear ? (_jsx(IconButton, { "aria-label": "Clear search", size: "sm", onClick: onClear, className: "absolute top-1/2 right-1.5 -translate-y-1/2", children: _jsx(X, {}) })) : null] }));
+}
+export { SearchInput };

package/components/segmented-control.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+type SegmentedOption<T extends string> = {
+    value: T;
+    label: React.ReactNode;
+    /** Required when `label` is an icon: the option's name for screen readers. */
+    ariaLabel?: string;
+};
+type SegmentedControlProps<T extends string> = {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the whole control for screen readers: "Time range", "Appearance". */
+    "aria-label": string;
+    className?: string;
+};
+declare function SegmentedControl<T extends string>({ options, value, onChange, className, ...props }: SegmentedControlProps<T>): React.JSX.Element;
+export { SegmentedControl };
+export type { SegmentedControlProps, SegmentedOption };