@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -1,44 +1,44 @@
 "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
-          );
-        })
-      }
-    );
-  }
-);
+const SnapGuides = ({
+  ref,
+  ...props
+}) => {
+  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/sparkles/index.js

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

package/dist/components/sparkles/sparkles.js

@@ -0,0 +1,51 @@
+"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 = ({
+  children,
+  className,
+  count = 20,
+  ref,
+  ...props
+}) => {
+  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,6 @@
 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);
@@ -17,7 +17,8 @@ const gridColumns = {
   3: "md:grid-cols-2 xl:grid-cols-3",
   4: "md:grid-cols-2 xl:grid-cols-4"
 };
-const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...props }, reference) => {
+const SparklineGrid = (props) => {
+  const { className, columns = 2, items, ref: reference, ...rest } = props;
   if (items.length === 0) {
     return null;
   }
@@ -26,7 +27,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
     {
       className: cn("grid grid-cols-1 gap-4", gridColumns[columns], className),
       ref: reference,
-      ...props,
+      ...rest,
       children: items.map((item) => {
         const isPositive = item.change >= 0;
         const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
@@ -50,9 +51,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
-                      item.change > 0 ? "+" : "",
-                      item.change.toFixed(2),
-                      "%"
+                      formatChange(item.change)
                     ]
                   }
                 )
@@ -86,7 +85,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
       })
     }
   );
-});
+};
 SparklineGrid.displayName = "SparklineGrid";
 export {
   SparklineGrid

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

@@ -645,64 +645,65 @@ const UNICODE_SPINNER_SIZE_CLASSES = {
   md: "text-lg",
   sm: "text-sm"
 };
-const UnicodeSpinner = React.forwardRef(
-  ({
-    animation = "braille",
-    className,
-    interval,
-    label,
-    paused = false,
-    size = "md",
-    ...props
-  }, ref) => {
-    const preset = UNICODE_SPINNER_PRESETS[animation];
-    const resolvedInterval = interval ?? preset.interval;
-    const [frameIndex, setFrameIndex] = React.useState(0);
-    const [previousAnimation, setPreviousAnimation] = React.useState(animation);
-    if (previousAnimation !== animation) {
-      setPreviousAnimation(animation);
-      setFrameIndex(0);
+const UnicodeSpinner = ({
+  animation = "braille",
+  className,
+  interval,
+  label,
+  paused = false,
+  ref,
+  size = "md",
+  ...props
+}) => {
+  const preset = UNICODE_SPINNER_PRESETS[animation];
+  const resolvedInterval = interval ?? preset.interval;
+  const [frameIndex, setFrameIndex] = React.useState(0);
+  const [previousAnimation, setPreviousAnimation] = React.useState(
+    () => animation
+  );
+  if (previousAnimation !== animation) {
+    setPreviousAnimation(animation);
+    setFrameIndex(0);
+  }
+  React.useEffect(() => {
+    if (paused) {
+      return;
     }
-    React.useEffect(() => {
-      if (paused) {
-        return;
-      }
-      const timer = window.setInterval(() => {
-        setFrameIndex((current) => (current + 1) % preset.frames.length);
-      }, resolvedInterval);
-      return () => {
-        window.clearInterval(timer);
-      };
-    }, [paused, preset.frames.length, resolvedInterval]);
-    const frame = preset.frames[frameIndex] ?? preset.frames[0] ?? "\u280B";
-    const accessibleLabel = label ? `Loading ${label}` : "Loading";
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "inline-flex items-center gap-2 font-mono leading-none text-foreground",
-          UNICODE_SPINNER_SIZE_CLASSES[size],
-          className
+    const timer = window.setInterval(() => {
+      setFrameIndex((current) => (current + 1) % preset.frames.length);
+    }, resolvedInterval);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [paused, preset.frames.length, resolvedInterval]);
+  const frame = preset.frames[frameIndex] ?? preset.frames[0] ?? "\u280B";
+  const accessibleLabel = label ? `Loading ${label}` : "Loading";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 font-mono leading-none text-foreground",
+        UNICODE_SPINNER_SIZE_CLASSES[size],
+        className
+      ),
+      ref,
+      role: "status",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inline-block min-w-[1em] whitespace-pre",
+            children: frame
+          }
         ),
-        ref,
-        role: "status",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "inline-block min-w-[1em] whitespace-pre",
-              children: frame
-            }
-          ),
-          label ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }) : null,
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: accessibleLabel })
-        ]
-      }
-    );
-  }
-);
+        label ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }) : null,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: accessibleLabel })
+      ]
+    }
+  );
+};
 UnicodeSpinner.displayName = "UnicodeSpinner";
 export {
   UNICODE_SPINNER_ANIMATIONS,

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,58 @@
+import { jsx } from "react/jsx-runtime";
+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 = ({
+  children,
+  className,
+  duration = 20,
+  radius = 80,
+  ref,
+  reverse = false,
+  style,
+  ...props
+}) => {
+  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,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const SpotlightCard = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cva } from "class-variance-authority";
 import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -54,46 +53,45 @@ function TrendIcon({ trend }) {
   }
   return /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5" });
 }
