@farmzone/fz-react-ui 1.0.3 → 1.0.5

package/dist/index.js

@@ -44,9 +44,10 @@ var buttonVariants = 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"
       },
@@ -3362,8 +3363,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,
@@ -3374,7 +3374,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) {
@@ -3384,9 +3384,10 @@ function ModalOverlay(props) {
   return /* @__PURE__ */ 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,
@@ -3488,7 +3489,7 @@ function Modal(props) {
   } = props;
   const idRef = useRef(/* @__PURE__ */ Symbol("modal"));
   const [depth, setDepth] = useState(0);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!isOpen2) return;
     const id = idRef.current;
     const d = modalStack.push(id);
@@ -3525,12 +3526,22 @@ function Modal(props) {
       {
         isOpen: isOpen2,
         onClose,
-        className: overlayClassName,
+        className: cn(overlayClassName, depth > 1 && "bg-black/20"),
         closeOnOverlayClick,
         zIndex: overlayZ
       }
     ),
-    /* @__PURE__ */ jsx(ModalContent, { className: contentClassName, zIndex: contentZ, children })
+    /* @__PURE__ */ 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) {
@@ -4031,7 +4042,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__ */ jsxs("div", { className: "flex item-center w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `pl-2 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `pl-3 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) }),
         column.sortable && /* @__PURE__ */ jsx(
           "div",
           {
@@ -4062,7 +4073,7 @@ function TableHeader(props) {
             children: renderSortIcon(column.key)
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `pr-2 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) })
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `pr-3 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }) })
       ] });
     }
     return /* @__PURE__ */ jsx("span", { className: `px-1.5 truncate ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title });
@@ -4433,7 +4444,7 @@ function SkeletonTd(props) {
   return /* @__PURE__ */ 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,
@@ -4505,7 +4516,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__ */ jsx(Tooltip2, { content: tooltipText, position: "bottom", asChild: true, children: /* @__PURE__ */ jsx("span", { children: cellContent }) }) : cellContent
@@ -4974,7 +4985,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-3"} 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,
@@ -4991,7 +5002,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
             }
           ) })
         },
@@ -5066,7 +5077,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__ */ jsxs("div", { className: "bg-white rounded table-shadow", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded shadow-panel", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -5090,7 +5101,7 @@ function Table(props) {
               isColumnDraggable
             }
           ),
-          /* @__PURE__ */ jsx("tbody", { className: "w-full h-full", children: showSkeleton ? Array.from({ length: 15 }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
+          /* @__PURE__ */ jsx("tbody", { className: "w-full h-full", children: showSkeleton ? Array.from({ length: 3 }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
             leadingPinnedCols.map((col, idx) => /* @__PURE__ */ jsx(SkeletonTd, { col, showSquare: idx === 0 && !!checkboxInfo }, `leading-${idx}`)),
             leftColspan > 0 && /* @__PURE__ */ jsx("td", { colSpan: leftColspan, style: { padding: 0, border: "none" } }),
             virtualItems.map((vc) => /* @__PURE__ */ jsx(SkeletonTd, { col: groupCols[vc.index] }, `group-${vc.index}`)),
@@ -6102,14 +6113,53 @@ function resolveValueColSpan(colspan) {
   const span = colspan ?? 10;
   return COL_SPAN_CLASS[span] ?? COL_SPAN_CLASS[10];
 }
+var THREE_DIGIT_AREA_CODES = /* @__PURE__ */ new Set([
+  "031",
+  "032",
+  "033",
+  "041",
+  "042",
+  "043",
+  "051",
+  "052",
+  "053",
+  "054",
+  "055",
+  "061",
+  "062",
+  "063"
+]);
 function formatPhoneNumber(value) {
-  const numbers = value.replace(/\D/g, "");
-  if (numbers.length <= 3) return numbers;
-  if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
-  if (numbers.length <= 11) {
-    return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
+  let digits = value.replace(/\D/g, "");
+  if (digits.startsWith("02")) {
+    if (digits.length > 2 && digits.length <= 6) {
+      return `${digits.slice(0, 2)}-${digits.slice(2)}`;
+    }
+    if (digits.length > 6) {
+      return `${digits.slice(0, 2)}-${digits.slice(2, 6)}-${digits.slice(6)}`;
+    }
+  } else if (THREE_DIGIT_AREA_CODES.has(digits.slice(0, 3))) {
+    if (digits.length > 3 && digits.length <= 6) {
+      return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+    }
+    if (digits.length > 6) {
+      return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+    }
+  } else {
+    if (digits.length > 3 && digits.length <= 7) {
+      return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+    }
+    if (digits.length > 7) {
+      return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`;
+    }
+  }
+  return digits;
+}
+function resolvePhoneMaxLength(formattedValue) {
+  if (formattedValue.startsWith("02") || THREE_DIGIT_AREA_CODES.has(formattedValue.slice(0, 3))) {
+    return 12;
   }
-  return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
+  return 13;
 }
 function formatNumberWithCommas(value) {
   const numStr = String(value).replace(/,/g, "");
@@ -6804,7 +6854,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) {
@@ -6829,6 +6880,7 @@ function InputField(props) {
       maxLength,
       status: "default",
       className: formControlClass(hasError),
+      autoComplete,
       bare: true,
       onChange: handleChange
     }
@@ -6931,11 +6983,13 @@ function PhoneField(props) {
     hasError = false
   } = props;
   const { placeholder = "010-0000-0000", disabled = false, readOnly = false, className = "" } = config;
+  const phoneValue = String(value ?? "");
+  const phoneMaxLength = resolvePhoneMaxLength(phoneValue);
   const handleChange = (e) => {
     onChange(formatPhoneNumber(e.target.value));
   };
   if (readOnly) {
-    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+    return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: phoneValue || "\u2014" }) });
   }
   return /* @__PURE__ */ jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsx(
     Input2,
@@ -6943,12 +6997,12 @@ function PhoneField(props) {
       name,
       ref,
       onBlur,
-      value: String(value ?? ""),
+      value: phoneValue,
       type: "text",
       placeholder,
       disabled,
       readOnly,
-      maxLength: 13,
+      maxLength: phoneMaxLength,
       status: "default",
       className: formControlClass(hasError),
       bare: true,
@@ -7534,7 +7588,8 @@ function SubmitFormRoot(props) {
     className = "",
     formClassName,
     gridClassName = "grid-cols-12",
-    mode = "onSubmit"
+    mode = "onSubmit",
+    autoComplete
   } = props;
   const methods = useForm({
     resolver: zodResolver(schema),
@@ -7557,6 +7612,7 @@ function SubmitFormRoot(props) {
       id: formId,
       onSubmit: handleSubmit,
       className: cn2(SUBMIT_FORM_CLASS, formClassName, className),
+      autoComplete,
       noValidate: true,
       children: /* @__PURE__ */ jsx("div", { className: `grid ${gridClassName} items-stretch gap-0`, children })
     }
@@ -7584,7 +7640,8 @@ function PageFilter(props) {
     colGap = 0,
     submitButtonText = "\uAC80\uC0C9",
     resetButtonText = "\uCD08\uAE30\uD654",
-    values
+    values,
+    primaryColor
   } = props;
   const [localValues, setLocalValues] = useState(values);
   const initialValuesRef = useRef(values);
@@ -7642,6 +7699,7 @@ function PageFilter(props) {
             onChange: handleSelectChange(optionKey),
             options: option.options,
             placeholder: "\uC120\uD0DD",
+            canReset: true,
             containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
@@ -7694,16 +7752,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__ */ jsxs("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: [
-        rows.map((row) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "absolute right-2 bottom-2 flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
-          onReset && /* @__PURE__ */ jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
-        ] })
-      ] })
+      style: primaryColor ? { borderTopColor: primaryColor } : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: "relative flex flex-col", style: { gap: `${colGap}px` }, children: rows.map((row, ix) => {
+        const isLastRow = rows.length - 1 === ix;
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-row min-h-12", children: [
+          row.options.map((option, index) => renderFilterOption(option, rowGap, index)),
+          isLastRow && /* @__PURE__ */ jsxs("div", { className: "ml-4 flex flex-row items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
+            onReset && /* @__PURE__ */ jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
+          ] })
+        ] }, row.options.map((opt) => String(opt.key)).join("_"));
+      }) })
     }
   );
 }
