@farmzone/fz-react-ui 1.0.3 → 1.0.5

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-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,
@@ -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}`)),
@@ -6136,14 +6147,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, "");
@@ -6838,7 +6888,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 +6914,7 @@ function InputField(props) {
       maxLength,
       status: "default",
       className: formControlClass(hasError),
+      autoComplete,
       bare: true,
       onChange: handleChange
     }
@@ -6965,11 +7017,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__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: String(value ?? "") || "\u2014" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: FIELD_READONLY_TEXT_CLASS, children: phoneValue || "\u2014" }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: fieldControlWrapClass(className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Input2,
@@ -6977,12 +7031,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,
@@ -7568,7 +7622,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 +7646,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 +7674,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 +7733,7 @@ function PageFilter(props) {
             onChange: handleSelectChange(optionKey),
             options: option.options,
             placeholder: "\uC120\uD0DD",
+            canReset: true,
             containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
@@ -7728,16 +7786,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 +7811,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 +7830,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 +7845,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 +7868,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 +8023,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 +8858,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 +8885,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 +8912,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 +8954,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 +9032,7 @@ function Sidebar(props) {
     onClose,
     menuSections,
     header,
+    footer,
     className,
     showCollapseButton = false,
     variant = "light",
@@ -8965,8 +9040,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 +9112,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 +9125,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 +9271,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 +9597,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: [
@@ -9790,6 +9882,144 @@ function useScrollToTop(containerId) {
   return scrollToTop;
 }
 
+// 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] = React6.useState(initialParams);
+  const [localParams, setLocalParams] = React6.useState(initialParams);
+  const [searchParams, setSearchParams] = reactRouter.useSearchParams();
+  const isInitializedRef = React6.useRef(false);
+  const getInitialState = React6.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]);
+  React6.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 = React6.useCallback(
+    (key, value) => {
+      setLocalParams((prev) => ({
+        ...prev,
+        [key]: value
+      }));
+    },
+    [setLocalParams]
+  );
+  const updateParams = React6.useCallback(
+    (updatedParams) => {
+      const newParams = {
+        ...params,
+        ...updatedParams
+      };
+      setParams(newParams);
+      setLocalParams(newParams);
+      setSearchParams(paramsToSearchParams(newParams));
+    },
+    [params, setSearchParams]
+  );
+  const updateParam = React6.useCallback(
+    (key, value) => {
+      const newParams = {
+        ...params,
+        [key]: value
+      };
+      setParams(newParams);
+      setLocalParams(newParams);
+      setSearchParams(paramsToSearchParams(newParams));
+    },
+    [params, setSearchParams]
+  );
+  const update = React6.useCallback(() => {
+    const paramsWithResetPage = {
+      ...localParams,
+      page: 0
+    };
+    const newSearchParams = paramsToSearchParams(paramsWithResetPage);
+    setSearchParams(newSearchParams);
+    setParams(paramsWithResetPage);
+    setLocalParams(paramsWithResetPage);
+  }, [localParams, setSearchParams]);
+  const reset = React6.useCallback(() => {
+    setLocalParams(initialParams);
+    setParams(initialParams);
+    const newSearchParams = paramsToSearchParams(initialParams);
+    setSearchParams(newSearchParams);
+  }, [initialParams, setSearchParams]);
+  const handleSortChange = React6.useCallback(
+    (sortKey, sortOrder) => {
+      const newParams = {
+        ...params,
+        sortBy: sortKey,
+        sortOrder
+      };
+      updateParams(newParams);
+    },
+    [updateParams, params]
+  );
+  const sortOption = React6.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
+  };
+}
+
 exports.ArrowIcon = ArrowIcon;
 exports.Badge = Badge;
 exports.BaseUploader = BaseUploader;
@@ -9880,6 +10110,7 @@ exports.useDetailController = useDetailController;
 exports.useFilePreviewViewer = useFilePreviewViewer;
 exports.useModal = useModal;
 exports.useMultiTabStore = useMultiTabStore;
+exports.useParams = useParams;
 exports.useScrollToTop = useScrollToTop;
 exports.useStableImageSrc = useStableImageSrc;
 exports.useToast = useToast;