@farmzone/fz-react-ui 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -242,6 +242,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,
@@ -253,6 +279,7 @@ function Tooltip2(props) {
     arrowClassName = "",
     contentClassName = "",
     contentStyle = {},
+    containerStyle,
     offsetX = 0,
     offsetY = 2,
     delayDuration = 0,
@@ -272,7 +299,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__ */ jsxRuntime.jsx("div", { className: "px-3 py-[5px] break-words whitespace-normal", style: contentStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: contentClassName, children: [
           content && /* @__PURE__ */ jsxRuntime.jsx("span", { children: content }),
@@ -943,7 +972,7 @@ var SELECT_BORDER_COLORS = {
 };
 function Select2(props) {
   const {
-    containerClass,
+    containerClassName,
     options,
     placeholder = "\uC120\uD0DD\uD574 \uC8FC\uC138\uC694",
     triggerClassName,
@@ -973,7 +1002,7 @@ function Select2(props) {
     onChange("");
     onReset?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-0.5", containerClass ?? "w-20"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-0.5", containerClassName ?? "w-30"), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
@@ -1056,6 +1085,7 @@ function Radio(props) {
     checked,
     onChange,
     disabled = false,
+    disabledMessage,
     checkColor = DEFAULT_CHECK_COLOR,
     unCheckColor = DEFAULT_UNCHECK_COLOR,
     labelClassName,
@@ -1104,23 +1134,29 @@ function Radio(props) {
       }
     )
   ] });
+  const withTooltip = (node) => {
+    if (!disabled || !disabledMessage) return node;
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { content: disabledMessage, position: "bottom", asChild: true, sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: node }) });
+  };
   if (onChange !== void 0 && checked !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadioGroupPrimitive__namespace.Root,
-      {
-        name,
-        value: checked ? value : "",
-        onValueChange: (newValue) => {
-          if (newValue === value) {
-            onChange(value);
-          }
-        },
-        disabled,
-        children: control
-      }
+    return withTooltip(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroupPrimitive__namespace.Root,
+        {
+          name,
+          value: checked ? value : "",
+          onValueChange: (newValue) => {
+            if (newValue === value) {
+              onChange(value);
+            }
+          },
+          disabled,
+          children: control
+        }
+      )
     );
   }
