techsbcn-storybook 2.10.3 → 2.11.0

package/dist/index.js

@@ -2873,6 +2873,7 @@ var FileUploadComponent = ({ labels, onUpload }) => {
   const [file, setFile] = React10.useState(null);
   const [note, setNote] = React10.useState("");
   const [loading, setLoading] = React10.useState(false);
+  const [dragging, setDragging] = React10.useState(false);
   const save = async () => {
     if (!file) return;
     setLoading(true);
@@ -2891,16 +2892,37 @@ var FileUploadComponent = ({ labels, onUpload }) => {
     {
       component: "label",
       onDragOver: (event) => event.preventDefault(),
+      onDragEnter: () => setDragging(true),
+      onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+      },
       onDrop: (event) => {
         event.preventDefault();
-        setFile(event.dataTransfer.files[0] ?? null);
+        setDragging(false);
+        const dropped = event.dataTransfer.files[0];
+        if (dropped) setFile(dropped);
+      },
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        p: 3,
+        border: "2px dashed",
+        borderColor: dragging ? "primary.main" : "divider",
+        bgcolor: dragging ? "action.hover" : "transparent",
+        borderRadius: 1,
+        cursor: "pointer",
+        position: "relative",
+        "&:focus-within": { borderColor: "primary.main" }
       }
     },
     /* @__PURE__ */ React10__default.default.createElement(
-      "input",
+      material.Box,
       {
+        component: "input",
         type: "file",
-        hidden: true,
+        sx: { position: "absolute", width: 1, height: 1, opacity: 0, overflow: "hidden" },
         onChange: (event) => {
           setFile(event.target.files?.[0] ?? null);
           event.target.value = "";