-const StatCard = React.forwardRef(
-  ({
-    change,
-    className,
-    description,
-    icon,
-    label,
-    meta,
-    tone,
-    trend = "neutral",
-    value,
-    ...props
-  }, reference) => /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: cn(statCardVariants({ tone }), className),
-      ref: reference,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
-        /* @__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 })
-          ] }),
-          icon ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-muted/50 p-2 text-muted-foreground", children: icon }) : null
+const StatCard = ({
+  change,
+  className,
+  description,
+  icon,
+  label,
+  meta,
+  ref: reference,
+  tone,
+  trend = "neutral",
+  value,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Card,
+  {
+    className: cn(statCardVariants({ tone }), className),
+    ref: reference,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
+      /* @__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 })
         ] }),
-        description || change || meta ? /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
-          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null,
-          change || meta ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-            change ? /* @__PURE__ */ jsxs("div", { className: changeVariants({ trend }), children: [
-              /* @__PURE__ */ jsx(TrendIcon, { trend }),
-              /* @__PURE__ */ jsx("span", { children: change })
-            ] }) : null,
-            meta ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: meta }) : null
-          ] }) : null
+        icon ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-muted/50 p-2 text-muted-foreground", children: icon }) : null
+      ] }),
+      description || change || meta ? /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+        description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        change || meta ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+          change ? /* @__PURE__ */ jsxs("div", { className: changeVariants({ trend }), children: [
+            /* @__PURE__ */ jsx(TrendIcon, { trend }),
+            /* @__PURE__ */ jsx("span", { children: change })
+          ] }) : null,
+          meta ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: meta }) : null
         ] }) : null
-      ]
-    }
-  )
+      ] }) : null
+    ]
+  }
 );
 StatCard.displayName = "StatCard";
 export {

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

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const STATE_LABEL = {
   complete: "Complete",
@@ -37,7 +34,10 @@ const ANCHOR_TRANSFORM = {
 const DEFAULT_LABELS = {
   region: "State"
 };
-const StateBadgeOverlay = forwardRef((props, ref) => {
+const StateBadgeOverlay = ({
+  ref,
+  ...props
+}) => {
   const {
     anchor = "top-right",
     className,
@@ -83,7 +83,7 @@ const StateBadgeOverlay = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 StateBadgeOverlay.displayName = "StateBadgeOverlay";
 export {
   StateBadgeOverlay

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
 import {
@@ -117,28 +116,27 @@ function StatusBoardCard({ item }) {
     ] })
   ] });
 }
-const StatusBoard = React.forwardRef(
-  ({
-    as: Heading = "h2",
-    className,
-    columns = 3,
-    description,
-    items,
-    title = "Status board",
-    ...props
-  }, ref) => {
-    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(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 })
+const StatusBoard = ({
+  as: Heading = "h2",
+  className,
+  columns = 3,
+  description,
+  items,
+  ref,
+  title = "Status board",
+  ...props
+}) => {
+  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(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("div", { className: cn("grid gap-4", getColumnsClassName(columns)), children: items.map((item) => /* @__PURE__ */ jsx(StatusBoardCard, { item }, item.label)) })
-    ] });
-  }
-);
+      /* @__PURE__ */ jsx(StatusBoardSummary, { items })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", getColumnsClassName(columns)), children: items.map((item) => /* @__PURE__ */ jsx(StatusBoardCard, { item }, item.label)) })
+  ] });
+};
 StatusBoard.displayName = "StatusBoard";
 export {
   StatusBoard