@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/menubar/menubar.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -9,7 +8,11 @@ const MenubarGroup = MenubarPrimitive.Group;
 const MenubarPortal = MenubarPrimitive.Portal;
 const MenubarSub = MenubarPrimitive.Sub;
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-const Menubar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Menubar = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Root,
   {
     className: cn(
@@ -19,9 +22,13 @@ const Menubar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx
     ref,
     ...props
   }
-));
+);
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-const MenubarTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const MenubarTrigger = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Trigger,
   {
     className: cn(
@@ -31,9 +38,15 @@ const MenubarTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     ...props
   }
-));
+);
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-const MenubarSubTrigger = forwardRef(({ children, className, inset, ...props }, ref) => /* @__PURE__ */ jsxs(
+const MenubarSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.SubTrigger,
   {
     className: cn(
@@ -48,9 +61,13 @@ const MenubarSubTrigger = forwardRef(({ children, className, inset, ...props },
       /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
-));
+);
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-const MenubarSubContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const MenubarSubContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   MenubarPrimitive.SubContent,
   {
     className: cn(
@@ -60,26 +77,36 @@ const MenubarSubContent = forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     ...props
   }
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-const MenubarContent = forwardRef(
-  ({ align = "start", alignOffset = -4, className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    MenubarPrimitive.Content,
-    {
-      align,
-      alignOffset,
-      className: cn(
-        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      ),
-      ref,
-      sideOffset,
-      ...props
-    }
-  ) })
 );
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+const MenubarContent = ({
+  align = "start",
+  alignOffset = -4,
+  className,
+  ref,
+  sideOffset = 8,
+  ...props
+}) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  MenubarPrimitive.Content,
+  {
+    align,
+    alignOffset,
+    className: cn(
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) });
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-const MenubarItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+const MenubarItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Item,
   {
     className: cn(
@@ -90,9 +117,15 @@ const MenubarItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PU
     ref,
     ...props
   }
-));
+);
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-const MenubarCheckboxItem = forwardRef(({ checked, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const MenubarCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.CheckboxItem,
   {
     checked,
@@ -107,9 +140,14 @@ const MenubarCheckboxItem = forwardRef(({ checked, children, className, ...props
       children
     ]
   }
-));
+);
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-const MenubarRadioItem = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const MenubarRadioItem = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.RadioItem,
   {
     className: cn(
@@ -123,9 +161,14 @@ const MenubarRadioItem = forwardRef(({ children, className, ...props }, ref) =>
       children
     ]
   }
-));
+);
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-const MenubarLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+const MenubarLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Label,
   {
     className: cn(
@@ -136,16 +179,20 @@ const MenubarLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__P
     ref,
     ...props
   }
-));
+);
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-const MenubarSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const MenubarSeparator = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Separator,
   {
     className: cn("-m-1 h-px bg-muted", className),
     ref,
     ...props
   }
-));
+);
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 const MenubarShortcut = ({
   className,

package/dist/components/meteors/index.js

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

package/dist/components/meteors/meteors.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function createMeteors(count) {
+  return Array.from({ length: count }, () => ({
+    delay: Math.random(),
+    duration: 2 + Math.random() * 4,
+    left: Math.random() * 100,
+    top: -(Math.random() * 10)
+  }));
+}
+function meteorStyle(meteor) {
+  return {
+    "--vllnt-meteor-angle": "215deg",
+    animation: `vllnt-meteor ${meteor.duration}s linear infinite`,
+    animationDelay: `${meteor.delay}s`,
+    left: `${meteor.left}%`,
+    top: `${meteor.top}%`
+  };
+}
+const Meteors = ({
+  className,
+  count = 12,
+  ref,
+  ...props
+}) => {
+  const [meteors] = React.useState(() => createMeteors(count));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 overflow-hidden",
+        className
+      ),
+      ref,
+      ...props,
+      children: meteors.map((meteor, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute h-0.5 w-0.5 rounded-full bg-muted-foreground motion-reduce:animate-none",
+          style: meteorStyle(meteor),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-0 top-1/2 h-px w-12 -translate-y-1/2",
+              style: {
+                background: "linear-gradient(90deg, oklch(var(--muted-foreground)), transparent)"
+              }
+            }
+          )
+        },
+        index
+      ))
+    }
+  );
+};
+Meteors.displayName = "Meteors";
+export {
+  Meteors
+};

package/dist/components/meter/index.js

@@ -0,0 +1,5 @@
+import { Meter, meterFillVariants } from "./meter";
+export {
+  Meter,
+  meterFillVariants
+};

