@rayvelez/findash-ui 1.1.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +77 -174
  2. package/dist/index.d.mts +12 -1
  3. package/dist/index.d.ts +12 -1
  4. package/dist/index.js +89 -37
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +90 -39
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/theme.css +2 -188
  9. package/package.json +5 -3
  10. package/tailwind.preset.js +20 -2
package/dist/index.js CHANGED
@@ -8,6 +8,56 @@ var react = require('react');
8
8
  function cn(...inputs) {
9
9
  return tailwindMerge.twMerge(clsx.clsx(inputs));
10
10
  }
11
+ var icons = {
12
+ add_circle: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" }),
13
+ remove_circle: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" }),
14
+ swap_horiz: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" }),
15
+ send: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }),
16
+ account_balance_wallet: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }),
17
+ bar_chart: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 9h4v11H4V9zm6-5h4v16h-4V4zm6 8h4v8h-4v-8z" }),
18
+ arrow_back: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }),
19
+ arrow_forward: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }),
20
+ show_chart: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z" }),
21
+ trending_up: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" }),
22
+ dark_mode: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" }),
23
+ menu: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }),
24
+ grid_view: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z" }),
25
+ close: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
26
+ more_horiz: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }),
27
+ more_vert: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }),
28
+ bolt: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z" }),
29
+ schedule: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" }),
30
+ bubble_chart: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
31
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7.2", cy: "14.4", r: "3.2" }),
32
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "14.8", cy: "18", r: "2" }),
33
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.2", cy: "8.8", r: "4.8" })
34
+ ] }),
35
+ expand_more: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }),
36
+ dashboard: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" }),
37
+ analytics: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" }),
38
+ chevron_right: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }),
39
+ arrow_outward: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z" }),
40
+ north_east: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z" }),
41
+ arrow_upward: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }),
42
+ timeline: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z" }),
43
+ pie_chart: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z" }),
44
+ visibility: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }),
45
+ chevron_left: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
46
+ };
47
+ function Icon({ name, className, size = 24 }) {
48
+ return /* @__PURE__ */ jsxRuntime.jsx(
49
+ "svg",
50
+ {
51
+ xmlns: "http://www.w3.org/2000/svg",
52
+ viewBox: "0 0 24 24",
53
+ fill: "currentColor",
54
+ width: size,
55
+ height: size,
56
+ className: cn("inline-block shrink-0", className),
57
+ children: icons[name]
58
+ }
59
+ );
60
+ }
11
61
  function SalesStatisticsCard({
12
62
  visitors = 2025,
13
63
  updatedDaysAgo = 1,
@@ -39,7 +89,7 @@ function SalesStatisticsCard({
39
89
  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",
40
90
  children: [
41
91
  "Monthly",
42
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "expand_more" })
92
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "expand_more", size: 14 })
43
93
  ]
44
94
  }
45
95
  )
@@ -47,7 +97,7 @@ function SalesStatisticsCard({
47
97
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 z-10 relative", children: [
48
98
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
49
99
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "Visitors" }),
50
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-primary-foreground text-xs transform rotate-45", children: "arrow_upward" }) })
100
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow_upward", size: 12, className: "text-primary-foreground rotate-45" }) })
51
101
  ] }),
52
102
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-5xl font-medium tracking-tight", children: visitors.toLocaleString() })
53
103
  ] }),
@@ -89,7 +139,7 @@ function CurrentBalanceCard({
89
139
  {
90
140
  onClick: onPrevious,
91
141
  className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
92
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "arrow_back" })
142
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow_back", size: 14 })
93
143
  }
94
144
  ),
95
145
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -97,13 +147,13 @@ function CurrentBalanceCard({
97
147
  {
98
148
  onClick: onNext,
99
149
  className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
100
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "arrow_forward" })
150
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow_forward", size: 14 })
101
151
  }
102
152
  )
103
153
  ] })
104
154
  ] }),
105
155
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-primary rounded-3xl p-5 relative overflow-hidden h-36 flex flex-col justify-between", children: [
106
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 bg-card rounded-xl flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-foreground", children: "show_chart" }) }),
156
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 bg-card rounded-xl flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "show_chart", size: 24, className: "text-foreground" }) }),
107
157
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-4 bottom-4 w-40 h-40", children: [
108
158
  /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-full h-full overflow-visible", viewBox: "0 0 100 50", children: [
