@tangle-network/sandbox-ui 0.45.0 → 0.46.0

package/dist/{chunk-2XNT74ZX.js → chunk-OMUIPJQZ.js}

@@ -268,7 +268,7 @@ function PricingPage({
     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("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center rounded-full border border-[var(--md3-outline-variant)] bg-surface-container-low p-1", children: [
       /* @__PURE__ */ jsx2(
         "button",
         {
@@ -276,7 +276,7 @@ function PricingPage({
           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"
+            billingPeriod === "monthly" ? "bg-surface-container-high text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
           ),
           children: "Monthly"
         }
@@ -288,7 +288,7 @@ function PricingPage({
           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"
+            billingPeriod === "yearly" ? "bg-surface-container-high text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
           ),
           children: [
             "Yearly",
@@ -307,15 +307,15 @@ function PricingPage({
         "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"
+            "relative flex flex-col rounded-2xl border bg-surface-container transition-all",
+            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-[var(--md3-outline-variant)] 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" }) }),
+            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-surface-container-high border border-[var(--md3-outline-variant)] 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 }),
@@ -339,16 +339,16 @@ function PricingPage({
                   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"
+                    isRecommended ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : isCurrentTier ? "bg-muted text-muted-foreground border border-[var(--md3-outline-variant)] cursor-default" : "bg-surface-container-high text-foreground border border-[var(--md3-outline-variant)] hover:border-primary/50 hover:bg-surface-container-highest"
                   ),
                   children: isCurrentTier ? "Current Plan" : isFree ? "Get Started" : "Subscribe"
                 }
               ),
-              /* @__PURE__ */ jsx2("div", { className: "my-8 border-t border-border" }),
+              /* @__PURE__ */ jsx2("div", { className: "my-8 border-t border-[var(--md3-outline-variant)]" }),
               /* @__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"
+                  isRecommended ? "bg-primary/10 text-primary" : "bg-surface-container-high text-muted-foreground"
                 ), children: /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3" }) }),
                 /* @__PURE__ */ jsx2("span", { className: "text-sm text-foreground/80", children: feature })
               ] }, feature)) })
@@ -364,7 +364,7 @@ function PricingPage({
 // 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";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var colors = {
   bar: "bg-[image:var(--accent-gradient-strong)]",
   barHover: "hover:brightness-110",
@@ -387,15 +387,23 @@ 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);
+  const isEmpty = data.length === 0 || total === 0;
   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__ */ jsxs3(CardHeader2, { className: "flex flex-row items-center justify-between gap-3 pb-2", children: [
+      /* @__PURE__ */ jsx3(CardTitle2, { className: "min-w-0 truncate font-medium text-base", children: title }),
+      /* @__PURE__ */ jsxs3("div", { className: "shrink-0 whitespace-nowrap 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__ */ jsx3(CardContent2, { children: isEmpty ? /* @__PURE__ */ jsxs3("div", { className: "flex h-48 flex-col items-center justify-center gap-1 text-center", children: [
+      /* @__PURE__ */ jsxs3("p", { className: "font-medium text-sm", children: [
+        "No ",
+        unit,
+        " recorded yet"
+      ] }),
+      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Usage appears here once activity begins." })
+    ] }) : /* @__PURE__ */ jsxs3(Fragment2, { 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) }),
@@ -414,7 +422,7 @@ function UsageChart({ data, title, unit, className }) {
                 onMouseEnter: () => setHoveredIndex(index),
                 onMouseLeave: () => setHoveredIndex(null),
                 children: [
-                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg border border-border bg-popover px-3 py-1.5 text-sm shadow-[var(--shadow-dropdown)]", children: [
+                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-highest px-3 py-1.5 text-sm shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", children: [
                     /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
                       formatValue(point.value),
                       " ",
@@ -452,7 +460,7 @@ function UsageChart({ data, title, unit, className }) {
           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: "mt-4 grid grid-cols-3 gap-4 border-[var(--md3-outline-variant)] 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: [
@@ -478,7 +486,7 @@ function UsageChart({ data, title, unit, className }) {
           ] })
         ] })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 
@@ -490,18 +498,18 @@ function TemplateCard({ template, onUseTemplate, className }) {
     "div",
     {
       className: cn(
-        "group relative flex flex-col justify-between rounded-xl border border-border bg-card p-6 transition-colors hover:border-[var(--border-accent)]",
+        "group relative flex flex-col justify-between rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container p-6 transition-colors hover:border-[var(--border-accent)]",
         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("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-surface-container-high border border-[var(--md3-outline-variant)]", 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",
+              className: "rounded-full bg-surface-container-high px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
               children: tag
             },
             `${tag}-${i}`