@farmzone/fz-react-ui 1.0.3 → 1.0.4

package/dist/index.cjs

@@ -78,9 +78,10 @@ var buttonVariants = classVarianceAuthority.cva(
         delete: "bg-white border border-sub-red text-main-red hover:bg-red-50 disabled:bg-light-gray disabled:border-sub-lightgray-2 disabled:text-sub-lightgray-2 font-bold min-w-22",
         reset: "bg-white border border-sub-lightgray-2 text-sub-darkgray hover:bg-gray-100 hover:text-black",
         search: "bg-main-blue border-none text-white hover:bg-main-blue/90",
-        file: "bg-sub-darkgray text-white hover:bg-sub-darkgray/80",
+        file: "bg-btn-file text-white hover:bg-btn-file/90",
         carousel: "bg-white border border-gray-300 hover:bg-gray-100 hover:text-black rounded-full",
         accent: "btn-grad text-white rounded-full",
+        metal: "btn-metal text-white min-w-22",
         ghost: "p-1 h-auto rounded-sm bg-transparent hover:bg-sub-lightgray text-sub-darkgray hover:bg-inherit",
         link: "bg-transparent border-none text-main-blue underline-offset-4 hover:underline h-auto p-0"
       },
@@ -3396,8 +3397,7 @@ function ModalContent(props) {
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] max-h-[85vh] z-55 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] bg-white rounded-lg overflow-hidden shadow-xl duration-200",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] max-h-[85vh] z-55 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] bg-white rounded-lg overflow-hidden shadow-xl",
         className
       ),
       style: zIndex !== void 0 ? { zIndex } : void 0,
@@ -3408,7 +3408,7 @@ function ModalContent(props) {
   );
 }
 function ModalOverlay(props) {
-  const { isOpen: isOpen2, onClose, className, closeOnOverlayClick = true, zIndex } = props;
+  const { ref, isOpen: isOpen2, onClose, className, closeOnOverlayClick = true, zIndex } = props;
   if (!isOpen2) return null;
   const handleOverlayClick = (e) => {
     if (closeOnOverlayClick && e.target === e.currentTarget) {
@@ -3418,9 +3418,10 @@ function ModalOverlay(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: cn(
         "fixed inset-0 z-54 bg-black/50",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "animate-in fade-in-0 duration-150",
         className
       ),
       style: zIndex !== void 0 ? { zIndex } : void 0,
@@ -3522,7 +3523,7 @@ function Modal(props) {
   } = props;
   const idRef = React6.useRef(/* @__PURE__ */ Symbol("modal"));
   const [depth, setDepth] = React6.useState(0);
-  React6.useEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!isOpen2) return;
     const id = idRef.current;
     const d = modalStack.push(id);
@@ -3559,12 +3560,22 @@ function Modal(props) {
       {
         isOpen: isOpen2,
         onClose,
-        className: overlayClassName,
+        className: cn(overlayClassName, depth > 1 && "bg-black/20"),
         closeOnOverlayClick,
         zIndex: overlayZ
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(ModalContent, { className: contentClassName, zIndex: contentZ, children })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ModalContent,
+      {
+        className: cn(
+          contentClassName,
+          depth > 1 && "shadow-[0_0_0_1px_rgba(255,255,255,0.12),0_20px_50px_-5px_rgba(0,0,0,0.4)]"
+        ),
+        zIndex: contentZ,
+        children
+      }
+    )
   ] });
 }
 function ConfirmModal(props) {
@@ -4065,7 +4076,7 @@ function TableHeader(props) {
     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" : "";
     if (column.align === "left") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex item-center w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pl-2 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pl-3 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) }),
         column.sortable && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -4096,7 +4107,7 @@ function TableHeader(props) {
             children: renderSortIcon(column.key)
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pr-2 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pr-3 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-1.5 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title });
@@ -4467,7 +4478,7 @@ function SkeletonTd(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
-      className: `${col.key === "__checkbox__" ? "p-0" : "px-2 py-[6.8px]"} whitespace-nowrap text-sm border-r border-b border-gray-200/70 last:border-r-0`,
+      className: `${col.key === "__checkbox__" ? "p-0" : "px-2 py-4"} whitespace-nowrap text-sm border-r border-b border-gray-200/70 last:border-r-0`,
       style: {
         width: col.width,
         minWidth: col.minWidth || col.width,
@@ -4539,7 +4550,7 @@ function TableCellContent(props) {
     "div",
     {
       ref: textRef,
-      className: "ellipsis-1-line table-item hover:text-main cursor-pointer w-full min-w-0",
+      className: `ellipsis-1-line table-item w-full min-w-0 ${onCellClick ? "hover:text-main cursor-pointer" : "cursor-default"}`,
       style: { textAlign },
       onClick: onCellClick,
       children: shouldShowTooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { content: tooltipText, position: "bottom", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: cellContent }) }) : cellContent
@@ -5008,7 +5019,7 @@ function Table(props) {
           id: `${col.key}-body`,
           "data-row-cell": "true",
           "data-col-key": col.key,
-          className: `${isCheckbox ? "p-0" : "px-2 py-[6.8px]"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
+          className: `${isCheckbox ? "p-0" : "px-2 py-4"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-200 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
           style: {
             width,
             minWidth: minWidth || width,
@@ -5025,7 +5036,7 @@ function Table(props) {
               tooltipText: String(record[col.key] ?? ""),
               align: align ?? "",
               tooltipConfig: col.key === "__checkbox__" ? false : tooltipConfig,
-              onCellClick: col.key !== "__checkbox__" ? () => onRowClickRef.current?.(record, rowIdx) : void 0
+              onCellClick: col.key !== "__checkbox__" && onRowClickRef.current ? () => onRowClickRef.current?.(record, rowIdx) : void 0
             }
           ) })
         },
