@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/components/top-bar/index.js

@@ -0,0 +1,4 @@
+import { TopBar } from "./top-bar";
+export {
+  TopBar
+};

package/dist/components/top-bar/top-bar.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const TopBar = forwardRef(
+  ({ children, className, leading, subtitle, title, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
+          title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: subtitle }) : null
+          ] }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+TopBar.displayName = "TopBar";
+export {
+  TopBar
+};

package/dist/components/tour/tour.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
 function TourHeader({
@@ -60,7 +60,7 @@ function TourFooter({
       {
         "aria-label": `Go to ${step.title}`,
         className: cn(
-          "h-2.5 w-2.5 rounded-full transition-colors",
+          "size-2.5 rounded-full transition-colors",
           index === currentStep ? "bg-primary" : "bg-muted-foreground/30"
         ),
         onClick: () => {

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

@@ -0,0 +1,14 @@
+import {
+  formatTransactionAmount,
+  formatTransactionDate,
+  TransactionList,
+  TransactionListPinned,
+  TransactionListSubscriptionRow
+} from "./transaction-list";
+export {
+  TransactionList,
+  TransactionListPinned,
+  TransactionListSubscriptionRow,
+  formatTransactionAmount,
+  formatTransactionDate
+};

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

@@ -0,0 +1,247 @@
+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 CURRENCY_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getCurrencyFormatter(locale, currency) {
+  const key = `${locale}|${currency}`;
+  let formatter = CURRENCY_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = Intl.NumberFormat(locale, {
+      currency,
+      style: "currency"
+    });
+    CURRENCY_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+const DATE_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTransactionDateFormatter(locale) {
+  let formatter = DATE_FORMATTER_CACHE.get(locale);
+  if (!formatter) {
+    formatter = Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "short",
+      year: "numeric"
+    });
+    DATE_FORMATTER_CACHE.set(locale, formatter);
+  }
+  return formatter;
+}
+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 getCurrencyFormatter(locale, currency).format(
+    amountCents / CENTS_PER_UNIT
+  );
+}
+function formatTransactionDate(timestamp, locale = DEFAULT_LOCALE) {
+  return getTransactionDateFormatter(locale).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 size-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 size-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/tutorial-card/tutorial-card.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
 import { useMounted } from "../../lib/use-mounted";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,