@efiche/design 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -54,7 +54,7 @@ __export(index_exports, {
   Avatar: () => Avatar_default2,
   Badge: () => Badge_default2,
   Breadcrumb: () => Breadcrumb_default2,
-  Button: () => Button_default2,
+  Button: () => Button_default,
   Card: () => Card,
   CardContent: () => CardContent,
   CardDescription: () => CardDescription,
@@ -265,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,
@@ -289,7 +316,7 @@ var Button = (_a) => {
     small = false,
     large = false,
     size,
-    className
+    style: styleProp
   } = _b, props = __objRest(_b, [
     "text",
     "children",
@@ -307,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
@@ -335,7 +380,7 @@ var Button = (_a) => {
     })
   );
 };
-var Button_default2 = Button;
+var Button_default = Button;
 
 // src/components/Card/Card.module.css
 var Card_default = {};
@@ -368,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 = {};
@@ -383,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;
@@ -411,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 = {};
@@ -419,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);
@@ -439,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 = {};
@@ -447,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);
@@ -547,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), {
@@ -592,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 = {};
@@ -607,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;
@@ -642,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 = {};
@@ -658,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) => {
@@ -668,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);
     };
@@ -721,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 = {};
@@ -737,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) => {
@@ -775,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 = {};
@@ -790,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;
@@ -841,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 = {};
@@ -850,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)(