@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/components/parallel-timeline/parallel-timeline.js

@@ -0,0 +1,251 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_TICK_COUNT = 8;
+const COLOR_CLASSES = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    marker: "border-amber-500 bg-amber-500"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+    marker: "border-blue-500 bg-blue-500"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    marker: "border-emerald-500 bg-emerald-500"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground",
+    marker: "border-muted-foreground bg-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300",
+    marker: "border-purple-500 bg-purple-500"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300",
+    marker: "border-red-500 bg-red-500"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
+    marker: "border-rose-500 bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  region: "Parallel timeline"
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function yearToPercent(year, start, end) {
+  const span = end - start;
+  if (span <= 0) return 0;
+  return clamp((year - start) / span * 100, 0, 100);
+}
+function buildTicks(start, end, count) {
+  const safeCount = Math.max(2, count);
+  const span = end - start;
+  if (span <= 0) return [];
+  const step = span / (safeCount - 1);
+  return Array.from({ length: safeCount }).map((_, index) => {
+    const year = Math.round(start + step * index);
+    return {
+      label: formatYear(year),
+      offset: yearToPercent(year, start, end)
+    };
+  });
+}
+function Axis({ ticks }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative h-7 border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+      children: ticks.map((tick) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute top-1 -translate-x-1/2",
+          style: { left: `${tick.offset.toString()}%` },
+          children: tick.label
+        },
+        tick.label
+      ))
+    }
+  );
+}
+function EraBands({ endYear, eras, startYear }) {
+  if (eras.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: eras.map((era) => {
+    const left = yearToPercent(era.start, startYear, endYear);
+    const right = yearToPercent(era.end, startYear, endYear);
+    const width = Math.max(0, right - left);
+    if (width <= 0) return null;
+    const palette = COLOR_CLASSES[era.color ?? "neutral"];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-y-0", palette.chip),
+        "data-era-id": era.id,
+        style: {
+          left: `${left.toString()}%`,
+          width: `${width.toString()}%`
+        }
+      },
+      era.id
+    );
+  }) });
+}
+function EventMarker({
+  color,
+  endYear,
+  event,
+  startYear
+}) {
+  if (event.year < startYear || event.year > endYear) return null;
+  const left = yearToPercent(event.year, startYear, endYear);
+  const palette = COLOR_CLASSES[color];
+  const titleText = typeof event.title === "string" ? event.title : "";
+  const ariaLabel = titleText ? `${titleText}, ${formatYear(event.year)}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: "absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+      "data-event-id": event.id,
+      "data-event-year": event.year,
+      style: { left: `${left.toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-3 rounded-full border-2 ring-2 ring-background",
+              palette.marker
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-4 w-40 -translate-x-1/2 text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-foreground", children: event.title }),
+          /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-muted-foreground", children: [
+            formatYear(event.year),
+            event.meta ? /* @__PURE__ */ jsxs("span", { children: [
+              " \xB7 ",
+              event.meta
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TrackRow({ endYear, startYear, track }) {
+  const color = track.color ?? "neutral";
+  const palette = COLOR_CLASSES[color];
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch gap-3 border-t border-border first:border-t-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-32 shrink-0 flex-col gap-1 border-r border-border bg-muted/20 p-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("h-1 w-8 rounded-full", palette.accent)
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight text-foreground", children: track.name }),
+      track.region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: track.region }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": typeof track.name === "string" ? track.name : void 0,
+        className: "relative h-16 min-w-0 flex-1",
+        "data-track-id": track.id,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border" }),
+          track.events.map((event) => /* @__PURE__ */ jsx(
+            EventMarker,
+            {
+              color,
+              endYear,
+              event,
+              startYear
+            },
+            event.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+const ParallelTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      endYear,
+      eras = [],
+      labels,
+      startYear,
+      tickCount = DEFAULT_TICK_COUNT,
+      tracks,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const ticks = useMemo(
+      () => buildTicks(startYear, endYear, tickCount),
+      [endYear, startYear, tickCount]
+    );
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-32 shrink-0" }),
+            /* @__PURE__ */ jsx(Axis, { ticks })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
+            tracks.map((track) => /* @__PURE__ */ jsx(
+              TrackRow,
+              {
+                endYear,
+                startYear,
+                track
+              },
+              track.id
+            ))
+          ] })
+        ]
+      }
+    );
+  }
+);
+ParallelTimeline.displayName = "ParallelTimeline";
+export {
+  ParallelTimeline
+};

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

@@ -33,7 +33,7 @@ const PasswordInput = React.forwardRef(
             setVisible((previous) => !previous);
           },
           type: "button",
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
         }
       )
     ] });

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
+};