@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

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/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,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "../button/button";
+function StaticCodeCopy({ value }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? "Copied" : "Copy code",
+      className: "absolute right-2 top-2 size-8",
+      onClick: handleCopy,
+      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,7 +1,7 @@
 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,
@@ -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",

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",
@@ -93,6 +93,7 @@ function InteractiveStep({
   ] });
 }
 function StepByStep({
+  as: Heading = "h3",
   children,
   className,
   interactive = false,
@@ -112,7 +113,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",
@@ -127,10 +128,11 @@ function StepByStep({
             )
           }
         ),
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: title })
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-lg", children: title })
       ] }) : 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 +140,7 @@ function StepByStep({
             title: stepElement.props.title,
             children: stepElement.props.children
           },
-          index
+          stepKey
         );
       }) })
     ] });
@@ -148,7 +150,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 +185,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
+};

package/dist/components/story-map/index.js

@@ -0,0 +1,8 @@
+import {
+  StoryMap,
+  StoryMapChapter
+} from "./story-map";
+export {
+  StoryMap,
+  StoryMapChapter
+};