@@ -5100,7 +5111,7 @@ function Table(props) {
     const rest = baseRows.filter((row) => !effectiveRowOrder.includes(String(getRowKey(row.original, row.index))));
     return [...ordered, ...rest];
   }, [baseRows, effectiveRowOrder, getRowKey]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded table-shadow", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded shadow-panel", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -5124,7 +5135,7 @@ function Table(props) {
               isColumnDraggable
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "w-full h-full", children: showSkeleton ? Array.from({ length: 15 }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "w-full h-full", children: showSkeleton ? Array.from({ length: 3 }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50", children: [
             leadingPinnedCols.map((col, idx) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonTd, { col, showSquare: idx === 0 && !!checkboxInfo }, `leading-${idx}`)),
             leftColspan > 0 && /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: leftColspan, style: { padding: 0, border: "none" } }),
             virtualItems.map((vc) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonTd, { col: groupCols[vc.index] }, `group-${vc.index}`)),
@@ -6838,7 +6849,8 @@ function InputField(props) {
     maxLength,
     className = "",
     type = "input",
-    numbersOnly = false
+    numbersOnly = false,
+    autoComplete
   } = config;
   const inputType = type === "email" ? "email" : type === "password" ? "password" : "text";
   if (readOnly) {
@@ -6863,6 +6875,7 @@ function InputField(props) {
       maxLength,
       status: "default",
       className: formControlClass(hasError),
+      autoComplete,
       bare: true,
       onChange: handleChange
     }
@@ -7568,7 +7581,8 @@ function SubmitFormRoot(props) {
     className = "",
     formClassName,
     gridClassName = "grid-cols-12",
-    mode = "onSubmit"
+    mode = "onSubmit",
+    autoComplete
   } = props;
   const methods = reactHookForm.useForm({
     resolver: zod.zodResolver(schema),
@@ -7591,6 +7605,7 @@ function SubmitFormRoot(props) {
       id: formId,
       onSubmit: handleSubmit,
       className: cn2(SUBMIT_FORM_CLASS, formClassName, className),
+      autoComplete,
       noValidate: true,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${gridClassName} items-stretch gap-0`, children })
     }
@@ -7618,7 +7633,8 @@ function PageFilter(props) {
     colGap = 0,
     submitButtonText = "\uAC80\uC0C9",
     resetButtonText = "\uCD08\uAE30\uD654",
-    values
+    values,
+    primaryColor
   } = props;
   const [localValues, setLocalValues] = React6.useState(values);
   const initialValuesRef = React6.useRef(values);
@@ -7676,6 +7692,7 @@ function PageFilter(props) {
             onChange: handleSelectChange(optionKey),
             options: option.options,
             placeholder: "\uC120\uD0DD",
+            canReset: true,
             containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
@@ -7728,16 +7745,20 @@ function PageFilter(props) {
     "div",
     {
       className: cn(
-        "flex flex-col gap-3 bg-white py-3 px-5 border-t-main border-t-1 shadow-page-filter",
+        "flex flex-col gap-3 bg-white py-3 px-5 border-t-main border-t-1 shadow-panel",
         containerClassName
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: [
-        rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row min-h-12", children: row.options.map((option, index) => renderFilterOption(option, rowGap, index)) }, row.options.map((opt) => String(opt.key)).join("_"))),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-2 bottom-2 flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
-          onReset && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
-        ] })
-      ] })
+      style: primaryColor ? { borderTopColor: primaryColor } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: rows.map((row, ix) => {
+        const isLastRow = rows.length - 1 === ix;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row min-h-12", children: [
+          row.options.map((option, index) => renderFilterOption(option, rowGap, index)),
+          isLastRow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
+            onReset && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
+          ] })
+        ] }, row.options.map((opt) => String(opt.key)).join("_"));
+      }) })
     }
   );
 }
@@ -7749,7 +7770,9 @@ var VARIANT_STYLES = {
     activeText: "font-semibold text-gray-800",
     inactiveText: "font-normal",
     indicator: "bg-blue-500",
-    closeBtn: "hover:bg-gray-300/60",
+    closeBtn: "rounded hover:bg-gray-300/60",
+    closeBtnWH: "w-3.5 h-3.5",
+    closeBtnSize: 10,
     plusBtnArea: "border-l border-gray-100 bg-white",
     plusBtn: "text-gray-400 hover:text-gray-600 hover:bg-gray-100",
     fadeOpacity: 0.12,
@@ -7766,7 +7789,9 @@ var VARIANT_STYLES = {
     activeText: "font-semibold text-white",
     inactiveText: "font-normal",
     indicator: "bg-indigo-400",
-    closeBtn: "hover:bg-gray-600/60",
+    closeBtn: "rounded hover:bg-gray-600/60",
+    closeBtnWH: "w-3.5 h-3.5",
+    closeBtnSize: 10,
     plusBtnArea: "border-l border-gray-700 bg-gray-900",
     plusBtn: "text-gray-500 hover:text-gray-300 hover:bg-gray-700",
     fadeOpacity: 0.4,
@@ -7779,11 +7804,13 @@ var VARIANT_STYLES = {
   "system-light": {
     container: "bg-gray-200 border-b border-gray-300",
     activeTab: "bg-white border-gray-300 text-slate-800 shadow-sm",
-    inactiveTab: "bg-transparent border-gray-300/80 text-slate-500 hover:text-slate-700 hover:bg-gray-200 hover:border-gray-300",
+    inactiveTab: "bg-transparent border-gray-300/80 text-slate-500 hover:text-slate-700 hover:bg-[#efefef] hover:border-gray-300",
     activeText: "font-semibold text-slate-800",
     inactiveText: "font-medium",
     indicator: "bg-[#2b2b2b]",
-    closeBtn: "hover:bg-gray-300",
+    closeBtn: "ml-auto text-slate-400 hover:text-slate-700",
+    closeBtnWH: "w-4 h-4",
+    closeBtnSize: 13,
     plusBtnArea: "border-l border-gray-300 bg-gray-200",
     plusBtn: "text-slate-400 hover:text-slate-600 hover:bg-gray-300",
     fadeOpacity: 0.15,
@@ -7800,7 +7827,9 @@ var VARIANT_STYLES = {
     activeText: "font-semibold text-slate-100",
     inactiveText: "font-medium",
     indicator: "bg-indigo-400",
-    closeBtn: "hover:bg-slate-600/60",
+    closeBtn: "ml-auto text-slate-500 hover:text-slate-200",
+    closeBtnWH: "w-4 h-4",
+    closeBtnSize: 13,
     plusBtnArea: "border-l border-slate-700 bg-slate-900",
     plusBtn: "text-slate-400 hover:text-slate-200 hover:bg-slate-700",
     fadeOpacity: 0.45,
@@ -7953,12 +7982,12 @@ function MultiTabBar(props) {
                       onTabClose(tab.id);
                     },
                     className: `
-                      flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center
-                      rounded transition-all duration-100 cursor-pointer
+                      flex-shrink-0 ${s.closeBtnWH} flex items-center justify-center
+                      transition-all duration-100 cursor-pointer
                       ${s.closeBtn}
                       ${isActive ? "opacity-100" : "opacity-40 group-hover:opacity-60"}
                     `,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 10, strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: s.closeBtnSize, strokeWidth: 2.5 })
                   }
                 )
               ]
@@ -8788,7 +8817,8 @@ var VARIANT_STYLES2 = {
     iconClass: "w-4 h-4 flex-shrink-0",
     activeItemStyle: {},
     activeChildStyle: {},
-    activeGrandchildStyle: {}
+    activeGrandchildStyle: {},
+    footerBorder: "border-t border-gray-200"
   },
   dark: {
     aside: "bg-gray-900 border-r border-gray-700",
@@ -8814,7 +8844,8 @@ var VARIANT_STYLES2 = {
     iconClass: "w-4 h-4 flex-shrink-0",
     activeItemStyle: {},
     activeChildStyle: {},
-    activeGrandchildStyle: {}
+    activeGrandchildStyle: {},
+    footerBorder: "border-t border-gray-700"
   },
   "system-dark": {
     aside: "bg-slate-900 border-r border-slate-700",
@@ -8840,7 +8871,8 @@ var VARIANT_STYLES2 = {
     iconClass: "w-4.5 h-4.5 flex-shrink-0",
     activeItemStyle: { borderLeft: "3px solid #818cf8", paddingLeft: "9px" },
     activeChildStyle: { borderLeft: "2px solid #818cf8", paddingLeft: "14px" },
-    activeGrandchildStyle: { borderLeft: "2px solid #818cf8", paddingLeft: "10px" }
+    activeGrandchildStyle: { borderLeft: "2px solid #818cf8", paddingLeft: "10px" },
+    footerBorder: "border-t border-slate-700"
   },
   "system-light": {
     aside: "bg-gray-50 border-r border-gray-200",
@@ -8881,7 +8913,8 @@ var VARIANT_STYLES2 = {
       backgroundColor: "color-mix(in srgb, #2b2b2b 10%, transparent)",
       borderLeft: "2px solid #2b2b2b",
       paddingLeft: "10px"
-    }
+    },
+    footerBorder: "border-t border-gray-200"
   }
 };
 function tintedStyle(color) {
@@ -8958,6 +8991,7 @@ function Sidebar(props) {
     onClose,
     menuSections,
     header,
+    footer,
     className,
     showCollapseButton = false,
     variant = "light",
@@ -8965,8 +8999,17 @@ function Sidebar(props) {
   } = props;
   const { pathname } = reactRouter.useLocation();
   const [isCollapsed, setIsCollapsed] = React6.useState(false);
+  const [overflowVisible, setOverflowVisible] = React6.useState(true);
   const [expandedItems, setExpandedItems] = React6.useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = React6.useState(/* @__PURE__ */ new Set());
+  React6.useEffect(() => {
+    if (isCollapsed) {
+      setOverflowVisible(false);
+      return;
+    }
+    const timer = setTimeout(() => setOverflowVisible(true), 300);
+    return () => clearTimeout(timer);
+  }, [isCollapsed]);
   const s = VARIANT_STYLES2[variant];
   const applier = ACCENT_APPLIERS[variant];
   React6.useEffect(() => {
@@ -9028,7 +9071,7 @@ function Sidebar(props) {
       className: `
           ${isCollapsed ? "w-11 min-w-11" : "min-w-60 w-62"}
           transition-[width,min-width] duration-300 ease-in-out
-          hide-scrollbar relative h-screen shrink-0 overflow-y-auto overflow-x-hidden
+          relative h-screen shrink-0 overflow-x-hidden flex flex-col
           ${s.aside}
           ${className ?? ""}
         `,
@@ -9041,14 +9084,14 @@ function Sidebar(props) {
             children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 min-h-0 hide-scrollbar ${overflowVisible ? "overflow-y-auto" : "overflow-hidden"}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: `transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0 pointer-events-none select-none" : "opacity-100"} ${variant === "system-dark" || variant === "system-light" ? "px-1 py-6" : "px-4 py-6"}`,
+            className: `transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0 pointer-events-none select-none" : "opacity-100"} ${variant === "system-dark" || variant === "system-light" ? "pb-6" : "px-4 pb-6"}`,
             style: { transitionDelay: isCollapsed ? "0ms" : "150ms" },
             children: [
-              header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 mt-2", children: header }),
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-6", children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              header && header,
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `space-y-6 ${variant === "system-dark" || variant === "system-light" ? "px-1" : ""}`, children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 section.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionTitle, children: section.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: section.items.map((item) => {
                   const isActive = !item.children && pathname === item.path;
@@ -9187,6 +9230,14 @@ function Sidebar(props) {
               ] }, section.title ?? sectionIndex)) })
             ]
           }
+        ) }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `flex-shrink-0 transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0 pointer-events-none select-none" : "opacity-100"} ${s.footerBorder}`,
+            style: { transitionDelay: isCollapsed ? "0ms" : "150ms" },
+            children: footer
+          }
         )
       ]
     }
@@ -9505,7 +9556,7 @@ function DetailModalFrame(props) {
       ) }),
       renderExtraContent?.({ isEditMode })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { className: "flex justify-end gap-2", children: isEditMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { className: "flex justify-end", children: isEditMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleCancelEdit, disabled: controller.isSaving, children: "\uCDE8\uC18C" }),
       /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [