@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/transaction-list/transaction-list.js

@@ -0,0 +1,226 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+const CENTS_PER_UNIT = 100;
+const DEFAULT_LOCALE = "en-US";
+const DEFAULT_CURRENCY = "USD";
+const DEFAULT_LABELS = {
+  active: "Active",
+  canceled: "Canceled",
+  pastDue: "Past due",
+  renews: "Renews",
+  trialing: "Trial"
+};
+const SIGN_BY_TYPE = {
+  credit: "positive",
+  debit: "negative",
+  initial: "positive",
+  refund: "positive"
+};
+const AMOUNT_CLASS = {
+  negative: "text-destructive",
+  positive: "text-emerald-600 dark:text-emerald-400"
+};
+const STATUS_VARIANT = {
+  active: "default",
+  canceled: "secondary",
+  past_due: "destructive",
+  trialing: "outline"
+};
+const STATUS_LABEL_KEY = {
+  active: "active",
+  canceled: "canceled",
+  past_due: "pastDue",
+  trialing: "trialing"
+};
+const INTERVAL_LABEL = {
+  day: "day",
+  month: "mo",
+  week: "wk",
+  year: "yr"
+};
+function formatTransactionAmount(amountCents, options = {}) {
+  const { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE } = options;
+  return new Intl.NumberFormat(locale, {
+    currency,
+    style: "currency"
+  }).format(amountCents / CENTS_PER_UNIT);
+}
+function formatTransactionDate(timestamp, locale = DEFAULT_LOCALE) {
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }).format(new Date(timestamp));
+}
+const TransactionListBase = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      currency,
+      emptyMessage,
+      labels,
+      locale,
+      transactions,
+      ...rest
+    } = props;
+    const isEmpty = transactions.length === 0;
+    const hasPinned = Boolean(children);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          children,
+          isEmpty && !hasPinned && emptyMessage ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : null,
+          isEmpty ? null : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: transactions.map((transaction) => /* @__PURE__ */ jsx(
+            TransactionListItem,
+            {
+              currency,
+              labels,
+              locale,
+              transaction
+            },
+            transaction.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+TransactionListBase.displayName = "TransactionList";
+const TransactionListPinned = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ref, ...rest, children }));
+TransactionListPinned.displayName = "TransactionList.Pinned";
+function TransactionListItem({
+  currency,
+  locale,
+  transaction
+}) {
+  const sign = SIGN_BY_TYPE[transaction.type];
+  const formatted = formatTransactionAmount(transaction.amountCents, {
+    currency,
+    locale
+  });
+  const display = sign === "negative" ? `-${formatted}` : `+${formatted}`;
+  const ariaLabel = typeof transaction.description === "string" ? `${sign === "negative" ? "Debit" : "Credit"} ${display} for ${transaction.description}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-start justify-between gap-3 rounded-lg border border-border bg-muted/20 px-3 py-2",
+      "data-transaction-type": transaction.type,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: transaction.description }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            formatTransactionDate(transaction.createdAt, locale),
+            transaction.meta ? /* @__PURE__ */ jsxs("span", { children: [
+              " \xB7 ",
+              transaction.meta
+            ] }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-label": ariaLabel,
+            className: cn(
+              "shrink-0 font-mono text-sm font-semibold",
+              AMOUNT_CLASS[sign]
+            ),
+            children: display
+          }
+        )
+      ]
+    }
+  );
+}
+function SubscriptionMeta({
+  locale,
+  meta,
+  renewsAt,
+  renewsLabel
+}) {
+  if (renewsAt === void 0 && !meta) return null;
+  return /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+    renewsAt === void 0 ? null : `${renewsLabel} ${formatTransactionDate(renewsAt, locale)}`,
+    renewsAt !== void 0 && meta ? /* @__PURE__ */ jsxs("span", { children: [
+      " \xB7 ",
+      meta
+    ] }) : null,
+    renewsAt === void 0 && meta ? meta : null
+  ] });
+}
+const TransactionListSubscriptionRow = forwardRef((props, ref) => {
+  const {
+    amountCents,
+    className,
+    currency,
+    interval,
+    labels,
+    locale,
+    meta,
+    plan,
+    renewsAt,
+    status,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const formatted = formatTransactionAmount(amountCents, { currency, locale });
+  const intervalSuffix = INTERVAL_LABEL[interval];
+  const isActive = status === "active";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start justify-between gap-3 rounded-lg border px-3 py-2",
+        isActive ? "border-emerald-500/40 bg-emerald-500/5" : "border-border bg-muted/20",
+        className
+      ),
+      "data-status": status,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: plan }),
+            /* @__PURE__ */ jsx(Badge, { variant: STATUS_VARIANT[status], children: resolvedLabels[STATUS_LABEL_KEY[status]] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SubscriptionMeta,
+            {
+              locale,
+              meta,
+              renewsAt,
+              renewsLabel: resolvedLabels.renews
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-mono text-sm font-semibold text-foreground", children: [
+          formatted,
+          "/",
+          intervalSuffix
+        ] })
+      ]
+    }
+  );
+});
+TransactionListSubscriptionRow.displayName = "TransactionList.SubscriptionRow";
+const TransactionList = TransactionListBase;
+TransactionList.Pinned = TransactionListPinned;
+TransactionList.SubscriptionRow = TransactionListSubscriptionRow;
+export {
+  TransactionList,
+  TransactionListPinned,
+  TransactionListSubscriptionRow,
+  formatTransactionAmount,
+  formatTransactionDate
+};

package/dist/components/tree-view/index.js

@@ -0,0 +1,6 @@
+import {
+  TreeView
+} from "./tree-view";
+export {
+  TreeView
+};

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,298 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Tree"
+};
+function flattenVisible(arguments_) {
+  const { depth = 0, expanded, nodes, parentId } = arguments_;
+  return nodes.flatMap((node) => {
+    const hasChildren = (node.nodes?.length ?? 0) > 0;
+    const head = { depth, hasChildren, node, parentId };
+    if (!hasChildren || !expanded.has(node.id)) return [head];
+    return [
+      head,
+      ...flattenVisible({
+        depth: depth + 1,
+        expanded,
+        nodes: node.nodes ?? [],
+        parentId: node.id
+      })
+    ];
+  });
+}
+function useControlled(controlled, defaultValue) {
+  const [internal, setInternal] = useState(defaultValue);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue, isControlled];
+}
+function toggleSet(set, id) {
+  const next = new Set(set);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return [...next];
+}
+function TreeRow({
+  active,
+  expanded,
+  flat,
+  onActivate,
+  onExpand,
+  onSelect,
+  selected
+}) {
+  const { depth, hasChildren, node } = flat;
+  const activate = () => {
+    if (node.disabled) return;
+    onActivate(node.id);
+    if (hasChildren) onExpand(node.id);
+    else onSelect(node.id);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    activate();
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-disabled": node.disabled || void 0,
+      "aria-expanded": hasChildren ? expanded : void 0,
+      "aria-selected": selected || void 0,
+      className: cn(
+        "flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-sm focus:outline-none",
+        active ? "bg-accent text-accent-foreground" : "hover:bg-accent/60",
+        selected ? "ring-1 ring-primary" : "",
+        node.disabled ? "cursor-not-allowed opacity-50" : ""
+      ),
+      "data-active": active ? "true" : void 0,
+      "data-depth": depth,
+      "data-node-id": node.id,
+      "data-selected": selected ? "true" : void 0,
+      onClick: activate,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      style: { paddingLeft: `${(depth * 16 + 8).toString()}px` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center text-xs text-muted-foreground transition-transform",
+              hasChildren ? "" : "opacity-0",
+              expanded ? "rotate-90" : ""
+            ),
+            children: "\u25B8"
+          }
+        ),
+        node.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0", children: node.icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+      ]
+    }
+  );
+}
+function nextActiveId(flat, delta, current) {
+  if (flat.length === 0) return void 0;
+  if (!current) return flat[0]?.node.id;
+  const index = flat.findIndex((entry) => entry.node.id === current);
+  if (index < 0) return flat[0]?.node.id;
+  const nextIndex = Math.min(Math.max(index + delta, 0), flat.length - 1);
+  return flat[nextIndex]?.node.id;
+}
+function findFlat(flat, id) {
+  if (!id) return void 0;
+  return flat.find((entry) => entry.node.id === id);
+}
+function useTreeState(arguments_) {
+  const {
+    defaultExpanded = [],
+    defaultSelected = [],
+    expanded,
+    onExpandedChange,
+    onSelect,
+    selected,
+    selectionMode
+  } = arguments_;
+  const [expandedState, setExpandedState] = useControlled(
+    expanded,
+    defaultExpanded
+  );
+  const [selectedState, setSelectedState] = useControlled(
+    selected,
+    defaultSelected
+  );
+  const expandedSet = useMemo(() => new Set(expandedState), [expandedState]);
+  const selectedSet = useMemo(() => new Set(selectedState), [selectedState]);
+  const applyExpand = useCallback(
+    (id) => {
+      const next = toggleSet(expandedSet, id);
+      setExpandedState(next);
+      onExpandedChange?.(next);
+    },
+    [expandedSet, onExpandedChange, setExpandedState]
+  );
+  const applySelect = useCallback(
+    (id) => {
+      const next = selectionMode === "single" ? [id] : toggleSet(selectedSet, id);
+      setSelectedState(next);
+      onSelect?.(next);
+    },
+    [onSelect, selectedSet, selectionMode, setSelectedState]
+  );
+  return { applyExpand, applySelect, expandedSet, selectedSet };
+}
+function useKeyboardHandler(arguments_) {
+  const { activeId, applyExpand, applySelect, expandedSet, flat, setActiveId } = arguments_;
+  return useCallback(
+    (event) => {
+      const current = findFlat(flat, activeId);
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActiveId(nextActiveId(flat, 1, activeId));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActiveId(nextActiveId(flat, -1, activeId));
+        return;
+      }
+      if (event.key === "ArrowRight" && current?.hasChildren) {
+        event.preventDefault();
+        if (!expandedSet.has(current.node.id)) applyExpand(current.node.id);
+        return;
+      }
+      if (event.key === "ArrowLeft" && current) {
+        event.preventDefault();
+        if (current.hasChildren && expandedSet.has(current.node.id)) {
+          applyExpand(current.node.id);
+        } else if (current.parentId) {
+          setActiveId(current.parentId);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        if (!current || current.node.disabled) return;
+        event.preventDefault();
+        if (current.hasChildren) applyExpand(current.node.id);
+        else applySelect(current.node.id);
+      }
+    },
+    [activeId, applyExpand, applySelect, expandedSet, flat, setActiveId]
+  );
+}
+function TreeRows({
+  activeId,
+  applyExpand,
+  applySelect,
+  expandedSet,
+  flat,
+  selectedSet,
+  setActiveId
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: flat.map((entry) => /* @__PURE__ */ jsx(
+    TreeRow,
+    {
+      active: entry.node.id === activeId,
+      expanded: expandedSet.has(entry.node.id),
+      flat: entry,
+      onActivate: setActiveId,
+      onExpand: applyExpand,
+      onSelect: applySelect,
+      selected: selectedSet.has(entry.node.id)
+    },
+    entry.node.id
+  )) });
+}
+const TreeView = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      defaultExpanded,
+      defaultSelected,
+      expanded,
+      labels,
+      nodes,
+      onExpandedChange,
+      onSelect,
+      selected,
+      selectionMode = "single",
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState(
+      {
+        defaultExpanded,
+        defaultSelected,
+        expanded,
+        onExpandedChange,
+        onSelect,
+        selected,
+        selectionMode
+      }
+    );
+    const flat = useMemo(
+      () => flattenVisible({ expanded: expandedSet, nodes }),
+      [expandedSet, nodes]
+    );
+    const [activeId, setActiveId] = useState(
+      () => flat[0]?.node.id
+    );
+    const handleKeyDown = useKeyboardHandler({
+      activeId,
+      applyExpand,
+      applySelect,
+      expandedSet,
+      flat,
+      setActiveId
+    });
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-label": resolvedLabels.region,
+        "aria-multiselectable": selectionMode === "multiple" || void 0,
+        className: cn(
+          "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        ref,
+        role: "tree",
+        tabIndex: 0,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          TreeRows,
+          {
+            activeId,
+            applyExpand,
+            applySelect,
+            expandedSet,
+            flat,
+            selectedSet,
+            setActiveId
+          }
+        )
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+export {
+  TreeView
+};

package/dist/components/usage-breakdown/usage-breakdown.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";

package/dist/components/viewport-bookmarks/index.js

@@ -0,0 +1,6 @@
+import {
+  ViewportBookmarks
+} from "./viewport-bookmarks";
+export {
+  ViewportBookmarks
+};

package/dist/components/viewport-bookmarks/viewport-bookmarks.js

@@ -0,0 +1,116 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No saved views",
+  region: "Viewport bookmarks"
+};
+const Row = (props) => {
+  const { active, bookmark, onSelect } = props;
+  const handleClick = () => {
+    onSelect?.(bookmark.id);
+  };
+  const rowClass = "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors";
+  const activeClass = active ? "bg-muted/60 text-foreground" : "text-muted-foreground hover:bg-muted/30 hover:text-foreground";
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-pressed": active,
+        className: cn(
+          rowClass,
+          activeClass,
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-viewport-bookmark": bookmark.id,
+        "data-viewport-bookmark-active": active,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(rowClass, activeClass),
+      "data-viewport-bookmark": bookmark.id,
+      "data-viewport-bookmark-active": active,
+      children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+    }
+  );
+};
+const RowBody = (props) => {
+  const { bookmark } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "h-1.5 w-1.5 rounded-full",
+        style: { backgroundColor: bookmark.color ?? "hsl(var(--foreground))" }
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: bookmark.label }),
+      bookmark.detail ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "truncate text-[10px] text-muted-foreground",
+          "data-viewport-bookmark-detail": true,
+          children: bookmark.detail
+        }
+      ) : null
+    ] })
+  ] });
+};
+const ViewportBookmarks = forwardRef((props, ref) => {
+  const {
+    activeId,
+    bookmarks,
+    className,
+    labels,
+    onSelect,
+    title = "Saved views",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 rounded-lg border border-border bg-background p-2 text-foreground",
+        className
+      ),
+      "data-viewport-bookmarks": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { className: "px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+        bookmarks.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-[11px] text-muted-foreground",
+            "data-viewport-bookmarks-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: bookmarks.map((bookmark) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Row,
+          {
+            active: activeId === bookmark.id,
+            bookmark,
+            onSelect
+          }
+        ) }, bookmark.id)) })
+      ]
+    }
+  );
+});
+ViewportBookmarks.displayName = "ViewportBookmarks";
+export {
+  ViewportBookmarks
+};

package/dist/components/workspace-switcher/index.js

@@ -0,0 +1,6 @@
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
+export {
+  WorkspaceSwitcher
+};