109
159
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -157,7 +207,7 @@ function CurrentBalanceCard({
157
207
  percentageChange,
158
208
  "%"
159
209
  ] }),
160
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 rounded-full bg-card flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-[10px] text-foreground", children: "north_east" }) })
210
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 rounded-full bg-card flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "north_east", size: 10, className: "text-foreground" }) })
161
211
  ] }),
162
212
  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-primary-foreground/70 font-medium", children: [
163
213
  "Avg score: ",
@@ -197,7 +247,7 @@ function InvestmentGrowthCard({
197
247
  {
198
248
  onClick: onPrevious,
199
249
  className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
200
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "arrow_back" })
250
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow_back", size: 14 })
201
251
  }
202
252
  ),
203
253
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -205,13 +255,13 @@ function InvestmentGrowthCard({
205
255
  {
206
256
  onClick: onNext,
207
257
  className: "w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors",
208
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "arrow_forward" })
258
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow_forward", size: 14 })
209
259
  }
210
260
  )
211
261
  ] })
212
262
  ] }),
213
263
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[hsl(25,100%,65%)] rounded-3xl p-5 relative overflow-hidden h-36 flex flex-col justify-between", children: [
214
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 bg-card rounded-xl flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-foreground", children: "trending_up" }) }),
264
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 bg-card rounded-xl flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "trending_up", size: 24, className: "text-foreground" }) }),
215
265
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-4 bottom-4 w-40 h-40", children: [
216
266
  /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-full h-full overflow-visible", viewBox: "0 0 100 50", children: [
217
267
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -265,7 +315,7 @@ function InvestmentGrowthCard({
265
315
  percentage,
266
316
  "%"
267
317
  ] }),
268
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 rounded-full bg-card flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-[10px] text-foreground", children: "north_east" }) })
318
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 rounded-full bg-card flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "north_east", size: 10, className: "text-foreground" }) })
269
319
  ] }),
270
320
  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-primary-foreground/70 font-medium", children: [
271
321
  "Monthly avg: ",
@@ -302,7 +352,7 @@ function BtcPriceCard({
302
352
  currency
303
353
  ] })
304
354
  ] }),
305
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-primary-foreground/70 text-sm", children: "north_east" })
355
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "north_east", size: 14, className: "text-primary-foreground/70" })
306
356
  ] }),
307
357
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
308
358
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold text-primary-foreground mb-1 block", children: [
@@ -333,7 +383,7 @@ function MarketCapCard({
333
383
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-secondary-foreground/70 text-xs font-medium", children: "Market cap forecast" }),
334
384
  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-3xl font-bold text-secondary-foreground mt-1", children: value })
335
385
  ] }),
336
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-secondary-foreground/70 text-sm", children: "north_east" })
386
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "north_east", size: 14, className: "text-secondary-foreground/70" })
337
387
  ] }),
338
388
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-16 w-full flex items-end", children: [
339
389
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -404,7 +454,7 @@ function MarketForecastCard({
404
454
  }
405
455
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft flex flex-col", children: [
406
456
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 mb-8", children: [
407
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-outlined text-primary-foreground text-lg", children: "timeline" }) }),
457
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "timeline", size: 18, className: "text-primary-foreground" }) }),
408
458
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold w-24 leading-tight", children: "Market forecast" })
409
459
  ] }),
410
460
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-2", children: [
@@ -451,7 +501,7 @@ function PortfolioAllocationCard({
451
501
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft", children: [
452
502
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
453
503
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
454
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-secondary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-outlined text-secondary-foreground text-lg", children: "pie_chart" }) }),
504
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-secondary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "pie_chart", size: 18, className: "text-secondary-foreground" }) }),
455
505
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold", children: "Portfolio" })
456
506
  ] }),
