@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const statusIndicatorVariants = cva(
@@ -128,45 +127,44 @@ const dotVariants = cva("rounded-full", {
     }
   }
 });
-const StatusIndicator = React.forwardRef(
-  ({
-    children,
-    className,
-    label,
-    pulse = false,
-    showDot = true,
-    size,
-    tone,
-    variant,
-    ...props
-  }, reference) => {
-    const content = children ?? label;
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          statusIndicatorVariants({ size, tone, variant }),
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          showDot ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                dotVariants({ size, tone }),
-                pulse ? "animate-pulse" : void 0
-              )
-            }
-          ) : null,
-          content
-        ]
-      }
-    );
-  }
-);
+const StatusIndicator = ({
+  children,
+  className,
+  label,
+  pulse = false,
+  ref: reference,
+  showDot = true,
+  size,
+  tone,
+  variant,
+  ...props
+}) => {
+  const content = children ?? label;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        statusIndicatorVariants({ size, tone, variant }),
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        showDot ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              dotVariants({ size, tone }),
+              pulse ? "animate-pulse" : void 0
+            )
+          }
+        ) : null,
+        content
+      ]
+    }
+  );
+};
 StatusIndicator.displayName = "StatusIndicator";
 export {
   StatusIndicator,

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

@@ -1,8 +1,5 @@
 "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",
@@ -19,64 +16,65 @@ const ANCHOR_OFFSET = {
 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
+const StickyMetric = ({
+  ref,
+  ...props
+}) => {
+  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
+          }
         ),
-        "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
-        ]
-      }
-    );
-  }
-);
+        /* @__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/story-map.js

@@ -3,10 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Children,
   createContext,
-  forwardRef,
   isValidElement,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -31,7 +30,7 @@ const DEFAULT_LABELS = {
 };
 const StoryMapContext = createContext(null);
 function useStoryMapContext() {
-  const ctx = useContext(StoryMapContext);
+  const ctx = use(StoryMapContext);
   if (!ctx) {
     throw new Error("StoryMap subcomponent used outside its root.");
   }
@@ -64,59 +63,60 @@ function ChapterHeader({ subtitle, title }) {
     subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
   ] });
 }
-const StoryMapChapter = forwardRef(
-  (props, forwardedRef) => {
-    const {
-      center,
-      children,
-      className,
-      color = "red",
-      id,
-      media,
-      subtitle,
-      title,
-      zoom = 2,
-      ...rest
-    } = props;
-    const generatedId = useId();
-    const chapterId = id ?? generatedId;
-    const localRef = useRef(null);
-    const { registerChapter, registerMarker, unregisterMarker } = useStoryMapContext();
-    useEffect(() => {
-      registerMarker({ center, color, id: chapterId, zoom });
-      return () => {
-        unregisterMarker(chapterId);
-      };
-    }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
-    const refCallback = useCallback(
-      (node) => {
-        localRef.current = node;
-        registerChapter(chapterId, node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [chapterId, forwardedRef, registerChapter]
-    );
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: cn(
-          "flex min-h-screen flex-col justify-center gap-3 py-12",
-          className
-        ),
-        "data-chapter-id": chapterId,
-        id: chapterId,
-        ref: refCallback,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(ChapterHeader, { subtitle, title }),
-          media ? /* @__PURE__ */ jsx(ChapterMedia, { media }) : null,
-          children ? /* @__PURE__ */ jsx("div", { className: "space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground", children }) : null
-        ]
-      }
-    );
-  }
-);
+const StoryMapChapter = ({
+  ref: forwardedRef,
+  ...props
+}) => {
+  const {
+    center,
+    children,
+    className,
+    color = "red",
+    id,
+    media,
+    subtitle,
+    title,
+    zoom = 2,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const chapterId = id ?? generatedId;
+  const localRef = useRef(null);
+  const { registerChapter, registerMarker, unregisterMarker } = useStoryMapContext();
+  useEffect(() => {
+    registerMarker({ center, color, id: chapterId, zoom });
+    return () => {
+      unregisterMarker(chapterId);
+    };
+  }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
+  const refCallback = useCallback(
+    (node) => {
+      localRef.current = node;
+      registerChapter(chapterId, node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [chapterId, forwardedRef, registerChapter]
+  );
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "flex min-h-screen flex-col justify-center gap-3 py-12",
+        className
+      ),
+      "data-chapter-id": chapterId,
+      id: chapterId,
+      ref: refCallback,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ChapterHeader, { subtitle, title }),
+        media ? /* @__PURE__ */ jsx(ChapterMedia, { media }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground", children }) : null
+      ]
+    }
+  );
+};
 StoryMapChapter.displayName = "StoryMapChapter";
 function Stage({
   activeId,
@@ -285,7 +285,10 @@ function useChapterRegistry() {
     unregisterMarker
   };
 }
-const Shell = forwardRef(function Shell2(props, ref) {
+const Shell = function Shell2({
+  ref,
+  ...props
+}) {
   const {
     activeId,
     backdrop,
@@ -360,8 +363,11 @@ const Shell = forwardRef(function Shell2(props, ref) {
       ]
     }
   );
-});
-const StoryMap = forwardRef((props, ref) => {
+};
+const StoryMap = ({
+  ref,
+  ...props
+}) => {
   const { backdrop, backdropAlt, children, className, labels, ...rest } = props;
   const titleId = useId();
   const resolvedLabels = useMemo(
@@ -406,7 +412,7 @@ const StoryMap = forwardRef((props, ref) => {
       children
     }
   ) });
-});
+};
 StoryMap.displayName = "StoryMap";
 export {
   StoryMap,

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 import {
@@ -84,77 +83,76 @@ function SubscriptionActions({
     primaryActionLabel ? /* @__PURE__ */ jsx(Button, { className: "w-full sm:w-auto", children: primaryActionLabel }) : null
   ] });
 }
