@vllnt/ui 0.1.8 → 0.1.11-canary.54f8a77

package/dist/components/ai-message-bubble/index.js

@@ -0,0 +1,6 @@
+import {
+  AIMessageBubble
+} from "./ai-message-bubble";
+export {
+  AIMessageBubble
+};

package/dist/components/ai-source-citation/ai-source-citation.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ExternalLink, Quote } from "lucide-react";
+import { cn } from "../../lib/utils";
+const AISourceCitation = forwardRef(
+  ({ className, href, snippet, source, target = "_blank", title, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: cn(
+          "group inline-flex max-w-full flex-col gap-2 rounded-xl border border-border/70 bg-background px-3 py-2 text-left shadow-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className
+        ),
+        href,
+        ref,
+        rel: target === "_blank" ? "noreferrer" : void 0,
+        target,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: source })
+              ] }),
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
+            ] }) })
+          ] }),
+          snippet ? /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-6 text-muted-foreground", children: snippet }) : null
+        ]
+      }
+    );
+  }
+);
+AISourceCitation.displayName = "AISourceCitation";
+export {
+  AISourceCitation
+};

package/dist/components/ai-source-citation/index.js

@@ -0,0 +1,6 @@
+import {
+  AISourceCitation
+} from "./ai-source-citation";
+export {
+  AISourceCitation
+};

