@vllnt/ui 0.1.11 → 0.2.0-canary.4abf494

package/dist/components/subscription-card/subscription-card.js

@@ -0,0 +1,161 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../card/card";
+import { PlanBadge } from "../plan-badge/plan-badge";
+function getStatusLabel(status) {
+  switch (status) {
+    case "active":
+      return "Active";
+    case "canceled":
+      return "Canceled";
+    case "past-due":
+      return "Past due";
+    case "trialing":
+      return "Trialing";
+  }
+}
+function getStatusClasses(status) {
+  switch (status) {
+    case "active":
+      return "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+    case "canceled":
+      return "bg-muted text-muted-foreground";
+    case "past-due":
+      return "bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    case "trialing":
+      return "bg-sky-500/10 text-sky-700 dark:text-sky-300";
+  }
+}
+function getPlanState(status) {
+  switch (status) {
+    case "active":
+    case "past-due":
+      return "current";
+    case "canceled":
+      return "legacy";
+    case "trialing":
+      return "trial";
+  }
+}
+function DetailRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-right font-medium", children: value })
+  ] });
+}
+function SubscriptionDetails({
+  note,
+  priceLabel,
+  renewalLabel,
+  seatsLabel,
+  usageLabel
+}) {
+  return /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/70 bg-background px-4 py-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Monthly total" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: priceLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-4", children: [
+      /* @__PURE__ */ jsx(DetailRow, { label: "Renewal", value: renewalLabel }),
+      seatsLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Seats", value: seatsLabel }) : null,
+      usageLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Usage", value: usageLabel }) : null
+    ] }),
+    note ? /* @__PURE__ */ jsx("p", { className: "rounded-lg bg-muted px-4 py-3 text-sm text-muted-foreground", children: note }) : null
+  ] });
+}
+function SubscriptionActions({
+  primaryActionLabel,
+  secondaryActionLabel
+}) {
+  if (!primaryActionLabel && !secondaryActionLabel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(CardFooter, { className: "flex flex-col gap-2 sm:flex-row sm:justify-end", children: [
+    secondaryActionLabel ? /* @__PURE__ */ jsx(Button, { className: "w-full sm:w-auto", variant: "outline", children: secondaryActionLabel }) : null,
+    primaryActionLabel ? /* @__PURE__ */ jsx(Button, { className: "w-full sm:w-auto", children: primaryActionLabel }) : null
+  ] });
+}
+const SubscriptionCard = React.forwardRef(
+  ({
+    className,
+    note,
+    plan,
+    priceLabel,
+    primaryActionLabel,
+    renewalLabel,
+    seatsLabel,
+    secondaryActionLabel,
+    status,
+    usageLabel,
+    ...props
+  }, reference) => {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn(
+          "w-full max-w-md border-border/70 bg-card shadow-sm",
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-4 pb-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Subscription" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "Billing overview for the current workspace plan." })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex rounded-full px-2.5 py-1 text-xs font-medium",
+                    getStatusClasses(status)
+                  ),
+                  children: getStatusLabel(status)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Current plan" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: renewalLabel })
+              ] }),
+              /* @__PURE__ */ jsx(PlanBadge, { state: getPlanState(status), tier: plan })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SubscriptionDetails,
+            {
+              note,
+              priceLabel,
+              renewalLabel,
+              seatsLabel,
+              usageLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SubscriptionActions,
+            {
+              primaryActionLabel,
+              secondaryActionLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SubscriptionCard.displayName = "SubscriptionCard";
+export {
+  SubscriptionCard
+};

package/dist/components/ticker-tape/index.js

@@ -0,0 +1,6 @@
+import {
+  TickerTape
+} from "./ticker-tape";
+export {
+  TickerTape
+};

package/dist/components/ticker-tape/ticker-tape.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight, Dot } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+const tickerTapeKeyframes = `
+@keyframes ticker-tape-scroll {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+`;
+function formatPrice(price) {
+  return typeof price === "number" ? price.toLocaleString() : price;
+}
+function formatChange(change) {
+  const sign = change > 0 ? "+" : "";
+  return `${sign}${change.toFixed(2)}%`;
+}
+function TickerTapeRow({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-center gap-3 px-3 py-3", children: items.map((item) => {
+    const isPositive = item.change >= 0;
+    const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex min-w-[12rem] items-center gap-3 rounded-full border border-border/70 bg-background/80 px-3 py-2 shadow-sm",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: item.symbol }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: formatPrice(item.price) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              className: cn(
+                "ml-auto gap-1 rounded-full border px-2 py-0.5 text-[11px] tabular-nums",
+                isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
+              ),
+              variant: "outline",
+              children: [
+                /* @__PURE__ */ jsx(TrendIcon, { className: "h-3 w-3" }),
+                formatChange(item.change)
+              ]
+            }
+          ),
+          item.volume ? /* @__PURE__ */ jsxs("span", { className: "hidden items-center text-xs text-muted-foreground sm:inline-flex", children: [
+            /* @__PURE__ */ jsx(Dot, { className: "h-3.5 w-3.5" }),
+            item.volume
+          ] }) : null
+        ]
+      },
+      `${item.symbol}-${item.price}-${item.change}`
+    );
+  }) });
+}
+const TickerTape = React.forwardRef(
+  ({ className, items, pauseOnHover = true, speedSeconds = 28, ...props }, reference) => {
+    if (items.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": "TickerTape",
+        className: cn(
+          "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
+          className
+        ),
+        ref: reference,
+        role: "region",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("style", { children: tickerTapeKeyframes }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex w-max items-stretch",
+                pauseOnHover && "hover:[animation-play-state:paused]"
+              ),
+              style: {
+                animationDuration: `${speedSeconds}s`,
+                animationIterationCount: "infinite",
+                animationName: "ticker-tape-scroll",
+                animationTimingFunction: "linear"
+              },
+              children: [
+                /* @__PURE__ */ jsx(TickerTapeRow, { items }),
+                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(TickerTapeRow, { items }) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TickerTape.displayName = "TickerTape";
+export {
+  TickerTape
+};

package/dist/components/tour/index.js

@@ -0,0 +1,4 @@
+import { Tour } from "./tour";
+export {
+  Tour
+};

package/dist/components/tour/tour.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
+function TourHeader({
+  progress,
+  step,
+  stepIndex,
+  totalSteps
+}) {
+  return /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b bg-background/70", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Tour" }),
+          step.badge ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: step.badge }) : null
+        ] }),
+        /* @__PURE__ */ jsx(CardTitle, { children: step.title })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        stepIndex + 1,
+        "/",
+        totalSteps
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-1 rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full rounded-full bg-primary transition-all",
+        style: { width: `${progress}%` }
+      }
+    ) })
+  ] });
+}
+function TourFooter({
+  currentStep,
+  isFirstStep,
+  isLastStep,
+  onComplete,
+  onStepSelect,
+  steps
+}) {
+  return /* @__PURE__ */ jsxs(CardFooter, { className: "flex items-center justify-between gap-3 border-t bg-background/70 px-6 py-4", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: isFirstStep,
+        onClick: () => {
+          onStepSelect(currentStep - 1);
+        },
+        variant: "outline",
+        children: "Previous"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: steps.map((step, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": `Go to ${step.title}`,
+        className: cn(
+          "h-2.5 w-2.5 rounded-full transition-colors",
+          index === currentStep ? "bg-primary" : "bg-muted-foreground/30"
+        ),
+        onClick: () => {
+          onStepSelect(index);
+        },
+        type: "button"
+      },
+      step.id
+    )) }),
+    isLastStep ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => {
+          onComplete?.();
+        },
+        children: "Finish"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => {
+          onStepSelect(currentStep + 1);
+        },
+        children: "Next"
+      }
+    )
+  ] });
+}
+function Tour({
+  className,
+  defaultStep = 0,
+  onComplete,
+  onStepChange,
+  steps
+}) {
+  const [currentStep, setCurrentStep] = useState(defaultStep);
+  if (steps.length === 0) {
+    return null;
+  }
+  const activeStep = steps[currentStep];
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === steps.length - 1;
+  const progress = (currentStep + 1) / steps.length * 100;
+  if (!activeStep) {
+    return null;
+  }
+  const handleStepSelect = (stepIndex) => {
+    const nextStep = steps[stepIndex];
+    if (!nextStep) {
+      return;
+    }
+    setCurrentStep(stepIndex);
+    onStepChange?.(stepIndex, nextStep);
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "my-6 overflow-hidden border-primary/20 bg-gradient-to-br from-background to-primary/5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          TourHeader,
+          {
+            progress,
+            step: activeStep,
+            stepIndex: currentStep,
+            totalSteps: steps.length
+          }
+        ),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-6", children: [
+          activeStep.media ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: activeStep.media }) : null,
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-3", children: activeStep.description }),
+          activeStep.hint ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed bg-muted/50 p-3 text-sm text-muted-foreground", children: activeStep.hint }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          TourFooter,
+          {
+            currentStep,
+            isFirstStep,
+            isLastStep,
+            onComplete,
+            onStepSelect: handleStepSelect,
+            steps
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Tour
+};

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

