@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/components/Chart.d.ts

@@ -0,0 +1,35 @@
+export interface ChartSeries {
+    key: string;
+    /** Legend text (defaults to `key`). */
+    label?: string;
+    /** One value per entry of `labels`. */
+    values: number[];
+}
+export interface ChartProps {
+    type: 'bar' | 'line' | 'pie';
+    /** Category (x) labels. For `pie` they name the slices of the first series. */
+    labels: string[];
+    series: ChartSeries[];
+    /** Accessible description of the whole chart. */
+    ariaLabel: string;
+    /** Formats values in axis ticks and slice titles. */
+    formatValue?: (value: number) => string;
+    /** Hide the legend. */
+    hideLegend?: boolean;
+    emptyLabel?: string;
+    /**
+     * Longest category label drawn on the x axis, in characters; longer labels are cut with an
+     * ellipsis and carry the full text as a `<title>`. Default: what fits the band (about 5px a
+     * character), at least 3.
+     */
+    maxLabelChars?: number;
+    className?: string;
+    testId?: string;
+}
+/** Cut `label` to `max` characters with an ellipsis (the full text stays in a `<title>`). */
+export declare function truncateLabel(label: string, max: number): string;
+/**
+ * Data-bound bar, line or pie chart in plain SVG. No chart library: it renders from props,
+ * is themed by tokens and carries a text alternative (`ariaLabel`, slice and bar `<title>`s).
+ */
+export declare function Chart({ type, labels, series, ariaLabel, formatValue, hideLegend, emptyLabel, maxLabelChars, className, testId, }: ChartProps): import("react").JSX.Element;

package/dist/components/CollectionDetail.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface CollectionDetailContext<T> {
+    previous?: T;
+    next?: T;
+}
+export interface CollectionDetailProps<T> {
+    /** The collection, supplied by the host (CMS, files, API...). */
+    items: T[];
+    /** The slug from the host's route. Absent: the list is rendered. */
+    slug?: string;
+    getSlug: (item: T) => string;
+    renderList: (items: T[]) => ReactNode;
+    /** One item's page. `previous` / `next` are the neighbours in `items` order. */
+    renderDetail: (item: T, context: CollectionDetailContext<T>) => ReactNode;
+    /** Shown when `slug` matches nothing. */
+    renderNotFound?: (slug: string) => ReactNode;
+}
+/**
+ * The list-and-detail page contract for a collection (people, articles, services...). It owns
+ * only the slug lookup; the host owns the route, the data and every pixel of both views, so one
+ * route (`/things/:slug?`) serves the list and each detail page.
+ */
+export declare function CollectionDetail<T>({ items, slug, getSlug, renderList, renderDetail, renderNotFound, }: CollectionDetailProps<T>): import("react").JSX.Element;

package/dist/components/Columns.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type ColumnsCount = 2 | 3 | 4;
+export type ColumnsGap = 'sm' | 'md' | 'lg';
+export interface ColumnsProps {
+    count?: ColumnsCount;
+    gap?: ColumnsGap;
+    columns: ReactNode[];
+    testId?: string;
+}
+/** Responsive N-column row. Each column hosts a nested Puck slot. */
+export declare function Columns({ count, gap, columns, testId }: ColumnsProps): import("react").JSX.Element;

package/dist/components/ContactForm.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+export interface ContactFieldOption {
+    value: string;
+    label: string;
+}
+export interface ContactField {
+    name: string;
+    label: string;
+    type?: 'text' | 'email' | 'tel' | 'textarea' | 'select';
+    required?: boolean;
+    /** Choices for `type: 'select'`. */
+    options?: ContactFieldOption[];
+    /** Initial value (for example read from the URL query by the host). */
+    defaultValue?: string;
+    placeholder?: string;
+}
+export interface ContactFormTestIds {
+    form: string;
+    success: string;
+    submit: string;
+    /** Control of the field named `name` (default `{testId}-field-{name}`). */
+    field: (name: string) => string;
+}
+export interface ContactFormProps {
+    fields: ContactField[];
+    submitLabel?: string;
+    /** Optional POST endpoint. When set (and no `onSubmit`), the form submits natively to it. */
+    action?: string;
+    /**
+     * Handles the submit: receives the field values. When provided the form does not post
+     * natively; resolve to show the success state, reject to keep the form open.
+     */
+    onSubmit?: (values: Record<string, string>) => void | Promise<void>;
+    /** Message shown after a client-side (no-action) submit. */
+    successMessage?: string;
+    /**
+     * Replaces the success message block. The second argument returns the form to its initial
+     * state (no remount with `key` needed), e.g. for a "send another" button.
+     */
+    renderSuccess?: (values: Record<string, string>, reset: () => void) => ReactNode;
+    /** With the default success message, adds a button with this label that resets the form. */
+    resetLabel?: string;
+    /** Called with every field's current value on each change (and not on the initial render). */
+    onValuesChange?: (values: Record<string, string>) => void;
+    /**
+     * Content between the fields and the submit button: a note that depends on a field, a consent
+     * line, a summary. A function receives the current values and re-renders on every change.
+     */
+    footerSlot?: ReactNode | ((values: Record<string, string>) => ReactNode);
+    testId?: string;
+    testIds?: Partial<ContactFormTestIds>;
+}
+/** A configurable lead/contact form. Posts to `action`, hands values to `onSubmit`, or confirms. */
+export declare function ContactForm({ fields, submitLabel, action, onSubmit, successMessage, renderSuccess, resetLabel, onValuesChange, footerSlot, testId, testIds, }: ContactFormProps): import("react").JSX.Element;

