@efiche/design 0.1.9 → 0.2.0

package/dist/index.js

@@ -47,10 +47,242 @@ var useTheme = () => {
   return ctx;
 };
 
+// src/components/Charts/LineChart.tsx
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "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
+import { jsx as jsx2, jsxs } from "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__ */ jsx2(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RechartsLineChart, { data, children: [
+    grid && /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }),
+    /* @__PURE__ */ jsx2(XAxis, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ jsx2(YAxis, { stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ jsx2(Tooltip, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ jsx2(Legend, {}),
+    lines.map((line, i) => {
+      var _a, _b;
+      const color = (_a = line.color) != null ? _a : CHART_COLORS[i % CHART_COLORS.length];
+      return /* @__PURE__ */ jsx2(
+        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
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  CartesianGrid as CartesianGrid2,
+  Tooltip as Tooltip2,
+  Legend as Legend2,
+  ResponsiveContainer as ResponsiveContainer2
+} from "recharts";
+import { jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsx3(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs2(RechartsBarChart, { data, children: [
+    grid && /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3", stroke: gridColor }),
+    /* @__PURE__ */ jsx3(XAxis2, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ jsx3(YAxis2, { stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ jsx3(Tooltip2, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ jsx3(Legend2, {}),
+    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__ */ jsx3(
+        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
+import {
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis as XAxis3,
+  YAxis as YAxis3,
+  CartesianGrid as CartesianGrid3,
+  Tooltip as Tooltip3,
+  Legend as Legend3,
+  ResponsiveContainer as ResponsiveContainer3
+} from "recharts";
+import { jsx as jsx4, jsxs as jsxs3 } from "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__ */ jsx4(ResponsiveContainer3, { width: "100%", height, children: /* @__PURE__ */ jsxs3(RechartsAreaChart, { data, children: [
+    grid && /* @__PURE__ */ jsx4(CartesianGrid3, { strokeDasharray: "3 3", stroke: gridColor }),
+    /* @__PURE__ */ jsx4(XAxis3, { dataKey: xKey, stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ jsx4(YAxis3, { stroke: axisStroke, tick: axisTick }),
+    /* @__PURE__ */ jsx4(Tooltip3, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ jsx4(Legend3, {}),
+    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__ */ jsx4(
+        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
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Tooltip as Tooltip4,
+  Legend as Legend4,
+  ResponsiveContainer as ResponsiveContainer4
+} from "recharts";
+import { jsx as jsx5, jsxs as jsxs4 } from "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__ */ jsx5(ResponsiveContainer4, { width: "100%", height, children: /* @__PURE__ */ jsxs4(RechartsPieChart, { children: [
+    /* @__PURE__ */ jsx5(
+      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__ */ jsx5(Tooltip4, { contentStyle: tooltipStyle }),
+    legend && /* @__PURE__ */ jsx5(Legend4, {})
+  ] }) });
+};
+var PieChart_default = PieChart;
+
 // src/components/Accordion/Accordion.tsx
 import { useState as useState2 } from "react";
 import { ChevronDown } from "lucide-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Accordion = ({ items, defaultValue, multiple = false }) => {
   const [open, setOpen] = useState2(() => {
     if (!defaultValue) return /* @__PURE__ */ new Set();
@@ -70,7 +302,7 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
       return next;
     });
   };
-  return /* @__PURE__ */ jsx2("div", { style: {
+  return /* @__PURE__ */ jsx6("div", { style: {
     border: "1px solid var(--ds-border, #e2e8f0)",
     borderRadius: "0.5rem",
     overflow: "hidden"
@@ -78,14 +310,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__ */ jsxs(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         style: {
           borderBottom: isLast ? "none" : "1px solid var(--ds-border, #e2e8f0)"
         },
         children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               style: {
@@ -108,8 +340,8 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
               onMouseLeave: () => setHovered(null),
               "aria-expanded": isOpen,
               children: [
-                /* @__PURE__ */ jsx2("span", { children: item.trigger }),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx6("span", { children: item.trigger }),
+                /* @__PURE__ */ jsx6(
                   ChevronDown,
                   {
                     size: 16,
@@ -124,11 +356,11 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx2("div", { style: {
+          /* @__PURE__ */ jsx6("div", { style: {
             maxHeight: isOpen ? "300px" : "0",
             overflow: "hidden",
             transition: "max-height 0.25s ease"
-          }, children: /* @__PURE__ */ jsx2("div", { style: {
+          }, children: /* @__PURE__ */ jsx6("div", { style: {
             padding: "0 1rem 1rem",
             fontSize: "0.875rem",
             color: "var(--ds-text-secondary, #64748b)"
@@ -143,7 +375,7 @@ var Accordion_default = Accordion;
 
 // src/components/Alert/Alert.tsx
 import { Info, CheckCircle2, AlertTriangle, AlertCircle } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "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)" },
@@ -151,14 +383,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__ */ jsx3(Info, { size: 16 }),
-  success: /* @__PURE__ */ jsx3(CheckCircle2, { size: 16 }),
-  warning: /* @__PURE__ */ jsx3(AlertTriangle, { size: 16 }),
-  danger: /* @__PURE__ */ jsx3(AlertCircle, { size: 16 })
+  info: /* @__PURE__ */ jsx7(Info, { size: 16 }),
+  success: /* @__PURE__ */ jsx7(CheckCircle2, { size: 16 }),
+  warning: /* @__PURE__ */ jsx7(AlertTriangle, { size: 16 }),
+  danger: /* @__PURE__ */ jsx7(AlertCircle, { size: 16 })
 };
 var Alert = ({ variant = "info", title, description }) => {
   const v = variantMap[variant];
-  return /* @__PURE__ */ jsxs2("div", { role: "alert", style: {
+  return /* @__PURE__ */ jsxs6("div", { role: "alert", style: {
     display: "flex",
     gap: "0.75rem",
     padding: "1rem",
@@ -166,23 +398,23 @@ var Alert = ({ variant = "info", title, description }) => {
     borderLeft: `4px solid ${v.border}`,
     backgroundColor: v.bg
   }, children: [
-    /* @__PURE__ */ jsx3("span", { style: { flexShrink: 0, marginTop: "0.125rem", color: v.icon }, children: icons[variant] }),
-    /* @__PURE__ */ jsxs2("div", { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx3("p", { style: { fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem", marginTop: 0, color: v.title }, children: title }),
-      /* @__PURE__ */ jsx3("p", { style: { fontSize: "0.875rem", margin: 0, color: v.desc }, children: description })
+    /* @__PURE__ */ jsx7("span", { style: { flexShrink: 0, marginTop: "0.125rem", color: v.icon }, children: icons[variant] }),
+    /* @__PURE__ */ jsxs6("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx7("p", { style: { fontWeight: 600, fontSize: "0.875rem", marginBottom: "0.25rem", marginTop: 0, color: v.title }, children: title }),
+      /* @__PURE__ */ jsx7("p", { style: { fontSize: "0.875rem", margin: 0, color: v.desc }, children: description })
     ] })
   ] });
 };
 var Alert_default = Alert;
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "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__ */ jsx4(
+var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ jsx8(
   "div",
   {
     className,
@@ -204,7 +436,7 @@ var Avatar = ({ fallback, size = "md", style, className }) => /* @__PURE__ */ js
 var Avatar_default = Avatar;
 
 // src/components/Badge/Badge.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "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)" },
@@ -219,7 +451,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__ */ jsx5("span", { style: __spreadValues(__spreadValues(__spreadValues({
+var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ jsx9("span", { style: __spreadValues(__spreadValues(__spreadValues({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.25rem",
@@ -232,10 +464,10 @@ var Badge_default = Badge;
 // src/components/Breadcrumb/Breadcrumb.tsx
 import { useState as useState3 } from "react";
 import { ChevronRight } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var Breadcrumb = ({ items }) => {
   const [hovered, setHovered] = useState3(null);
-  return /* @__PURE__ */ jsx6("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx6("ol", { style: {
+  return /* @__PURE__ */ jsx10("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx10("ol", { style: {
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
@@ -246,8 +478,8 @@ var Breadcrumb = ({ items }) => {
   }, children: items.map((item, i) => {
     const isLast = i === items.length - 1;
     const isHovered = hovered === item.label;
-    return /* @__PURE__ */ jsxs3("li", { style: { display: "flex", alignItems: "center" }, children: [
-      i > 0 && /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs7("li", { style: { display: "flex", alignItems: "center" }, children: [
+      i > 0 && /* @__PURE__ */ jsx10(
         ChevronRight,
         {
           size: 14,
@@ -255,11 +487,11 @@ var Breadcrumb = ({ items }) => {
           style: { color: "var(--ds-text-secondary, #64748b)", margin: "0 0.25rem", flexShrink: 0 }
         }
       ),
-      isLast || !item.href ? /* @__PURE__ */ jsx6("span", { style: {
+      isLast || !item.href ? /* @__PURE__ */ jsx10("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__ */ jsx6(
+      }, children: item.label }) : /* @__PURE__ */ jsx10(
         "a",
         {
           href: item.href,
@@ -281,7 +513,7 @@ var Breadcrumb_default = Breadcrumb;
 // src/components/Button/Button.tsx
 import { LoaderCircle } from "lucide-react";
 import { useState as useState4 } from "react";
-import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "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)" },
@@ -361,9 +593,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__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx7("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsx11("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsxs8(
       "button",
       __spreadProps(__spreadValues({
         disabled: isDisabled,
@@ -372,7 +604,7 @@ var Button = (_a) => {
         onMouseLeave: () => setHovered(false)
       }, props), {
         children: [
-          loading ? /* @__PURE__ */ jsx7(
+          loading ? /* @__PURE__ */ jsx11(
             LoaderCircle,
             {
               "aria-hidden": true,
@@ -390,10 +622,10 @@ var Button = (_a) => {
 var Button_default = Button;
 
 // src/components/Card/Card.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Card = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsx12("div", __spreadValues({ style: __spreadValues({
     border: "1px solid var(--ds-border, #e2e8f0)",
     borderRadius: "0.5rem",
     backgroundColor: "var(--ds-card, #ffffff)"
@@ -401,7 +633,7 @@ var Card = (_a) => {
 };
 var CardHeader = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsx12("div", __spreadValues({ style: __spreadValues({
     display: "flex",
     flexDirection: "column",
     gap: "0.375rem",
@@ -410,7 +642,7 @@ var CardHeader = (_a) => {
 };
 var CardTitle = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx8("h3", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsx12("h3", __spreadValues({ style: __spreadValues({
     fontSize: "1rem",
     fontWeight: 600,
     color: "var(--ds-text-primary, #0f172a)",
@@ -420,7 +652,7 @@ var CardTitle = (_a) => {
 };
 var CardDescription = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx8("p", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsx12("p", __spreadValues({ style: __spreadValues({
     fontSize: "0.875rem",
     color: "var(--ds-text-secondary, #64748b)",
     margin: 0
@@ -428,11 +660,11 @@ var CardDescription = (_a) => {
 };
 var CardContent = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
+  return /* @__PURE__ */ jsx12("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
 };
 var CardFooter = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsx12("div", __spreadValues({ style: __spreadValues({
     display: "flex",
     alignItems: "center",
     padding: "0 1.5rem 1.5rem"
@@ -441,7 +673,7 @@ var CardFooter = (_a) => {
 
 // src/components/Checkbox/Checkbox.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var Checkbox = ({
   label,
   checked,
@@ -458,7 +690,7 @@ var Checkbox = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ jsxs5("label", { htmlFor: id, style: {
+  return /* @__PURE__ */ jsxs9("label", { htmlFor: id, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "0.5rem",
@@ -466,7 +698,7 @@ var Checkbox = ({
     userSelect: "none",
     opacity: disabled ? 0.5 : 1
   }, children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
       "input",
       {
         type: "checkbox",
@@ -477,7 +709,7 @@ var Checkbox = ({
         style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ jsx9("span", { style: {
+    /* @__PURE__ */ jsx13("span", { style: {
       width: "1.125rem",
       height: "1.125rem",
       border: `2px solid ${isChecked ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
@@ -488,8 +720,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__ */ jsx9("svg", { viewBox: "0 0 12 10", fill: "none", style: { width: "0.625rem", height: "0.625rem" }, children: /* @__PURE__ */ jsx9("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-    label && /* @__PURE__ */ jsx9("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
+    }, children: isChecked && /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 12 10", fill: "none", style: { width: "0.625rem", height: "0.625rem" }, children: /* @__PURE__ */ jsx13("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    label && /* @__PURE__ */ jsx13("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
 var Checkbox_default = Checkbox;
@@ -497,7 +729,7 @@ var Checkbox_default = Checkbox;
 // src/components/CopyButton/CopyButton.tsx
 import { Check, Copy } from "lucide-react";
 import { useState as useState6 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var CopyButton = ({ text }) => {
   const [copied, setCopied] = useState6(false);
   const [hovered, setHovered] = useState6(false);
@@ -506,7 +738,7 @@ var CopyButton = ({ text }) => {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       onClick: handleCopy,
@@ -525,7 +757,7 @@ var CopyButton = ({ text }) => {
         cursor: "pointer",
         transition: "background-color 0.15s, color 0.15s"
       },
-      children: copied ? /* @__PURE__ */ jsx10(Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ jsx10(Copy, { style: { width: "1rem", height: "1rem" } })
+      children: copied ? /* @__PURE__ */ jsx14(Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ jsx14(Copy, { style: { width: "1rem", height: "1rem" } })
     }
   );
 };
@@ -534,7 +766,7 @@ var CopyButton_default = CopyButton;
 // src/components/FileUpload/FileUpload.tsx
 import { Upload } from "lucide-react";
 import { useRef, useState as useState7 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
   const [isDragging, setIsDragging] = useState7(false);
   const [isHovered, setIsHovered] = useState7(false);
@@ -545,7 +777,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
     onFileSelect == null ? void 0 : onFileSelect(list);
   };
   const isActive = isDragging || isHovered;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       onClick: () => {
@@ -579,7 +811,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
         opacity: disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx15(
           "input",
           {
             ref: inputRef,
@@ -591,9 +823,9 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
             onChange: (e) => e.target.files && handleFiles(e.target.files)
           }
         ),
-        /* @__PURE__ */ jsx11(Upload, { size: 32, style: { color: "var(--ds-text-secondary, #64748b)" } }),
-        fileNames.length > 0 ? /* @__PURE__ */ jsx11("p", { style: { fontSize: "0.875rem", color: "var(--ds-primary, #3b82f6)", fontWeight: 500, margin: 0 }, children: fileNames.join(", ") }) : /* @__PURE__ */ jsxs6("p", { style: { fontSize: "0.875rem", color: "var(--ds-text-secondary, #64748b)", margin: 0 }, children: [
-          /* @__PURE__ */ jsx11("strong", { children: "Click to upload" }),
+        /* @__PURE__ */ jsx15(Upload, { size: 32, style: { color: "var(--ds-text-secondary, #64748b)" } }),
+        fileNames.length > 0 ? /* @__PURE__ */ jsx15("p", { style: { fontSize: "0.875rem", color: "var(--ds-primary, #3b82f6)", fontWeight: 500, margin: 0 }, children: fileNames.join(", ") }) : /* @__PURE__ */ jsxs10("p", { style: { fontSize: "0.875rem", color: "var(--ds-text-secondary, #64748b)", margin: 0 }, children: [
+          /* @__PURE__ */ jsx15("strong", { children: "Click to upload" }),
           " or drag and drop"
         ] })
       ]
@@ -603,7 +835,7 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
 var FileUpload_default = FileUpload;
 
 // src/components/Input/Input.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs11 } from "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); }
@@ -613,10 +845,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__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx12("style", { href: "ds-input", precedence: "low", children: inputCSS }),
-    /* @__PURE__ */ jsxs7("div", { style: { position: "relative", display: "flex", alignItems: "center", width: "100%" }, children: [
-      leftIcon && /* @__PURE__ */ jsx12("span", { style: {
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx16("style", { href: "ds-input", precedence: "low", children: inputCSS }),
+    /* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "flex", alignItems: "center", width: "100%" }, children: [
+      leftIcon && /* @__PURE__ */ jsx16("span", { style: {
         position: "absolute",
         left: "0.625rem",
         display: "flex",
@@ -624,7 +856,7 @@ var Input = (_a) => {
         color: "var(--ds-text-secondary, #64748b)",
         pointerEvents: "none"
       }, children: leftIcon }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx16(
         "input",
         __spreadValues({
           "data-ds-input": "",
@@ -647,7 +879,7 @@ var Input = (_a) => {
           }, style)
         }, props)
       ),
-      rightIcon && /* @__PURE__ */ jsx12("span", { style: {
+      rightIcon && /* @__PURE__ */ jsx16("span", { style: {
         position: "absolute",
         right: "0.625rem",
         display: "flex",
@@ -661,10 +893,10 @@ var Input = (_a) => {
 var Input_default = Input;
 
 // src/components/Label/Label.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Label = (_a) => {
   var _b = _a, { children, required, style } = _b, props = __objRest(_b, ["children", "required", "style"]);
-  return /* @__PURE__ */ jsxs8("label", __spreadProps(__spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsxs12("label", __spreadProps(__spreadValues({ style: __spreadValues({
     display: "block",
     fontSize: "0.875rem",
     fontWeight: 500,
@@ -672,7 +904,7 @@ var Label = (_a) => {
     marginBottom: "0.375rem"
   }, style) }, props), { children: [
     children,
-    required && /* @__PURE__ */ jsx13("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
+    required && /* @__PURE__ */ jsx17("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
   ] }));
 };
 var Label_default = Label;
@@ -680,21 +912,21 @@ var Label_default = Label;
 // src/components/PasswordInput/PasswordInput.tsx
 import { Eye, EyeOff } from "lucide-react";
 import { useState as useState8 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var PasswordInput = (props) => {
   const [visible, setVisible] = useState8(false);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx18(
     Input_default,
     __spreadProps(__spreadValues({}, props), {
       type: visible ? "text" : "password",
-      rightIcon: /* @__PURE__ */ jsx14(
+      rightIcon: /* @__PURE__ */ jsx18(
         "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__ */ jsx14(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx14(Eye, { size: 16 })
+          children: visible ? /* @__PURE__ */ jsx18(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx18(Eye, { size: 16 })
         }
       )
     })
@@ -703,10 +935,10 @@ var PasswordInput = (props) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Progress = ({ value = 0 }) => {
   const pct = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       role: "progressbar",
@@ -720,7 +952,7 @@ var Progress = ({ value = 0 }) => {
         borderRadius: "9999px",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx15("div", { style: {
+      children: /* @__PURE__ */ jsx19("div", { style: {
         height: "100%",
         width: `${pct}%`,
         backgroundColor: "var(--ds-primary, #3b82f6)",
@@ -734,7 +966,7 @@ var Progress_default = Progress;
 
 // src/components/RadioGroup/RadioGroup.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var RadioGroup = ({
   options,
   name,
@@ -750,9 +982,9 @@ var RadioGroup = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ jsx16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
+  return /* @__PURE__ */ jsx20("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
     const isSelected = selected === option.value;
-    return /* @__PURE__ */ jsxs9("label", { style: {
+    return /* @__PURE__ */ jsxs13("label", { style: {
       display: "inline-flex",
       alignItems: "center",
       gap: "0.5rem",
@@ -760,7 +992,7 @@ var RadioGroup = ({
       userSelect: "none",
       opacity: disabled ? 0.5 : 1
     }, children: [
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx20(
         "input",
         {
           type: "radio",
@@ -772,7 +1004,7 @@ var RadioGroup = ({
           style: { position: "absolute", opacity: 0, width: 0, height: 0 }
         }
       ),
-      /* @__PURE__ */ jsx16("span", { style: {
+      /* @__PURE__ */ jsx20("span", { style: {
         width: "1.125rem",
         height: "1.125rem",
         borderRadius: "9999px",
@@ -783,13 +1015,13 @@ var RadioGroup = ({
         flexShrink: 0,
         backgroundColor: "var(--ds-card, #fff)",
         transition: "border-color 0.15s"
-      }, children: isSelected && /* @__PURE__ */ jsx16("span", { style: {
+      }, children: isSelected && /* @__PURE__ */ jsx20("span", { style: {
         width: "0.5rem",
         height: "0.5rem",
         borderRadius: "9999px",
         backgroundColor: "var(--ds-primary, #3b82f6)"
       } }) }),
-      /* @__PURE__ */ jsx16("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
+      /* @__PURE__ */ jsx20("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
     ] }, option.value);
   }) });
 };
@@ -798,7 +1030,7 @@ var RadioGroup_default = RadioGroup;
 // src/components/Select/Select.tsx
 import { Check as Check2, ChevronDown as ChevronDown2 } from "lucide-react";
 import { useEffect, useRef as useRef2, useState as useState10 } from "react";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs14 } from "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); }
 `;
@@ -829,15 +1061,15 @@ var Select = ({
     document.addEventListener("mousedown", handleOutside);
     return () => document.removeEventListener("mousedown", handleOutside);
   }, []);
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
-    /* @__PURE__ */ jsx17("style", { href: "ds-select", precedence: "low", children: selectCSS }),
-    /* @__PURE__ */ jsxs10("div", { ref, style: {
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx21("style", { href: "ds-select", precedence: "low", children: selectCSS }),
+    /* @__PURE__ */ jsxs14("div", { ref, style: {
       position: "relative",
       width: "100%",
       opacity: disabled ? 0.5 : 1,
       pointerEvents: disabled ? "none" : void 0
     }, children: [
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs14(
         "button",
         {
           type: "button",
@@ -863,8 +1095,8 @@ var Select = ({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ jsx17("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx21("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
+            /* @__PURE__ */ jsx21(
               ChevronDown2,
               {
                 size: 16,
@@ -879,7 +1111,7 @@ var Select = ({
           ]
         }
       ),
-      open && /* @__PURE__ */ jsx17("div", { style: {
+      open && /* @__PURE__ */ jsx21("div", { style: {
         position: "absolute",
         top: "calc(100% + 0.25rem)",
         left: 0,
@@ -893,7 +1125,7 @@ var Select = ({
       }, children: options.map((option) => {
         const isSelected = selected === option.value;
         const isHovered = hoveredOption === option.value;
-        return /* @__PURE__ */ jsxs10(
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             onClick: () => handleSelect(option.value),
@@ -912,7 +1144,7 @@ var Select = ({
               transition: "background-color 0.1s"
             },
             children: [
-              isSelected ? /* @__PURE__ */ jsx17(Check2, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ jsx17("span", { style: { width: 14, flexShrink: 0 } }),
+              isSelected ? /* @__PURE__ */ jsx21(Check2, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ jsx21("span", { style: { width: 14, flexShrink: 0 } }),
               option.label
             ]
           },
@@ -925,13 +1157,13 @@ var Select = ({
 var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
-  /* @__PURE__ */ jsx18("style", { href: "ds-skeleton", precedence: "low", children: `
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ jsxs15(Fragment4, { children: [
+  /* @__PURE__ */ jsx22("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__ */ jsx18(
+  /* @__PURE__ */ jsx22(
     "div",
     {
       "data-ds-skeleton": "",
@@ -949,7 +1181,7 @@ var Skeleton_default = Skeleton;
 
 // src/components/Slider/Slider.tsx
 import { useState as useState11 } from "react";
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var sliderCSS = `
 [data-ds-slider] {
     -webkit-appearance: none;
@@ -1008,13 +1240,13 @@ var Slider = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
-    /* @__PURE__ */ jsx19("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
-    /* @__PURE__ */ jsx19("div", { style: {
+  return /* @__PURE__ */ jsxs16(Fragment5, { children: [
+    /* @__PURE__ */ jsx23("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
+    /* @__PURE__ */ jsx23("div", { style: {
       width: "100%",
       padding: "0.25rem 0",
       opacity: disabled ? 0.5 : 1
-    }, children: /* @__PURE__ */ jsx19(
+    }, children: /* @__PURE__ */ jsx23(
       "input",
       {
         type: "range",
@@ -1034,11 +1266,11 @@ var Slider_default = Slider;
 
 // src/components/Spinner/Spinner.tsx
 import { Loader2 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var sizePx = { sm: 16, md: 24, lg: 32 };
-var Spinner = ({ size = "md" }) => /* @__PURE__ */ jsxs13(Fragment6, { children: [
-  /* @__PURE__ */ jsx20("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
-  /* @__PURE__ */ jsx20(
+var Spinner = ({ size = "md" }) => /* @__PURE__ */ jsxs17(Fragment6, { children: [
+  /* @__PURE__ */ jsx24("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+  /* @__PURE__ */ jsx24(
     Loader2,
     {
       size: sizePx[size],
@@ -1051,7 +1283,7 @@ var Spinner_default = Spinner;
 
 // src/components/Switch/Switch.tsx
 import { useState as useState12 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var Switch = ({
   label,
   checked,
@@ -1068,7 +1300,7 @@ var Switch = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ jsxs14("label", { htmlFor: id, style: {
+  return /* @__PURE__ */ jsxs18("label", { htmlFor: id, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "0.625rem",
@@ -1076,7 +1308,7 @@ var Switch = ({
     userSelect: "none",
     opacity: disabled ? 0.5 : 1
   }, children: [
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx25(
       "input",
       {
         type: "checkbox",
@@ -1087,7 +1319,7 @@ var Switch = ({
         style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ jsx21("span", { style: {
+    /* @__PURE__ */ jsx25("span", { style: {
       width: "2.75rem",
       height: "1.5rem",
       borderRadius: "9999px",
@@ -1095,7 +1327,7 @@ var Switch = ({
       position: "relative",
       transition: "background-color 0.2s",
       flexShrink: 0
-    }, children: /* @__PURE__ */ jsx21("span", { style: {
+    }, children: /* @__PURE__ */ jsx25("span", { style: {
       position: "absolute",
       top: "0.175rem",
       left: "0.175rem",
@@ -1107,41 +1339,41 @@ var Switch = ({
       transition: "transform 0.2s",
       transform: isOn ? "translateX(1.25rem)" : "translateX(0)"
     } }) }),
-    label && /* @__PURE__ */ jsx21("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
+    label && /* @__PURE__ */ jsx25("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
 var Switch_default = Switch;
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs19 } from "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__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx22("style", { href: "ds-table", precedence: "low", children: tableCSS }),
-    /* @__PURE__ */ jsx22("div", { style: {
+  return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+    /* @__PURE__ */ jsx26("style", { href: "ds-table", precedence: "low", children: tableCSS }),
+    /* @__PURE__ */ jsx26("div", { style: {
       width: "100%",
       overflowX: "auto",
       border: "1px solid var(--ds-border, #e2e8f0)",
       borderRadius: "0.5rem"
-    }, children: /* @__PURE__ */ jsx22("table", __spreadValues({ style: __spreadValues({
+    }, children: /* @__PURE__ */ jsx26("table", __spreadValues({ style: __spreadValues({
       width: "100%",
       borderCollapse: "collapse",
       fontSize: "0.875rem"
     }, style) }, props)) })
   ] });
 };
-var TableHead = (props) => /* @__PURE__ */ jsx22("thead", __spreadValues({}, props));
-var TableBody = (props) => /* @__PURE__ */ jsx22("tbody", __spreadValues({}, props));
+var TableHead = (props) => /* @__PURE__ */ jsx26("thead", __spreadValues({}, props));
+var TableBody = (props) => /* @__PURE__ */ jsx26("tbody", __spreadValues({}, props));
 var TableRow = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx22("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
+  return /* @__PURE__ */ jsx26("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
 };
 var TableHeader = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx22("th", __spreadValues({ style: __spreadValues({
+  return /* @__PURE__ */ jsx26("th", __spreadValues({ style: __spreadValues({
     padding: "0.75rem 1rem",
     textAlign: "left",
     fontWeight: 500,
@@ -1153,7 +1385,7 @@ var TableHeader = (_a) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx26(
     "td",
     __spreadValues({
       "data-ds-table-cell": "",
@@ -1169,14 +1401,14 @@ var TableCell = (_a) => {
 
 // src/components/Tabs/Tabs.tsx
 import { useState as useState13 } from "react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var Tabs = ({ tabs, defaultValue }) => {
   var _a, _b;
   const [active, setActive] = useState13((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
   const [hovered, setHovered] = useState13(null);
   const activeTab = tabs.find((t) => t.value === active);
-  return /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx23("div", { role: "tablist", style: {
+  return /* @__PURE__ */ jsxs20("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx27("div", { role: "tablist", style: {
       display: "inline-flex",
       backgroundColor: "var(--ds-muted, #f1f5f9)",
       borderRadius: "0.5rem",
@@ -1185,7 +1417,7 @@ var Tabs = ({ tabs, defaultValue }) => {
     }, children: tabs.map((tab) => {
       const isActive = active === tab.value;
       const isHovered = hovered === tab.value;
-      return /* @__PURE__ */ jsxs16(
+      return /* @__PURE__ */ jsxs20(
         "button",
         {
           role: "tab",
@@ -1210,14 +1442,14 @@ var Tabs = ({ tabs, defaultValue }) => {
             whiteSpace: "nowrap"
           },
           children: [
-            tab.icon && /* @__PURE__ */ jsx23("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+            tab.icon && /* @__PURE__ */ jsx27("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
             tab.label
           ]
         },
         tab.value
       );
     }) }),
-    /* @__PURE__ */ jsx23("div", { role: "tabpanel", style: {
+    /* @__PURE__ */ jsx27("div", { role: "tabpanel", style: {
       paddingTop: "1rem",
       fontSize: "0.875rem",
       color: "var(--ds-text-secondary, #64748b)"
@@ -1227,7 +1459,7 @@ var Tabs = ({ tabs, defaultValue }) => {
 var Tabs_default = Tabs;
 
 // src/components/Textarea/Textarea.tsx
-import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs21 } from "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); }
@@ -1237,9 +1469,9 @@ var textareaCSS = `
 `;
 var Textarea = (_a) => {
   var _b = _a, { error, style } = _b, props = __objRest(_b, ["error", "style"]);
-  return /* @__PURE__ */ jsxs17(Fragment8, { children: [
-    /* @__PURE__ */ jsx24("style", { href: "ds-textarea", precedence: "low", children: textareaCSS }),
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
+    /* @__PURE__ */ jsx28("style", { href: "ds-textarea", precedence: "low", children: textareaCSS }),
+    /* @__PURE__ */ jsx28(
       "textarea",
       __spreadValues({
         "data-ds-textarea": "",
@@ -1266,7 +1498,7 @@ var Textarea_default = Textarea;
 
 // src/components/Tooltip/Tooltip.tsx
 import { useState as useState14 } from "react";
-import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs22 } from "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%)" },
@@ -1284,11 +1516,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] = useState14(false);
-  return /* @__PURE__ */ jsxs18(Fragment9, { children: [
-    /* @__PURE__ */ jsx25("style", { href: "ds-tooltip", precedence: "low", children: tooltipCSS }),
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    /* @__PURE__ */ jsx29("style", { href: "ds-tooltip", precedence: "low", children: tooltipCSS }),
+    /* @__PURE__ */ jsxs22(
       "span",
       {
         style: { position: "relative", display: "inline-flex" },
@@ -1298,7 +1530,7 @@ var Tooltip = ({ content, children, position = "top" }) => {
         onBlur: () => setVisible(false),
         children: [
           children,
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx29(
             "span",
             {
               role: "tooltip",
@@ -1325,12 +1557,14 @@ var Tooltip = ({ content, children, position = "top" }) => {
     )
   ] });
 };
-var Tooltip_default = Tooltip;
+var Tooltip_default = Tooltip5;
 export {
   Accordion_default as Accordion,
   Alert_default as Alert,
+  AreaChart_default as AreaChart,
   Avatar_default as Avatar,
   Badge_default as Badge,
+  BarChart_default as BarChart,
   Breadcrumb_default as Breadcrumb,
   Button_default as Button,
   Card,
@@ -1344,7 +1578,9 @@ export {
   FileUpload_default as FileUpload,
   Input_default as Input,
   Label_default as Label,
+  LineChart_default as LineChart,
   PasswordInput_default as PasswordInput,
+  PieChart_default as PieChart,
   Progress_default as Progress,
   RadioGroup_default as RadioGroup,
   Select_default as Select,