@farmzone/fz-react-ui 1.0.18 → 1.0.20

package/dist/index.js

@@ -717,7 +717,7 @@ function Slider(props) {
           RadixSlider.Track,
           {
             className: cn(
-              "relative h-[3px] grow rounded-full bg-blackA7",
+              "relative h-[3px] grow rounded-full bg-gray-200",
               orientation === "vertical" && "w-[3px] h-full",
               trackClassName
             ),
@@ -725,7 +725,7 @@ function Slider(props) {
               RadixSlider.Range,
               {
                 className: cn(
-                  "absolute h-full rounded-full bg-white",
+                  "absolute h-full rounded-full bg-[#009fe3]",
                   orientation === "vertical" && "w-full",
                   rangeClassName
                 )
@@ -733,17 +733,18 @@ function Slider(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        (value ?? defaultValue).map((_, index) => /* @__PURE__ */ jsx(
           RadixSlider.Thumb,
           {
             className: cn(
-              "block size-5 rounded-[10px] bg-white shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_5px] focus:shadow-blackA5 focus:outline-none",
+              "block size-4 rounded-full bg-white border-2 border-[#009fe3] shadow-md hover:border-[#0090cf] focus:outline-none focus:ring-2 focus:ring-[#009fe3]/40 focus:ring-offset-1",
               disabled && "cursor-not-allowed opacity-50",
               thumbClassName
             ),
-            "aria-label": ariaLabel
-          }
-        )
+            "aria-label": index === 0 ? ariaLabel : `${ariaLabel} max`
+          },
+          index
+        ))
       ]
     }
   );
