@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

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

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useId
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_FILL = {
+  danger: "bg-red-500",
+  neutral: "bg-foreground",
+  primary: "bg-blue-500",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Timeline scrubber"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const Labels = (props) => {
+  const fmt = props.formatValue;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "data-timeline-scrubber-start": true, children: fmt ? fmt(props.start) : props.start }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-semibold text-foreground",
+        "data-timeline-scrubber-cursor": true,
+        children: fmt ? fmt(props.clamped) : props.clamped
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-timeline-scrubber-end": true, children: fmt ? fmt(props.end) : props.end })
+  ] });
+};
+const Track = (props) => /* @__PURE__ */ jsxs("div", { className: "relative h-6", children: [
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full",
+        TONE_FILL[props.tone]
+      ),
+      "data-timeline-scrubber-fill": true,
+      style: { width: `${props.ratio * 100}%` }
+    }
+  ),
+  props.ticks?.map((tick) => /* @__PURE__ */ jsx(
+    TickMark,
+    {
+      scrubberId: props.scrubberId,
+      span: props.span,
+      start: props.start,
+      tick
+    },
+    tick.id
+  )),
+  /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": props.ariaLabel,
+      className: "absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-timeline-scrubber-input": true,
+      id: props.inputId,
+      max: props.max,
+      min: props.min,
+      onChange: props.onChange,
+      step: props.step,
+      type: "range",
+      value: props.value
+    }
+  )
+] });
+const TickMark = (props) => {
+  const { scrubberId, span, start, tick } = props;
+  const ratio = clamp((tick.value - start) / span, 0, 1);
+  const tone = tick.tone ?? "neutral";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute top-1/2 h-2.5 w-px -translate-y-1/2 rounded-full",
+        TONE_FILL[tone]
+      ),
+      "data-scrubber-tick": tick.id,
+      "data-scrubber-tick-of": scrubberId,
+      "data-scrubber-tick-tone": tone,
+      style: { left: `${ratio * 100}%` },
+      title: typeof tick.label === "string" ? tick.label : void 0
+    }
+  );
+};
+const TimelineScrubber = forwardRef((props, ref) => {
+  const {
+    className,
+    end,
+    formatValue,
+    labels,
+    onValueChange,
+    start,
+    step = 1,
+    ticks,
+    tone = "primary",
+    value,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inputId = useId();
+  const safeEnd = end <= start ? start + 1 : end;
+  const span = safeEnd - start;
+  const clamped = clamp(value, start, safeEnd);
+  const ratio = clamp((clamped - start) / span, 0, 1);
+  const handleChange = (event) => {
+    onValueChange(clamp(Number(event.target.value), start, safeEnd));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 text-[11px] text-muted-foreground",
+        className
+      ),
+      "data-timeline-scrubber": true,
+      "data-timeline-tone": tone,
+      ref,
+      role: "group",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Labels,
+          {
+            clamped,
+            end: safeEnd,
+            formatValue,
+            start
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Track,
+          {
+            ariaLabel: resolvedLabels.region,
+            inputId,
+            max: safeEnd,
+            min: start,
+            onChange: handleChange,
+            ratio,
+            scrubberId: inputId,
+            span,
+            start,
+            step,
+            ticks,
+            tone,
+            value: clamped
+          }
+        )
+      ]
+    }
+  );
+});
+TimelineScrubber.displayName = "TimelineScrubber";
+export {
+  TimelineScrubber
+};

package/dist/components/tldr-section/tldr-section.js

@@ -48,7 +48,7 @@ function TLDRSection({ children, label }) {
             /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "w-5 h-5 text-muted-foreground",
+                className: "size-5 text-muted-foreground",
                 fill: "none",
                 stroke: "currentColor",
                 strokeWidth: "2",
@@ -69,7 +69,7 @@ function TLDRSection({ children, label }) {
           /* @__PURE__ */ jsx(
             "svg",
             {
-              className: `w-4 h-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`,
+              className: `size-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`,
               fill: "none",
               stroke: "currentColor",
               strokeWidth: "2",

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

@@ -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 = new 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 = new 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
+};