@efiche/design 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -49,12 +49,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Accordion: () => Accordion_default2,
+  Accordion: () => Accordion_default,
   Alert: () => Alert_default2,
   Avatar: () => Avatar_default2,
   Badge: () => Badge_default2,
   Breadcrumb: () => Breadcrumb_default2,
-  Button: () => Button_default2,
+  Button: () => Button_default,
   Card: () => Card,
   CardContent: () => CardContent,
   CardDescription: () => CardDescription,
@@ -108,11 +108,6 @@ var useTheme = () => {
 // src/components/Accordion/Accordion.tsx
 var import_react2 = require("react");
 var import_lucide_react = require("lucide-react");
-
-// src/components/Accordion/Accordion.module.css
-var Accordion_default = {};
-
-// src/components/Accordion/Accordion.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Accordion = ({ items, defaultValue, multiple = false }) => {
   const [open, setOpen] = (0, import_react2.useState)(() => {
@@ -120,6 +115,7 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
     if (Array.isArray(defaultValue)) return new Set(defaultValue);
     return /* @__PURE__ */ new Set([defaultValue]);
   });
+  const [hovered, setHovered] = (0, import_react2.useState)(null);
   const toggle = (value) => {
     setOpen((prev) => {
       const next = new Set(prev);
@@ -132,32 +128,76 @@ var Accordion = ({ items, defaultValue, multiple = false }) => {
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Accordion_default.root, children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: Accordion_default.item, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "button",
-        {
-          className: Accordion_default.trigger,
-          onClick: () => toggle(item.value),
-          "aria-expanded": isOpen,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: item.trigger }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_lucide_react.ChevronDown,
-              {
-                size: 16,
-                className: `${Accordion_default.chevron} ${isOpen ? Accordion_default["chevron-open"] : ""}`
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${Accordion_default.panel} ${isOpen ? Accordion_default["panel-open"] : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Accordion_default.content, children: item.content }) })
-    ] }, item.value);
+    const isHovered = hovered === item.value;
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        style: {
+          borderBottom: isLast ? "none" : "1px solid var(--ds-border, #e2e8f0)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("span", { children: item.trigger }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("div", { style: {
+            maxHeight: isOpen ? "300px" : "0",
+            overflow: "hidden",
+            transition: "max-height 0.25s ease"
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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
 var import_lucide_react2 = require("lucide-react");
@@ -225,12 +265,39 @@ var Breadcrumb_default2 = Breadcrumb;
 
 // src/components/Button/Button.tsx
 var import_lucide_react4 = require("lucide-react");
-
-// src/components/Button/Button.module.css
-var Button_default = {};
-
-// src/components/Button/Button.tsx
+var import_react3 = require("react");
 var import_jsx_runtime7 = 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" }
+};
+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,
@@ -249,7 +316,7 @@ var Button = (_a) => {
     small = false,
     large = false,
     size,
-    className
+    style: styleProp
   } = _b, props = __objRest(_b, [
     "text",
     "children",
@@ -267,27 +334,45 @@ var Button = (_a) => {
     "small",
     "large",
     "size",
-    "className"
+    "style"
   ]);
+  const [hovered, setHovered] = (0, import_react3.useState)(false);
+  (0, import_react3.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__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     __spreadProps(__spreadValues({
-      disabled: disabled || loading,
-      className: classes
+      disabled: isDisabled,
+      style: computedStyle,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
     }, props), {
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.LoaderCircle, { className: Button_default.spinner, "aria-hidden": true }) : null,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime7.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
@@ -295,7 +380,7 @@ var Button = (_a) => {
     })
   );
 };
-var Button_default2 = Button;
+var Button_default = Button;
 
 // src/components/Card/Card.module.css
 var Card_default = {};
@@ -328,7 +413,7 @@ var CardFooter = (_a) => {
 };
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/Checkbox/Checkbox.module.css
 var Checkbox_default = {};