@@ -2428,6 +2429,8 @@ function DatePickerRange(props) {
     endValue = "",
     onRangeChange,
     className = "",
+    width,
+    height,
     editDateSelect = true,
     onKeyDownEnter,
     datePosition = "bottom",
@@ -2538,7 +2541,7 @@ function DatePickerRange(props) {
     }
   };
   const inputClassName = cn(
-    "w-full px-2 py-1.25 border border-gray-300 shadow-xs outline-none text-sm rounded-sm pr-7 transition-colors",
+    "w-full h-full px-2 py-1.25 border border-gray-300 shadow-xs outline-none text-sm rounded-sm pr-7 transition-colors",
     disabled ? DATE_PICKER_FIELD_DISABLED_CLASS : "bg-white text-gray-900 focus:border-blue-600"
   );
   const iconWrapperClassName = cn(
@@ -2581,72 +2584,84 @@ function DatePickerRange(props) {
       )
     }
   );
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative w-64 h-8", className), "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
-      /* @__PURE__ */ jsxs("div", { ref: startAnchorRef, className: "relative flex-1", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: startInputValue,
-            onChange: (e) => handleRangeInputChange(e, true),
-            placeholder: "\uC2DC\uC791 \uB0A0\uC9DC",
-            disabled,
-            className: inputClassName,
-            maxLength: 10,
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                handleFieldEnter(startInputValue);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-64 h-8", className),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height
+      },
+      "aria-disabled": disabled,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 h-full", children: [
+          /* @__PURE__ */ jsxs("div", { ref: startAnchorRef, className: "relative flex-1 h-full", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: startInputValue,
+                onChange: (e) => handleRangeInputChange(e, true),
+                placeholder: "\uC2DC\uC791 \uB0A0\uC9DC",
+                disabled,
+                className: inputClassName,
+                maxLength: 10,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleFieldEnter(startInputValue);
+                  }
+                }
               }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: () => {
-              if (!disabled) handleCalendarIconClick("start");
-            },
-            className: iconWrapperClassName,
-            children: /* @__PURE__ */ jsx(Calendar, { size: 15, className: iconClassName })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: cn("text-sm  w-2 text-center", disabled && "text-neutral-400 opacity-50"), children: "~" }),
-      /* @__PURE__ */ jsxs("div", { ref: endAnchorRef, className: "relative flex-1", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: endInputValue,
-            onChange: (e) => handleRangeInputChange(e, false),
-            placeholder: "\uC885\uB8CC \uB0A0\uC9DC",
-            disabled,
-            className: inputClassName,
-            maxLength: 10,
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                handleFieldEnter(endInputValue);
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: () => {
+                  if (!disabled) handleCalendarIconClick("start");
+                },
+                className: iconWrapperClassName,
+                children: /* @__PURE__ */ jsx(Calendar, { size: 15, className: iconClassName })
               }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: () => {
-              if (!disabled) handleCalendarIconClick("end");
-            },
-            className: iconWrapperClassName,
-            children: /* @__PURE__ */ jsx(Calendar, { size: 15, className: iconClassName })
-          }
-        )
-      ] })
-    ] }),
-    calendarNode
-  ] });
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn("text-sm  w-2 text-center", disabled && "text-neutral-400 opacity-50"), children: "~" }),
+          /* @__PURE__ */ jsxs("div", { ref: endAnchorRef, className: "relative flex-1 h-full", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: endInputValue,
+                onChange: (e) => handleRangeInputChange(e, false),
+                placeholder: "\uC885\uB8CC \uB0A0\uC9DC",
+                disabled,
+                className: inputClassName,
+                maxLength: 10,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleFieldEnter(endInputValue);
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: () => {
+                  if (!disabled) handleCalendarIconClick("end");
+                },
+                className: iconWrapperClassName,
+                children: /* @__PURE__ */ jsx(Calendar, { size: 15, className: iconClassName })
+              }
+            )
+          ] })
+        ] }),
+        calendarNode
+      ]
+    }
+  );
 }
 function DatePickerSingle(props) {
   const {
@@ -2654,6 +2669,8 @@ function DatePickerSingle(props) {
     onChange,
     placeholder = "\uB0A0\uC9DC \uC120\uD0DD",
     className = "",
+    width,
+    height,
     editDateSelect = true,
     onKeyDownEnter,
     datePosition = "bottom",
@@ -2764,56 +2781,70 @@ function DatePickerSingle(props) {
       )
     }
   );
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative w-30 h-8", className), "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: inputValue,
-          onChange: handleInputChange,
-          onBlur: () => onBlur && handleInputBlur(),
-          placeholder,
-          disabled,
-          className: cn(
-            "w-full px-2 py-1.25 border text-sm rounded-sm outline-none shadow-xs transition-colors",
-            validation ? "border-red-600 focus:border-blue-600 focus-visible:border-blue-600 focus-visible:ring-1 focus-visible:ring-blue-600/30 focus-visible:outline-none" : "border-gray-300 focus:border-blue-600 focus-visible:border-blue-600 focus-visible:ring-1 focus-visible:ring-blue-600/30 focus-visible:outline-none",
-            disabled ? DATE_PICKER_FIELD_DISABLED_CLASS : "bg-white text-gray-900"
-          ),
-          maxLength: 10,
-          onKeyDown: (e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              handleFieldEnter(inputValue);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-30 h-8", className),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height
+      },
+      "aria-disabled": disabled,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: inputValue,
+              onChange: handleInputChange,
+              onBlur: () => onBlur && handleInputBlur(),
+              placeholder,
+              disabled,
+              className: cn(
+                "w-full h-full px-2 py-1.25 border text-sm rounded-sm outline-none shadow-xs transition-colors",
+                validation ? "border-red-600 focus:border-blue-600 focus-visible:border-blue-600 focus-visible:ring-1 focus-visible:ring-blue-600/30 focus-visible:outline-none" : "border-gray-300 focus:border-blue-600 focus-visible:border-blue-600 focus-visible:ring-1 focus-visible:ring-blue-600/30 focus-visible:outline-none",
+                disabled ? DATE_PICKER_FIELD_DISABLED_CLASS : "bg-white text-gray-900"
+              ),
+              maxLength: 10,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleFieldEnter(inputValue);
+                }
+              },
+              "data-date-input": "true"
             }
