@efiche/design 0.1.9 → 0.2.0

package/dist/index.cjs

@@ -51,8 +51,10 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion_default,
   Alert: () => Alert_default,
+  AreaChart: () => AreaChart_default,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
+  BarChart: () => BarChart_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
   Card: () => Card,
@@ -66,7 +68,9 @@ __export(index_exports, {
   FileUpload: () => FileUpload_default,
   Input: () => Input_default,
   Label: () => Label_default,
+  LineChart: () => LineChart_default,
   PasswordInput: () => PasswordInput_default,
+  PieChart: () => PieChart_default,
   Progress: () => Progress_default,
   RadioGroup: () => RadioGroup_default,
   Select: () => Select_default,
@@ -105,10 +109,209 @@ var useTheme = () => {
   return ctx;
 };
 
+// src/components/Charts/LineChart.tsx
+var import_recharts = require("recharts");
+
+// src/components/Charts/chartUtils.ts
+var CHART_COLORS = [
+  "#3b82f6",
+  // blue
+  "#22c55e",
+  // green
+  "#f59e0b",
+  // amber
+  "#ef4444",
+  // red
+  "#8b5cf6",
+  // violet
+  "#06b6d4",
+  // cyan
+  "#f97316",
+  // orange
+  "#ec4899"
+  // pink
+];
+function getChartTheme(theme) {
+  const isDark = theme === "dark";
+  return {
+    gridColor: isDark ? "#334155" : "#e2e8f0",
+    axisStroke: isDark ? "#94a3b8" : "#64748b",
+    axisTick: { fill: isDark ? "#94a3b8" : "#64748b", fontSize: 12 },
+    primaryColor: isDark ? "#60a5fa" : "#3b82f6",
+    tooltipStyle: {
+      backgroundColor: isDark ? "#1e293b" : "#ffffff",
+      border: `1px solid ${isDark ? "#334155" : "#e2e8f0"}`,
+      borderRadius: "6px",
+      color: isDark ? "#f1f5f9" : "#0f172a",
+      fontSize: "0.8125rem"
+    }
+  };
+}
+
+// src/components/Charts/LineChart.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LineChart = ({
+  data,
+  xKey,
+  lines,
+  height = 250,
+  legend = false,
+  grid = true,
+  theme = "light"
+}) => {
+  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data, children: [
+    grid && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Tooltip, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Legend, {}),
+    lines.map((line, i) => {
+      var _a, _b;
+      const color = (_a = line.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_recharts.Line,
+        {
+          type: "monotone",
+          dataKey: line.dataKey,
+          name: (_b = line.label) != null ? _b : line.dataKey,
+          stroke: color,
+          strokeWidth: 2,
+          dot: { fill: color, r: 4 },
+          activeDot: { r: 6 }
+        },
+        line.dataKey
+      );
+    })
+  ] }) });
+};
+var LineChart_default = LineChart;
+
+// src/components/Charts/BarChart.tsx
+var import_recharts2 = require("recharts");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BarChart = ({
+  data,
+  xKey,
+  bars,
+  height = 250,
+  legend = false,
+  grid = true,
+  theme = "light"
+}) => {
+  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_recharts2.BarChart, { data, children: [
+    grid && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.YAxis, { stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Tooltip, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts2.Legend, {}),
+    bars.map((bar, i) => {
+      var _a, _b;
+      const color = (_a = bar.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
+      const isLast = i === bars.length - 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_recharts2.Bar,
+        {
+          dataKey: bar.dataKey,
+          name: (_b = bar.label) != null ? _b : bar.dataKey,
+          fill: color,
+          stackId: bar.stackId,
+          radius: bar.stackId && !isLast ? [0, 0, 0, 0] : [4, 4, 0, 0]
+        },
+        bar.dataKey
+      );
+    })
+  ] }) });
+};
+var BarChart_default = BarChart;
+
+// src/components/Charts/AreaChart.tsx
+var import_recharts3 = require("recharts");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AreaChart = ({
+  data,
+  xKey,
+  areas,
+  height = 250,
+  legend = false,
+  grid = true,
+  theme = "light"
+}) => {
+  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts3.AreaChart, { data, children: [
+    grid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.YAxis, { stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Legend, {}),
+    areas.map((area, i) => {
+      var _a, _b, _c;
+      const color = (_a = area.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
+      const opacity = (_b = area.fillOpacity) != null ? _b : area.stackId ? 0.4 : 0.15;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_recharts3.Area,
+        {
+          type: "monotone",
+          dataKey: area.dataKey,
+          name: (_c = area.label) != null ? _c : area.dataKey,
+          stroke: color,
+          fill: color,
+          fillOpacity: opacity,
+          strokeWidth: 2,
+          stackId: area.stackId
+        },
+        area.dataKey
+      );
+    })
+  ] }) });
+};
+var AreaChart_default = AreaChart;
+
+// src/components/Charts/PieChart.tsx
+var import_recharts4 = require("recharts");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PieChart = ({
+  data,
+  height = 250,
+  donut = false,
+  legend = false,
+  label = false,
+  theme = "light"
+}) => {
+  const { tooltipStyle } = getChartTheme(theme);
+  const dataWithColors = data.map((item, i) => {
+    var _a;
+    return __spreadProps(__spreadValues({}, item), {
+      fill: (_a = item.fill) != null ? _a : CHART_COLORS[i % CHART_COLORS.length]
+    });
+  });
+  const outerRadius = 90;
+  const innerRadius = donut ? 55 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts4.PieChart, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_recharts4.Pie,
+      {
+        data: dataWithColors,
+        cx: "50%",
+        cy: "50%",
+        outerRadius,
+        innerRadius,
+        dataKey: "value",
+        label: label ? ({ name, percent }) => `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%` : void 0,
+        labelLine: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.Tooltip, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.Legend, {})
+  ] }) });
+};
+var PieChart_default = PieChart;
+
 // src/components/Accordion/Accordion.tsx
 var import_react2 = require("react");
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Accordion = ({ items, defaultValue, multiple = false }) => {
   const [open, setOpen] = (0, import_react2.useState)(() => {
     if (!defaultValue) return /* @__PURE__ */ new Set();
@@ -128,7 +331,7 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
     border: "1px solid var(--ds-border, #e2e8f0)",
     borderRadius: "0.5rem",
     overflow: "hidden"
@@ -136,14 +339,14 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
     const isOpen = open.has(item.value);
     const isHovered = hovered === item.value;
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         style: {
           borderBottom: isLast ? "none" : "1px solid var(--ds-border, #e2e8f0)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               style: {
@@ -166,8 +369,8 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
               onMouseLeave: () => setHovered(null),
               "aria-expanded": isOpen,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: item.trigger }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: item.trigger }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   import_lucide_react.ChevronDown,
                   {
                     size: 16,
@@ -182,11 +385,11 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
             maxHeight: isOpen ? "300px" : "0",
             overflow: "hidden",
             transition: "max-height 0.25s ease"
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
             padding: "0 1rem 1rem",
             fontSize: "0.875rem",
             color: "var(--ds-text-secondary, #64748b)"
@@ -201,7 +404,7 @@ var Accordion_default = Accordion;
 
 // src/components/Alert/Alert.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var variantMap = {
   info: { bg: "var(--ds-info-bg, #eff6ff)", border: "var(--ds-info, #3b82f6)", icon: "var(--ds-info, #3b82f6)", title: "var(--ds-info-title, #1e3a8a)", desc: "var(--ds-info-desc, #1e40af)" },
   success: { bg: "var(--ds-success-bg, #f0fdf4)", border: "var(--ds-success, #22c55e)", icon: "var(--ds-success, #22c55e)", title: "var(--ds-success-title, #14532d)", desc: "var(--ds-success-desc, #166534)" },
@@ -209,14 +412,14 @@ var variantMap = {
   danger: { bg: "var(--ds-danger-bg, #fef2f2)", border: "var(--ds-danger, #ef4444)", icon: "var(--ds-danger, #ef4444)", title: "var(--ds-danger-title, #7f1d1d)", desc: "var(--ds-danger-desc, #991b1b)" }
 };
 var icons = {
-  info: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Info, { size: 16 }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.CheckCircle2, { size: 16 }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertTriangle, { size: 16 }),
-  danger: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertCircle, { size: 16 })
+  info: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Info, { size: 16 }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.CheckCircle2, { size: 16 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.AlertTriangle, { size: 16 }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.AlertCircle, { size: 16 })
 };
 var Alert = ({ variant = "info", title, description }) => {
   const v = variantMap[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "alert", style: {
     display: "flex",
     gap: "0.75rem",
     padding: "1rem",
@@ -224,23 +427,23 @@ var Alert = ({ variant = "info", title, description }) => {
     borderLeft: `4px solid ${v.border}`,
     backgroundColor: v.bg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flexShrink: 0, marginTop: "0.125rem", color: v.icon }, children: icons[variant] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem", marginTop: 0, color: v.title }, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { fontSize: "0.875rem", margin: 0, color: v.desc }, children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { flexShrink: 0, marginTop: "0.125rem", color: v.icon }, children: icons[variant] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem", marginTop: 0, color: v.title }, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { fontSize: "0.875rem", margin: 0, color: v.desc }, children: description })
     ] })
   ] });
 };
 var Alert_default = Alert;
 
 // src/components/Avatar/Avatar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var sizeMap = {
   sm: { width: "2rem", height: "2rem", fontSize: "0.625rem" },
   md: { width: "2.5rem", height: "2.5rem", fontSize: "0.875rem" },
   lg: { width: "4rem", height: "4rem", fontSize: "1.25rem" }
 };
