@tangle-network/sandbox-ui 0.20.3 → 0.21.0

package/dist/chunk-DNZ4DTNA.js

@@ -0,0 +1,547 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/dashboard/billing-dashboard.tsx
+import { Button } from "@tangle-network/ui/primitives";
+import { Badge } from "@tangle-network/ui/primitives";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@tangle-network/ui/primitives";
+import { Progress } from "@tangle-network/ui/primitives";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var variantColors = {
+  sandbox: {
+    accent: "text-[var(--accent-text)]",
+    accentBg: "bg-[var(--accent-surface-soft)]",
+    border: "border-[var(--border-accent)]",
+    progress: "bg-[image:var(--accent-gradient-strong)]"
+  }
+};
+function formatCredits(value) {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString();
+}
+function formatDate(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function getStatusBadgeVariant(status) {
+  switch (status.toLowerCase()) {
+    case "active":
+      return "success";
+    case "trialing":
+    case "past_due":
+      return "warning";
+    case "canceled":
+    case "unpaid":
+      return "error";
+    default:
+      return "secondary";
+  }
+}
+function CreditCardIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Credit card icon" }),
+        /* @__PURE__ */ jsx("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
+      ]
+    }
+  );
+}
+function CoinsIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Coins icon" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6" }),
+        /* @__PURE__ */ jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 6h1v4" }),
+        /* @__PURE__ */ jsx("path", { d: "m16.71 13.88.7.71-2.82 2.82" })
+      ]
+    }
+  );
+}
+function ChartIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Chart icon" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }),
+        /* @__PURE__ */ jsx("path", { d: "m19 9-5 5-4-4-3 3" })
+      ]
+    }
+  );
+}
+function BillingDashboard({
+  subscription,
+  balance,
+  usage,
+  onManageSubscription,
+  onAddCredits,
+  variant = "sandbox",
+  className,
+  cardClassName
+}) {
+  const colors2 = variantColors[variant];
+  const totalCredits = balance.available + balance.used;
+  const usagePercent = totalCredits > 0 ? balance.used / totalCredits * 100 : 0;
+  const sortedModels = Object.entries(usage.byModel).sort(
+    ([, a], [, b]) => b - a
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-6 lg:grid-cols-3", className), children: [
+    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(CreditCardIcon, { className: colors2.accent }),
+          "Current Plan"
+        ] }),
+        subscription && /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(subscription.status), children: subscription.status })
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold text-2xl", colors2.accent), children: subscription.tierName }),
+          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
+            "Renews ",
+            formatDate(subscription.renewsAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "w-full",
+            onClick: onManageSubscription,
+            children: "Manage Subscription"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-bold text-2xl text-muted-foreground", children: "No Active Plan" }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Subscribe to get started" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant,
+            className: "w-full",
+            onClick: onManageSubscription,
+            children: "View Plans"
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(CoinsIcon, { className: colors2.accent }),
+          "Credit Balance"
+        ] }),
+        /* @__PURE__ */ jsxs(CardDescription, { children: [
+          formatCredits(balance.available),
+          " credits remaining"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Used" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCredits(balance.used) })
+          ] }),
+          /* @__PURE__ */ jsx(Progress, { value: usagePercent, variant, className: "h-3" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Available" }),
+            /* @__PURE__ */ jsx("span", { className: cn("font-medium", colors2.accent), children: formatCredits(balance.available) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(ChartIcon, { className: colors2.accent }),
+          "Usage Breakdown"
+        ] }),
+        /* @__PURE__ */ jsx(CardDescription, { children: usage.period })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Total Usage" }),
+          /* @__PURE__ */ jsx("span", { className: cn("font-bold text-2xl", colors2.accent), children: formatCredits(usage.total) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: "By Model" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            sortedModels.slice(0, 5).map(([model, credits]) => {
+              const modelPercent = usage.total > 0 ? credits / usage.total * 100 : 0;
+              return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: model }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-2 font-medium", children: formatCredits(credits) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-all",
+                      variant === "sandbox" && colors2.progress
+                    ),
+                    style: { width: `${modelPercent}%` }
+                  }
+                ) })
+              ] }, model);
+            }),
+            sortedModels.length > 5 && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+              "+",
+              sortedModels.length - 5,
+              " more models"
+            ] }),
+            sortedModels.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "No usage this period" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/pricing-page.tsx
+import { Check, Zap } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatPrice(cents) {
+  if (!Number.isFinite(cents) || cents < 0) return "$0";
+  return cents % 100 === 0 ? `$${cents / 100}` : `$${(cents / 100).toFixed(2)}`;
+}
+function PricingPage({
+  tiers,
+  currentTierId,
+  billingPeriod,
+  onBillingPeriodChange,
+  onSelectTier,
+  loading = false,
+  className
+}) {
+  const tiersWithRecommended = tiers.map((tier, i) => ({
+    ...tier,
+    recommended: tier.recommended ?? (tiers.length === 3 && i === 1)
+  }));
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full space-y-10", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center rounded-full border border-border bg-muted/50 p-1", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onBillingPeriodChange("monthly"),
+          className: cn(
+            "rounded-full px-5 py-2 text-sm font-medium transition-all",
+            billingPeriod === "monthly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: "Monthly"
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onBillingPeriodChange("yearly"),
+          className: cn(
+            "rounded-full px-5 py-2 text-sm font-medium transition-all",
+            billingPeriod === "yearly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            "Yearly",
+            /* @__PURE__ */ jsx2("span", { className: "ml-2 rounded-full bg-[var(--surface-success-bg)] px-2 py-0.5 text-[10px] font-bold text-[var(--surface-success-text)]", children: "Save 20%" })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3 items-start", children: tiersWithRecommended.map((tier) => {
+      const isCurrentTier = tier.id === currentTierId;
+      const isRecommended = tier.recommended;
+      const isFree = tier.monthlyPriceCents === 0;
+      const price = billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 ? tier.yearlyPriceCents : tier.monthlyPriceCents;
+      const displayPrice = billingPeriod === "yearly" ? Math.round(price / 12) : price;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: cn(
+            "relative flex flex-col rounded-2xl border transition-all",
+            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-border hover:border-primary/30"
+          ),
+          children: [
+            isRecommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 text-xs font-bold text-primary-foreground shadow-sm", children: [
+              /* @__PURE__ */ jsx2(Zap, { className: "h-3 w-3" }),
+              "Most Popular"
+            ] }) }),
+            isCurrentTier && !isRecommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center rounded-full bg-muted border border-border px-4 py-1.5 text-xs font-bold text-foreground", children: "Current Plan" }) }),
+            /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col p-8", isRecommended && "pt-10"), children: [
+              /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsx2("h3", { className: "text-lg font-bold text-foreground", children: tier.name }),
+                /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-muted-foreground", children: tier.description })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "mb-8", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1", children: [
+                  /* @__PURE__ */ jsx2("span", { className: cn("text-5xl font-extrabold tracking-tight", isRecommended ? "text-primary" : "text-foreground"), children: isFree ? "Free" : formatPrice(displayPrice) }),
+                  !isFree && /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-medium", children: "/mo" })
+                ] }),
+                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && !isFree && /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+                  formatPrice(tier.yearlyPriceCents),
+                  " billed annually"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSelectTier(tier.id),
+                  disabled: isCurrentTier || loading,
+                  className: cn(
+                    "w-full rounded-xl py-3 text-sm font-bold transition-all active:scale-[0.98] disabled:opacity-50",
+                    isRecommended ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : isCurrentTier ? "bg-muted text-muted-foreground border border-border cursor-default" : "bg-card text-foreground border border-border hover:border-primary/50 hover:bg-muted"
+                  ),
+                  children: isCurrentTier ? "Current Plan" : isFree ? "Get Started" : "Subscribe"
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { className: "my-8 border-t border-border" }),
+              /* @__PURE__ */ jsx2("ul", { className: "space-y-3.5 flex-1", children: tier.features.map((feature) => /* @__PURE__ */ jsxs2("li", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx2("div", { className: cn(
+                  "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
+                  isRecommended ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                ), children: /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3" }) }),
+                /* @__PURE__ */ jsx2("span", { className: "text-sm text-foreground/80", children: feature })
+              ] }, feature)) })
+            ] })
+          ]
+        },
+        tier.id
+      );
+    }) })
+  ] });
+}
+
+// src/dashboard/usage-chart.tsx
+import * as React from "react";
+import { Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, CardTitle as CardTitle2 } from "@tangle-network/ui/primitives";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var colors = {
+  bar: "bg-[image:var(--accent-gradient-strong)]",
+  barHover: "hover:brightness-110",
+  text: "text-[var(--accent-text)]"
+};
+function formatDate2(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function formatValue(value) {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString();
+}
+function UsageChart({ data, title, unit, className }) {
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const [hoveredIndex, setHoveredIndex] = React.useState(null);
+  return /* @__PURE__ */ jsxs3(Card2, { className, children: [
+    /* @__PURE__ */ jsxs3(CardHeader2, { className: "flex flex-row items-center justify-between pb-2", children: [
+      /* @__PURE__ */ jsx3(CardTitle2, { className: "font-medium text-base", children: title }),
+      /* @__PURE__ */ jsxs3("div", { className: "text-right", children: [
+        /* @__PURE__ */ jsx3("span", { className: cn("font-bold text-2xl", colors.text), children: formatValue(total) }),
+        /* @__PURE__ */ jsx3("span", { className: "ml-1 text-muted-foreground text-sm", children: unit })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(CardContent2, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs", children: [
+          /* @__PURE__ */ jsx3("span", { children: formatValue(maxValue) }),
+          /* @__PURE__ */ jsx3("span", { children: formatValue(Math.round(maxValue / 2)) }),
+          /* @__PURE__ */ jsx3("span", { children: "0" })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "ml-10 flex h-48 items-end gap-1", children: data.map((point, index) => {
+          const heightPercent = point.value / maxValue * 100;
+          const isHovered = hoveredIndex === index;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: chart bar uses hover for tooltip display
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "group relative flex flex-1 flex-col items-center",
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                children: [
+                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg bg-popover px-3 py-1.5 text-sm shadow-lg", children: [
+                    /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
+                      formatValue(point.value),
+                      " ",
+                      unit
+                    ] }),
+                    /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: formatDate2(point.date) })
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: cn(
+                        "min-h-[2px] w-full rounded-t-sm transition-all duration-200",
+                        colors.bar,
+                        colors.barHover,
+                        isHovered && "opacity-80"
+                      ),
+                      style: { height: `${Math.max(heightPercent, 1)}%` }
+                    }
+                  )
+                ]
+              },
+              point.date
+            )
+          );
+        }) }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-2 ml-10 flex gap-1", children: data.map((point, index) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cn(
+              "flex-1 truncate text-center text-muted-foreground text-xs",
+              hoveredIndex === index && colors.text
+            ),
+            children: data.length <= 7 || index % Math.ceil(data.length / 7) === 0 ? formatDate2(point.date) : ""
+          },
+          point.date
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "mt-4 grid grid-cols-3 gap-4 border-border border-t pt-4", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Average" }),
+          /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
+            formatValue(Math.round(total / data.length)),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Peak" }),
+          /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
+            formatValue(maxValue),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Total" }),
+          /* @__PURE__ */ jsxs3("p", { className: cn("font-medium", colors.text), children: [
+            formatValue(total),
+            " ",
+            unit
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/template-card.tsx
+import { ArrowRight } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TemplateCard({ template, onUseTemplate, className }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col justify-between rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx4("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted border border-border", children: template.icon ?? /* @__PURE__ */ jsx4("span", { className: "text-lg font-bold text-primary", children: template.name.charAt(0).toUpperCase() }) }),
+          /* @__PURE__ */ jsx4("h3", { className: "mb-1 text-base font-bold text-foreground", children: template.name }),
+          /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-2", children: template.description }),
+          template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx4("div", { className: "mt-3 flex flex-wrap gap-1.5", children: template.tags.map((tag, i) => /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+              children: tag
+            },
+            `${tag}-${i}`
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            onClick: () => onUseTemplate(template.id),
+            className: "mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary/10 border border-primary/20 px-4 py-2.5 text-sm font-bold text-primary transition-colors hover:bg-primary hover:text-primary-foreground active:scale-[0.98]",
+            children: [
+              "Use Template",
+              /* @__PURE__ */ jsx4(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/dashboard/info-panel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function InfoPanel({ label, title, description, className }) {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]", children: label }),
+      /* @__PURE__ */ jsx5("h3", { className: "mt-1 text-lg font-bold", children: title }),
+      /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]", children: description })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })
+  ] });
+}
+
+export {
+  BillingDashboard,
+  formatPrice,
+  PricingPage,
+  UsageChart,
+  TemplateCard,
+  InfoPanel
+};