package/dist/components/Container.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type ContainerWidth = 'narrow' | 'default' | 'wide' | 'full';
+export type ContainerPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface ContainerProps {
+    width?: ContainerWidth;
+    padding?: ContainerPadding;
+    children: ReactNode;
+    testId?: string;
+}
+/** Max-width wrapper that centres and pads a nested Puck slot. */
+export declare function Container({ width, padding, children, testId }: ContainerProps): import("react").JSX.Element;

package/dist/components/DataTable.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+export interface Column<T> {
+    key: string;
+    header: ReactNode;
+    render: (row: T) => ReactNode;
+    align?: 'left' | 'right' | 'center';
+    /** Header becomes a sort button (needs `sort` and `onSortChange` on the table). */
+    isSortable?: boolean;
+    className?: string;
+    headClassName?: string;
+}
+export interface DataTableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+export interface DataTableTestIds {
+    table: string;
+    empty: string;
+    /** Test id of a row. */
+    row: (id: string) => string;
+}
+export interface DataTableProps<T> {
+    columns: Column<T>[];
+    rows: T[];
+    getRowId: (row: T) => string;
+    onRowClick?: (row: T) => void;
+    /** Test id area prefix, e.g. "orders" gives rows "orders-row-{id}". Default "data". */
+    area?: string;
+    /** Replaces the ids derived from `area`. */
+    testIds?: Partial<DataTableTestIds>;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    /** Controlled sort state. The host sorts `rows`; the table only renders headers. */
+    sort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort) => void;
+    /** Controlled row selection: adds a leading checkbox column when `onSelectedIdsChange` is set. */
+    selectedIds?: string[];
+    onSelectedIdsChange?: (ids: string[]) => void;
+    /** Accessible names of the selection checkboxes. */
+    selectionLabels?: {
+        selectAll: string;
+        selectRow: string;
+    };
+    className?: string;
+}
+/** The one true table. Column-config driven, fully test-id'd, optional navigation, sort, selection. */
+export declare function DataTable<T>({ columns, rows, getRowId, onRowClick, area, testIds, emptyTitle, emptyDescription, sort, onSortChange, selectedIds, onSelectedIdsChange, selectionLabels, className, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/DataTableBlock.d.ts

@@ -0,0 +1,26 @@
+export interface DataTableBlockColumn {
+    /** Column heading text. */
+    header: string;
+    /** Key used to look a cell up in each row record. */
+    field: string;
+    /** Cell/heading alignment. */
+    align?: 'left' | 'right' | 'center';
+}
+export interface DataTableBlockProps {
+    /** Serializable column schema. */
+    columns: DataTableBlockColumn[];
+    /** One record per row; cells are looked up by each column's `field`. */
+    rows: Array<Record<string, string>>;
+    /** Optional caption rendered above the table. */
+    caption?: string;
+    /** Empty-state title shown when there are no rows. */
+    emptyText?: string;
+    /** testid area prefix; also set on the wrapper element. */
+    testId?: string;
+}
+/**
+ * Renders a {@link DataTable} from a flat, serializable schema. Columns are mapped
+ * to `Column<TableRowData>[]` (header string, positional-stable key, alignment) and
+ * each cell is resolved by `field`; rows carry a synthetic id for React keys/testids.
+ */
+export declare function DataTableBlock({ columns, rows, caption, emptyText, testId }: DataTableBlockProps): import("react").JSX.Element;

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+/** Centered placeholder for empty lists/panels: icon + title + description + action. */
+export declare function EmptyState({ icon: Icon, title, description, action, className, testId, }: {
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+    testId?: string;
+}): import("react").JSX.Element;

package/dist/components/EntityChip.d.ts

@@ -0,0 +1,24 @@
+import type { MouseEvent, ReactNode } from 'react';
+export interface EntityChipProps {
+    /** `pill`: glyph + label in an EntityPill; `icon`: the bare glyph (tooltip shows the details). */
+    variant?: 'icon' | 'pill';
+    icon: ReactNode;
+    label: string;
+    /** Second line of the icon variant's tooltip (e.g. "Shared", a model name). */
+    detail?: ReactNode;
+    /** Tooltip of the pill variant (e.g. "Open conversation"). */
+    pillTooltip?: ReactNode;
+    /** Tooltip of the icon variant; defaults to label + detail. Set false to drop it. */
+    showTooltip?: boolean;
+    href?: string;
+    onClick?: (e: MouseEvent) => void;
+    size?: 'sm' | 'base';
+    labelMaxWidth?: string;
+    className?: string;
+    testId?: string;
+}
+/**
+ * The shared shape of an entity reference (conversation, message, assistant ...): a bare glyph
+ * with a tooltip, or a pill with the label. Clickable when it has `onClick` or `href`.
+ */
+export declare function EntityChip({ variant, icon, label, detail, pillTooltip, showTooltip, href, onClick, size, labelMaxWidth, className, testId, }: EntityChipProps): import("react").JSX.Element;

package/dist/components/EntityIdentityBar.d.ts

@@ -0,0 +1,90 @@
+import { type ReactNode } from 'react';
+/** Longest a name may be. Exported so a form editing the same field agrees. */
+export declare const IDENTITY_NAME_MAX_LENGTH = 50;
+export interface EntityIdentityField {
+    /** Row caption. Rendered with a trailing colon. */
+    label: string;
+    value: string;
+    /** Stands in for an empty value, in italics — never a blank row. */
+    placeholder: string;
+    /** Commits the edit. Not called when the value is unchanged. */
+    onSave: (next: string) => void;
+    /** A description needs line breaks; a name does not. */
+    multiline?: boolean;
+    /** Caps the input and shows a counter as it fills. Names only, by default. */
+    maxLength?: number;
+    /** Classes for the read-mode value, e.g. a larger weight for the name. */
+    valueClassName?: string;
+    /**
+     * Content pinned to the RIGHT END of this row — e.g. the owning project
+     * beside a name, a member stack beside a status. Rows without one let their
+     * value run the full width, which is what a description wants.
+     */
+    trailing?: ReactNode;
+    /**
+     * Content rendered immediately BEFORE the value — the entity's own mark.
+     * Sits outside the edit swap, so starting to edit the name doesn't make the
+     * icon jump or disappear.
+     */
+    leading?: ReactNode;
+    /**
+     * Drops the caption from view for this row, leaving the value flush left.
+     * For a field whose value already says what it is — a workspace's name and
+     * description read as exactly that — the caption is a word the eye has to
+     * step over on the way in. The caption stays in the markup for screen
+     * readers, which have no such visual cue to fall back on.
+     */
+    hideLabel?: boolean;
+    /** Row test id; the pencil and input derive `-edit` and `-input`. */
+    testId?: string;
+}
+export interface EntityIdentityBarProps {
+    /** The editable text fields, in order. Usually name then description. */
+    fields: EntityIdentityField[];
+    /**
+     * Read-only rows shown after the editable ones — anything whose control the
+     * consumer owns (a project picker, an owner avatar, a status). Rendered with
+     * the same caption column so every row lines up.
+     */
+    extraRows?: {
+        label: string;
+        content: ReactNode;
+        trailing?: ReactNode;
+        testId?: string;
+    }[];
+    /** Hides every pencil. A viewer without permission sees values, not controls. */
+    canEdit?: boolean;
+    /** Trailing controls, pinned right — e.g. a member stack, a status. */
+    actions?: ReactNode;
+    /**
+     * Controls that act on the ENTITY rather than on any one field — typically an
+     * overflow menu holding delete or leave. Sits under the field list, where a
+     * destructive action is findable but not in the path of everyday reading.
+     */
+    footer?: ReactNode;
+    className?: string;
+    testId?: string;
+}
+/**
+ * The "what am I looking at" bar for an entity's own page.
+ *
+ * A caption column (`Name:`, `Description:`, `Project:`) and a value column. The
+ * captions are the point: a bare bold string at the top of a page reads equally
+ * as a workspace, a project, a case file or a folder, and people read it as
+ * whichever they expected. Saying which field is which costs one column and
+ * removes the ambiguity entirely.
+ *
+ * Editing happens in place. The pencil is always visible to someone who can use
+ * it rather than revealed on hover — a control you have to go hunting for is one
+ * most people never find, and hover doesn't exist on touch. Commit is on blur
+ * and on Enter (single-line fields only, so a description can hold line
+ * breaks); Escape abandons the edit.
+ *
+ * Deliberately NOT a form: no submit, no dirty state, no field-level errors.
+ * When a consumer needs visibility toggles, destructive actions or validation
+ * messages, those belong in its settings form — this bar is the identity of the
+ * thing, shown where you are working on it.
+ *
+ * Styled with SEMANTIC tokens only, so every host gets it in its own colours.
+ */
+export declare function EntityIdentityBar({ fields, extraRows, canEdit, actions, footer, className, testId, }: EntityIdentityBarProps): import("react").JSX.Element;

package/dist/components/EntityTooltip.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+/**
+ * Parts for the hover card of an entity pill (workspace, user, tag, ...): a header, optional
+ * stat rows, bordered sections and an action hint. The host fills them from its own data.
+ */
+export declare function EntityTooltip({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface EntityTooltipHeaderProps {
+    /** Icon / avatar before the title. */
+    lead: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Right-hand badge. */
+    trailing?: ReactNode;
+    /** Extra glyph after the title (e.g. an agent mark). */
+    titleAccessory?: ReactNode;
+}
+export declare function EntityTooltipHeader({ lead, title, subtitle, trailing, titleAccessory, }: EntityTooltipHeaderProps): import("react").JSX.Element;
+export interface EntityTooltipStat {
+    key: string;
+    icon: ReactNode;
+    label: ReactNode;
+    value: ReactNode;
+}
+/** Label/value rows between two rules. */
+export declare function EntityTooltipStats({ stats }: {
+    stats: EntityTooltipStat[];
+}): import("react").JSX.Element;
+/** A secondary section under a rule, optionally headed by an icon + text. */
+export declare function EntityTooltipSection({ icon, heading, children, }: {
+    icon?: ReactNode;
+    heading?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** Muted one-liner at the foot of the card, e.g. "Click to send message". */
+export declare function EntityTooltipHint({ icon, children, isRuled, }: {
+    icon?: ReactNode;
+    children: ReactNode;
+    /** Draw the rule above (the hint closes a card that already has sections). */
+    isRuled?: boolean;
+}): import("react").JSX.Element;

package/dist/components/FAQ.d.ts

@@ -0,0 +1,14 @@
+export interface FaqItem {
+    question: string;
+    answer?: string;
+}
+export interface FAQProps {
+    items: FaqItem[];
+    testId?: string;
+}
+/**
+ * Accessible disclosure list. Built on native `<details>`/`<summary>` so it works
+ * without client state (correct in the Puck preview and static renders) and stays
+ * keyboard-accessible. Token-only styling.
+ */
+export declare function FAQ({ items, testId }: FAQProps): import("react").JSX.Element;

package/dist/components/FeatureGrid.d.ts

@@ -0,0 +1,18 @@
+import type { LucideIcon } from 'lucide-react';
+import { type BlockLinkComponent } from './blockLink';
+export interface FeatureItem {
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    /** When set, the card becomes a link to this destination. */
+    href?: string;
+}
+export interface FeatureGridProps {
+    columns?: '2' | '3';
+    items: FeatureItem[];
+    /** Inject a router link (adapted to `href`) so linked cards navigate in-SPA. */
+    linkComponent?: BlockLinkComponent;
+    testId?: string;
+}
+/** Responsive grid of icon + title + description feature cards. */
+export declare function FeatureGrid({ columns, items, linkComponent, testId }: FeatureGridProps): import("react").JSX.Element;

package/dist/components/Footer.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { BlockLinkComponent } from './blockLink';
+export interface FooterLink {
+    label: string;
+    href?: string;
+}
+export interface FooterColumn {
+    heading: string;
+    links: FooterLink[];
+}
+export interface FooterProps {
+    columns: FooterColumn[];
+    copyright?: string;
+    /** Brand block (logo, name) above the columns. */
+    brand?: ReactNode;
+    /** Short description under the brand. */
+    blurb?: ReactNode;
+    /** Bottom row, right of the copyright: legal links, regulatory text, a language switch. */
+    legal?: ReactNode;
+    /** Router link for the column links (default: plain anchors). */
+    linkComponent?: BlockLinkComponent;
+    testId?: string;
+}
+/** Site footer: optional brand and blurb, link columns, and a copyright and legal row. */
+export declare function Footer({ columns, copyright, brand, blurb, legal, linkComponent: Link, testId, }: FooterProps): import("react").JSX.Element;

package/dist/components/Gallery.d.ts

@@ -0,0 +1,15 @@
+import { type BlockImageProps } from './BlockImage';
+export interface GalleryImage {
+    src?: string;
+    alt?: string;
+    caption?: string;
+}
+export interface GalleryProps {
+    images: GalleryImage[];
+    columns?: '2' | '3' | '4';
+    aspect?: BlockImageProps['aspect'];
+    rounded?: BlockImageProps['rounded'];
+    testId?: string;
+}
+/** A responsive image grid. Each tile previews via BlockImage with a caption. */
+export declare function Gallery({ images, columns, aspect, rounded, testId, }: GalleryProps): import("react").JSX.Element;

package/dist/components/Hero.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import type { BlockLinkComponent } from './blockLink';
+export type HeroTone = 'default' | 'muted' | 'ink';
+export type HeroAlign = 'left' | 'center';
+export interface HeroCta {
+    label?: string;
+    href?: string;
+}
+export interface HeroProps {
+    eyebrow?: ReactNode;
+    /** Text (with optional `emphasis`) or any node. */
+    title: ReactNode;
+    /** A word/phrase within a string `title` to accent (rendered in the primary colour). */
+    emphasis?: string;
+    subtitle?: ReactNode;
+    /** Small print under the buttons (a trust line, a note). */
+    caption?: ReactNode;
+    /** Router link for the CTAs (default: plain anchors). */
+    linkComponent?: BlockLinkComponent;
+    primaryCta?: HeroCta;
+    secondaryCta?: HeroCta;
+    align?: HeroAlign;
+    tone?: HeroTone;
+    /** Side visual (ignored when `backgroundImage` is set). */
+    imageUrl?: string;
+    /** Full-bleed background image URL/data-URI. Turns the hero into a cover band. */
+    backgroundImage?: string;
+    /** Darkening scrim over the background image, for legible copy. Default true. */
+    overlay?: boolean;
+    /** Override the eyebrow styling (e.g. a host brand accent). Default: token classes. */
+    eyebrowClassName?: string;
+    testId?: string;
+}
+/** Editorial marketing hero: eyebrow, headline, subtitle, two CTAs and a visual. */
+export declare function Hero({ eyebrow, title, emphasis, subtitle, caption, linkComponent: Link, primaryCta, secondaryCta, align, tone, imageUrl, backgroundImage, overlay, eyebrowClassName, testId, }: HeroProps): import("react").JSX.Element;

package/dist/components/ListBlock.d.ts

@@ -0,0 +1,10 @@
+export interface ListItem {
+    text: string;
+}
+export interface ListBlockProps {
+    ordered?: boolean;
+    items: ListItem[];
+    testId?: string;
+}
+/** Ordered or unordered prose list. Token-clean. */
+export declare function ListBlock({ ordered, items, testId }: ListBlockProps): import("react").JSX.Element;

package/dist/components/LogoCloud.d.ts

@@ -0,0 +1,12 @@
+export interface LogoItem {
+    label: string;
+}
+export interface LogoCloudProps {
+    items: LogoItem[];
+    testId?: string;
+}
+/**
+ * Text-based "logo" wall — brand names rendered as muted pill marks. Self-contained
+ * (no external images) so the palette looks complete offline.
+ */
+export declare function LogoCloud({ items, testId }: LogoCloudProps): import("react").JSX.Element;

package/dist/components/MediaText.d.ts

@@ -0,0 +1,15 @@
+export interface MediaTextProps {
+    eyebrow?: string;
+    title: string;
+    body?: string;
+    imageUrl?: string;
+    /** Which side the media sits on (desktop). */
+    mediaSide?: 'left' | 'right';
+    cta?: {
+        label?: string;
+        href?: string;
+    };
+    testId?: string;
+}
+/** A split media-and-copy row: an image on one side, prose + CTA on the other. */
+export declare function MediaText({ eyebrow, title, body, imageUrl, mediaSide, cta, testId, }: MediaTextProps): import("react").JSX.Element;

package/dist/components/MemberAvatarStack.d.ts

@@ -0,0 +1,36 @@
+/** One face in the stack — source-agnostic, not a raw SDK user. */
+export interface StackedMember {
+    name: string;
+    picture?: string | null;
+}
+export interface MemberAvatarStackProps {
+    members: StackedMember[];
+    /** Total, when it exceeds what's shown. Defaults to `members.length`. */
+    total?: number;
+    /** Faces before the rest collapse into a `+N`. */
+    max?: number;
+    /**
+     * The viewer isn't allowed to see who is here (e.g. row-level security hides
+     * the members of a public workspace you haven't joined). Renders an em dash
+     * rather than lying with an empty stack.
+     */
+    hidden?: boolean;
+    /** Makes the stack a button — e.g. to expand the member list below it. */
+    onClick?: () => void;
+    /** Rotates the chevron and drives `aria-expanded` when it is a toggle. */
+    expanded?: boolean;
+    /** Ring colour behind each face; match the surface it sits on. */
+    ringClassName?: string;
+    className?: string;
+    testId?: string;
+}
+/**
+ * An overlapping stack of member faces, with the overflow collapsed to `+N`.
+ *
+ * Lives here rather than inside a card because "who is in this thing" is shown
+ * in more than one place — a workspace card, a workspace's own header — and
+ * those had drawn it twice. Given `onClick` it becomes the control that expands
+ * the full list, which is a better affordance than a button labelled "Members"
+ * beside the very faces it would reveal.
+ */
+export declare function MemberAvatarStack({ members, total, max, hidden, onClick, expanded, ringClassName, className, testId, }: MemberAvatarStackProps): import("react").JSX.Element;

package/dist/components/MetricCard.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface MetricCardProps {
+    label: ReactNode;
+    value: ReactNode;
+    icon?: LucideIcon;
+    hint?: ReactNode;
+    delta?: {
+        value: string;
+        direction: 'up' | 'down';
+        good?: boolean;
+    };
+    /**
+     * Icon accent as a theme colour-token key (e.g. `primary`, `success`, or the host's own brand
+     * token). Resolved to `var(--color-<accent>)` at render. `'default'` inherits `foreground`.
+     */
+    accent?: string;
+    /** Show a placeholder instead of the value (the figure is still being fetched). */
+    isLoading?: boolean;
+    /** Makes the tile a real link (ctrl/cmd-click works). */
+    href?: string;
+    /** Click handler; with `href`, a plain click calls it instead of navigating. */
+    onSelect?: () => void;
+    className?: string;
+    testId?: string;
+}
+/** The one true KPI tile. Used across every dashboard and module header. */
+export declare function MetricCard({ label, value, icon: Icon, hint, delta, accent, isLoading, href, onSelect, className, testId, }: MetricCardProps): import("react").JSX.Element;

package/dist/components/Navbar.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+import type { BlockLinkComponent } from './blockLink';
+export interface NavLink {
+    label: string;
+    href?: string;
+}
+export interface NavbarTestIds {
+    /** Link `i` (default `{testId}-link-{i}`). */
+    link: (index: number) => string;
+    cta: string;
+    menuButton: string;
+    menu: string;
+}
+export interface NavbarProps {
+    /** Brand: text, or any node (logo + name). */
+    brand: ReactNode;
+    /** Where the brand points. Omit for a non-link brand. */
+    brandHref?: string;
+    links: NavLink[];
+    cta?: {
+        label?: string;
+        href?: string;
+    };
+    /** Replaces `cta` with any node (a button group, a user menu). */
+    ctaSlot?: ReactNode;
+    /** Router link for the brand, links and CTA (default: plain anchors). */
+    linkComponent?: BlockLinkComponent;
+    /** Replaces the default mobile menu body (the links plus the CTA). */
+    mobileMenu?: ReactNode;
+    /** Labels of the mobile menu button. */
+    labels?: {
+        openMenu: string;
+        closeMenu: string;
+    };
+    testId?: string;
+    testIds?: Partial<NavbarTestIds>;
+}
+/** Marketing top navigation: brand, inline links, an optional CTA and a mobile menu. */
+export declare function Navbar({ brand, brandHref, links, cta, ctaSlot, linkComponent: Link, mobileMenu, labels, testId, testIds, }: NavbarProps): import("react").JSX.Element;