@@ -343,7 +428,7 @@ var Checkbox = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react3.useState)(defaultChecked);
+  const [internal, setInternal] = (0, import_react4.useState)(defaultChecked);
   const isChecked = checked !== void 0 ? checked : internal;
   const handleChange = () => {
     if (disabled) return;
@@ -371,7 +456,7 @@ var Checkbox_default2 = Checkbox;
 
 // src/components/CopyButton/CopyButton.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/CopyButton/CopyButton.module.css
 var CopyButton_default = {};
@@ -379,7 +464,7 @@ var CopyButton_default = {};
 // src/components/CopyButton/CopyButton.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CopyButton = ({ text }) => {
-  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [copied, setCopied] = (0, import_react5.useState)(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(text);
     setCopied(true);
@@ -399,7 +484,7 @@ var CopyButton_default2 = CopyButton;
 
 // src/components/FileUpload/FileUpload.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/FileUpload/FileUpload.module.css
 var FileUpload_default = {};
@@ -407,9 +492,9 @@ var FileUpload_default = {};
 // src/components/FileUpload/FileUpload.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var FileUpload = ({ accept, multiple, disabled, onFileSelect }) => {
-  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const [fileNames, setFileNames] = (0, import_react5.useState)([]);
-  const inputRef = (0, import_react5.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
+  const [fileNames, setFileNames] = (0, import_react6.useState)([]);
+  const inputRef = (0, import_react6.useRef)(null);
   const handleFiles = (list) => {
     setFileNames(Array.from(list).map((f) => f.name));
     onFileSelect == null ? void 0 : onFileSelect(list);
@@ -507,10 +592,10 @@ var Label_default2 = Label;
 
 // src/components/PasswordInput/PasswordInput.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var PasswordInput = (props) => {
-  const [visible, setVisible] = (0, import_react6.useState)(false);
+  const [visible, setVisible] = (0, import_react7.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Input_default2,
     __spreadProps(__spreadValues({}, props), {
@@ -552,7 +637,7 @@ var Progress = ({ value = 0 }) => {
 var Progress_default2 = Progress;
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/RadioGroup/RadioGroup.module.css
 var RadioGroup_default = {};
@@ -567,7 +652,7 @@ var RadioGroup = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react7.useState)(defaultValue);
+  const [internal, setInternal] = (0, import_react8.useState)(defaultValue);
   const selected = value !== void 0 ? value : internal;
   const handleChange = (val) => {
     if (disabled) return;
@@ -602,7 +687,7 @@ var RadioGroup_default2 = RadioGroup;
 
 // src/components/Select/Select.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/Select/Select.module.css
 var Select_default = {};
@@ -618,9 +703,9 @@ var Select = ({
   onChange
 }) => {
   var _a;
-  const [internal, setInternal] = (0, import_react8.useState)(defaultValue);
-  const [open, setOpen] = (0, import_react8.useState)(false);
-  const ref = (0, import_react8.useRef)(null);
+  const [internal, setInternal] = (0, import_react9.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const ref = (0, import_react9.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) => {
@@ -628,7 +713,7 @@ var Select = ({
     setOpen(false);
     onChange == null ? void 0 : onChange(val);
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
@@ -681,7 +766,7 @@ var Skeleton = ({ height = "1rem", width = "100%", circle = false }) => /* @__PU
 var Skeleton_default2 = Skeleton;
 
 // src/components/Slider/Slider.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/Slider/Slider.module.css
 var Slider_default = {};
@@ -697,7 +782,7 @@ var Slider = ({
   disabled,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react9.useState)(defaultValue);
+  const [internal, setInternal] = (0, import_react10.useState)(defaultValue);
   const current = value !== void 0 ? value : internal;
   const fill = `${(current - min) / (max - min) * 100}%`;
   const handleChange = (e) => {
@@ -735,7 +820,7 @@ var Spinner = ({ size = "md" }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)
 var Spinner_default2 = Spinner;
 
 // src/components/Switch/Switch.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/Switch/Switch.module.css
 var Switch_default = {};
@@ -750,7 +835,7 @@ var Switch = ({
   id,
   onChange
 }) => {
-  const [internal, setInternal] = (0, import_react10.useState)(defaultChecked);
+  const [internal, setInternal] = (0, import_react11.useState)(defaultChecked);
   const isOn = checked !== void 0 ? checked : internal;
   const handleToggle = () => {
     if (disabled) return;
@@ -801,7 +886,7 @@ var TableCell = (_a) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {};
@@ -810,7 +895,7 @@ var Tabs_default = {};
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var Tabs = ({ tabs, defaultValue }) => {
   var _a, _b;
-  const [active, setActive] = (0, import_react11.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
+  const [active, setActive] = (0, import_react12.useState)((_b = defaultValue != null ? defaultValue : (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "");
   const activeTab = tabs.find((t) => t.value === active);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: Tabs_default.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Tabs_default.list, role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(