@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/password-input/password-input.js

@@ -3,42 +3,41 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/utils";
-const PasswordInput = React.forwardRef(
-  ({
-    className,
-    hideLabel = "Hide password",
-    showLabel = "Show password",
-    ...props
-  }, reference) => {
-    const [visible, setVisible] = React.useState(false);
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          className: cn(
-            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            className
-          ),
-          ref: reference,
-          type: visible ? "text" : "password",
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-label": visible ? hideLabel : showLabel,
-          className: "absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground",
-          onClick: () => {
-            setVisible((previous) => !previous);
-          },
-          type: "button",
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
-        }
-      )
-    ] });
-  }
-);
+const PasswordInput = ({
+  className,
+  hideLabel = "Hide password",
+  ref: reference,
+  showLabel = "Show password",
+  ...props
+}) => {
+  const [visible, setVisible] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref: reference,
+        type: visible ? "text" : "password",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": visible ? hideLabel : showLabel,
+        className: "absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground",
+        onClick: () => {
+          setVisible((previous) => !previous);
+        },
+        type: "button",
+        children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+      }
+    )
+  ] });
+};
 PasswordInput.displayName = "PasswordInput";
 export {
   PasswordInput

package/dist/components/phone-input/index.js

@@ -0,0 +1,6 @@
+import {
+  PhoneInput
+} from "./phone-input";
+export {
+  PhoneInput
+};

package/dist/components/phone-input/phone-input.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const defaultCountries = [
+  { code: "US", dialCode: "+1", label: "United States" },
+  { code: "GB", dialCode: "+44", label: "United Kingdom" },
+  { code: "CA", dialCode: "+1", label: "Canada" },
+  { code: "AU", dialCode: "+61", label: "Australia" },
+  { code: "DE", dialCode: "+49", label: "Germany" },
+  { code: "FR", dialCode: "+33", label: "France" },
+  { code: "IN", dialCode: "+91", label: "India" },
+  { code: "JP", dialCode: "+81", label: "Japan" }
+];
+const PhoneInput = ({
+  className,
+  countries = defaultCountries,
+  defaultCountry,
+  onCountryChange,
+  ref,
+  ...props
+}) => {
+  const [country, setCountry] = React.useState(
+    defaultCountry ?? countries[0]?.code ?? ""
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": "Country dialing code",
+            className: "h-full rounded-l-md border-0 border-r border-input bg-transparent py-2 pl-3 pr-2 text-sm focus-visible:outline-none disabled:cursor-not-allowed",
+            onChange: (event) => {
+              setCountry(event.target.value);
+              onCountryChange?.(event.target.value);
+            },
+            value: country,
+            children: countries.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.dialCode }, item.code))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            className: "h-full w-full flex-1 rounded-r-md bg-transparent px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+            ref,
+            type: "tel"
+          }
+        )
+      ]
+    }
+  );
+};
+PhoneInput.displayName = "PhoneInput";
+export {
+  PhoneInput
+};

package/dist/components/pie-chart/index.js

@@ -0,0 +1,4 @@
+import { PieChart } from "./pie-chart";
+export {
+  PieChart
+};

package/dist/components/pie-chart/pie-chart.js

