@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/avatar.d.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare const avatarLabels: {
+    online: string;
+    away: string;
+    busy: string;
+    offline: string;
+    withStatus: string;
+    overflow: string;
+    more: string;
+};
+export type AvatarLabels = typeof avatarLabels;
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+export declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Soft background + ink text for an initials avatar, from the chart palette. */
+export declare function avatarColor(seed: string): React.CSSProperties;
+export interface AvatarRootProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    size?: AvatarSize;
+    shape?: "circle" | "square";
+}
+/** Root of the composite API: `<AvatarRoot><AvatarImage/><AvatarFallback/></AvatarRoot>`. */
+export declare const AvatarRoot: React.ForwardRefExoticComponent<AvatarRootProps & React.RefAttributes<HTMLSpanElement>>;
+/** The photo. Pass `asChild` to render a framework image (Next `<Image>`). */
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+/** Shown while the image loads (after `delayMs`), when it fails, or when there is none. */
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Photo URL. Missing, `null` or failing → initials. */
+    src?: string | null;
+    /** Person or organisation name: initials, fallback colour and the accessible name. */
+    name: string;
+    /** 20 / 24 / 32 / 40 / 56 px. Default `"md"`. */
+    size?: AvatarSize;
+    /** `"square"` for organisation logos. */
+    shape?: "circle" | "square";
+    /** Presence dot (announced with the name). */
+    status?: AvatarStatus;
+    /** Override the announced status text ("In a meeting"). */
+    statusLabel?: string;
+    /** Override the computed initials (1–2 letters) or pass an icon. */
+    fallback?: React.ReactNode;
+    /** ms before the fallback shows while an image loads (avoids flashing). Default 300. */
+    delayMs?: number;
+    /** Use the same neutral colour for every fallback instead of the per-name hue. */
+    neutral?: boolean;
+    labels?: Partial<AvatarLabels>;
+}
+/**
+ * A person or organisation: contact lists, assignees, comment threads, the top-bar user menu.
+ * Image with an initials fallback (locale-correct: "ilker şahin" → "İŞ" in Turkish), a colour
+ * picked from the name, and an optional status dot.
+ *
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src="/people/ada.jpg" status="online" />
+ * <Avatar name="Northwind Traders" shape="square" size="lg" />
+ * ```
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Avatars shown before the "+N" chip. Default 4. */
+    max?: number;
+    /** Total number of people when the list you pass is already truncated (server-side). */
+    total?: number;
+    size?: AvatarSize;
+    shape?: "circle" | "square";
+    /** Makes "+N" a button (open the full list in a popover or dialog). */
+    onOverflowClick?: () => void;
+    /** Overlap between avatars. Default `"md"`. */
+    spacing?: "sm" | "md" | "lg";
+    labels?: Partial<AvatarLabels>;
+}
+/**
+ * Stacked avatars with a "+N" overflow ("3 more people" for screen readers): assignees,
+ * attendees, a team on a deal.
+ *
+ * ```tsx
+ * <AvatarGroup max={3} aria-label="Assignees">
+ *   {team.map((p) => <Avatar key={p.id} name={p.name} src={p.photo} />)}
+ * </AvatarGroup>
+ * ```
+ */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/avatar.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { initials as toInitials } from "../lib/text.js";
+const avatarLabels = {
+    online: "Online",
+    away: "Away",
+    busy: "Busy",
+    offline: "Offline",
+    withStatus: "{name} ({status})",
+    overflow: "+{count}",
+    more: "{count, plural, one {# more person} other {# more people}}",
+};
+export const avatarVariants = cva("relative inline-flex shrink-0 select-none items-center justify-center align-middle font-medium leading-none tracking-[0.01em]", {
+    variants: {
+        size: {
+            xs: "size-5 text-[8.5px]",
+            sm: "size-6 text-[10px]",
+            md: "size-8 text-xs",
+            lg: "size-10 text-sm",
+            xl: "size-14 text-[19px]",
+        },
+        shape: {
+            circle: "rounded-full",
+            /** Organisation / workspace logos. */
+            square: "rounded-[28%]",
+        },
+    },
+    defaultVariants: { size: "md", shape: "circle" },
+});
+const dotSize = {
+    xs: "size-1.5 ring-1",
+    sm: "size-[7px] ring-[1.5px]",
+    md: "size-2 ring-2",
+    lg: "size-2.5 ring-2",
+    xl: "size-3.5 ring-[3px]",
+};
+const statusColor = {
+    online: "bg-success",
+    away: "bg-warning",
+    busy: "bg-danger",
+    offline: "bg-fg-subtle",
+};
+/** Deterministic 1–6 from a string (stable across renders and servers). */
+function hueIndex(seed) {
+    let h = 2166136261;
+    for (let i = 0; i < seed.length; i++)
+        h = Math.imul(h ^ seed.charCodeAt(i), 16777619);
+    return ((h >>> 0) % 6) + 1;
+}
+/** Soft background + ink text for an initials avatar, from the chart palette. */
+export function avatarColor(seed) {
+    const c = `var(--chart-${hueIndex(seed)})`;
+    return {
+        backgroundColor: `color-mix(in oklch, ${c} 20%, var(--surface-solid))`,
+        color: `color-mix(in oklch, ${c} 60%, var(--fg))`,
+    };
+}
+const AvatarGroupContext = React.createContext(null);
+/** Root of the composite API: `<AvatarRoot><AvatarImage/><AvatarFallback/></AvatarRoot>`. */
+export const AvatarRoot = React.forwardRef(function AvatarRoot({ size, shape, className, ...props }, ref) {
+    const group = React.useContext(AvatarGroupContext);
+    const s = size ?? group?.size ?? "md";
+    const sh = shape ?? group?.shape ?? "circle";
+    return (_jsx(AvatarPrimitive.Root, { ref: ref, "data-slot": "avatar", "data-size": s, "data-shape": sh, className: cn(avatarVariants({ size: s, shape: sh }), group && "ring-2 ring-(--avatar-ring)", className), ...props }));
+});
+/** The photo. Pass `asChild` to render a framework image (Next `<Image>`). */
+export const AvatarImage = React.forwardRef(function AvatarImage({ className, ...props }, ref) {
+    return _jsx(AvatarPrimitive.Image, { ref: ref, "data-slot": "avatar-image", className: cn("size-full rounded-[inherit] object-cover", className), ...props });
+});
+/** Shown while the image loads (after `delayMs`), when it fails, or when there is none. */
+export const AvatarFallback = React.forwardRef(function AvatarFallback({ className, ...props }, ref) {
+    return (_jsx(AvatarPrimitive.Fallback, { ref: ref, "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-[inherit] bg-selected text-fg-muted [&_svg]:size-[55%]", className), ...props }));
+});
+/**
+ * A person or organisation: contact lists, assignees, comment threads, the top-bar user menu.
+ * Image with an initials fallback (locale-correct: "ilker şahin" → "İŞ" in Turkish), a colour
+ * picked from the name, and an optional status dot.
+ *
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src="/people/ada.jpg" status="online" />
+ * <Avatar name="Northwind Traders" shape="square" size="lg" />
+ * ```
+ */
+export const Avatar = React.forwardRef(function Avatar({ src, name, size, shape, status, statusLabel, fallback, delayMs = 300, neutral, labels, className, style, ...props }, ref) {
+    const t = useLabels("avatar", avatarLabels, labels);
+    const { locale } = useLocale();
+    const group = React.useContext(AvatarGroupContext);
+    const s = size ?? group?.size ?? "md";
+    const statusText = status ? (statusLabel ?? t(status)) : undefined;
+    const accessible = statusText ? t("withStatus", { name, status: statusText }) : name;
+    const letters = fallback ?? (toInitials(name, locale, s === "xs" ? 1 : 2) || "?");
+    return (_jsxs(AvatarRoot, { ref: ref, size: s, shape: shape, className: className, style: style, ...props, children: [src ? _jsx(AvatarImage, { src: src, alt: accessible }) : null, _jsx(AvatarFallback, { delayMs: src ? delayMs : undefined, role: "img", "aria-label": accessible, style: neutral ? undefined : avatarColor(name), children: _jsx("span", { "aria-hidden": true, children: letters }) }), status ? (_jsx("span", { "aria-hidden": true, "data-slot": "avatar-status", "data-status": status, className: cn("absolute end-0 bottom-0 rounded-full ring-(--avatar-ring)", shape === "square" && "-end-0.5 -bottom-0.5", dotSize[s], statusColor[status]) })) : null] }));
+});
+const overlap = {
+    xs: { sm: "-ms-0.5", md: "-ms-1", lg: "-ms-1.5" },
+    sm: { sm: "-ms-1", md: "-ms-1.5", lg: "-ms-2" },
+    md: { sm: "-ms-1", md: "-ms-2", lg: "-ms-3" },
+    lg: { sm: "-ms-1.5", md: "-ms-2.5", lg: "-ms-4" },
+    xl: { sm: "-ms-2", md: "-ms-3.5", lg: "-ms-5" },
+};
+/**
+ * Stacked avatars with a "+N" overflow ("3 more people" for screen readers): assignees,
+ * attendees, a team on a deal.
+ *
+ * ```tsx
+ * <AvatarGroup max={3} aria-label="Assignees">
+ *   {team.map((p) => <Avatar key={p.id} name={p.name} src={p.photo} />)}
+ * </AvatarGroup>
+ * ```
+ */
+export const AvatarGroup = React.forwardRef(function AvatarGroup({ max = 4, total, size = "md", shape = "circle", onOverflowClick, spacing = "md", labels, className, children, ...props }, ref) {
+    const t = useLabels("avatar", avatarLabels, labels);
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    const shown = items.slice(0, Math.max(0, max));
+    const extra = Math.max(0, (total ?? items.length) - shown.length);
+    const ctx = React.useMemo(() => ({ size, shape }), [size, shape]);
+    const step = overlap[size][spacing];
+    const chipClass = cn(avatarVariants({ size, shape }), "relative ring-2 ring-(--avatar-ring) bg-surface-2 font-mono tabular text-fg-muted", step);
+    return (_jsxs("div", { ref: ref, role: "group", "data-slot": "avatar-group", className: cn("flex items-center", className), ...props, children: [_jsx(AvatarGroupContext.Provider, { value: ctx, children: shown.map((child, i) => (_jsx("span", { className: cn("relative inline-flex rounded-full", i > 0 && step), children: child }, child.key ?? i))) }), extra > 0 ? (onOverflowClick ? (_jsx("button", { type: "button", "data-slot": "avatar-overflow", onClick: onOverflowClick, "aria-label": t("more", { count: extra }), className: cn(chipClass, "cursor-pointer transition-colors hover:bg-hover hover:text-fg focus-ring"), children: _jsx("span", { "aria-hidden": true, children: t("overflow", { count: extra }) }) })) : (_jsx("span", { "data-slot": "avatar-overflow", role: "img", "aria-label": t("more", { count: extra }), className: chipClass, children: _jsx("span", { "aria-hidden": true, children: t("overflow", { count: extra }) }) }))) : null] }));
+});