457
507
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -459,7 +509,7 @@ function PortfolioAllocationCard({
459
509
  {
460
510
  onClick: onOptionsClick,
461
511
  className: "text-muted-foreground hover:text-foreground transition-colors",
462
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-xl", children: "more_horiz" })
512
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more_horiz", size: 20 })
463
513
  }
464
514
  )
465
515
  ] }),
@@ -506,7 +556,7 @@ function WatchlistCard({
506
556
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-6 rounded-3xl shadow-soft", children: [
507
557
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
508
558
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
509
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-outlined text-primary-foreground text-lg", children: "visibility" }) }),
559
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "visibility", size: 18, className: "text-primary-foreground" }) }),
510
560
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold", children: "Watchlist" })
511
561
  ] }),
512
562
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -516,7 +566,7 @@ function WatchlistCard({
516
566
  className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1",
517
567
  children: [
518
568
  "View all",
519
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "chevron_right" })
569
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right", size: 14 })
520
570
  ]
521
571
  }
522
572
  )
@@ -583,7 +633,7 @@ function RecentTransactionsCard({
583
633
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xl:col-span-2 bg-card p-6 rounded-3xl shadow-soft h-fit", children: [
584
634
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start mb-6", children: [
585
635
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
586
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full bg-foreground text-background flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-outlined", children: "bubble_chart" }) }),
636
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full bg-foreground text-background flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "bubble_chart", size: 24 }) }),
587
637
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
588
638
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold", children: "Recent Transactions" }),
589
639
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: "Sell currency" })
@@ -601,7 +651,7 @@ function RecentTransactionsCard({
601
651
  ] }),
602
652
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted p-4 rounded-2xl flex justify-between items-center", children: [
603
653
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
604
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-outlined text-muted-foreground", children: "account_balance_wallet" }),
654
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "account_balance_wallet", size: 24, className: "text-muted-foreground" }),
605
655
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: summary })
606
656
  ] }),
607
657
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -609,7 +659,7 @@ function RecentTransactionsCard({
609
659
  {
610
660
  onClick: onOptionsClick,
611
661
  className: "text-muted-foreground hover:text-foreground",
612
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round", children: "more_vert" })
662
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more_vert", size: 24 })
613
663
  }
614
664
  )
615
665
  ] })
@@ -647,7 +697,7 @@ function QuickActionsCard({
647
697
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-accent-dark dark:bg-black text-accent-dark-foreground p-6 rounded-3xl shadow-soft", children: [
648
698
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
649
699
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold", children: "Quick Actions" }),
650
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-sm", children: "bolt" }) })
700
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "bolt", size: 14 }) })
651
701
  ] }),
652
702
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-3", children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
653
703
  "button",
@@ -659,7 +709,7 @@ function QuickActionsCard({
659
709
  "div",
660
710
  {
661
711
  className: `w-12 h-12 rounded-2xl ${action.color} flex items-center justify-center transition-transform group-hover:scale-110 shadow-lg`,
662
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round", children: action.icon })
712
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: 24 })
663
713
  }
664
714
  ),
665
715
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground group-hover:text-accent-dark-foreground transition-colors", children: action.label })
@@ -669,7 +719,7 @@ function QuickActionsCard({
669
719
  )) }),
670
720
  scheduledTransfer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 p-4 bg-white/5 rounded-2xl border border-white/10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
671
721
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
672
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-outlined text-primary", children: "schedule" }),
722
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "schedule", size: 24, className: "text-primary" }),
673
723
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
674
724
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Scheduled transfer" }),
675
725
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: scheduledTransfer.description })
@@ -726,7 +776,7 @@ function FloatingNavBar({
726
776
  index < 4 ? "flex" : "hidden sm:flex"
727
777
  ),
728
778
  title: action.label,
729
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-2xl sm:text-3xl group-hover:text-primary-foreground transition-colors", children: action.icon })
779
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: 28, className: "group-hover:text-primary-foreground transition-colors" })
730
780
  },
731
781
  action.label
732
782
  )) })