@@ -0,0 +1,6 @@
+import {
+  UsageBreakdown
+} from "./usage-breakdown";
+export {
+  UsageBreakdown
+};

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

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+const toneClasses = {
+  danger: "bg-destructive/10 text-destructive border-destructive/20 dark:text-destructive",
+  default: "bg-muted text-muted-foreground border-border",
+  success: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20 dark:text-emerald-300",
+  warning: "bg-amber-500/10 text-amber-700 border-amber-500/20 dark:text-amber-300"
+};
+function formatPercent(value) {
+  if (!Number.isFinite(value)) return "0%";
+  return `${Math.round(value)}%`;
+}
+function formatValue(value) {
+  return new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: value >= 100 ? 0 : 1
+  }).format(value);
+}
+function getRelativeWidth(value, maxValue) {
+  if (maxValue <= 0) return 0;
+  return Math.max(value / maxValue * 100, 4);
+}
+function getShare(value, totalValue) {
+  if (totalValue <= 0) return 0;
+  return value / totalValue * 100;
+}
+function UsageBreakdownTrend({ item }) {
+  if (!item.trend) return null;
+  const trendTone = item.tone ?? "default";
+  const TrendIcon = item.trend.direction === "down" ? ArrowDownRight : ArrowUpRight;
+  return /* @__PURE__ */ jsxs(Badge, { className: cn("gap-1 border", toneClasses[trendTone]), children: [
+    /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
+    item.trend.label
+  ] });
+}
+function UsageBreakdownMeter({
+  maxValue,
+  value
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "h-full rounded-full bg-primary transition-[width]",
+        style: { width: `${getRelativeWidth(value, maxValue)}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: "Relative usage" }),
+      /* @__PURE__ */ jsx("span", { children: formatPercent(getShare(value, maxValue)) })
+    ] })
+  ] });
+}
+function UsageBreakdownRow({
+  item,
+  maxValue,
+  rank,
+  totalValue
+}) {
+  return /* @__PURE__ */ jsx("li", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-muted text-sm font-semibold text-muted-foreground", children: item.icon ?? rank }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: item.label }),
+            item.meta ? /* @__PURE__ */ jsx(Badge, { className: "border-border", variant: "outline", children: item.meta }) : null,
+            /* @__PURE__ */ jsx(UsageBreakdownTrend, { item })
+          ] }),
+          item.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.description }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-left sm:text-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground", children: item.valueLabel ?? formatValue(item.value) }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+            formatPercent(getShare(item.value, totalValue)),
+            " of total"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(UsageBreakdownMeter, { maxValue, value: item.value })
+    ] })
+  ] }) });
+}
+function getSortedItems(items, maxItems) {
+  const rankedItems = [...items].sort(
+    (left, right) => right.value - left.value
+  );
+  return typeof maxItems === "number" ? rankedItems.slice(0, maxItems) : rankedItems;
+}
+const UsageBreakdown = forwardRef(
+  ({
+    className,
+    description,
+    emptyMessage = "No usage data available.",
+    items,
+    maxItems,
+    title = "Usage breakdown",
+    ...props
+  }, ref) => {
+    const sortedItems = useMemo(
+      () => getSortedItems(items, maxItems),
+      [items, maxItems]
+    );
+    const totalValue = useMemo(
+      () => sortedItems.reduce((sum, item) => sum + item.value, 0),
+      [sortedItems]
+    );
+    const maxValue = sortedItems[0]?.value ?? 0;
+    return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: title }),
+        description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: sortedItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx("ol", { className: "space-y-3", children: sortedItems.map((item, index) => /* @__PURE__ */ jsx(
+        UsageBreakdownRow,
+        {
+          item,
+          maxValue,
+          rank: index + 1,
+          totalValue
+        },
+        item.id
+      )) }) })
+    ] });
+  }
+);
+UsageBreakdown.displayName = "UsageBreakdown";
+export {
+  UsageBreakdown
+};

package/dist/components/wallet-card/index.js

@@ -0,0 +1,4 @@
+import { WalletCard } from "./wallet-card";
+export {
+  WalletCard
+};