-  return control;
+  return withTooltip(control);
 }
 function RadioGroup(props) {
   const {
@@ -1156,6 +1192,7 @@ function RadioGroup(props) {
           value: option.value,
           label: option.label,
           disabled: disabled || option.disabled,
+          disabledMessage: option.disabled ? option.disabledMessage : void 0,
           checkColor,
           unCheckColor,
           labelClassName,
@@ -1311,31 +1348,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,
@@ -1950,16 +1962,43 @@ 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;
 }
+function canSelectToday(options) {
+  const today = options.now ?? /* @__PURE__ */ new Date();
+  const todayYmd = formatDate(today);
+  if (options.maxDate && isCalendarDayAfterMax(today, options.maxDate)) {
+    return false;
+  }
+  if (!options.range) {
+    return true;
+  }
+  if (options.isSelectingEnd) {
+    const start = options.rangeStart?.trim() ?? "";
+    if (start.length === 10 && todayYmd < start) {
+      return false;
+    }
+    return true;
+  }
+  const end = options.rangeEnd?.trim() ?? "";
+  if (end.length === 10 && todayYmd > end) {
+    return false;
+  }
+  return true;
+}
 function isCalendarDayAfterMax(date, maxYmd) {
   const max = parseLocalYmd(maxYmd);
   if (!max) return false;
@@ -1968,7 +2007,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}`;
@@ -1987,7 +2026,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;
   };
@@ -2010,12 +2048,111 @@ 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");
   }
   return `${year}-${month}-${day}`;
 }
+
+// src/components/DatePicker/calendar/config/default.ts
+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",
+  end: "\uC885\uB8CC \uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694"
+};
+var CALENDAR_PORTAL_Z_INDEX = Z_INDEX.CALENDAR_PORTAL;
+var CALENDAR_SELECT_CLASSNAMES = {
+  containerClass: "w-20 shrink-0",
+  triggerClassName: "h-8 px-2 py-1 text-sm cursor-pointer",
+  contentClassName: "min-w-[5rem]"
+};
+var CALENDAR_PANEL_BASE_CLASS = "bg-white border border-gray-300 rounded-lg shadow-lg p-3 min-w-[280px]";
+var CALENDAR_PANEL_ANCHORED_CLASS = `${CALENDAR_PANEL_BASE_CLASS} absolute z-50`;
+var YEAR_SELECT_CONTENT_EXTRA_CLASS = "year-select-content custom-view-scrollbar max-h-50 overflow-y-auto";
+var YEAR_SELECT_OPEN_CONTENT_SELECTOR = ".year-select-content[data-state='open']";
+var SELECT_ITEM_CHECKED_SELECTOR = "[data-slot='select-item'][data-state='checked']";
+
+// src/components/DatePicker/calendar/config/calendar.ts
+function parseYmdDateString(value) {
+  if (value.length !== 10) return null;
+  return parseLocalYmd(value);
+}
+function resolveCalendarYearBounds(anchorYear, calendarYearRange) {
+  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();
+  if (rawMin === void 0 || rawMin === "" || rawMax === void 0 || rawMax === "") {
+    return { minYear: fallbackMin, maxYear: fallbackMax };
+  }
+  const minParsed = Number.parseInt(rawMin, 10);
+  const maxParsed = Number.parseInt(rawMax, 10);
+  if (Number.isNaN(minParsed) || Number.isNaN(maxParsed) || minParsed > maxParsed) {
+    return { minYear: fallbackMin, maxYear: fallbackMax };
+  }
+  return { minYear: Math.max(0, minParsed), maxYear: maxParsed };
+}
+function buildCalendarYearSelectOptions(maxDate, anchorYear = (/* @__PURE__ */ new Date()).getFullYear(), calendarYearRange) {
+  const { minYear, maxYear } = resolveCalendarYearBounds(anchorYear, calendarYearRange);
+  const maxSelectableYear = maxDate ? parseLocalYmd(maxDate)?.getFullYear() ?? null : null;
+  const options = [];
+  for (let y = maxYear; y >= minYear; y--) {
+    options.push({
+      value: String(y),
+      label: `${String(y).padStart(4, "0")}\uB144`,
+      disabled: maxSelectableYear !== null && y > maxSelectableYear
+    });
+  }
+  return options;
+}
+function buildCalendarMonthSelectOptions(viewYear, maxDate) {
+  const maxDateParsed = maxDate ? parseLocalYmd(maxDate) : null;
+  const maxYear = maxDateParsed?.getFullYear() ?? null;
+  const maxMonth = maxDateParsed !== null && maxDateParsed !== void 0 ? maxDateParsed.getMonth() + 1 : null;
+  const isMaxYear = maxYear !== null && viewYear === maxYear;
+  const options = [];
+  for (let m = 1; m <= 12; m++) {
+    options.push({
+      value: String(m),
+      label: `${m}\uC6D4`,
+      disabled: isMaxYear && maxMonth !== null && m > maxMonth
+    });
+  }
+  return options;
+}
+function getCalendarMonthGrid(year, monthIndex) {
+  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;
+  return { leadingEmpty, daysInMonth, trailingEmpty };
+}
+function disableNextCalendarMonth(year, monthIndex, maxDate) {
+  if (maxDate === void 0) return false;
+  return isCalendarDayAfterMax(makeLocalDate(year, monthIndex + 1, 1), maxDate);
+}
+function scrollOpenYearSelectCheckedIntoView() {
+  requestAnimationFrame(() => {
+    const root2 = document.querySelector(YEAR_SELECT_OPEN_CONTENT_SELECTOR);
+    if (!(root2 instanceof HTMLElement)) return;
+    const checkedItem = root2.querySelector(SELECT_ITEM_CHECKED_SELECTOR);
+    if (!(checkedItem instanceof HTMLElement)) return;
+    checkedItem.scrollIntoView({ block: "start" });
+  });
+}
+function dayCellButtonClass(opts) {
+  const { isToday, isSelected, isInRange, isRangeStart, isRangeEnd, interactiveDisabled } = opts;
+  const parts = ["w-8 h-8 text-sm flex items-center justify-center rounded-2xl transition-colors"];
+  if (isToday) parts.push("bg-gray-100");
+  if (isSelected && !isToday) parts.push("bg-neutral-200 text-gray-700");
+  if (isInRange && !isToday) parts.push("bg-gray-100/90");
+  if ((isRangeStart || isRangeEnd) && !isToday) parts.push("bg-neutral-300 text-gray-700 opacity-100");
+  parts.push(interactiveDisabled ? "opacity-20 cursor-not-allowed" : "hover:bg-blue-100 cursor-pointer");
+  return parts.filter(Boolean).join(" ").trim();
+}
 function RenderCalendar(props) {
   const {
     currentDate,
@@ -2030,133 +2167,163 @@ function RenderCalendar(props) {
     goToNextMonth,
     onYearChange,
     onMonthChange,
+    onSelectOpenChange,
     editDateSelect = true,
     datePosition = "bottom",
-    calendarSelectContainerClass
+    maxDate,
+    calendarYearRange,
+    calendarSelectContainerClass,
+    floating = false,
+    showTodayButton = true
   } = props;
   const year = currentDate.getFullYear();
-  const month = currentDate.getMonth();
-  const firstDay = new Date(year, month, 1);
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  const yearOptions = [];
-  for (let i = currentYear - 25; i <= currentYear + 20; i++) {
-    yearOptions.push({ value: i.toString(), label: `${i}\uB144` });
-  }
-  const monthOptions = [];
-  for (let i = 1; i <= 12; i++) {
-    monthOptions.push({ value: i.toString(), label: `${i}\uC6D4` });
-  }
-  const lastDay = new Date(year, month + 1, 0);
-  const startDate = new Date(firstDay);
-  startDate.setDate(startDate.getDate() - firstDay.getDay());
-  const endDate = new Date(lastDay);
-  endDate.setDate(endDate.getDate() + (6 - endDate.getDay()));
-  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+  const monthIndex = currentDate.getMonth();
+  const anchorYear = year;
+  const disableNextMonth = disableNextCalendarMonth(year, monthIndex, maxDate);
+  const { leadingEmpty, daysInMonth, trailingEmpty } = getCalendarMonthGrid(year, monthIndex);
+  const yearOptions = buildCalendarYearSelectOptions(maxDate, anchorYear, calendarYearRange);
+  const monthOptions = buildCalendarMonthSelectOptions(year, maxDate);
+  const todayFormatted = formatDate(/* @__PURE__ */ new Date());
+  const selectedSingleYmd = range ? null : inputValue;
+  const rangeStartYmd = rangeStart.trim();
+  const rangeEndYmd = rangeEnd.trim();
   const days = [];
-  const currentDateFormatted = formatDate(/* @__PURE__ */ new Date());
-  const selectedDate = range ? null : inputValue;
-  const handleStopPropagation = (e) => e.stopPropagation();
-  const handleYearChange = (value) => onYearChange(parseInt(value));
-  const handleMonthChange = (value) => onMonthChange(parseInt(value) - 1);
-  for (let i = 0; i < totalDays; i++) {
-    const date = new Date(startDate);
-    date.setDate(startDate.getDate() + i);
+  for (let i = 0; i < leadingEmpty; i++) {
+    days.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8", "aria-hidden": true }, `lead-${i}`));
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    const date = makeLocalDate(year, monthIndex, d);
     const dateFormatted = formatDate(date);
-    const isToday = dateFormatted === currentDateFormatted;
-    const isSelected = dateFormatted === selectedDate;
+    const isToday = dateFormatted === todayFormatted;
+    const isSelected = dateFormatted === selectedSingleYmd;
     const isInRange = isDateInRange(date, range, rangeStart, rangeEnd);
-    const isRangeStart = range && dateFormatted === rangeStart;
-    const isRangeEnd = range && dateFormatted === rangeEnd;
-    const isCurrentMonth = date.getMonth() === month;
-    const rangeStartDate = new Date(rangeStart);
-    rangeStartDate.setDate(rangeStartDate.getDate() - 1);
-    const isDisabled = range && isSelectingEnd && rangeStart && date < rangeStartDate;
+    const isRangeStartFlag = Boolean(range && dateFormatted === rangeStart);
+    const isRangeEndFlag = Boolean(range && dateFormatted === rangeEnd);
+    const isBeforeRangeStart = range && isSelectingEnd && rangeStartYmd.length === 10 && dateFormatted < rangeStartYmd;
+    const isAfterRangeEnd = range && !isSelectingEnd && rangeEndYmd.length === 10 && dateFormatted > rangeEndYmd;
+    const isGreyedForRange = Boolean(isBeforeRangeStart || isAfterRangeEnd);
+    const isPastMax = maxDate ? isCalendarDayAfterMax(date, maxDate) : false;
     days.push(
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
+          type: "button",
           onClick: () => handleDateSelect(date),
-          disabled: isDisabled || false,
-          className: `
-                w-8 h-8 text-sm flex items-center justify-center rounded-2xl transition-colors
-                ${!isCurrentMonth ? "text-gray-300" : ""}
-                ${isToday ? "bg-gray-100 " : ""}
-                ${isInRange && !isToday ? "bg-gray-100/90" : ""}
-                ${isSelected && !isToday ? "bg-neutral-200 text-gray-700" : ""}
-                ${(isRangeStart || isRangeEnd) && !isToday ? "bg-neutral-300 text-gray-700 opacity-100" : ""}
-                ${isDisabled ? "opacity-20 cursor-not-allowed" : "hover:bg-blue-100 cursor-pointer"}
-                `,
-          children: date.getDate()
+          disabled: isGreyedForRange || isPastMax,
+          className: dayCellButtonClass({
+            isToday,
+            isSelected: Boolean(isSelected),
+            isInRange,
+            isRangeStart: isRangeStartFlag,
+            isRangeEnd: isRangeEndFlag,
+            interactiveDisabled: isGreyedForRange || isPastMax
+          }),
+          children: d
         },
-        i
+        d
       )
     );
   }
-  const calendarPositionClass = range && calendarPosition === "end" ? "right-0" : "left-0";
-  const datePositionClass = datePosition === "top" ? "bottom-full mb-1" : "top-full mt-1";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `${datePositionClass} ${calendarPositionClass} bg-white border border-gray-300 rounded-lg shadow-lg p-3 z-50 min-w-[280px]`,
-      onClick: handleStopPropagation,
-      onMouseDown: handleStopPropagation,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: goToPreviousMonth, className: "p-1 hover:bg-gray-100 rounded cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4 text-balck" }) }),
-          editDateSelect ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "flex items-center gap-2",
-              onClick: handleStopPropagation,
-              onMouseDown: handleStopPropagation,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Select2,
-                  {
-                    value: year.toString(),
-                    options: yearOptions,
-                    onChange: handleYearChange,
-                    className: "cursor-pointer",
-                    containerClass: calendarSelectContainerClass
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleStopPropagation, onMouseDown: handleStopPropagation, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Select2,
-                  {
-                    value: (month + 1).toString(),
-                    options: monthOptions,
-                    onChange: handleMonthChange,
-                    className: "cursor-pointer",
-                    containerClass: calendarSelectContainerClass
-                  }
-                ) })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold", children: [
-            year,
-            "\uB144 ",
-            month + 1,
-            "\uC6D4"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: goToNextMonth, className: "p-1 hover:bg-gray-100 rounded cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"].map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm font-medium text-gray-500 py-2 ", children: day }, day)) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: days })
-      ]
-    }
-  );
-}
-
-// src/components/DatePicker/calendar/config/default.ts
-var CALENDAR_PORTAL_Z_INDEX = Z_INDEX.CALENDAR_PORTAL;
-
-// src/components/DatePicker/calendar/config/calendar.ts
-function parseYmdDateString(value) {
-  if (value.length !== 10) return null;
-  return parseLocalYmd(value);
+  for (let i = 0; i < trailingEmpty; i++) {
+    days.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8", "aria-hidden": true }, `trail-${i}`));
+  }
+  const calendarPositionClass = !floating && range && calendarPosition === "end" ? "right-0" : !floating ? "left-0" : "";
+  const datePositionClass = floating ? "" : datePosition === "top" ? "bottom-full mb-1" : "top-full mt-1";
+  const panelClass = floating ? CALENDAR_PANEL_BASE_CLASS : cn(CALENDAR_PANEL_ANCHORED_CLASS, datePositionClass, calendarPositionClass);
+  const handleYearSelectOpenChange = (open) => {
+    onSelectOpenChange?.(open);
+    if (open) scrollOpenYearSelectCheckedIntoView();
+  };
+  const sel = CALENDAR_SELECT_CLASSNAMES;
+  const containerClass = cn(sel.containerClass, calendarSelectContainerClass);
+  const stopBubble = (e) => e.stopPropagation();
+  const isTodaySelectable = canSelectToday({
+    maxDate,
+    range,
+    isSelectingEnd,
+    rangeStart,
+    rangeEnd
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelClass, onClick: stopBubble, onMouseDown: stopBubble, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: goToPreviousMonth,
+          className: "cursor-pointer rounded p-1 hover:bg-gray-100",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
+        }
+      ),
+      editDateSelect ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "presentation",
+          className: "flex items-center gap-2",
+          onClick: stopBubble,
+          onMouseDown: stopBubble,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select2,
+              {
+                value: year.toString(),
+                options: yearOptions,
+                onChange: (value) => onYearChange(Number.parseInt(value, 10)),
+                containerClassName: containerClass,
+                triggerClassName: sel.triggerClassName,
+                contentClassName: cn(YEAR_SELECT_CONTENT_EXTRA_CLASS, sel.contentClassName),
+                disableScrollButtonEvents: true,
+                onOpenChange: handleYearSelectOpenChange
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select2,
+              {
+                value: (monthIndex + 1).toString(),
+                options: monthOptions,
+                onChange: (value) => onMonthChange(Number.parseInt(value, 10) - 1),
+                containerClassName: containerClass,
+                triggerClassName: sel.triggerClassName,
+                contentClassName: sel.contentClassName,
+                onOpenChange: (open) => onSelectOpenChange?.(open)
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold", children: [
+        String(year).padStart(4, "0"),
+        "\uB144 ",
+        monthIndex + 1,
+        "\uC6D4"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: goToNextMonth,
+          disabled: disableNextMonth,
+          className: cn(
+            "rounded p-1",
+            disableNextMonth ? "cursor-not-allowed opacity-30" : "cursor-pointer hover:bg-gray-100"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 grid grid-cols-7 gap-1", children: CALENDAR_WEEKDAY_LABELS.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 text-center text-sm font-medium text-gray-500", children: day }, day)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: days }),
+    range && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-sm text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center", children: isSelectingEnd ? CALENDAR_RANGE_HINT.end : CALENDAR_RANGE_HINT.start }) }),
+    showTodayButton && isTodaySelectable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-3 -mb-3 mt-3 flex items-center justify-center border-t border-gray-200 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleDateSelect(/* @__PURE__ */ new Date()),
+        className: "cursor-pointer text-sm text-gray-800 hover:text-main",
+        children: "Today"
+      }
+    ) })
+  ] });
 }
-
-// src/components/DatePicker/calendar/hooks/useCalendarState.ts
 function useCalendarState(props) {
   const { datePosition = "bottom", disabled = false, calendarRef } = props;
   const [isCalendarOpen, setIsCalendarOpen] = React6.useState(false);
@@ -2205,16 +2372,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,
@@ -2253,11 +2420,15 @@ function useFloatingCalendarPosition(anchorRef, isOpen2, placement, align = "sta
         setStyle({ ...base, top: rect.bottom + CALENDAR_GAP });
       }
     };
+    const handleScroll = (e) => {
+      if (e.target?.closest?.('[data-slot="select-content"]')) return;
+      update();
+    };
     update();
-    window.addEventListener("scroll", update, true);
+    window.addEventListener("scroll", handleScroll, true);
     window.addEventListener("resize", update);
     return () => {
-      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("scroll", handleScroll, true);
       window.removeEventListener("resize", update);
     };
   }, [isOpen2, placement, align, anchorRef]);
@@ -2337,6 +2508,7 @@ function DatePickerRange(props) {
           return;
         }
         onRangeChange?.(formatted, endInputValue);
+        if (isCalendarOpen && calendarPosition === "start") navigateToDateValue(formatted);
       } else if (formatted.length === 0) {
         onRangeChange?.(formatted, endInputValue);
       }
@@ -2350,6 +2522,7 @@ function DatePickerRange(props) {
           return;
         }
         onRangeChange?.(startInputValue, formatted);
+        if (isCalendarOpen && calendarPosition === "end") navigateToDateValue(formatted);
       } else if (formatted.length === 0) {
         onRangeChange?.(startInputValue, formatted);
       }
@@ -2524,6 +2697,7 @@ function DatePickerSingle(props) {
     autoDatePosition,
     containerRef,
     toggleCalendar,
+    navigateToDateValue,
     closeCalendar,
     goToPreviousMonth,
     goToNextMonth,
@@ -2541,7 +2715,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)
@@ -2553,6 +2727,7 @@ function DatePickerSingle(props) {
             return;
           }
           onChange?.(formatted);
+          if (isCalendarOpen) navigateToDateValue(formatted);
         }
       }
     } else {
@@ -3489,9 +3664,10 @@ function ConfirmModal(props) {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 items-center justify-end gap-2", children: [
           !isHideOkButton && /* @__PURE__ */ jsxRuntime.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",
@@ -6565,7 +6741,7 @@ function CascadingSelectFieldInner(props) {
         disabled,
         hasError,
         options: toSelectOptions(primaryOptions),
-        containerClass: firstSelectClass.containerClassName,
+        containerClassName: firstSelectClass.containerClassName,
         triggerClassName: firstSelectClass.triggerClassName,
         canReset: true,
         onChange: (nextPrimary) => {
@@ -6582,7 +6758,7 @@ function CascadingSelectFieldInner(props) {
         disabled: disabled || !primary || secondaryOptions.length === 0,
         hasError,
         options: toSelectOptions(secondaryOptions),
-        containerClass: secondSelectClass.containerClassName,
+        containerClassName: secondSelectClass.containerClassName,
         triggerClassName: secondSelectClass.triggerClassName,
         canReset: true,
         onChange: (nextSecondary) => {
@@ -6626,7 +6802,8 @@ function DateField(props) {
     readOnly = false,
     className = "w-40",
     datePosition = "bottom",
-    disableFutureDates = false
+    disableFutureDates = false,
+    calendarSelectContainerClass = "w-20"
   } = config;
   const maxDate = disableFutureDates ? formatDate(/* @__PURE__ */ new Date()) : void 0;
   if (readOnly) {
@@ -6643,7 +6820,8 @@ function DateField(props) {
       className: "w-full",
       validation: hasError,
       datePosition,
-      maxDate
+      maxDate,
+      calendarSelectContainerClass
     }
   ) });
 }
@@ -6833,7 +7011,9 @@ function RadioField(props) {
       containerClassName: cn2("justify-start", fieldControlWrapClass(className)),
       options: options.map((option) => ({
         label: option.label,
-        value: String(option.value)
+        value: String(option.value),
+        disabled: option.disabled,
+        disabledMessage: option.disabledMessage
       }))
     }
   );
@@ -6871,7 +7051,7 @@ function SelectField(props) {
       disabled,
       hasError,
       options: selectOptions,
-      containerClass: "flex w-full min-w-0 max-w-full items-center",
+      containerClassName: "flex w-full min-w-0 max-w-full items-center",
       className: "w-full min-w-0",
       triggerClassName: cn2(
         "h-8 w-full min-w-0 max-w-full rounded border bg-white px-2 py-1 text-sm shadow-none",
@@ -6983,11 +7163,12 @@ function SelectWithInputField(props) {
         disabled,
         hasError,
         options: toSelectOptions(options),
-        containerClass: selectClass.containerClassName,
+        containerClassName: selectClass.containerClassName,
         triggerClassName: selectClass.triggerClassName,
         onChange: (nextPrefix) => {
           setSelectedPrefix(nextPrefix);
           updateCombined(nextPrefix, inputPart);
+          onBlur();
         }
       }
     ),
@@ -7122,7 +7303,7 @@ function useBlurValidation(name, options) {
     (value, fieldOnChange) => {
       markHadValueIfFilled(value);
       fieldOnChange(value);
-      if (options.revalidateOnChange || shouldValidateEmptyOnChange(value)) {
+      if (options.revalidateOnChange || options.validateEmptyOnChange && shouldValidateEmptyOnChange(value)) {
         void trigger(name);
       }
       void triggerRelatedFields();
@@ -7130,6 +7311,7 @@ function useBlurValidation(name, options) {
     [
       markHadValueIfFilled,
       options.revalidateOnChange,
+      options.validateEmptyOnChange,
       shouldValidateEmptyOnChange,
       trigger,
       name,
@@ -7150,9 +7332,7 @@ var REVALIDATE_ON_CHANGE_TYPES = /* @__PURE__ */ new Set([
   "radio",
   "switch",
   "select",
-  "date",
   "cascading-select",
-  "select-with-input",
   "input-with-button",
   "address"
 ]);
@@ -7173,14 +7353,15 @@ function FormFieldRow(props) {
   const { control } = reactHookForm.useFormContext();
   const { isSubmitted } = reactHookForm.useFormState({ control });
   const { name, label, type = "input", required = false, renderCustomField, contentAlign = "left" } = config;
+  const revalidateOnChange = REVALIDATE_ON_CHANGE_TYPES.has(type);
   const { handleBlur, handleChange } = useBlurValidation(name, {
     required,
-    revalidateOnChange: REVALIDATE_ON_CHANGE_TYPES.has(type),
+    revalidateOnChange,
+    validateEmptyOnChange: revalidateOnChange,
     revalidateFields: config.revalidateFields
   });
   const showError = Boolean(fieldState.error?.message) && (isSubmitted || fieldState.isTouched);
   const isTextarea = type === "textarea";
-  const revalidateOnChange = REVALIDATE_ON_CHANGE_TYPES.has(type);
   const wrappedField = wrapFieldHandlers(field, {
     onBlur: () => handleBlur(() => field.onBlur()),
     onChange: (value) => {
@@ -7285,6 +7466,7 @@ function rowPropsToFieldConfig(props) {
     canReset,
     datePosition,
     disableFutureDates,
+    calendarSelectContainerClass,
     revalidateFields,
     renderCustomField,
     colspan,
@@ -7315,6 +7497,7 @@ function rowPropsToFieldConfig(props) {
     canReset,
     datePosition,
     disableFutureDates,
+    calendarSelectContainerClass,
     revalidateFields,
     renderCustomField,
     colspan,
@@ -7479,7 +7662,10 @@ function PageFilter(props) {
           {
             placeholder: option.placeholder,
             value: currentValue,
-            onChange: handleInputChange(optionKey)
+            onChange: handleInputChange(optionKey),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSubmit();
+            }
           }
         ) }, String(optionKey));
       case "select":
@@ -7489,7 +7675,8 @@ function PageFilter(props) {
             value: currentValue,
             onChange: handleSelectChange(optionKey),
             options: option.options,
-            placeholder: "\uC120\uD0DD\uD574\uC8FC\uC138\uC694"
+            placeholder: "\uC120\uD0DD",
+            containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
       case "radio":
@@ -7554,9 +7741,84 @@ function PageFilter(props) {
     }
   );
 }
+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: "hover:bg-gray-300/60",
+    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: "hover:bg-gray-600/60",
+    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-gray-200 hover:border-gray-300",
+    activeText: "font-semibold text-slate-800",
+    inactiveText: "font-medium",
+    indicator: "bg-[#2b2b2b]",
+    closeBtn: "hover:bg-gray-300",
+    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: "hover:bg-slate-600/60",
+    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 = React6.useRef(null);
   const tabRefs = React6.useRef(/* @__PURE__ */ new Map());
   const [showLeftFade, setShowLeftFade] = React6.useState(false);
@@ -7609,13 +7871,23 @@ function MultiTabBar(props) {
   const handleStopDrag = () => {
     isDragging.current = false;
   };
+  React6.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__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-full overflow-hidden bg-white border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-stretch", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 w-full overflow-hidden ${s.container}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-stretch", children: [
     showLeftFade && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -7624,7 +7896,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)
         }
       }
     ),
@@ -7632,7 +7904,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,
@@ -7653,17 +7925,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__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 h-0.5 rounded-t-md bg-blue-500" }),
+                isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: `absolute top-0 left-0 right-0 h-0.5 ${s.rounded} ${s.indicator}`,
+                    style: primaryColor ? { backgroundColor: primaryColor } : void 0
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.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
                   }
                 ),
@@ -7676,7 +7954,8 @@ function MultiTabBar(props) {
                     },
                     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
+                      rounded 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 })
@@ -7692,14 +7971,14 @@ function MultiTabBar(props) {
     onTabAdd && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 13, strokeWidth: 2 })
           }
         )
@@ -8484,19 +8763,212 @@ function FileUploader(props) {
     /* @__PURE__ */ jsxRuntime.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: {}
+  },
+  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: {}
+  },
+  "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" }
+  },
+  "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"
+    }
+  }
+};
+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 = reactRouter.useNavigate();
-  const { isOpen: isOpen2, onClose, menuSections, header, className, showCollapseButton = false } = props;
+  const {
+    onClose,
+    menuSections,
+    header,
+    className,
+    showCollapseButton = false,
+    variant = "light",
+    primaryColor
+  } = props;
   const { pathname } = reactRouter.useLocation();
   const [isCollapsed, setIsCollapsed] = React6.useState(false);
-  const [isContentVisible, setIsContentVisible] = React6.useState(true);
   const [expandedItems, setExpandedItems] = React6.useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = React6.useState(/* @__PURE__ */ new Set());
-  React6.useEffect(() => {
-    if (isCollapsed) return;
-    const timer = setTimeout(() => setIsContentVisible(true), 300);
-    return () => clearTimeout(timer);
-  }, [isCollapsed]);
+  const s = VARIANT_STYLES2[variant];
+  const applier = ACCENT_APPLIERS[variant];
   React6.useEffect(() => {
     menuSections.forEach((section) => {
       section.items.forEach((item) => {
@@ -8547,167 +9019,178 @@ function Sidebar(props) {
       window.open(path, "_blank", "noopener,noreferrer");
     } else if (path !== "") {
       navigate(path);
-      onClose();
+      onClose?.();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isOpen2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/10 bg-opacity-50 z-40 lg:hidden", onClick: onClose }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: "var(--color-sub-darkgray)" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: "var(--color-sub-darkgray)" })
-            }
-          ),
-          isContentVisible && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-6 pl-6 pr-4", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-10 mt-2", children: header }),
-            /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-6", children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              section.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-gray-500 tracking-wider mb-3", children: section.title }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(item.icon, { className: "w-4 h-4 flex-shrink-0" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
-                      item.children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
-                        }
-                      ),
-                      item.path?.includes("https") && /* @__PURE__ */ jsxRuntime.jsx(
-                        "svg",
-                        {
-                          className: "w-4 h-4 flex-shrink-0 text-gray-400",
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "path",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      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
+          ${s.aside}
+          ${className ?? ""}
+        `,
+      children: [
+        showCollapseButton && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
+          }
+        ),
+        /* @__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"}`,
+            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: [
+                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;
+                  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(item.icon, { className: s.iconClass }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
+                          item.children && /* @__PURE__ */ jsxRuntime.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 transition-transform ${expandedItems.has(item.label) ? "rotate-90" : ""}`,
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                            }
+                          ),
+                          item.path?.includes("https") && /* @__PURE__ */ jsxRuntime.jsx(
+                            "svg",
+                            {
+                              className: "w-4 h-4 flex-shrink-0 opacity-50",
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: child.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "svg",
-                              {
-                                className: `w-3 h-3 transition-transform ${isSubExpanded ? "rotate-90" : ""}`,
-                                fill: "none",
-                                stroke: "currentColor",
-                                viewBox: "0 0 24 24",
-                                children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  "path",
+                        ]
+                      }
+                    ),
+                    item.children && expandedItems.has(item.label) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+                          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: child.label }),
+                                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                      "path",
+                                      {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M9 5l7 7-7 7"
+                                      }
+                                    )
                                   }
                                 )
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      isSubExpanded && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                              ]
+                            }
+                          ),
+                          isSubExpanded && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function useDetailController(params = {}) {
   const { mode: controlledMode, onModeChange } = params;
@@ -9004,10 +9487,7 @@ function DetailModalFrame(props) {
   const isEditMode = controller.mode === "edit";
   const canEdit = Boolean(editSchema && (editFields || renderEditBody));
   return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { isOpen: open, onClose: handleClose, contentClassName: cn("max-w-2xl", contentClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { className: "flex flex-row items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900", children: title }),
-      !isEditMode && canEdit && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: handleEdit, children: "\uC218\uC815" })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(ModalBody, { className: "flex-1 min-h-0 overflow-hidden p-0 flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
         DetailContent,
@@ -9027,8 +9507,9 @@ function DetailModalFrame(props) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { className: "flex justify-end gap-2", 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: controller.isSaving ? "\uC800\uC7A5 \uC911..." : "\uC800\uC7A5" })
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      canEdit && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleEdit, children: "\uC218\uC815" }),
       renderFooterExtra,
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleClose, children: "\uB2EB\uAE30" })
     ] }) })