@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/snap-guides/snap-guides.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Snap guides"
+};
+const SnapGuides = forwardRef(
+  (props, ref) => {
+    const { className, guides, labels, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("pointer-events-none absolute inset-0 z-30", className),
+        "data-snap-guide-count": guides.length,
+        ref,
+        ...rest,
+        children: guides.map((guide) => {
+          const isVertical = guide.orientation === "vertical";
+          const offset = isVertical ? guide.x : guide.y;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute border-primary/70",
+                isVertical ? "inset-y-0 w-px border-l border-dashed" : "inset-x-0 h-px border-t border-dashed"
+              ),
+              "data-snap-guide-id": guide.id,
+              "data-snap-orientation": guide.orientation,
+              style: isVertical ? { left: `${offset.toString()}px` } : { top: `${offset.toString()}px` }
+            },
+            guide.id
+          );
+        })
+      }
+    );
+  }
+);
+SnapGuides.displayName = "SnapGuides";
+export {
+  SnapGuides
+};

package/dist/components/social-fab/social-fab.js

@@ -7,15 +7,15 @@ function ShareMenu({
   onPlatformSelect,
   platforms
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: platforms.map((p) => {
-    const handleClick = () => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: platforms.map((p) => {
+    const handleSelectSharePlatform = () => {
       onPlatformSelect(p.key);
     };
     return /* @__PURE__ */ jsx(
       "button",
       {
         className: "rounded px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        onClick: handleClick,
+        onClick: handleSelectSharePlatform,
         type: "button",
         children: p.label
       },
@@ -24,12 +24,12 @@ function ShareMenu({
   }) });
 }
 function ActionButton({ action }) {
-  const handleClick = action.onClick;
+  const handleRunAction = action.onClick;
   return /* @__PURE__ */ jsx(
     "button",
     {
       className: "rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent",
-      onClick: handleClick,
+      onClick: handleRunAction,
       type: "button",
       children: action.label
     }
@@ -47,7 +47,7 @@ function ActionPanel({
   const handleShareClick = shareAction?.onClick;
   const handleShareMouseEnter = isMobile ? void 0 : onShareHover;
   const handleShareMouseLeave = isMobile ? void 0 : onShareLeave;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: [
     shareAction ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -69,7 +69,7 @@ function MainFabButton({
   mainText,
   onToggle
 }) {
-  const handleClick = onToggle;
+  const handleToggleSharePanel = onToggle;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -77,11 +77,11 @@ function MainFabButton({
       "aria-label": isExpanded ? labels.close : labels.share,
       className: cn(
         "flex size-10 items-center justify-center rounded-md",
-        "border border-gray-300 bg-background dark:border-gray-600",
+        "border border-zinc-300 bg-background dark:border-zinc-600",
         "transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500"
+        "hover:-translate-y-0.5 hover:border-zinc-400 hover:shadow-md dark:hover:border-zinc-500"
       ),
-      onClick: handleClick,
+      onClick: handleToggleSharePanel,
       type: "button",
       children: /* @__PURE__ */ jsx("span", { className: "text-sm font-mono", children: isMobile && isExpanded ? "\u2715" : mainText })
     }
@@ -140,6 +140,7 @@ function ExpandedPanel({
     }
   );
 }
+const EMPTY_SHARE_PLATFORMS = [];
 function SocialFAB({
   actions,
   bottomOffset = 24,
@@ -150,7 +151,7 @@ function SocialFAB({
   onClose,
   onOpen,
   rightOffset = 24,
-  sharePlatforms = []
+  sharePlatforms = EMPTY_SHARE_PLATFORMS
 }) {
   const options = { onAction, onClose, onOpen };
   const fab = useSocialFab(options);

package/dist/components/sparkles/index.js

@@ -0,0 +1,4 @@
+import { Sparkles } from "./sparkles";
+export {
+  Sparkles
+};

package/dist/components/sparkles/sparkles.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function createSparkles(count) {
+  return Array.from({ length: count }, () => ({
+    delay: Math.random() * 2,
+    duration: 1 + Math.random() * 1.5,
+    left: Math.random() * 100,
+    size: 4 + Math.random() * 8,
+    top: Math.random() * 100
+  }));
+}
+const Sparkles = React.forwardRef(
+  ({ children, className, count = 20, ...props }, ref) => {
+    const [sparkles] = React.useState(() => createSparkles(count));
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref, ...props, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute inset-0 overflow-hidden",
+          children: sparkles.map((sparkle, index) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute rotate-45 rounded-[1px] bg-foreground motion-reduce:animate-none",
+              style: {
+                animation: `vllnt-sparkle ${sparkle.duration}s linear infinite`,
+                animationDelay: `${sparkle.delay}s`,
+                height: `${sparkle.size}px`,
+                left: `${sparkle.left}%`,
+                top: `${sparkle.top}%`,
+                width: `${sparkle.size}px`
+              }
+            },
+            index
+          ))
+        }
+      ),
+      children ? /* @__PURE__ */ jsx("div", { className: "relative", children }) : null
+    ] });
+  }
+);
+Sparkles.displayName = "Sparkles";
+export {
+  Sparkles
+};

package/dist/components/sparkline-grid/sparkline-grid.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { formatChange } from "../../lib/format";
 import { cn } from "../../lib/utils";
 function buildSparklinePath(data, width, height) {
   const min = Math.min(...data);
@@ -30,7 +31,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
       children: items.map((item) => {
         const isPositive = item.change >= 0;
         const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
-        const stroke = isPositive ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
+        const strokeClass = isPositive ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
         return /* @__PURE__ */ jsxs(
           "section",
           {
@@ -49,10 +50,8 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                       isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
-                      item.change > 0 ? "+" : "",
-                      item.change.toFixed(2),
-                      "%"
+                      /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
+                      formatChange(item.change)
                     ]
                   }
                 )
@@ -67,9 +66,10 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
+                      className: strokeClass,
                       d: buildSparklinePath(item.data, 120, 48),
                       fill: "none",
-                      stroke,
+                      stroke: "currentColor",
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       strokeWidth: "2.5",

package/dist/components/spinner/spinner.js

@@ -7,14 +7,14 @@ function Spinner({ className, size = "md", ...props }) {
       className: cn(
         "animate-spin rounded-full border-2 border-current border-t-transparent",
         {
-          "h-4 w-4": size === "sm",
-          "h-6 w-6": size === "md",
-          "h-8 w-8": size === "lg"
+          "size-4": size === "sm",
+          "size-6": size === "md",
+          "size-8": size === "lg"
         },
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" })
     }
   );
 }

package/dist/components/spinner/unicode-spinner.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
@@ -657,9 +658,11 @@ const UnicodeSpinner = React.forwardRef(
     const preset = UNICODE_SPINNER_PRESETS[animation];
     const resolvedInterval = interval ?? preset.interval;
     const [frameIndex, setFrameIndex] = React.useState(0);
-    React.useEffect(() => {
+    const [previousAnimation, setPreviousAnimation] = React.useState(animation);
+    if (previousAnimation !== animation) {
+      setPreviousAnimation(animation);
       setFrameIndex(0);
-    }, [animation]);
+    }
     React.useEffect(() => {
       if (paused) {
         return;

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

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

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

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function splitCharacters(value) {
+  return value.match(/[\s\S]/gu) ?? [];
+}
+function characterStyle(index, total, radius) {
+  return {
+    left: "50%",
+    position: "absolute",
+    top: "50%",
+    transform: `rotate(${360 / total * index}deg) translateY(${-radius}px)`,
+    transformOrigin: "0 0"
+  };
+}
+const SpinningText = React.forwardRef(
+  ({
+    children,
+    className,
+    duration = 20,
+    radius = 80,
+    reverse = false,
+    style,
+    ...props
+  }, ref) => {
+    const characters = splitCharacters(children);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": children,
+        className: cn(
+          "relative animate-spin motion-reduce:animate-none",
+          className
+        ),
+        ref,
+        style: {
+          animationDirection: reverse ? "reverse" : "normal",
+          animationDuration: `${duration}s`,
+          height: radius * 2,
+          width: radius * 2,
+          ...style
+        },
+        ...props,
+        children: characters.map((character, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: characterStyle(index, characters.length, radius),
+            children: character
+          },
+          `${character}-${index.toString()}`
+        ))
+      }
+    );
+  }
+);
+SpinningText.displayName = "SpinningText";
+export {
+  SpinningText
+};

package/dist/components/spotlight-card/index.js

@@ -0,0 +1,4 @@
+import { SpotlightCard } from "./spotlight-card";
+export {
+  SpotlightCard
+};

package/dist/components/spotlight-card/spotlight-card.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const SpotlightCard = React.forwardRef(({ children, className, ...props }, ref) => {
+  const [point, setPoint] = React.useState();
+  const handlePointerMove = (event) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    setPoint({
+      x: event.clientX - bounds.left,
+      y: event.clientY - bounds.top
+    });
+  };
+  const handlePointerLeave = () => {
+    setPoint(void 0);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-xl border bg-card p-6",
+        className
+      ),
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+            style: {
+              background: point ? `radial-gradient(180px circle at ${point.x}px ${point.y}px, oklch(var(--foreground) / 0.10), transparent 65%)` : void 0,
+              opacity: point ? 1 : 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+});
+SpotlightCard.displayName = "SpotlightCard";
+export {
+  SpotlightCard
+};

package/dist/components/stat-card/stat-card.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Card, CardContent, CardDescription, CardHeader } from "../card";
+import { Card, CardContent, CardDescription, CardHeader } from "../card/card";
 const statCardVariants = cva("overflow-hidden border shadow-sm", {
   defaultVariants: {
     tone: "neutral"
@@ -47,12 +47,12 @@ const changeVariants = cva(
 );
 function TrendIcon({ trend }) {
   if (trend === "up") {
-    return /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3.5" });
   }
   if (trend === "down") {
-    return /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3.5" });
   }
-  return /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" });
+  return /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5" });
 }
 const StatCard = React.forwardRef(
   ({
@@ -74,7 +74,7 @@ const StatCard = React.forwardRef(
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
-        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 space-y-0 pb-3", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 gap-y-0 pb-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx(CardDescription, { className: "text-xs font-medium uppercase tracking-[0.14em]", children: label }),
             /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight", children: value })

package/dist/components/state-badge-overlay/index.js

@@ -0,0 +1,6 @@
+import {
+  StateBadgeOverlay
+} from "./state-badge-overlay";
+export {
+  StateBadgeOverlay
+};

package/dist/components/state-badge-overlay/state-badge-overlay.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  idle: "Idle",
+  queued: "Queued",
+  running: "Running",
+  stopped: "Stopped"
+};
+const STATE_TONE = {
+  complete: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+  failed: "border-red-500/40 bg-red-500/15 text-red-700 dark:text-red-300",
+  idle: "border-border bg-muted/40 text-muted-foreground",
+  queued: "border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  running: "border-blue-500/40 bg-blue-500/15 text-blue-700 dark:text-blue-300",
+  stopped: "border-border bg-background text-foreground"
+};
+const STATE_DOT = {
+  complete: "bg-emerald-500",
+  failed: "bg-red-500",
+  idle: "bg-muted-foreground",
+  queued: "bg-amber-500",
+  running: "bg-blue-500 animate-pulse",
+  stopped: "bg-muted-foreground"
+};
+const ANCHOR_TRANSFORM = {
+  "bottom-left": "translate(-100%, 100%)",
+  "bottom-right": "translate(0%, 100%)",
+  "top-left": "translate(-100%, -100%)",
+  "top-right": "translate(0%, -100%)"
+};
+const DEFAULT_LABELS = {
+  region: "State"
+};
+const StateBadgeOverlay = forwardRef((props, ref) => {
+  const {
+    anchor = "top-right",
+    className,
+    label,
+    labels,
+    state,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const text = label ?? STATE_LABEL[state];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${resolvedLabels.region}: ${STATE_LABEL[state]}`,
+      className: cn(
+        "pointer-events-none absolute z-20 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide shadow-sm backdrop-blur",
+        STATE_TONE[state],
+        className
+      ),
+      "data-state-anchor": anchor,
+      "data-state-badge-overlay": true,
+      "data-state-name": state,
+      ref,
+      role: "status",
+      style: {
+        left: x,
+        top: y,
+        transform: ANCHOR_TRANSFORM[anchor]
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-1.5 rounded-full", STATE_DOT[state]),
+            "data-state-badge-dot": true
+          }
+        ),
+        text
+      ]
+    }
+  );
+});
+StateBadgeOverlay.displayName = "StateBadgeOverlay";
+export {
+  StateBadgeOverlay
+};

package/dist/components/static-code/index.js

@@ -0,0 +1,4 @@
+import { StaticCode } from "./static-code";
+export {
+  StaticCode
+};

package/dist/components/static-code/static-code-copy.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { Button } from "../button/button";
+import { useCopyToClipboard } from "../copy-button/copy-button";
+function StaticCodeCopy({ value }) {
+  const { copied, copy } = useCopyToClipboard();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? "Copied" : "Copy code",
+      className: "absolute right-2 top-2 size-8",
+      onClick: () => {
+        void copy(value);
+      },
+      size: "icon",
+      variant: "ghost",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
+    }
+  );
+}
+export {
+  StaticCodeCopy
+};

package/dist/components/static-code/static-code.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { cn } from "../../lib/utils";
+import { StaticCodeCopy } from "./static-code-copy";
+function StaticCode({
+  className,
+  code,
+  language = "tsx"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-x-auto rounded-lg border border-border bg-[#282c34]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          SyntaxHighlighter,
+          {
+            customStyle: {
+              background: "transparent",
+              fontSize: "0.875rem",
+              margin: 0,
+              padding: "1rem"
+            },
+            language,
+            PreTag: "div",
+            style: oneDark,
+            children: code
+          }
+        ),
+        /* @__PURE__ */ jsx(StaticCodeCopy, { value: code })
+      ]
+    }
+  );
+}
+export {
+  StaticCode
+};

package/dist/components/status-board/status-board.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 const STATUS_META = {
   critical: {
     badgeVariant: "destructive",
@@ -71,10 +71,16 @@ function getSummary(items) {
       warning: 0
     }
   );
-  return STATUS_ORDER.map((status) => ({
-    count: counts[status],
-    status
-  })).filter((entry) => entry.count > 0);
+  return STATUS_ORDER.reduce(
+    (summary, status) => {
+      const count = counts[status];
+      if (count > 0) {
+        summary.push({ count, status });
+      }
+      return summary;
+    },
+    []
+  );
 }
 function StatusBoardSummary({ items }) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: getSummary(items).map(({ count, status }) => {
@@ -96,7 +102,7 @@ function StatusBoardCard({ item }) {
             "span",
             {
               "aria-hidden": "true",
-              className: cn("h-2.5 w-2.5 rounded-full", meta.dotClassName)
+              className: cn("size-2.5 rounded-full", meta.dotClassName)
             }
           ),
           /* @__PURE__ */ jsx(CardTitle, { className: "text-base leading-none", children: item.label })
@@ -113,6 +119,7 @@ function StatusBoardCard({ item }) {
 }
 const StatusBoard = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     columns = 3,
     description,
@@ -123,7 +130,7 @@ const StatusBoard = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
         ] }),
         /* @__PURE__ */ jsx(StatusBoardSummary, { items })

package/dist/components/status-indicator/status-indicator.js

@@ -115,9 +115,9 @@ const dotVariants = cva("rounded-full", {
   },
   variants: {
     size: {
-      lg: "h-2.5 w-2.5",
-      md: "h-2 w-2",
-      sm: "h-1.5 w-1.5"
+      lg: "size-2.5",
+      md: "size-2",
+      sm: "size-1.5"
     },
     tone: {
       danger: "bg-red-500",