@@ -7715,7 +7777,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,
@@ -7732,7 +7796,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,
@@ -7745,11 +7811,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,
@@ -7766,7 +7834,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,
@@ -7919,12 +7989,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__ */ jsx(X, { size: 10, strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ jsx(X, { size: s.closeBtnSize, strokeWidth: 2.5 })
                   }
                 )
               ]
@@ -8754,7 +8824,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",
@@ -8780,7 +8851,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",
@@ -8806,7 +8878,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",
@@ -8847,7 +8920,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) {
@@ -8924,6 +8998,7 @@ function Sidebar(props) {
     onClose,
     menuSections,
     header,
+    footer,
     className,
     showCollapseButton = false,
     variant = "light",
@@ -8931,8 +9006,17 @@ function Sidebar(props) {
   } = props;
   const { pathname } = useLocation();
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const [overflowVisible, setOverflowVisible] = useState(true);
   const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = useState(/* @__PURE__ */ new Set());
+  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];
   useEffect(() => {
@@ -8994,7 +9078,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 ?? ""}
         `,
@@ -9007,14 +9091,14 @@ function Sidebar(props) {
             children: isCollapsed ? /* @__PURE__ */ jsx(PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: `flex-1 min-h-0 hide-scrollbar ${overflowVisible ? "overflow-y-auto" : "overflow-hidden"}`, children: /* @__PURE__ */ 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__ */ jsx("div", { className: "mb-6 mt-2", children: header }),
-              /* @__PURE__ */ jsx("nav", { className: "space-y-6", children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+              header && header,
+              /* @__PURE__ */ jsx("nav", { className: `space-y-6 ${variant === "system-dark" || variant === "system-light" ? "px-1" : ""}`, children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
                 section.title && /* @__PURE__ */ jsx("div", { className: s.sectionTitle, children: section.title }),
                 /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: section.items.map((item) => {
                   const isActive = !item.children && pathname === item.path;
@@ -9153,6 +9237,14 @@ function Sidebar(props) {
               ] }, section.title ?? sectionIndex)) })
             ]
           }
+        ) }),
+        footer && /* @__PURE__ */ 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
+          }
         )
       ]
     }
@@ -9471,7 +9563,7 @@ function DetailModalFrame(props) {
       ) }),
       renderExtraContent?.({ isEditMode })
     ] }),
-    /* @__PURE__ */ jsx(ModalFooter, { className: "flex justify-end gap-2", children: isEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ModalFooter, { className: "flex justify-end", children: isEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleCancelEdit, disabled: controller.isSaving, children: "\uCDE8\uC18C" }),
       /* @__PURE__ */ jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9756,6 +9848,144 @@ function useScrollToTop(containerId) {
   return scrollToTop;
 }
 
-export { ArrowIcon, Badge, BaseUploader, BreadCrumb, Button, Carousel_default as Carousel, Checkbox, DatePicker, DebouncedButton, DetailContent, DetailModalFrame, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, Input2 as Input, Loading, LoadingOverlay, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, ModalOverlay, MultiTabBar as MultiTab, PageFilter, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, Radio, RadioGroup, ScrollArea_default as ScrollArea, ScrollBar, SearchAddress, SearchBar, Select2 as Select, Select as SelectBase, SelectContent, SelectGroup2 as SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SimplePopover, Skeleton, Slider, Spinner, SubmitForm, Switch, Tab, Table, Textarea, ToastProvider, ToggleSwitch, Tooltip2 as Tooltip, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
+// src/hooks/useParams/config/utils.ts
+function paramsToSearchParams(params) {
+  const searchParams = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === null || value === void 0) {
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((item) => searchParams.append(key, String(item)));
+    } else if (value !== "") {
+      searchParams.set(key, String(value));
+    }
+  });
+  return searchParams;
+}
+function useParams(initialParams) {
+  if (!initialParams) {
+    throw new Error("initialParams is required");
+  }
+  const [params, setParams] = useState(initialParams);
+  const [localParams, setLocalParams] = useState(initialParams);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const isInitializedRef = useRef(false);
+  const getInitialState = useCallback(() => {
+    const result = { ...initialParams };
+    Object.keys(initialParams).forEach((key) => {
+      const initialValue = initialParams[key];
+      if (Array.isArray(initialValue)) {
+        const urlValue = searchParams.getAll(key);
+        if (urlValue.length > 0) {
+          result[key] = urlValue;
+        }
+      } else {
+        const urlValue = searchParams.get(key);
+        if (urlValue !== null) {
+          if (urlValue === "null") {
+            result[key] = null;
+          } else if (urlValue === "undefined") {
+            result[key] = void 0;
+          } else {
+            result[key] = urlValue;
+          }
+        }
+      }
+    });
+    return result;
+  }, [initialParams, searchParams]);
+  useEffect(() => {
+    if (!isInitializedRef.current) {
+      const initialState = getInitialState();
+      setLocalParams(initialState);
+      setParams(initialState);
+      if (!searchParams.toString()) {
+        const newSearchParams = paramsToSearchParams(initialParams);
+        setSearchParams(newSearchParams, { replace: true });
+      }
+      isInitializedRef.current = true;
+    }
+  }, [getInitialState, initialParams, searchParams, setSearchParams]);
+  const updateLocalParam = useCallback(
+    (key, value) => {
+      setLocalParams((prev) => ({
+        ...prev,
+        [key]: value
+      }));
+    },
+    [setLocalParams]
+  );
+  const updateParams = useCallback(
+    (updatedParams) => {
+      const newParams = {
+        ...params,
+        ...updatedParams
+      };
+      setParams(newParams);
+      setLocalParams(newParams);
+      setSearchParams(paramsToSearchParams(newParams));
+    },
+    [params, setSearchParams]
+  );
+  const updateParam = useCallback(
+    (key, value) => {
+      const newParams = {
+        ...params,
+        [key]: value
+      };
+      setParams(newParams);
+      setLocalParams(newParams);
+      setSearchParams(paramsToSearchParams(newParams));
+    },
+    [params, setSearchParams]
+  );
+  const update = useCallback(() => {
+    const paramsWithResetPage = {
+      ...localParams,
+      page: 0
+    };
+    const newSearchParams = paramsToSearchParams(paramsWithResetPage);
+    setSearchParams(newSearchParams);
+    setParams(paramsWithResetPage);
+    setLocalParams(paramsWithResetPage);
+  }, [localParams, setSearchParams]);
+  const reset = useCallback(() => {
+    setLocalParams(initialParams);
+    setParams(initialParams);
+    const newSearchParams = paramsToSearchParams(initialParams);
+    setSearchParams(newSearchParams);
+  }, [initialParams, setSearchParams]);
+  const handleSortChange = useCallback(
+    (sortKey, sortOrder) => {
+      const newParams = {
+        ...params,
+        sortBy: sortKey,
+        sortOrder
+      };
+      updateParams(newParams);
+    },
+    [updateParams, params]
+  );
+  const sortOption = useMemo(() => {
+    if (!params.sortBy || !params.sortOrder) return void 0;
+    return {
+      sortKey: params.sortBy,
+      sortOrder: params.sortOrder
+    };
+  }, [params.sortBy, params.sortOrder]);
+  return {
+    localParams,
+    params,
+    updateParam,
+    updateLocalParam,
+    update,
+    reset,
+    handleSortChange,
+    sortOption
+  };
+}
+
+export { ArrowIcon, Badge, BaseUploader, BreadCrumb, Button, Carousel_default as Carousel, Checkbox, DatePicker, DebouncedButton, DetailContent, DetailModalFrame, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, Input2 as Input, Loading, LoadingOverlay, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, ModalOverlay, MultiTabBar as MultiTab, PageFilter, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, Radio, RadioGroup, ScrollArea_default as ScrollArea, ScrollBar, SearchAddress, SearchBar, Select2 as Select, Select as SelectBase, SelectContent, SelectGroup2 as SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SimplePopover, Skeleton, Slider, Spinner, SubmitForm, Switch, Tab, Table, Textarea, ToastProvider, ToggleSwitch, Tooltip2 as Tooltip, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map