@@ -0,0 +1,130 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const DEFAULT_SIZE = 200;
+const TAU = Math.PI * 2;
+function buildSlices(data) {
+  const positive = data.filter((point) => point.value > 0);
+  const total = positive.reduce((sum, point) => sum + point.value, 0);
+  if (total <= 0) return [];
+  return positive.reduce(
+    (accumulator, point) => {
+      const start = accumulator.cursor;
+      const end = start + point.value / total * TAU;
+      accumulator.slices.push({
+        color: point.color,
+        end,
+        label: point.label,
+        start,
+        value: point.value
+      });
+      accumulator.cursor = end;
+      return accumulator;
+    },
+    { cursor: 0, slices: [] }
+  ).slices;
+}
+function polar(center, radius, angle) {
+  return {
+    x: center.x + radius * Math.sin(angle),
+    y: center.y - radius * Math.cos(angle)
+  };
+}
+function slicePath(geom, slice) {
+  const { center, inner, outer } = geom;
+  const largeArc = slice.end - slice.start > Math.PI ? 1 : 0;
+  const o0 = polar(center, outer, slice.start);
+  const o1 = polar(center, outer, slice.end);
+  if (inner <= 0) {
+    return `M ${center.x} ${center.y} L ${o0.x} ${o0.y} A ${outer} ${outer} 0 ${largeArc} 1 ${o1.x} ${o1.y} Z`;
+  }
+  const innerEnd = polar(center, inner, slice.end);
+  const innerStart = polar(center, inner, slice.start);
+  return `M ${o0.x} ${o0.y} A ${outer} ${outer} 0 ${largeArc} 1 ${o1.x} ${o1.y} L ${innerEnd.x} ${innerEnd.y} A ${inner} ${inner} 0 ${largeArc} 0 ${innerStart.x} ${innerStart.y} Z`;
+}
+function sliceOpacity(index, count) {
+  if (count <= 1) return 1;
+  return 1 - index / count * 0.65;
+}
+function PieSlice({
+  fill,
+  fillOpacity,
+  fullCircle,
+  geom,
+  slice
+}) {
+  const title = `${slice.label}: ${slice.value.toLocaleString()}`;
+  if (fullCircle) {
+    const isDonut = geom.inner > 0;
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: geom.center.x,
+        cy: geom.center.y,
+        fill,
+        fillOpacity,
+        r: isDonut ? (geom.outer + geom.inner) / 2 : geom.outer,
+        stroke: isDonut ? fill : "none",
+        strokeWidth: isDonut ? geom.outer - geom.inner : 0,
+        children: /* @__PURE__ */ jsx("title", { children: title })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("path", { d: slicePath(geom, slice), fill, fillOpacity, children: /* @__PURE__ */ jsx("title", { children: title }) });
+}
+const PieChart = ({
+  className,
+  color = "currentColor",
+  colors,
+  data,
+  innerRadius = 0,
+  ref,
+  size = DEFAULT_SIZE,
+  ...props
+}) => {
+  const slices = buildSlices(data);
+  if (slices.length === 0) return null;
+  const outer = size / 2 - 1;
+  const geom = {
+    center: { x: size / 2, y: size / 2 },
+    inner: Math.max(0, Math.min(innerRadius, 0.95)) * outer,
+    outer
+  };
+  const fullCircle = slices.length === 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-background/40 p-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-label": "Pie chart",
+          className: "h-full w-full",
+          height: size,
+          role: "img",
+          viewBox: `0 0 ${size} ${size}`,
+          width: size,
+          children: slices.map((slice, index) => /* @__PURE__ */ jsx(
+            PieSlice,
+            {
+              fill: colors?.[index] ?? slice.color ?? color,
+              fillOpacity: colors || slice.color ? 1 : sliceOpacity(index, slices.length),
+              fullCircle,
+              geom,
+              slice
+            },
+            `${slice.label}-${index}`
+          ))
+        }
+      )
+    }
+  );
+};
+PieChart.displayName = "PieChart";
+export {
+  PieChart
+};

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { badgeVariants } from "../badge/badge";
 function getPlanLabel(tier) {
@@ -32,29 +31,34 @@ function getPlanClasses(tier, state) {
       return "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
   }
 }
-const PlanBadge = React.forwardRef(
-  ({ className, label, state = "current", tier, ...props }, reference) => {
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          badgeVariants({ variant: "outline" }),
-          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
-          getPlanClasses(tier, state),
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
-          /* @__PURE__ */ jsx("span", { children: label ?? getPlanLabel(tier) }),
-          state === "trial" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Trial" }) : null,
-          state === "legacy" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Legacy" }) : null
-        ]
-      }
-    );
-  }
-);
+const PlanBadge = ({
+  className,
+  label,
+  ref: reference,
+  state = "current",
+  tier,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        badgeVariants({ variant: "outline" }),
+        "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
+        getPlanClasses(tier, state),
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
+        /* @__PURE__ */ jsx("span", { children: label ?? getPlanLabel(tier) }),
+        state === "trial" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Trial" }) : null,
+        state === "legacy" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Legacy" }) : null
+      ]
+    }
+  );
+};
 PlanBadge.displayName = "PlanBadge";
 export {
   PlanBadge

package/dist/components/playback-ghost/playback-ghost.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const KIND_GLYPH = {
   agent: "\u25C7",
@@ -32,51 +29,52 @@ const clamp01 = (v) => {
   }
   return v;
 };
-const PlaybackGhost = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      kind,
-      label,
-      labels,
-      opacity = 0.4,
-      size = 40,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const safeOpacity = clamp01(opacity);
-    const safeSize = size < 16 ? 16 : size;
-    const ariaLabel = kind ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}` : resolvedLabels.region;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": ariaLabel,
-        className: cn(
-          "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
-          className
-        ),
-        "data-playback-ghost": true,
-        "data-playback-kind": kind ?? "unknown",
-        ref,
-        role: "img",
-        style: {
-          left: x,
-          minHeight: safeSize,
-          minWidth: safeSize,
-          opacity: safeOpacity,
-          top: y
-        },
-        ...rest,
-        children: [
-          kind ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: KIND_GLYPH[kind] }) : null,
-          label ? /* @__PURE__ */ jsx("span", { className: "truncate", "data-playback-ghost-label": true, children: label }) : null
-        ]
-      }
-    );
-  }
-);
+const PlaybackGhost = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    kind,
+    label,
+    labels,
+    opacity = 0.4,
+    size = 40,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const safeOpacity = clamp01(opacity);
+  const safeSize = size < 16 ? 16 : size;
+  const ariaLabel = kind ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}` : resolvedLabels.region;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
+        className
+      ),
+      "data-playback-ghost": true,
+      "data-playback-kind": kind ?? "unknown",
+      ref,
+      role: "img",
+      style: {
+        left: x,
+        minHeight: safeSize,
+        minWidth: safeSize,
+        opacity: safeOpacity,
+        top: y
+      },
+      ...rest,
+      children: [
+        kind ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: KIND_GLYPH[kind] }) : null,
+        label ? /* @__PURE__ */ jsx("span", { className: "truncate", "data-playback-ghost-label": true, children: label }) : null
+      ]
+    }
+  );
+};
 PlaybackGhost.displayName = "PlaybackGhost";
 export {
   PlaybackGhost

package/dist/components/policy-delivery-panel/policy-delivery-panel.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const STATUS_LABEL = {
   advisory: "Advisory",
@@ -65,7 +62,10 @@ const Row = (props) => {
     }
   );
 };