package/dist/components/ai-streaming-text/ai-streaming-text.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const AIStreamingText = forwardRef(
+  ({
+    className,
+    cursor = "\u258D",
+    isStreaming = false,
+    showCursor = true,
+    text,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-live": isStreaming ? "polite" : void 0,
+        className: cn(
+          "text-sm leading-6 text-foreground whitespace-pre-wrap",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          text,
+          isStreaming && showCursor ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ml-0.5 inline-block animate-pulse text-muted-foreground",
+              children: cursor
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AIStreamingText.displayName = "AIStreamingText";
+export {
+  AIStreamingText
+};

package/dist/components/ai-streaming-text/index.js

@@ -0,0 +1,6 @@
+import {
+  AIStreamingText
+} from "./ai-streaming-text";
+export {
+  AIStreamingText
+};

package/dist/components/ai-tool-call-display/ai-tool-call-display.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+const statusVariants = cva(
+  "rounded-full px-2 py-0 text-[10px] uppercase tracking-wide",
+  {
+    defaultVariants: {
+      status: "queued"
+    },
+    variants: {
+      status: {
+        complete: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+        error: "bg-red-500/10 text-red-700 dark:text-red-300",
+        queued: "bg-muted text-muted-foreground",
+        running: "bg-blue-500/10 text-blue-700 dark:text-blue-300"
+      }
+    }
+  }
+);
+const statusIconMap = {
+  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+  queued: /* @__PURE__ */ jsx(Clock3, { className: "h-4 w-4" }),
+  running: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 animate-pulse" })
+};
+const AIToolCallDisplay = forwardRef(
+  ({
+    className,
+    description,
+    duration,
+    input,
+    output,
+    status = "queued",
+    toolName,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+                statusIconMap[status],
+                /* @__PURE__ */ jsx("span", { children: toolName })
+              ] }),
+              description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              duration ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: duration }) : null,
+              /* @__PURE__ */ jsx(Badge, { className: statusVariants({ status }), variant: "secondary", children: status })
+            ] })
+          ] }),
+          input ? /* @__PURE__ */ jsxs(
+            "details",
+            {
+              className: "mt-4 rounded-xl border border-border/60 bg-muted/20 p-3",
+              open: status !== "complete",
+              children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Tool input" }),
+                /* @__PURE__ */ jsx("pre", { className: "mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground", children: input })
+              ]
+            }
+          ) : null,
+          output ? /* @__PURE__ */ jsxs(
+            "details",
+            {
+              className: "mt-3 rounded-xl border border-border/60 bg-muted/20 p-3",
+              open: status !== "complete",
+              children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Tool output" }),
+                /* @__PURE__ */ jsx("pre", { className: "mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground", children: output })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AIToolCallDisplay.displayName = "AIToolCallDisplay";
+export {
+  AIToolCallDisplay
+};

package/dist/components/ai-tool-call-display/index.js

@@ -0,0 +1,6 @@
+import {
+  AIToolCallDisplay
+} from "./ai-tool-call-display";
+export {
+  AIToolCallDisplay
+};

package/dist/components/animated-text/animated-text.js

@@ -0,0 +1,328 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const GLYPH_SEGMENTER = new Intl.Segmenter(void 0, {
+  granularity: "grapheme"
+});
+const ASCII_RANDOM_CHARACTERS = Array.from(
+  { length: 94 },
+  (_, index) => String.fromCodePoint(index + 33)
+).join("");
+const TERMINAL_RANDOM_CHARACTERS = "\u2502\u2503\u2500\u2501\u2504\u2505\u2508\u2509\u250C\u2510\u2514\u2518\u251C\u2524\u252C\u2534\u253C\u256D\u256E\u256F\u2570\u2571\u2572\u2573";
+const BLOCK_RANDOM_CHARACTERS = "\u2591\u2592\u2593\u2588\u258C\u2590\u2580\u2584\u25A0\u25A1\u25AA\u25AB\u2596\u2597\u2598\u2599\u259A\u259B\u259C\u259D\u259E\u259F";
+const UNICODE_SYMBOL_RANDOM_CHARACTERS = "\u25C6\u25C7\u25C8\u25CB\u25CF\u25CE\u25C9\u25CC\u25CD\u25D0\u25D1\u25D2\u25D3\u25D4\u25D5\u25E2\u25E3\u25E4\u25E5\u25E6\u203B\u2726\u2727\u2731\u2736\u2737\u2739";
+const MATRIX_RANDOM_CHARACTERS = `${ASCII_RANDOM_CHARACTERS}${TERMINAL_RANDOM_CHARACTERS}${BLOCK_RANDOM_CHARACTERS}${UNICODE_SYMBOL_RANDOM_CHARACTERS}`;
+const ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS = {
+  ascii: ASCII_RANDOM_CHARACTERS,
+  binary: "01",
+  blocks: BLOCK_RANDOM_CHARACTERS,
+  matrix: MATRIX_RANDOM_CHARACTERS,
+  symbols: UNICODE_SYMBOL_RANDOM_CHARACTERS,
+  terminal: TERMINAL_RANDOM_CHARACTERS
+};
+const DEFAULT_RANDOM_CHARACTERS = ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS.matrix;
+function getSegments(text, splitBy) {
+  if (splitBy === "character") {
+    const segmenter = new Intl.Segmenter(void 0, {
+      granularity: "grapheme"
+    });
+    return Array.from(segmenter.segment(text), ({ segment }) => segment);
+  }
+  return text.match(/\S+\s*/g) ?? [];
+}
+function getGlyphs(text) {
+  return Array.from(GLYPH_SEGMENTER.segment(text), ({ segment }) => segment);
+}
+function getRandomMatrixGlyph(randomCharacters) {
+  const glyphs = getGlyphs(randomCharacters);
+  return glyphs[Math.floor(Math.random() * glyphs.length)] ?? glyphs[0] ?? "0";
+}
+function getResolvedRandomCharacters(randomCharacters, randomCharactersPreset) {
+  if (randomCharacters && randomCharacters.length > 0) {
+    return randomCharacters;
+  }
+  return ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS[randomCharactersPreset] ?? DEFAULT_RANDOM_CHARACTERS;
+}
+function getCursorToneClass(variant) {
+  return variant === "matrix" || variant === "decipher" ? "text-primary" : "text-foreground";
+}
+function buildRevealFrames(segments, stagger) {
+  return segments.map((segment, index) => ({
+    content: segment,
+    isRevealed: true,
+    key: `${segment}-${index}`,
+    style: {
+      animationDelay: `${index * stagger}ms`
+    }
+  }));
+}
+function buildIndexOrder(direction, length) {
+  if (direction === "end") {
+    return Array.from({ length }, (_, index) => length - index - 1);
+  }
+  if (direction === "random") {
+    return Array.from({ length }, (_, index) => index).sort(
+      () => Math.random() - 0.5
+    );
+  }
+  if (direction === "center-out") {
+    const center = (length - 1) / 2;
+    return Array.from({ length }, (_, index) => index).sort((left, right) => {
+      const leftDistance = Math.abs(left - center);
+      const rightDistance = Math.abs(right - center);
+      if (leftDistance === rightDistance) {
+        return left - right;
+      }
+      return leftDistance - rightDistance;
+    });
+  }
+  return Array.from({ length }, (_, index) => index);
+}
+function buildRevealPlan(direction, length, randomness) {
+  const orderedIndices = buildIndexOrder(direction, length);
+  const revealPlan = Array.from({ length }, () => 0);
+  const jitterRange = Math.max(0, Math.round(randomness * 4));
+  orderedIndices.forEach((segmentIndex, revealIndex) => {
+    const jitter = jitterRange > 0 ? Math.floor(Math.random() * (jitterRange + 1)) : 0;
+    revealPlan[segmentIndex] = revealIndex + jitter;
+  });
+  return revealPlan;
+}
+function useRevealProgress(active, length, stagger) {
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    if (!active) {
+      setProgress(length);
+      return;
+    }
+    setProgress(0);
+    const revealInterval = window.setInterval(
+      () => {
+        setProgress((current) => {
+          if (current >= length + 4) {
+            window.clearInterval(revealInterval);
+            return current;
+          }
+          return current + 1;
+        });
+      },
+      Math.max(16, stagger)
+    );
+    return () => {
+      window.clearInterval(revealInterval);
+    };
+  }, [active, length, stagger]);
+  return progress;
+}
+function useMatrixFrame({
+  active,
+  progress,
+  randomCharacters,
+  revealPlan,
+  segments
+}) {
+  const [matrixFrame, setMatrixFrame] = React.useState(
+    () => segments.map(() => getRandomMatrixGlyph(randomCharacters))
+  );
+  React.useEffect(() => {
+    if (!active) {
+      return;
+    }
+    setMatrixFrame(segments.map(() => getRandomMatrixGlyph(randomCharacters)));
+    const scrambleInterval = window.setInterval(() => {
+      setMatrixFrame(
+        (current) => current.map((glyph, index) => {
+          const isWhitespace = /^\s+$/.test(segments[index] ?? "");
+          const isRevealed = progress >= (revealPlan[index] ?? 0);
+          if (isWhitespace || isRevealed) {
+            return glyph;
+          }
+          return getRandomMatrixGlyph(randomCharacters);
+        })
+      );
+    }, 48);
+    return () => {
+      window.clearInterval(scrambleInterval);
+    };
+  }, [active, progress, randomCharacters, revealPlan, segments]);
+  return matrixFrame;
+}
+function buildOldSchoolFrames({
+  matrixFrame,
+  progress,
+  randomCharacters,
+  revealPlan,
+  segments,
+  variant
+}) {
+  return segments.map((segment, index) => {
+    const isWhitespace = /^\s+$/.test(segment);
+    const revealStep = revealPlan[index] ?? 0;
+    const isRevealed = progress >= revealStep;
+    let content = "";
+    if (variant === "matrix" || variant === "decipher") {
+      content = isWhitespace ? segment : isRevealed ? segment : matrixFrame[index] ?? getRandomMatrixGlyph(randomCharacters);
+    } else if (isRevealed) {
+      content = segment;
+    }
+    return {
+      content,
+      isRevealed,
+      key: `${segment}-${index}`
+    };
+  });
+}
+function useAnimatedTextFrames({
+  direction,
+  randomCharacters,
+  randomness,
+  segments,
+  stagger,
+  variant
+}) {
+  const isOldSchool = variant !== "reveal";
+  const revealPlan = React.useMemo(
+    () => isOldSchool ? buildRevealPlan(direction, segments.length, randomness) : Array.from({ length: segments.length }, (_, index) => index),
+    [direction, isOldSchool, randomness, segments.length]
+  );
+  const progress = useRevealProgress(isOldSchool, segments.length, stagger);
+  const matrixFrame = useMatrixFrame({
+    active: variant === "matrix" || variant === "decipher",
+    progress,
+    randomCharacters,
+    revealPlan,
+    segments
+  });
+  return React.useMemo(() => {
+    if (!isOldSchool) {
+      return buildRevealFrames(segments, stagger);
+    }
+    return buildOldSchoolFrames({
+      matrixFrame,
+      progress,
+      randomCharacters,
+      revealPlan,
+      segments,
+      variant
+    });
+  }, [
+    isOldSchool,
+    matrixFrame,
+    progress,
+    randomCharacters,
+    revealPlan,
+    segments,
+    stagger,
+    variant
+  ]);
+}
+function getSegmentClasses(variant, isRevealed) {
+  if (variant === "reveal") {
+    return "inline-block whitespace-pre opacity-0 [animation-duration:var(--vllnt-animated-text-duration)] [animation-fill-mode:forwards] [animation-name:vllnt-animated-text-reveal] [animation-timing-function:cubic-bezier(0.16,1,0.3,1)]";
+  }
+  if (variant === "matrix" || variant === "decipher") {
+    return cn(
+      "inline-block whitespace-pre font-mono tracking-[0.08em] transition-colors duration-150",
+      isRevealed ? "text-foreground" : "text-primary/75"
+    );
+  }
+  return "inline-block whitespace-pre font-mono";
+}
+function getContainerClasses(variant) {
+  if (variant === "matrix" || variant === "decipher") {
+    return "flex flex-wrap font-mono leading-relaxed tracking-[0.08em]";
+  }
+  if (variant === "terminal" || variant === "typewriter") {
+    return "flex flex-wrap font-mono leading-relaxed";
+  }
+  return "flex flex-wrap leading-relaxed";
+}
+function AnimatedTextCursor({
+  cursorChar,
+  cursorToneClass
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "ml-0.5 inline-block whitespace-pre font-mono [animation:vllnt-terminal-cursor-blink_1s_steps(1,end)_infinite]",
+        cursorToneClass
+      ),
+      children: cursorChar
+    }
+  );
+}
+const AnimatedText = React.forwardRef(
+  ({
+    className,
+    cursor = true,
+    cursorChar = "\u2588",
+    direction = "start",
+    duration = 600,
+    randomCharacters,
+    randomCharactersPreset = "matrix",
+    randomness = 0,
+    splitBy = "word",
+    stagger = 70,
+    text,
+    variant = "terminal",
+    ...props
+  }, ref) => {
+    const resolvedRandomCharacters = getResolvedRandomCharacters(
+      randomCharacters,
+      randomCharactersPreset
+    );
+    const resolvedSplitBy = variant === "reveal" ? splitBy : "character";
+    const segments = React.useMemo(
+      () => getSegments(text, resolvedSplitBy),
+      [resolvedSplitBy, text]
+    );
+    const segmentFrames = useAnimatedTextFrames({
+      direction,
+      randomCharacters: resolvedRandomCharacters,
+      randomness,
+      segments,
+      stagger,
+      variant
+    });
+    const showCursor = cursor && variant !== "reveal" && segmentFrames.some((frame) => !frame.isRevealed);
+    const cursorToneClass = getCursorToneClass(variant);
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        "aria-label": text,
+        className: cn(getContainerClasses(variant), className),
+        ref,
+        style: {
+          ["--vllnt-animated-text-duration"]: `${duration}ms`
+        },
+        ...props,
+        children: [
+          segmentFrames.map((segmentFrame) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: getSegmentClasses(variant, segmentFrame.isRevealed),
+              style: segmentFrame.style,
+              children: segmentFrame.content
+            },
+            segmentFrame.key
+          )),
+          showCursor ? /* @__PURE__ */ jsx(
+            AnimatedTextCursor,
+            {
+              cursorChar,
+              cursorToneClass
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AnimatedText.displayName = "AnimatedText";
+export {
+  ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS,
+  AnimatedText
+};

package/dist/components/animated-text/index.js

@@ -0,0 +1,4 @@
+import { AnimatedText } from "./animated-text";
+export {
+  AnimatedText
+};

package/dist/components/annotation/annotation.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+const toneClasses = {
+  amber: "bg-amber-500/20 text-amber-950 dark:text-amber-100",
+  emerald: "bg-emerald-500/20 text-emerald-950 dark:text-emerald-100",
+  rose: "bg-rose-500/20 text-rose-950 dark:text-rose-100",
+  sky: "bg-sky-500/20 text-sky-950 dark:text-sky-100"
+};
+function Highlight({
+  children,
+  className,
+  tone = "amber"
+}) {
+  return /* @__PURE__ */ jsx("mark", { className: cn("rounded px-1 py-0.5", toneClasses[tone], className), children });
+}
+function Annotation({
+  annotation,
+  children,
+  className,
+  label = "Annotation",
+  tone = "amber"
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(Highlight, { tone, children }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-primary align-super", children: "+" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "max-w-xs space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-2", children: annotation })
+    ] })
+  ] });
+}
+export {
+  Annotation,
+  Highlight
+};