-var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "div",
   {
     className,
@@ -262,7 +465,7 @@ var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ (0
 var Avatar_default = Avatar;
 
 // src/components/Badge/Badge.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var variantMap2 = {
   default: { backgroundColor: "var(--ds-primary, #3b82f6)", color: "#fff" },
   secondary: { backgroundColor: "var(--ds-muted, #f1f5f9)", color: "var(--ds-text-secondary, #64748b)" },
@@ -277,7 +480,7 @@ var sizeMap2 = {
   md: { padding: "0.25rem 0.625rem", fontSize: "0.75rem" },
   lg: { padding: "0.375rem 0.875rem", fontSize: "0.875rem" }
 };
-var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: __spreadValues(__spreadValues(__spreadValues({
+var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: __spreadValues(__spreadValues(__spreadValues({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.25rem",
@@ -290,10 +493,10 @@ var Badge_default = Badge;
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_react3 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Breadcrumb = ({ items }) => {
   const [hovered, setHovered] = (0, import_react3.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", { style: {
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
@@ -304,8 +507,8 @@ var Breadcrumb = ({ items }) => {
   }, children: items.map((item, i) => {
     const isLast = i === items.length - 1;
     const isHovered = hovered === item.label;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { style: { display: "flex", alignItems: "center" }, children: [
-      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { style: { display: "flex", alignItems: "center" }, children: [
+      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_lucide_react3.ChevronRight,
         {
           size: 14,
@@ -313,11 +516,11 @@ var Breadcrumb = ({ items }) => {
           style: { color: "var(--ds-text-secondary, #64748b)", margin: "0 0.25rem", flexShrink: 0 }
         }
       ),
-      isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+      isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: {
         color: isLast ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)",
         fontWeight: isLast ? 500 : void 0,
         cursor: isLast ? "default" : void 0
-      }, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      }, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "a",
         {
           href: item.href,
@@ -339,7 +542,7 @@ var Breadcrumb_default = Breadcrumb;
 // src/components/Button/Button.tsx
 var import_lucide_react4 = require("lucide-react");
 var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var variantStyles = {
   solid: { backgroundColor: "var(--ds-primary, #3b82f6)", color: "#fff", borderColor: "transparent" },
   outline: { backgroundColor: "transparent", color: "var(--ds-primary, #3b82f6)", borderColor: "var(--ds-primary, #3b82f6)" },
@@ -419,9 +622,9 @@ var Button = (_a) => {
     opacity: isDisabled ? 0.5 : 1,
     pointerEvents: loading ? "none" : void 0
   }, variantStyles[resolvedVariant]), sizeStyles[resolvedSize]), hovered && !isDisabled ? variantHoverStyles[resolvedVariant] : {}), styleProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         disabled: isDisabled,
@@ -430,7 +633,7 @@ var Button = (_a) => {
         onMouseLeave: () => setHovered(false)
       }, props), {
         children: [
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             import_lucide_react4.LoaderCircle,
             {
               "aria-hidden": true,
@@ -448,10 +651,10 @@ var Button = (_a) => {
 var Button_default = Button;
 
 // src/components/Card/Card.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Card = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
     border: "1px solid var(--ds-border, #e2e8f0)",
     borderRadius: "0.5rem",
     backgroundColor: "var(--ds-card, #ffffff)"
@@ -459,7 +662,7 @@ var Card = (_a) => {
 };
 var CardHeader = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
     display: "flex",
     flexDirection: "column",
     gap: "0.375rem",
@@ -468,7 +671,7 @@ var CardHeader = (_a) => {
 };
 var CardTitle = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", __spreadValues({ style: __spreadValues({
     fontSize: "1rem",
     fontWeight: 600,
     color: "var(--ds-text-primary, #0f172a)",
@@ -478,7 +681,7 @@ var CardTitle = (_a) => {
 };
 var CardDescription = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", __spreadValues({ style: __spreadValues({
     fontSize: "0.875rem",
     color: "var(--ds-text-secondary, #64748b)",
     margin: 0
@@ -486,11 +689,11 @@ var CardDescription = (_a) => {
 };
 var CardContent = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
 };
 var CardFooter = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
     display: "flex",
     alignItems: "center",
     padding: "0 1.5rem 1.5rem"
@@ -499,7 +702,7 @@ var CardFooter = (_a) => {
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react5 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Checkbox = ({
   label,
   checked,
@@ -516,7 +719,7 @@ var Checkbox = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: id, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: id, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "0.5rem",
@@ -524,7 +727,7 @@ var Checkbox = ({
     userSelect: "none",
     opacity: disabled ? 0.5 : 1
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
         type: "checkbox",
@@ -535,7 +738,7 @@ var Checkbox = ({
         style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: {
       width: "1.125rem",
       height: "1.125rem",
       border: `2px solid ${isChecked ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
@@ -546,8 +749,8 @@ var Checkbox = ({
       flexShrink: 0,
       transition: "background-color 0.15s, border-color 0.15s",
       backgroundColor: isChecked ? "var(--ds-primary, #3b82f6)" : "var(--ds-card, #fff)"
-    }, children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 12 10", fill: "none", style: { width: "0.625rem", height: "0.625rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
+    }, children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 12 10", fill: "none", style: { width: "0.625rem", height: "0.625rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
 var Checkbox_default = Checkbox;
@@ -555,7 +758,7 @@ var Checkbox_default = Checkbox;
 // src/components/CopyButton/CopyButton.tsx
 var import_lucide_react5 = require("lucide-react");
 var import_react6 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CopyButton = ({ text }) => {
   const [copied, setCopied] = (0, import_react6.useState)(false);
   const [hovered, setHovered] = (0, import_react6.useState)(false);
@@ -564,7 +767,7 @@ var CopyButton = ({ text }) => {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     {
       onClick: handleCopy,
@@ -583,7 +786,7 @@ var CopyButton = ({ text }) => {
         cursor: "pointer",
         transition: "background-color 0.15s, color 0.15s"
       },
-      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Copy, { style: { width: "1rem", height: "1rem" } })
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Copy, { style: { width: "1rem", height: "1rem" } })
     }
   );
 };
@@ -592,7 +795,7 @@ var CopyButton_default = CopyButton;
 // src/components/FileUpload/FileUpload.tsx
 var import_lucide_react6 = require("lucide-react");
 var import_react7 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
   const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
   const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
@@ -603,7 +806,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
     onFileSelect == null ? void 0 : onFileSelect(list);
   };
   const isActive = isDragging || isHovered;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       onClick: () => {
@@ -637,7 +840,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
         opacity: disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "input",
           {
             ref: inputRef,
@@ -649,9 +852,9 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
             onChange: (e) => e.target.files && handleFiles(e.target.files)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Upload, { size: 32, style: { color: "var(--ds-text-secondary, #64748b)" } }),
-        fileNames.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--ds-primary, #3b82f6)", fontWeight: 500, margin: 0 }, children: fileNames.join(", ") }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { style: { fontSize: "0.875rem", color: "var(--ds-text-secondary, #64748b)", margin: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: "Click to upload" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.Upload, { size: 32, style: { color: "var(--ds-text-secondary, #64748b)" } }),
+        fileNames.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--ds-primary, #3b82f6)", fontWeight: 500, margin: 0 }, children: fileNames.join(", ") }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { style: { fontSize: "0.875rem", color: "var(--ds-text-secondary, #64748b)", margin: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Click to upload" }),
           " or drag and drop"
         ] })
       ]
@@ -661,7 +864,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
 var FileUpload_default = FileUpload;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var inputCSS = `
 [data-ds-input]::placeholder { color: var(--ds-text-secondary, #64748b); }
 [data-ds-input]:focus { outline: none; border-color: var(--ds-primary, #3b82f6); box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
@@ -671,10 +874,10 @@ var inputCSS = `
 `;
 var Input = (_a) => {
   var _b = _a, { error, success, leftIcon, rightIcon, style } = _b, props = __objRest(_b, ["error", "success", "leftIcon", "rightIcon", "style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { href: "ds-input", precedence: "low", children: inputCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative", display: "flex", alignItems: "center", width: "100%" }, children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { href: "ds-input", precedence: "low", children: inputCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { position: "relative", display: "flex", alignItems: "center", width: "100%" }, children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
         position: "absolute",
         left: "0.625rem",
         display: "flex",
@@ -682,7 +885,7 @@ var Input = (_a) => {
         color: "var(--ds-text-secondary, #64748b)",
         pointerEvents: "none"
       }, children: leftIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "input",
         __spreadValues({
           "data-ds-input": "",
@@ -705,7 +908,7 @@ var Input = (_a) => {
           }, style)
         }, props)
       ),
-      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: {
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
         position: "absolute",
         right: "0.625rem",
         display: "flex",
@@ -719,10 +922,10 @@ var Input = (_a) => {
 var Input_default = Input;
 
 // src/components/Label/Label.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Label = (_a) => {
   var _b = _a, { children, required, style } = _b, props = __objRest(_b, ["children", "required", "style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", __spreadProps(__spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", __spreadProps(__spreadValues({ style: __spreadValues({
     display: "block",
     fontSize: "0.875rem",
     fontWeight: 500,
@@ -730,7 +933,7 @@ var Label = (_a) => {
     marginBottom: "0.375rem"
   }, style) }, props), { children: [
     children,
-    required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
+    required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
   ] }));
 };
 var Label_default = Label;
@@ -738,21 +941,21 @@ var Label_default = Label;
 // src/components/PasswordInput/PasswordInput.tsx
 var import_lucide_react7 = require("lucide-react");
 var import_react8 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var PasswordInput = (props) => {
   const [visible, setVisible] = (0, import_react8.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Input_default,
     __spreadProps(__spreadValues({}, props), {
       type: visible ? "text" : "password",
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           onClick: () => setVisible((v) => !v),
           style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", pointerEvents: "all" },
           tabIndex: -1,
-          children: visible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.EyeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Eye, { size: 16 })
+          children: visible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.EyeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Eye, { size: 16 })
         }
       )
     })
@@ -761,10 +964,10 @@ var PasswordInput = (props) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Progress/Progress.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Progress = ({ value = 0 }) => {
   const pct = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       role: "progressbar",
@@ -778,7 +981,7 @@ var Progress = ({ value = 0 }) => {
         borderRadius: "9999px",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: {
         height: "100%",
         width: `${pct}%`,
         backgroundColor: "var(--ds-primary, #3b82f6)",
@@ -792,7 +995,7 @@ var Progress_default = Progress;
 
 // src/components/RadioGroup/RadioGroup.tsx
 var import_react9 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var RadioGroup = ({
   options,
   name,
@@ -808,9 +1011,9 @@ var RadioGroup = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
     const isSelected = selected === option.value;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { style: {
       display: "inline-flex",
       alignItems: "center",
       gap: "0.5rem",
@@ -818,7 +1021,7 @@ var RadioGroup = ({
       userSelect: "none",
       opacity: disabled ? 0.5 : 1
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           type: "radio",
@@ -830,7 +1033,7 @@ var RadioGroup = ({
           style: { position: "absolute", opacity: 0, width: 0, height: 0 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: {
         width: "1.125rem",
         height: "1.125rem",
         borderRadius: "9999px",
@@ -841,13 +1044,13 @@ var RadioGroup = ({
         flexShrink: 0,
         backgroundColor: "var(--ds-card, #fff)",
         transition: "border-color 0.15s"
-      }, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
+      }, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: {
         width: "0.5rem",
         height: "0.5rem",
         borderRadius: "9999px",
         backgroundColor: "var(--ds-primary, #3b82f6)"
       } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
     ] }, option.value);
   }) });
 };
@@ -856,7 +1059,7 @@ var RadioGroup_default = RadioGroup;
 // src/components/Select/Select.tsx
 var import_lucide_react8 = require("lucide-react");
 var import_react10 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var selectCSS = `
 [data-ds-select-trigger]:focus { outline: none; border-color: var(--ds-primary, #3b82f6); box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
 `;
@@ -887,15 +1090,15 @@ var Select = ({
     document.addEventListener("mousedown", handleOutside);
     return () => document.removeEventListener("mousedown", handleOutside);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { href: "ds-select", precedence: "low", children: selectCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", { href: "ds-select", precedence: "low", children: selectCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, style: {
       position: "relative",
       width: "100%",
       opacity: disabled ? 0.5 : 1,
       pointerEvents: disabled ? "none" : void 0
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "button",
         {
           type: "button",
@@ -921,8 +1124,8 @@ var Select = ({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               import_lucide_react8.ChevronDown,
               {
                 size: 16,
@@ -937,7 +1140,7 @@ var Select = ({
           ]
         }
       ),
-      open && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: {
+      open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: {
         position: "absolute",
         top: "calc(100% + 0.25rem)",
         left: 0,
@@ -951,7 +1154,7 @@ var Select = ({
       }, children: options.map((option) => {
         const isSelected = selected === option.value;
         const isHovered = hoveredOption === option.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
             onClick: () => handleSelect(option.value),
@@ -970,7 +1173,7 @@ var Select = ({
               transition: "background-color 0.1s"
             },
             children: [
-              isSelected ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Check, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { width: 14, flexShrink: 0 } }),
+              isSelected ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Check, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { width: 14, flexShrink: 0 } }),
               option.label
             ]
           },
@@ -983,13 +1186,13 @@ var Select = ({
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { href: "ds-skeleton", precedence: "low", children: `
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { href: "ds-skeleton", precedence: "low", children: `
             @keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
             [data-ds-skeleton] { animation: ds-pulse 1.5s ease-in-out infinite; }
         ` }),
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       "data-ds-skeleton": "",
@@ -1007,7 +1210,7 @@ var Skeleton_default = Skeleton;
 
 // src/components/Slider/Slider.tsx
 var import_react11 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var sliderCSS = `
 [data-ds-slider] {
     -webkit-appearance: none;
@@ -1066,13 +1269,13 @@ var Slider = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: {
       width: "100%",
       padding: "0.25rem 0",
       opacity: disabled ? 0.5 : 1
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
         type: "range",
@@ -1092,11 +1295,11 @@ var Slider_default = Slider;
 
 // src/components/Spinner/Spinner.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var sizePx = { sm: 16, md: 24, lg: 32 };
-var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
-  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_lucide_react9.Loader2,
     {
       size: sizePx[size],
@@ -1109,7 +1312,7 @@ var Spinner_default = Spinner;
 
 // src/components/Switch/Switch.tsx
 var import_react12 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Switch = ({
   label,
   checked,
@@ -1126,7 +1329,7 @@ var Switch = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { htmlFor: id, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { htmlFor: id, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "0.625rem",
@@ -1134,7 +1337,7 @@ var Switch = ({
     userSelect: "none",
     opacity: disabled ? 0.5 : 1
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
       {
         type: "checkbox",
@@ -1145,7 +1348,7 @@ var Switch = ({
         style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: {
       width: "2.75rem",
       height: "1.5rem",
       borderRadius: "9999px",
@@ -1153,7 +1356,7 @@ var Switch = ({
       position: "relative",
       transition: "background-color 0.2s",
       flexShrink: 0
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: {
       position: "absolute",
       top: "0.175rem",
       left: "0.175rem",
@@ -1165,41 +1368,41 @@ var Switch = ({
       transition: "transform 0.2s",
       transform: isOn ? "translateX(1.25rem)" : "translateX(0)"
     } }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
 var Switch_default = Switch;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var tableCSS = `
 [data-ds-table-row]:hover [data-ds-table-cell] { background-color: var(--ds-muted, #f1f5f9); }
 `;
 var Table = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { href: "ds-table", precedence: "low", children: tableCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { href: "ds-table", precedence: "low", children: tableCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: {
       width: "100%",
       overflowX: "auto",
       border: "1px solid var(--ds-border, #e2e8f0)",
       borderRadius: "0.5rem"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("table", __spreadValues({ style: __spreadValues({
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("table", __spreadValues({ style: __spreadValues({
       width: "100%",
       borderCollapse: "collapse",
       fontSize: "0.875rem"
     }, style) }, props)) })
   ] });
 };
-var TableHead = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", __spreadValues({}, props));
-var TableBody = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", __spreadValues({}, props));
+var TableHead = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", __spreadValues({}, props));
+var TableBody = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tbody", __spreadValues({}, props));
 var TableRow = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
 };
 var TableHeader = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("th", __spreadValues({ style: __spreadValues({
     padding: "0.75rem 1rem",
     textAlign: "left",
     fontWeight: 500,
@@ -1211,7 +1414,7 @@ var TableHeader = (_a) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "td",
     __spreadValues({
       "data-ds-table-cell": "",
@@ -1227,14 +1430,14 @@ var TableCell = (_a) => {
 
 // src/components/Tabs/Tabs.tsx
 var import_react13 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Tabs = ({ tabs, defaultValue }) => {
   var _a, _b;
   const [active, setActive] = (0, import_react13.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
   const [hovered, setHovered] = (0, import_react13.useState)(null);
   const activeTab = tabs.find((t) => t.value === active);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { role: "tablist", style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "tablist", style: {
       display: "inline-flex",
       backgroundColor: "var(--ds-muted, #f1f5f9)",
       borderRadius: "0.5rem",
@@ -1243,7 +1446,7 @@ var Tabs = ({ tabs, defaultValue }) => {
     }, children: tabs.map((tab) => {
       const isActive = active === tab.value;
       const isHovered = hovered === tab.value;
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "button",
         {
           role: "tab",
@@ -1268,14 +1471,14 @@ var Tabs = ({ tabs, defaultValue }) => {
             whiteSpace: "nowrap"
           },
           children: [
-            tab.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+            tab.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
             tab.label
           ]
         },
         tab.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { role: "tabpanel", style: {
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "tabpanel", style: {
       paddingTop: "1rem",
       fontSize: "0.875rem",
       color: "var(--ds-text-secondary, #64748b)"
@@ -1285,7 +1488,7 @@ var Tabs = ({ tabs, defaultValue }) => {
 var Tabs_default = Tabs;
 
 // src/components/Textarea/Textarea.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var textareaCSS = `
 [data-ds-textarea]::placeholder { color: var(--ds-text-secondary, #64748b); }
 [data-ds-textarea]:focus { outline: none; border-color: var(--ds-primary, #3b82f6); box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
@@ -1295,9 +1498,9 @@ var textareaCSS = `
 `;
 var Textarea = (_a) => {
   var _b = _a, { error, style } = _b, props = __objRest(_b, ["error", "style"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { href: "ds-textarea", precedence: "low", children: textareaCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { href: "ds-textarea", precedence: "low", children: textareaCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "textarea",
       __spreadValues({
         "data-ds-textarea": "",
@@ -1324,7 +1527,7 @@ var Textarea_default = Textarea;
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react14 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var positionStyle = {
   top: { bottom: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" },
   bottom: { top: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" },
@@ -1342,11 +1545,11 @@ var tooltipCSS = `
 [data-ds-tt="left"]::before   { left: 100%;   top: 50%;   transform: translateY(-50%); border-left-color:   var(--ds-tooltip-bg, #0f172a); }
 [data-ds-tt="right"]::before  { right: 100%;  top: 50%;   transform: translateY(-50%); border-right-color:  var(--ds-tooltip-bg, #0f172a); }
 `;
-var Tooltip = ({ content, children, position = "top" }) => {
+var Tooltip5 = ({ content, children, position = "top" }) => {
   const [visible, setVisible] = (0, import_react14.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { href: "ds-tooltip", precedence: "low", children: tooltipCSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("style", { href: "ds-tooltip", precedence: "low", children: tooltipCSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "span",
       {
         style: { position: "relative", display: "inline-flex" },
@@ -1356,7 +1559,7 @@ var Tooltip = ({ content, children, position = "top" }) => {
         onBlur: () => setVisible(false),
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "span",
             {
               role: "tooltip",
@@ -1383,13 +1586,15 @@ var Tooltip = ({ content, children, position = "top" }) => {
     )
   ] });
 };
-var Tooltip_default = Tooltip;
+var Tooltip_default = Tooltip5;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   Alert,
+  AreaChart,
   Avatar,
   Badge,
+  BarChart,
   Breadcrumb,
   Button,
   Card,
@@ -1403,7 +1608,9 @@ var Tooltip_default = Tooltip;
   FileUpload,
   Input,
   Label,
+  LineChart,
   PasswordInput,
+  PieChart,
   Progress,
   RadioGroup,
   Select,