-const PolicyDeliveryPanel = forwardRef((props, ref) => {
+const PolicyDeliveryPanel = ({
+  ref,
+  ...props
+}) => {
   const { className, labels, policies, title = "Policies", ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return /* @__PURE__ */ jsxs(
@@ -92,7 +92,7 @@ const PolicyDeliveryPanel = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 PolicyDeliveryPanel.displayName = "PolicyDeliveryPanel";
 export {
   PolicyDeliveryPanel

package/dist/components/popover/popover.js

@@ -1,12 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../../lib/utils";
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverContent = forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const PopoverContent = ({
+  align = "center",
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     align,
@@ -18,7 +23,7 @@ const PopoverContent = forwardRef(({ align = "center", className, sideOffset = 4
     sideOffset,
     ...props
   }
-) }));
+) });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export {
   Popover,

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

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const STATUS_DOT = {
   active: "bg-emerald-500",
@@ -42,44 +39,45 @@ const Avatar = (props) => {
     }
   );
 };
-const PresenceStack = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      max = 5,
-      onOverflowActivate,
-      users,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const visible = max >= users.length ? users : users.slice(0, max);
-    const hidden = users.length - visible.length;
-    const handleOverflow = () => {
-      onOverflowActivate?.();
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn("inline-flex items-center pl-2", className),
-        "data-presence-stack": true,
-        ref,
-        role: "group",
-        ...rest,
-        children: [
-          visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
-          hidden > 0 ? renderOverflow({
-            count: hidden,
-            handleClick: handleOverflow,
-            handlerProvided: Boolean(onOverflowActivate),
-            labels: resolvedLabels
-          }) : null
-        ]
-      }
-    );
-  }
-);
+const PresenceStack = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    labels,
+    max = 5,
+    onOverflowActivate,
+    users,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = max >= users.length ? users : users.slice(0, max);
+  const hidden = users.length - visible.length;
+  const handleOverflow = () => {
+    onOverflowActivate?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn("inline-flex items-center pl-2", className),
+      "data-presence-stack": true,
+      ref,
+      role: "group",
+      ...rest,
+      children: [
+        visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
+        hidden > 0 ? renderOverflow({
+          count: hidden,
+          handleClick: handleOverflow,
+          handlerProvided: Boolean(onOverflowActivate),
+          labels: resolvedLabels
+        }) : null
+      ]
+    }
+  );
+};
 PresenceStack.displayName = "PresenceStack";
 const renderOverflow = (input) => {
   const text = `+${input.count}`;

package/dist/components/presence-sync-indicator/presence-sync-indicator.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 = {
   error: "Sync error",
@@ -28,7 +25,10 @@ const STATE_TEXT = {
 const DEFAULT_LABELS = {
   region: "Presence sync"
 };
-const PresenceSyncIndicator = forwardRef((props, ref) => {
+const PresenceSyncIndicator = ({
+  ref,
+  ...props
+}) => {
   const { className, label, labels, state, status, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const text = label ?? STATE_LABEL[state];
@@ -66,7 +66,7 @@ const PresenceSyncIndicator = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
 export {
   PresenceSyncIndicator