package/dist/components/annotation/index.js

@@ -0,0 +1,8 @@
+import {
+  Annotation,
+  Highlight
+} from "./annotation";
+export {
+  Annotation,
+  Highlight
+};

package/dist/components/avatar-group/avatar-group.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+const avatarGroupVariants = cva("flex items-center", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "-space-x-4",
+      md: "-space-x-3",
+      sm: "-space-x-2.5"
+    }
+  }
+});
+const avatarItemVariants = cva(
+  "ring-2 ring-background border border-border bg-muted text-muted-foreground",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "h-12 w-12 text-sm",
+        md: "h-10 w-10 text-xs",
+        sm: "h-8 w-8 text-[11px]"
+      }
+    }
+  }
+);
+const overflowBadgeVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted font-medium text-muted-foreground ring-2 ring-background",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "h-12 min-w-12 px-3 text-sm",
+        md: "h-10 min-w-10 px-2.5 text-xs",
+        sm: "h-8 min-w-8 px-2 text-[11px]"
+      }
+    }
+  }
+);
+const AvatarGroup = React.forwardRef(
+  ({ className, items, max, overflowLabel, size, ...props }, reference) => {
+    const visibleItems = max === void 0 ? items : items.slice(0, max);
+    const hiddenCount = max === void 0 ? 0 : Math.max(items.length - max, 0);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(avatarGroupVariants({ size }), className),
+        ref: reference,
+        ...props,
+        children: [
+          visibleItems.map((item, index) => /* @__PURE__ */ jsxs(
+            Avatar,
+            {
+              className: avatarItemVariants({ size }),
+              style: { zIndex: visibleItems.length - index },
+              children: [
+                item.src ? /* @__PURE__ */ jsx(AvatarImage, { alt: item.alt, src: item.src }) : null,
+                /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
+              ]
+            },
+            `${item.alt}-${index}`
+          )),
+          hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+};

package/dist/components/avatar-group/index.js

@@ -0,0 +1,10 @@
+import {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+} from "./avatar-group";
+export {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+};