@efiche/design 0.1.4 → 0.1.6

package/dist/index.js

@@ -50,11 +50,6 @@ var useTheme = () => {
 // src/components/Accordion/Accordion.tsx
 import { useState as useState2 } from "react";
 import { ChevronDown } from "lucide-react";
-
-// src/components/Accordion/Accordion.module.css
-var Accordion_default = {};
-
-// src/components/Accordion/Accordion.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Accordion = ({ items, defaultValue, multiple = false }) => {
   const [open, setOpen] = useState2(() => {
@@ -62,6 +57,7 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
     if (Array.isArray(defaultValue)) return new Set(defaultValue);
     return /* @__PURE__ */ new Set([defaultValue]);
   });
+  const [hovered, setHovered] = useState2(null);
   const toggle = (value) => {
     setOpen((prev) => {
       const next = new Set(prev);
@@ -74,32 +70,76 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
       return next;
     });
   };
-  return /* @__PURE__ */ jsx2("div", { className: Accordion_default.root, children: items.map((item) => {
+  return /* @__PURE__ */ jsx2("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);
-    return /* @__PURE__ */ jsxs("div", { className: Accordion_default.item, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: Accordion_default.trigger,
-          onClick: () => toggle(item.value),
-          "aria-expanded": isOpen,
-          children: [
-            /* @__PURE__ */ jsx2("span", { children: item.trigger }),
-            /* @__PURE__ */ jsx2(
-              ChevronDown,
-              {
-                size: 16,
-                className: `${Accordion_default.chevron} ${isOpen ? Accordion_default["chevron-open"] : ""}`
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx2("div", { className: `${Accordion_default.panel} ${isOpen ? Accordion_default["panel-open"] : ""}`, children: /* @__PURE__ */ jsx2("div", { className: Accordion_default.content, children: item.content }) })
-    ] }, item.value);
+    const isHovered = hovered === item.value;
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderBottom: isLast ? "none" : "1px solid var(--ds-border, #e2e8f0)"
+        },
+        children: [
+          /* @__PURE__ */ 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__ */ jsx2("span", { children: item.trigger }),
+                /* @__PURE__ */ jsx2(
+                  ChevronDown,
+                  {
+                    size: 16,
+                    style: {
+                      flexShrink: 0,
+                      color: "var(--ds-text-secondary, #64748b)",
+                      transition: "transform 0.2s ease",
+                      transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { style: {
+            maxHeight: isOpen ? "300px" : "0",
+            overflow: "hidden",
+            transition: "max-height 0.25s ease"
+          }, children: /* @__PURE__ */ jsx2("div", { style: {
+            padding: "0 1rem 1rem",
+            fontSize: "0.875rem",
+            color: "var(--ds-text-secondary, #64748b)"
+          }, children: item.content }) })
+        ]
+      },
+      item.value
+    );
   }) });
 };
-var Accordion_default2 = Accordion;
+var Accordion_default = Accordion;
 
 // src/components/Alert/Alert.tsx
 import { Info, CheckCircle2, AlertTriangle, AlertCircle } from "lucide-react";
@@ -167,12 +207,39 @@ var Breadcrumb_default2 = Breadcrumb;
 
 // src/components/Button/Button.tsx
 import { LoaderCircle } from "lucide-react";
-
-// src/components/Button/Button.module.css
-var Button_default = {};
-
-// src/components/Button/Button.tsx
+import { useEffect, useState as useState3 } from "react";
 import { 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)" },
+  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" }
+};
+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,
@@ -191,7 +258,7 @@ var Button = (_a) => {
     small = false,
     large = false,
     size,
-    className
+    style: styleProp
   } = _b, props = __objRest(_b, [
     "text",
     "children",
@@ -209,27 +276,45 @@ var Button = (_a) => {
     "small",
     "large",
     "size",
-    "className"
+    "style"
   ]);
+  const [hovered, setHovered] = useState3(false);
+  useEffect(() => {
+    injectSpinKeyframe();
+  }, []);
   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 classes = [
-    Button_default.button,
-    Button_default[resolvedVariant],
-    Button_default[resolvedSize],
-    loading ? Button_default.loading : "",
-    className != null ? className : ""
-  ].filter(Boolean).join(" ");
+  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__ */ jsxs4(
     "button",
     __spreadProps(__spreadValues({
-      disabled: disabled || loading,
-      className: classes
+      disabled: isDisabled,
+      style: computedStyle,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
     }, props), {
       children: [
-        loading ? /* @__PURE__ */ jsx7(LoaderCircle, { className: Button_default.spinner, "aria-hidden": true }) : null,
+        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
@@ -237,7 +322,7 @@ var Button = (_a) => {
     })
   );
 };
-var Button_default2 = Button;
+var Button_default = Button;
 
 // src/components/Card/Card.module.css
 var Card_default = {};
@@ -270,7 +355,7 @@ var CardFooter = (_a) => {
 };
 
 // src/components/Checkbox/Checkbox.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/components/Checkbox/Checkbox.module.css
 var Checkbox_default = {};
@@ -285,7 +370,7 @@ var Checkbox = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = useState3(defaultChecked);
+  const [internal, setInternal] = useState4(defaultChecked);
   const isChecked = checked !== void 0 ? checked : internal;
   const handleChange = () => {
     if (disabled) return;
@@ -313,7 +398,7 @@ var Checkbox_default2 = Checkbox;
 
 // src/components/CopyButton/CopyButton.tsx
 import { Check, Copy } from "lucide-react";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/components/CopyButton/CopyButton.module.css
 var CopyButton_default = {};
@@ -321,7 +406,7 @@ var CopyButton_default = {};
 // src/components/CopyButton/CopyButton.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var CopyButton = ({ text }) => {
-  const [copied, setCopied] = useState4(false);
+  const [copied, setCopied] = useState5(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(text);
     setCopied(true);
@@ -341,7 +426,7 @@ var CopyButton_default2 = CopyButton;
 
 // src/components/FileUpload/FileUpload.tsx
 import { Upload } from "lucide-react";
-import { useRef, useState as useState5 } from "react";
+import { useRef, useState as useState6 } from "react";
 
 // src/components/FileUpload/FileUpload.module.css
 var FileUpload_default = {};
@@ -349,8 +434,8 @@ var FileUpload_default = {};
 // src/components/FileUpload/FileUpload.tsx
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
-  const [isDragging, setIsDragging] = useState5(false);
-  const [fileNames, setFileNames] = useState5([]);
+  const [isDragging, setIsDragging] = useState6(false);
+  const [fileNames, setFileNames] = useState6([]);
   const inputRef = useRef(null);
   const handleFiles = (list) => {
     setFileNames(Array.from(list).map((f) => f.name));
@@ -449,10 +534,10 @@ var Label_default2 = Label;
 
 // src/components/PasswordInput/PasswordInput.tsx
 import { Eye, EyeOff } from "lucide-react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var PasswordInput = (props) => {
-  const [visible, setVisible] = useState6(false);
+  const [visible, setVisible] = useState7(false);
   return /* @__PURE__ */ jsx14(
     Input_default2,
     __spreadProps(__spreadValues({}, props), {
@@ -494,7 +579,7 @@ var Progress = ({ value = 0 }) => {
 var Progress_default2 = Progress;
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/components/RadioGroup/RadioGroup.module.css
 var RadioGroup_default = {};
@@ -509,7 +594,7 @@ var RadioGroup = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = useState7(defaultValue);
+  const [internal, setInternal] = useState8(defaultValue);
   const selected = value !== void 0 ? value : internal;
   const handleChange = (val) => {
     if (disabled) return;
@@ -544,7 +629,7 @@ var RadioGroup_default2 = RadioGroup;
 
 // src/components/Select/Select.tsx
 import { Check as Check2, ChevronDown as ChevronDown2 } from "lucide-react";
-import { useEffect, useRef as useRef2, useState as useState8 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState9 } from "react";
 
 // src/components/Select/Select.module.css
 var Select_default = {};
@@ -560,8 +645,8 @@ var Select = ({
   onChange
 }) => {
   var _a;
-  const [internal, setInternal] = useState8(defaultValue);
-  const [open, setOpen] = useState8(false);
+  const [internal, setInternal] = useState9(defaultValue);
+  const [open, setOpen] = useState9(false);
   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;
@@ -570,7 +655,7 @@ var Select = ({
     setOpen(false);
     onChange == null ? void 0 : onChange(val);
   };
-  useEffect(() => {
+  useEffect2(() => {
     const handleOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
@@ -623,7 +708,7 @@ var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PU
 var Skeleton_default2 = Skeleton;
 
 // src/components/Slider/Slider.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 
 // src/components/Slider/Slider.module.css
 var Slider_default = {};
@@ -639,7 +724,7 @@ var Slider = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = useState9(defaultValue);
+  const [internal, setInternal] = useState10(defaultValue);
   const current = value !== void 0 ? value : internal;
   const fill = `${(current - min) / (max - min) * 100}%`;
   const handleChange = (e) => {
@@ -677,7 +762,7 @@ var Spinner = ({ size = "md" }) => /* @__PURE__ */ jsx20(Loader2, { size: sizePx
 var Spinner_default2 = Spinner;
 
 // src/components/Switch/Switch.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/Switch/Switch.module.css
 var Switch_default = {};
@@ -692,7 +777,7 @@ var Switch = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = useState10(defaultChecked);
+  const [internal, setInternal] = useState11(defaultChecked);
   const isOn = checked !== void 0 ? checked : internal;
   const handleToggle = () => {
     if (disabled) return;
@@ -743,7 +828,7 @@ var TableCell = (_a) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {};
@@ -752,7 +837,7 @@ var Tabs_default = {};
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var Tabs = ({ tabs, defaultValue }) => {
   var _a, _b;
-  const [active, setActive] = useState11((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
+  const [active, setActive] = useState12((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
   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(
@@ -801,12 +886,12 @@ var Tooltip = ({ content, children, position = "top" }) => /* @__PURE__ */ jsxs1
 ] });
 var Tooltip_default2 = Tooltip;
 export {
-  Accordion_default2 as Accordion,
+  Accordion_default as Accordion,
   Alert_default2 as Alert,
   Avatar_default2 as Avatar,
   Badge_default2 as Badge,
   Breadcrumb_default2 as Breadcrumb,
-  Button_default2 as Button,
+  Button_default as Button,
   Card,
   CardContent,
   CardDescription,