@farmzone/fz-react-ui 1.0.19 → 1.0.21

package/dist/index.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React6 from 'react';
-import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useMemo, useContext, useId, useLayoutEffect, useDeferredValue } from 'react';
+import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useMemo, useContext, useId, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Trash2, Plus, EyeOff, Eye, Minus, Check, CircleX, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
@@ -2429,6 +2429,8 @@ function DatePickerRange(props) {
     endValue = "",
     onRangeChange,
     className = "",
+    width,
+    height,
     editDateSelect = true,
     onKeyDownEnter,
     datePosition = "bottom",
@@ -2539,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(
@@ -2582,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 {
@@ -2655,6 +2669,8 @@ function DatePickerSingle(props) {
     onChange,
     placeholder = "\uB0A0\uC9DC \uC120\uD0DD",
     className = "",
+    width,
+    height,
     editDateSelect = true,
     onKeyDownEnter,
     datePosition = "bottom",
@@ -2765,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,
@@ -2833,6 +2863,8 @@ function DatePicker(props) {
         endValue,
         onRangeChange,
         className,
+        width,
+        height,
         editDateSelect,
         onKeyDownEnter,
         datePosition,
@@ -2852,6 +2884,8 @@ function DatePicker(props) {
       onChange,
       placeholder,
       className,
+      width,
+      height,
       editDateSelect,
       onKeyDownEnter,
       datePosition,
@@ -4106,13 +4140,25 @@ function TableHeader(props) {
     };
   };
   const renderColumnTitle = (column, isClickableHead) => {
-    const baseClasses = "pt-0.5 select-none truncate";
+    const hasWrapParts = column.isWrap && column.wrapParts && column.wrapParts.length > 0;
+    const baseClasses = hasWrapParts ? "pt-0.5 select-none whitespace-normal" : column.isWrap ? "pt-0.5 select-none whitespace-normal break-words" : "pt-0.5 select-none truncate";
     const subTitleClasses = column.key === "subTitle" ? "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800" : "";
     const hasSortIcon = column.sortable;
     const textAlignClass = column.align === "center" ? "text-center" : column.align === "right" ? "text-right" : "text-left";
+    const titleContent = hasWrapParts ? column.wrapParts.map((part, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      idx > 0 && /* @__PURE__ */ jsx("wbr", {}),
+      part
+    ] }, idx)) : column.title;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
       hasSortIcon && column.align === "center" && /* @__PURE__ */ jsx("div", { className: "w-5 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`,
+          style: hasWrapParts ? { wordBreak: "keep-all" } : void 0,
+          children: titleContent
+        }
+      ),
       hasSortIcon && /* @__PURE__ */ jsx("div", { className: `w-6 shrink-0 flex items-center justify-center cursor-pointer ${isClickableHead}`, children: renderSortIcon(column.key) })
     ] });
   };