-          },
-          "data-date-input": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "button",
-          tabIndex: -1,
-          "aria-hidden": disabled,
-          onClick: () => {
-            if (!disabled) toggleCalendar(inputValue);
-          },
-          className: cn(
-            "absolute right-1 top-1/2 -translate-y-1/2 rounded-full p-1",
-            disabled ? DATE_PICKER_ICON_DISABLED_CLASS : DATE_PICKER_ICON_ENABLED_CLASS
           ),
-          children: /* @__PURE__ */ jsx(Calendar, { size: 15, className: cn(disabled ? "text-neutral-400 opacity-50" : "text-gray-600") })
-        }
-      )
-    ] }),
-    calendarNode
-  ] });
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: -1,
+              "aria-hidden": disabled,
+              onClick: () => {
+                if (!disabled) toggleCalendar(inputValue);
+              },
+              className: cn(
+                "absolute right-1 top-1/2 -translate-y-1/2 rounded-full p-1",
+                disabled ? DATE_PICKER_ICON_DISABLED_CLASS : DATE_PICKER_ICON_ENABLED_CLASS
+              ),
+              children: /* @__PURE__ */ jsx(Calendar, { size: 15, className: cn(disabled ? "text-neutral-400 opacity-50" : "text-gray-600") })
+            }
+          )
+        ] }),
+        calendarNode
+      ]
+    }
+  );
 }
 function DatePicker(props) {
   const {
     isRange,
     className,
+    width,
+    height,
     editDateSelect,
     onKeyDownEnter,
     datePosition,
@@ -2832,6 +2863,8 @@ function DatePicker(props) {
         endValue,
         onRangeChange,
         className,
+        width,
+        height,
         editDateSelect,
         onKeyDownEnter,
         datePosition,
@@ -2851,6 +2884,8 @@ function DatePicker(props) {
       onChange,
       placeholder,
       className,
+      width,
+      height,
       editDateSelect,
       onKeyDownEnter,
       datePosition,
@@ -6114,7 +6149,7 @@ function FilePreviewViewerSession(props) {
   useEffect(() => {
     if (!showNavigation) return;
     const [prevIndex, nextIndex] = getAdjacentIndexes(currentIndex, fileArray.length);
-    const urlsToPreload = [prevIndex, nextIndex].filter((idx) => idx !== currentIndex).map((idx) => fileArray[idx]);
+    const urlsToPreload = [prevIndex, nextIndex].filter((idx) => idx !== currentIndex).map((idx) => fileArray[idx]).filter((url) => url !== void 0);
     preloadPreviewImages(urlsToPreload);
   }, [showNavigation, currentIndex, fileArray]);
   useEffect(() => {
@@ -7750,7 +7785,7 @@ var SubmitForm = Object.assign(SubmitFormRoot, {
 function LabeledFilterOption(props) {
   const { label, children, gap } = props;
   return /* @__PURE__ */ jsxs("div", { style: { marginLeft: gap }, className: "flex flex-row items-center gap-4", children: [
-    label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-60 shrink-0", children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-60 shrink-0 select-none", children: label }),
     children
   ] });
 }
@@ -7786,8 +7821,9 @@ function PageFilter(props) {
     onChange({ [key]: value });
     if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
-  const handleRadioChange = (key) => (value) => {
+  const handleRadioChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
+    if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
   const handleDateChange = (key) => (date) => {
     onChange({ [key]: date });
@@ -7795,8 +7831,10 @@ function PageFilter(props) {
   const handleRangeChangeCurried = (startKey, endKey) => (start, end) => {
     onChange({ [startKey]: start, [endKey]: end });
   };
-  const handleCheckboxChange = (key) => (checked) => {
-    onChange({ [key]: checked ? "true" : "false" });
+  const handleCheckboxChange = (key, autoSubmit) => (checked) => {
+    const value = checked ? "true" : "false";
+    onChange({ [key]: value });
+    if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
   };
   const handleSubmit = () => {
     pendingAutoSubmitRef.current = null;
@@ -7842,7 +7880,7 @@ function PageFilter(props) {
           {
             name: String(optionKey),
             value: currentValue,
-            onChange: handleRadioChange(optionKey),
+            onChange: handleRadioChange(optionKey, option.autoSubmit),
             options: option.options,
             direction: "horizontal"
           }
@@ -7874,7 +7912,7 @@ function PageFilter(props) {
             checked: currentValue === "true",
             name: String(optionKey),
             value: currentValue,
-            onChange: handleCheckboxChange(optionKey)
+            onChange: handleCheckboxChange(optionKey, option.autoSubmit)
           }
         ) }, String(optionKey));
       default: {
@@ -8585,7 +8623,9 @@ function BaseUploader(props) {
     maxSize,
     disabled = false,
     placeholder,
-    className
+    className,
+    width,
+    height
   } = props;
   const inputRef = useRef(null);
   const inputId = useId();
@@ -8628,7 +8668,7 @@ function BaseUploader(props) {
   };
   const showZone = multiple || files.length === 0;
   const acceptLabel = accept ? accept.split(",").map((s) => s.trim().toUpperCase()).join(", ") : "\uBAA8\uB4E0 \uD615\uC2DD";
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), style: { width: typeof width === "number" ? `${width}px` : width }, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -8662,6 +8702,7 @@ function BaseUploader(props) {
           setIsDragging(false);
         },
         onDrop: handleDrop,
+        style: { minHeight: typeof height === "number" ? `${height}px` : height ?? "7rem" },
         className: cn(
           "flex flex-col items-center justify-center gap-2 min-h-28 w-full rounded-lg bg-gray-50/50 border-[1.5px] border-dashed",
           disabled ? "cursor-not-allowed border-gray-200 bg-gray-100 opacity-60" : "cursor-pointer hover:bg-gray-50",
@@ -8707,7 +8748,7 @@ function BaseUploader(props) {
 var EXCEL_ACCEPT = ".xlsx,.xls,.csv";
 var MAX_EXCEL_BYTES = 10 * 1024 * 1024;
 function ExcelUploader(props) {
-  const { files, onChange, disabled, className } = props;
+  const { files, onChange, disabled, className, width, height } = props;
   return /* @__PURE__ */ jsx(
     BaseUploader,
     {
@@ -8718,7 +8759,9 @@ function ExcelUploader(props) {
       maxSize: MAX_EXCEL_BYTES,
       disabled,
       placeholder: "\uC5D1\uC140 \uD30C\uC77C\uC744 \uD074\uB9AD\uD558\uAC70\uB098 \uB4DC\uB798\uADF8\uD558\uC138\uC694",
-      className
+      className,
+      width,
+      height
     }
   );
 }
@@ -8815,7 +8858,7 @@ var compressImage = (file) => {
   }).catch(() => file);
 };
 function FileUploader(props) {
-  const { files, onChange, multiple = true, disabled = false, className } = props;
+  const { files, onChange, multiple = true, disabled = false, className, width, height } = props;
   const inputRef = useRef(null);
   const containerRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -8922,121 +8965,129 @@ function FileUploader(props) {
     setError("");
   };
   const isProcessing = processingCount > 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        multiple,
-        accept: "image/jpeg,image/png,image/webp,image/heic,image/heif,application/pdf,.heic,.heif",
-        disabled,
-        className: "hidden",
-        onChange: (e) => {
-          handleFiles(e.target.files);
-          if (inputRef.current) inputRef.current.value = "";
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: containerRef,
-        onClick: isProcessing || disabled ? void 0 : () => inputRef.current?.click(),
-        onDragOver: handleDragOver,
-        onDragEnter: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onDrop: handleDrop,
-        className: cn(
-          "relative w-full rounded-lg bg-gray-50/50 border-[1.5px] border-dashed",
-          disabled ? "cursor-not-allowed border-gray-200 bg-gray-100 opacity-60" : isProcessing ? "cursor-default border-gray-300" : "cursor-pointer hover:bg-gray-50",
-          isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300",
-          error && !isDragging ? "border-red-300 bg-red-50" : "",
-          files.length > 0 ? "p-3" : "flex flex-col items-center justify-center gap-1 min-h-32"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("space-y-3", className),
+      style: { width: typeof width === "number" ? `${width}px` : width },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            multiple,
+            accept: "image/jpeg,image/png,image/webp,image/heic,image/heif,application/pdf,.heic,.heif",
+            disabled,
+            className: "hidden",
+            onChange: (e) => {
+              handleFiles(e.target.files);
+              if (inputRef.current) inputRef.current.value = "";
+            }
+          }
         ),
-        children: [
-          isProcessing && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-white/80", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-blue-400 border-t-transparent" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: "\uCC98\uB9AC \uC911..." })
-          ] }),
-          files.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3", children: files.map((file, idx) => {
-              const url = previewUrls[idx];
-              const isImage = file.type.startsWith("image/");
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "group relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          viewer.open(idx);
-                        },
-                        className: "block w-full aspect-square cursor-pointer",
-                        "aria-label": `${file.name} \uBBF8\uB9AC\uBCF4\uAE30`,
-                        children: isImage && url ? /* @__PURE__ */ jsx("img", { src: url, alt: file.name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center bg-gray-50 text-gray-400", children: [
-                          /* @__PURE__ */ jsx(FileText, { className: "w-8 h-8" }),
-                          /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate px-1 text-center text-[10px]", children: file.name })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 border-t border-gray-100 px-1.5 py-1", children: [
-                      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-[10px] text-gray-600", title: file.name, children: file.name }),
-                      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-gray-400", children: formatFileSize(file.size) })
-                    ] }),
-                    !disabled && /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          removeFile(idx);
-                        },
-                        className: "absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100 cursor-pointer",
-                        "aria-label": "\uD30C\uC77C \uC81C\uAC70",
-                        children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
-                      }
-                    )
-                  ]
-                },
-                `${file.name}-${idx}`
-              );
-            }) }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between text-xs text-gray-500", children: [
-              /* @__PURE__ */ jsxs("span", { children: [
-                files.length,
-                "\uAC1C \uD30C\uC77C \uC120\uD0DD\uB428",
-                !disabled && " \xB7 \uD074\uB9AD\uD558\uC5EC \uCD94\uAC00"
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            onClick: isProcessing || disabled ? void 0 : () => inputRef.current?.click(),
+            onDragOver: handleDragOver,
+            onDragEnter: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            className: cn(
+              "relative w-full rounded-lg bg-gray-50/50 border-[1.5px] border-dashed",
+              disabled ? "cursor-not-allowed border-gray-200 bg-gray-100 opacity-60" : isProcessing ? "cursor-default border-gray-300" : "cursor-pointer hover:bg-gray-50",
+              isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300",
+              error && !isDragging ? "border-red-300 bg-red-50" : "",
+              files.length > 0 ? "p-3" : "flex flex-col items-center justify-center gap-1"
+            ),
+            style: files.length === 0 ? { minHeight: typeof height === "number" ? `${height}px` : height ?? "8rem" } : void 0,
+            children: [
+              isProcessing && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-white/80", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-blue-400 border-t-transparent" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: "\uCC98\uB9AC \uC911..." })
               ] }),
