@corbits/react-ui 0.1.0

package/dist/ui/agent-turn.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { agentInitials, isTurnWorking, messageText, reasoningText, toolParts } from "../lib/chat-message.js";
+import { cn } from "../lib/utils.js";
+import { MessageBubble } from "./message-bubble.js";
+import { ReasoningBlock } from "./reasoning-block.js";
+import { ToolNarrative } from "./tool-narrative.js";
+/**
+ * One agent reply, in the order it happened: what it thought, what it did, what
+ * it said.
+ *
+ * Parts are rendered in the order the model produced them rather than grouped
+ * by kind — a turn that thinks, calls a tool, thinks again and then answers
+ * reads as a sequence, and sorting it into "all thinking / all tools / answer"
+ * describes a turn that never happened.
+ *
+ * The avatar is `aria-hidden` and the turn is a labelled region instead: a
+ * screen reader should hear "Ada said …" once, not two initials followed by the
+ * name.
+ */ export function AgentTurn({ message, identity, children, now, reasoningDurationLabel, className }) {
+    const working = isTurnWorking(message);
+    const answer = messageText(message);
+    const thinking = reasoningText(message);
+    const tools = toolParts(message);
+    const hasWork = thinking.length > 0 || tools.length > 0;
+    return /*#__PURE__*/ _jsxs("article", {
+        "data-slot": "agent-turn",
+        "aria-label": `${identity.name} replied`,
+        className: cn("flex gap-3", className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: "mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-secondary text-[10px] font-bold text-secondary-foreground",
+                children: agentInitials(identity)
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-w-0 flex-1 flex-col gap-1.5",
+                children: [
+                    hasWork ? /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ _jsx(ReasoningBlock, {
+                                text: thinking,
+                                streaming: working,
+                                durationLabel: reasoningDurationLabel
+                            }),
+                            tools.map((part)=>/*#__PURE__*/ _jsx(ToolNarrative, {
+                                    part: part
+                                }, part.toolCallId))
+                        ]
+                    }) : null,
+                    answer.length > 0 || children !== undefined ? /*#__PURE__*/ _jsx(MessageBubble, {
+                        message: message,
+                        now: now,
+                        children: children
+                    }) : null
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/animated-number.d.ts

@@ -0,0 +1,25 @@
+export type AnimatedNumberProps = {
+    readonly value: number;
+    /** Decimal places for the default formatting. Ignored when `format` is given. */
+    readonly decimals?: number;
+    readonly format?: (value: number) => string;
+    /** Duration of the count, in ms. */
+    readonly durationMs?: number;
+    readonly className?: string;
+};
+/**
+ * A number that counts to its new value instead of snapping.
+ *
+ * Hand-rolled on `requestAnimationFrame` rather than pulling in a motion
+ * library: this registry has no animation dependency, and one component's
+ * count-up is not a good reason to add ~30kB that a consumer then owns.
+ *
+ * `tabular-nums`, so the digits do not change width mid-count and shove the
+ * layout around — a KPI row that jitters while it settles is worse than one
+ * that does not animate at all.
+ *
+ * Reduced motion is checked here rather than left to the theme's CSS override.
+ * The theme can collapse a CSS animation, but this is a JS interpolation the
+ * cascade cannot reach, so it snaps to the value instead.
+ */
+export declare function AnimatedNumber({ value, decimals, format, durationMs, className, }: AnimatedNumberProps): import("react").JSX.Element;

package/dist/ui/animated-number.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+const easeOut = (t)=>1 - (1 - t) ** 3;
+/**
+ * A number that counts to its new value instead of snapping.
+ *
+ * Hand-rolled on `requestAnimationFrame` rather than pulling in a motion
+ * library: this registry has no animation dependency, and one component's
+ * count-up is not a good reason to add ~30kB that a consumer then owns.
+ *
+ * `tabular-nums`, so the digits do not change width mid-count and shove the
+ * layout around — a KPI row that jitters while it settles is worse than one
+ * that does not animate at all.
+ *
+ * Reduced motion is checked here rather than left to the theme's CSS override.
+ * The theme can collapse a CSS animation, but this is a JS interpolation the
+ * cascade cannot reach, so it snaps to the value instead.
+ */ export function AnimatedNumber({ value, decimals = 0, format, durationMs = 600, className }) {
+    const [display, setDisplay] = useState(value);
+    const fromRef = useRef(value);
+    const frameRef = useRef(0);
+    const reduce = usePrefersReducedMotion();
+    useEffect(()=>{
+        const from = fromRef.current;
+        if (reduce || from === value) {
+            fromRef.current = value;
+            setDisplay(value);
+            return;
+        }
+        const start = performance.now();
+        const step = (now)=>{
+            const t = Math.min((now - start) / durationMs, 1);
+            setDisplay(from + (value - from) * easeOut(t));
+            if (t < 1) {
+                frameRef.current = requestAnimationFrame(step);
+            } else {
+                fromRef.current = value;
+            }
+        };
+        frameRef.current = requestAnimationFrame(step);
+        return ()=>cancelAnimationFrame(frameRef.current);
+    }, [
+        value,
+        durationMs,
+        reduce
+    ]);
+    const text = format === undefined ? display.toFixed(decimals) : format(display);
+    return /*#__PURE__*/ _jsxs("span", {
+        className: cn("tabular-nums", className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                children: text
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "sr-only",
+                children: format === undefined ? value.toFixed(decimals) : format(value)
+            })
+        ]
+    });
+}

