@efiche/design 0.2.10 → 0.2.11

package/dist/index.cjs

@@ -0,0 +1,1690 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+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,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Checkbox: () => Checkbox_default,
+  CopyButton: () => CopyButton_default,
+  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,
+  Skeleton: () => Skeleton_default,
+  Slider: () => Slider_default,
+  Spinner: () => Spinner_default,
+  Switch: () => Switch_default,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Tabs: () => Tabs_default,
+  Textarea: () => Textarea_default,
+  ThemeProvider: () => ThemeProvider,
+  Tooltip: () => Tooltip_default,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ThemeProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(null);
+var ThemeProvider = ({
+  children,
+  defaultTheme = "light"
+}) => {
+  const [theme, setTheme] = (0, import_react.useState)(defaultTheme);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme, toggle: () => setTheme((t) => t === "light" ? "dark" : "light") }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: theme === "dark" ? "ds-theme-dark" : void 0, children }) });
+};
+var useTheme = () => {
+  const ctx = (0, import_react.useContext)(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside <ThemeProvider>");
+  return ctx;
+};
+
+// src/components/Charts/LineChart.tsx
+var import_react2 = require("react");
+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",
+  className,
+  style
+}) => {
+  const containerRef = (0, import_react2.useRef)(null);
+  const [width, setWidth] = (0, import_react2.useState)(0);
+  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
+  (0, import_react2.useEffect)(() => {
+    if (!containerRef.current) return;
+    const measure = () => setWidth(containerRef.current.offsetWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { width, height, 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 },
+          isAnimationActive: false
+        },
+        line.dataKey
+      );
+    })
+  ] }) });
+};
+var LineChart_default = LineChart;
+
+// src/components/Charts/BarChart.tsx
+var import_react3 = require("react");
+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",
+  className,
+  style
+}) => {
+  const containerRef = (0, import_react3.useRef)(null);
+  const [width, setWidth] = (0, import_react3.useState)(0);
+  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
+  (0, import_react3.useEffect)(() => {
+    if (!containerRef.current) return;
+    const measure = () => setWidth(containerRef.current.offsetWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_recharts2.BarChart, { width, height, 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],
+          isAnimationActive: false
+        },
+        bar.dataKey
+      );
+    })
+  ] }) });
+};
+var BarChart_default = BarChart;
+
+// src/components/Charts/AreaChart.tsx
+var import_react4 = require("react");
+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",
+  className,
+  style
+}) => {
+  const containerRef = (0, import_react4.useRef)(null);
+  const [width, setWidth] = (0, import_react4.useState)(0);
+  const { gridColor, axisStroke, axisTick, tooltipStyle } = getChartTheme(theme);
+  (0, import_react4.useEffect)(() => {
+    if (!containerRef.current) return;
+    const measure = () => setWidth(containerRef.current.offsetWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts3.AreaChart, { width, height, 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,
+          isAnimationActive: false
+        },
+        area.dataKey
+      );
+    })
+  ] }) });
+};
+var AreaChart_default = AreaChart;
+
+// src/components/Charts/PieChart.tsx
+var import_react5 = require("react");
+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",
+  className,
+  style
+}) => {
+  const containerRef = (0, import_react5.useRef)(null);
+  const [width, setWidth] = (0, import_react5.useState)(0);
+  const { tooltipStyle } = getChartTheme(theme);
+  (0, import_react5.useEffect)(() => {
+    if (!containerRef.current) return;
+    const measure = () => setWidth(containerRef.current.offsetWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, []);
+  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)("div", { ref: containerRef, className, style: __spreadValues({ minWidth: 250, width: "100%" }, style), children: width > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts4.PieChart, { width, height, 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,
+        isAnimationActive: false
+      }
+    ),
+    /* @__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_react6 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Accordion = ({ items, defaultValue, multiple = false }) => {
+  const [open, setOpen] = (0, import_react6.useState)(() => {
+    if (!defaultValue) return /* @__PURE__ */ new Set();
+    if (Array.isArray(defaultValue)) return new Set(defaultValue);
+    return /* @__PURE__ */ new Set([defaultValue]);
+  });
+  const [hovered, setHovered] = (0, import_react6.useState)(null);
+  const toggle = (value) => {
+    setOpen((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) {
+        next.delete(value);
+      } else {
+        if (!multiple) next.clear();
+        next.add(value);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+    border: "1px solid var(--ds-border, #e2e8f0)",
+    borderRadius: "0.5rem",
+    overflow: "hidden"
+  }, children: items.map((item, index) => {
+    const isOpen = open.has(item.value);
+    const isHovered = hovered === item.value;
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        style: {
+          borderBottom: isLast ? "none" : "1px solid var(--ds-border, #e2e8f0)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                padding: "1rem",
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                background: isHovered ? "var(--ds-muted, #f1f5f9)" : "transparent",
+                border: "none",
+                cursor: "pointer",
+                textAlign: "left",
+                color: "var(--ds-text-primary, #0f172a)",
+                transition: "background-color 0.15s"
+              },
+              onClick: () => toggle(item.value),
+              onMouseEnter: () => setHovered(item.value),
+              onMouseLeave: () => setHovered(null),
+              "aria-expanded": isOpen,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: item.trigger }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_lucide_react.ChevronDown,
+                  {
+                    size: 16,
+                    style: {
+                      flexShrink: 0,
+                      color: "var(--ds-text-secondary, #64748b)",
+                      transition: "transform 0.2s ease",
+                      transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__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_runtime6.jsx)("div", { style: {
+            padding: "0 1rem 1rem",
+            fontSize: "0.875rem",
+            color: "var(--ds-text-secondary, #64748b)"
+          }, children: item.content }) })
+        ]
+      },
+      item.value
+    );
+  }) });
+};
+var Accordion_default = Accordion;
+
+// src/components/Alert/Alert.tsx
+var import_lucide_react2 = require("lucide-react");
+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)" },
+  warning: { bg: "var(--ds-warning-bg, #fffbeb)", border: "var(--ds-warning, #f59e0b)", icon: "var(--ds-warning, #f59e0b)", title: "var(--ds-warning-title, #78350f)", desc: "var(--ds-warning-desc, #92400e)" },
+  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_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_runtime7.jsxs)("div", { role: "alert", style: {
+    display: "flex",
+    gap: "0.75rem",
+    padding: "1rem",
+    borderRadius: "0.5rem",
+    borderLeft: `4px solid ${v.border}`,
+    backgroundColor: v.bg
+  }, children: [
+    /* @__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_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_runtime8.jsx)(
+  "div",
+  {
+    className,
+    "aria-label": fallback,
+    style: __spreadValues(__spreadValues({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "9999px",
+      backgroundColor: "var(--ds-accent, #f1f5f9)",
+      color: "var(--ds-text-primary, #0f172a)",
+      fontWeight: 600,
+      flexShrink: 0,
+      userSelect: "none"
+    }, sizeMap[size]), style),
+    children: fallback
+  }
+);
+var Avatar_default = Avatar;
+
+// src/components/Badge/Badge.tsx
+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)" },
+  outline: { backgroundColor: "transparent", border: "1px solid var(--ds-border, #e2e8f0)", color: "var(--ds-text-primary, #0f172a)" },
+  danger: { backgroundColor: "var(--ds-danger, #ef4444)", color: "#fff" },
+  success: { backgroundColor: "var(--ds-success, #22c55e)", color: "#fff" },
+  warning: { backgroundColor: "var(--ds-warning, #f59e0b)", color: "#fff" },
+  info: { backgroundColor: "var(--ds-info, #3b82f6)", color: "#fff" }
+};
+var sizeMap2 = {
+  sm: { padding: "0.125rem 0.5rem", fontSize: "0.625rem" },
+  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_runtime9.jsx)("span", { style: __spreadValues(__spreadValues(__spreadValues({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  borderRadius: "9999px",
+  fontWeight: 500,
+  whiteSpace: "nowrap"
+}, variantMap2[variant]), sizeMap2[size]), style), children });
+var Badge_default = Badge;
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+var import_react7 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Breadcrumb = ({ items }) => {
+  const [hovered, setHovered] = (0, import_react7.useState)(null);
+  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",
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    fontSize: "0.875rem"
+  }, children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    const isHovered = hovered === item.label;
+    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,
+          "aria-hidden": true,
+          style: { color: "var(--ds-text-secondary, #64748b)", margin: "0 0.25rem", flexShrink: 0 }
+        }
+      ),
+      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_runtime10.jsx)(
+        "a",
+        {
+          href: item.href,
+          onMouseEnter: () => setHovered(item.label),
+          onMouseLeave: () => setHovered(null),
+          style: {
+            color: "var(--ds-text-secondary, #64748b)",
+            textDecoration: isHovered ? "underline" : "none",
+            transition: "color 0.15s"
+          },
+          children: item.label
+        }
+      )
+    ] }, item.label);
+  }) }) });
+};
+var Breadcrumb_default = Breadcrumb;
+
+// src/components/Button/Button.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_react8 = require("react");
+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)" },
+  ghost: { backgroundColor: "var(--ds-muted, #f1f5f9)", color: "var(--ds-text-primary, #0f172a)", borderColor: "transparent" },
+  danger: { backgroundColor: "var(--ds-danger, #ef4444)", color: "#fff", borderColor: "transparent" },
+  warning: { backgroundColor: "var(--ds-warning, #f59e0b)", color: "#fff", borderColor: "transparent" },
+  info: { backgroundColor: "var(--ds-info, #3b82f6)", color: "#fff", borderColor: "transparent" },
+  success: { backgroundColor: "var(--ds-success, #22c55e)", color: "#fff", borderColor: "transparent" }
+};
+var variantHoverStyles = {
+  solid: { opacity: 0.88 },
+  outline: { backgroundColor: "var(--ds-muted, #f1f5f9)" },
+  ghost: { backgroundColor: "var(--ds-card, #ffffff)" },
+  danger: { opacity: 0.88 },
+  warning: { opacity: 0.88 },
+  info: { opacity: 0.88 },
+  success: { opacity: 0.88 }
+};
+var sizeStyles = {
+  sm: { padding: "0.25rem 0.625rem", fontSize: "0.8rem" },
+  md: { padding: "0.5rem 1rem", fontSize: "0.875rem" },
+  lg: { padding: "0.75rem 1.5rem", fontSize: "1rem" }
+};
+var Button = (_a) => {
+  var _b = _a, {
+    text,
+    children,
+    loading = false,
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    outline = false,
+    ghost = false,
+    danger = false,
+    warning = false,
+    info = false,
+    success = false,
+    variant,
+    small = false,
+    large = false,
+    size,
+    style: styleProp
+  } = _b, props = __objRest(_b, [
+    "text",
+    "children",
+    "loading",
+    "disabled",
+    "icon",
+    "iconPosition",
+    "outline",
+    "ghost",
+    "danger",
+    "warning",
+    "info",
+    "success",
+    "variant",
+    "small",
+    "large",
+    "size",
+    "style"
+  ]);
+  const [hovered, setHovered] = (0, import_react8.useState)(false);
+  const resolvedVariant = variant != null ? variant : danger ? "danger" : warning ? "warning" : info ? "info" : success ? "success" : ghost ? "ghost" : outline ? "outline" : "solid";
+  const resolvedSize = size != null ? size : small ? "sm" : large ? "lg" : "md";
+  const isDisabled = disabled || loading;
+  const content = children != null ? children : text;
+  const showIcon = icon && !loading;
+  const computedStyle = __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    border: "1px solid transparent",
+    borderRadius: "0.375rem",
+    fontWeight: 500,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    transition: "opacity 0.15s, background-color 0.15s",
+    opacity: isDisabled ? 0.5 : 1,
+    pointerEvents: loading ? "none" : void 0
+  }, variantStyles[resolvedVariant]), sizeStyles[resolvedSize]), hovered && !isDisabled ? variantHoverStyles[resolvedVariant] : {}), styleProp);
+  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,
+        style: computedStyle,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false)
+      }, props), {
+        children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_lucide_react4.LoaderCircle,
+            {
+              "aria-hidden": true,
+              style: { width: "1em", height: "1em", animation: "ds-spin 0.75s linear infinite" }
+            }
+          ) : null,
+          showIcon && iconPosition === "left" ? icon : null,
+          content,
+          showIcon && iconPosition === "right" ? icon : null
+        ]
+      })
+    )
+  ] });
+};
+var Button_default = Button;
+
+// src/components/Card/Card.tsx
+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_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
+    border: "1px solid var(--ds-border, #e2e8f0)",
+    borderRadius: "0.5rem",
+    backgroundColor: "var(--ds-card, #ffffff)"
+  }, style) }, props));
+};
+var CardHeader = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.375rem",
+    padding: "1.5rem 1.5rem 0"
+  }, style) }, props));
+};
+var CardTitle = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", __spreadValues({ style: __spreadValues({
+    fontSize: "1rem",
+    fontWeight: 600,
+    color: "var(--ds-text-primary, #0f172a)",
+    margin: 0,
+    lineHeight: 1.4
+  }, style) }, props));
+};
+var CardDescription = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", __spreadValues({ style: __spreadValues({
+    fontSize: "0.875rem",
+    color: "var(--ds-text-secondary, #64748b)",
+    margin: 0
+  }, style) }, props));
+};
+var CardContent = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  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_runtime12.jsx)("div", __spreadValues({ style: __spreadValues({
+    display: "flex",
+    alignItems: "center",
+    padding: "0 1.5rem 1.5rem"
+  }, style) }, props));
+};
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react9 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Checkbox = ({
+  label,
+  checked,
+  defaultChecked = false,
+  disabled,
+  id,
+  onChange
+}) => {
+  const [internal, setInternal] = (0, import_react9.useState)(defaultChecked);
+  const isChecked = checked !== void 0 ? checked : internal;
+  const handleChange = () => {
+    if (disabled) return;
+    const next = !isChecked;
+    setInternal(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: id, style: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none",
+    opacity: disabled ? 0.5 : 1
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        id,
+        checked: isChecked,
+        disabled,
+        onChange: handleChange,
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+      }
+    ),
+    /* @__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)"}`,
+      borderRadius: "0.25rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      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_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;
+
+// src/components/CopyButton/CopyButton.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_react10 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CopyButton = ({ text }) => {
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const [hovered, setHovered] = (0, import_react10.useState)(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "button",
+    {
+      onClick: handleCopy,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-label": copied ? "Copied" : `Copy ${text}`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0.25rem",
+        border: "none",
+        borderRadius: "0.25rem",
+        backgroundColor: hovered ? "var(--ds-accent, #f1f5f9)" : "transparent",
+        color: hovered ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)",
+        cursor: "pointer",
+        transition: "background-color 0.15s, color 0.15s"
+      },
+      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" } })
+    }
+  );
+};
+var CopyButton_default = CopyButton;
+
+// src/components/FileUpload/FileUpload.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_react11 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
+  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
+  const [fileNames, setFileNames] = (0, import_react11.useState)([]);
+  const inputRef = (0, import_react11.useRef)(null);
+  const handleFiles = (list) => {
+    setFileNames(Array.from(list).map((f) => f.name));
+    onFileSelect == null ? void 0 : onFileSelect(list);
+  };
+  const isActive = isDragging || isHovered;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      onClick: () => {
+        var _a;
+        return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.click());
+      },
+      onMouseEnter: () => !disabled && setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onDragOver: (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+      },
+      onDragLeave: () => setIsDragging(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (!disabled && e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
+      },
+      style: {
+        border: `2px dashed ${isActive ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
+        borderRadius: "0.5rem",
+        padding: "2rem",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "0.5rem",
+        cursor: disabled ? "not-allowed" : "pointer",
+        backgroundColor: isActive ? "var(--ds-primary-50, #eff6ff)" : "var(--ds-muted, #f1f5f9)",
+        transition: "border-color 0.15s, background-color 0.15s",
+        textAlign: "center",
+        opacity: disabled ? 0.5 : 1
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            style: { display: "none" },
+            onChange: (e) => e.target.files && handleFiles(e.target.files)
+          }
+        ),
+        /* @__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"
+        ] })
+      ]
+    }
+  );
+};
+var FileUpload_default = FileUpload;
+
+// src/components/Input/Input.tsx
+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); }
+[data-ds-input]:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--ds-muted, #f1f5f9); }
+[data-ds-input][data-error="true"]:focus { border-color: var(--ds-danger, #ef4444); box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15); }
+[data-ds-input][data-success="true"]:focus { border-color: var(--ds-success, #22c55e); box-shadow: 0 0 0 3px rgb(34 197 94 / 0.15); }
+`;
+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_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",
+        alignItems: "center",
+        color: "var(--ds-text-secondary, #64748b)",
+        pointerEvents: "none"
+      }, children: leftIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        __spreadValues({
+          "data-ds-input": "",
+          "data-error": error ? "true" : void 0,
+          "data-success": success ? "true" : void 0,
+          style: __spreadValues({
+            width: "100%",
+            height: "2.25rem",
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: leftIcon ? "2.25rem" : "0.75rem",
+            paddingRight: rightIcon ? "2.25rem" : "0.75rem",
+            border: `1px solid ${error ? "var(--ds-danger, #ef4444)" : success ? "var(--ds-success, #22c55e)" : "var(--ds-border, #e2e8f0)"}`,
+            borderRadius: "0.375rem",
+            fontSize: "0.875rem",
+            backgroundColor: "var(--ds-card, #fff)",
+            color: "var(--ds-text-primary, #0f172a)",
+            fontFamily: "inherit",
+            transition: "border-color 0.15s, box-shadow 0.15s"
+          }, style)
+        }, props)
+      ),
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: {
+        position: "absolute",
+        right: "0.625rem",
+        display: "flex",
+        alignItems: "center",
+        color: "var(--ds-text-secondary, #64748b)",
+        pointerEvents: "none"
+      }, children: rightIcon })
+    ] })
+  ] });
+};
+var Input_default = Input;
+
+// src/components/Label/Label.tsx
+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_runtime17.jsxs)("label", __spreadProps(__spreadValues({ style: __spreadValues({
+    display: "block",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: "var(--ds-text-primary, #0f172a)",
+    marginBottom: "0.375rem"
+  }, style) }, props), { children: [
+    children,
+    required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
+  ] }));
+};
+var Label_default = Label;
+
+// src/components/PasswordInput/PasswordInput.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_react12 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var PasswordInput = (props) => {
+  const [visible, setVisible] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Input_default,
+    __spreadProps(__spreadValues({}, props), {
+      type: visible ? "text" : "password",
+      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_runtime18.jsx)(import_lucide_react7.EyeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Eye, { size: 16 })
+        }
+      )
+    })
+  );
+};
+var PasswordInput_default = PasswordInput;
+
+// src/components/Progress/Progress.tsx
+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_runtime19.jsx)(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": pct,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      style: {
+        width: "100%",
+        height: "0.5rem",
+        backgroundColor: "var(--ds-border, #e2e8f0)",
+        borderRadius: "9999px",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: {
+        height: "100%",
+        width: `${pct}%`,
+        backgroundColor: "var(--ds-primary, #3b82f6)",
+        borderRadius: "9999px",
+        transition: "width 0.3s ease"
+      } })
+    }
+  );
+};
+var Progress_default = Progress;
+
+// src/components/RadioGroup/RadioGroup.tsx
+var import_react13 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RadioGroup = ({
+  options,
+  name,
+  value,
+  defaultValue = "",
+  disabled,
+  onChange
+}) => {
+  const [internal, setInternal] = (0, import_react13.useState)(defaultValue);
+  const selected = value !== void 0 ? value : internal;
+  const handleChange = (val) => {
+    if (disabled) return;
+    setInternal(val);
+    onChange == null ? void 0 : onChange(val);
+  };
+  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_runtime20.jsxs)("label", { style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      cursor: disabled ? "not-allowed" : "pointer",
+      userSelect: "none",
+      opacity: disabled ? 0.5 : 1
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: option.value,
+          checked: isSelected,
+          disabled,
+          onChange: () => handleChange(option.value),
+          style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: {
+        width: "1.125rem",
+        height: "1.125rem",
+        borderRadius: "9999px",
+        border: `2px solid ${isSelected ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        backgroundColor: "var(--ds-card, #fff)",
+        transition: "border-color 0.15s"
+      }, 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_runtime20.jsx)("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: option.label })
+    ] }, option.value);
+  }) });
+};
+var RadioGroup_default = RadioGroup;
+
+// src/components/Select/Select.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_react14 = require("react");
+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); }
+`;
+var Select = ({
+  options,
+  value,
+  defaultValue = "",
+  placeholder = "Choose an option",
+  disabled,
+  onChange
+}) => {
+  var _a;
+  const [internal, setInternal] = (0, import_react14.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [hoveredOption, setHoveredOption] = (0, import_react14.useState)(null);
+  const ref = (0, import_react14.useRef)(null);
+  const selected = value !== void 0 ? value : internal;
+  const selectedLabel = (_a = options.find((o) => o.value === selected)) == null ? void 0 : _a.label;
+  const handleSelect = (val) => {
+    setInternal(val);
+    setOpen(false);
+    onChange == null ? void 0 : onChange(val);
+  };
+  (0, import_react14.useEffect)(() => {
+    const handleOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, []);
+  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_runtime21.jsxs)(
+        "button",
+        {
+          type: "button",
+          "data-ds-select-trigger": "",
+          onClick: () => !disabled && setOpen((o) => !o),
+          disabled,
+          style: {
+            width: "100%",
+            height: "2.25rem",
+            padding: "0 0.75rem",
+            border: `1px solid ${open ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)"}`,
+            borderRadius: "0.375rem",
+            fontSize: "0.875rem",
+            backgroundColor: "var(--ds-card, #fff)",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.5rem",
+            boxShadow: open ? "0 0 0 3px rgb(59 130 246 / 0.15)" : "none",
+            transition: "border-color 0.15s, box-shadow 0.15s",
+            textAlign: "left",
+            fontFamily: "inherit"
+          },
+          children: [
+            /* @__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,
+                style: {
+                  flexShrink: 0,
+                  color: "var(--ds-text-secondary, #64748b)",
+                  transition: "transform 0.15s",
+                  transform: open ? "rotate(180deg)" : "rotate(0deg)"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: {
+        position: "absolute",
+        top: "calc(100% + 0.25rem)",
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        backgroundColor: "var(--ds-card, #fff)",
+        border: "1px solid var(--ds-border, #e2e8f0)",
+        borderRadius: "0.375rem",
+        boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+        overflow: "hidden"
+      }, children: options.map((option) => {
+        const isSelected = selected === option.value;
+        const isHovered = hoveredOption === option.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            onClick: () => handleSelect(option.value),
+            onMouseEnter: () => setHoveredOption(option.value),
+            onMouseLeave: () => setHoveredOption(null),
+            style: {
+              padding: "0.5rem 0.75rem",
+              fontSize: "0.875rem",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              color: "var(--ds-text-primary, #0f172a)",
+              backgroundColor: isSelected || isHovered ? "var(--ds-muted, #f1f5f9)" : "transparent",
+              fontWeight: isSelected ? 500 : void 0,
+              transition: "background-color 0.1s"
+            },
+            children: [
+              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
+            ]
+          },
+          option.value
+        );
+      }) })
+    ] })
+  ] });
+};
+var Select_default = Select;
+
+// src/components/Skeleton/Skeleton.tsx
+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_runtime22.jsx)(
+    "div",
+    {
+      "data-ds-skeleton": "",
+      "aria-hidden": "true",
+      style: {
+        height,
+        width,
+        backgroundColor: "var(--ds-muted, #f1f5f9)",
+        borderRadius: circle ? "9999px" : "0.375rem"
+      }
+    }
+  )
+] });
+var Skeleton_default = Skeleton;
+
+// src/components/Slider/Slider.tsx
+var import_react15 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var sliderCSS = `
+[data-ds-slider] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 0.375rem;
+    border-radius: 9999px;
+    outline: none;
+    cursor: pointer;
+    background: linear-gradient(
+        to right,
+        var(--ds-primary, #3b82f6) 0%,
+        var(--ds-primary, #3b82f6) var(--fill, 50%),
+        var(--ds-border, #e2e8f0) var(--fill, 50%),
+        var(--ds-border, #e2e8f0) 100%
+    );
+}
+[data-ds-slider]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 9999px;
+    background-color: var(--ds-primary, #3b82f6);
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
+    transition: transform 0.1s;
+}
+[data-ds-slider]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+[data-ds-slider]::-moz-range-thumb {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 9999px;
+    background-color: var(--ds-primary, #3b82f6);
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
+}
+[data-ds-slider]:disabled { cursor: not-allowed; }
+`;
+var Slider = ({
+  value,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled,
+  onChange
+}) => {
+  const [internal, setInternal] = (0, import_react15.useState)(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const fill = `${(current - min) / (max - min) * 100}%`;
+  const handleChange = (e) => {
+    const val = Number(e.target.value);
+    setInternal(val);
+    onChange == null ? void 0 : onChange(val);
+  };
+  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_runtime23.jsx)(
+      "input",
+      {
+        type: "range",
+        "data-ds-slider": "",
+        min,
+        max,
+        step,
+        value: current,
+        disabled,
+        onChange: handleChange,
+        style: { "--fill": fill }
+      }
+    ) })
+  ] });
+};
+var Slider_default = Slider;
+
+// src/components/Spinner/Spinner.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var sizePx = { sm: 16, md: 24, lg: 32 };
+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],
+      "aria-label": "Loading",
+      style: { color: "var(--ds-primary, #3b82f6)", animation: "ds-spin 0.75s linear infinite" }
+    }
+  )
+] });
+var Spinner_default = Spinner;
+
+// src/components/Switch/Switch.tsx
+var import_react16 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Switch = ({
+  label,
+  checked,
+  defaultChecked = false,
+  disabled,
+  id,
+  onChange
+}) => {
+  const [internal, setInternal] = (0, import_react16.useState)(defaultChecked);
+  const isOn = checked !== void 0 ? checked : internal;
+  const handleToggle = () => {
+    if (disabled) return;
+    const next = !isOn;
+    setInternal(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { htmlFor: id, style: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.625rem",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none",
+    opacity: disabled ? 0.5 : 1
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        id,
+        checked: isOn,
+        disabled,
+        onChange: handleToggle,
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: {
+      width: "2.75rem",
+      height: "1.5rem",
+      borderRadius: "9999px",
+      backgroundColor: isOn ? "var(--ds-primary, #3b82f6)" : "var(--ds-border, #e2e8f0)",
+      position: "relative",
+      transition: "background-color 0.2s",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { style: {
+      position: "absolute",
+      top: "0.175rem",
+      left: "0.175rem",
+      width: "1.15rem",
+      height: "1.15rem",
+      borderRadius: "9999px",
+      backgroundColor: "#fff",
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.15)",
+      transition: "transform 0.2s",
+      transform: isOn ? "translateX(1.25rem)" : "translateX(0)"
+    } }) }),
+    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_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_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_runtime26.jsx)("table", __spreadValues({ style: __spreadValues({
+      width: "100%",
+      borderCollapse: "collapse",
+      fontSize: "0.875rem"
+    }, style) }, 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_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_runtime26.jsx)("th", __spreadValues({ style: __spreadValues({
+    padding: "0.75rem 1rem",
+    textAlign: "left",
+    fontWeight: 500,
+    color: "var(--ds-text-secondary, #64748b)",
+    backgroundColor: "var(--ds-muted, #f1f5f9)",
+    borderBottom: "1px solid var(--ds-border, #e2e8f0)",
+    whiteSpace: "nowrap"
+  }, style) }, props));
+};
+var TableCell = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "td",
+    __spreadValues({
+      "data-ds-table-cell": "",
+      style: __spreadValues({
+        padding: "0.75rem 1rem",
+        borderBottom: "1px solid var(--ds-border, #e2e8f0)",
+        color: "var(--ds-text-primary, #0f172a)",
+        transition: "background-color 0.1s"
+      }, style)
+    }, props)
+  );
+};
+
+// src/components/Tabs/Tabs.tsx
+var import_react17 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Tabs = ({ tabs, defaultValue }) => {
+  var _a, _b;
+  const [active, setActive] = (0, import_react17.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
+  const [hovered, setHovered] = (0, import_react17.useState)(null);
+  const activeTab = tabs.find((t) => t.value === active);
+  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",
+      padding: "0.25rem",
+      gap: "0.125rem"
+    }, children: tabs.map((tab) => {
+      const isActive = active === tab.value;
+      const isHovered = hovered === tab.value;
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": isActive,
+          onClick: () => setActive(tab.value),
+          onMouseEnter: () => setHovered(tab.value),
+          onMouseLeave: () => setHovered(null),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.375rem",
+            padding: "0.375rem 0.75rem",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            borderRadius: "0.375rem",
+            background: isActive ? "var(--ds-card, #ffffff)" : "transparent",
+            border: "none",
+            cursor: "pointer",
+            color: isActive || isHovered ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)",
+            boxShadow: isActive ? "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" : "none",
+            transition: "color 0.15s, background-color 0.15s, box-shadow 0.15s",
+            whiteSpace: "nowrap"
+          },
+          children: [
+            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_runtime27.jsx)("div", { role: "tabpanel", style: {
+      paddingTop: "1rem",
+      fontSize: "0.875rem",
+      color: "var(--ds-text-secondary, #64748b)"
+    }, children: activeTab == null ? void 0 : activeTab.content })
+  ] });
+};
+var Tabs_default = Tabs;
+
+// src/components/Textarea/Textarea.tsx
+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); }
+[data-ds-textarea]:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--ds-muted, #f1f5f9); }
+[data-ds-textarea][data-error="true"] { border-color: var(--ds-danger, #ef4444); }
+[data-ds-textarea][data-error="true"]:focus { border-color: var(--ds-danger, #ef4444); box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15); }
+`;
+var Textarea = (_a) => {
+  var _b = _a, { error, style } = _b, props = __objRest(_b, ["error", "style"]);
+  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": "",
+        "data-error": error ? "true" : void 0,
+        style: __spreadValues({
+          width: "100%",
+          padding: "0.5rem 0.75rem",
+          border: `1px solid ${error ? "var(--ds-danger, #ef4444)" : "var(--ds-border, #e2e8f0)"}`,
+          borderRadius: "0.375rem",
+          fontSize: "0.875rem",
+          backgroundColor: "var(--ds-card, #fff)",
+          color: "var(--ds-text-primary, #0f172a)",
+          fontFamily: "inherit",
+          resize: "vertical",
+          transition: "border-color 0.15s, box-shadow 0.15s",
+          minHeight: "6rem",
+          boxSizing: "border-box"
+        }, style)
+      }, props)
+    )
+  ] });
+};
+var Textarea_default = Textarea;
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react18 = require("react");
+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%)" },
+  left: { right: "calc(100% + 8px)", top: "50%", transform: "translateY(-50%)" },
+  right: { left: "calc(100% + 8px)", top: "50%", transform: "translateY(-50%)" }
+};
+var tooltipCSS = `
+[data-ds-tt]::before {
+    content: '';
+    position: absolute;
+    border: 5px solid transparent;
+}
+[data-ds-tt="top"]::before    { top: 100%;    left: 50%;  transform: translateX(-50%); border-top-color:    var(--ds-tooltip-bg, #0f172a); }
+[data-ds-tt="bottom"]::before { bottom: 100%; left: 50%;  transform: translateX(-50%); border-bottom-color: var(--ds-tooltip-bg, #0f172a); }
+[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 Tooltip5 = ({ content, children, position = "top" }) => {
+  const [visible, setVisible] = (0, import_react18.useState)(false);
+  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" },
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "span",
+            {
+              role: "tooltip",
+              "data-ds-tt": position,
+              style: __spreadValues({
+                position: "absolute",
+                zIndex: 50,
+                padding: "0.375rem 0.625rem",
+                backgroundColor: "var(--ds-tooltip-bg, #0f172a)",
+                color: "var(--ds-tooltip-text, #ffffff)",
+                fontSize: "0.75rem",
+                lineHeight: 1.4,
+                borderRadius: "0.375rem",
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+                opacity: visible ? 1 : 0,
+                transition: "opacity 0.15s"
+              }, positionStyle[position]),
+              children: content
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+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,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CopyButton,
+  FileUpload,
+  Input,
+  Label,
+  LineChart,
+  PasswordInput,
+  PieChart,
+  Progress,
+  RadioGroup,
+  Select,
+  Skeleton,
+  Slider,
+  Spinner,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Textarea,
+  ThemeProvider,
+  Tooltip,
+  useTheme
+});
+//# sourceMappingURL=index.cjs.map