@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/tree-view.d.ts

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { type TreeCheckValueMode, type TreeItemState, type TreeNode, type UseTreeReturn } from "../lib/use-tree.js";
+export type { TreeNode, TreeItemState, TreeCheckValueMode } from "../lib/use-tree.js";
+export { useTree, type UseTreeOptions, type UseTreeReturn, type TreeCheckedState } from "../lib/use-tree.js";
+declare const treeViewLabels: {
+    loading: string;
+    loadError: string;
+    retry: string;
+    empty: string;
+    noMatches: string;
+    results: string;
+};
+export type TreeViewLabels = typeof treeViewLabels;
+export declare const treeRowVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    variant?: "sidebar" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Check box drawn for a treeitem (state lives on the row's `aria-checked`). */
+export declare function TreeCheckboxMark({ checked, className }: {
+    checked: boolean | "mixed";
+    className?: string;
+}): React.JSX.Element;
+/** Label with matched parts in bold (weight, not colour — readable on glass). */
+export declare function TreeLabelText({ text, query, locale }: {
+    text: string;
+    query?: string;
+    locale?: string;
+}): React.JSX.Element;
+export interface TreeViewRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    item: TreeItemState;
+    tree: UseTreeReturn;
+    /** Indent per level in px. */
+    indent?: number;
+    guides?: boolean;
+    size?: "sm" | "md";
+    variant?: "default" | "sidebar";
+    /** Show the check mark (checkbox mode). */
+    checkbox?: boolean;
+    query?: string;
+    /** Replace the label. */
+    label?: React.ReactNode;
+    /** Trailing buttons, revealed on hover / focus. */
+    actions?: React.ReactNode;
+    labels?: Partial<TreeViewLabels>;
+    /** Called on row click after the built-in behaviour. */
+    onRowClick?: (item: TreeItemState, e: React.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * One treeitem: indent guides, chevron (spinner while children load, retry on error), check mark,
+ * icon, label, badge and hover actions. Used by Tree view and Tree select; render it inside an
+ * element carrying `tree.getTreeProps()`.
+ */
+export declare const TreeViewRow: React.ForwardRefExoticComponent<TreeViewRowProps & React.RefAttributes<HTMLDivElement>>;
+export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onSelect" | "children"> {
+    /** The hierarchy. */
+    data: TreeNode[];
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** `"checkbox"` = tri-state checks with cascade. Default `"single"`. */
+    selectionMode?: "none" | "single" | "multiple" | "checkbox";
+    /** Selected ids (checked ids in `"checkbox"` mode). */
+    selected?: string[];
+    defaultSelected?: string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /** Checkbox mode: checking a parent checks its descendants. Default `true`. */
+    cascade?: boolean;
+    /** Checkbox mode: what a fully-checked branch yields. Default `"all"`. */
+    checkValueMode?: TreeCheckValueMode;
+    /** Can this node be selected? Default: any enabled node. */
+    isSelectable?: (node: TreeNode, hasChildren: boolean) => boolean;
+    /** Loads children of a node with `hasChildren` on first expand. */
+    loadChildren?: (node: TreeNode, signal: AbortSignal) => Promise<TreeNode[]>;
+    /** Keeps matches + ancestors and highlights the match. */
+    filter?: string;
+    /** Enter / double click (open a page, a folder). */
+    onAction?: (node: TreeNode) => void;
+    /** Trailing per-row buttons (revealed on hover / focus). Use `tabIndex={-1}`-free IconButtons; they stay mouse + Tab reachable. */
+    renderActions?: (node: TreeNode) => React.ReactNode;
+    /** Replace a row's label. */
+    renderLabel?: (item: TreeItemState) => React.ReactNode;
+    /** Render only the rows in view (thousands of nodes). Needs a fixed `height`. */
+    virtual?: boolean;
+    /** Scroll height (virtual mode, or any long tree). Default 360 when `virtual`. */
+    height?: number | string;
+    /** Indent per level in px. Default 16. */
+    indent?: number;
+    /** Indent guide lines. Default `true`. */
+    guides?: boolean;
+    variant?: "default" | "sidebar";
+    size?: "sm" | "md";
+    /** Shown when `data` is empty. */
+    emptyState?: React.ReactNode;
+    labels?: Partial<TreeViewLabels>;
+    /** Accessible name of the tree. */
+    "aria-label"?: string;
+}
+/**
+ * Display and navigate hierarchies — CMS page tree, category tree, media folders, department
+ * tree, file explorer panes. A flat WAI-ARIA tree (level / set size / position on every row) with
+ * single, multiple or tri-state checkbox selection, lazy children, filter with ancestors kept and
+ * optional virtualisation for 10k+ nodes.
+ *
+ * ```tsx
+ * <TreeView aria-label="Pages" data={pages} defaultExpanded={["company"]} onAction={(n) => open(n.id)} />
+ * <TreeView aria-label="Categories" data={categories} selectionMode="checkbox" checkValueMode="leaf" />
+ * ```
+ */
+export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tree-view.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronRight, RotateCw, TriangleAlert } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { highlightParts } from "../lib/text.js";
+import { useTree } from "../lib/use-tree.js";
+import { Spinner } from "./spinner.js";
+export { useTree } from "../lib/use-tree.js";
+const treeViewLabels = {
+    loading: "Loading…",
+    loadError: "Couldn't load",
+    retry: "Retry",
+    empty: "Nothing here yet",
+    noMatches: "No matches for “{query}”",
+    results: "{count, plural, =0 {No matches} one {# match} other {# matches}}",
+};
+export const treeRowVariants = cva([
+    "group/tree-row relative flex w-full min-w-0 cursor-default select-none items-center gap-1.5 rounded-ui-sm pe-1.5 text-start outline-none",
+    "transition-colors duration-100",
+    "hover:bg-hover focus-visible:bg-hover focus-visible:shadow-[inset_0_0_0_2px_var(--ring)]",
+    "aria-selected:bg-selected aria-selected:text-fg aria-selected:font-medium",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-45",
+], {
+    variants: {
+        size: {
+            sm: "h-[calc(var(--control-h)*0.7)] text-[13px]",
+            md: "h-[calc(var(--control-h)*0.8)] text-sm",
+        },
+        variant: {
+            default: "text-fg",
+            /** Navigation-like tree (docs, file explorer pane): accent ink on the current row. */
+            sidebar: "text-fg-muted hover:text-fg aria-selected:bg-accent-soft aria-selected:text-accent-ink",
+        },
+    },
+    defaultVariants: { size: "md", variant: "default" },
+});
+/* ------------------------------------------------------------------ */
+/* Row parts                                                           */
+/* ------------------------------------------------------------------ */
+/** Check box drawn for a treeitem (state lives on the row's `aria-checked`). */
+export function TreeCheckboxMark({ checked, className }) {
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "tree-checkbox", "data-state": checked === "mixed" ? "indeterminate" : checked ? "checked" : "unchecked", className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded-[5px] border border-field-border-hover bg-field text-accent-fg transition-colors duration-150", "data-[state=checked]:border-transparent data-[state=checked]:bg-accent data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-accent", "group-hover/tree-row:border-fg-subtle", className), children: checked === "mixed" ? (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", className: "size-3", focusable: "false", children: _jsx("path", { d: "M3.5 7h7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", className: "size-3", focusable: "false", children: _jsx("path", { d: "M3 7.4 5.8 10 11 4.2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) : null }));
+}
+/** Label with matched parts in bold (weight, not colour — readable on glass). */
+export function TreeLabelText({ text, query, locale }) {
+    if (!query?.trim())
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: highlightParts(text, query, locale).map((p, i) => p.match ? (_jsx("mark", { className: "rounded-[3px] bg-accent-soft px-px font-semibold text-fg", children: p.text }, i)) : (_jsx(React.Fragment, { children: p.text }, i))) }));
+}
+/**
+ * One treeitem: indent guides, chevron (spinner while children load, retry on error), check mark,
+ * icon, label, badge and hover actions. Used by Tree view and Tree select; render it inside an
+ * element carrying `tree.getTreeProps()`.
+ */
+export const TreeViewRow = React.forwardRef(function TreeViewRow({ item, tree, indent = 16, guides = true, size = "md", variant = "default", checkbox, query, label, actions, labels, onRowClick, className, style, onClick, onDoubleClick, ...props }, ref) {
+    const t = useLabels("treeView", treeViewLabels, labels);
+    const { locale } = useLocale();
+    const { node } = item;
+    const base = size === "sm" ? 4 : 6;
+    const pad = base + (item.level - 1) * indent;
+    return (_jsxs("div", { ref: ref, ...tree.getItemProps(item), "data-slot": "tree-row", "data-level": item.level, "data-match": item.match || undefined, className: cn(treeRowVariants({ size, variant }), className), style: { paddingInlineStart: pad, ...style }, onClick: (e) => {
+            onClick?.(e);
+            if (e.defaultPrevented || item.disabled)
+                return;
+            const el = e.currentTarget;
+            if (document.activeElement !== el)
+                el.focus({ preventScroll: true });
+            onRowClick?.(item, e);
+        }, onDoubleClick: onDoubleClick, ...props, children: [guides && item.level > 1
+                ? item.guides.map((on, i) => on || i === item.level - 2 ? (_jsx("span", { "aria-hidden": true, "data-slot": "tree-guide", className: cn("pointer-events-none absolute w-px bg-line", i === item.level - 2 && !on && item.last ? "top-0 h-1/2" : "inset-y-0"), style: { insetInlineStart: base + i * indent + 8 } }, i)) : null)
+                : null, _jsx("span", { "aria-hidden": true, "data-slot": "tree-toggle", className: cn("relative z-[1] -ms-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-[5px] text-fg-subtle transition-[transform,color,background-color] duration-150", item.hasChildren && "hover:bg-hover hover:text-fg"), onClick: (e) => {
+                    if (!item.hasChildren || item.disabled)
+                        return;
+                    e.stopPropagation();
+                    tree.toggleExpanded(item.id);
+                    e.currentTarget.closest("[data-tree-id]")?.focus({ preventScroll: true });
+                }, children: item.loading ? (_jsx(Spinner, { size: "xs", tone: "muted" })) : item.error ? (_jsx(TriangleAlert, { className: "size-3.5 text-warning" })) : item.hasChildren ? (_jsx(ChevronRight, { className: cn("size-3.5 transition-transform duration-150 rtl:-scale-x-100 motion-reduce:transition-none", item.expanded && "rotate-90 rtl:rotate-90"), strokeWidth: 2.25 })) : null }), checkbox ? _jsx(TreeCheckboxMark, { checked: item.checked }) : null, node.icon ? _jsx("span", { className: "inline-flex shrink-0 text-fg-muted [&_svg]:size-4", "aria-hidden": true, children: node.icon }) : null, _jsxs("span", { className: "min-w-0 flex-1 truncate", "data-slot": "tree-label", children: [label ?? _jsx(TreeLabelText, { text: node.label, query: query, locale: locale }), node.description ? _jsx("span", { className: "ms-2 text-xs font-normal text-fg-subtle", children: node.description }) : null] }), item.loading ? _jsx("span", { className: "sr-only", children: t("loading") }) : null, item.error ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-xs text-fg-muted", children: [_jsx("span", { children: t("loadError") }), _jsxs("button", { type: "button", tabIndex: -1, className: "inline-flex items-center gap-1 rounded-ui-sm px-1.5 py-0.5 font-medium text-fg hover:bg-hover focus-ring", onClick: (e) => {
+                            e.stopPropagation();
+                            tree.reload(item.id);
+                        }, children: [_jsx(RotateCw, { "aria-hidden": true, className: "size-3" }), " ", t("retry")] })] })) : null, node.badge != null ? _jsx("span", { className: "shrink-0 text-xs tabular text-fg-subtle", children: node.badge }) : null, actions ? (_jsx("span", { "data-slot": "tree-actions", className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover/tree-row:opacity-100 group-focus-visible/tree-row:opacity-100 focus-within:opacity-100 [&_button]:size-6", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: actions })) : null] }));
+});
+/**
+ * Display and navigate hierarchies — CMS page tree, category tree, media folders, department
+ * tree, file explorer panes. A flat WAI-ARIA tree (level / set size / position on every row) with
+ * single, multiple or tri-state checkbox selection, lazy children, filter with ancestors kept and
+ * optional virtualisation for 10k+ nodes.
+ *
+ * ```tsx
+ * <TreeView aria-label="Pages" data={pages} defaultExpanded={["company"]} onAction={(n) => open(n.id)} />
+ * <TreeView aria-label="Categories" data={categories} selectionMode="checkbox" checkValueMode="leaf" />
+ * ```
+ */
+export const TreeView = React.forwardRef(function TreeView({ data, expanded, defaultExpanded, onExpandedChange, selectionMode = "single", selected, defaultSelected, onSelectedChange, cascade, checkValueMode, isSelectable, loadChildren, filter, onAction, renderActions, renderLabel, virtual = false, height, indent = 16, guides = true, variant = "default", size = "md", emptyState, labels, className, style, ...props }, ref) {
+    const t = useLabels("treeView", treeViewLabels, labels);
+    const { locale, dir } = useLocale();
+    const checkbox = selectionMode === "checkbox";
+    const scrollRef = React.useRef(null);
+    const virtualizerRef = React.useRef(null);
+    const tree = useTree({
+        nodes: data,
+        expanded,
+        defaultExpanded,
+        onExpandedChange,
+        loadChildren,
+        filter,
+        locale,
+        dir,
+        selectionMode: checkbox ? "none" : selectionMode,
+        selected: checkbox ? undefined : selected,
+        defaultSelected: checkbox ? undefined : defaultSelected,
+        onSelectedChange: checkbox ? undefined : onSelectedChange,
+        isSelectable,
+        checkable: checkbox,
+        checked: checkbox ? selected : undefined,
+        defaultChecked: checkbox ? defaultSelected : undefined,
+        onCheckedChange: checkbox ? onSelectedChange : undefined,
+        cascade,
+        checkValueMode,
+        onAction,
+        scrollToIndex: (i) => virtualizerRef.current?.scrollToIndex(i, { align: "auto" }),
+    });
+    const rowPx = size === "sm" ? 28 : 32;
+    const virtualizer = useVirtualizer({
+        count: virtual ? tree.items.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => rowPx,
+        overscan: 12,
+        getItemKey: (i) => tree.items[i]?.id ?? i,
+    });
+    virtualizerRef.current = virtual ? virtualizer : null;
+    const onRowClick = (item) => {
+        if (checkbox)
+            tree.toggleChecked(item.id);
+        else if (selectionMode !== "none" && (!isSelectable || isSelectable(item.node, item.hasChildren)))
+            tree.select(item.id);
+        else if (item.hasChildren)
+            tree.toggleExpanded(item.id);
+    };
+    const renderRow = (item, extra) => (_jsx(TreeViewRow, { ref: extra?.measure, "data-index": extra?.index, item: item, tree: tree, indent: indent, guides: guides, size: size, variant: variant, checkbox: checkbox, query: filter, label: renderLabel?.(item), actions: renderActions?.(item.node), labels: labels, style: extra?.style, onRowClick: onRowClick, onDoubleClick: () => !item.disabled && onAction?.(item.node) }, item.id));
+    const treeProps = tree.getTreeProps();
+    const setRefs = (el) => {
+        treeProps.ref(el);
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+        if (!virtual)
+            scrollRef.current = el;
+    };
+    if (data.length === 0) {
+        return (_jsx("div", { "data-slot": "tree-view-empty", className: cn("px-3 py-6 text-center text-sm text-fg-muted", className), style: style, children: emptyState ?? t("empty") }));
+    }
+    const noMatches = tree.filtering && tree.items.length === 0;
+    const scrollHeight = height ?? (virtual ? 360 : undefined);
+    return (_jsxs("div", { "data-slot": "tree-view", className: cn("relative", className), style: style, children: [tree.filtering ? (_jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: t("results", { count: tree.matchCount }) })) : null, noMatches ? (_jsx("p", { className: "px-3 py-6 text-center text-sm text-fg-muted", children: t("noMatches", { query: filter ?? "" }) })) : virtual ? (_jsx("div", { ref: scrollRef, className: "overflow-auto overscroll-contain", style: { height: scrollHeight }, children: _jsx("div", { ...treeProps, ref: setRefs, "aria-label": props["aria-label"], ...props, className: "relative w-full outline-none", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((v) => {
+                        const item = tree.items[v.index];
+                        if (!item)
+                            return null;
+                        return renderRow(item, {
+                            index: v.index,
+                            measure: virtualizer.measureElement,
+                            style: { position: "absolute", top: 0, insetInlineStart: 0, transform: `translateY(${v.start}px)` },
+                        });
+                    }) }) })) : (_jsx("div", { ...treeProps, ref: setRefs, ...props, className: cn("grid gap-px outline-none", scrollHeight !== undefined && "overflow-auto overscroll-contain"), style: scrollHeight !== undefined ? { maxHeight: scrollHeight } : undefined, children: tree.items.map((item) => renderRow(item)) }))] }));
+});

