@brdgapp/ui 0.1.1 → 1.0.0

package/components/brand-mark.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@brdgapp/ui/lib/utils";
+/** Brands whose own rules allow a one-color version. Google, Microsoft and Chrome are always in color. */
+const CAN_BE_MONO = new Set(["linkedin", "whatsapp", "telegram", "apple"]);
+const NAME = {
+    linkedin: "LinkedIn",
+    google: "Google",
+    microsoft: "Microsoft",
+    apple: "Apple",
+    whatsapp: "WhatsApp",
+    telegram: "Telegram",
+    chrome: "Chrome",
+};
+const LINKEDIN = "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z";
+const APPLE = "M16.365 1.43c0 1.14-.415 2.205-1.19 3.03-.81.87-2.145 1.54-3.28 1.45-.145-1.09.42-2.24 1.17-3.02.81-.85 2.205-1.47 3.3-1.46zM20.7 17.39c-.52 1.2-.77 1.73-1.44 2.79-.94 1.45-2.26 3.26-3.9 3.28-1.46.02-1.84-.95-3.82-.94-1.99.01-2.4.96-3.86.94-1.64-.02-2.89-1.65-3.83-3.1C1.88 17.42.5 12.84 2.4 9.64c.95-1.6 2.45-2.61 4.14-2.61 1.54 0 2.51.99 3.79.99 1.24 0 2-.99 3.8-.99 1.52 0 3.13.83 4.07 2.26-3.58 1.97-3 7.1.5 8.1z";
+const WHATSAPP_RING = "M360,0C161.18,0,0,161.18,0,360c0,65.41,17.45,126.75,47.94,179.61L0,720l187.02-44.21c51.34,28.18,110.28,44.21,172.98,44.21,198.82,0,360-161.18,360-360S558.82,0,360,0ZM360,655.52c-60.17,0-116.13-17.98-162.82-48.87l-110.49,28.14,30.99-105.61c-33.53-47.93-53.2-106.26-53.2-169.19,0-163.21,132.31-295.52,295.52-295.52s295.52,132.31,295.52,295.52-132.31,295.52-295.52,295.52Z";
+const WHATSAPP_PHONE = "M444.35,407.52l87.1,41.06c4,1.88,6.56,5.94,6.2,10.34-.94,11.46-5.54,34.43-26.13,55.02-58.12,58.12-162.49-7.64-166.74-10.18-25.67-13.79-50.06-32.24-73.19-55.36-23.12-23.12-41.58-47.52-55.37-73.19-2.55-4.24-68.31-108.61-10.18-166.74,20.59-20.59,43.56-25.19,55.02-26.13,4.41-.36,8.46,2.2,10.34,6.2l41.07,87.1c1.94,4.12,1.09,9.02-2.13,12.24l-30.61,30.61c-6.62,6.62-8.56,16.93-4,25.11,11.17,20.03,26.19,39.32,43.59,57.07,17.75,17.4,37.04,32.43,57.07,43.59,8.18,4.56,18.48,2.62,25.11-4l30.61-30.61c3.22-3.22,8.12-4.08,12.24-2.13Z";
+const TELEGRAM_PLANE = "M5.4 11.7 16.9 7.3c.5-.2 1 .1.8.9l-2 9.3c-.1.6-.5.8-1 .5l-2.9-2.1-1.4 1.3c-.2.2-.3.3-.6.3l.2-3 5.4-4.9c.2-.2 0-.3-.3-.1l-6.7 4.2-2.9-.9c-.6-.2-.6-.6.1-.9Z";
+const CIRCLE_24 = "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Z";
+function Drawing({ brand, mono }) {
+    switch (brand) {
+        case "linkedin":
+            return (_jsxs("svg", { viewBox: "0 0 24 24", children: [mono ? null : _jsx("rect", { x: "2", y: "2", width: "20", height: "20", fill: "#fff" }), _jsx("path", { d: LINKEDIN, fill: mono ? "currentColor" : "#0A66C2" })] }));
+        case "google":
+            return (_jsxs("svg", { viewBox: "0 0 48 48", children: [_jsx("path", { fill: "#FFC107", d: "M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" }), _jsx("path", { fill: "#FF3D00", d: "M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" }), _jsx("path", { fill: "#4CAF50", d: "M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" }), _jsx("path", { fill: "#1976D2", d: "M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571.001-.001.002-.001.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" })] }));
+        case "microsoft":
+            return (_jsxs("svg", { viewBox: "0 0 23 23", children: [_jsx("path", { d: "M1 1h10v10H1V1z", fill: "#F25022" }), _jsx("path", { d: "M12 1h10v10H12V1z", fill: "#7FBA00" }), _jsx("path", { d: "M1 12h10v10H1V12z", fill: "#00A4EF" }), _jsx("path", { d: "M12 12h10v10H12V12z", fill: "#FFB900" })] }));
+        case "apple":
+            // Apple's mark is one color: it follows the text, so it's black on light and white on dark.
+            return (_jsx("svg", { viewBox: "0 0 24 24", children: _jsx("path", { d: APPLE, fill: "currentColor" }) }));
+        case "whatsapp":
+            return (_jsxs("svg", { viewBox: "0 0 720 720", fill: mono ? "currentColor" : "#25D366", children: [_jsx("path", { d: WHATSAPP_RING }), _jsx("path", { d: WHATSAPP_PHONE })] }));
+        case "telegram":
+            return mono ? (_jsx("svg", { viewBox: "0 0 24 24", children: _jsx("path", { d: `${CIRCLE_24}${TELEGRAM_PLANE}`, fill: "currentColor", fillRule: "evenodd" }) })) : (_jsxs("svg", { viewBox: "0 0 24 24", children: [_jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#2AABEE" }), _jsx("path", { d: TELEGRAM_PLANE, fill: "#fff" })] }));
+        case "chrome":
+            return (_jsxs("svg", { viewBox: "2 2 44 44", children: [_jsx("path", { fill: "#EA4335", d: "M15.34 29 5.542 12.029A22 22 0 0 1 43.596 14H24a10 10 0 0 0-8.66 15Z" }), _jsx("path", { fill: "#FBBC04", d: "M24 14h19.596a22 22 0 0 1-20.734 31.971L32.66 29A10 10 0 0 0 24 14Z" }), _jsx("path", { fill: "#34A853", d: "M32.66 29 22.862 45.971A22 22 0 0 1 5.542 12.029L15.34 29a10 10 0 0 0 17.32 0Z" }), _jsx("circle", { cx: "24", cy: "24", r: "10", fill: "#fff" }), _jsx("circle", { cx: "24", cy: "24", r: "8", fill: "#1A73E8" })] }));
+    }
+}
+/** A company's logo at icon size, in its own colors. Not an icon: Lucide has none of these. */
+function BrandMark({ brand, label = false, mono = false, className }) {
+    const oneColor = mono && CAN_BE_MONO.has(brand);
+    return (_jsx("span", { "data-slot": "brand-mark", role: label ? "img" : undefined, "aria-label": label ? NAME[brand] : undefined, "aria-hidden": label ? undefined : true, className: cn("inline-flex size-4 shrink-0 [&>svg]:size-full", className), children: _jsx(Drawing, { brand: brand, mono: oneColor }) }));
+}
+export { BrandMark, NAME as BRAND_NAMES };

package/components/button-group.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+type ButtonGroupVariant = "secondary" | "primary";
+declare const buttonGroupVariants: (props?: ({
+    variant?: "secondary" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ variant, className, children, ...props }: {
+    variant?: ButtonGroupVariant;
+    /** Name the group for screen readers when the actions need context: "Intro actions". */
+    "aria-label"?: string;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare const buttonGroupItemVariants: (props?: ({
+    variant?: "secondary" | "primary" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonGroupItemProps = Omit<ButtonPrimitive.Props, "className"> & {
+    /** Tighter padding for a segment that is only an icon. It then needs an `aria-label`. */
+    iconOnly?: boolean;
+    className?: string;
+};
+declare function ButtonGroupItem({ iconOnly, className, render, children, ...props }: ButtonGroupItemProps): React.JSX.Element;
+export { ButtonGroup, ButtonGroupItem, buttonGroupVariants, buttonGroupItemVariants };
+export type { ButtonGroupVariant, ButtonGroupItemProps };

package/components/button-group.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "@brdgapp/ui/lib/utils";
+const ButtonGroupContext = createContext("secondary");
+const buttonGroupVariants = cva(
+// Ends are rounded on the children, not by clipping, so a segment's tooltip is never cut off.
+"inline-flex items-stretch rounded-full [&>*+*]:border-l [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full", {
+    variants: {
+        variant: {
+            secondary: "border border-[var(--text-disabled)] bg-[var(--surface-elevated)] [&>*+*]:border-[var(--border-divider)]",
+            primary: "border border-[var(--primary-solid)] bg-[var(--primary-solid)] [&>*+*]:border-white/25",
+        },
+    },
+    defaultVariants: { variant: "secondary" },
+});
+function ButtonGroup({ variant = "secondary", className, children, ...props }) {
+    return (_jsx(ButtonGroupContext.Provider, { value: variant, children: _jsx("div", { "data-slot": "button-group", role: "group", className: cn(buttonGroupVariants({ variant }), className), ...props, children: children }) }));
+}
+const buttonGroupItemVariants = cva([
+    "inline-flex h-8 items-center justify-center gap-1.5 text-[14px] font-semibold tracking-[0.4px]",
+    "transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-inset",
+    "disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-[15px] [&_svg]:shrink-0",
+], {
+    variants: {
+        variant: {
+            secondary: "text-[var(--text-secondary)] hover:bg-[var(--surface-secondary)] hover:text-[var(--text-primary)] focus-visible:ring-[var(--primary)]",
+            primary: "text-white hover:bg-[var(--primary-solid-hover)] active:bg-[var(--primary-active)] focus-visible:ring-white",
+        },
+        iconOnly: { true: "px-2.5", false: "px-3.5" },
+    },
+    // Only the secondary icon-only segment mutes its glyph; on primary it stays white.
+    compoundVariants: [{ variant: "secondary", iconOnly: true, className: "text-[var(--text-muted)]" }],
+    defaultVariants: { variant: "secondary", iconOnly: false },
+});
+function ButtonGroupItem({ iconOnly = false, className, render, children, ...props }) {
+    const variant = useContext(ButtonGroupContext);
+    const classes = cn(buttonGroupItemVariants({ variant, iconOnly }), className);
+    // With `render` (a Next Link), the segment keeps link semantics.
+    const rendered = useRender({
+        render: render,
+        enabled: render !== undefined,
+        props: mergeProps({ className: classes, "data-slot": "button-group-item" }, props, { children }),
+    });
+    if (rendered)
+        return rendered;
+    return (_jsx(ButtonPrimitive, { "data-slot": "button-group-item", className: classes, ...props, children: children }));
+}
+export { ButtonGroup, ButtonGroupItem, buttonGroupVariants, buttonGroupItemVariants };

package/components/button.d.ts

@@ -0,0 +1,33 @@
+import type * as React from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "secondary" | "primary" | "ghost" | "destructive" | "danger-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonProps = Omit<ButtonPrimitive.Props, "className"> & VariantProps<typeof buttonVariants> & {
+    className?: string;
+    /** A leading icon. Pass a bare Lucide icon; it is sized for you and hidden from screen readers. */
+    icon?: React.ReactNode;
+    /** The action is running: shows a spinner, disables the button and sets `aria-busy`. */
+    loading?: boolean;
+};
+declare function Button({ className, variant, size, fullWidth, icon, loading, disabled, render, children, ...props }: ButtonProps): React.JSX.Element;
+declare const buttonSkeletonHeights: {
+    readonly xs: "h-7";
+    readonly sm: "h-8";
+    readonly md: "h-11 md:h-10";
+    readonly lg: "h-12";
+};
+/**
+ * Placeholder for a button whose data hasn't loaded yet. Same height as the real button, so swapping
+ * it in causes no layout shift. Not the same as `loading`, which is an action already running.
+ */
+declare function ButtonSkeleton({ size, width, className, }: {
+    size?: keyof typeof buttonSkeletonHeights;
+    width?: number | string;
+    className?: string;
+}): React.JSX.Element;
+export { Button, ButtonSkeleton, buttonVariants };
+export type { ButtonProps };

package/components/button.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+// Started from shadcn's Base UI button (style base-nova), then moved onto Bridge's tokens and API.
+// Look and API match Bridge OS src/components/ui/button.tsx (components.md, 2026-10-29); `asChild`
+// became `render`. Fills use the AA-verified --primary-solid / --danger-solid, never --primary / --error.
+const buttonVariants = cva([
+    "group/button inline-flex items-center gap-1.5 whitespace-nowrap font-semibold tracking-[0.4px]",
+    "transition-all duration-150 ease-out outline-none select-none",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+], {
+    variants: {
+        variant: {
+            primary: "bg-[var(--primary-solid)] text-white hover:bg-[var(--primary-solid-hover)] active:bg-[var(--primary-active)] focus-visible:ring-[var(--primary)]",
+            // Bordered variants sit on a solid raised fill, never transparent, so page glow never shows
+            // through. The label names the control, so the grey border is decorative.
+            secondary: "border border-[var(--text-disabled)] bg-[var(--surface-elevated)] text-[var(--text-primary)] hover:border-[var(--text-muted)] hover:bg-[var(--surface-secondary)] focus-visible:ring-[var(--primary)]",
+            ghost: "bg-transparent text-[var(--text-secondary)] hover:bg-[var(--surface-tertiary)] focus-visible:ring-[var(--primary)]",
+            destructive: "bg-[var(--danger-solid)] text-white hover:bg-[var(--danger-solid-hover)] focus-visible:ring-[var(--error)]",
+            "danger-ghost": "bg-transparent text-[var(--danger-text)] hover:bg-[var(--error-bg)] focus-visible:ring-[var(--error)]",
+            // Inline text action: no pill, no padding, primary colour, underline on hover.
+            link: "justify-start bg-transparent p-0 text-[var(--primary)] underline-offset-2 hover:text-[var(--primary-hover)] hover:underline focus-visible:underline disabled:no-underline",
+        },
+        // xs (28px) is the smallest allowed: it clears the 24px minimum target.
+        size: {
+            xs: "text-[12px] [&_svg:not([class*='size-'])]:size-3.5",
+            sm: "text-[14px] [&_svg:not([class*='size-'])]:size-4",
+            md: "text-[14px] [&_svg:not([class*='size-'])]:size-4",
+            lg: "text-[16px] [&_svg:not([class*='size-'])]:size-[18px]",
+        },
+        fullWidth: {
+            true: "w-full",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Every variant except `link` is a pill with a fixed height and padding.
+        {
+            variant: ["primary", "secondary", "ghost", "destructive", "danger-ghost"],
+            className: "justify-center rounded-full active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-primary)]",
+        },
+        { variant: ["primary", "secondary", "ghost", "destructive", "danger-ghost"], size: "xs", className: "h-7 px-3" },
+        { variant: ["primary", "secondary", "ghost", "destructive", "danger-ghost"], size: "sm", className: "h-8 px-[14px] py-1" },
+        { variant: ["primary", "secondary", "ghost", "destructive", "danger-ghost"], size: "md", className: "h-11 px-5 md:h-10" },
+        { variant: ["primary", "secondary", "ghost", "destructive", "danger-ghost"], size: "lg", className: "h-12 px-6 py-3" },
+        // A link reads as text, so it never stretches.
+        { variant: "link", fullWidth: true, className: "w-auto" },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "sm",
+        fullWidth: false,
+    },
+});
+function Button({ className, variant, size, fullWidth, icon, loading = false, disabled, render, children, ...props }) {
+    const classes = cn(buttonVariants({ variant, size, fullWidth }), className);
+    // With `render` (for example a Next `Link`), the element keeps its own semantics: a link stays a
+    // link. It owns its content, so `icon` and `loading` don't apply.
+    const rendered = useRender({
+        render: render,
+        enabled: render !== undefined,
+        props: mergeProps({ className: classes, "data-slot": "button" }, props, { children }),
+    });
+    if (rendered)
+        return rendered;
+    return (_jsxs(ButtonPrimitive, { "data-slot": "button", className: classes, disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: [loading ? (_jsx(Loader2, { "data-slot": "button-spinner", className: "animate-spin", "aria-hidden": "true" })) : icon ? (_jsx("span", { "data-slot": "button-icon", className: "inline-flex shrink-0", "aria-hidden": "true", children: icon })) : null, children] }));
+}
+const buttonSkeletonHeights = { xs: "h-7", sm: "h-8", md: "h-11 md:h-10", lg: "h-12" };
+/**
+ * Placeholder for a button whose data hasn't loaded yet. Same height as the real button, so swapping
+ * it in causes no layout shift. Not the same as `loading`, which is an action already running.
+ */
+function ButtonSkeleton({ size = "sm", width = "7rem", className, }) {
+    return (_jsx("span", { "data-slot": "button-skeleton", "aria-hidden": "true", style: { width }, className: cn("inline-block animate-pulse rounded-full bg-[var(--border-hover)] motion-reduce:animate-none", buttonSkeletonHeights[size], className) }));
+}
+export { Button, ButtonSkeleton, buttonVariants };

package/components/card.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const cardVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CardProps = VariantProps<typeof cardVariants> & {
+    /** No padding: for a table or list that runs edge to edge. Pair with a header strip. */
+    flush?: boolean;
+    /** No glass and no side padding: a row inside another card or pane, split from its neighbours by dividers. */
+    bare?: boolean;
+    /** The whole card goes to this page. It rises on hover. */
+    href?: string;
+    /** Your router's link (Next `Link`) for `href`. A plain `<a>` by default. */
+    linkAs?: React.ElementType;
+    /** The whole card picks this item, usually to open it in a pane. It tints on hover. */
+    onSelect?: () => void;
+    /** The picked card: blue border and tint. Use with `onSelect`. */
+    selected?: boolean;
+    /** Can't be clicked; faded. */
+    disabled?: boolean;
+    /** What the card is called, when it has no CardHeader to take the name from. Clickable cards need a name. */
+    label?: string;
+    /** Layout only: `w-full`, `max-w-md`, `col-span-2`. */
+    className?: string;
+    children?: React.ReactNode;
+};
+declare function Card({ size, flush, bare, href, linkAs: LinkComponent, onSelect, selected, disabled, label, className, children, }: CardProps): React.JSX.Element;
+declare const ICON_COLOR: {
+    readonly blue: "bg-[var(--primary)]/8 text-[var(--primary)]";
+    readonly green: "bg-[var(--success)]/8 text-[var(--success-text)]";
+    readonly amber: "bg-[var(--warning)]/10 text-[var(--warning-text)]";
+    readonly purple: "bg-[var(--purple)]/8 text-[var(--purple)]";
+};
+type CardHeaderProps = {
+    /** The card's name. 16px bold; 14px in a strip or a `sm` card. */
+    title: React.ReactNode;
+    /** A bare Lucide icon, set in a 36px blue square. */
+    icon?: React.ReactNode;
+    /** The icon square's color, by topic. */
+    iconColor?: keyof typeof ICON_COLOR;
+    /** A short explanation in an ⓘ beside the title: what a number counts, what a term means. */
+    hint?: string;
+    /** Anything else in front of the title: an Avatar, a company logo. Use instead of `icon`. */
+    leading?: React.ReactNode;
+    /** One muted line under the title. */
+    description?: React.ReactNode;
+    /** Small things at the top right, before the action: a date, a "New" Tag. */
+    meta?: React.ReactNode;
+    /** One control on the right: a link button, an IconButton or an ActionMenu. */
+    action?: React.ReactNode;
+    /** A tinted band across the top of the card, split from the body by a line. For dense cards and tables. */
+    strip?: boolean;
+    /** The title's heading level. Match the page: `h2` under the page title. */
+    as?: "h2" | "h3" | "h4";
+    /** 14px title, for `sm` cards and rows. */
+    compact?: boolean;
+};
+declare function CardHeader({ title, icon, iconColor, hint, leading, description, meta, action, strip, as: Heading, compact }: CardHeaderProps): React.JSX.Element;
+type CardMediaProps = {
+    /** The picture. */
+    src: string;
+    /** What it shows, or "" when it's decoration. */
+    alt: string;
+    /** Height in pixels. */
+    height?: number;
+};
+/** A picture across the top of the card, edge to edge. Put it first. */
+declare function CardMedia({ src, alt, height }: CardMediaProps): React.JSX.Element;
+type CardFooterProps = {
+    /** Buttons, lined up on the right, main one last. */
+    children: React.ReactNode;
+    /** Layout only. */
+    className?: string;
+};
+/** A row of buttons under a line, at the bottom of the card. */
+declare function CardFooter({ children, className }: CardFooterProps): React.JSX.Element;
+export { Card, CardFooter, CardHeader, CardMedia, cardVariants };
+export type { CardFooterProps, CardHeaderProps, CardMediaProps, CardProps };

package/components/card.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { InfoHint } from "@brdgapp/ui/components/info-hint";
+import { cn } from "@brdgapp/ui/lib/utils";
+// A frosted-glass card: the box most of Bridge sits in. Started from shadcn's card, then rebuilt on
+// Bridge's glass after a survey of all 12 app repos (2026-11-03): over 1,500 hand-made or shadcn cards.
+//
+// Decisions:
+// - Glass only (`liquid-glass`), picked by Aman. Corners and padding by size: `lg` 16px / 24px for big
+//   cards, `md` 12px / 20px for tiles, `sm` 12px / 16px for list items (app-cc's inbox, raise's pipeline).
+// - `bare`: the same content with no glass, for a card that sits in another card or pane as a
+//   divider-separated row. From Bridge OS activity-feed-item.tsx (`bare`) and app-cc's compact list.
+// - Clickable cards, two jobs: `href` goes to a page (perks, directories, bridge-jobs); `onSelect` picks
+//   the card, usually to open it in a pane (app-cc inbox, app-intercom, raise pipeline, Bridge OS feed).
+//   Built the way app-portfolio does it: an invisible link or button covers the card and gets the click
+//   and keyboard focus; the content lets clicks through, except its own links, buttons and fields, which
+//   work as usual. So no screen writes stopPropagation (the apps do, over 300 times).
+// - Hover by job (Aman): links rise 2px with a soft shadow (Elevation); selectable cards tint, since a
+//   list of rising cards jumps about.
+// - `selected`: a blue border and a light blue tint, what app-cc, app-intercom and app-portfolio already
+//   use; announced with aria-current.
+// - No colored edge bars or strips (Aman): status goes in a Tag in the header, word and color together.
+// - The glass and states live in globals.css (`[data-slot=card]` rules), because the glass rule outranks
+//   Tailwind's background, border and shadow classes.
+const cardVariants = cva("relative block text-[var(--text-body)]", {
+    variants: {
+        size: {
+            lg: "rounded-2xl [--card-pad:24px]",
+            md: "rounded-xl [--card-pad:20px]",
+            sm: "rounded-xl [--card-pad:16px]",
+        },
+    },
+    defaultVariants: { size: "lg" },
+});
+const CardContext = React.createContext(null);
+function Card({ size, flush = false, bare = false, href, linkAs: LinkComponent = "a", onSelect, selected = false, disabled = false, label, className, children, }) {
+    const titleId = React.useId();
+    const clickable = href ? "link" : onSelect ? "select" : undefined;
+    const nameProps = label ? { "aria-label": label } : { "aria-labelledby": titleId };
+    let cover = null;
+    if (clickable === "link" && !disabled) {
+        cover = _jsx(LinkComponent, { "data-card-cover": "", href: href, "aria-current": selected ? "page" : undefined, ...nameProps });
+    }
+    else if (clickable) {
+        cover = (_jsx("button", { type: "button", "data-card-cover": "", disabled: disabled, onClick: onSelect, "aria-current": selected ? "true" : undefined, ...nameProps }));
+    }
+    return (_jsx(CardContext.Provider, { value: { titleId }, children: _jsxs("section", { "data-slot": "card", "data-clickable": clickable, "data-selected": selected ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-bare": bare ? "" : undefined, className: cn(cardVariants({ size }), bare ? "-mx-3 rounded-lg px-3 py-3.5 [--card-inset:0px]" : "liquid-glass", !bare && (flush ? "[--card-inset:0px]" : "p-[var(--card-pad)] [--card-inset:var(--card-pad)]"), clickable === "link" && !disabled && "transition-[translate,box-shadow] duration-150 ease-out hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0", clickable && !disabled && "cursor-pointer", disabled && "opacity-60", className), children: [cover, children] }) }));
+}
+// The icon square's color. Blue by default; Bridge OS also tints squares green, amber and purple by topic
+// (outcome value in green, alumni in honey…). The same names as Tag's colors.
+const ICON_COLOR = {
+    blue: "bg-[var(--primary)]/8 text-[var(--primary)]",
+    green: "bg-[var(--success)]/8 text-[var(--success-text)]",
+    amber: "bg-[var(--warning)]/10 text-[var(--warning-text)]",
+    purple: "bg-[var(--purple)]/8 text-[var(--purple)]",
+};
+function CardHeader({ title, icon, iconColor = "blue", hint, leading, description, meta, action, strip = false, as: Heading = "h2", compact = false }) {
+    const ctx = React.useContext(CardContext);
+    return (_jsxs("header", { "data-slot": "card-header", className: cn("flex gap-3", description ? "items-start" : "items-center", strip
+            ? "-mx-[var(--card-inset)] -mt-[var(--card-inset)] mb-[var(--card-inset)] items-center border-b border-[var(--border-divider)] bg-[var(--surface-secondary)]/50 px-[var(--card-pad)] py-3.5"
+            : "mb-4 last:mb-0"), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: cn("flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-[18px]", ICON_COLOR[iconColor]), children: icon })) : leading ? (_jsx("span", { className: "flex shrink-0", children: leading })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(Heading, { id: ctx?.titleId, "data-slot": "card-title", className: cn("truncate font-bold tracking-tight text-[var(--text-primary)]", strip || compact ? "text-14" : "text-16"), children: title }), hint ? _jsx(InfoHint, { text: hint }) : null] }), description ? (_jsx("p", { "data-slot": "card-description", className: "mt-0.5 text-[13px] text-[var(--text-muted)]", children: description })) : null] }), meta ? (_jsx("div", { "data-slot": "card-meta", className: "flex shrink-0 items-center gap-2 text-[12px] tabular-nums text-[var(--text-muted)]", children: meta })) : null, action ? (_jsx("div", { "data-slot": "card-action", className: "shrink-0", children: action })) : null] }));
+}
+/** A picture across the top of the card, edge to edge. Put it first. */
+function CardMedia({ src, alt, height = 128 }) {
+    return (
+    // eslint-disable-next-line @next/next/no-img-element -- package component; apps pass any image URL
+    _jsx("img", { "data-slot": "card-media", src: src, alt: alt, style: { height }, className: "-mx-[var(--card-inset)] -mt-[var(--card-inset)] mb-[var(--card-pad)] block w-[calc(100%+2*var(--card-inset))] max-w-none object-cover" }));
+}
+/** A row of buttons under a line, at the bottom of the card. */
+function CardFooter({ children, className }) {
+    return (_jsx("footer", { "data-slot": "card-footer", className: cn("mt-5 flex items-center justify-end gap-2 border-t border-[var(--border-divider)] pt-4", className), children: children }));
+}
+export { Card, CardFooter, CardHeader, CardMedia, cardVariants };

package/components/checkbox.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
+type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, "className" | "render"> & {
+    /** Text beside the box. Clicking it ticks the box. Without it, give the box an `aria-label`. */
+    label?: React.ReactNode;
+    /** A line of help under the label. */
+    description?: React.ReactNode;
+    /** Layout only: `mt-1`. */
+    className?: string;
+};
+declare function Checkbox({ label, description, className, disabled, ...props }: CheckboxProps): React.JSX.Element;
+type CheckboxGroupProps = Omit<CheckboxGroupPrimitive.Props, "className" | "render"> & {
+    /** What the options are about: "Show on each person". Read by screen readers as the group's name. */
+    label: React.ReactNode;
+    /** Layout only. */
+    className?: string;
+};
+/** A list of options, each a Checkbox with a `value` and a `label`. The group holds the ticked values. */
+declare function CheckboxGroup({ label, className, children, ...props }: CheckboxGroupProps): React.JSX.Element;
+export { Checkbox, CheckboxGroup };
+export type { CheckboxGroupProps, CheckboxProps };

package/components/checkbox.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
+import { Check, Minus } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+// A box people tick: choosing rows, turning on one option in a form, or picking several from a list.
+// Started from shadcn's Base UI checkbox, then put on Bridge's look.
+//
+// Decisions (2026-11-03, after checking all 12 app repos: about 120 checkboxes, most in raise and
+// app-directories):
+// - 16px box, 4px corners: the shadcn size every app but Bridge OS uses. Bridge OS's 14px boxes are the
+//   ones the Selection pattern flags as too small to hit.
+// - The empty box's outline is --text-muted, not a border token: --border-default is 1.2:1 on white, and a
+//   control's outline needs 3:1. Ticked and part-ticked fill with --primary-solid, like Switch.
+// - Every box has a 28px hit area (Bridge's smallest target), reaching past it invisibly.
+// - "Part-ticked" (`indeterminate`) for a "Select all" box when only some rows are chosen, as the
+//   Selection pattern asks. app-cc draws this by hand in 12 places.
+// - `label` and `description` for the one-option-in-a-form case ("I currently work here"), and
+//   CheckboxGroup for a list of options (app-directories' column options, raise's view settings).
+const boxClasses = cn("relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-[var(--text-muted)] bg-[var(--surface-primary)] text-white", "transition-colors duration-150 ease-out outline-none", "after:absolute after:-inset-1.5 after:content-['']", "hover:border-[var(--text-secondary)]", "focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--surface-primary)]", "data-[checked]:border-[var(--primary-solid)] data-[checked]:bg-[var(--primary-solid)]", "data-[indeterminate]:border-[var(--primary-solid)] data-[indeterminate]:bg-[var(--primary-solid)]", "data-[checked]:hover:border-[var(--primary-solid-hover)] data-[checked]:hover:bg-[var(--primary-solid-hover)]", "data-[indeterminate]:hover:border-[var(--primary-solid-hover)] data-[indeterminate]:hover:bg-[var(--primary-solid-hover)]", "aria-invalid:border-[var(--error)]", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50");
+function Checkbox({ label, description, className, disabled, ...props }) {
+    const descriptionId = React.useId();
+    const box = (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", disabled: disabled, "aria-describedby": description ? descriptionId : undefined, className: cn(boxClasses, !label && className, label && "mt-0.5"), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", keepMounted: true, className: "flex data-[unchecked]:hidden", render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? _jsx(Minus, { className: "size-3", strokeWidth: 3 }) : _jsx(Check, { className: "size-3", strokeWidth: 3 }) })) }) }));
+    if (!label)
+        return box;
+    return (_jsxs("label", { "data-slot": "checkbox-label", className: cn("flex w-fit items-start gap-2.5", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), children: [box, _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[14px] leading-5 text-[var(--text-primary)]", children: label }), description ? (_jsx("span", { id: descriptionId, className: "text-[12px] leading-4 text-[var(--text-muted)]", children: description })) : null] })] }));
+}
+/** A list of options, each a Checkbox with a `value` and a `label`. The group holds the ticked values. */
+function CheckboxGroup({ label, className, children, ...props }) {
+    const labelId = React.useId();
+    return (_jsxs(CheckboxGroupPrimitive, { "data-slot": "checkbox-group", "aria-labelledby": labelId, className: cn("flex flex-col gap-3", className), ...props, children: [_jsx("span", { id: labelId, className: "text-[14px] font-medium text-[var(--text-primary)]", children: label }), children] }));
+}
+export { Checkbox, CheckboxGroup };

package/components/collapsible.d.ts

@@ -0,0 +1,29 @@
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import { type VariantProps } from "class-variance-authority";
+import type { ReactNode } from "react";
+declare const triggerVariants: (props?: ({
+    variant?: "section" | "inline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CollapsibleProps = Omit<CollapsiblePrimitive.Root.Props, "className" | "render"> & {
+    /** Layout only. */
+    className?: string;
+};
+/** Holds whether it's open. Put a CollapsibleTrigger and a CollapsibleContent inside. */
+declare function Collapsible({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+type CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, "className" | "render" | "children"> & VariantProps<typeof triggerVariants> & {
+    /** The words on the trigger: "Advanced", "History on this list". */
+    children: ReactNode;
+    /** `section` only: a number shown before the arrow, like how many items are inside. */
+    count?: number;
+    /** Layout only. */
+    className?: string;
+};
+declare function CollapsibleTrigger({ variant, count, className, children, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+type CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, "className" | "render"> & {
+    /** Layout only: `pt-3`, `pl-5`. */
+    className?: string;
+};
+/** What opens. Slides open and shut; content inside keeps its own spacing. */
+declare function CollapsibleContent({ className, children, ...props }: CollapsibleContentProps): import("react").JSX.Element;
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, triggerVariants as collapsibleTriggerVariants };
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps };

package/components/collapsible.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import { cva } from "class-variance-authority";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@brdgapp/ui/lib/utils";
+// A section people open and close: "Advanced", "History on this list". Started from shadcn's Base UI
+// collapsible, then given Bridge's two looks.
+//
+// Decisions (2026-11-03, after checking all 12 app repos: about 40 hand-made open/close sections):
+// - `section`: title on the left, a down arrow on the right that flips up when open. 28 files, among them
+//   Bridge OS's "Advanced" in the account drawer and app-perks' Disclosure.
+// - `inline`: a small right arrow before the words, turning down when open. 13 files, among them raise's
+//   "History on this list" and app-portfolio's expandable rows.
+// - Opens by sliding, 200ms, so what's below moves smoothly instead of jumping. Base UI measures the
+//   height. Off with reduced motion.
+const triggerVariants = cva("group/collapsible-trigger inline-flex items-center rounded text-left outline-none transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-[var(--primary)] disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        variant: {
+            section: "w-full justify-between gap-3 py-1 text-[13px] font-bold text-[var(--text-primary)]",
+            inline: "-mx-1 gap-1 px-1 text-[13px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
+        },
+    },
+    defaultVariants: { variant: "section" },
+});
+/** Holds whether it's open. Put a CollapsibleTrigger and a CollapsibleContent inside. */
+function Collapsible({ className, ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", className: className, ...props });
+}
+function CollapsibleTrigger({ variant = "section", count, className, children, ...props }) {
+    const arrow = "size-4 shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none";
+    return (_jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", "data-variant": variant, className: cn(triggerVariants({ variant }), className), ...props, children: variant === "inline" ? (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { "aria-hidden": "true", className: cn(arrow, "group-data-[panel-open]/collapsible-trigger:rotate-90") }), children] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1", children: children }), count !== undefined ? (_jsx("span", { className: "text-[12px] font-medium tabular-nums text-[var(--text-muted)]", children: count.toLocaleString("en-US") })) : null, _jsx(ChevronDown, { "aria-hidden": "true", className: cn(arrow, "group-hover/collapsible-trigger:text-[var(--text-primary)] group-data-[panel-open]/collapsible-trigger:rotate-180") })] })) }));
+}
+/** What opens. Slides open and shut; content inside keeps its own spacing. */
+function CollapsibleContent({ className, children, ...props }) {
+    return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", className: cn("h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none", "data-[starting-style]:h-0 data-[ending-style]:h-0"), ...props, children: _jsx("div", { className: className, children: children }) }));
+}
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, triggerVariants as collapsibleTriggerVariants };