-const SubscriptionCard = React.forwardRef(
-  ({
-    className,
-    note,
-    plan,
-    priceLabel,
-    primaryActionLabel,
-    renewalLabel,
-    seatsLabel,
-    secondaryActionLabel,
-    status,
-    usageLabel,
-    ...props
-  }, reference) => {
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        className: cn(
-          "w-full max-w-md border-border/70 bg-card shadow-sm",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-4 pb-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Subscription" }),
-                /* @__PURE__ */ jsx(CardDescription, { children: "Billing overview for the current workspace plan." })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
-                    getStatusClasses(status)
-                  ),
-                  children: getStatusLabel(status)
-                }
-              )
+const SubscriptionCard = ({
+  className,
+  note,
+  plan,
+  priceLabel,
+  primaryActionLabel,
+  ref: reference,
+  renewalLabel,
+  seatsLabel,
+  secondaryActionLabel,
+  status,
+  usageLabel,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "w-full max-w-md border-border/70 bg-card shadow-sm",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-4 pb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Subscription" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Billing overview for the current workspace plan." })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Current plan" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: renewalLabel })
-              ] }),
-              /* @__PURE__ */ jsx(PlanBadge, { state: getPlanState(status), tier: plan })
-            ] })
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
+                  getStatusClasses(status)
+                ),
+                children: getStatusLabel(status)
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            SubscriptionDetails,
-            {
-              note,
-              priceLabel,
-              renewalLabel,
-              seatsLabel,
-              usageLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SubscriptionActions,
-            {
-              primaryActionLabel,
-              secondaryActionLabel
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Current plan" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: renewalLabel })
+            ] }),
+            /* @__PURE__ */ jsx(PlanBadge, { state: getPlanState(status), tier: plan })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          SubscriptionDetails,
+          {
+            note,
+            priceLabel,
+            renewalLabel,
+            seatsLabel,
+            usageLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SubscriptionActions,
+          {
+            primaryActionLabel,
+            secondaryActionLabel
+          }
+        )
+      ]
+    }
+  );
+};
 SubscriptionCard.displayName = "SubscriptionCard";
 export {
   SubscriptionCard

package/dist/components/switch/switch.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../lib/utils";
-const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Switch = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -21,7 +24,7 @@ const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
       }
     )
   }
-));
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export {
   Switch