@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/selection-presence/selection-presence.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Selection presence"
+};
+const SelectionPresence = forwardRef((props, ref) => {
+  const { className, color, height, labels, name, width, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const accent = color ?? "var(--foreground)";
+  const ariaLabel = typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "pointer-events-none absolute z-20 rounded-md border-2 border-dashed",
+        className
+      ),
+      "data-selection-presence": true,
+      ref,
+      role: "img",
+      style: {
+        backgroundColor: `color-mix(in srgb, ${accent} 10%, transparent)`,
+        borderColor: accent,
+        height,
+        left: x,
+        top: y,
+        width
+      },
+      ...rest,
+      children: name === null || name === void 0 ? null : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute -top-5 left-0 inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+          "data-selection-presence-chip": true,
+          style: { backgroundColor: accent },
+          children: name
+        }
+      )
+    }
+  );
+});
+SelectionPresence.displayName = "SelectionPresence";
+export {
+  SelectionPresence
+};

package/dist/components/severity-badge/severity-badge.js

@@ -132,7 +132,7 @@ function SeverityBadge({
       "data-level": level,
       ...props,
       children: [
-        showDot ? /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative flex h-2 w-2", children: [
+        showDot ? /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative flex size-2", children: [
           pulse ? /* @__PURE__ */ jsx(
             "span",
             {
@@ -146,7 +146,7 @@ function SeverityBadge({
             "span",
             {
               className: cn(
-                "relative inline-flex h-2 w-2 rounded-full",
+                "relative inline-flex size-2 rounded-full",
                 DOT_COLOR[level]
               )
             }

package/dist/components/sheet/sheet.js

@@ -47,7 +47,7 @@ const SheetContent = forwardRef(({ children, className, side = "right", ...props
       ...props,
       children: [
         /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] }),
         children

package/dist/components/sidebar/sidebar.js

@@ -73,7 +73,7 @@ function CollapsibleSection({
             ChevronDown,
             {
               className: cn(
-                "h-3 w-3 transition-transform duration-200",
+                "size-3 transition-transform duration-200",
                 isOpen && "rotate-180"
               )
             }

package/dist/components/sidebar-toggle/sidebar-toggle.js

@@ -16,7 +16,7 @@ function SidebarToggle({
         onClick: onToggle,
         size: "icon",
         variant: "ghost",
-        children: open ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        children: open ? /* @__PURE__ */ jsx(X, { className: "size-5" }) : /* @__PURE__ */ jsx(Menu, { className: "size-5" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -26,7 +26,7 @@ function SidebarToggle({
         onClick: onToggle,
         size: "icon",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
       }
     )
   ] });

package/dist/components/slider/slider.js

@@ -14,7 +14,7 @@ const Slider = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs
     ...props,
     children: [
       /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));

package/dist/components/slideshow/slideshow.js

@@ -15,11 +15,12 @@ const DEFAULT_LABELS = {
   prevLabel: "Prev",
   sectionsLabel: "Sections"
 };
+const EMPTY_SLIDESHOW_LABELS = {};
 function SlideshowImpl({
   completedSections,
   completionDialogTitle = "Mark section as complete?",
   currentIndex,
-  labels = {},
+  labels = EMPTY_SLIDESHOW_LABELS,
   onComplete,
   onExit,
   onNavigate,
@@ -145,7 +146,7 @@ function SlideshowImpl({
               children: isTocOpen ? /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -162,7 +163,7 @@ function SlideshowImpl({
               ) : /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -200,7 +201,7 @@ function SlideshowImpl({
               children: /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -261,7 +262,7 @@ function SlideshowImpl({
                           children: /* @__PURE__ */ jsx(
                             "svg",
                             {
-                              className: "h-4 w-4",
+                              className: "size-4",
                               fill: "none",
                               stroke: "currentColor",
                               viewBox: "0 0 24 24",
@@ -298,13 +299,13 @@ function SlideshowImpl({
                               "div",
                               {
                                 className: cn(
-                                  "flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center",
+                                  "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
                                   isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"
                                 ),
                                 children: isCompleted ? /* @__PURE__ */ jsx(
                                   "svg",
                                   {
-                                    className: "h-3 w-3 text-background",
+                                    className: "size-3 text-background",
                                     fill: "none",
                                     stroke: "currentColor",
                                     viewBox: "0 0 24 24",
@@ -333,7 +334,7 @@ function SlideshowImpl({
                             )
                           ]
                         },
-                        `${section.id}-${index}`
+                        section.id
                       );
                     }) })
                   ]
@@ -355,7 +356,7 @@ function SlideshowImpl({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between px-4 py-4 border-t border-border bg-background", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between p-4 border-t border-border bg-background", children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -367,7 +368,7 @@ function SlideshowImpl({
               /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-4 w-4",
+                  className: "size-4",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -397,7 +398,7 @@ function SlideshowImpl({
               !isLastSection && /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-4 w-4",
+                  className: "size-4",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",

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

@@ -0,0 +1,6 @@
+import {
+  SnapGuides
+} from "./snap-guides";
+export {
+  SnapGuides
+};

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

@@ -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/sparkline-grid/sparkline-grid.js

@@ -49,7 +49,7 @@ 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" }),
+                      /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
                       item.change > 0 ? "+" : "",
                       item.change.toFixed(2),
                       "%"

package/dist/components/spinner/spinner.js

@@ -7,9 +7,9 @@ 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
       ),

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";

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

@@ -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(
   ({

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/status-board/status-board.js

@@ -96,7 +96,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 })

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",

package/dist/components/step-by-step/step-by-step.js

@@ -10,7 +10,7 @@ function Step({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
+      /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
       /* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-border mt-2" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 pb-8 last:pb-0", children: [
@@ -33,7 +33,7 @@ function InteractiveStep({
         "button",
         {
           className: cn(
-            "flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
+            "flex size-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
             isCompleted ? "bg-green-500 text-white" : "bg-primary text-primary-foreground"
           ),
           onClick: onToggle,
@@ -41,7 +41,7 @@ function InteractiveStep({
           children: isCompleted ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4",
+              className: "size-4",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -112,7 +112,7 @@ function StepByStep({
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-primary",
+            className: "size-5 text-primary",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -131,6 +131,7 @@ function StepByStep({
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => {
         const stepElement = step;
+        const stepKey = `${stepElement.props.title}-${index + 1}`;
         return /* @__PURE__ */ jsx(
           Step,
           {
@@ -138,7 +139,7 @@ function StepByStep({
             title: stepElement.props.title,
             children: stepElement.props.children
           },
-          index
+          stepKey
         );
       }) })
     ] });
@@ -148,7 +149,7 @@ function StepByStep({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary",
+          className: "size-5 text-primary",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -183,7 +184,7 @@ function StepByStep({
         title: step.props.title,
         children: step.props.children
       },
-      index
+      `${step.props.title}-${index + 1}`
     )) })
   ] });
 }

package/dist/components/step-navigation/step-navigation.js

@@ -45,7 +45,7 @@ function StepNavigationImpl({
                 "svg",
                 {
                   "aria-hidden": "true",
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -90,7 +90,7 @@ function StepNavigationImpl({
                 "svg",
                 {
                   "aria-hidden": "true",
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",

package/dist/components/stepper/stepper.js

@@ -13,10 +13,10 @@ function StepIcon({
   stepNumber
 }) {
   if (state === "complete") {
-    return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(Check, { className: "size-4" });
   }
   if (!showNumbers) {
-    return /* @__PURE__ */ jsx(Circle, { className: "h-3.5 w-3.5 fill-current stroke-none" });
+    return /* @__PURE__ */ jsx(Circle, { className: "size-3.5 fill-current stroke-none" });
   }
   return /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: stepNumber });
 }
@@ -52,7 +52,7 @@ function StepperItem({
             {
               "aria-current": stepState === "current" ? "step" : void 0,
               className: cn(
-                "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors",
+                "relative z-10 flex size-8 items-center justify-center rounded-full border text-sm transition-colors",
                 stepState === "complete" && "border-primary bg-primary text-primary-foreground",
                 stepState === "current" && "border-primary bg-primary/10 text-primary shadow-sm",
                 stepState === "upcoming" && "border-border bg-background text-muted-foreground"

package/dist/components/sticky-metric/index.js

@@ -0,0 +1,6 @@
+import {
+  StickyMetric
+} from "./sticky-metric";
+export {
+  StickyMetric
+};

package/dist/components/sticky-metric/sticky-metric.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const ANCHOR_OFFSET = {
+  "bottom-left": { transform: "translate(-100%, 100%)" },
+  "bottom-right": { transform: "translate(0%, 100%)" },
+  "top-left": { transform: "translate(-100%, -100%)" },
+  "top-right": { transform: "translate(0%, -100%)" }
+};
+const DEFAULT_LABELS = {
+  region: "Sticky metric"
+};
+const StickyMetric = forwardRef(
+  (props, ref) => {
+    const {
+      anchor = "top-right",
+      className,
+      detail,
+      label,
+      labels,
+      tone = "neutral",
+      value,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
+          className
+        ),
+        "data-sticky-anchor": anchor,
+        "data-sticky-metric": true,
+        "data-sticky-tone": tone,
+        ref,
+        role: "status",
+        style: {
+          left: x,
+          top: y,
+          transform: ANCHOR_OFFSET[anchor].transform
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("size-1.5 rounded-full", TONE_DOT[tone]),
+              "data-sticky-metric-dot": true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: value }),
+          detail ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[10px] text-muted-foreground",
+              "data-sticky-metric-detail": true,
+              children: detail
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+StickyMetric.displayName = "StickyMetric";
+export {
+  StickyMetric
+};