@efiche/design 0.1.6 → 0.1.8

package/dist/index.js

@@ -143,72 +143,145 @@ var Accordion_default = Accordion;
 
 // src/components/Alert/Alert.tsx
 import { Info, CheckCircle2, AlertTriangle, AlertCircle } from "lucide-react";
-
-// src/components/Alert/Alert.module.css
-var Alert_default = {};
-
-// src/components/Alert/Alert.tsx
 import { jsx as jsx3, jsxs as jsxs2 } 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)" },
+  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__ */ jsx3(Info, { size: 16 }),
   success: /* @__PURE__ */ jsx3(CheckCircle2, { size: 16 }),
   warning: /* @__PURE__ */ jsx3(AlertTriangle, { size: 16 }),
   danger: /* @__PURE__ */ jsx3(AlertCircle, { size: 16 })
 };
-var Alert = ({ variant = "info", title, description }) => /* @__PURE__ */ jsxs2("div", { className: `${Alert_default.alert} ${Alert_default[variant]}`, role: "alert", children: [
-  /* @__PURE__ */ jsx3("span", { className: Alert_default.icon, children: icons[variant] }),
-  /* @__PURE__ */ jsxs2("div", { className: Alert_default.content, children: [
-    /* @__PURE__ */ jsx3("p", { className: Alert_default.title, children: title }),
-    /* @__PURE__ */ jsx3("p", { className: Alert_default.description, children: description })
-  ] })
-] });
-var Alert_default2 = Alert;
-
-// src/components/Avatar/Avatar.module.css
-var Avatar_default = {};
+var Alert = ({ variant = "info", title, description }) => {
+  const v = variantMap[variant];
+  return /* @__PURE__ */ jsxs2("div", { role: "alert", style: {
+    display: "flex",
+    gap: "0.75rem",
+    padding: "1rem",
+    borderRadius: "0.5rem",
+    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 })
+    ] })
+  ] });
+};
+var Alert_default = Alert;
 
 // src/components/Avatar/Avatar.tsx
 import { jsx as jsx4 } 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(
   "div",
   {
-    className: `${Avatar_default.avatar} ${Avatar_default[size]}${className ? ` ${className}` : ""}`,
-    style,
+    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_default2 = Avatar;
-
-// src/components/Badge/Badge.module.css
-var Badge_default = {};
+var Avatar_default = Avatar;
 
 // src/components/Badge/Badge.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Badge = ({ variant = "default", size = "md", children, style }) => /* @__PURE__ */ jsx5("span", { className: `${Badge_default.badge} ${Badge_default[variant]} ${Badge_default[size]}`, style, children });
-var Badge_default2 = Badge;
+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__ */ jsx5("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
+import { useState as useState3 } from "react";
 import { ChevronRight } from "lucide-react";
-
-// src/components/Breadcrumb/Breadcrumb.module.css
-var Breadcrumb_default = {};
-
-// src/components/Breadcrumb/Breadcrumb.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var Breadcrumb = ({ items }) => /* @__PURE__ */ jsx6("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx6("ol", { className: Breadcrumb_default.list, children: items.map((item, i) => {
-  const isLast = i === items.length - 1;
-  return /* @__PURE__ */ jsxs3("li", { className: Breadcrumb_default.item, children: [
-    i > 0 && /* @__PURE__ */ jsx6(ChevronRight, { size: 14, className: Breadcrumb_default.separator, "aria-hidden": true }),
-    isLast || !item.href ? /* @__PURE__ */ jsx6("span", { className: `${Breadcrumb_default.link} ${isLast ? Breadcrumb_default.current : ""}`, children: item.label }) : /* @__PURE__ */ jsx6("a", { href: item.href, className: Breadcrumb_default.link, children: item.label })
-  ] }, item.label);
-}) }) });
-var Breadcrumb_default2 = Breadcrumb;
+var Breadcrumb = ({ items }) => {
+  const [hovered, setHovered] = useState3(null);
+  return /* @__PURE__ */ jsx6("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx6("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__ */ jsxs3("li", { style: { display: "flex", alignItems: "center" }, children: [
+      i > 0 && /* @__PURE__ */ jsx6(
+        ChevronRight,
+        {
+          size: 14,
+          "aria-hidden": true,
+          style: { color: "var(--ds-text-secondary, #64748b)", margin: "0 0.25rem", flexShrink: 0 }
+        }
+      ),
+      isLast || !item.href ? /* @__PURE__ */ jsx6("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(
+        "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
 import { LoaderCircle } from "lucide-react";
-import { useEffect, useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } 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)" },
@@ -232,14 +305,6 @@ var sizeStyles = {
   md: { padding: "0.5rem 1rem", fontSize: "0.875rem" },
   lg: { padding: "0.75rem 1.5rem", fontSize: "1rem" }
 };
-function injectSpinKeyframe() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("ds-spin-keyframe")) return;
-  const style = document.createElement("style");
-  style.id = "ds-spin-keyframe";
-  style.textContent = "@keyframes ds-spin { to { transform: rotate(360deg); } }";
-  document.head.appendChild(style);
-}
 var Button = (_a) => {
   var _b = _a, {
     text,
@@ -278,10 +343,7 @@ var Button = (_a) => {
     "size",
     "style"
   ]);
-  const [hovered, setHovered] = useState3(false);
-  useEffect(() => {
-    injectSpinKeyframe();
-  }, []);
+  const [hovered, setHovered] = useState4(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;
@@ -299,68 +361,86 @@ 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(
-    "button",
-    __spreadProps(__spreadValues({
-      disabled: isDisabled,
-      style: computedStyle,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false)
-    }, props), {
-      children: [
-        loading ? /* @__PURE__ */ jsx7(
-          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
-      ]
-    })
-  );
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx7("style", { href: "ds-spin", precedence: "low", children: `@keyframes ds-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      __spreadProps(__spreadValues({
+        disabled: isDisabled,
+        style: computedStyle,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false)
+      }, props), {
+        children: [
+          loading ? /* @__PURE__ */ jsx7(
+            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.module.css
-var Card_default = {};
-
 // src/components/Card/Card.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Card = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ className: `${Card_default.card}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx8("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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ className: `${Card_default.header}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx8("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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx8("h3", __spreadValues({ className: `${Card_default.title}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx8("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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx8("p", __spreadValues({ className: `${Card_default.description}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx8("p", __spreadValues({ style: __spreadValues({
+    fontSize: "0.875rem",
+    color: "var(--ds-text-secondary, #64748b)",
+    margin: 0
+  }, style) }, props));
 };
 var CardContent = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ className: `${Card_default.content}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx8("div", __spreadValues({ style: __spreadValues({ padding: "1.5rem" }, style) }, props));
 };
 var CardFooter = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx8("div", __spreadValues({ className: `${Card_default.footer}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx8("div", __spreadValues({ style: __spreadValues({
+    display: "flex",
+    alignItems: "center",
+    padding: "0 1.5rem 1.5rem"
+  }, style) }, props));
 };
 
 // src/components/Checkbox/Checkbox.tsx
-import { useState as useState4 } from "react";
-
-// src/components/Checkbox/Checkbox.module.css
-var Checkbox_default = {};
-
-// src/components/Checkbox/Checkbox.tsx
+import { useState as useState5 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var Checkbox = ({
   label,
@@ -370,7 +450,7 @@ var Checkbox = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = useState4(defaultChecked);
+  const [internal, setInternal] = useState5(defaultChecked);
   const isChecked = checked !== void 0 ? checked : internal;
   const handleChange = () => {
     if (disabled) return;
@@ -378,7 +458,14 @@ var Checkbox = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ jsxs5("label", { className: `${Checkbox_default.container} ${disabled ? Checkbox_default.disabled : ""}`, htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs5("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__ */ jsx9(
       "input",
       {
@@ -387,26 +474,33 @@ var Checkbox = ({
         checked: isChecked,
         disabled,
         onChange: handleChange,
-        className: Checkbox_default.input
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ jsx9("span", { className: `${Checkbox_default.box} ${isChecked ? Checkbox_default.checked : ""}`, children: isChecked && /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 12 10", fill: "none", className: Checkbox_default.checkmark, children: /* @__PURE__ */ jsx9("path", { d: "M1 5l3.5 3.5L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-    label && /* @__PURE__ */ jsx9("span", { className: Checkbox_default.label, children: label })
+    /* @__PURE__ */ jsx9("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__ */ 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 })
   ] });
 };
-var Checkbox_default2 = Checkbox;
+var Checkbox_default = Checkbox;
 
 // src/components/CopyButton/CopyButton.tsx
 import { Check, Copy } from "lucide-react";
-import { useState as useState5 } from "react";
-
-// src/components/CopyButton/CopyButton.module.css
-var CopyButton_default = {};
-
-// src/components/CopyButton/CopyButton.tsx
+import { useState as useState6 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var CopyButton = ({ text }) => {
-  const [copied, setCopied] = useState5(false);
+  const [copied, setCopied] = useState6(false);
+  const [hovered, setHovered] = useState6(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(text);
     setCopied(true);
@@ -415,40 +509,51 @@ var CopyButton = ({ text }) => {
   return /* @__PURE__ */ jsx10(
     "button",
     {
-      className: CopyButton_default.copyButton,
       onClick: handleCopy,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       "aria-label": copied ? "Copied" : `Copy ${text}`,
-      children: copied ? /* @__PURE__ */ jsx10(Check, { className: CopyButton_default.icon }) : /* @__PURE__ */ jsx10(Copy, { className: CopyButton_default.icon })
+      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__ */ jsx10(Check, { style: { width: "1rem", height: "1rem" } }) : /* @__PURE__ */ jsx10(Copy, { style: { width: "1rem", height: "1rem" } })
     }
   );
 };
-var CopyButton_default2 = CopyButton;
+var CopyButton_default = CopyButton;
 
 // src/components/FileUpload/FileUpload.tsx
 import { Upload } from "lucide-react";
-import { useRef, useState as useState6 } from "react";
-
-// src/components/FileUpload/FileUpload.module.css
-var FileUpload_default = {};
-
-// src/components/FileUpload/FileUpload.tsx
+import { useRef, useState as useState7 } from "react";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
-  const [isDragging, setIsDragging] = useState6(false);
-  const [fileNames, setFileNames] = useState6([]);
+  const [isDragging, setIsDragging] = useState7(false);
+  const [isHovered, setIsHovered] = useState7(false);
+  const [fileNames, setFileNames] = useState7([]);
   const inputRef = 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__ */ jsxs6(
     "div",
     {
-      className: `${FileUpload_default.zone} ${isDragging ? FileUpload_default.dragging : ""} ${disabled ? FileUpload_default.disabled : ""}`,
       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);
@@ -459,6 +564,20 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
         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__ */ jsx11(
           "input",
@@ -468,12 +587,12 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
             accept,
             multiple,
             disabled,
-            className: FileUpload_default.input,
+            style: { display: "none" },
             onChange: (e) => e.target.files && handleFiles(e.target.files)
           }
         ),
-        /* @__PURE__ */ jsx11(Upload, { size: 32, className: FileUpload_default.icon }),
-        fileNames.length > 0 ? /* @__PURE__ */ jsx11("p", { className: FileUpload_default.fileName, children: fileNames.join(", ") }) : /* @__PURE__ */ jsxs6("p", { className: FileUpload_default.hint, children: [
+        /* @__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" }),
           " or drag and drop"
         ] })
@@ -481,65 +600,91 @@ var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
     }
   );
 };
-var FileUpload_default2 = FileUpload;
-
-// src/components/Input/Input.module.css
-var Input_default = {};
+var FileUpload_default = FileUpload;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } 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); }
+[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,
-    className
-  } = _b, props = __objRest(_b, [
-    "error",
-    "success",
-    "leftIcon",
-    "rightIcon",
-    "className"
-  ]);
-  const wrapperClasses = [
-    Input_default.wrapper,
-    error ? Input_default.error : "",
-    success ? Input_default.success : "",
-    leftIcon ? Input_default.hasLeft : "",
-    rightIcon ? Input_default.hasRight : "",
-    className != null ? className : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs7("div", { className: wrapperClasses, children: [
-    leftIcon && /* @__PURE__ */ jsx12("span", { className: Input_default.leftIcon, children: leftIcon }),
-    /* @__PURE__ */ jsx12("input", __spreadValues({ className: Input_default.input }, props)),
-    rightIcon && /* @__PURE__ */ jsx12("span", { className: Input_default.rightIcon, children: rightIcon })
+  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: {
+        position: "absolute",
+        left: "0.625rem",
+        display: "flex",
+        alignItems: "center",
+        color: "var(--ds-text-secondary, #64748b)",
+        pointerEvents: "none"
+      }, children: leftIcon }),
+      /* @__PURE__ */ jsx12(
+        "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__ */ jsx12("span", { style: {
+        position: "absolute",
+        right: "0.625rem",
+        display: "flex",
+        alignItems: "center",
+        color: "var(--ds-text-secondary, #64748b)",
+        pointerEvents: "none"
+      }, children: rightIcon })
+    ] })
   ] });
 };
-var Input_default2 = Input;
-
-// src/components/Label/Label.module.css
-var Label_default = {};
+var Input_default = Input;
 
 // src/components/Label/Label.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var Label = (_a) => {
-  var _b = _a, { children, required, className } = _b, props = __objRest(_b, ["children", "required", "className"]);
-  return /* @__PURE__ */ jsxs8("label", __spreadProps(__spreadValues({ className: `${Label_default.label} ${className != null ? className : ""}` }, props), { children: [
+  var _b = _a, { children, required, style } = _b, props = __objRest(_b, ["children", "required", "style"]);
+  return /* @__PURE__ */ jsxs8("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__ */ jsx13("span", { className: Label_default.required, children: "*" })
+    required && /* @__PURE__ */ jsx13("span", { style: { color: "var(--ds-danger, #ef4444)", marginLeft: "0.25rem" }, children: "*" })
   ] }));
 };
-var Label_default2 = Label;
+var Label_default = Label;
 
 // src/components/PasswordInput/PasswordInput.tsx
 import { Eye, EyeOff } from "lucide-react";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var PasswordInput = (props) => {
-  const [visible, setVisible] = useState7(false);
+  const [visible, setVisible] = useState8(false);
   return /* @__PURE__ */ jsx14(
-    Input_default2,
+    Input_default,
     __spreadProps(__spreadValues({}, props), {
       type: visible ? "text" : "password",
       rightIcon: /* @__PURE__ */ jsx14(
@@ -557,9 +702,6 @@ var PasswordInput = (props) => {
 };
 var PasswordInput_default = PasswordInput;
 
-// src/components/Progress/Progress.module.css
-var Progress_default = {};
-
 // src/components/Progress/Progress.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var Progress = ({ value = 0 }) => {
@@ -567,24 +709,31 @@ var Progress = ({ value = 0 }) => {
   return /* @__PURE__ */ jsx15(
     "div",
     {
-      className: Progress_default.track,
       role: "progressbar",
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      children: /* @__PURE__ */ jsx15("div", { className: Progress_default.fill, style: { width: `${pct}%` } })
+      style: {
+        width: "100%",
+        height: "0.5rem",
+        backgroundColor: "var(--ds-border, #e2e8f0)",
+        borderRadius: "9999px",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx15("div", { style: {
+        height: "100%",
+        width: `${pct}%`,
+        backgroundColor: "var(--ds-primary, #3b82f6)",
+        borderRadius: "9999px",
+        transition: "width 0.3s ease"
+      } })
     }
   );
 };
-var Progress_default2 = Progress;
-
-// src/components/RadioGroup/RadioGroup.tsx
-import { useState as useState8 } from "react";
-
-// src/components/RadioGroup/RadioGroup.module.css
-var RadioGroup_default = {};
+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";
 var RadioGroup = ({
   options,
@@ -594,48 +743,65 @@ var RadioGroup = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = useState8(defaultValue);
+  const [internal, setInternal] = useState9(defaultValue);
   const selected = value !== void 0 ? value : internal;
   const handleChange = (val) => {
     if (disabled) return;
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ jsx16("div", { className: RadioGroup_default.group, children: options.map((option) => /* @__PURE__ */ jsxs9(
-    "label",
-    {
-      className: `${RadioGroup_default.item} ${disabled ? RadioGroup_default.disabled : ""}`,
-      children: [
-        /* @__PURE__ */ jsx16(
-          "input",
-          {
-            type: "radio",
-            name,
-            value: option.value,
-            checked: selected === option.value,
-            disabled,
-            onChange: () => handleChange(option.value),
-            className: RadioGroup_default.input
-          }
-        ),
-        /* @__PURE__ */ jsx16("span", { className: `${RadioGroup_default.dot} ${selected === option.value ? RadioGroup_default.checked : ""}`, children: selected === option.value && /* @__PURE__ */ jsx16("span", { className: RadioGroup_default.inner }) }),
-        /* @__PURE__ */ jsx16("span", { className: RadioGroup_default.label, children: option.label })
-      ]
-    },
-    option.value
-  )) });
+  return /* @__PURE__ */ jsx16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: options.map((option) => {
+    const isSelected = selected === option.value;
+    return /* @__PURE__ */ jsxs9("label", { style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      cursor: disabled ? "not-allowed" : "pointer",
+      userSelect: "none",
+      opacity: disabled ? 0.5 : 1
+    }, children: [
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: option.value,
+          checked: isSelected,
+          disabled,
+          onChange: () => handleChange(option.value),
+          style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsx16("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__ */ jsx16("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 })
+    ] }, option.value);
+  }) });
 };
-var RadioGroup_default2 = RadioGroup;
+var RadioGroup_default = RadioGroup;
 
 // src/components/Select/Select.tsx
 import { Check as Check2, ChevronDown as ChevronDown2 } from "lucide-react";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState9 } from "react";
-
-// src/components/Select/Select.module.css
-var Select_default = {};
-
-// src/components/Select/Select.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect, useRef as useRef2, useState as useState10 } from "react";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs10 } 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); }
+`;
 var Select = ({
   options,
   value,
@@ -645,8 +811,9 @@ var Select = ({
   onChange
 }) => {
   var _a;
-  const [internal, setInternal] = useState9(defaultValue);
-  const [open, setOpen] = useState9(false);
+  const [internal, setInternal] = useState10(defaultValue);
+  const [open, setOpen] = useState10(false);
+  const [hoveredOption, setHoveredOption] = useState10(null);
   const ref = useRef2(null);
   const selected = value !== void 0 ? value : internal;
   const selectedLabel = (_a = options.find((o) => o.value === selected)) == null ? void 0 : _a.label;
@@ -655,66 +822,175 @@ var Select = ({
     setOpen(false);
     onChange == null ? void 0 : onChange(val);
   };
-  useEffect2(() => {
+  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__ */ jsxs10("div", { ref, className: `${Select_default.wrapper} ${disabled ? Select_default.disabled : ""}`, children: [
-    /* @__PURE__ */ jsxs10(
-      "button",
-      {
-        type: "button",
-        className: `${Select_default.trigger} ${open ? Select_default.open : ""}`,
-        onClick: () => !disabled && setOpen((o) => !o),
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx17("span", { className: selectedLabel ? Select_default.value : Select_default.placeholder, children: selectedLabel != null ? selectedLabel : placeholder }),
-          /* @__PURE__ */ jsx17(ChevronDown2, { size: 16, className: `${Select_default.chevron} ${open ? Select_default.chevronOpen : ""}` })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx17("div", { className: Select_default.dropdown, children: options.map((option) => /* @__PURE__ */ jsxs10(
-      "div",
-      {
-        className: `${Select_default.option} ${selected === option.value ? Select_default.selected : ""}`,
-        onClick: () => handleSelect(option.value),
-        children: [
-          selected === option.value ? /* @__PURE__ */ jsx17(Check2, { size: 14, className: Select_default.checkIcon }) : /* @__PURE__ */ jsx17("span", { className: Select_default.checkSpacer }),
-          option.label
-        ]
-      },
-      option.value
-    )) })
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    /* @__PURE__ */ jsx17("style", { href: "ds-select", precedence: "low", children: selectCSS }),
+    /* @__PURE__ */ jsxs10("div", { ref, style: {
+      position: "relative",
+      width: "100%",
+      opacity: disabled ? 0.5 : 1,
+      pointerEvents: disabled ? "none" : void 0
+    }, children: [
+      /* @__PURE__ */ jsxs10(
+        "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__ */ jsx17("span", { style: { color: selectedLabel ? "var(--ds-text-primary, #0f172a)" : "var(--ds-text-secondary, #64748b)" }, children: selectedLabel != null ? selectedLabel : placeholder }),
+            /* @__PURE__ */ jsx17(
+              ChevronDown2,
+              {
+                size: 16,
+                style: {
+                  flexShrink: 0,
+                  color: "var(--ds-text-secondary, #64748b)",
+                  transition: "transform 0.15s",
+                  transform: open ? "rotate(180deg)" : "rotate(0deg)"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx17("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__ */ jsxs10(
+          "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__ */ jsx17(Check2, { size: 14, style: { color: "var(--ds-primary, #3b82f6)", flexShrink: 0 } }) : /* @__PURE__ */ jsx17("span", { style: { width: 14, flexShrink: 0 } }),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) })
+    ] })
   ] });
 };
-var Select_default2 = Select;
-
-// src/components/Skeleton/Skeleton.module.css
-var Skeleton_default = {};
+var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PURE__ */ jsx18(
-  "div",
-  {
-    className: `${Skeleton_default.skeleton} ${circle ? Skeleton_default.circle : ""}`,
-    style: { height, width },
-    "aria-hidden": "true"
-  }
-);
-var Skeleton_default2 = Skeleton;
-
-// src/components/Slider/Slider.tsx
-import { useState as useState10 } from "react";
-
-// src/components/Slider/Slider.module.css
-var Slider_default = {};
+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: `
+            @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(
+    "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
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs12 } from "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,
@@ -724,7 +1000,7 @@ var Slider = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = useState10(defaultValue);
+  const [internal, setInternal] = useState11(defaultValue);
   const current = value !== void 0 ? value : internal;
   const fill = `${(current - min) / (max - min) * 100}%`;
   const handleChange = (e) => {
@@ -732,43 +1008,50 @@ var Slider = ({
     setInternal(val);
     onChange == null ? void 0 : onChange(val);
   };
-  return /* @__PURE__ */ jsx19("div", { className: `${Slider_default.wrapper} ${disabled ? Slider_default.disabled : ""}`, children: /* @__PURE__ */ jsx19(
-    "input",
-    {
-      type: "range",
-      min,
-      max,
-      step,
-      value: current,
-      disabled,
-      onChange: handleChange,
-      className: Slider_default.range,
-      style: { "--fill": fill }
-    }
-  ) });
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx19("style", { href: "ds-slider", precedence: "low", children: sliderCSS }),
+    /* @__PURE__ */ jsx19("div", { style: {
+      width: "100%",
+      padding: "0.25rem 0",
+      opacity: disabled ? 0.5 : 1
+    }, children: /* @__PURE__ */ jsx19(
+      "input",
+      {
+        type: "range",
+        "data-ds-slider": "",
+        min,
+        max,
+        step,
+        value: current,
+        disabled,
+        onChange: handleChange,
+        style: { "--fill": fill }
+      }
+    ) })
+  ] });
 };
-var Slider_default2 = Slider;
+var Slider_default = Slider;
 
 // src/components/Spinner/Spinner.tsx
 import { Loader2 } from "lucide-react";
-
-// src/components/Spinner/Spinner.module.css
-var Spinner_default = {};
-
-// src/components/Spinner/Spinner.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var sizePx = { sm: 16, md: 24, lg: 32 };
-var Spinner = ({ size = "md" }) => /* @__PURE__ */ jsx20(Loader2, { size: sizePx[size], className: Spinner_default.spinner, "aria-label": "Loading" });
-var Spinner_default2 = Spinner;
-
-// src/components/Switch/Switch.tsx
-import { useState as useState11 } from "react";
-
-// src/components/Switch/Switch.module.css
-var Switch_default = {};
+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(
+    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
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var Switch = ({
   label,
   checked,
@@ -777,7 +1060,7 @@ var Switch = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = useState11(defaultChecked);
+  const [internal, setInternal] = useState12(defaultChecked);
   const isOn = checked !== void 0 ? checked : internal;
   const handleToggle = () => {
     if (disabled) return;
@@ -785,7 +1068,14 @@ var Switch = ({
     setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ jsxs11("label", { className: `${Switch_default.container} ${disabled ? Switch_default.disabled : ""}`, htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs14("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__ */ jsx21(
       "input",
       {
@@ -794,103 +1084,254 @@ var Switch = ({
         checked: isOn,
         disabled,
         onChange: handleToggle,
-        className: Switch_default.input
+        style: { position: "absolute", opacity: 0, width: 0, height: 0 }
       }
     ),
-    /* @__PURE__ */ jsx21("span", { className: `${Switch_default.track} ${isOn ? Switch_default.on : ""}`, children: /* @__PURE__ */ jsx21("span", { className: `${Switch_default.thumb} ${isOn ? Switch_default.thumbOn : ""}` }) }),
-    label && /* @__PURE__ */ jsx21("span", { className: Switch_default.label, children: label })
+    /* @__PURE__ */ jsx21("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__ */ jsx21("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__ */ jsx21("span", { style: { fontSize: "0.875rem", color: "var(--ds-text-primary, #0f172a)" }, children: label })
   ] });
 };
-var Switch_default2 = Switch;
-
-// src/components/Table/Table.module.css
-var Table_default = {};
+var Switch_default = Switch;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs15 } 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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx22("div", { className: Table_default.wrapper, children: /* @__PURE__ */ jsx22("table", __spreadValues({ className: `${Table_default.table}${className ? ` ${className}` : ""}` }, props)) });
+  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: {
+      width: "100%",
+      overflowX: "auto",
+      border: "1px solid var(--ds-border, #e2e8f0)",
+      borderRadius: "0.5rem"
+    }, children: /* @__PURE__ */ jsx22("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 TableRow = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx22("tr", __spreadValues({ className: `${Table_default.row}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx22("tr", __spreadValues({ "data-ds-table-row": "", style }, props));
 };
 var TableHeader = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx22("th", __spreadValues({ className: `${Table_default.th}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx22("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, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx22("td", __spreadValues({ className: `${Table_default.td}${className ? ` ${className}` : ""}` }, props));
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  return /* @__PURE__ */ jsx22(
+    "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
-import { useState as useState12 } from "react";
-
-// src/components/Tabs/Tabs.module.css
-var Tabs_default = {};
-
-// src/components/Tabs/Tabs.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var Tabs = ({ tabs, defaultValue }) => {
   var _a, _b;
-  const [active, setActive] = useState12((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _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__ */ jsxs12("div", { className: Tabs_default.root, children: [
-    /* @__PURE__ */ jsx23("div", { className: Tabs_default.list, role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxs12(
-      "button",
-      {
-        role: "tab",
-        "aria-selected": active === tab.value,
-        className: `${Tabs_default.trigger} ${active === tab.value ? Tabs_default.active : ""}`,
-        onClick: () => setActive(tab.value),
-        children: [
-          tab.icon && /* @__PURE__ */ jsx23("span", { className: Tabs_default["trigger-icon"], children: tab.icon }),
-          tab.label
-        ]
-      },
-      tab.value
-    )) }),
-    /* @__PURE__ */ jsx23("div", { className: Tabs_default.content, role: "tabpanel", children: activeTab == null ? void 0 : activeTab.content })
+  return /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx23("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__ */ jsxs16(
+        "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__ */ jsx23("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+            tab.label
+          ]
+        },
+        tab.value
+      );
+    }) }),
+    /* @__PURE__ */ jsx23("div", { role: "tabpanel", style: {
+      paddingTop: "1rem",
+      fontSize: "0.875rem",
+      color: "var(--ds-text-secondary, #64748b)"
+    }, children: activeTab == null ? void 0 : activeTab.content })
   ] });
 };
-var Tabs_default2 = Tabs;
-
-// src/components/Textarea/Textarea.module.css
-var Textarea_default = {};
+var Tabs_default = Tabs;
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs17 } 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); }
+[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, className } = _b, props = __objRest(_b, ["error", "className"]);
-  const classes = [
-    Textarea_default.textarea,
-    error ? Textarea_default.error : "",
-    className != null ? className : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx24("textarea", __spreadValues({ className: classes }, props));
-};
-var Textarea_default2 = Textarea;
-
-// src/components/Tooltip/Tooltip.module.css
-var Tooltip_default = {};
+  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(
+      "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
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
-var Tooltip = ({ content, children, position = "top" }) => /* @__PURE__ */ jsxs13("span", { className: Tooltip_default.wrapper, children: [
-  children,
-  /* @__PURE__ */ jsx25("span", { className: `${Tooltip_default.tooltip} ${Tooltip_default[position]}`, role: "tooltip", children: content })
-] });
-var Tooltip_default2 = Tooltip;
+import { useState as useState14 } from "react";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs18 } 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%)" },
+  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 Tooltip = ({ 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(
+      "span",
+      {
+        style: { position: "relative", display: "inline-flex" },
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+        children: [
+          children,
+          /* @__PURE__ */ jsx25(
+            "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 = Tooltip;
 export {
   Accordion_default as Accordion,
-  Alert_default2 as Alert,
-  Avatar_default2 as Avatar,
-  Badge_default2 as Badge,
-  Breadcrumb_default2 as Breadcrumb,
+  Alert_default as Alert,
+  Avatar_default as Avatar,
+  Badge_default as Badge,
+  Breadcrumb_default as Breadcrumb,
   Button_default as Button,
   Card,
   CardContent,
@@ -898,29 +1339,29 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
-  Checkbox_default2 as Checkbox,
-  CopyButton_default2 as CopyButton,
-  FileUpload_default2 as FileUpload,
-  Input_default2 as Input,
-  Label_default2 as Label,
+  Checkbox_default as Checkbox,
+  CopyButton_default as CopyButton,
+  FileUpload_default as FileUpload,
+  Input_default as Input,
+  Label_default as Label,
   PasswordInput_default as PasswordInput,
-  Progress_default2 as Progress,
-  RadioGroup_default2 as RadioGroup,
-  Select_default2 as Select,
-  Skeleton_default2 as Skeleton,
-  Slider_default2 as Slider,
-  Spinner_default2 as Spinner,
-  Switch_default2 as Switch,
+  Progress_default as Progress,
+  RadioGroup_default as RadioGroup,
+  Select_default as Select,
+  Skeleton_default as Skeleton,
+  Slider_default as Slider,
+  Spinner_default as Spinner,
+  Switch_default as Switch,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-  Tabs_default2 as Tabs,
-  Textarea_default2 as Textarea,
+  Tabs_default as Tabs,
+  Textarea_default as Textarea,
   ThemeProvider,
-  Tooltip_default2 as Tooltip,
+  Tooltip_default as Tooltip,
   useTheme
 };
 //# sourceMappingURL=index.js.map