package/dist/components/meter/meter.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const meterFillVariants = cva("h-full transition-all", {
+  defaultVariants: {
+    variant: "default"
+  },
+  variants: {
+    variant: {
+      default: "bg-primary",
+      destructive: "bg-destructive",
+      secondary: "bg-secondary-foreground"
+    }
+  }
+});
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+const Meter = ({
+  className,
+  label,
+  max = 100,
+  min = 0,
+  ref,
+  segments,
+  value,
+  valueText,
+  variant,
+  ...props
+}) => {
+  const safeMax = max > min ? max : min + 1;
+  const current = clamp(value, min, safeMax);
+  const ratio = (current - min) / (safeMax - min);
+  const percentage = ratio * 100;
+  const segmentCount = segments !== void 0 && segments > 0 ? segments : 0;
+  const filledSegments = Math.round(ratio * segmentCount);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      "aria-valuemax": safeMax,
+      "aria-valuemin": min,
+      "aria-valuenow": current,
+      "aria-valuetext": valueText,
+      className: cn(
+        "h-2 w-full overflow-hidden rounded-full bg-muted",
+        segmentCount > 0 && "flex gap-0.5 bg-transparent",
+        className
+      ),
+      ref,
+      role: "meter",
+      ...props,
+      children: segmentCount > 0 ? Array.from({ length: segmentCount }, (_cell, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-full flex-1 rounded-full",
+            index < filledSegments ? meterFillVariants({ variant }) : "bg-muted"
+          )
+        },
+        `meter-segment-${index}`
+      )) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: meterFillVariants({ variant }),
+          style: { width: `${percentage}%` }
+        }
+      )
+    }
+  );
+};
+Meter.displayName = "Meter";
+export {
+  Meter,
+  meterFillVariants
+};

package/dist/components/metric-cluster/metric-cluster.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",
@@ -44,52 +41,53 @@ const Row = (props) => {
     }
   );
 };
-const MetricCluster = forwardRef(
-  (props, ref) => {
-    const {
-      anchor = "top-right",
-      className,
-      labels,
-      metrics,
-      title,
-      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 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
-          className
-        ),
-        "data-metric-cluster": true,
-        "data-metric-cluster-anchor": anchor,
-        ref,
-        role: "status",
-        style: {
-          left: x,
-          top: y,
-          transform: ANCHOR_TRANSFORM[anchor]
-        },
-        ...rest,
-        children: [
-          title ? /* @__PURE__ */ jsx(
-            "header",
-            {
-              className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-              "data-metric-cluster-title": true,
-              children: title
-            }
-          ) : null,
-          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: metrics.map((entry) => /* @__PURE__ */ jsx(Row, { entry }, entry.id)) })
-        ]
-      }
-    );
-  }
-);
+const MetricCluster = ({
+  ref,
+  ...props
+}) => {
+  const {
+    anchor = "top-right",
+    className,
+    labels,
+    metrics,
+    title,
+    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 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
+        className
+      ),
+      "data-metric-cluster": true,
+      "data-metric-cluster-anchor": anchor,
+      ref,
+      role: "status",
+      style: {
+        left: x,
+        top: y,
+        transform: ANCHOR_TRANSFORM[anchor]
+      },
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx(
+          "header",
+          {
+            className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+            "data-metric-cluster-title": true,
+            children: title
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: metrics.map((entry) => /* @__PURE__ */ jsx(Row, { entry }, entry.id)) })
+      ]
+    }
+  );
+};
 MetricCluster.displayName = "MetricCluster";
 export {
   MetricCluster

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

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
 import {
@@ -164,49 +163,48 @@ function GaugeLegend({ thresholds }) {
     `${threshold.label}-${threshold.value}`
   )) });
 }
-const MetricGauge = React.forwardRef(
-  ({
-    className,
-    description,
-    label,
-    max,
-    min = 0,
-    thresholds = DEFAULT_THRESHOLDS,
-    unit,
-    value,
-    ...props
-  }, ref) => {
-    const safeValue = clamp(value, min, max);
-    const percent = max === min ? 0 : (safeValue - min) / (max - min) * 100;
-    const endAngle = -90 + 180 * (percent / 100);
-    const activeThreshold = getActiveThreshold(percent, thresholds);
-    return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
-      /* @__PURE__ */ jsx(CardHeader, { className: "space-y-2 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: label }),
-          description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
-        ] }),
-        activeThreshold ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: activeThreshold.label }) : null
-      ] }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        activeThreshold ? /* @__PURE__ */ jsx(
-          GaugeDial,
-          {
-            activeThreshold,
-            endAngle,
-            label,
-            max,
-            min,
-            percent,
-            safeValue,
-            unit
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(GaugeLegend, { thresholds })
-      ] })
-    ] });
-  }
-);
+const MetricGauge = ({
+  className,
+  description,
+  label,
+  max,
+  min = 0,
+  ref,
+  thresholds = DEFAULT_THRESHOLDS,
+  unit,
+  value,
+  ...props
+}) => {
+  const safeValue = clamp(value, min, max);
+  const percent = max === min ? 0 : (safeValue - min) / (max - min) * 100;
+  const endAngle = -90 + 180 * (percent / 100);
+  const activeThreshold = getActiveThreshold(percent, thresholds);
+  return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "space-y-2 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: label }),
+        description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+      ] }),
+      activeThreshold ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: activeThreshold.label }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      activeThreshold ? /* @__PURE__ */ jsx(
+        GaugeDial,
+        {
+          activeThreshold,
+          endAngle,
+          label,
+          max,
+          min,
+          percent,
+          safeValue,
+          unit
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(GaugeLegend, { thresholds })
+    ] })
+  ] });
+};
 MetricGauge.displayName = "MetricGauge";
 export {
   MetricGauge