@@ -762,7 +812,7 @@ function Sidebar({
762
812
  children: [
763
813
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
764
814
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center lg:justify-start lg:px-4 mb-12", children: [
765
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "material-icons-round", children: "grid_view" }) }),
815
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: "grid_view", size: 24 }) }),
766
816
  /* @__PURE__ */ jsxRuntime.jsx(
767
817
  "span",
768
818
  {
@@ -788,7 +838,7 @@ function Sidebar({
788
838
  isCollapsed && "lg:justify-center lg:px-0"
789
839
  ),
790
840
  children: [
791
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-2xl", children: item.icon }),
841
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: 24 }),
792
842
  /* @__PURE__ */ jsxRuntime.jsx(
793
843
  "span",
794
844
  {
@@ -828,7 +878,7 @@ function Sidebar({
828
878
  isCollapsed && "lg:justify-center lg:px-0"
829
879
  ),
830
880
  children: [
831
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-2xl", children: "dark_mode" }),
881
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "dark_mode", size: 24 }),
832
882
  /* @__PURE__ */ jsxRuntime.jsx(
833
883
  "span",
834
884
  {
@@ -852,13 +902,14 @@ function Sidebar({
852
902
  ),
853
903
  children: [
854
904
  /* @__PURE__ */ jsxRuntime.jsx(
855
- "span",
905
+ Icon,
856
906
  {
907
+ name: "chevron_left",
908
+ size: 24,
857
909
  className: cn(
858
- "material-icons-round text-2xl transition-transform duration-300",
910
+ "transition-transform duration-300",
859
911
  isCollapsed ? "rotate-180" : ""
860
- ),
861
- children: "chevron_left"
912
+ )
862
913
  }
863
914
  ),
864
915
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -900,7 +951,7 @@ function MobileNav({
900
951
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
901
952
  /* @__PURE__ */ jsxRuntime.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: [
902
953
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
903
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "material-icons-round", children: "grid_view" }) }),
954
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: "grid_view", size: 24 }) }),
904
955
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 font-bold text-xl tracking-tight", children: "FinDash" })
905
956
  ] }),
906
957
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -909,7 +960,7 @@ function MobileNav({
909
960
  {
910
961
  onClick: onToggleTheme,
911
962
  className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-muted transition-colors",
912
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-2xl", children: "dark_mode" })
963
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "dark_mode", size: 24 })
913
964
  }
914
965
  ),
915
966
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -917,7 +968,7 @@ function MobileNav({
917
968
  {
918
969
  onClick: () => setIsMenuOpen(true),
919
970
  className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-muted transition-colors",
920
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-2xl", children: "menu" })
971
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "menu", size: 24 })
921
972
  }
922
973
  )
923
974
  ] })
@@ -942,7 +993,7 @@ function MobileNav({
942
993
  children: [
943
994
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-16 flex items-center justify-between px-4 border-b border-border", children: [
944
995
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
945
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "material-icons-round", children: "grid_view" }) }),
996
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: "grid_view", size: 24 }) }),
946
997
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 font-bold text-xl tracking-tight", children: "FinDash" })
947
998
  ] }),
948
999
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -950,7 +1001,7 @@ function MobileNav({
950
1001
  {
951
1002
  onClick: () => setIsMenuOpen(false),
952
1003
  className: "w-10 h-10 flex items-center justify-center rounded-xl hover:bg-muted transition-colors",
953
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-2xl", children: "close" })
1004
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", size: 24 })
954
1005
  }
955
1006
  )
956
1007
  ] }),
@@ -968,7 +1019,7 @@ function MobileNav({
968
1019
  item.active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
969
1020
  ),
970
1021
  children: [
971
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-icons-round text-3xl", children: item.icon }),
1022
+ /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: 30 }),
972
1023
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: item.label })
973
1024
  ]
974
1025
  },
@@ -1043,6 +1094,7 @@ exports.BtcPriceCard = BtcPriceCard;
1043
1094
  exports.CurrentBalanceCard = CurrentBalanceCard;
1044
1095
  exports.DashboardTemplate = DashboardTemplate;
1045
1096
  exports.FloatingNavBar = FloatingNavBar;
1097
+ exports.Icon = Icon;
1046
1098
  exports.InvestmentGrowthCard = InvestmentGrowthCard;
1047
1099
  exports.MarketCapCard = MarketCapCard;
1048
1100
  exports.MarketForecastCard = MarketForecastCard;