package/dist/components/backup-codes.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export declare const backupCodesLabels: {
+    title: string;
+    copy: string;
+    copied: string;
+    copiedAnnouncement: string;
+    download: string;
+    regenerate: string;
+    used: string;
+    remaining: string;
+    fileHeader: string;
+};
+export type BackupCodesLabels = typeof backupCodesLabels;
+export interface BackupCodesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
+    /** One-time recovery codes, in display order. */
+    codes: string[];
+    /** Codes already spent — struck through and announced as used. */
+    used?: string[];
+    /** Heading above the grid. Default "Backup codes"; `null` hides it (label the region yourself). */
+    title?: React.ReactNode;
+    /** Name of the downloaded text file. Default `"backup-codes.txt"`. */
+    filename?: string;
+    /** Extra first line(s) of the downloaded file (account, service). */
+    fileNote?: string;
+    /** Called after the codes were copied. */
+    onCopy?: (text: string) => void;
+    /** Replace the default download (Blob + link) — e.g. to log it. */
+    onDownload?: (text: string) => void;
+    /** Shows a "New codes" button. */
+    onRegenerate?: () => void;
+    regenerating?: boolean;
+    labels?: Partial<BackupCodesLabels>;
+}
+/**
+ * One-time recovery codes after two-factor enrolment: a numbered monospace grid with copy,
+ * download and regenerate. Used codes stay visible, struck through.
+ *
+ * ```tsx
+ * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
+ * ```
+ */
+export declare const BackupCodes: React.ForwardRefExoticComponent<BackupCodesProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/backup-codes.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, Download, RefreshCw } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Button } from "./button.js";
+export const backupCodesLabels = {
+    title: "Backup codes",
+    copy: "Copy",
+    copied: "Copied",
+    copiedAnnouncement: "Backup codes copied to the clipboard",
+    download: "Download",
+    regenerate: "New codes",
+    used: "used",
+    remaining: "{left} of {total} left",
+    fileHeader: "Backup codes — each code works once. Keep them somewhere safe.",
+};
+/**
+ * One-time recovery codes after two-factor enrolment: a numbered monospace grid with copy,
+ * download and regenerate. Used codes stay visible, struck through.
+ *
+ * ```tsx
+ * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
+ * ```
+ */
+export const BackupCodes = React.forwardRef(function BackupCodes({ codes, used = [], title, filename = "backup-codes.txt", fileNote, onCopy, onDownload, onRegenerate, regenerating, labels, className, ...props }, ref) {
+    const t = useLabels("backupCodes", backupCodesLabels, labels);
+    const f = useFormat();
+    const [copied, setCopied] = React.useState(false);
+    const usedSet = React.useMemo(() => new Set(used), [used]);
+    const titleId = React.useId();
+    const text = React.useMemo(() => [fileNote, t("fileHeader"), "", ...codes.map((c, i) => `${String(i + 1).padStart(2, " ")}. ${c}${usedSet.has(c) ? ` (${t("used")})` : ""}`)].filter((l) => l !== undefined).join("\n") + "\n", [codes, usedSet, fileNote, t]);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const id = window.setTimeout(() => setCopied(false), 2000);
+        return () => window.clearTimeout(id);
+    }, [copied]);
+    const copy = async () => {
+        try {
+            await navigator.clipboard?.writeText(text);
+        }
+        catch {
+            /* clipboard blocked — still report so the user can select manually */
+        }
+        setCopied(true);
+        onCopy?.(text);
+    };
+    const download = () => {
+        if (onDownload)
+            return onDownload(text);
+        const url = URL.createObjectURL(new Blob([text], { type: "text/plain;charset=utf-8" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.setTimeout(() => URL.revokeObjectURL(url), 0);
+    };
+    const left = codes.filter((c) => !usedSet.has(c)).length;
+    const heading = title === undefined ? t("title") : title;
+    return (_jsxs("div", { ref: ref, "data-slot": "backup-codes", role: "group", "aria-labelledby": heading ? titleId : undefined, className: cn("grid gap-3", className), ...props, children: [heading ? (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-medium text-fg", children: heading }), _jsx("span", { className: "text-xs text-fg-muted tabular", children: t("remaining", { left: f.number(left), total: f.number(codes.length) }) })] })) : null, _jsx("ol", { className: "grid grid-cols-2 gap-x-6 gap-y-1.5 rounded-ui border border-line bg-surface-2 px-4 py-3.5 font-mono text-[13px] tabular", translate: "no", children: codes.map((code, i) => {
+                    const spent = usedSet.has(code);
+                    return (_jsxs("li", { "data-used": spent || undefined, className: "flex items-baseline gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "w-4 text-end text-[11px] text-fg-subtle", children: i + 1 }), _jsx("span", { className: cn("tracking-wide select-all", spent ? "text-fg-subtle line-through decoration-fg-subtle" : "text-fg"), children: code }), spent ? _jsxs("span", { className: "sr-only", children: ["(", t("used"), ")"] }) : null] }, code));
+                }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "secondary", onClick: copy, children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), copied ? t("copied") : t("copy")] }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: download, children: [_jsx(Download, { "aria-hidden": "true" }), t("download")] }), onRegenerate ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "ms-auto", onClick: onRegenerate, loading: regenerating, children: [_jsx(RefreshCw, { "aria-hidden": "true" }), t("regenerate")] })) : null, _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? t("copiedAnnouncement") : "" })] })] }));
+});