package/dist/components/typography.d.ts

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const headingVariants: (props?: ({
+    size?: "display" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSize = NonNullable<VariantProps<typeof headingVariants>["size"]>;
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Semantic level (`<h1>`…`<h6>`). Default 2. Never skip levels for looks — change `size`. */
+    level?: HeadingLevel;
+    /** Visual size, independent of the level. Default: from the level (1 → xl, 2 → lg, 3 → md, 4+ → sm). */
+    size?: HeadingSize;
+    /** Render the styles on the child (e.g. a `<Link>` or a `<legend>`). */
+    asChild?: boolean;
+}
+/**
+ * A heading whose look (`size`) is decoupled from its level, so the outline never skips a
+ * level for visual reasons. `display` and `xl` use the preset's heading face; `<em>` inside
+ * follows the preset (italic in serif presets, plain in sans).
+ *
+ * ```tsx
+ * <Heading level={1} size="display">Dinner, <em>slowly</em>.</Heading>
+ * <Heading level={2} size="md">Billing details</Heading>
+ * ```
+ */
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const textVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    tone?: "accent" | "warning" | "danger" | "default" | "inherit" | "success" | "muted" | "subtle" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof textVariants> {
+    /** Element to render. Default `"p"`. */
+    as?: "p" | "span" | "div" | "label" | "small" | "strong" | "figcaption";
+    /** `true`: one line with an ellipsis. A number: clamp to that many lines. The full text goes into `title`. */
+    truncate?: boolean | number;
+    /** Tabular figures (prices, counts in columns). */
+    tabular?: boolean;
+    /** Render the styles on the child element. */
+    asChild?: boolean;
+    /** For `as="label"`. */
+    htmlFor?: string;
+}
+/**
+ * Body text: 12 / 13 / 14 / 16 px, seven tones, three weights, single-line truncation or
+ * multi-line clamp. Paragraphs wrap with `text-wrap: pretty`.
+ *
+ * ```tsx
+ * <Text tone="muted" size="sm">Last edited 3 minutes ago by Elif.</Text>
+ * <Text truncate={2}>{post.excerpt}</Text>
+ * ```
+ */
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+/** The opening paragraph under a page or article title. */
+export declare const Lead: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/** Inline code: `slug`, `npm run build`, a field key. */
+export declare const Code: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {
+    /** Who said it — rendered under the quote. */
+    cite?: string;
+    attribution?: React.ReactNode;
+}
+/** A pulled quote or testimonial, set in the heading face. */
+export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
+export interface NumericProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Monospaced (code font) instead of the UI font with tabular figures. Default `false`. */
+    mono?: boolean;
+    /** Colour by sign: negative → danger, positive → success. Pass the raw number. */
+    signOf?: number;
+}
+/**
+ * Numbers that line up: tabular figures, no wrapping. Format the value first (`useFormat()` or
+ * `createFormatter` from `@vamos-ui/react/format`), then render it here.
+ *
+ * ```tsx
+ * <Numeric>{f.currency("1250.50")}</Numeric>
+ * <Numeric signOf={-4.2}>−4.2%</Numeric>
+ * ```
+ */
+export declare const Numeric: React.ForwardRefExoticComponent<NumericProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Base size: 14 / 16 / 18 px. Default `"md"`. */
+    size?: "sm" | "md" | "lg";
+    /** Raw HTML from your editor or CMS. **Sanitize it on the server first.** */
+    html?: string;
+    /** Remove the reading-width cap (default `--measure`, 64ch). */
+    fullWidth?: boolean;
+    asChild?: boolean;
+}
+/**
+ * Styles rich content you don't control element by element: an article body from the editor,
+ * a CMS page, release notes. Headings, lists, quotes, code, tables and media follow the
+ * `data-font` preset and tokens. Put long prose on a `surface` (not straight on the glass scene).
+ *
+ * ```tsx
+ * <Prose html={post.bodyHtml} />
+ * <Prose size="lg" lang="en"><h2>Opening hours</h2><p>…</p></Prose>
+ * ```
+ */
+export declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+export interface ProseTableProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Names the scroll region for screen readers ("Opening hours"). */
+    label: string;
+}
+/** Wraps a wide table inside Prose in a keyboard-scrollable region. */
+export declare const ProseTable: React.ForwardRefExoticComponent<ProseTableProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/typography.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+/*
+ * Typography — server-compatible. Headings read the data-font axis: --font-heading,
+ * --display-weight / --display-tracking / --display-em, and scale with --display-scale.
+ */
+export const headingVariants = cva("text-balance text-fg [overflow-wrap:break-word]", {
+    variants: {
+        size: {
+            /** 56px × display-scale (fluid down to 38px on phones). Hero / page title on websites. */
+            display: "font-display [font-weight:var(--display-weight)] [letter-spacing:var(--display-tracking)] [&_em]:[font-style:var(--display-em)] text-[length:calc(clamp(38px,4.2vw+20px,56px)*var(--display-scale))] leading-[1.02]",
+            /** 44px × display-scale. Admin page title. */
+            xl: "font-display [font-weight:var(--display-weight)] [letter-spacing:var(--display-tracking)] [&_em]:[font-style:var(--display-em)] text-[length:calc(clamp(32px,2.6vw+22px,44px)*var(--display-scale))] leading-[1.05]",
+            /** 32px × display-scale. Section title. */
+            lg: "font-sans font-semibold tracking-[-0.022em] text-[length:calc(32px*var(--display-scale))] leading-[1.12]",
+            /** 22px. Card / panel title. */
+            md: "font-sans font-semibold tracking-[-0.016em] text-[22px] leading-[1.25]",
+            /** 17px. Group heading inside a panel. */
+            sm: "font-sans font-semibold tracking-[-0.01em] text-[17px] leading-[1.35]",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const defaultSize = { 1: "xl", 2: "lg", 3: "md", 4: "sm", 5: "sm", 6: "sm" };
+/**
+ * A heading whose look (`size`) is decoupled from its level, so the outline never skips a
+ * level for visual reasons. `display` and `xl` use the preset's heading face; `<em>` inside
+ * follows the preset (italic in serif presets, plain in sans).
+ *
+ * ```tsx
+ * <Heading level={1} size="display">Dinner, <em>slowly</em>.</Heading>
+ * <Heading level={2} size="md">Billing details</Heading>
+ * ```
+ */
+export const Heading = React.forwardRef(function Heading({ level = 2, size, asChild, className, ...props }, ref) {
+    const Comp = (asChild ? Slot.Root : `h${level}`);
+    return _jsx(Comp, { ref: ref, "data-slot": "heading", "data-size": size ?? defaultSize[level], className: cn(headingVariants({ size: size ?? defaultSize[level] }), className), ...props });
+});
+/* ------------------------------------------------------------------ */
+/* Text                                                                */
+/* ------------------------------------------------------------------ */
+export const textVariants = cva("", {
+    variants: {
+        size: {
+            xs: "text-xs leading-[1.45]",
+            sm: "text-[13px] leading-[1.5]",
+            md: "text-sm leading-[1.55]",
+            lg: "text-base leading-[1.6]",
+        },
+        tone: {
+            default: "text-fg",
+            muted: "text-fg-muted",
+            subtle: "text-fg-subtle",
+            accent: "text-accent-ink",
+            danger: "text-danger",
+            success: "text-success",
+            warning: "text-warning",
+            /** Keep the parent colour. */
+            inherit: "",
+        },
+        weight: {
+            regular: "font-normal",
+            medium: "font-medium",
+            semibold: "font-semibold",
+        },
+    },
+    defaultVariants: { size: "md", tone: "default" },
+});
+/**
+ * Body text: 12 / 13 / 14 / 16 px, seven tones, three weights, single-line truncation or
+ * multi-line clamp. Paragraphs wrap with `text-wrap: pretty`.
+ *
+ * ```tsx
+ * <Text tone="muted" size="sm">Last edited 3 minutes ago by Elif.</Text>
+ * <Text truncate={2}>{post.excerpt}</Text>
+ * ```
+ */
+export const Text = React.forwardRef(function Text({ as = "p", size, tone, weight, truncate, tabular, asChild, className, style, title, children, ...props }, ref) {
+    const Comp = (asChild ? Slot.Root : as);
+    const lines = typeof truncate === "number" && truncate > 1 ? truncate : undefined;
+    const autoTitle = truncate && title === undefined && (typeof children === "string" || typeof children === "number") ? String(children) : title;
+    return (_jsx(Comp, { ref: ref, "data-slot": "text", title: autoTitle, className: cn(textVariants({ size, tone, weight }), as === "p" && !truncate && "text-pretty", (truncate === true || truncate === 1) && "truncate", lines && "overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical]", tabular && "tabular", className), style: lines ? { ...style, WebkitLineClamp: lines } : style, ...props, children: children }));
+});
+/** The opening paragraph under a page or article title. */
+export const Lead = React.forwardRef(function Lead({ className, ...props }, ref) {
+    return _jsx("p", { ref: ref, "data-slot": "lead", className: cn("text-pretty text-[length:var(--text-lead)] leading-[1.5] text-fg-muted", className), ...props });
+});
+/** Inline code: `slug`, `npm run build`, a field key. */
+export const Code = React.forwardRef(function Code({ className, ...props }, ref) {
+    return (_jsx("code", { ref: ref, "data-slot": "code", className: cn("rounded-[5px] border border-line bg-selected px-[0.36em] py-[0.08em] font-mono text-[0.86em] text-fg [overflow-wrap:anywhere]", className), ...props }));
+});
+/** A pulled quote or testimonial, set in the heading face. */
+export const Blockquote = React.forwardRef(function Blockquote({ attribution, className, children, ...props }, ref) {
+    return (_jsxs("figure", { "data-slot": "blockquote", className: cn("grid gap-2.5 border-s-2 border-accent-ink ps-5", className), children: [_jsx("blockquote", { ref: ref, className: "font-display text-[length:calc(22px*var(--display-scale))] leading-[1.4] text-fg [&_em]:[font-style:var(--display-em)]", ...props, children: children }), attribution ? _jsx("figcaption", { className: "text-[13px] text-fg-subtle", children: attribution }) : null] }));
+});
+/**
+ * Numbers that line up: tabular figures, no wrapping. Format the value first (`useFormat()` or
+ * `createFormatter` from `@vamos-ui/react/format`), then render it here.
+ *
+ * ```tsx
+ * <Numeric>{f.currency("1250.50")}</Numeric>
+ * <Numeric signOf={-4.2}>−4.2%</Numeric>
+ * ```
+ */
+export const Numeric = React.forwardRef(function Numeric({ mono, signOf, className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "data-slot": "numeric", className: cn("tabular whitespace-nowrap", mono && "font-mono text-[0.94em]", signOf !== undefined && (signOf < 0 ? "text-danger" : signOf > 0 ? "text-success" : "text-fg-muted"), className), ...props }));
+});
+/**
+ * Styles rich content you don't control element by element: an article body from the editor,
+ * a CMS page, release notes. Headings, lists, quotes, code, tables and media follow the
+ * `data-font` preset and tokens. Put long prose on a `surface` (not straight on the glass scene).
+ *
+ * ```tsx
+ * <Prose html={post.bodyHtml} />
+ * <Prose size="lg" lang="en"><h2>Opening hours</h2><p>…</p></Prose>
+ * ```
+ */
+export const Prose = React.forwardRef(function Prose({ size = "md", html, fullWidth, asChild, className, children, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { ref: ref, "data-slot": "prose", className: cn("prose-ui", size === "sm" && "prose-ui-sm", size === "lg" && "prose-ui-lg", fullWidth && "max-w-none", className), ...(html !== undefined ? { dangerouslySetInnerHTML: { __html: html } } : { children }), ...props }));
+});
+/** Wraps a wide table inside Prose in a keyboard-scrollable region. */
+export const ProseTable = React.forwardRef(function ProseTable({ label, className, ...props }, ref) {
+    return _jsx("div", { ref: ref, role: "region", "aria-label": label, tabIndex: 0, "data-slot": "prose-table", className: cn(className), ...props });
+});

package/dist/components/user-picker.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { type AvatarStatus } from "./avatar.js";
+import { type RecordPickerMultipleProps, type RecordPickerSingleProps, type RecordSource } from "./record-picker.js";
+/** A person you can assign, mention or share with. */
+export interface PickerUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatarUrl?: string | null;
+    status?: AvatarStatus;
+    /** Deactivated / left the company: dimmed, not selectable, still shown when already assigned. */
+    disabled?: boolean;
+    /** Role or department ("Account executive · Sales"). */
+    meta?: string;
+}
+/** A team or group; picking it adds its members (or the team itself). */
+export interface PickerTeam {
+    id: string;
+    name: string;
+    memberCount: number;
+}
+declare const userPickerLabels: {
+    unassigned: string;
+    assignToMe: string;
+    you: string;
+    teams: string;
+    people: string;
+    members: string;
+    assignees: string;
+    assigneesLabel: string;
+    andMore: string;
+    deactivated: string;
+    add: string;
+    search: string;
+};
+export type UserPickerLabels = typeof userPickerLabels;
+interface UserPickerBaseProps {
+    /** People: an array (searched in memory, locale-folded) or a server `RecordSource`. */
+    source: RecordSource<PickerUser> | PickerUser[];
+    /** Teams shown in their own group. */
+    teams?: RecordSource<PickerTeam> | PickerTeam[];
+    /** Resolve a picked team to people. Without it the team's id (`"team:<id>"`) is selected. */
+    getTeamMembers?: (team: PickerTeam, signal: AbortSignal) => Promise<PickerUser[]>;
+    /** Adds "Assign to me" and the "(you)" suffix. */
+    currentUserId?: string;
+    /** Field box (default), an avatar stack button (table cells, headers) or an always-open list. */
+    trigger?: "field" | "avatars" | "inline";
+    /** Avatars shown in the avatar trigger before "+N". Default 3. */
+    maxAvatars?: number;
+    /** Name of the role being assigned, for the trigger's accessible name ("Reviewers: …"). Default "Assignees". */
+    roleLabel?: string;
+    size?: "sm" | "md" | "lg";
+    placeholder?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    /** Records for the initial value when `source` is a server source. */
+    selectedRecords?: PickerUser[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<UserPickerLabels>;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export interface UserPickerSingleProps extends UserPickerBaseProps, Pick<RecordPickerSingleProps<PickerUser>, "value" | "defaultValue" | "onValueChange"> {
+    multiple?: false;
+}
+export interface UserPickerMultipleProps extends UserPickerBaseProps, Pick<RecordPickerMultipleProps<PickerUser>, "value" | "defaultValue" | "onValueChange" | "max"> {
+    multiple: true;
+}
+export type UserPickerProps = UserPickerSingleProps | UserPickerMultipleProps;
+/**
+ * Assign or mention people and teams: task assignee, approvers, deal owner, reviewers, shift staff,
+ * share-with. A Record picker specialised for people — avatars with presence, role line,
+ * "Assign to me", deactivated users, teams, and an avatar-stack trigger for table cells.
+ *
+ * ```tsx
+ * <Field label="Owner"><UserPicker source={people} currentUserId={me.id} value={ownerId} onValueChange={setOwnerId} /></Field>
+ * <UserPicker multiple trigger="avatars" source={people} value={assignees} onValueChange={setAssignees} aria-label="Assignees" />
+ * ```
+ */
+export declare const UserPicker: React.ForwardRefExoticComponent<UserPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};