-              /* @__PURE__ */ jsxs("span", { children: [
-                "\uCD1D ",
-                formatFileSize(files.reduce((sum, f) => sum + f.size, 0))
+              files.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3", children: files.map((file, idx) => {
+                  const url = previewUrls[idx];
+                  const isImage = file.type.startsWith("image/");
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "group relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              viewer.open(idx);
+                            },
+                            className: "block w-full aspect-square cursor-pointer",
+                            "aria-label": `${file.name} \uBBF8\uB9AC\uBCF4\uAE30`,
+                            children: isImage && url ? /* @__PURE__ */ jsx("img", { src: url, alt: file.name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center bg-gray-50 text-gray-400", children: [
+                              /* @__PURE__ */ jsx(FileText, { className: "w-8 h-8" }),
+                              /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate px-1 text-center text-[10px]", children: file.name })
+                            ] })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 border-t border-gray-100 px-1.5 py-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-[10px] text-gray-600", title: file.name, children: file.name }),
+                          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-gray-400", children: formatFileSize(file.size) })
+                        ] }),
+                        !disabled && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              removeFile(idx);
+                            },
+                            className: "absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100 cursor-pointer",
+                            "aria-label": "\uD30C\uC77C \uC81C\uAC70",
+                            children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                          }
+                        )
+                      ]
+                    },
+                    `${file.name}-${idx}`
+                  );
+                }) }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between text-xs text-gray-500", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    files.length,
+                    "\uAC1C \uD30C\uC77C \uC120\uD0DD\uB428",
+                    !disabled && " \xB7 \uD074\uB9AD\uD558\uC5EC \uCD94\uAC00"
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "\uCD1D ",
+                    formatFileSize(files.reduce((sum, f) => sum + f.size, 0))
+                  ] })
+                ] })
+              ] }) : isDragging ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-blue-500", children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold flex gap-1", children: [
+                  /* @__PURE__ */ jsx(FileUp, { size: 15, className: "mt-[1px]" }),
+                  "\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB193\uC544\uC8FC\uC138\uC694"
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium", children: "\uB4DC\uB86D\uD558\uBA74 \uC790\uB3D9\uC73C\uB85C \uC5C5\uB85C\uB4DC\uB429\uB2C8\uB2E4." })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 flex gap-1", children: [
+                  /* @__PURE__ */ jsx(FileUp, { size: 15, className: "text-gray-400 mt-[1px]" }),
+                  " \uD074\uB9AD\uD558\uC5EC \uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uAC70\uB098 \uB4DC\uB798\uADF8\uD558\uC138\uC694"
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "\uC774\uBBF8\uC9C0(JPG \xB7 PNG \xB7 WEBP \xB7 HEIC, \uCD5C\uB300 50MB) \xB7 PDF(\uCD5C\uB300 10MB)" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: multiple ? `\uCD5C\uB300 ${MAX_FILES}\uAC1C \xB7 \uC804\uCCB4 20MB \uC774\uD558` : "\uB2E8\uC77C \uD30C\uC77C" })
               ] })