package/dist/ui/approval-card.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+/** One argument of the action being approved, already resolved for display. */
+export type ApprovalDetail = {
+    readonly label: string;
+    readonly value: string;
+};
+export type ApprovalRequest = {
+    readonly id: string;
+    /** What will happen if approved, in plain language: "Post to #sales (Slack)". */
+    readonly headline: string;
+    /** Who or what is asking. */
+    readonly requestedBy: string;
+    readonly details?: readonly ApprovalDetail[];
+    /**
+     * A stable name for the *class* of action, so "always allow" can mean
+     * something. Without it the always-allow control is not offered at all.
+     */
+    readonly actionKey?: string;
+};
+export type ApprovalState = "idle" | "approving" | "rejecting" | "allowing-always";
+export type ApprovalCardProps = {
+    readonly request: ApprovalRequest;
+    readonly onApprove: () => void;
+    readonly onReject: () => void;
+    /** Durably allow this action class. Omit to hide the control entirely. */
+    readonly onAllowAlways?: (actionKey: string) => void;
+    readonly state?: ApprovalState;
+    readonly error?: string | null;
+    readonly className?: string;
+    readonly children?: ReactNode;
+};
+/**
+ * The human decision surface: something is blocked until a person says yes or
+ * no, and this is where they say it.
+ *
+ * Approve is the primary and reject is an outline button — not because approval
+ * is the expected answer, but because a destructive-styled reject would read as
+ * the dangerous option when it is the *safe* one. Neither is pre-focused, and
+ * there is no default: a gate whose buttons can be dismissed by a stray Enter
+ * is not a gate.
+ *
+ * Every argument the action will run with is shown. A card that hides them
+ * behind "details" is asking for approval of something the user cannot see, so
+ * long values clamp rather than disappear.
+ */
+export declare function ApprovalCard({ request, onApprove, onReject, onAllowAlways, state, error, className, children, }: ApprovalCardProps): import("react").JSX.Element;

