@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/metrics/Growth.js

@@ -0,0 +1,40 @@
+"use client";
+
+// .generated/catalog/components/metrics/Growth.tsx
+import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Growth() {
+  const renderBar = (cols, rows) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid gap-[2px] w-full",
+        style: {
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%)",
+          maskImage: "linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%)"
+        },
+        children: Array.from({ length: cols * rows }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-square bg-neutral-200 rounded-[1px]" }, i))
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "bg-[#121212] border border-white/5 rounded-[2rem] p-8 flex flex-col h-full min-h-[400px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-medium text-neutral-200", children: "Growth" }),
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-5 h-5 text-neutral-500" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-[13px] text-neutral-400 mb-8", children: "Celebrate your financial success" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 mb-12", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-4xl font-semibold text-white tracking-tight", children: "$7,432.58" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-emerald-400", children: "\u2191 8.3%" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 mt-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderBar(14, 16) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderBar(14, 28) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderBar(14, 46) })
+    ] })
+  ] });
+}
+export {
+  Growth as default
+};

package/dist/catalog/components/metrics/GrowthCalendar.d.ts

@@ -0,0 +1 @@
+export default function GrowthCalendar(): import("react").JSX.Element;

package/dist/catalog/components/metrics/GrowthCalendar.js

@@ -0,0 +1,87 @@
+"use client";
+
+// .generated/catalog/components/metrics/GrowthCalendar.tsx
+import { Star } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GrowthCalendar() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-6 font-sans w-fit mx-auto items-center md:items-stretch", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-[#1C1C1C] rounded-[2rem] p-7 w-[300px] shadow-2xl flex flex-col justify-between border border-neutral-800 relative overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 w-48 h-48 bg-purple-500/10 rounded-full blur-[60px] pointer-events-none" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(Star, { className: "w-5 h-5 fill-white text-white" }),
+            /* @__PURE__ */ jsx("span", { className: "text-white text-[15px] font-medium", children: "Users growth" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-full bg-neutral-800 overflow-hidden border border-neutral-700", children: /* @__PURE__ */ jsx("img", { src: "https://i.pravatar.cc/100?img=11", alt: "User", className: "w-full h-full object-cover" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-3 mb-10", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-indigo-300", children: /* @__PURE__ */ jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "7", y1: "17", x2: "17", y2: "7" }),
+            /* @__PURE__ */ jsx("polyline", { points: "7 7 17 7 17 17" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-[40px] font-medium text-white tracking-tight leading-none", children: "+88.3%" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-[11px] text-neutral-400 font-medium pb-1 flex items-center gap-0.5", children: [
+            "+1.78% ",
+            /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "\u2197" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 relative z-10", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-11 w-[55%] bg-white rounded-full flex items-center px-4 relative overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-neutral-900 relative z-10", children: "12.01" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-11 w-[75%] bg-white rounded-full flex items-center px-4 relative overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-neutral-900 relative z-10", children: "13.01" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-[52px] w-full bg-gradient-to-r from-[#A5B4FC] via-[#D8B4FE] to-[#A5B4FC] rounded-full flex items-center px-4 shadow-[inset_0_2px_4px_rgba(255,255,255,0.4)] border border-purple-200/20", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-neutral-900", children: "14.01" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-[#F8F9FA] rounded-[2rem] p-7 w-[300px] shadow-2xl shadow-neutral-200/40 border border-neutral-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-8", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[15px] font-medium text-neutral-900", children: "Calendar" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-medium text-indigo-500 cursor-pointer flex items-center gap-1.5", children: [
+          "September 2024 ",
+          /* @__PURE__ */ jsx("span", { className: "text-[8px]", children: "\u25BC" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-y-4 gap-x-2 text-center text-[13px]", children: [
+        ["S", "M", "T", "W", "T", "F", "S"].map((d) => /* @__PURE__ */ jsx("div", { className: "font-medium text-neutral-600 mb-2", children: d }, d)),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "29" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "30" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "31" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "01" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-indigo-500 text-white w-8 h-8 flex items-center justify-center rounded-full mx-auto font-bold shadow-sm", children: "02" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "03" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "04" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "05" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "06" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-900 font-bold", children: "07" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "08" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "09" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "10" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "11" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "12" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "13" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "14" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "15" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-900 font-bold", children: "16" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-900 font-bold", children: "17" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "18" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "19" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-emerald-300 text-neutral-900 w-8 h-8 flex items-center justify-center rounded-full mx-auto font-bold shadow-sm", children: "20" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "21" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "22" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "23" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "24" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "25" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "26" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "27" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "28" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "29" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "30" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "31" }),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: "31" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  GrowthCalendar as default
+};

package/dist/catalog/components/metrics/HealthCards.d.ts

@@ -0,0 +1 @@
+export default function HealthCards(): import("react").JSX.Element;

package/dist/catalog/components/metrics/HealthCards.js

@@ -0,0 +1,244 @@
+"use client";
+
+// .generated/catalog/components/metrics/HealthCards.tsx
+import { ChevronUp, Info } from "lucide-react";
+import { AreaChart, Area, BarChart, Bar, Cell, ResponsiveContainer, Tooltip } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var workoutData = [
+  { day: "Mon", value: 20 },
+  { day: "Tue", value: 40 },
+  { day: "Wed", value: 30 },
+  { day: "Thu", value: 60 },
+  { day: "Fri", value: 45 }
+];
+var stepData = [
+  { time: "AM", value: 1e3 },
+  { time: "05 AM", value: 2e3 },
+  { time: "06 AM", value: 1500 },
+  { time: "07 AM", value: 4e3 },
+  { time: "08 AM", value: 5093 }
+];
+var hrData = Array.from({ length: 40 }).map((_, i) => ({
+  time: i,
+  value: 60 + Math.random() * 40,
+  isHigh: i > 25 && i < 35
+}));
+function HealthCards() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto font-sans bg-neutral-100 p-8 rounded-[2rem]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl p-5 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center bg-red-50 text-red-500 rounded-full text-[12px]", children: "\u{1F3AF}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-neutral-900 leading-tight", children: "Your daily goals" }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Last 7 Day" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-neutral-600" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[13px] font-medium text-neutral-600 mb-2", children: [
+          /* @__PURE__ */ jsx("span", { children: "Achieved" }),
+          /* @__PURE__ */ jsx("span", { children: "4/7" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full bg-neutral-100 rounded-full mb-6 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-[#D8B4FE] w-[60%]" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: [1, 2, 3, 4, 5, 6, 7].map((i) => {
+          const percent = i <= 4 ? 1 : 0;
+          const dashoffset = 88 * (1 - percent);
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full border-[3px] border-[#F3E8FF] relative flex items-center justify-center", children: percent > 0 && /* @__PURE__ */ jsx("svg", { className: "absolute inset-0 w-full h-full -rotate-90", viewBox: "0 0 32 32", children: /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "14", fill: "none", stroke: "#A855F7", strokeWidth: "3", strokeDasharray: "88", strokeDashoffset: dashoffset, strokeLinecap: "round" }) }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-neutral-500", children: ["S", "M", "T", "W", "T", "F", "S"][i - 1] })
+          ] }, i);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl p-5 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center text-red-500 text-[14px]", children: "\u{1FA78}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-neutral-900 leading-tight", children: "Period" }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Last 7 Day" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-neutral-600" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[13px] font-medium text-neutral-600 mb-2", children: [
+          /* @__PURE__ */ jsx("span", { children: "Day of Cycle" }),
+          /* @__PURE__ */ jsx("span", { children: "7/9hr" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full bg-neutral-100 rounded-full mb-6 flex", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-[#FECDD3] w-[80%] rounded-full" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: [1, 2, 3, 4, 5, 6, 7].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: `w-6 h-6 rounded-full ${i <= 6 ? "bg-[#FECDD3]" : "bg-neutral-100"}` }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-neutral-500", children: ["S", "M", "T", "W", "T", "F", "S"][i - 1] })
+        ] }, i)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl p-5 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center text-blue-400 text-[14px]", children: "\u{1F4A7}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-neutral-900 leading-tight", children: "Hydration" }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Last 7 Day" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-neutral-600" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[13px] font-medium text-neutral-600 mb-2", children: [
+          /* @__PURE__ */ jsx("span", { children: "Today" }),
+          /* @__PURE__ */ jsx("span", { children: "1,203/1,500cal" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full bg-neutral-100 rounded-full mb-6 flex overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-[#BAE6FD] w-[80%]" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: [1, 2, 3, 4, 5, 6, 7].map((i) => {
+          const percent = i <= 4 ? 1 : i === 5 ? 0.6 : 0;
+          const dashoffset = 88 * (1 - percent);
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full border-[3px] border-[#E0F2FE] relative flex items-center justify-center", children: percent > 0 && /* @__PURE__ */ jsx("svg", { className: "absolute inset-0 w-full h-full -rotate-90", viewBox: "0 0 32 32", children: /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "14", fill: "none", stroke: "#38BDF8", strokeWidth: "3", strokeDasharray: "88", strokeDashoffset: dashoffset, strokeLinecap: "round" }) }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-neutral-500", children: ["S", "M", "T", "W", "T", "F", "S"][i - 1] })
+          ] }, i);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-[#0A0A0A] rounded-3xl p-5 text-white shadow-xl relative overflow-hidden h-[180px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6 relative z-10", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold", children: "Workout Stats" }),
+          /* @__PURE__ */ jsx(Info, { className: "w-4 h-4 text-neutral-400" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] font-medium text-neutral-400 mb-6 relative z-10 px-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "bg-white text-black px-3 py-1 rounded-full", children: "Day" }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 py-1", children: "Week" }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 py-1", children: "Month" }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 py-1", children: "Year" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-0 right-0 h-[80px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: workoutData, margin: { top: 5, right: 0, left: 0, bottom: 0 }, children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "workoutGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#A855F7", stopOpacity: 0.4 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#A855F7", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tooltip, { contentStyle: { backgroundColor: "#262626", border: "none", borderRadius: "8px", color: "#fff" }, itemStyle: { color: "#A855F7" }, labelStyle: { display: "none" } }),
+          /* @__PURE__ */ jsx(Area, { type: "monotone", dataKey: "value", stroke: "#A855F7", strokeWidth: 3, fill: "url(#workoutGrad)", activeDot: { r: 6, fill: "#A855F7", stroke: "#fff", strokeWidth: 2 } })
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-neutral-500 absolute bottom-4 left-4 right-4 z-10", children: [
+          /* @__PURE__ */ jsx("span", { children: "Mon" }),
+          /* @__PURE__ */ jsx("span", { children: "Tue" }),
+          /* @__PURE__ */ jsx("span", { children: "Wed" }),
+          /* @__PURE__ */ jsx("span", { children: "Thu" }),
+          /* @__PURE__ */ jsx("span", { children: "Fri" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-[#0A0A0A] rounded-3xl p-5 text-white shadow-xl relative overflow-hidden h-[180px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-2 relative z-10", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[12px] font-medium text-neutral-400", children: "Daily Average" }),
+          /* @__PURE__ */ jsx(Info, { className: "w-4 h-4 text-neutral-400" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-6 relative z-10", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-6 h-6 bg-yellow-100 rounded-full flex items-center justify-center text-[12px]", children: "\u{1F3C3}" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-[28px] font-semibold tracking-tight leading-none", children: [
+            "5.093 ",
+            /* @__PURE__ */ jsx("span", { className: "text-[12px] text-neutral-500 font-medium tracking-normal", children: "STEPS" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-0 right-0 h-[80px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: stepData, margin: { top: 5, right: 0, left: 0, bottom: 0 }, children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "stepGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#A855F7", stopOpacity: 0.4 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#A855F7", stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tooltip, { contentStyle: { backgroundColor: "#262626", border: "none", borderRadius: "8px", color: "#fff" }, itemStyle: { color: "#A855F7" }, labelStyle: { display: "none" } }),
+          /* @__PURE__ */ jsx(Area, { type: "monotone", dataKey: "value", stroke: "#A855F7", strokeWidth: 3, fill: "url(#stepGrad)", activeDot: { r: 6, fill: "#A855F7", stroke: "#fff", strokeWidth: 2 } })
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[9px] font-medium text-neutral-500 absolute bottom-3 left-4 right-4 z-10", children: [
+          /* @__PURE__ */ jsx("span", { children: "AM" }),
+          /* @__PURE__ */ jsx("span", { children: "05 AM" }),
+          /* @__PURE__ */ jsx("span", { children: "06 AM" }),
+          /* @__PURE__ */ jsx("span", { children: "07 AM" }),
+          /* @__PURE__ */ jsx("span", { children: "08 AM" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl p-5 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center text-[14px]", children: "\u{1F6CC}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-neutral-900 leading-tight", children: "Sleep Quality" }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Last 7 Day" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-neutral-600" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[13px] font-medium text-neutral-600 mb-6", children: [
+          /* @__PURE__ */ jsx("span", { children: "Today" }),
+          /* @__PURE__ */ jsx("span", { children: "6,5/8hr" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center h-10 w-full mb-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-full w-[15%] bg-[#BAE6FD]" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 bg-neutral-800" }),
+          /* @__PURE__ */ jsx("div", { className: "h-[60%] w-[10%] bg-[#E0F2FE]" }),
+          /* @__PURE__ */ jsx("div", { className: "h-[80%] w-[15%] bg-[#BAE6FD]" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 bg-neutral-800" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-[25%] bg-[#E9D5FF]" }),
+          /* @__PURE__ */ jsx("div", { className: "h-[40%] w-[10%] bg-[#F3E8FF]" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 bg-neutral-800" }),
+          /* @__PURE__ */ jsx("div", { className: "h-full w-[20%] bg-[#BAE6FD]" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] font-medium text-neutral-500", children: [
+          /* @__PURE__ */ jsx("span", { children: "10.00pm" }),
+          /* @__PURE__ */ jsx("span", { children: "6.30am" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl p-5 shadow-sm flex flex-col justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex items-center justify-center text-[14px]", children: "\u{1FAC0}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-neutral-900 leading-tight", children: "Heart Rate" }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Last 7 Day" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-neutral-600" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[13px] font-medium text-neutral-600 mb-6", children: [
+          /* @__PURE__ */ jsx("span", { children: "Today" }),
+          /* @__PURE__ */ jsx("span", { children: "72-90Bpm" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-20 w-[calc(100%+1rem)] -ml-2 mb-2", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: hrData, margin: { top: 0, right: 0, left: 0, bottom: 0 }, barGap: 0, barCategoryGap: "20%", children: [
+          /* @__PURE__ */ jsx(Tooltip, { cursor: { fill: "transparent" }, contentStyle: { backgroundColor: "#fff", border: "1px solid #f5f5f5", borderRadius: "8px", color: "#000" }, labelStyle: { display: "none" } }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "value", radius: [2, 2, 2, 2], children: hrData.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.isHigh ? "#FDA4AF" : "#BAE6FD" }, `cell-${index}`)) })
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] font-medium text-neutral-500", children: [
+          /* @__PURE__ */ jsx("span", { children: "08.00am" }),
+          /* @__PURE__ */ jsx("span", { children: "12.00pm" }),
+          /* @__PURE__ */ jsx("span", { children: "4.00pm" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl p-5 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "w-6 h-6 flex items-center justify-center bg-blue-50 text-blue-500 rounded-lg text-[10px] font-bold", children: [
+              "FEB",
+              /* @__PURE__ */ jsx("br", {}),
+              "24"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-neutral-900 leading-tight", children: "Your weekly target" }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-medium", children: "Last 7 Day" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-neutral-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-neutral-600" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[13px] font-medium text-neutral-600 mb-2", children: [
+          /* @__PURE__ */ jsx("span", { children: "Achieved" }),
+          /* @__PURE__ */ jsx("span", { children: "4/7" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-full bg-neutral-100 rounded-full mb-6", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-[#A3E635] w-[55%] rounded-full" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-[#ECFCCB] rounded-2xl p-4 text-[12px] font-medium text-neutral-800 leading-relaxed", children: [
+          "Scoring at least ",
+          /* @__PURE__ */ jsx("span", { className: "font-bold", children: "150 Heart Points" }),
+          " each week helps you stay fit and healthy."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  HealthCards as default
+};

package/dist/catalog/components/metrics/MarketingCards.d.ts

@@ -0,0 +1 @@
+export default function MarketingCards(): import("react").JSX.Element;

package/dist/catalog/components/metrics/MarketingCards.js

@@ -0,0 +1,70 @@
+"use client";
+
+// .generated/catalog/components/metrics/MarketingCards.tsx
+import { Info, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MarketingCards() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[1.5rem] p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] border border-neutral-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-neutral-700 font-medium", children: [
+          "Sales Channels ",
+          /* @__PURE__ */ jsx(Info, { className: "w-4 h-4 text-neutral-300" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-neutral-600 bg-white border border-neutral-200 rounded-xl shadow-sm", children: [
+          "Weekly ",
+          /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 mb-6", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-4xl font-semibold text-neutral-900 tracking-tight", children: "246" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-bold text-emerald-500", children: "+2.1%" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-neutral-400", children: "vs last week" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] text-neutral-400 font-semibold mb-3", children: [
+        /* @__PURE__ */ jsx("span", { children: "Feb 21, 2024" }),
+        /* @__PURE__ */ jsx("span", { children: "Feb 28, 2024" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 h-10 w-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-[#3B82F6] rounded-[2px] flex-[2.5]" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#38BDF8] rounded-[2px] flex-[2]" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#8B5CF6] rounded-[2px] flex-[1.5]" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#F97316] rounded-[2px] flex-[1.2]" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#FBBF24] rounded-[2px] flex-[1]" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#10B981] rounded-[2px] flex-[0.8]" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#14B8A6] rounded-[2px] flex-[0.5]" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[1.5rem] shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] border border-neutral-100 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "p-6 pb-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-neutral-700 font-medium", children: [
+            "Campaign Data ",
+            /* @__PURE__ */ jsx(Info, { className: "w-4 h-4 text-neutral-300" })
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "px-3 py-1.5 text-xs font-semibold text-neutral-600 bg-white border border-neutral-200 rounded-xl shadow-sm", children: "Details" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-semibold text-neutral-900 tracking-tight", children: "$1,750" }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 bg-emerald-50 text-emerald-600 text-xs font-bold rounded-md", children: "Last 15 days" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex h-32 border-t border-neutral-100", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-[2.5] relative bg-orange-50/30 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 h-full w-full", preserveAspectRatio: "none", viewBox: "0 0 100 40", children: [
+            /* @__PURE__ */ jsx("path", { d: "M0,35 L5,34 L10,36 L15,30 L20,32 L25,20 L30,22 L35,28 L40,15 L45,25 L50,22 L55,30 L60,26 L65,32 L70,30 L75,34 L80,25 L85,30 L90,20 L95,24 L100,10", fill: "none", stroke: "#F97316", strokeWidth: "1.5" }),
+            /* @__PURE__ */ jsx("path", { d: "M0,35 L5,34 L10,36 L15,30 L20,32 L25,20 L30,22 L35,28 L40,15 L45,25 L50,22 L55,30 L60,26 L65,32 L70,30 L75,34 L80,25 L85,30 L90,20 L95,24 L100,10 L100,40 L0,40 Z", fill: "#F97316", fillOpacity: "0.1", stroke: "none" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 bottom-0 w-px bg-[#F97316]" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-[1] bg-white p-4 flex flex-col justify-end", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[22px] font-semibold text-neutral-900 leading-none", children: "45%" }),
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] text-neutral-400 font-semibold mt-1", children: "$32.9K used" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  MarketingCards as default
+};

package/dist/catalog/components/metrics/NetworkTelemetry.d.ts

@@ -0,0 +1 @@
+export default function NetworkTelemetry(): import("react").JSX.Element;