@farmzone/fz-react-ui 1.0.2 → 1.0.4

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"
       },
@@ -208,6 +209,32 @@ function TooltipContent({
     }
   ) });
 }
+
+// src/config/zIndex.ts
+var Z_INDEX = {
+  TABLE_COL_STICKY: 1,
+  TABLE_FIXED_CELL: 5,
+  TABLE_FIXED_HEADER_CELL: 10,
+  LOCAL_OVERLAY: 10,
+  LAYOUT_HEADER: 20,
+  DROPDOWN_LOCAL: 20,
+  SIDEBAR_CONTAINER: 30,
+  SIDEBAR_BACKDROP: 40,
+  SIDEBAR: 50,
+  DROPDOWN: 50,
+  CALENDAR_ANCHORED: 50,
+  LOADING_OVERLAY_DEFAULT: 50,
+  DRAWING_CANVAS_1: 51,
+  DRAWING_CANVAS_2: 52,
+  DRAWING: 53,
+  MODAL_OVERLAY: 54,
+  MODAL: 55,
+  CALENDAR_PORTAL: 60,
+  TOOLTIP: 70,
+  SELECT_CONTENT: 100,
+  TOP: 9999,
+  MODAL_Z_STEP: 10
+};
 function Tooltip2(props) {
   const {
     children,
@@ -219,6 +246,7 @@ function Tooltip2(props) {
     arrowClassName = "",
     contentClassName = "",
     contentStyle = {},
+    containerStyle,
     offsetX = 0,
     offsetY = 2,
     delayDuration = 0,
@@ -238,7 +266,9 @@ function Tooltip2(props) {
         sideOffset,
         collisionPadding: 8,
         style: {
-          transform: `translateX(${offsetX}px) translateY(${translateY}px)`
+          zIndex: Z_INDEX.TOOLTIP,
+          transform: `translateX(${offsetX}px) translateY(${translateY}px)`,
+          ...containerStyle
         },
         children: /* @__PURE__ */ jsx("div", { className: "px-3 py-[5px] break-words whitespace-normal", style: contentStyle, children: /* @__PURE__ */ jsxs("p", { className: contentClassName, children: [
           content && /* @__PURE__ */ jsx("span", { children: content }),
@@ -1285,31 +1315,6 @@ function Spinner(props) {
     }
   );
 }
-
-// src/config/zIndex.ts
-var Z_INDEX = {
-  TABLE_COL_STICKY: 1,
-  TABLE_FIXED_CELL: 5,
-  TABLE_FIXED_HEADER_CELL: 10,
-  LOCAL_OVERLAY: 10,
-  LAYOUT_HEADER: 20,
-  DROPDOWN_LOCAL: 20,
-  SIDEBAR_CONTAINER: 30,
-  SIDEBAR_BACKDROP: 40,
-  SIDEBAR: 50,
-  DROPDOWN: 50,
-  CALENDAR_ANCHORED: 50,
-  LOADING_OVERLAY_DEFAULT: 50,
-  DRAWING_CANVAS_1: 51,
-  DRAWING_CANVAS_2: 52,
-  DRAWING: 53,
-  MODAL_OVERLAY: 54,
-  MODAL: 55,
-  CALENDAR_PORTAL: 60,
-  SELECT_CONTENT: 100,
-  TOP: 9999,
-  MODAL_Z_STEP: 10
-};
 function LoadingOverlay(props) {
   const {
     isVisible,
@@ -1924,13 +1929,18 @@ function ToastProvider() {
 }
 
 // src/components/DatePicker/config/utils.ts
+function makeLocalDate(year, monthIndex, day) {
+  const d = /* @__PURE__ */ new Date(0);
+  d.setFullYear(year, monthIndex, day);
+  return d;
+}
 function parseLocalYmd(ymd) {
   const m = ymd.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);
   if (!m) return null;
   const y = Number(m[1]);
   const mo = Number(m[2]) - 1;
   const d = Number(m[3]);
-  const dt = new Date(y, mo, d);
+  const dt = makeLocalDate(y, mo, d);
   if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== d) return null;
   return dt;
 }
@@ -1964,7 +1974,7 @@ function isCalendarDayAfterMax(date, maxYmd) {
   return ax > bx;
 }
 function formatDate(date) {
-  const year = date.getFullYear();
+  const year = String(date.getFullYear()).padStart(4, "0");
   const month = String(date.getMonth() + 1).padStart(2, "0");
   const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
@@ -1983,7 +1993,6 @@ function validateAndFormatInput(input) {
   if (numbers.length === 0) return "";
   const clampYear = (raw) => {
     const n = parseInt(raw, 10);
-    if (n < 1) return "0001";
     if (n > 9999) return "9999";
     return raw;
   };
@@ -2006,7 +2015,7 @@ function validateAndFormatInput(input) {
   let day = dayRaw;
   if (day.length === 2) {
     const dayNum = parseInt(day, 10);
-    const lastDayOfMonth = new Date(parseInt(year, 10), parseInt(month, 10), 0).getDate();
+    const lastDayOfMonth = makeLocalDate(parseInt(year, 10), parseInt(month, 10), 0).getDate();
     if (dayNum < 1) day = "01";
     else if (dayNum > lastDayOfMonth) day = lastDayOfMonth.toString().padStart(2, "0");
   }
@@ -2014,7 +2023,7 @@ function validateAndFormatInput(input) {
 }
 
 // src/components/DatePicker/calendar/config/default.ts
-var DEFAULT_CALENDAR_YEAR_HALF_SPAN = 25;
+var DEFAULT_CALENDAR_YEAR_HALF_SPAN = 50;
 var CALENDAR_WEEKDAY_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var CALENDAR_RANGE_HINT = {
   start: "\uC2DC\uC791 \uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694",
@@ -2038,7 +2047,7 @@ function parseYmdDateString(value) {
   return parseLocalYmd(value);
 }
 function resolveCalendarYearBounds(anchorYear, calendarYearRange) {
-  const fallbackMin = anchorYear - DEFAULT_CALENDAR_YEAR_HALF_SPAN;
+  const fallbackMin = Math.max(0, anchorYear - DEFAULT_CALENDAR_YEAR_HALF_SPAN);
   const fallbackMax = anchorYear + DEFAULT_CALENDAR_YEAR_HALF_SPAN;
   const rawMin = calendarYearRange?.minYear?.trim();
   const rawMax = calendarYearRange?.maxYear?.trim();
@@ -2050,7 +2059,7 @@ function resolveCalendarYearBounds(anchorYear, calendarYearRange) {
   if (Number.isNaN(minParsed) || Number.isNaN(maxParsed) || minParsed > maxParsed) {
     return { minYear: fallbackMin, maxYear: fallbackMax };
   }
-  return { minYear: minParsed, maxYear: maxParsed };
+  return { minYear: Math.max(0, minParsed), maxYear: maxParsed };
 }
 function buildCalendarYearSelectOptions(maxDate, anchorYear = (/* @__PURE__ */ new Date()).getFullYear(), calendarYearRange) {
   const { minYear, maxYear } = resolveCalendarYearBounds(anchorYear, calendarYearRange);
@@ -2059,7 +2068,7 @@ function buildCalendarYearSelectOptions(maxDate, anchorYear = (/* @__PURE__ */ n
   for (let y = maxYear; y >= minYear; y--) {
     options.push({
       value: String(y),
-      label: `${y}\uB144`,
+      label: `${String(y).padStart(4, "0")}\uB144`,
       disabled: maxSelectableYear !== null && y > maxSelectableYear
     });
   }
@@ -2081,8 +2090,8 @@ function buildCalendarMonthSelectOptions(viewYear, maxDate) {
   return options;
 }
 function getCalendarMonthGrid(year, monthIndex) {
-  const firstDay = new Date(year, monthIndex, 1);
-  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+  const firstDay = makeLocalDate(year, monthIndex, 1);
+  const daysInMonth = makeLocalDate(year, monthIndex + 1, 0).getDate();
   const leadingEmpty = firstDay.getDay();
   const totalCells = leadingEmpty + daysInMonth;
   const trailingEmpty = totalCells % 7 === 0 ? 0 : 7 - totalCells % 7;
@@ -2090,7 +2099,7 @@ function getCalendarMonthGrid(year, monthIndex) {
 }
 function disableNextCalendarMonth(year, monthIndex, maxDate) {
   if (maxDate === void 0) return false;
-  return isCalendarDayAfterMax(new Date(year, monthIndex + 1, 1), maxDate);
+  return isCalendarDayAfterMax(makeLocalDate(year, monthIndex + 1, 1), maxDate);
 }
 function scrollOpenYearSelectCheckedIntoView() {
   requestAnimationFrame(() => {
@@ -2136,7 +2145,7 @@ function RenderCalendar(props) {
   } = props;
   const year = currentDate.getFullYear();
   const monthIndex = currentDate.getMonth();
-  const anchorYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const anchorYear = year;
   const disableNextMonth = disableNextCalendarMonth(year, monthIndex, maxDate);
   const { leadingEmpty, daysInMonth, trailingEmpty } = getCalendarMonthGrid(year, monthIndex);
   const yearOptions = buildCalendarYearSelectOptions(maxDate, anchorYear, calendarYearRange);
@@ -2150,7 +2159,7 @@ function RenderCalendar(props) {
     days.push(/* @__PURE__ */ jsx("div", { className: "size-8", "aria-hidden": true }, `lead-${i}`));
   }
   for (let d = 1; d <= daysInMonth; d++) {
-    const date = new Date(year, monthIndex, d);
+    const date = makeLocalDate(year, monthIndex, d);
     const dateFormatted = formatDate(date);
     const isToday = dateFormatted === todayFormatted;
     const isSelected = dateFormatted === selectedSingleYmd;
@@ -2249,7 +2258,7 @@ function RenderCalendar(props) {
           ]
         }
       ) : /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold", children: [
-        year,
+        String(year).padStart(4, "0"),
         "\uB144 ",
         monthIndex + 1,
         "\uC6D4"
@@ -2330,16 +2339,16 @@ function useCalendarState(props) {
     setIsCalendarOpen(false);
   };
   const goToPreviousMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
+    setCurrentDate(makeLocalDate(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
   };
   const goToNextMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
+    setCurrentDate(makeLocalDate(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
   };
   const handleYearChange = (year) => {
-    setCurrentDate(new Date(year, currentDate.getMonth(), 1));
+    setCurrentDate(makeLocalDate(year, currentDate.getMonth(), 1));
   };
   const handleMonthChange = (month) => {
-    setCurrentDate(new Date(currentDate.getFullYear(), month, 1));
+    setCurrentDate(makeLocalDate(currentDate.getFullYear(), month, 1));
   };
   return {
     isCalendarOpen,
@@ -2466,6 +2475,7 @@ function DatePickerRange(props) {
           return;
         }
         onRangeChange?.(formatted, endInputValue);
+        if (isCalendarOpen && calendarPosition === "start") navigateToDateValue(formatted);
       } else if (formatted.length === 0) {
         onRangeChange?.(formatted, endInputValue);
       }
@@ -2479,6 +2489,7 @@ function DatePickerRange(props) {
           return;
         }
         onRangeChange?.(startInputValue, formatted);
+        if (isCalendarOpen && calendarPosition === "end") navigateToDateValue(formatted);
       } else if (formatted.length === 0) {
         onRangeChange?.(startInputValue, formatted);
       }
@@ -2653,6 +2664,7 @@ function DatePickerSingle(props) {
     autoDatePosition,
     containerRef,
     toggleCalendar,
+    navigateToDateValue,
     closeCalendar,
     goToPreviousMonth,
     goToNextMonth,
@@ -2670,7 +2682,7 @@ function DatePickerSingle(props) {
       const dateMatch = formatted.match(/^(\d{4})-(\d{2})-(\d{2})$/);
       if (dateMatch) {
         const [, year, month, day] = dateMatch;
-        const date = new Date(
+        const date = makeLocalDate(
           Number.parseInt(year, 10),
           Number.parseInt(month, 10) - 1,
           Number.parseInt(day, 10)
@@ -2682,6 +2694,7 @@ function DatePickerSingle(props) {
             return;
           }
           onChange?.(formatted);
+          if (isCalendarOpen) navigateToDateValue(formatted);
         }
       }
     } else {
@@ -3350,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,
@@ -3362,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) {
@@ -3372,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,
@@ -3476,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);
@@ -3513,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) {
@@ -3618,9 +3641,10 @@ function ConfirmModal(props) {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center justify-end gap-2", children: [
           !isHideOkButton && /* @__PURE__ */ jsx(
-            Button,
+            DebouncedButton,
             {
               ref: okButtonRef,
+              debounceDelay: 500,
               variant: "outline",
               onClick: handleOkClick,
               className: "focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1",
@@ -4018,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",
           {
@@ -4049,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 });
@@ -4420,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,
@@ -4492,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
@@ -4961,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-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,
@@ -4978,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
             }
           ) })
         },
@@ -5053,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",
       {
@@ -5077,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}`)),
@@ -6791,7 +6815,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) {
@@ -6816,6 +6841,7 @@ function InputField(props) {
       maxLength,
       status: "default",
       className: formControlClass(hasError),
+      autoComplete,
       bare: true,
       onChange: handleChange
     }
@@ -7521,7 +7547,8 @@ function SubmitFormRoot(props) {
     className = "",
     formClassName,
     gridClassName = "grid-cols-12",
-    mode = "onSubmit"
+    mode = "onSubmit",
+    autoComplete
   } = props;
   const methods = useForm({
     resolver: zodResolver(schema),
@@ -7544,6 +7571,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 })
     }
@@ -7571,7 +7599,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);
@@ -7610,7 +7639,17 @@ function PageFilter(props) {
     const rowGap2 = index !== 0 ? option.label ? gap : 5 : 0;
     switch (option.type) {
       case "input":
-        return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(Input2, { placeholder: option.placeholder, value: currentValue, onChange: handleInputChange(optionKey) }) }, String(optionKey));
+        return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(
+          Input2,
+          {
+            placeholder: option.placeholder,
+            value: currentValue,
+            onChange: handleInputChange(optionKey),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSubmit();
+            }
+          }
+        ) }, String(optionKey));
       case "select":
         return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(
           Select2,
@@ -7619,6 +7658,7 @@ function PageFilter(props) {
             onChange: handleSelectChange(optionKey),
             options: option.options,
             placeholder: "\uC120\uD0DD",
+            canReset: true,
             containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
@@ -7671,22 +7711,109 @@ 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("_"));
+      }) })
     }
   );
 }
+var VARIANT_STYLES = {
+  light: {
+    container: "bg-white border-b border-gray-200",
+    activeTab: "bg-gray-50 border-gray-200 text-gray-800 shadow-sm",
+    inactiveTab: "bg-white border-gray-100 text-gray-400 hover:text-gray-600 hover:border-gray-200 hover:bg-gray-50",
+    activeText: "font-semibold text-gray-800",
+    inactiveText: "font-normal",
+    indicator: "bg-blue-500",
+    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,
+    tabPy: "py-1.5",
+    tabPx: "px-3",
+    tabTextSize: "text-xs",
+    scrollPadding: "px-3 pt-1.5",
+    rounded: "rounded-t-md"
+  },
+  dark: {
+    container: "bg-gray-900 border-b border-gray-700",
+    activeTab: "bg-gray-800 border-gray-600 text-white shadow-sm",
+    inactiveTab: "bg-gray-900 border-gray-700/50 text-gray-500 hover:text-gray-300 hover:border-gray-600 hover:bg-gray-800",
+    activeText: "font-semibold text-white",
+    inactiveText: "font-normal",
+    indicator: "bg-indigo-400",
+    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,
+    tabPy: "py-1.5",
+    tabPx: "px-3",
+    tabTextSize: "text-xs",
+    scrollPadding: "px-3 pt-1.5",
+    rounded: "rounded-t-md"
+  },
+  "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-[#efefef] hover:border-gray-300",
+    activeText: "font-semibold text-slate-800",
+    inactiveText: "font-medium",
+    indicator: "bg-[#2b2b2b]",
+    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,
+    tabPy: "py-2.5",
+    tabPx: "px-5",
+    tabTextSize: "text-sm",
+    scrollPadding: "px-3 pt-2",
+    rounded: "rounded-t-none"
+  },
+  "system-dark": {
+    container: "bg-slate-900 border-b border-slate-700",
+    activeTab: "bg-slate-800 border-slate-600 text-slate-100 shadow-sm",
+    inactiveTab: "bg-transparent border-slate-700/50 text-slate-400 hover:text-slate-200 hover:bg-slate-800/60 hover:border-slate-700",
+    activeText: "font-semibold text-slate-100",
+    inactiveText: "font-medium",
+    indicator: "bg-indigo-400",
+    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,
+    tabPy: "py-2.5",
+    tabPx: "px-5",
+    tabTextSize: "text-sm",
+    scrollPadding: "px-4 pt-2",
+    rounded: "rounded-t-none"
+  }
+};
 var PLUS_BTN_WIDTH = 36;
+function easedFade(dir, opacity) {
+  const c = (t) => `rgba(0,0,0,${(opacity * t).toFixed(3)})`;
+  return `linear-gradient(${dir}, ${c(1)} 0%, ${c(0.72)} 20%, ${c(0.38)} 45%, ${c(0.1)} 70%, transparent 100%)`;
+}
 function MultiTabBar(props) {
-  const { tabs, activeTabId, onTabClick, onTabClose, onTabAdd } = props;
+  const { tabs, activeTabId, onTabClick, onTabClose, onTabAdd, variant = "light", primaryColor } = props;
+  const s = VARIANT_STYLES[variant];
   const scrollRef = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
   const [showLeftFade, setShowLeftFade] = useState(false);
@@ -7739,13 +7866,23 @@ function MultiTabBar(props) {
   const handleStopDrag = () => {
     isDragging.current = false;
   };
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      el.scrollLeft += e.deltaY || e.deltaX;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
   if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-full overflow-hidden bg-white border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch", children: [
+  return /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 w-full overflow-hidden ${s.container}`, children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch", children: [
     showLeftFade && /* @__PURE__ */ jsx(
       "div",
       {
         className: "absolute left-0 top-0 bottom-0 w-10 pointer-events-none z-10",
-        style: { background: "linear-gradient(to right, white 30%, transparent)" }
+        style: { background: easedFade("to right", s.fadeOpacity) }
       }
     ),
     showRightFade && /* @__PURE__ */ jsx(
@@ -7754,7 +7891,7 @@ function MultiTabBar(props) {
         className: "absolute top-0 bottom-0 w-10 pointer-events-none z-10",
         style: {
           right: PLUS_BTN_WIDTH,
-          background: "linear-gradient(to left, white 30%, transparent)"
+          background: easedFade("to left", s.fadeOpacity)
         }
       }
     ),
@@ -7762,7 +7899,7 @@ function MultiTabBar(props) {
       "div",
       {
         ref: scrollRef,
-        className: "flex-1 min-w-0 flex items-end gap-0.5 px-3 pt-1.5 overflow-x-auto [&::-webkit-scrollbar]:hidden",
+        className: `flex-1 min-w-0 flex items-end gap-0.5 ${s.scrollPadding} overflow-x-auto [&::-webkit-scrollbar]:hidden`,
         style: { scrollbarWidth: "none" },
         onScroll: updateFades,
         onMouseDown: handleMouseDown,
@@ -7783,17 +7920,23 @@ function MultiTabBar(props) {
                 if (!isActive) onTabClick(tab.id);
               },
               className: `
-                  group relative flex items-center gap-1.5 px-3 py-1.5 flex-shrink-0
-                  rounded-t-md border border-b-0 cursor-pointer select-none
+                  group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabPy} flex-shrink-0
+                  ${s.rounded} border border-b-0 cursor-pointer select-none
                   transition-colors duration-100
-                  ${isActive ? "bg-gray-50 border-gray-200 text-gray-800 shadow-sm" : "bg-white border-gray-100 text-gray-400 hover:text-gray-600 hover:border-gray-200 hover:bg-gray-50"}
+                  ${isActive ? s.activeTab : s.inactiveTab}
                 `,
               children: [
-                isActive && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-0.5 rounded-t-md bg-blue-500" }),
+                isActive && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `absolute top-0 left-0 right-0 h-0.5 ${s.rounded} ${s.indicator}`,
+                    style: primaryColor ? { backgroundColor: primaryColor } : void 0
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: `text-xs max-w-35 truncate leading-none ${isActive ? "font-semibold text-gray-800" : "font-normal"}`,
+                    className: `${s.tabTextSize} max-w-35 truncate leading-none ${isActive ? s.activeText : s.inactiveText}`,
                     children: tab.label
                   }
                 ),
@@ -7805,11 +7948,12 @@ function MultiTabBar(props) {
                       onTabClose(tab.id);
                     },
                     className: `
-                      flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center
-                      rounded hover:bg-gray-300/60 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 })
                   }
                 )
               ]
@@ -7822,14 +7966,14 @@ function MultiTabBar(props) {
     onTabAdd && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "flex-shrink-0 flex items-center justify-center border-l border-gray-100 bg-white",
+        className: `flex-shrink-0 flex items-center justify-center ${s.plusBtnArea}`,
         style: { width: PLUS_BTN_WIDTH },
         children: /* @__PURE__ */ jsx(
           "button",
           {
             onClick: onTabAdd,
             title: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uC0C8 \uD0ED\uC73C\uB85C \uC5F4\uAE30",
-            className: "w-6 h-6 flex items-center justify-center rounded text-gray-400 cursor-pointer hover:text-gray-600 hover:bg-gray-100 transition-colors",
+            className: `w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-colors ${s.plusBtn}`,
             children: /* @__PURE__ */ jsx(Plus, { size: 13, strokeWidth: 2 })
           }
         )
@@ -8614,19 +8758,226 @@ function FileUploader(props) {
     /* @__PURE__ */ jsx(FilePreviewViewer, { ...viewer.viewerProps, fileTypes, fileNames: files.map((f) => f.name) })
   ] });
 }
+var VARIANT_STYLES2 = {
+  light: {
+    aside: "bg-white border-r border-gray-200",
+    sectionTitle: "text-xs font-semibold text-gray-500 tracking-wider mb-3",
+    itemActive: "bg-blue-50 text-blue-600",
+    itemInactive: "text-gray-700 hover:bg-gray-100",
+    subItemActive: "text-blue-600 font-medium",
+    subItemInactive: "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+    childGroupBorder: "border-gray-100",
+    childActive: "bg-blue-50 text-blue-600 font-medium",
+    childInactive: "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+    grandchildActive: "bg-blue-50 text-blue-600 font-medium",
+    grandchildInactive: "text-gray-500 hover:bg-gray-50 hover:text-gray-900",
+    collapseBtn: "bg-gray-50 hover:bg-gray-100",
+    collapseIcon: "var(--color-sub-darkgray)",
+    rounded: "rounded-lg",
+    itemPy: "py-2",
+    childPy: "py-1.5",
+    grandchildPy: "py-1",
+    itemFont: "font-semibold",
+    itemTextSize: "text-sm",
+    grandchildTextSize: "text-xs",
+    iconClass: "w-4 h-4 flex-shrink-0",
+    activeItemStyle: {},
+    activeChildStyle: {},
+    activeGrandchildStyle: {},
+    footerBorder: "border-t border-gray-200"
+  },
+  dark: {
+    aside: "bg-gray-900 border-r border-gray-700",
+    sectionTitle: "text-xs font-semibold text-gray-400 tracking-wider mb-3",
+    itemActive: "bg-gray-700 text-white",
+    itemInactive: "text-gray-300 hover:bg-gray-800",
+    subItemActive: "text-blue-400 font-medium",
+    subItemInactive: "text-gray-400 hover:bg-gray-800 hover:text-gray-100",
+    childGroupBorder: "border-gray-700",
+    childActive: "bg-gray-700 text-white font-medium",
+    childInactive: "text-gray-400 hover:bg-gray-800 hover:text-gray-100",
+    grandchildActive: "bg-gray-700 text-blue-400 font-medium",
+    grandchildInactive: "text-gray-500 hover:bg-gray-800 hover:text-gray-100",
+    collapseBtn: "bg-gray-800 hover:bg-gray-700",
+    collapseIcon: "#9ca3af",
+    rounded: "rounded-lg",
+    itemPy: "py-2",
+    childPy: "py-1.5",
+    grandchildPy: "py-1",
+    itemFont: "font-semibold",
+    itemTextSize: "text-sm",
+    grandchildTextSize: "text-xs",
+    iconClass: "w-4 h-4 flex-shrink-0",
+    activeItemStyle: {},
+    activeChildStyle: {},
+    activeGrandchildStyle: {},
+    footerBorder: "border-t border-gray-700"
+  },
+  "system-dark": {
+    aside: "bg-slate-900 border-r border-slate-700",
+    sectionTitle: "text-[10px] font-bold text-slate-500 uppercase tracking-[0.12em] mb-2 pb-2 border-b border-slate-700/70",
+    itemActive: "bg-slate-800 text-white",
+    itemInactive: "text-slate-300 hover:bg-slate-800/60 hover:text-white",
+    subItemActive: "text-slate-100 font-medium",
+    subItemInactive: "text-slate-400 hover:bg-slate-800/50 hover:text-slate-200",
+    childGroupBorder: "border-slate-700/60",
+    childActive: "bg-slate-800/70 text-slate-100 font-medium",
+    childInactive: "text-slate-400 hover:bg-slate-800/50 hover:text-slate-200",
+    grandchildActive: "text-slate-100 font-medium",
+    grandchildInactive: "text-slate-500 hover:bg-slate-800/50 hover:text-slate-200",
+    collapseBtn: "bg-slate-800 hover:bg-slate-700",
+    collapseIcon: "#94a3b8",
+    rounded: "rounded-none",
+    itemPy: "py-3",
+    childPy: "py-[10px]",
+    grandchildPy: "py-2",
+    itemFont: "font-medium",
+    itemTextSize: "text-sm",
+    grandchildTextSize: "text-xs",
+    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" },
+    footerBorder: "border-t border-slate-700"
+  },
+  "system-light": {
+    aside: "bg-gray-50 border-r border-gray-200",
+    sectionTitle: "text-[10px] font-bold text-slate-400 uppercase tracking-[0.12em] mb-2 pb-2 border-b border-gray-200",
+    itemActive: "font-medium",
+    itemInactive: "text-slate-700 hover:bg-gray-100",
+    subItemActive: "text-[#2b2b2b] font-medium",
+    subItemInactive: "text-slate-500 hover:bg-gray-100 hover:text-slate-800",
+    childGroupBorder: "border-gray-200",
+    childActive: "font-medium",
+    childInactive: "text-slate-500 hover:bg-gray-100 hover:text-slate-800",
+    grandchildActive: "text-[#2b2b2b] font-medium",
+    grandchildInactive: "text-slate-500 hover:bg-gray-100 hover:text-slate-800",
+    collapseBtn: "bg-gray-100 hover:bg-gray-200",
+    collapseIcon: "#64748b",
+    rounded: "rounded-none",
+    itemPy: "py-3",
+    childPy: "py-[10px]",
+    grandchildPy: "py-2",
+    itemFont: "font-medium",
+    itemTextSize: "text-[15px]",
+    grandchildTextSize: "text-sm",
+    iconClass: "w-4.5 h-4.5 flex-shrink-0",
+    activeItemStyle: {
+      color: "#2b2b2b",
+      backgroundColor: "color-mix(in srgb, #2b2b2b 10%, transparent)",
+      borderLeft: "3px solid #2b2b2b",
+      paddingLeft: "9px"
+    },
+    activeChildStyle: {
+      color: "#2b2b2b",
+      backgroundColor: "color-mix(in srgb, #2b2b2b 10%, transparent)",
+      borderLeft: "2px solid #2b2b2b",
+      paddingLeft: "14px"
+    },
+    activeGrandchildStyle: {
+      color: "#2b2b2b",
+      backgroundColor: "color-mix(in srgb, #2b2b2b 10%, transparent)",
+      borderLeft: "2px solid #2b2b2b",
+      paddingLeft: "10px"
+    },
+    footerBorder: "border-t border-gray-200"
+  }
+};
+function tintedStyle(color) {
+  return {
+    color,
+    backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`
+  };
+}
+function textStyle(color) {
+  return { color };
+}
+function solidStyle(color) {
+  return {
+    backgroundColor: `color-mix(in srgb, ${color} 25%, transparent)`,
+    color: "#ffffff",
+    boxShadow: `inset 3px 0 0 ${color}`
+  };
+}
+var ACCENT_APPLIERS = {
+  light: {
+    itemActive: tintedStyle,
+    subItemActive: textStyle,
+    childActive: tintedStyle,
+    grandchildActive: textStyle
+  },
+  dark: {
+    itemActive: textStyle,
+    subItemActive: textStyle,
+    childActive: textStyle,
+    grandchildActive: textStyle
+  },
+  "system-dark": {
+    itemActive: (c) => ({
+      ...solidStyle(c),
+      boxShadow: void 0,
+      borderLeft: `3px solid ${c}`,
+      paddingLeft: "9px"
+    }),
+    subItemActive: textStyle,
+    childActive: (c) => ({
+      ...solidStyle(c),
+      boxShadow: void 0,
+      borderLeft: `2px solid ${c}`,
+      paddingLeft: "14px"
+    }),
+    grandchildActive: (c) => ({
+      ...textStyle(c),
+      borderLeft: `2px solid ${c}`,
+      paddingLeft: "10px"
+    })
+  },
+  "system-light": {
+    itemActive: (c) => ({
+      ...tintedStyle(c),
+      borderLeft: `3px solid ${c}`,
+      paddingLeft: "9px"
+    }),
+    subItemActive: textStyle,
+    childActive: (c) => ({
+      ...tintedStyle(c),
+      borderLeft: `2px solid ${c}`,
+      paddingLeft: "14px"
+    }),
+    grandchildActive: (c) => ({
+      ...tintedStyle(c),
+      borderLeft: `2px solid ${c}`,
+      paddingLeft: "10px"
+    })
+  }
+};
 function Sidebar(props) {
   const navigate = useNavigate();
-  const { isOpen: isOpen2, onClose, menuSections, header, className, showCollapseButton = false } = props;
+  const {
+    onClose,
+    menuSections,
+    header,
+    footer,
+    className,
+    showCollapseButton = false,
+    variant = "light",
+    primaryColor
+  } = props;
   const { pathname } = useLocation();
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isContentVisible, setIsContentVisible] = useState(true);
+  const [overflowVisible, setOverflowVisible] = useState(true);
   const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
-    if (isCollapsed) return;
-    const timer = setTimeout(() => setIsContentVisible(true), 300);
+    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(() => {
     menuSections.forEach((section) => {
       section.items.forEach((item) => {
@@ -8677,167 +9028,186 @@ function Sidebar(props) {
       window.open(path, "_blank", "noopener,noreferrer");
     } else if (path !== "") {
       navigate(path);
-      onClose();
+      onClose?.();
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isOpen2 && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/10 bg-opacity-50 z-40 lg:hidden", onClick: onClose }),
-    /* @__PURE__ */ jsxs(
-      "aside",
-      {
-        className: `
-            ${isCollapsed ? "w-11 min-w-11" : "min-w-60 w-62"}
-            ${isOpen2 ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
-            hide-scrollbar fixed lg:relative top-0 left-0 h-screen bg-white border-r border-gray-200 z-50 shrink-0 overflow-y-auto
-            transition-transform duration-300 ease-in-out
-            ${className ?? ""}
-          `,
-        children: [
-          showCollapseButton && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                if (!isCollapsed) setIsContentVisible(false);
-                setIsCollapsed((prev) => !prev);
-              },
-              className: "absolute top-4 right-2 z-20 w-6.5 h-6.5 bg-gray-50 rounded-full flex items-center justify-center hover:bg-gray-50 transition-colors cursor-pointer hover:bg-gray-100",
-              children: isCollapsed ? /* @__PURE__ */ jsx(PanelRightClose, { size: 18, color: "var(--color-sub-darkgray)" }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 18, color: "var(--color-sub-darkgray)" })
-            }
-          ),
-          isContentVisible && /* @__PURE__ */ jsxs("div", { className: "py-6 pl-6 pr-4", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onClose,
-                className: "lg:hidden absolute top-4 right-4 p-2 hover:bg-gray-100 rounded-lg transition-colors text-2xl leading-none",
-                "aria-label": "Close menu",
-                children: "x"
-              }
-            ),
-            header && /* @__PURE__ */ jsx("div", { className: "mb-10 mt-2", children: header }),
-            /* @__PURE__ */ jsx("nav", { className: "space-y-6", children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
-              section.title && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-gray-500 tracking-wider mb-3", children: section.title }),
-              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => {
-                      if (item.children) {
-                        toggleExpand(item.label);
-                      } else if (item.path) {
-                        handleItemClick(item.path);
-                      }
-                    },
-                    className: `
-                            w-full text-left flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors
-                            ${!item.children && pathname === item.path ? "bg-blue-50 text-blue-600" : "text-gray-700 hover:bg-gray-100"}
-                            cursor-pointer
-                          `,
-                    children: [
-                      /* @__PURE__ */ jsx(item.icon, { className: "w-4 h-4 flex-shrink-0" }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
-                      item.children && /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          className: `w-4 h-4 transition-transform ${expandedItems.has(item.label) ? "rotate-90" : ""}`,
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
-                        }
-                      ),
-                      item.path?.includes("https") && /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          className: "w-4 h-4 flex-shrink-0 text-gray-400",
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx(
-                            "path",
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: `
+          ${isCollapsed ? "w-11 min-w-11" : "min-w-60 w-62"}
+          transition-[width,min-width] duration-300 ease-in-out
+          relative h-screen shrink-0 overflow-x-hidden flex flex-col
+          ${s.aside}
+          ${className ?? ""}
+        `,
+      children: [
+        showCollapseButton && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsCollapsed((prev) => !prev),
+            className: `absolute top-4 right-2 z-20 w-6.5 h-6.5 rounded-full flex items-center justify-center transition-colors cursor-pointer ${s.collapseBtn}`,
+            children: isCollapsed ? /* @__PURE__ */ jsx(PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
+          }
+        ),
+        /* @__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" ? "pb-6" : "px-4 pb-6"}`,
+            style: { transitionDelay: isCollapsed ? "0ms" : "150ms" },
+            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;
+                  return /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => {
+                          if (item.children) {
+                            toggleExpand(item.label);
+                          } else if (item.path) {
+                            handleItemClick(item.path);
+                          }
+                        },
+                        className: `
+                              w-full text-left flex items-center gap-2 px-3 ${s.itemPy} ${s.rounded} ${s.itemTextSize} ${s.itemFont} transition-colors cursor-pointer
+                              ${isActive ? s.itemActive : s.itemInactive}
+                            `,
+                        style: {
+                          ...isActive ? s.activeItemStyle : {},
+                          ...isActive && primaryColor ? applier.itemActive(primaryColor) : {}
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(item.icon, { className: s.iconClass }),
+                          /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                          item.children && /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              className: `w-4 h-4 transition-transform ${expandedItems.has(item.label) ? "rotate-90" : ""}`,
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                            }
+                          ),
+                          item.path?.includes("https") && /* @__PURE__ */ jsx(
+                            "svg",
                             {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              strokeWidth: 2,
-                              d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                              className: "w-4 h-4 flex-shrink-0 opacity-50",
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  strokeWidth: 2,
+                                  d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                                }
+                              )
                             }
                           )
-                        }
-                      )
-                    ]
-                  }
-                ),
-                item.children && expandedItems.has(item.label) && /* @__PURE__ */ jsx("div", { className: "ml-[25px] mt-1 space-y-1", children: item.children.map((child, childIndex) => {
-                  if (child.children && child.children.length > 0) {
-                    const subKey = `${item.label}::${child.label}`;
-                    const isSubExpanded = expandedSubItems.has(subKey);
-                    const isSubActive = child.children.some((gc) => gc.path === pathname);
-                    return /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => toggleSubExpand(subKey),
-                          className: `
-                                      w-full text-left flex items-center justify-between px-3 py-1.5 rounded-lg text-sm transition-colors cursor-pointer
-                                      ${isSubActive ? "text-blue-600 font-medium" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}
-                                    `,
-                          children: [
-                            /* @__PURE__ */ jsx("span", { children: child.label }),
-                            /* @__PURE__ */ jsx(
-                              "svg",
-                              {
-                                className: `w-3 h-3 transition-transform ${isSubExpanded ? "rotate-90" : ""}`,
-                                fill: "none",
-                                stroke: "currentColor",
-                                viewBox: "0 0 24 24",
-                                children: /* @__PURE__ */ jsx(
-                                  "path",
+                        ]
+                      }
+                    ),
+                    item.children && expandedItems.has(item.label) && /* @__PURE__ */ jsx("div", { className: `ml-5 mt-0.5 space-y-0.5 border-l ${s.childGroupBorder}`, children: item.children.map((child, childIndex) => {
+                      if (child.children && child.children.length > 0) {
+                        const subKey = `${item.label}::${child.label}`;
+                        const isSubExpanded = expandedSubItems.has(subKey);
+                        const isSubActive = child.children.some((gc) => gc.path === pathname);
+                        return /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              onClick: () => toggleSubExpand(subKey),
+                              className: `
+                                        w-full text-left flex items-center justify-between pl-4 pr-3 ${s.childPy} ${s.rounded} ${s.itemTextSize} transition-colors cursor-pointer
+                                        ${isSubActive ? s.subItemActive : s.subItemInactive}
+                                      `,
+                              style: isSubActive && primaryColor ? applier.subItemActive(primaryColor) : void 0,
+                              children: [
+                                /* @__PURE__ */ jsx("span", { children: child.label }),
+                                /* @__PURE__ */ jsx(
+                                  "svg",
                                   {
-                                    strokeLinecap: "round",
-                                    strokeLinejoin: "round",
-                                    strokeWidth: 2,
-                                    d: "M9 5l7 7-7 7"
+                                    className: `w-3 h-3 transition-transform ${isSubExpanded ? "rotate-90" : ""}`,
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    children: /* @__PURE__ */ jsx(
+                                      "path",
+                                      {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M9 5l7 7-7 7"
+                                      }
+                                    )
                                   }
                                 )
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      isSubExpanded && /* @__PURE__ */ jsx("div", { className: "ml-3 mt-0.5 space-y-0.5 border-l border-gray-200 pl-2", children: child.children.map((grandchild) => /* @__PURE__ */ jsx(
+                              ]
+                            }
+                          ),
+                          isSubExpanded && /* @__PURE__ */ jsx("div", { className: "ml-3 mt-0.5 space-y-0.5 pl-2", children: child.children.map((grandchild) => {
+                            const isGrandchildActive = pathname === grandchild.path;
+                            return /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: () => handleItemClick(grandchild.path),
+                                className: `
+                                                w-full text-left px-3 ${s.grandchildPy} ${s.rounded} ${s.grandchildTextSize} transition-colors cursor-pointer
+                                                ${isGrandchildActive ? s.grandchildActive : s.grandchildInactive}
+                                              `,
+                                style: {
+                                  ...isGrandchildActive ? s.activeGrandchildStyle : {},
+                                  ...isGrandchildActive && primaryColor ? applier.grandchildActive(primaryColor) : {}
+                                },
+                                children: grandchild.label
+                              },
+                              grandchild.path
+                            );
+                          }) })
+                        ] }, child.label);
+                      }
+                      const isChildActive = pathname === child.path;
+                      return /* @__PURE__ */ jsx(
                         "button",
                         {
-                          onClick: () => handleItemClick(grandchild.path),
+                          onClick: () => handleItemClick(child.path ?? ""),
                           className: `
-                                            w-full text-left px-3 py-1 rounded-lg text-sm transition-colors cursor-pointer
-                                            ${pathname === grandchild.path ? "text-blue-600 font-medium" : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"}
-                                          `,
-                          children: grandchild.label
+                                    w-full text-left pl-4 pr-3 ${s.childPy} ${s.rounded} ${s.itemTextSize} transition-colors cursor-pointer
+                                    ${isChildActive ? s.childActive : s.childInactive}
+                                  `,
+                          style: {
+                            ...isChildActive ? s.activeChildStyle : {},
+                            ...isChildActive && primaryColor ? applier.childActive(primaryColor) : {}
+                          },
+                          children: child.label
                         },
-                        grandchild.path
-                      )) })
-                    ] }, child.label);
-                  }
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => handleItemClick(child.path ?? ""),
-                      className: `
-                                  w-full text-left px-3 py-1.5 rounded-lg text-sm transition-colors cursor-pointer
-                                  ${pathname === child.path ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}
-                                `,
-                      children: child.label
-                    },
-                    childIndex
-                  );
+                        childIndex
+                      );
+                    }) })
+                  ] }, item.label);
                 }) })
-              ] }, item.label)) })
-            ] }, section.title ?? sectionIndex)) })
-          ] })
-        ]
-      }
-    )
-  ] });
+              ] }, 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
+          }
+        )
+      ]
+    }
+  );
 }
 function useDetailController(params = {}) {
   const { mode: controlledMode, onModeChange } = params;
@@ -9134,10 +9504,7 @@ function DetailModalFrame(props) {
   const isEditMode = controller.mode === "edit";
   const canEdit = Boolean(editSchema && (editFields || renderEditBody));
   return /* @__PURE__ */ jsxs(Modal, { isOpen: open, onClose: handleClose, contentClassName: cn("max-w-2xl", contentClassName), children: [
-    /* @__PURE__ */ jsxs(ModalHeader, { className: "flex flex-row items-center justify-between", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: title }),
-      !isEditMode && canEdit && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleEdit, children: "\uC218\uC815" })
-    ] }),
+    /* @__PURE__ */ jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
     /* @__PURE__ */ jsxs(ModalBody, { className: "flex-1 min-h-0 overflow-hidden p-0 flex flex-col", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
         DetailContent,
@@ -9155,10 +9522,11 @@ 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: controller.isSaving ? "\uC800\uC7A5 \uC911..." : "\uC800\uC7A5" })
+      /* @__PURE__ */ jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      canEdit && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleEdit, children: "\uC218\uC815" }),
       renderFooterExtra,
       /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClose, children: "\uB2EB\uAE30" })
     ] }) })