@@ -4151,7 +4197,7 @@ function TableHeader(props) {
   const hasMainGroups = Object.keys(mainGroups).length > 0;
   const hasSubGroups = Object.keys(subGroups).length > 0;
   if (!hasMainGroups && !hasSubGroups) {
-    return /* @__PURE__ */ jsx("thead", { className: "w-full sticky top-0 z-10", children: /* @__PURE__ */ jsx("tr", { className: "w-full h-10", children: columns.map((column, idx) => {
+    return /* @__PURE__ */ jsx("thead", { className: "w-full sticky top-0 z-10", children: /* @__PURE__ */ jsx("tr", { className: "w-full min-h-10", children: columns.map((column, idx) => {
       const width = column.width;
       const minWidth = column.minWidth;
       const maxWidth = column.maxWidth;
@@ -4162,7 +4208,7 @@ function TableHeader(props) {
         {
           id: `${column.key}-header`,
           ...getDragProps(column),
-          className: `bg-gray-200 border-b border-r border-gray-300 py-2 text-left font-semibold text-gray-700 text-sm tracking-wider overflow-hidden last:border-r-0 transition-all ${isClickableHead}`,
+          className: `bg-gray-200 border-b border-r border-gray-300 py-2 text-left font-semibold text-gray-700 text-sm tracking-wider last:border-r-0 transition-all ${column.isWrap ? "" : "overflow-hidden"} ${isClickableHead}`,
           onClick: () => {
             if (column.sortable) {
               handleSort(column.key);
@@ -4195,7 +4241,7 @@ function TableHeader(props) {
   }
   if (hasMainGroups) {
     return /* @__PURE__ */ jsxs("thead", { className: "w-full sticky top-0 z-10", children: [
-      /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
+      /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
         const width = column.width;
         const minWidth = column.minWidth;
         const maxWidth = column.maxWidth;
@@ -4276,7 +4322,7 @@ function TableHeader(props) {
               width,
               minWidth: minWidth || width,
               maxWidth: maxWidth || width,
-              whiteSpace: "nowrap",
+              whiteSpace: column.isWrap ? "normal" : "nowrap",
               ...fixedStyle
             },
             children: renderColumnTitle(column, column.sortable ? "cursor-pointer" : "")
@@ -4284,7 +4330,7 @@ function TableHeader(props) {
           `${column.key}-${idx}`
         );
       }) }),
-      /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
+      /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
         const width = column.width;
         const minWidth = column.minWidth;
         const maxWidth = column.maxWidth;
@@ -4328,7 +4374,7 @@ function TableHeader(props) {
         }
         return null;
       }) }),
-      /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
+      /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
         const width = column.width;
         const minWidth = column.minWidth;
         const maxWidth = column.maxWidth;
@@ -4342,7 +4388,7 @@ function TableHeader(props) {
           {
             id: `${column.key}-header`,
             ...getDragProps(column),
-            className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider overflow-hidden transition-all ${isClickableHead}`,
+            className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider transition-all ${column.isWrap ? "" : "overflow-hidden"} ${isClickableHead}`,
             onClick: () => {
               if (column.sortable) {
                 handleSort(column.key);
@@ -4352,7 +4398,7 @@ function TableHeader(props) {
               width,
               minWidth: minWidth || width,
               maxWidth: maxWidth || width,
-              whiteSpace: "nowrap",
+              whiteSpace: column.isWrap ? "normal" : "nowrap",
               ...fixedStyle
             },
             children: /* @__PURE__ */ jsx(
@@ -4374,7 +4420,7 @@ function TableHeader(props) {
     ] });
   }
   return /* @__PURE__ */ jsxs("thead", { className: "w-full sticky top-0 z-10", children: [
-    /* @__PURE__ */ jsx("tr", { className: "w-full h-8 ", children: columns.map((column) => {
+    /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8 ", children: columns.map((column) => {
       const width = column.width;
       const minWidth = column.minWidth;
       const maxWidth = column.maxWidth;
@@ -4424,7 +4470,7 @@ function TableHeader(props) {
             width,
             minWidth: minWidth || width,
             maxWidth: maxWidth || width,
-            whiteSpace: "nowrap",
+            whiteSpace: column.isWrap ? "normal" : "nowrap",
             ...fixedStyle
           },
           children: renderColumnTitle(column, isClickableHead)
@@ -4432,7 +4478,7 @@ function TableHeader(props) {
         column.key
       );
     }) }),
-    /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column) => {
+    /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column) => {
       const width = column.width;
       const minWidth = column.minWidth;
       const maxWidth = column.maxWidth;
@@ -4446,7 +4492,7 @@ function TableHeader(props) {
         {
           id: `${column.key}-header`,
           ...getDragProps(column),
-          className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider overflow-hidden transition-all ${isClickableHead}`,
+          className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider transition-all ${column.isWrap ? "" : "overflow-hidden"} ${isClickableHead}`,
           onClick: () => {
             if (column.sortable) {
               handleSort(column.key);
@@ -4456,7 +4502,7 @@ function TableHeader(props) {
             width,
             minWidth: minWidth || width,
             maxWidth: maxWidth || width,
-            whiteSpace: "nowrap",
+            whiteSpace: column.isWrap ? "normal" : "nowrap",
             ...fixedStyle
           },
           children: /* @__PURE__ */ jsx(
@@ -8589,7 +8635,9 @@ function BaseUploader(props) {
     maxSize,
     disabled = false,
     placeholder,
-    className
+    className,
+    width,
+    height
   } = props;
   const inputRef = useRef(null);
   const inputId = useId();
@@ -8632,7 +8680,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",
       {
@@ -8666,6 +8714,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",
@@ -8711,7 +8760,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,
     {
@@ -8722,7 +8771,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
     }
   );
 }
@@ -8819,7 +8870,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);
@@ -8926,121 +8977,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: {