@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/chunk-s29j7505.js

@@ -0,0 +1,147 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  paper,
+  mono,
+  codeScroll,
+  codeSurface
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ReviewableDiff.tsx
+import { CheckIcon, XIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var GUTTER = { context: "", added: "+", removed: "−" };
+function ReviewableDiff2({
+  filename,
+  hunks,
+  onKeep,
+  onDiscard,
+  onApply,
+  className,
+  ...props
+}) {
+  const kept = hunks.filter((hunk) => hunk.decision === "kept").length;
+  const pending = hunks.filter((hunk) => hunk.decision === "pending").length;
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ReviewableDiff",
+    "data-slot": "reviewable-diff",
+    className: cn2(cn2(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-md"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-between px-4 pt-3 pb-2",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "font-mono text-sm",
+            children: filename
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(mono, "text-muted-foreground tabular-nums"),
+            children: [
+              kept,
+              " of ",
+              hunks.length,
+              " kept"
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex flex-col",
+        children: hunks.map((hunk) => /* @__PURE__ */ jsxs("div", {
+          className: cn2("border-foreground/[0.06] border-t transition-opacity duration-300", hunk.decision === "discarded" && "border-dashed"),
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex items-center gap-2 px-4 py-1.5",
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  className: cn2(mono, "text-muted-foreground"),
+                  children: hunk.range
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: "ms-auto flex items-center gap-1",
+                  children: hunk.decision === "pending" && (onKeep || onDiscard) ? /* @__PURE__ */ jsxs(Fragment, {
+                    children: [
+                      onDiscard && /* @__PURE__ */ jsxs(Button2, {
+                        type: "button",
+                        "aria-label": `Discard hunk ${hunk.range}`,
+                        onClick: () => onDiscard(hunk.id),
+                        variant: "ghost",
+                        children: [
+                          /* @__PURE__ */ jsx(XIcon, {
+                            "aria-hidden": "true",
+                            "data-icon": "inline-start"
+                          }),
+                          "Discard"
+                        ]
+                      }),
+                      onKeep && /* @__PURE__ */ jsxs(Button2, {
+                        type: "button",
+                        "aria-label": `Keep hunk ${hunk.range}`,
+                        onClick: () => onKeep(hunk.id),
+                        variant: "ghost",
+                        children: [
+                          /* @__PURE__ */ jsx(CheckIcon, {
+                            "aria-hidden": "true",
+                            "data-icon": "inline-start"
+                          }),
+                          "Keep"
+                        ]
+                      })
+                    ]
+                  }) : /* @__PURE__ */ jsx("span", {
+                    className: cn2(mono, "fade-in animate-in duration-300", hunk.decision === "kept" ? "text-success text-success" : "text-muted-foreground"),
+                    children: hunk.decision
+                  })
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: cn2(codeScroll, "pb-1.5 font-mono text-sm"),
+              children: /* @__PURE__ */ jsx("div", {
+                className: codeSurface,
+                children: hunk.lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
+                  className: cn2("flex px-4 py-0.5 leading-relaxed whitespace-pre", line.kind === "context" && "text-muted-foreground", line.kind === "added" && "bg-success/10 text-foreground", line.kind === "removed" && "bg-destructive/10 text-foreground"),
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "w-4 shrink-0 select-none",
+                      children: GUTTER[line.kind]
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      children: line.text
+                    })
+                  ]
+                }, `${hunk.id}-${i}`))
+              })
+            })
+          ]
+        }, hunk.id))
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "border-foreground/[0.06] flex items-center justify-between border-t px-4 py-2.5",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2(mono, "text-muted-foreground"),
+            children: pending > 0 ? `${pending} left to review` : "All reviewed"
+          }),
+          onApply && /* @__PURE__ */ jsxs(Button2, {
+            type: "button",
+            disabled: pending > 0,
+            onClick: onApply,
+            variant: "default",
+            children: [
+              "Apply ",
+              kept
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { ReviewableDiff2 };

package/dist/chunk-s3wqwhxc.js

@@ -0,0 +1,15 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/assistant-ui/elements/ShimmerLabel.tsx
+import { jsx } from "react/jsx-runtime";
+function ShimmerLabel2({ active = true, ...props }) {
+  return /* @__PURE__ */ jsx("span", {
+    "data-testid": "ShimmerLabel",
+    className: cn2("relative inline-block text-muted-foreground", active && "shimmer motion-reduce:animate-none"),
+    ...props
+  });
+}
+
+export { ShimmerLabel2 };

package/dist/chunk-sbrpnv8s.js

@@ -0,0 +1,117 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Collapsible2,
+  CollapsibleTrigger2,
+  CollapsibleContent2
+} from "./chunk-24d68cjp.js";
+
+// src/components/assistant-ui/native/constants.ts
+import { cva } from "class-variance-authority";
+var toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
+  variants: {
+    variant: {
+      outline: "rounded-md border py-3",
+      ghost: "",
+      muted: "border-muted-foreground/30 bg-muted/30 rounded-md border py-3"
+    }
+  },
+  defaultVariants: { variant: "outline" }
+});
+
+// src/components/assistant-ui/native/ToolGroup.tsx
+import { memo, useCallback, useRef, useState } from "react";
+import { ChevronDownIcon, LoaderIcon } from "lucide-react";
+import { useScrollLock } from "@assistant-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ANIMATION_DURATION = 200;
+function ToolGroupRoot2({
+  variant,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  defaultOpen = false,
+  children,
+  ...props
+}) {
+  const collapsibleRef = useRef(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = useCallback((open) => {
+    lockScroll();
+    if (!isControlled) {
+      setUncontrolledOpen(open);
+    }
+    controlledOnOpenChange?.(open);
+  }, [lockScroll, isControlled, controlledOnOpenChange]);
+  return /* @__PURE__ */ jsx(Collapsible2, {
+    "data-testid": "ToolGroupRoot",
+    ref: collapsibleRef,
+    "data-slot": "tool-group-root",
+    "data-variant": variant ?? "outline",
+    open: isOpen,
+    onOpenChange: handleOpenChange,
+    ...props,
+    render: /* @__PURE__ */ jsx("div", {
+      className: cn2(cn2(toolGroupVariants({ variant }), "group/tool-group-root"), "[--animation-duration:200ms]")
+    }),
+    children
+  });
+}
+function ToolGroupTrigger2({ count, active = false, ...props }) {
+  const label = `${count} tool ${count === 1 ? "call" : "calls"}`;
+  return /* @__PURE__ */ jsxs(CollapsibleTrigger2, {
+    "data-testid": "ToolGroupTrigger",
+    "data-slot": "tool-group-trigger",
+    ...props,
+    render: /* @__PURE__ */ jsx("button", {
+      className: cn2("aui-tool-group-trigger group/trigger flex origin-left items-center gap-2 text-sm transition-colors ", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4")
+    }),
+    children: [
+      active && /* @__PURE__ */ jsx(LoaderIcon, {
+        "aria-hidden": "true",
+        className: "size-3.5 shrink-0 animate-spin motion-reduce:animate-none"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        "data-slot": "tool-group-trigger-label",
+        className: cn2("aui-tool-group-trigger-label-wrapper inline-block text-start text-sm leading-none font-medium", "group-data-[variant=ghost]/tool-group-root:font-normal", "group-data-[variant=outline]/tool-group-root:grow", "group-data-[variant=muted]/tool-group-root:grow", active && "shimmer motion-reduce:animate-none"),
+        children: label
+      }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, {
+        "aria-hidden": "true",
+        className: "size-3.5 shrink-0 transition-transform group-data-open:rotate-180 motion-reduce:transition-none"
+      })
+    ]
+  });
+}
+function ToolGroupContent2({ children, ...props }) {
+  return /* @__PURE__ */ jsx(CollapsibleContent2, {
+    "data-testid": "ToolGroupContent",
+    "data-slot": "tool-group-content",
+    ...props,
+    render: /* @__PURE__ */ jsx("div", {
+      className: cn2("aui-tool-group-content relative overflow-hidden text-sm outline-none", "group/collapsible-content ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none", "data-closed:animate-collapsible-up", "data-open:animate-collapsible-down", "data-closed:fill-mode-forwards", "data-closed:pointer-events-none", "[--tw-duration:var(--animation-duration)]")
+    }),
+    children: /* @__PURE__ */ jsx("div", {
+      className: cn2("mt-2 flex flex-col gap-2", "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1", "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3", "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3", "group-data-open/collapsible-content:animate-in group-data-open/collapsible-content:fade-in-0 group-data-open/collapsible-content:slide-in-from-top-1 motion-reduce:animate-none"),
+      children
+    })
+  });
+}
+var ToolGroup3 = Object.assign(memo(function ToolGroup({ children, startIndex, endIndex }) {
+  const toolCount = endIndex - startIndex + 1;
+  return /* @__PURE__ */ jsxs(ToolGroupRoot2, {
+    children: [
+      /* @__PURE__ */ jsx(ToolGroupTrigger2, {
+        count: toolCount
+      }),
+      /* @__PURE__ */ jsx(ToolGroupContent2, {
+        children
+      })
+    ]
+  });
+}), { Root: ToolGroupRoot2, Trigger: ToolGroupTrigger2, Content: ToolGroupContent2 });
+
+export { ToolGroupRoot2, ToolGroupTrigger2, ToolGroupContent2, ToolGroup3 };

package/dist/chunk-serw27sv.js

@@ -0,0 +1,146 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Switch2
+} from "./chunk-8ye0k6z7.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Textarea2
+} from "./chunk-hz9azhzx.js";
+import {
+  Slider2
+} from "./chunk-644cnngf.js";
+import {
+  clamp
+} from "./chunk-v8ks0cfq.js";
+import {
+  paper,
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/SettingsPanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsPanel2({
+  model,
+  models,
+  systemPrompt,
+  temperature,
+  toggles,
+  onModelChange,
+  onSystemPromptChange,
+  onTemperatureChange,
+  onToggle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "SettingsPanel",
+    "data-slot": "settings-panel",
+    className: cn2(cn2(paper, "flex w-full max-w-sm flex-col gap-4 rounded-md p-4"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2(mono, "text-muted-foreground"),
+            children: "model"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: cn2(field, "flex gap-0.5 rounded-full p-0.5"),
+            children: models.map((option) => {
+              const className = cn2("flex-1 rounded-full py-1 text-sm font-medium transition-colors duration-150", option === model ? "bg-background text-foreground" : onModelChange ? "text-muted-foreground hover:text-muted-foreground" : "text-muted-foreground");
+              return onModelChange ? /* @__PURE__ */ jsx(Button2, {
+                type: "button",
+                "aria-pressed": option === model,
+                onClick: () => onModelChange(option),
+                variant: "ghost",
+                children: option
+              }, option) : /* @__PURE__ */ jsx("span", {
+                "aria-current": option === model ? "true" : undefined,
+                className,
+                children: option
+              }, option);
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2(mono, "text-muted-foreground"),
+            children: "system prompt"
+          }),
+          /* @__PURE__ */ jsx(Textarea2, {
+            value: systemPrompt,
+            readOnly: !onSystemPromptChange,
+            onChange: (event) => onSystemPromptChange?.(event.target.value),
+            rows: 3,
+            "aria-label": "System prompt"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-1.5",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: "flex items-baseline justify-between",
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: cn2(mono, "text-muted-foreground"),
+                children: "temperature"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: cn2(mono, "text-muted-foreground tabular-nums"),
+                children: clamp(temperature, 0, 2).toFixed(1)
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(Slider2, {
+            min: 0,
+            max: 2,
+            step: 0.1,
+            value: clamp(temperature, 0, 2),
+            disabled: !onTemperatureChange,
+            getAriaLabel: () => "Temperature",
+            onValueChange: (next) => onTemperatureChange?.(next)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex flex-col gap-2.5",
+        children: toggles.map((toggle) => /* @__PURE__ */ jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [
+            /* @__PURE__ */ jsxs("span", {
+              className: "flex min-w-0 flex-1 flex-col",
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  className: "truncate text-base",
+                  children: toggle.label
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: "text-muted-foreground truncate text-sm",
+                  children: toggle.detail
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx(Switch2, {
+              checked: toggle.on,
+              disabled: !onToggle,
+              "aria-label": toggle.label,
+              onCheckedChange: () => onToggle?.(toggle.key)
+            })
+          ]
+        }, toggle.key))
+      })
+    ]
+  });
+}
+
+export { SettingsPanel2 };

package/dist/chunk-smdxxnb8.js

@@ -0,0 +1,19 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  InputGroupAddon2
+} from "./chunk-1jeg5z55.js";
+
+// src/components/assistant-ui/elements/ComposerAttachments.tsx
+import { jsx } from "react/jsx-runtime";
+function ComposerAttachments2({ ...props }) {
+  return /* @__PURE__ */ jsx(InputGroupAddon2, {
+    "data-testid": "ComposerAttachments",
+    align: "block-start",
+    className: cn2("flex-wrap"),
+    ...props
+  });
+}
+
+export { ComposerAttachments2 };

package/dist/chunk-smzhep9f.js

@@ -0,0 +1,245 @@
+import {
+  usePrefersReducedMotion
+} from "./chunk-jy57625a.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/assistant-ui/elements/DotMatrix.tsx
+import { useLayoutEffect, useMemo, useRef } from "react";
+
+// src/components/assistant-ui/utils/getDotMatrixPattern.ts
+var GRID = 5;
+var CENTER = (GRID - 1) / 2;
+var DOT_INDEXES = Array.from({ length: GRID * GRID }, (_, i) => i);
+var hash = (n, salt, range) => {
+  let h = Math.imul(n, 374761393) + Math.imul(salt, 668265263) >>> 0;
+  h = Math.imul(h ^ h >>> 13, 1274126177) >>> 0;
+  return (h ^ h >>> 16) % range / 1000;
+};
+var glyph = (dots) => new Set(dots.map(([row, col]) => row * GRID + col));
+var CHECK = glyph([
+  [1, 4],
+  [2, 3],
+  [3, 0],
+  [3, 2],
+  [4, 1]
+]);
+var CROSS = glyph([
+  [0, 0],
+  [0, 4],
+  [1, 1],
+  [1, 3],
+  [2, 2],
+  [3, 1],
+  [3, 3],
+  [4, 0],
+  [4, 4]
+]);
+var BANG = glyph([
+  [0, 2],
+  [1, 2],
+  [2, 2],
+  [4, 2]
+]);
+var INFO = glyph([
+  [0, 2],
+  [2, 2],
+  [3, 2],
+  [4, 2]
+]);
+var PAUSE = glyph([
+  [1, 1],
+  [2, 1],
+  [3, 1],
+  [1, 3],
+  [2, 3],
+  [3, 3]
+]);
+var STOP = glyph([
+  [1, 1],
+  [1, 2],
+  [1, 3],
+  [2, 1],
+  [2, 2],
+  [2, 3],
+  [3, 1],
+  [3, 2],
+  [3, 3]
+]);
+var RECORD = glyph([
+  [1, 2],
+  [2, 1],
+  [2, 2],
+  [2, 3],
+  [3, 2]
+]);
+var ELLIPSIS = glyph([
+  [2, 0],
+  [2, 2],
+  [2, 4]
+]);
+var STATES = {
+  idle: { color: "text-muted-foreground", base: 0.3 },
+  loading: {
+    blink: (i) => ({
+      duration: 0.9 + hash(i, 2, 700),
+      delay: -hash(i, 1, 1200),
+      lo: 0.15
+    })
+  },
+  thinking: {
+    blink: (_i, row, col) => ({
+      duration: 1.2,
+      delay: -(row + col) * 0.09,
+      lo: 0.2
+    })
+  },
+  streaming: {
+    blink: (_i, row, col) => ({
+      duration: 0.9,
+      delay: -(row * 0.12 + hash(col, 3, 900)),
+      lo: 0.15
+    })
+  },
+  searching: {
+    blink: (_i, _row, col) => ({ duration: 1.1, delay: -col * 0.12, lo: 0.2 })
+  },
+  syncing: {
+    blink: (_i, row, col) => {
+      const turn = (Math.atan2(row - CENTER, col - CENTER) + Math.PI) / (2 * Math.PI);
+      return { duration: 1.3, delay: -turn * 1.3, lo: 0.2 };
+    }
+  },
+  connecting: {
+    blink: (_i, row, col) => ({
+      duration: 1.4,
+      delay: -Math.max(Math.abs(row - CENTER), Math.abs(col - CENTER)) * 0.18,
+      lo: 0.15
+    })
+  },
+  waiting: {
+    glyph: ELLIPSIS,
+    blink: (_i, _row, col) => ({
+      duration: 1.2,
+      delay: -col * 0.09,
+      lo: 0.2
+    })
+  },
+  uploading: {
+    blink: (_i, row) => ({
+      duration: 1,
+      delay: -(GRID - 1 - row) * 0.12,
+      lo: 0.2
+    })
+  },
+  downloading: {
+    blink: (_i, row) => ({ duration: 1, delay: -row * 0.12, lo: 0.2 })
+  },
+  listening: {
+    blink: (_i, _row, col) => ({
+      duration: 0.7 + hash(col, 4, 500),
+      delay: -hash(col, 5, 900),
+      lo: 0.25
+    })
+  },
+  speaking: {
+    blink: (_i, _row, col) => ({
+      duration: 0.4 + hash(col, 6, 350),
+      delay: -hash(col, 7, 700),
+      lo: 0.2
+    })
+  },
+  recording: {
+    color: "text-destructive",
+    glyph: RECORD,
+    dim: 0.12,
+    blink: () => ({ duration: 1.4, delay: 0, lo: 0.3 })
+  },
+  success: { color: "text-success", glyph: CHECK },
+  error: {
+    color: "text-destructive",
+    glyph: CROSS,
+    blink: () => ({ duration: 1.1, delay: 0, lo: 0.4 })
+  },
+  warning: {
+    color: "text-warning",
+    glyph: BANG,
+    blink: () => ({ duration: 1.6, delay: 0, lo: 0.45 })
+  },
+  info: { color: "text-primary", glyph: INFO },
+  paused: { color: "text-muted-foreground", glyph: PAUSE },
+  stopped: { color: "text-muted-foreground", glyph: STOP },
+  offline: { color: "text-muted-foreground", base: 0.15 }
+};
+function getDotMatrixPattern(state) {
+  const config = STATES[state];
+  return {
+    color: config.color,
+    dots: DOT_INDEXES.map((index) => {
+      const row = Math.floor(index / GRID);
+      const column = index % GRID;
+      const isOn = !config.glyph || config.glyph.has(index);
+      return {
+        index,
+        x: 2 + column * 4,
+        y: 2 + row * 4,
+        opacity: isOn ? config.base ?? 1 : config.dim ?? 0.15,
+        blink: isOn ? config.blink?.(index, row, column) : undefined
+      };
+    })
+  };
+}
+
+// src/components/assistant-ui/elements/DotMatrix.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DotMatrixDot({ dot, isReducedMotion }) {
+  const reference = useRef(null);
+  useLayoutEffect(() => {
+    if (!reference.current || !dot.blink || isReducedMotion)
+      return;
+    const animation = reference.current.animate([{ opacity: dot.opacity }, { opacity: dot.blink.lo }, { opacity: dot.opacity }], {
+      duration: dot.blink.duration * 1000,
+      delay: dot.blink.delay * 1000,
+      iterations: Infinity,
+      easing: "ease-in-out"
+    });
+    return () => animation.cancel();
+  }, [dot, isReducedMotion]);
+  return /* @__PURE__ */ jsx("circle", {
+    ref: reference,
+    cx: dot.x,
+    cy: dot.y,
+    r: 1.3,
+    opacity: dot.opacity
+  });
+}
+function DotMatrix2({ state = "loading", label, ...props }) {
+  const pattern = useMemo(() => getDotMatrixPattern(state), [state]);
+  const isReducedMotion = usePrefersReducedMotion();
+  return /* @__PURE__ */ jsxs("span", {
+    "data-testid": "DotMatrix",
+    "data-state": state,
+    role: "status",
+    className: cn2("inline-block size-4 shrink-0", pattern.color),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "sr-only",
+        children: label ?? state
+      }),
+      /* @__PURE__ */ jsx("svg", {
+        "aria-hidden": "true",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        className: "size-full",
+        children: pattern.dots.map((dot) => /* @__PURE__ */ jsx(DotMatrixDot, {
+          dot,
+          isReducedMotion
+        }, dot.index))
+      })
+    ]
+  });
+}
+
+export { DotMatrix2 };