@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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

@@ -0,0 +1,132 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+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 = React.forwardRef(
+  ({
+    className,
+    color = "currentColor",
+    colors,
+    data,
+    innerRadius = 0,
+    size = DEFAULT_SIZE,
+    ...props
+  }, ref) => {
+    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

@@ -46,13 +46,7 @@ const PlanBadge = React.forwardRef(
         ref: reference,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "h-1.5 w-1.5 rounded-full bg-current"
-            }
-          ),
+          /* @__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

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

@@ -0,0 +1,6 @@
+import {
+  PlaybackGhost
+} from "./playback-ghost";
+export {
+  PlaybackGhost
+};

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

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const KIND_GLYPH = {
+  agent: "\u25C7",
+  artifact: "\u25CC",
+  input: "\u2198",
+  output: "\u2197",
+  run: "\u25B6",
+  task: "\u25A2"
+};
+const KIND_LABEL = {
+  agent: "Agent",
+  artifact: "Artifact",
+  input: "Input",
+  output: "Output",
+  run: "Run",
+  task: "Task"
+};
+const DEFAULT_LABELS = {
+  region: "Playback ghost"
+};
+const clamp01 = (v) => {
+  if (v < 0) {
+    return 0;
+  }
+  if (v > 1) {
+    return 1;
+  }
+  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
+        ]
+      }
+    );
+  }
+);
+PlaybackGhost.displayName = "PlaybackGhost";
+export {
+  PlaybackGhost
+};

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

@@ -0,0 +1,6 @@
+import {
+  PolicyDeliveryPanel
+} from "./policy-delivery-panel";
+export {
+  PolicyDeliveryPanel
+};

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

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATUS_LABEL = {
+  advisory: "Advisory",
+  disabled: "Disabled",
+  enforced: "Enforced"
+};
+const STATUS_TONE = {
+  advisory: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  disabled: "border-border bg-muted/40 text-muted-foreground",
+  enforced: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+};
+const DEFAULT_LABELS = {
+  empty: "No policies",
+  region: "Policy delivery"
+};
+const RowBody = (props) => {
+  const { policy } = props;
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-0.5 text-left", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-foreground", children: policy.name }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full border px-1.5 py-0.5 text-[10px] uppercase tracking-wide",
+            STATUS_TONE[policy.status]
+          ),
+          children: STATUS_LABEL[policy.status]
+        }
+      )
+    ] }),
+    policy.description ? /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: policy.description }) : null
+  ] });
+};
+const Row = (props) => {
+  const { policy } = props;
+  if (policy.onToggle) {
+    const handleTogglePolicy = () => {
+      policy.onToggle?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-policy-row": policy.id,
+        "data-policy-status": policy.status,
+        onClick: handleTogglePolicy,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { policy })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
+      "data-policy-row": policy.id,
+      "data-policy-status": policy.status,
+      children: /* @__PURE__ */ jsx(RowBody, { policy })
+    }
+  );
+};
+const PolicyDeliveryPanel = forwardRef((props, ref) => {
+  const { className, labels, policies, title = "Policies", ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-2 rounded-lg border bg-background p-3 text-foreground",
+        className
+      ),
+      "data-policy-delivery-panel": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }) }),
+        policies.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-xs text-muted-foreground",
+            "data-policy-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: policies.map((policy) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, { policy }) }, policy.id)) })
+      ]
+    }
+  );
+});
+PolicyDeliveryPanel.displayName = "PolicyDeliveryPanel";
+export {
+  PolicyDeliveryPanel
+};

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

@@ -0,0 +1,6 @@
+import {
+  PresenceStack
+} from "./presence-stack";
+export {
+  PresenceStack
+};

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

@@ -0,0 +1,108 @@
+"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",
+  away: "bg-amber-500",
+  idle: "bg-muted-foreground",
+  offline: "bg-muted-foreground/40"
+};
+const DEFAULT_LABELS = {
+  overflowSuffix: "more",
+  region: "Live presence"
+};
+const Avatar = (props) => {
+  const { user } = props;
+  const status = user.status ?? "active";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative -ml-2 inline-flex size-7 items-center justify-center rounded-full border-2 border-background text-[11px] font-semibold text-white shadow-sm first:ml-0",
+      "data-presence-stack-status": status,
+      "data-presence-stack-user": user.id,
+      style: { backgroundColor: user.color ?? "var(--foreground)" },
+      title: user.name,
+      children: [
+        user.initial,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute -bottom-0.5 -right-0.5 size-2 rounded-full border border-background",
+              STATUS_DOT[status]
+            ),
+            "data-presence-stack-dot": true
+          }
+        )
+      ]
+    }
+  );
+};
+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
+        ]
+      }
+    );
+  }
+);
+PresenceStack.displayName = "PresenceStack";
+const renderOverflow = (input) => {
+  const text = `+${input.count}`;
+  const aria = `${input.count} ${input.labels.overflowSuffix}`;
+  const className = "relative -ml-2 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-background bg-muted px-1.5 text-[10px] font-semibold text-muted-foreground shadow-sm";
+  if (input.handlerProvided) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": aria,
+        className: cn(
+          className,
+          "transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-presence-stack-overflow": true,
+        onClick: input.handleClick,
+        type: "button",
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": aria, className, "data-presence-stack-overflow": true, children: text });
+};
+export {
+  PresenceStack
+};

package/dist/components/presence-sync-indicator/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+export {
+  PresenceSyncIndicator
+};

package/dist/components/presence-sync-indicator/presence-sync-indicator.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  error: "Sync error",
+  live: "Live",
+  offline: "Offline",
+  reconnecting: "Reconnecting",
+  syncing: "Syncing"
+};
+const STATE_DOT = {
+  error: "bg-red-500",
+  live: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  reconnecting: "bg-amber-500 animate-pulse",
+  syncing: "bg-blue-500 animate-pulse"
+};
+const STATE_TEXT = {
+  error: "text-red-700 dark:text-red-300",
+  live: "text-emerald-700 dark:text-emerald-300",
+  offline: "text-muted-foreground",
+  reconnecting: "text-amber-700 dark:text-amber-300",
+  syncing: "text-blue-700 dark:text-blue-300"
+};
+const DEFAULT_LABELS = {
+  region: "Presence sync"
+};
+const PresenceSyncIndicator = forwardRef((props, ref) => {
+  const { className, label, labels, state, status, ...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(
+        "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-1 text-[11px] shadow-sm",
+        className
+      ),
+      "data-presence-state": state,
+      "data-presence-sync": true,
+      ref,
+      role: "status",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-1.5 rounded-full", STATE_DOT[state]),
+            "data-presence-sync-dot": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("font-medium", STATE_TEXT[state]), children: text }),
+        status ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[10px] text-muted-foreground",
+            "data-presence-sync-status": true,
+            children: status
+          }
+        ) : null
+      ]
+    }
+  );
+});
+PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
+export {
+  PresenceSyncIndicator
+};

package/dist/components/pricing-table/index.js

@@ -0,0 +1,8 @@
+import {
+  PricingPlan,
+  PricingTable
+} from "./pricing-table";
+export {
+  PricingPlan,
+  PricingTable
+};