package/dist/ui/approval-card.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+const LONG_VALUE = 140;
+/**
+ * The human decision surface: something is blocked until a person says yes or
+ * no, and this is where they say it.
+ *
+ * Approve is the primary and reject is an outline button — not because approval
+ * is the expected answer, but because a destructive-styled reject would read as
+ * the dangerous option when it is the *safe* one. Neither is pre-focused, and
+ * there is no default: a gate whose buttons can be dismissed by a stray Enter
+ * is not a gate.
+ *
+ * Every argument the action will run with is shown. A card that hides them
+ * behind "details" is asking for approval of something the user cannot see, so
+ * long values clamp rather than disappear.
+ */ export function ApprovalCard({ request, onApprove, onReject, onAllowAlways, state = "idle", error = null, className, children }) {
+    const busy = state !== "idle";
+    const canAllowAlways = onAllowAlways !== undefined && request.actionKey !== undefined;
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": `Approval requested: ${request.headline}`,
+        className: cn("flex flex-col gap-3 rounded-lg border border-primary-emphasis bg-card p-4", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx(Badge, {
+                        tone: "accent",
+                        children: "Needs your approval"
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "text-xs text-muted-foreground",
+                        children: [
+                            "Requested by ",
+                            request.requestedBy
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-sm font-semibold",
+                children: request.headline
+            }),
+            request.details === undefined || request.details.length === 0 ? null : /*#__PURE__*/ _jsx("dl", {
+                className: "flex flex-col gap-1.5 rounded-md bg-muted p-3 text-xs",
+                children: request.details.map((detail)=>/*#__PURE__*/ _jsx(ApprovalDetailRow, {
+                        detail: detail
+                    }, detail.label))
+            }),
+            children,
+            error === null ? null : /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                className: "text-sm text-destructive",
+                children: error
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "sm",
+                        onClick: onApprove,
+                        disabled: busy,
+                        children: state === "approving" ? "Approving…" : "Approve"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outline",
+                        size: "sm",
+                        onClick: onReject,
+                        disabled: busy,
+                        children: state === "rejecting" ? "Rejecting…" : "Reject"
+                    }),
+                    canAllowAlways ? /*#__PURE__*/ _jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: ()=>onAllowAlways(request.actionKey),
+                        disabled: busy,
+                        className: "ml-auto",
+                        children: state === "allowing-always" ? "Saving…" : "Always allow this"
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+function ApprovalDetailRow({ detail }) {
+    const [expanded, setExpanded] = useState(false);
+    const long = detail.value.length > LONG_VALUE;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "grid grid-cols-[minmax(0,8rem)_1fr] gap-2",
+        children: [
+            /*#__PURE__*/ _jsx("dt", {
+                className: "truncate text-muted-foreground",
+                children: detail.label
+            }),
+            /*#__PURE__*/ _jsxs("dd", {
+                className: "min-w-0",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn("block break-words whitespace-pre-wrap", long && !expanded && "line-clamp-2"),
+                        children: detail.value
+                    }),
+                    long ? /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setExpanded((value)=>!value),
+                        "aria-expanded": expanded,
+                        className: "mt-0.5 text-primary-emphasis hover:underline",
+                        children: expanded ? "Show less" : "Show more"
+                    }) : null
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/artifact-body.d.ts

@@ -0,0 +1,26 @@
+import { type Artifact, type ArtifactForm } from "../lib/artifact.js";
+export type ArtifactBodyProps = {
+    readonly artifact: Artifact;
+    /**
+     * Overrides the form derived from `artifact.kind`. Use it when the kind
+     * string cannot tell the whole story — a `file` that turned out to be an
+     * image, say — rather than teaching `artifactForm` about one caller's edge.
+     */
+    readonly form?: ArtifactForm;
+    readonly className?: string;
+};
+/**
+ * One artifact, drawn the way its kind implies.
+ *
+ * A `switch` over seven forms, not a renderer registry. The dispatch is the
+ * whole component and it fits on a screen, which is the point: you own this
+ * file after `shadcn add`, and a lookup table of injected components would mean
+ * reading two files and a type parameter to answer "what happens to a CSV". Add
+ * a case; delete the ones you do not have.
+ *
+ * Every branch that can receive an empty payload checks for one first, because
+ * "empty" is a real state here — artifacts are frequently rendered while they
+ * are still being written — and each form's own empty rendering (a table with
+ * no rows, a frame with no src) reads as a fault rather than as progress.
+ */
+export declare function ArtifactBody({ artifact, form, className }: ArtifactBodyProps): import("react").JSX.Element;

package/dist/ui/artifact-body.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download } from "lucide-react";
+import { artifactForm } from "../lib/artifact.js";
+import { toSafeHref } from "../lib/url.js";
+import { cn } from "../lib/utils.js";
+import { ArtifactNotice } from "./artifact-notice.js";
+import { buttonVariants } from "./button.js";
+import { CompareBodyFromJson } from "./compare-body.js";
+import { CsvTable } from "./csv-table.js";
+import { EmbedBody } from "./embed-body.js";
+import { ResearchBody, parseResearchArtifact } from "./research-body.js";
+/**
+ * One artifact, drawn the way its kind implies.
+ *
+ * A `switch` over seven forms, not a renderer registry. The dispatch is the
+ * whole component and it fits on a screen, which is the point: you own this
+ * file after `shadcn add`, and a lookup table of injected components would mean
+ * reading two files and a type parameter to answer "what happens to a CSV". Add
+ * a case; delete the ones you do not have.
+ *
+ * Every branch that can receive an empty payload checks for one first, because
+ * "empty" is a real state here — artifacts are frequently rendered while they
+ * are still being written — and each form's own empty rendering (a table with
+ * no rows, a frame with no src) reads as a fault rather than as progress.
+ */ export function ArtifactBody({ artifact, form, className }) {
+    const resolved = form ?? artifactForm(artifact.kind);
+    const content = artifact.content;
+    const blank = content.trim() === "";
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("w-full", className),
+        children: body()
+    });
+    function body() {
+        switch(resolved){
+            case "image":
+                {
+                    // The thumbnail URL, not the content: an image artifact's bytes live
+                    // behind a route, and `content` for one is either empty or a caption.
+                    const src = toSafeHref(artifact.thumbnailUrl ?? artifact.downloadUrl);
+                    if (src === undefined) return /*#__PURE__*/ _jsx(ArtifactNotice, {
+                        pending: artifact.pending
+                    });
+                    return /*#__PURE__*/ _jsxs("figure", {
+                        className: "flex flex-col gap-3",
+                        children: [
+                            /*#__PURE__*/ _jsx("img", {
+                                src: src,
+                                alt: artifact.title,
+                                className: "max-h-[480px] max-w-full rounded-lg border border-border"
+                            }),
+                            blank ? null : /*#__PURE__*/ _jsx("figcaption", {
+                                className: "text-xs text-muted-foreground",
+                                children: content
+                            })
+                        ]
+                    });
+                }
+            case "download":
+                {
+                    const downloadUrl = toSafeHref(artifact.downloadUrl);
+                    if (downloadUrl === undefined) {
+                        return /*#__PURE__*/ _jsx(ArtifactNotice, {
+                            message: "This file has no download location, so it cannot be retrieved."
+                        });
+                    }
+                    return /*#__PURE__*/ _jsxs("a", {
+                        href: downloadUrl,
+                        download: true,
+                        className: buttonVariants({
+                            variant: "outline",
+                            size: "sm"
+                        }),
+                        children: [
+                            /*#__PURE__*/ _jsx(Download, {
+                                "aria-hidden": true
+                            }),
+                            "Download ",
+                            artifact.title
+                        ]
+                    });
+                }
+            case "embed":
+                return /*#__PURE__*/ _jsx(EmbedBody, {
+                    url: content.trim(),
+                    title: artifact.title,
+                    ...artifact.downloadUrl === undefined ? {} : {
+                        downloadUrl: artifact.downloadUrl
+                    }
+                });
+            case "table":
+                {
+                    if (blank) return /*#__PURE__*/ _jsx(ArtifactNotice, {
+                        pending: artifact.pending
+                    });
+                    const downloadUrl = toSafeHref(artifact.downloadUrl);
+                    return /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-3",
+                        children: [
+                            downloadUrl === undefined ? null : /*#__PURE__*/ _jsxs("a", {
+                                href: downloadUrl,
+                                download: true,
+                                className: cn(buttonVariants({
+                                    variant: "outline",
+                                    size: "sm"
+                                }), "self-start"),
+                                children: [
+                                    /*#__PURE__*/ _jsx(Download, {
+                                        "aria-hidden": true
+                                    }),
+                                    "Download"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(CsvTable, {
+                                text: content,
+                                caption: artifact.title
+                            })
+                        ]
+                    });
+                }
+            case "comparison":
+                return /*#__PURE__*/ _jsx(CompareBodyFromJson, {
+                    content: content,
+                    ...artifact.pending === undefined ? {} : {
+                        pending: artifact.pending
+                    }
+                });
+            case "research":
+                {
+                    if (blank) return /*#__PURE__*/ _jsx(ArtifactNotice, {
+                        pending: artifact.pending
+                    });
+                    const parsed = parseResearchArtifact(content);
+                    // Unparseable is not a failure worth an error card — the payload is
+                    // still the artifact, so fall through to prose and let it be read.
+                    if (parsed === null) return /*#__PURE__*/ _jsx(Prose, {
+                        text: content
+                    });
+                    return /*#__PURE__*/ _jsx(ResearchBody, {
+                        brief: parsed.brief,
+                        ...parsed.body === undefined ? {} : {
+                            body: parsed.body
+                        }
+                    });
+                }
+            case "prose":
+                if (blank) return /*#__PURE__*/ _jsx(ArtifactNotice, {
+                    pending: artifact.pending
+                });
+                return /*#__PURE__*/ _jsx(Prose, {
+                    text: content
+                });
+        }
+    }
+}
+/**
+ * Plain text, wrapped and measured.
+ *
+ * Not a Markdown renderer: this registry ships no Markdown dependency, and
+ * choosing one on a consumer's behalf — with its sanitiser, its plugin surface
+ * and its bundle — is not a decision a body component gets to make. Replace
+ * this function with your renderer; it is four lines and one import away.
+ *
+ * `max-w-prose` caps the measure at roughly 65 characters. Full-bleed body text
+ * on a wide screen is unreadable regardless of how good the type is.
+ */ function Prose({ text }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "max-w-prose text-sm leading-relaxed whitespace-pre-wrap",
+        children: text
+    });
+}