package/components/column-filter-menu.d.ts

@@ -0,0 +1,15 @@
+import { type LucideIcon } from "lucide-react";
+import { type FilterPillOption } from "@brdgapp/ui/components/filter-pill";
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+type ColumnFilterMenuProps<T extends string> = ElementProps<HTMLButtonElement> & {
+    icon: LucideIcon;
+    label: string;
+    /** Explains the column. Hidden while the menu is open. */
+    tooltip?: string;
+    value: T;
+    options: FilterPillOption<T>[];
+    onChange: (value: T) => void;
+};
+declare function ColumnFilterMenu<T extends string>({ icon: Icon, label, tooltip, value, options, onChange, ...rest }: ColumnFilterMenuProps<T>): import("react").JSX.Element;
+export { ColumnFilterMenu };
+export type { ColumnFilterMenuProps };

package/components/column-filter-menu.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu } from "@base-ui/react/menu";
+import { ChevronDown } from "lucide-react";
+import { FilterMenuPopup, FilterSheet } from "@brdgapp/ui/components/filter-pill";
+import { useIsMobile } from "@brdgapp/ui/hooks/use-is-mobile";
+import { Tip } from "@brdgapp/ui/components/info-hint";
+import { cn } from "@brdgapp/ui/lib/utils";
+function ColumnFilterMenu({ icon: Icon, label, tooltip, value, options, onChange, ...rest }) {
+    const [open, setOpen] = useState(false);
+    const mobile = useIsMobile();
+    const active = options.length > 0 && value !== options[0]?.value;
+    const activeLabel = options.find((o) => o.value === value)?.label;
+    const name = `Filter by ${label.toLowerCase()}${active && activeLabel ? `: ${activeLabel}` : ""}`;
+    const triggerClass = 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)]", active ? "text-[var(--primary)]" : "text-[var(--text-secondary)]");
+    const inner = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn("size-3.5", active ? "text-[var(--primary)]" : "text-[var(--text-muted)]") }), label, active ? _jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-[var(--primary)]" }) : null, _jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-3.5 text-[var(--text-muted)] transition-transform", open && "rotate-180") })] }));
+    // Phones: a bottom sheet instead of a menu. No tooltip: touch has no hover.
+    if (mobile) {
+        return (_jsxs(_Fragment, { children: [_jsx("button", { ...rest, type: "button", "data-slot": "column-filter-menu", "aria-haspopup": "dialog", "aria-label": name, className: triggerClass, onClick: (e) => {
+                        // A header often sits in a clickable row; keep the click here.
+                        e.stopPropagation();
+                        setOpen(true);
+                    }, children: inner }), _jsx(FilterSheet, { open: open, onClose: () => setOpen(false), title: label, value: value, options: options, onChange: onChange })] }));
+    }
+    return (_jsxs(Menu.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Tip, { text: tooltip, disabled: open, children: _jsx(Menu.Trigger, { ...rest, "data-slot": "column-filter-menu", "aria-label": name, 
+                    // A header often sits in a clickable row; keep the click here.
+                    onClick: (e) => e.stopPropagation(), className: triggerClass, children: inner }) }), _jsx(FilterMenuPopup, { value: value, options: options, onChange: onChange, width: 220, align: "start" })] }));
+}
+export { ColumnFilterMenu };

package/components/column-sort-button.d.ts

@@ -0,0 +1,18 @@
+import { type LucideIcon } from "lucide-react";
+import { type ElementProps } from "@brdgapp/ui/lib/utils";
+type ColumnSortButtonProps = ElementProps<HTMLButtonElement> & {
+    icon: LucideIcon;
+    label: string;
+    tooltip?: string;
+    /** This column's sort, or null when another column is the sort. */
+    direction: "asc" | "desc" | null;
+    /** Words for each direction, read by screen readers: { asc: "lowest first", desc: "highest first" }. */
+    describe?: {
+        asc: string;
+        desc: string;
+    };
+    onClick: () => void;
+};
+declare function ColumnSortButton({ icon: Icon, label, tooltip, direction, describe, onClick, ...rest }: ColumnSortButtonProps): import("react").JSX.Element;
+export { ColumnSortButton };
+export type { ColumnSortButtonProps };