@rayvelez/findash-ui 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1042 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function SalesStatisticsCard({
+  visitors = 2025,
+  updatedDaysAgo = 1,
+  onPeriodChange,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-accent-dark dark:bg-black text-accent-dark-foreground p-6 rounded-3xl shadow-lg relative overflow-hidden flex-1 min-h-[300px] animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-6 bg-white/10 rounded w-32 mb-2" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-white/10 rounded w-24" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-accent-dark dark:bg-black text-accent-dark-foreground p-6 rounded-3xl shadow-lg relative overflow-hidden flex-1 min-h-[300px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start z-10 relative", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium", children: "Sales statistics" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs mt-1", children: [
+          "Updated ",
+          updatedDaysAgo,
+          " ",
+          updatedDaysAgo === 1 ? "day" : "days",
+          " ago"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onPeriodChange?.("monthly"),
+          className: "flex items-center gap-2 bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-full text-xs transition-colors border border-white/10",
+          children: [
+            "Monthly",
+            /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "expand_more" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 z-10 relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Visitors" }),
+        /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-primary-foreground text-xs transform rotate-45", children: "arrow_upward" }) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-5xl font-medium tracking-tight", children: visitors.toLocaleString() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-6 right-6 flex items-end gap-3 h-32 w-1/2 justify-end", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-20 relative group", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute -top-6 text-center w-full text-xs text-muted-foreground mb-2", children: "September" }),
+        /* @__PURE__ */ jsx("div", { className: "h-16 w-full border border-muted-foreground/30 rounded-t-xl pattern-lines-light opacity-30 absolute -top-16 left-0" }),
+        /* @__PURE__ */ jsx("div", { className: "h-24 w-full bg-primary rounded-xl overflow-hidden relative shadow-lg transform transition-transform group-hover:scale-105", children: /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-10 bg-secondary rounded-b-xl" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-24 relative group", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute -top-6 text-center w-full text-xs text-muted-foreground mb-2", children: "November" }),
+        /* @__PURE__ */ jsx("div", { className: "h-12 w-full border border-muted-foreground/30 rounded-t-xl pattern-lines-light opacity-30 absolute -top-12 left-0" }),
+        /* @__PURE__ */ jsx("div", { className: "h-32 w-full bg-primary rounded-xl overflow-hidden relative shadow-lg transform transition-transform group-hover:scale-105", children: /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-8 bg-secondary rounded-b-xl" }) })
+      ] })
+    ] })
+  ] });
+}
+function CurrentBalanceCard({
+  balance = 15368,
+  percentageChange = 14,
+  averageScore = 18324,
+  currency = "$",
+  onPrevious,
+  onNext,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex-1 animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-32 mb-4" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-3xl h-36" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Current balance" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onPrevious,
+            className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "arrow_back" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onNext,
+            className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "arrow_forward" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-primary rounded-3xl p-5 relative overflow-hidden h-36 flex flex-col justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-card rounded-xl flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-foreground", children: "show_chart" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-4 bottom-4 w-40 h-40", children: [
+        /* @__PURE__ */ jsxs("svg", { className: "w-full h-full overflow-visible", viewBox: "0 0 100 50", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M 10 50 A 40 40 0 0 1 90 50",
+              fill: "none",
+              stroke: "rgba(0,0,0,0.1)",
+              strokeLinecap: "round",
+              strokeWidth: "12"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "opacity-20",
+              d: "M 60 16 A 40 40 0 0 1 90 50",
+              fill: "none",
+              stroke: "#000",
+              strokeWidth: "1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M 10 50 A 40 40 0 0 1 60 16",
+              fill: "none",
+              stroke: "hsl(var(--foreground))",
+              strokeLinecap: "round",
+              strokeWidth: "12"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "45",
+              cy: "35",
+              fill: "hsl(var(--secondary))",
+              r: "3",
+              stroke: "hsl(var(--foreground))",
+              strokeWidth: "1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-[8px] right-[2px] w-12 h-20 rounded-tr-full pattern-lines opacity-40 rotate-12 origin-bottom-left pointer-events-none" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-end relative z-10", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold text-primary-foreground", children: [
+              percentageChange,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-card flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-[10px] text-foreground", children: "north_east" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-primary-foreground/70 font-medium", children: [
+            "Avg score: ",
+            averageScore.toLocaleString(),
+            currency
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-right mr-4 mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold text-primary-foreground", children: [
+          balance.toLocaleString(),
+          currency
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+function InvestmentGrowthCard({
+  percentage = 8.2,
+  monthlyAverage = 12450,
+  totalValue = 24890,
+  currency = "$",
+  onPrevious,
+  onNext,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex-1 animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-40 mb-4" }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-3xl h-36" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Investment growth" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onPrevious,
+            className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "arrow_back" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onNext,
+            className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "arrow_forward" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-[hsl(25,100%,65%)] rounded-3xl p-5 relative overflow-hidden h-36 flex flex-col justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-card rounded-xl flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-foreground", children: "trending_up" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-4 bottom-4 w-40 h-40", children: [
+        /* @__PURE__ */ jsxs("svg", { className: "w-full h-full overflow-visible", viewBox: "0 0 100 50", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M 10 50 A 40 40 0 0 1 90 50",
+              fill: "none",
+              stroke: "rgba(0,0,0,0.1)",
+              strokeLinecap: "round",
+              strokeWidth: "12"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "opacity-20",
+              d: "M 60 16 A 40 40 0 0 1 90 50",
+              fill: "none",
+              stroke: "#000",
+              strokeWidth: "1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M 10 50 A 40 40 0 0 1 60 16",
+              fill: "none",
+              stroke: "hsl(var(--foreground))",
+              strokeLinecap: "round",
+              strokeWidth: "12"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "45",
+              cy: "35",
+              fill: "hsl(25,100%,75%)",
+              r: "3",
+              stroke: "hsl(var(--foreground))",
+              strokeWidth: "1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-[8px] right-[2px] w-12 h-20 rounded-tr-full pattern-lines opacity-40 rotate-12 origin-bottom-left pointer-events-none" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-end relative z-10", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold text-primary-foreground", children: [
+              percentage,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-card flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-[10px] text-foreground", children: "north_east" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-primary-foreground/70 font-medium", children: [
+            "Monthly avg: ",
+            monthlyAverage.toLocaleString(),
+            currency
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-right mr-4 mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold text-primary-foreground", children: [
+          totalValue.toLocaleString(),
+          currency
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+function BtcPriceCard({
+  price = 21105,
+  changePercentage = 28.21,
+  currency = "$",
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-primary p-6 rounded-3xl relative h-48 flex flex-col justify-between shadow-lg animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-primary-foreground/20 rounded w-16" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 bg-primary-foreground/20 rounded w-24 mt-2" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-primary p-6 rounded-3xl relative h-48 flex flex-col justify-between shadow-lg transition-transform hover:-translate-y-1 duration-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-primary-foreground/70 text-xs font-medium", children: "BTC price" }),
+        /* @__PURE__ */ jsxs("h3", { className: "text-3xl font-bold text-primary-foreground mt-1", children: [
+          price.toLocaleString(),
+          currency
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "material-icons-round text-primary-foreground/70 text-sm", children: "north_east" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold text-primary-foreground mb-1 block", children: [
+        "+",
+        changePercentage.toFixed(2),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "h-8 w-full border border-primary-foreground/50 rounded-full flex overflow-hidden relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-2/3 h-full pattern-lines border-r border-primary-foreground/50 opacity-60" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 -translate-y-1/2 left-[66%] w-3 h-3 bg-secondary border border-primary-foreground rounded-full z-10 shadow-sm" })
+      ] })
+    ] })
+  ] });
+}
+function MarketCapCard({
+  value = "1,3trln$",
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-secondary p-6 rounded-3xl relative h-48 flex flex-col justify-between shadow-lg animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-secondary-foreground/20 rounded w-32" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 bg-secondary-foreground/20 rounded w-24 mt-2" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-secondary p-6 rounded-3xl relative h-48 flex flex-col justify-between shadow-lg transition-transform hover:-translate-y-1 duration-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-secondary-foreground/70 text-xs font-medium", children: "Market cap forecast" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-3xl font-bold text-secondary-foreground mt-1", children: value })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "material-icons-round text-secondary-foreground/70 text-sm", children: "north_east" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-16 w-full flex items-end", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "w-full h-full overflow-visible",
+          preserveAspectRatio: "none",
+          viewBox: "0 0 100 40",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0 40 L0 35 Q 20 35 40 25 T 60 15 T 100 5 L 100 40 Z",
+                fill: "rgba(255,255,255,0.2)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0 35 Q 20 35 40 25 T 60 15 T 100 5",
+                fill: "none",
+                stroke: "hsl(243 40% 55%)",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "60",
+                cy: "15",
+                fill: "hsl(var(--primary))",
+                r: "3",
+                stroke: "hsl(243 40% 55%)",
+                strokeWidth: "1.5"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-[20px] left-[10px] w-full h-full flex justify-between px-2 opacity-10 pointer-events-none", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-px h-full bg-secondary-foreground" }, i)) })
+    ] })
+  ] });
+}
+var defaultForecasts = [
+  { year: "2023", description: "Explosive growth of DeFi", completed: false },
+  { year: "2024", description: "Mainstream adoption of CBDCs", completed: false },
+  { year: "2025", description: "1 BTC reaches $500K", completed: false },
+  { year: "2027", description: "Widespread retail use", completed: true }
+];
+function MarketForecastCard({
+  forecasts = defaultForecasts,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex flex-col animate-pulse", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mb-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-32" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-6", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-12" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded w-full" })
+        ] })
+      ] }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mb-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsx("span", { className: "material-icons-outlined text-primary-foreground text-lg", children: "timeline" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold w-24 leading-tight", children: "Market forecast" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative pl-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-[7px] top-2 bottom-4 w-0.5 bg-border" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-6 relative", children: forecasts.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex gap-6 relative group cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-4 h-4 rounded-full z-10 mt-1 transition-colors",
+              item.completed ? "bg-foreground shadow-md" : "border-2 border-muted-foreground bg-card group-hover:border-primary group-hover:bg-primary"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-bold text-sm", children: item.year }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 leading-relaxed", children: item.description })
+        ] })
+      ] }, item.year)) })
+    ] })
+  ] });
+}
+var defaultAllocations = [
+  { asset: "Bitcoin", symbol: "BTC", percentage: 45, color: "bg-primary" },
+  { asset: "Ethereum", symbol: "ETH", percentage: 30, color: "bg-secondary" },
+  { asset: "Solana", symbol: "SOL", percentage: 15, color: "bg-foreground" },
+  { asset: "Others", symbol: "---", percentage: 10, color: "bg-muted" }
+];
+function PortfolioAllocationCard({
+  allocations = defaultAllocations,
+  onOptionsClick,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-20" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded-full mb-6" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded" }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-secondary flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-outlined text-secondary-foreground text-lg", children: "pie_chart" }) }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Portfolio" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onOptionsClick,
+          className: "text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-xl", children: "more_horiz" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-3 w-full rounded-full flex overflow-hidden mb-6", children: allocations.map((item) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${item.color} h-full`,
+        style: { width: `${item.percentage}%` }
+      },
+      item.symbol
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: allocations.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full ${item.color}` }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: item.asset }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.symbol })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold", children: [
+        item.percentage,
+        "%"
+      ] })
+    ] }, item.symbol)) })
+  ] });
+}
+var defaultItems = [
+  { name: "Cardano", symbol: "ADA", price: "0.58", change: "+5.2%", positive: true },
+  { name: "Polkadot", symbol: "DOT", price: "7.23", change: "-2.1%", positive: false },
+  { name: "Avalanche", symbol: "AVAX", price: "35.80", change: "+12.4%", positive: true }
+];
+function WatchlistCard({
+  items = defaultItems,
+  onViewAll,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-24" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { className: "h-14 bg-muted rounded-2xl" }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-outlined text-primary-foreground text-lg", children: "visibility" }) }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Watchlist" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onViewAll,
+          className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1",
+          children: [
+            "View all",
+            /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "chevron_right" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between p-3 bg-muted/50 rounded-2xl hover:bg-muted transition-colors cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-full bg-foreground/10 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: item.symbol.slice(0, 2) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: item.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: item.symbol })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold", children: [
+              "$",
+              item.price
+            ] }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: `text-xs font-medium ${item.positive ? "text-primary-foreground bg-primary" : "text-destructive-foreground bg-destructive"} px-1.5 py-0.5 rounded-full inline-block`,
+                children: item.change
+              }
+            )
+          ] })
+        ]
+      },
+      item.symbol
+    )) })
+  ] });
+}
+var defaultUsers = [
+  {
+    alt: "User 1",
+    avatarUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuApu0rGff7tq3lGfdm47JIyS5ULIPTuAydDnsjl11A1SRLyiOGRyn1P7khEGNH0erCwP2UwyxZoeoHqrQClYEBEwItYsZk8gnHQSnu9JpXnsa__Z5Yz5Ok5PEX-qXxG_ONKWzeKdX6ALutpdIZE_VF6TiW9xKToY7KYz40rYE0xteAHzx6wSqg1iwFBNEUUlBJahjf-RzeUlEQNKDPttu4ngQK1T5XuN7Vw-VnF05ByVwaaFFbdH-M_cNmJBd4_sGrbR3ep6exhg-o"
+  },
+  {
+    alt: "User 2",
+    avatarUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuDLX09bvZI-Ho3yvNXrbVUxbOjupQc8G5HZrhkDqUUVjPq3wJ7-I6u9kwER506K-_EY5tIXPrpFo2Ep896M8cdLTb8PmEGExVwVNArKqj6nUxefS-iAT1MSTaFgWpGTUfHXGjMhZxFrapq9Jnr9Vy8hi0d2ay9Or4yLXtuBX5SNkNtSIRj24Dzdc11Y8YlJv00uNOhvrtt07arU3FIcfX48U72tlGaA37F8AWH7mNmLSlwSi1R6iGnQnjv3NDf-r7PqBdHz3LaS3Jc"
+  }
+];
+function RecentTransactionsCard({
+  summary = "12,53 ETH/1 BTC",
+  users = defaultUsers,
+  onOptionsClick,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "xl:col-span-2 bg-card p-6 rounded-3xl shadow-soft h-fit animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between items-start mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-5 bg-muted rounded w-40" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-24" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-14 bg-muted rounded-2xl" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "xl:col-span-2 bg-card p-6 rounded-3xl shadow-soft h-fit", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-foreground text-background flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-outlined", children: "bubble_chart" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Recent Transactions" }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Sell currency" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: users.map((user, index) => /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: user.alt,
+          className: "w-10 h-10 rounded-full border-2 border-card",
+          src: user.avatarUrl
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-muted p-4 rounded-2xl flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "material-icons-outlined text-muted-foreground", children: "account_balance_wallet" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: summary })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onOptionsClick,
+          className: "text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx("span", { className: "material-icons-round", children: "more_vert" })
+        }
+      )
+    ] })
+  ] });
+}
+var defaultActions = [
+  { icon: "add_circle", label: "Buy", color: "bg-primary text-primary-foreground" },
+  { icon: "remove_circle", label: "Sell", color: "bg-secondary text-secondary-foreground" },
+  { icon: "swap_horiz", label: "Swap", color: "bg-foreground text-background" },
+  { icon: "send", label: "Send", color: "bg-muted text-foreground" }
+];
+var defaultScheduledTransfer = {
+  description: "0.5 ETH \u2192 Wallet #2",
+  timeUntil: "In 2 days"
+};
+function QuickActionsCard({
+  actions = defaultActions,
+  scheduledTransfer = defaultScheduledTransfer,
+  onActionClick,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-accent-dark dark:bg-black text-accent-dark-foreground p-6 rounded-3xl shadow-soft animate-pulse", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-6 bg-white/10 rounded w-32" }),
+        /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-white/10" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-3 mb-6", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-2xl bg-white/10" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-white/10 rounded w-8" })
+      ] }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: "h-16 bg-white/5 rounded-2xl" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-accent-dark dark:bg-black text-accent-dark-foreground p-6 rounded-3xl shadow-soft", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Quick Actions" }),
+      /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-sm", children: "bolt" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-3", children: actions.map((action) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onActionClick?.(action),
+        className: "flex flex-col items-center gap-2 group",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-12 h-12 rounded-2xl ${action.color} flex items-center justify-center transition-transform group-hover:scale-110 shadow-lg`,
+              children: /* @__PURE__ */ jsx("span", { className: "material-icons-round", children: action.icon })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground group-hover:text-accent-dark-foreground transition-colors", children: action.label })
+        ]
+      },
+      action.label
+    )) }),
+    scheduledTransfer && /* @__PURE__ */ jsx("div", { className: "mt-6 p-4 bg-white/5 rounded-2xl border border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "material-icons-outlined text-primary", children: "schedule" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Scheduled transfer" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: scheduledTransfer.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: scheduledTransfer.timeUntil })
+    ] }) })
+  ] });
+}
+var defaultActions2 = [
+  { icon: "add_circle", label: "Buy" },
+  { icon: "remove_circle", label: "Sell" },
+  { icon: "swap_horiz", label: "Swap" },
+  { icon: "send", label: "Send" },
+  { icon: "account_balance_wallet", label: "Wallet" },
+  { icon: "bar_chart", label: "Analytics" }
+];
+function FloatingNavBar({
+  actions = defaultActions2,
+  onActionClick
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("svg", { className: "hidden", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "glass-distortion", children: [
+      /* @__PURE__ */ jsx(
+        "feTurbulence",
+        {
+          type: "fractalNoise",
+          baseFrequency: "0.01",
+          numOctaves: "3",
+          result: "noise"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "feDisplacementMap",
+        {
+          in: "SourceGraphic",
+          in2: "noise",
+          scale: "6",
+          xChannelSelector: "R",
+          yChannelSelector: "G"
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ jsxs("div", { className: "liquidGlass-wrapper rounded-3xl p-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "liquidGlass-effect rounded-3xl" }),
+      /* @__PURE__ */ jsx("div", { className: "liquidGlass-tint rounded-3xl" }),
+      /* @__PURE__ */ jsx("div", { className: "liquidGlass-shine rounded-3xl" }),
+      /* @__PURE__ */ jsx("div", { className: "liquidGlass-content flex items-center gap-2 sm:gap-3 px-3 sm:px-5 py-3 sm:py-4", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onActionClick?.(action),
+          className: cn(
+            "w-12 h-12 sm:w-14 sm:h-14 rounded-2xl bg-background/40 hover:bg-primary hover:text-primary-foreground items-center justify-center transition-all duration-300 hover:scale-110 group backdrop-blur-sm",
+            index < 4 ? "flex" : "hidden sm:flex"
+          ),
+          title: action.label,
+          children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-2xl sm:text-3xl group-hover:text-primary-foreground transition-colors", children: action.icon })
+        },
+        action.label
+      )) })
+    ] }) })
+  ] });
+}
+var defaultNavItems = [
+  { icon: "dashboard", label: "Dashboard", active: true },
+  { icon: "account_balance_wallet", label: "Wallet", active: false },
+  { icon: "analytics", label: "Analytics", active: false },
+  { icon: "swap_horiz", label: "Transactions", active: false }
+];
+var defaultUser = {
+  name: "Alex Morgan",
+  role: "Premium User",
+  avatarUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuAOo_5Kr126T6MHRuT6vvn0AOhE9osWQx3QcuqMljDeMkNf_ZbpM3o6GJnJRnZ78mRrjXpZkmn2bZXZrEp37pv7z35DJzPgruHStOKVsKzyird-Athm2EOkwXhcivP6D_kuA9Z-o2OGONNpa5Us1pXcuKJNWbzqImuWkfYkTdFzv1BUayGF_VyekDIcygoEPjacRcsarKHujq1Yfc57ux_DdoufrlRxVnNfiDWra2_OVlievLaWr_kC-4NriyAzRUctHgucD15RZy0"
+};
+function Sidebar({
+  navItems = defaultNavItems,
+  user = defaultUser,
+  onToggleTheme,
+  isCollapsed,
+  onToggleCollapse,
+  onNavItemClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "h-screen fixed left-0 top-0 border-r border-border flex-col justify-between py-8 px-4 z-50 transition-all duration-300 bg-card hidden lg:flex",
+        isCollapsed ? "w-20" : "w-20 lg:w-64"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center lg:justify-start lg:px-4 mb-12", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-primary-foreground font-bold text-xl", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round", children: "grid_view" }) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "ml-3 font-bold text-xl tracking-tight transition-opacity duration-200",
+                  isCollapsed ? "hidden" : "hidden lg:block"
+                ),
+                children: "FinDash"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: navItems.map((item) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: item.href || "#",
+              onClick: (e) => {
+                e.preventDefault();
+                onNavItemClick?.(item);
+              },
+              className: cn(
+                "flex items-center justify-center lg:justify-start lg:px-4 py-3 rounded-xl transition-colors",
+                item.active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                isCollapsed && "lg:justify-center lg:px-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "material-icons-round text-2xl", children: item.icon }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "ml-4 font-medium transition-opacity duration-200",
+                      isCollapsed ? "hidden" : "hidden lg:block"
+                    ),
+                    children: item.label
+                  }
+                )
+              ]
+            },
+            item.label
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center lg:justify-start lg:px-4 py-3 mb-4", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: "User Profile",
+                className: "w-10 h-10 rounded-full border-2 border-card",
+                src: user.avatarUrl
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("ml-3", isCollapsed ? "hidden" : "hidden lg:block"), children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: user.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: user.role })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: onToggleTheme,
+              className: cn(
+                "w-full flex items-center justify-center lg:justify-start lg:px-4 py-3 text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-xl transition-colors",
+                isCollapsed && "lg:justify-center lg:px-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "material-icons-round text-2xl", children: "dark_mode" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "ml-4 font-medium transition-opacity duration-200",
+                      isCollapsed ? "hidden" : "hidden lg:block"
+                    ),
+                    children: "Toggle Theme"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: onToggleCollapse,
+              className: cn(
+                "hidden lg:flex w-full items-center justify-center lg:justify-start lg:px-4 py-3 text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-xl transition-colors mt-2",
+                isCollapsed && "lg:justify-center lg:px-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "material-icons-round text-2xl transition-transform duration-300",
+                      isCollapsed ? "rotate-180" : ""
+                    ),
+                    children: "chevron_left"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "ml-4 font-medium transition-opacity duration-200",
+                      isCollapsed ? "hidden" : "block"
+                    ),
+                    children: "Collapse"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var defaultNavItems2 = [
+  { icon: "dashboard", label: "Dashboard", active: true },
+  { icon: "account_balance_wallet", label: "Wallet", active: false },
+  { icon: "analytics", label: "Analytics", active: false },
+  { icon: "swap_horiz", label: "Transactions", active: false }
+];
+var defaultUser2 = {
+  name: "Alex Morgan",
+  role: "Premium User",
+  avatarUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuAOo_5Kr126T6MHRuT6vvn0AOhE9osWQx3QcuqMljDeMkNf_ZbpM3o6GJnJRnZ78mRrjXpZkmn2bZXZrEp37pv7z35DJzPgruHStOKVsKzyird-Athm2EOkwXhcivP6D_kuA9Z-o2OGONNpa5Us1pXcuKJNWbzqImuWkfYkTdFzv1BUayGF_VyekDIcygoEPjacRcsarKHujq1Yfc57ux_DdoufrlRxVnNfiDWra2_OVlievLaWr_kC-4NriyAzRUctHgucD15RZy0"
+};
+function MobileNav({
+  navItems = defaultNavItems2,
+  user = defaultUser2,
+  onToggleTheme,
+  onNavItemClick
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "lg:hidden fixed top-0 left-0 right-0 h-16 bg-card border-b border-border flex items-center justify-between px-4 z-50", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-primary-foreground font-bold text-xl", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round", children: "grid_view" }) }),
+        /* @__PURE__ */ jsx("span", { className: "ml-3 font-bold text-xl tracking-tight", children: "FinDash" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onToggleTheme,
+            className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-muted transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-2xl", children: "dark_mode" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsMenuOpen(true),
+            className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-muted transition-colors",
+            children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-2xl", children: "menu" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "lg:hidden fixed inset-0 bg-black/50 z-[99] transition-opacity duration-300",
+          isMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+        ),
+        onClick: () => setIsMenuOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "lg:hidden fixed top-0 right-0 h-full w-1/2 min-w-[280px] max-w-[400px] bg-background z-[100] transition-transform duration-300 flex flex-col shadow-2xl",
+          isMenuOpen ? "translate-x-0" : "translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "h-16 flex items-center justify-between px-4 border-b border-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-primary-foreground font-bold text-xl", children: /* @__PURE__ */ jsx("span", { className: "material-icons-round", children: "grid_view" }) }),
+              /* @__PURE__ */ jsx("span", { className: "ml-3 font-bold text-xl tracking-tight", children: "FinDash" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsMenuOpen(false),
+                className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-muted transition-colors",
+                children: /* @__PURE__ */ jsx("span", { className: "material-icons-round text-2xl", children: "close" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("nav", { className: "flex-1 flex flex-col items-center justify-center gap-4 p-6", children: navItems.map((item) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: item.href || "#",
+              onClick: (e) => {
+                e.preventDefault();
+                onNavItemClick?.(item);
+                setIsMenuOpen(false);
+              },
+              className: cn(
+                "w-full max-w-sm flex items-center gap-4 px-6 py-4 rounded-2xl transition-colors text-lg",
+                item.active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "material-icons-round text-3xl", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: item.label })
+              ]
+            },
+            item.label
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: "User Profile",
+                className: "w-10 h-10 rounded-full border-2 border-card",
+                src: user.avatarUrl
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: user.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: user.role })
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DashboardTemplate({
+  data = {},
+  isLoading = false,
+  onThemeToggle,
+  onNavItemClick,
+  onActionClick,
+  className
+}) {
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen flex pb-24", className), children: [
+    /* @__PURE__ */ jsx(MobileNav, { onToggleTheme: onThemeToggle || (() => {
+    }), onNavItemClick, user: data.user }),
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        onToggleTheme: onThemeToggle || (() => {
+        }),
+        isCollapsed: isSidebarCollapsed,
+        onToggleCollapse: () => setIsSidebarCollapsed(!isSidebarCollapsed),
+        onNavItemClick,
+        user: data.user
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: cn("flex-1 p-6 lg:p-10 max-w-[1600px] mx-auto transition-all duration-300 pt-20 lg:pt-6", isSidebarCollapsed ? "lg:ml-20" : "ml-0 lg:ml-64"), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6 flex flex-col", children: [
+        /* @__PURE__ */ jsx(SalesStatisticsCard, { visitors: data.salesStatistics?.visitors, updatedDaysAgo: data.salesStatistics?.updatedDaysAgo, isLoading }),
+        /* @__PURE__ */ jsx(CurrentBalanceCard, { balance: data.balance?.currentBalance, percentageChange: data.balance?.percentageChange, averageScore: data.balance?.averageScore, isLoading }),
+        /* @__PURE__ */ jsx(InvestmentGrowthCard, { percentage: data.investmentGrowth?.percentage, monthlyAverage: data.investmentGrowth?.monthlyAverage, totalValue: data.investmentGrowth?.totalValue, isLoading })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "md:col-span-1 xl:col-span-2 grid grid-cols-1 xl:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ jsx(RecentTransactionsCard, { summary: data.transactions?.summary, users: data.transactions?.users, isLoading }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6 flex flex-col", children: [
+          /* @__PURE__ */ jsx(MarketForecastCard, { forecasts: data.forecasts, isLoading }),
+          /* @__PURE__ */ jsx(PortfolioAllocationCard, { allocations: data.portfolio, isLoading })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6 flex flex-col", children: [
+          /* @__PURE__ */ jsx(BtcPriceCard, { price: data.btcPrice?.price, changePercentage: data.btcPrice?.changePercentage, isLoading }),
+          /* @__PURE__ */ jsx(MarketCapCard, { value: data.marketCap?.value, isLoading }),
+          /* @__PURE__ */ jsx(WatchlistCard, { items: data.watchlist, isLoading })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(FloatingNavBar, { onActionClick })
+  ] });
+}
+
+export { BtcPriceCard, CurrentBalanceCard, DashboardTemplate, FloatingNavBar, InvestmentGrowthCard, MarketCapCard, MarketForecastCard, MobileNav, PortfolioAllocationCard, QuickActionsCard, RecentTransactionsCard, SalesStatisticsCard, Sidebar, WatchlistCard, cn };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map