package/dist/ui/artifact-notice.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The one place an artifact viewer says "there is nothing to draw here".
+ *
+ * It exists as its own file, above `EmptyState` rather than beside it, for one
+ * reason: every kind renderer needs it, and `ArtifactBody` imports every kind
+ * renderer. Putting it in `artifact-body.tsx` would make each renderer import
+ * back into its own dispatcher — a cycle. One shared leaf breaks it.
+ *
+ * The distinction it encodes is the whole point. An empty payload on a *pending*
+ * artifact means the producer has not finished writing; an empty payload on a
+ * settled one means there is genuinely nothing. Same markup, opposite message,
+ * and getting it backwards makes a working system look broken.
+ */
+export declare function ArtifactNotice({ 
+/** The producer is still writing. Changes the message, not the layout. */
+pending, 
+/** Overrides the pending/empty wording — use for a specific failure. */
+message, }: {
+    readonly pending?: boolean;
+    readonly message?: string;
+}): import("react").JSX.Element;

package/dist/ui/artifact-notice.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileWarning, Loader2 } from "lucide-react";
+import { EmptyState } from "./empty-state.js";
+/**
+ * The one place an artifact viewer says "there is nothing to draw here".
+ *
+ * It exists as its own file, above `EmptyState` rather than beside it, for one
+ * reason: every kind renderer needs it, and `ArtifactBody` imports every kind
+ * renderer. Putting it in `artifact-body.tsx` would make each renderer import
+ * back into its own dispatcher — a cycle. One shared leaf breaks it.
+ *
+ * The distinction it encodes is the whole point. An empty payload on a *pending*
+ * artifact means the producer has not finished writing; an empty payload on a
+ * settled one means there is genuinely nothing. Same markup, opposite message,
+ * and getting it backwards makes a working system look broken.
+ */ export function ArtifactNotice({ /** The producer is still writing. Changes the message, not the layout. */ pending = false, /** Overrides the pending/empty wording — use for a specific failure. */ message }) {
+    if (message !== undefined) {
+        return /*#__PURE__*/ _jsx(EmptyState, {
+            icon: /*#__PURE__*/ _jsx(FileWarning, {}),
+            title: "Nothing to preview",
+            description: message
+        });
+    }
+    if (pending) {
+        return /*#__PURE__*/ _jsx(EmptyState, {
+            icon: /*#__PURE__*/ _jsx(Loader2, {}),
+            title: "Still being produced",
+            description: "This artifact has no content yet — check back shortly."
+        });
+    }
+    return /*#__PURE__*/ _jsx(EmptyState, {
+        icon: /*#__PURE__*/ _jsx(FileWarning, {}),
+        title: "No content",
+        description: "This artifact is empty."
+    });
+}

