analytica-frontend-lib 1.4.59 → 1.4.60

package/dist/index.js

@@ -5694,6 +5694,7 @@ function ImageUpload({
 var import_react10 = require("react");
 var import_phosphor_react5 = require("phosphor-react");
 init_Text();
+init_Button();
 init_utils();
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var FILE_TYPE_CONFIG = {
@@ -5731,6 +5732,7 @@ function FileDropzone({
   actionText = "Clique aqui",
   placeholder,
   changeText,
+  changeButtonText = "Trocar",
   disabled = false,
   required = false,
   className,
@@ -5839,6 +5841,14 @@ function FileDropzone({
       onRemoveFile?.();
     }
   };
+  const handleChangeClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  const fileName = selectedFile?.name || (fileUrl ? "Arquivo carregado" : "");
   const getBorderClasses = () => {
     if (hasError) {
       return disabled ? "border-indicator-error" : "border-indicator-error hover:border-indicator-error";
@@ -5853,38 +5863,64 @@ function FileDropzone({
     getBorderClasses(),
     disabled && "cursor-not-allowed opacity-50"
   );
+  const isImagePreview = fileType === "image" && showPreview && Boolean(displayUrl);
+  const imageCardClasses = cn(
+    "flex flex-col items-center justify-center gap-3 p-6 rounded-lg bg-background-100",
+    hasError && "border-2 border-indicator-error",
+    disabled && "opacity-50"
+  );
   const getAriaDescribedBy = () => {
     if (errorMessage) return `${inputId}-error`;
     if (helperText) return `${inputId}-helper`;
     return void 0;
   };
+  const renderImagePreview = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "img",
+      {
+        src: displayUrl ?? void 0,
+        alt: "Preview do arquivo",
+        className: cn("max-w-full rounded-lg object-contain", previewMaxHeight)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-border-200 bg-background px-3 py-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react5.Paperclip, { size: 16, className: "text-text-600" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { size: "sm", className: "text-text-700 max-w-[200px] truncate", children: fileName }),
+      onRemoveFile && !disabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        Button_default,
+        {
+          variant: "raw",
+          type: "button",
+          onClick: handleRemove,
+          className: "p-0.5 rounded-full hover:bg-error-100 transition-colors",
+          "aria-label": "Remover arquivo",
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react5.X, { size: 14, className: "text-indicator-error" })
+        }
+      )
+    ] }),
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Button_default,
+      {
+        variant: "outline",
+        action: "primary",
+        size: "small",
+        iconLeft: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react5.PencilSimple, { size: 16 }),
+        onClick: handleChangeClick,
+        children: changeButtonText
+      }
+    )
+  ] });
   const renderFilePreview = () => {
-    if (fileType === "image" && showPreview && displayUrl) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          "img",
-          {
-            src: displayUrl,
-            alt: "Preview do arquivo",
-            className: cn(
-              "max-w-full rounded-lg object-cover",
-              previewMaxHeight
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { size: "xs", className: "text-text-500", children: defaultChangeText })
-      ] });
-    }
     if (hasFile) {
-      const fileName = selectedFile?.name || (fileUrl ? "Arquivo carregado" : "");
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center w-12 h-12 rounded-full bg-success-100", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react5.CheckCircle, { size: 28, className: "text-success-600", weight: "fill" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconComponent, { size: 20, className: "text-text-600" }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { size: "sm", className: "text-text-700 max-w-[200px] truncate", children: fileName }),
           onRemoveFile && !disabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            "button",
+            Button_default,
             {
+              variant: "raw",
               type: "button",
               onClick: handleRemove,
               className: "p-1 rounded-full hover:bg-error-100 transition-colors",
@@ -5918,31 +5954,40 @@ function FileDropzone({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "input",
+      {
+        ref: fileInputRef,
+        id: inputId,
+        type: "file",
+        accept,
+        onChange: handleFileChange,
+        className: "hidden",
+        disabled,
+        "aria-invalid": hasError,
+        "aria-describedby": getAriaDescribedBy()
+      }
+    ),
+    isImagePreview ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: imageCardClasses,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: renderImagePreview()
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "label",
       {
+        htmlFor: inputId,
         className: dropzoneClasses,
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            "input",
-            {
-              ref: fileInputRef,
-              id: inputId,
-              type: "file",
-              accept,
-              onChange: handleFileChange,
-              className: "hidden",
-              disabled,
-              "aria-invalid": hasError,
-              "aria-describedby": getAriaDescribedBy()
-            }
-          ),
-          renderFilePreview()
-        ]
+        children: renderFilePreview()
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mt-1", children: [