-            ] })
-          ] }) : isDragging ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-blue-500", children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold flex gap-1", children: [
-              /* @__PURE__ */ jsx(FileUp, { size: 15, className: "mt-[1px]" }),
-              "\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB193\uC544\uC8FC\uC138\uC694"
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium", children: "\uB4DC\uB86D\uD558\uBA74 \uC790\uB3D9\uC73C\uB85C \uC5C5\uB85C\uB4DC\uB429\uB2C8\uB2E4." })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 flex gap-1", children: [
-              /* @__PURE__ */ jsx(FileUp, { size: 15, className: "text-gray-400 mt-[1px]" }),
-              " \uD074\uB9AD\uD558\uC5EC \uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uAC70\uB098 \uB4DC\uB798\uADF8\uD558\uC138\uC694"
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "\uC774\uBBF8\uC9C0(JPG \xB7 PNG \xB7 WEBP \xB7 HEIC, \uCD5C\uB300 50MB) \xB7 PDF(\uCD5C\uB300 10MB)" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: multiple ? `\uCD5C\uB300 ${MAX_FILES}\uAC1C \xB7 \uC804\uCCB4 20MB \uC774\uD558` : "\uB2E8\uC77C \uD30C\uC77C" })
-          ] })
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-xs text-red-500 bg-red-50 border border-red-200 rounded px-3 py-2", children: error }),
-    /* @__PURE__ */ jsx(FilePreviewViewer, { ...viewer.viewerProps, fileTypes, fileNames: files.map((f) => f.name) })
-  ] });
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-xs text-red-500 bg-red-50 border border-red-200 rounded px-3 py-2", children: error }),
+        /* @__PURE__ */ jsx(FilePreviewViewer, { ...viewer.viewerProps, fileTypes, fileNames: files.map((f) => f.name) })
+      ]
+    }
+  );
 }
 var VARIANT_STYLES2 = {
   light: {