package/dist/ui/avatar.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+export type AvatarTone = "neutral" | "agent" | "agent2" | "agent3";
+export type AvatarProps = {
+    /** One or two characters shown when no image is provided. */
+    readonly initials: string;
+    readonly label: string;
+    readonly tone?: AvatarTone;
+    readonly size?: "sm" | "md" | "lg";
+    /** Tenant monogram badge overlaid on the corner. */
+    readonly tenantMonogram?: string;
+    readonly className?: string;
+};
+/**
+ * Initials avatar with optional tenant monogram badge. Images are
+ * intentionally unsupported here: identity headers should not flash or
+ * depend on third-party avatar hosts.
+ */
+export declare function Avatar({ initials, label, tone, size, tenantMonogram, className, }: AvatarProps): import("react").JSX.Element;
+export type AvatarStackItem = {
+    readonly id: string;
+    readonly initials: string;
+    readonly label: string;
+    readonly tone?: AvatarTone;
+    readonly tenantMonogram?: string;
+};
+export type AvatarStackProps = {
+    readonly items: readonly AvatarStackItem[];
+    /** Cap visible avatars; remainder becomes a +N chip. */
+    readonly max?: number;
+    readonly size?: "sm" | "md";
+    readonly className?: string;
+};
+/**
+ * Overlapping avatar stack for thread participants and channel members.
+ */
+export declare function AvatarStack({ items, max, size, className }: AvatarStackProps): import("react").JSX.Element;
+export type AvatarStackSlot = ReactNode;