package/dist/components/badge.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const badgeVariants: (props?: ({
+    tone?: "accent" | "info" | "custom" | "warning" | "outline" | "danger" | "neutral" | "success" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "square" | "pill" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "interactive"> {
+    /** Render as the child element (e.g. a `<Link>` to a filtered list). Ignored when `onRemove` is set. */
+    asChild?: boolean;
+    /** Small status dot before the label. */
+    dot?: boolean;
+    /** Any CSS colour (hex, oklch, var()) — user-defined label colours. Overrides `tone`. */
+    color?: string;
+    /** Show a number instead of children, with tabular figures and a cap (`max`). */
+    count?: number;
+    /** Cap for `count`: 120 → "99+". Default 99. */
+    max?: number;
+    /** Makes the badge a removable chip with a × button. */
+    onRemove?: () => void;
+    /** Accessible name of the × button. Default "Remove {label}" (dictionary `badge.remove`). */
+    removeLabel?: string;
+    /** Dims the badge and disables the remove button. */
+    disabled?: boolean;
+}
+/**
+ * Status, count and label pill — and the kit's chip (`onRemove`), reused by Tag input,
+ * Combobox multi-select and Filter bar. Server-compatible (the remove button and count
+ * formatting are tiny client islands).
+ *
+ * ```tsx
+ * <Badge tone="success" dot>Published</Badge>
+ * <Badge count={128} tone="accent" />            // "99+"
+ * <Badge onRemove={() => drop("design")}>Design</Badge>
+ * <Badge asChild interactive><Link href="/posts?status=draft">Draft</Link></Badge>
+ * ```
+ *
+ * No CSS `uppercase` — it breaks Turkish (i → I) without the right `lang`; use `upperText()`.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge.js

@@ -0,0 +1,68 @@
+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";
+import { ChipRemoveButton, LocaleCount } from "../lib/islands.js";
+export const badgeVariants = cva("inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-medium leading-none [&_svg]:size-3 [&_svg]:shrink-0", {
+    variants: {
+        tone: {
+            neutral: "bg-selected text-fg-muted",
+            accent: "bg-accent-soft text-accent-ink",
+            success: "tone-success tone-soft",
+            warning: "tone-warning tone-soft",
+            danger: "tone-danger tone-soft",
+            info: "tone-info tone-soft",
+            outline: "border border-field-border text-fg-muted",
+            /** Driven by the `color` prop (user-defined label colours). */
+            custom: "tone-soft",
+        },
+        size: {
+            sm: "h-5 px-2 text-[11px]",
+            md: "h-6 px-2.5 text-xs",
+            lg: "h-7 gap-1.5 px-3 text-[13px] [&_svg]:size-3.5",
+        },
+        shape: {
+            pill: "rounded-full",
+            /** Version / code tags. */
+            square: "rounded-ui-sm",
+        },
+        interactive: {
+            true: "cursor-pointer transition-[filter,background-color] hover:brightness-95 focus-ring",
+        },
+    },
+    defaultVariants: { tone: "neutral", size: "sm", shape: "pill" },
+});
+/**
+ * Status, count and label pill — and the kit's chip (`onRemove`), reused by Tag input,
+ * Combobox multi-select and Filter bar. Server-compatible (the remove button and count
+ * formatting are tiny client islands).
+ *
+ * ```tsx
+ * <Badge tone="success" dot>Published</Badge>
+ * <Badge count={128} tone="accent" />            // "99+"
+ * <Badge onRemove={() => drop("design")}>Design</Badge>
+ * <Badge asChild interactive><Link href="/posts?status=draft">Draft</Link></Badge>
+ * ```
+ *
+ * No CSS `uppercase` — it breaks Turkish (i → I) without the right `lang`; use `upperText()`.
+ */
+export const Badge = React.forwardRef(function Badge({ className, tone, size, shape, dot, color, count, max = 99, onRemove, removeLabel, disabled, asChild, children, style, ...props }, ref) {
+    const removable = Boolean(onRemove);
+    const Comp = asChild && !removable ? Slot.Root : "span";
+    const classes = cn(badgeVariants({ tone: color ? "custom" : tone, size, shape, interactive: asChild && !removable ? true : undefined }), count !== undefined && "tabular justify-center", count !== undefined && (size === "lg" ? "min-w-7 px-2" : size === "md" ? "min-w-6 px-2" : "min-w-5 px-1.5"), removable && "pe-1.5", disabled && "pointer-events-none opacity-50", className);
+    const content = count !== undefined ? _jsx(LocaleCount, { value: count, max: max }) : children;
+    if (Comp === Slot.Root) {
+        const slotProps = {
+            ref,
+            "data-slot": "badge",
+            className: classes,
+            style: color ? { ...style, ["--tone"]: color } : style,
+            "aria-disabled": disabled || undefined,
+            ...props,
+        };
+        // Slot needs the dot and the Slottable as direct children (no fragment).
+        return dot ? (_jsxs(Slot.Root, { ...slotProps, children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-current" }), _jsx(Slot.Slottable, { children: children })] })) : (_jsx(Slot.Root, { ...slotProps, children: children }));
+    }
+    return (_jsxs("span", { ref: ref, "data-slot": "badge", "data-tone": color ? "custom" : (tone ?? "neutral"), className: classes, style: color ? { ...style, ["--tone"]: color } : style, "aria-disabled": disabled || undefined, ...props, children: [dot ? _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-current" }) : null, content, onRemove ? (_jsx(ChipRemoveButton, { onRemove: onRemove, disabled: disabled, removeLabel: removeLabel, itemLabel: typeof children === "string" || typeof children === "number" ? String(children) : undefined })) : null] }));
+});

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+declare const breadcrumbLabels: {
+    label: string;
+    showHidden: string;
+    siblings: string;
+};
+type BreadcrumbSize = "sm" | "md";
+export interface BreadcrumbMenuLink {
+    label: React.ReactNode;
+    href: string;
+    /** Marks the sibling that is the current item. */
+    current?: boolean;
+}
+export interface BreadcrumbItemData {
+    label: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    /** Jump to siblings ("Companies › Northpoint ▾" → other companies). */
+    menu?: BreadcrumbMenuLink[];
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** Data-driven trail. The last item is the current page. Omit for the compound API. */
+    items?: BreadcrumbItemData[];
+    /** Collapse the middle into a "…" menu when there are more items (first + last `maxItems − 2` stay). */
+    maxItems?: number;
+    /** Separator between items. Default a chevron that flips in RTL. */
+    separator?: React.ReactNode;
+    size?: BreadcrumbSize;
+    /** Websites: also output a schema.org `BreadcrumbList` JSON-LD script (items with `href`). */
+    jsonLd?: boolean;
+    /** Origin used to make JSON-LD URLs absolute, e.g. `"https://vamos.ist"`. */
+    baseUrl?: string;
+    labels?: Partial<typeof breadcrumbLabels>;
+}
+/**
+ * Shows where a page sits in a hierarchy and offers a way up (WAI-ARIA Breadcrumb: `nav` + `ol`,
+ * `aria-current="page"` on the last item). Links go through the app's router `Link`.
+ *
+ * ```tsx
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Northpoint", href: "/companies/northpoint" }, { label: "Contacts" }]} />
+ * ```
+ *
+ * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/** The ordered list of crumbs. */
+export declare const BreadcrumbList: React.ForwardRefExoticComponent<React.OlHTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+/** One crumb (`li`). */
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href?: string;
+    icon?: React.ReactNode;
+    /** Render your own link element instead (keeps the styles). */
+    asChild?: boolean;
+}
+/** A crumb that links up the hierarchy. Uses the app's router `Link` (external URLs open in a new tab). */
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface BreadcrumbPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+    icon?: React.ReactNode;
+}
+/** The current page: plain text, `aria-current="page"` (override for a non-link middle crumb). */
+export declare const BreadcrumbPage: React.ForwardRefExoticComponent<BreadcrumbPageProps & React.RefAttributes<HTMLSpanElement>>;
+/** The separator between crumbs. Hidden from assistive tech. */
+export declare function BreadcrumbSeparator({ className, children, ...props }: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element;
+export interface BreadcrumbEllipsisProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The hidden crumbs, offered in a menu. Without items it renders a static "…". */
+    items?: BreadcrumbMenuLink[];
+    labels?: Partial<typeof breadcrumbLabels>;
+}
+/** "…" for collapsed crumbs; opens a menu with the hidden pages. */
+export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React.RefAttributes<HTMLButtonElement>>;
+/** A small ▾ after a crumb that jumps to its siblings. */
+export declare function BreadcrumbSiblings({ label, items, labels }: {
+    label: React.ReactNode;
+    items: BreadcrumbMenuLink[];
+    labels?: Partial<typeof breadcrumbLabels>;
+}): React.JSX.Element;
+export {};

package/dist/components/breadcrumb.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DropdownMenu, Slot } from "radix-ui";
+import { ChevronRight, ChevronsUpDown, MoreHorizontal } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { SmartLink } from "../lib/provider.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { itemVariants } from "../lib/variants.js";
+const breadcrumbLabels = {
+    label: "Breadcrumb",
+    showHidden: "Show hidden pages",
+    siblings: "Pages next to {label}",
+};
+const SizeContext = React.createContext("md");
+/**
+ * Shows where a page sits in a hierarchy and offers a way up (WAI-ARIA Breadcrumb: `nav` + `ol`,
+ * `aria-current="page"` on the last item). Links go through the app's router `Link`.
+ *
+ * ```tsx
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Northpoint", href: "/companies/northpoint" }, { label: "Contacts" }]} />
+ * ```
+ *
+ * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.
+ */
+export const Breadcrumb = React.forwardRef(function Breadcrumb({ items, maxItems, separator, size = "md", jsonLd, baseUrl, labels, className, children, ...props }, ref) {
+    const t = useLabels("breadcrumb", breadcrumbLabels, labels);
+    return (_jsx(SizeContext.Provider, { value: size, children: _jsxs("nav", { ref: ref, "aria-label": t("label"), "data-slot": "breadcrumb", className: cn("min-w-0", className), ...props, children: [items ? _jsx(BreadcrumbTrail, { items: items, maxItems: maxItems, separator: separator, labels: labels }) : children, items && jsonLd ? _jsx(BreadcrumbJsonLd, { items: items, baseUrl: baseUrl }) : null] }) }));
+});
+function BreadcrumbTrail({ items, maxItems, separator, labels }) {
+    const tail = maxItems ? Math.max(1, maxItems - 2) : items.length;
+    const collapse = maxItems !== undefined && items.length > maxItems && items.length > tail + 1;
+    const hidden = collapse ? items.slice(1, items.length - tail) : [];
+    const visible = collapse
+        ? [{ item: items[0], index: 0 }, "ellipsis", ...items.slice(items.length - tail).map((item, i) => ({ item, index: items.length - tail + i }))]
+        : items.map((item, index) => ({ item, index }));
+    return (_jsx(BreadcrumbList, { children: visible.map((entry, i) => {
+            const sep = i > 0 ? _jsx(BreadcrumbSeparator, { children: separator }, `s${i}`) : null;
+            if (entry === "ellipsis") {
+                return (_jsxs(React.Fragment, { children: [sep, _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbEllipsis, { items: hidden.map((h) => ({ label: h.label, href: h.href ?? "" })).filter((h) => h.href), labels: labels }) })] }, "ellipsis"));
+            }
+            const { item, index } = entry;
+            const last = index === items.length - 1;
+            return (_jsxs(React.Fragment, { children: [sep, _jsxs(BreadcrumbItem, { children: [last || !item.href ? (_jsx(BreadcrumbPage, { icon: item.icon, "aria-current": last ? "page" : undefined, children: item.label })) : (_jsx(BreadcrumbLink, { href: item.href, icon: item.icon, children: item.label })), item.menu?.length ? _jsx(BreadcrumbSiblings, { label: item.label, items: item.menu, labels: labels }) : null] })] }, index));
+        }) }));
+}
+const listVariants = cva("flex min-w-0 flex-wrap items-center text-fg-muted", {
+    variants: { size: { sm: "gap-1 text-[13px] [&_svg]:size-3.5", md: "gap-1.5 text-sm [&_svg]:size-4" } },
+    defaultVariants: { size: "md" },
+});
+/** The ordered list of crumbs. */
+export const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, ...props }, ref) {
+    const size = React.useContext(SizeContext);
+    return _jsx("ol", { ref: ref, "data-slot": "breadcrumb-list", className: cn(listVariants({ size }), className), ...props });
+});
+/** One crumb (`li`). */
+export const BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+    return _jsx("li", { ref: ref, "data-slot": "breadcrumb-item", className: cn("inline-flex min-w-0 items-center gap-0.5", className), ...props });
+});
+const crumbClass = "inline-flex min-w-0 max-w-[16rem] items-center gap-1.5 rounded-ui-sm [&_svg]:shrink-0";
+/** A crumb that links up the hierarchy. Uses the app's router `Link` (external URLs open in a new tab). */
+export const BreadcrumbLink = React.forwardRef(function BreadcrumbLink({ href, icon, asChild, className, children, title, ...props }, ref) {
+    const classes = cn(crumbClass, "transition-colors hover:text-fg focus-ring", className);
+    if (asChild)
+        return _jsx(Slot.Root, { ref: ref, "data-slot": "breadcrumb-link", className: classes, ...props, children: children });
+    return (_jsxs(SmartLink, { ref: ref, href: href ?? "#", "data-slot": "breadcrumb-link", className: classes, title: title ?? (typeof children === "string" ? children : undefined), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }));
+});
+/** The current page: plain text, `aria-current="page"` (override for a non-link middle crumb). */
+export const BreadcrumbPage = React.forwardRef(function BreadcrumbPage({ icon, className, children, title, ...props }, ref) {
+    const current = !("aria-current" in props) || props["aria-current"] !== undefined;
+    return (_jsxs("span", { ref: ref, "data-slot": "breadcrumb-page", "aria-current": "page", title: title ?? (typeof children === "string" ? children : undefined), className: cn(crumbClass, current ? "font-medium text-fg" : "text-fg-muted", className), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }));
+});
+/** The separator between crumbs. Hidden from assistive tech. */
+export function BreadcrumbSeparator({ className, children, ...props }) {
+    return (_jsx("li", { role: "presentation", "aria-hidden": true, "data-slot": "breadcrumb-separator", className: cn("inline-flex text-fg-subtle [&>svg]:rtl:-scale-x-100", className), ...props, children: children ?? _jsx(ChevronRight, { strokeWidth: 1.75 }) }));
+}
+const menuContentClass = "surface-popover ui-pop z-(--z-popover) min-w-48 max-w-72 rounded-ui p-1";
+function CrumbMenu({ trigger, items }) {
+    const container = usePortalContainer();
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }), _jsx(DropdownMenu.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(DropdownMenu.Content, { align: "start", sideOffset: 6, className: menuContentClass, children: items.map((it, i) => (_jsx(DropdownMenu.Item, { asChild: true, className: cn(itemVariants({ size: "sm" }), it.current && "font-medium"), children: _jsx(SmartLink, { href: it.href, "aria-current": it.current ? "page" : undefined, children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }) }) }, i))) }) }) })] }));
+}
+const iconTrigger = "inline-flex size-6 items-center justify-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring data-[state=open]:bg-hover data-[state=open]:text-fg";
+/** "…" for collapsed crumbs; opens a menu with the hidden pages. */
+export const BreadcrumbEllipsis = React.forwardRef(function BreadcrumbEllipsis({ items, labels, className, ...props }, ref) {
+    const t = useLabels("breadcrumb", breadcrumbLabels, labels);
+    if (!items?.length) {
+        return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", className: "inline-flex size-6 items-center justify-center text-fg-subtle", children: [_jsx(MoreHorizontal, { "aria-hidden": true }), _jsx("span", { className: "sr-only", children: t("showHidden") })] }));
+    }
+    return (_jsx(CrumbMenu, { items: items, trigger: _jsx("button", { ref: ref, type: "button", "data-slot": "breadcrumb-ellipsis", "aria-label": t("showHidden"), className: cn(iconTrigger, className), ...props, children: _jsx(MoreHorizontal, { "aria-hidden": true }) }) }));
+});
+/** A small ▾ after a crumb that jumps to its siblings. */
+export function BreadcrumbSiblings({ label, items, labels }) {
+    const t = useLabels("breadcrumb", breadcrumbLabels, labels);
+    const name = t("siblings", { label: typeof label === "string" ? label : "" }).trim();
+    return (_jsx(CrumbMenu, { items: items, trigger: _jsx("button", { type: "button", "data-slot": "breadcrumb-siblings", "aria-label": name, className: cn(iconTrigger, "size-5 [&_svg]:size-3!"), children: _jsx(ChevronsUpDown, { "aria-hidden": true }) }) }));
+}
+function BreadcrumbJsonLd({ items, baseUrl = "" }) {
+    const list = items
+        .filter((i) => i.href && typeof i.label === "string")
+        .map((i, n) => ({ "@type": "ListItem", position: n + 1, name: i.label, item: /^https?:/.test(i.href) ? i.href : `${baseUrl.replace(/\/$/, "")}${i.href}` }));
+    const json = JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: list }).replace(/</g, "\\u003c");
+    return _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } });
+}