@ncds/ui-admin 1.5.1 → 1.5.3

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -17,10 +17,11 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** biome-ignore-all lint/correctness/noUnusedVariables: <explanation> */
 import classNames from 'classnames';
 import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
-import { forwardRef, useId, useMemo } from 'react';
+import { forwardRef, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
 import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
 import { CustomInput } from './CustomInput';
@@ -38,17 +39,117 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     datePickerOptions = _a.datePickerOptions,
     _d = _a.isEndDate,
     isEndDate = _d === void 0 ? false : _d,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate"]);
-  var onChangeDateHandler = function (dateTimeStamp, dateStr) {
+    onValidationError = _a.onValidationError,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError"]);
+  var flatpickrInstanceRef = useRef(null);
+  var dateFormatRef = useRef('Y-m-d');
+  var minMaxDateRef = useRef({});
+  var checkDateViolations = function (date, minDate, maxDate) {
+    var violations = [];
+    var inputDate = moment(date);
+    if (!inputDate.isValid()) return violations;
+    if (minDate) {
+      var min = moment(minDate);
+      if (min.isValid() && inputDate.isBefore(min, 'day')) {
+        violations.push('minDate');
+      }
+    }
+    if (maxDate) {
+      var max = moment(maxDate);
+      if (max.isValid() && inputDate.isAfter(max, 'day')) {
+        violations.push('maxDate');
+      }
+    }
+    return violations;
+  };
+  var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
+    var _a;
+    if (!dateTimeStamp || dateTimeStamp.length === 0) {
+      restorePreviousDate(instance.input, instance);
+      return;
+    }
+    var selectedDate = dateTimeStamp[0];
+    if (!selectedDate || !(selectedDate instanceof Date) || isNaN(selectedDate.getTime())) {
+      // 유효하지 않은 날짜 - 이전 값으로 복원하거나 빈 값으로 처리
+      var previousDate = instance === null || instance === void 0 ? void 0 : instance._previousDateBeforeInput;
+      if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
+        // 이전 값이 있으면 이전 값으로 복원
+        instance.selectedDates = [previousDate];
+        instance.setDate(previousDate, false);
+      } else {
+        // 이전 값이 없으면 빈 값으로 처리
+        restorePreviousDate(instance.input, instance);
+      }
+      return;
+    }
+    var minDate = options.minDate,
+      maxDate = options.maxDate;
+    var violations = checkDateViolations(selectedDate, minDate, maxDate);
+    if (violations.length > 0) {
+      var prevDate = (_a = instance === null || instance === void 0 ? void 0 : instance.selectedDates) === null || _a === void 0 ? void 0 : _a[0];
+      if (onValidationError) {
+        onValidationError({
+          date: selectedDate,
+          minDate: minDate,
+          maxDate: maxDate,
+          violations: violations,
+          previousDate: prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined
+        });
+        return; // onValidationError가 있으면 날짜 변경 안 함
+      }
+      // onValidationError가 없으면 범위를 벗어난 날짜도 허용 (계속 진행)
+    }
+    // 유효한 날짜인 경우 이전 날짜로 저장
+    instance._previousDateBeforeInput = selectedDate;
     var formattedDate = formatDateInput(dateStr);
     isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
   };
+  var restorePreviousDate = function (target, instance) {
+    if (instance.selectedDates.length > 0) {
+      var prevDate = instance.selectedDates[0];
+      if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
+        var momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
+        target.value = moment(prevDate).format(momentFormat);
+        instance.setDate(prevDate, false);
+        return;
+      }
+    }
+    target.value = '';
+    instance.setDate('', false);
+  };
   var onInputHandler = function (e) {
     var target = e.target;
     var input = target.value;
+    var instance = flatpickrInstanceRef.current;
+    if (!instance) return;
+    if (!input || input.trim() === '') {
+      return;
+    }
+    // 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
+    if (!/[0-9]/.test(input)) {
+      restorePreviousDate(target, instance);
+      return;
+    }
     var formattedInput = formatDateInput(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
+    if (formattedInput !== input) {
+      target.value = formattedInput;
+      return;
+    }
+    if (formattedInput && formattedInput.length >= 10) {
+      var parsedDate = moment(formattedInput);
+      if (!parsedDate.isValid()) {
+        restorePreviousDate(target, instance);
+        return;
+      }
+      var parsedDateObj = parsedDate.toDate();
+      var violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
+      if (violations.length > 0) {
+        // onInputHandler에서는 onValidationError를 호출하지 않음
+        // validation은 onChangeDateHandler에서만 처리
+        // onValidationError가 없으면 아무것도 하지 않음 (범위를 벗어난 날짜도 허용)
+        return;
+      }
+    }
   };
   var onHourInputHandler = function (e) {
     var target = e.target;
@@ -72,13 +173,50 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     dateFormat: 'Y-m-d',
     clickOpens: true,
     time_24hr: true,
+    formatDate: function (date, format, locale) {
+      try {
+        // 유효한 날짜인지 확인
+        if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+          return '';
+        }
+        // moment로 포맷팅
+        var momentDate = moment(date);
+        if (!momentDate.isValid()) {
+          return '';
+        }
+        // format을 moment 형식으로 변환
+        var momentFormat = format.replace(/Y/g, 'YYYY').replace(/y/g, 'YY').replace(/m/g, 'MM').replace(/d/g, 'DD').replace(/H/g, 'HH').replace(/i/g, 'mm').replace(/S/g, 'ss');
+        return momentDate.format(momentFormat);
+      } catch (error) {
+        // 오류 발생 시 빈 문자열 반환 (232-23 같은 잘못된 날짜 처리)
+        return '';
+      }
+    },
     onChange: onChangeDateHandler,
     allowInvalidPreload: true,
     onReady: function (selectedDates, dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
+      flatpickrInstanceRef.current = instance;
+      dateFormatRef.current = (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.dateFormat) || options.dateFormat || 'Y-m-d';
+      minMaxDateRef.current = {
+        minDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.minDate) || options.minDate,
+        maxDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.maxDate) || options.maxDate
+      };
+      // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
+      var onBlurHandler = function (e) {
+        if (instance && instance.selectedDates.length > 0) {
+          // 이전 날짜를 별도로 저장 (onChange에서 사용)
+          instance._previousDateBeforeInput = instance.selectedDates[0];
+        }
+      };
       input.addEventListener('input', onInputHandler);
+      input.addEventListener('blur', onBlurHandler);
+      // 초기 날짜가 있으면 저장
+      if (instance.selectedDates.length > 0) {
+        instance._previousDateBeforeInput = instance.selectedDates[0];
+      }
       var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
       if (!timeInputWrapper) return;
       var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
@@ -100,13 +238,20 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       };
       document.addEventListener('mousedown', handleMouseDown, true);
       instance._handleMouseDown = handleMouseDown;
+      instance._onBlurHandler = onBlurHandler;
     },
     onDestroy: function (selectedDates, dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
+      flatpickrInstanceRef.current = null;
       // 메인 input 이벤트 리스너 제거
       input.removeEventListener('input', onInputHandler);
+      // blur 이벤트 리스너 제거
+      var onBlurHandler = instance === null || instance === void 0 ? void 0 : instance._onBlurHandler;
+      if (onBlurHandler) {
+        input.removeEventListener('blur', onBlurHandler);
+      }
       var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
       if (!timeInputWrapper) return;
       // 시간 input 이벤트 리스너 제거
@@ -159,7 +304,17 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
         var defaultValue = _a.defaultValue,
           value = _a.value,
           props = __rest(_a, ["defaultValue", "value"]);
-        return _jsx(CustomInput, __assign({}, props, {
+        // input에 반영 되면 안되는 attribute 제외
+        var _b = props,
+          allowInput = _b.allowInput,
+          dateFormat = _b.dateFormat,
+          minDate = _b.minDate,
+          maxDate = _b.maxDate,
+          enableTime = _b.enableTime,
+          enableSeconds = _b.enableSeconds,
+          noCalendar = _b.noCalendar,
+          inputProps = __rest(_b, ["allowInput", "dateFormat", "minDate", "maxDate", "enableTime", "enableSeconds", "noCalendar"]);
+        return _jsx(CustomInput, __assign({}, inputProps, {
           id: inputId,
           iconSize: size,
           disabled: !!attrs.disabled,

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -25,9 +25,11 @@ export var RangeDatePickerWithButtons = function (_a) {
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
     periodKeys = _a.periodKeys,
+    periodItems = _a.periodItems,
     onDateValidation = _a.onDateValidation;
+  var items = periodItems !== null && periodItems !== void 0 ? periodItems : PERIOD_ITEM;
   var setCalculatedDate = function () {
-    var currentPeriodItem = PERIOD_ITEM[currentButtonId];
+    var currentPeriodItem = items[currentButtonId];
     if (!currentPeriodItem) {
       return;
     }
@@ -65,7 +67,7 @@ export var RangeDatePickerWithButtons = function (_a) {
       children: periodKeys.map(function (key) {
         return _jsx(ButtonGroup.Item, {
           isCurrent: currentButtonId === key,
-          label: PERIOD_ITEM[key].text,
+          label: items[key].text,
           onClick: function () {
             return setCurrentButtonId(key);
           }

package/dist/esm/src/components/image-file-input/ImageFileInput.js

@@ -26,13 +26,13 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import classNames from 'classnames';
 import Icon from '@ncds/ui-admin-icon/dynamic';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '../button';
 import { HintText, Label } from '../shared';
-import { ImagePreview } from './components/ImagePreview';
 import { Tooltip } from '../tooltip';
+import { ImagePreview } from './components/ImagePreview';
 export var ImageFileInputErrorType;
 (function (ImageFileInputErrorType) {
   ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
@@ -182,7 +182,9 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         children: [_jsx(Button, {
           onlyIcon: true,
           size: size,
-          className: "ncua-image-file-input__preview-container",
+          className: classNames('ncua-image-file-input__preview-container', {
+            destructive: destructive
+          }),
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel

package/dist/esm/src/components/input/PasswordInput.js

@@ -20,7 +20,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useState } from 'react';
-import { useCallbackRef, useMergeRefs } from '../../hooks';
 import { InputBase } from './InputBase';
 var svgSize = {
   xs: 14,
@@ -33,37 +32,23 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _c = useState(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
-  var _d = useState(false),
-    hasContent = _d[0],
-    setHasContent = _d[1];
-  var callbackRef = useCallbackRef(function (node) {
-    if (node) {
-      setHasContent(!!node.value);
-      var handleInput_1 = function () {
-        setHasContent(!!node.value);
-      };
-      node.addEventListener('input', handleInput_1);
-      return function () {
-        node.removeEventListener('input', handleInput_1);
-      };
-    }
-  });
-  var mergedRef = useMergeRefs([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
   };
   var handleVisibilityChange = function () {
-    setIsVisible(!isVisible);
+    setIsVisible(function (prev) {
+      return !prev;
+    });
   };
   return _jsx(InputBase, __assign({
-    ref: mergedRef,
+    ref: ref,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
       icon: 'lock-01',
-      color: hasContent ? 'gray600' : 'gray300'
+      color: props.value ? 'gray600' : 'gray300'
     },
     trailingElement: {
       type: 'custom',

package/dist/esm/src/components/pagination/Pagination.js

@@ -39,8 +39,8 @@ export var Pagination = function (_a) {
   var _f = useState(1),
     start = _f[0],
     setStart = _f[1];
-  var noPrev = start === 1;
-  var noNext = start + pageCount - 1 >= totalPage;
+  var noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+  var noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
   var showJumpPageButton = totalPage > pageCount;
   var handleClickButton = function (pageNum) {
     if (isFunction(onPageChange)) {
@@ -62,7 +62,7 @@ export var Pagination = function (_a) {
       setStart(1);
     }
     if (currentPage === totalPage) {
-      var lastGroupStart = Math.max(1, totalPage - pageCount + 1);
+      var lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
       setStart(lastGroupStart);
     }
   }, [currentPage]);
@@ -85,7 +85,7 @@ export var Pagination = function (_a) {
           noPrev: noPrev,
           noNext: noNext,
           onClick: function () {
-            return handleClickButton(Math.max(start - pageCount, 1));
+            return breakPoint === 'mo' ? handleClickButton(Math.max(currentPage - 1, 1)) : handleClickButton(Math.max(start - pageCount, 1));
           }
         })]
       }), _jsx("ul", __assign({
@@ -122,7 +122,7 @@ export var Pagination = function (_a) {
           noPrev: noPrev,
           noNext: noNext,
           onClick: function () {
-            return handleClickButton(Math.min(start + pageCount, totalPage));
+            return breakPoint === 'mo' ? handleClickButton(Math.min(currentPage + 1, totalPage)) : handleClickButton(Math.min(start + pageCount, totalPage));
           }
         }), NavButton({
           type: 'last',

package/dist/esm/src/components/tab/HorizontalTab.js

@@ -32,7 +32,7 @@ export var HorizontalTab = function (_a) {
   };
   if (!menus.length) return _jsx(_Fragment, {});
   return _jsx("div", __assign({
-    className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), {
+    className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
       'ncua-horizontal-tab--fullWidth': fullWidth
     })
   }, {

package/dist/types/assets/scripts/datePicker.d.ts

@@ -1,10 +1,19 @@
 import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
 export type DatePickerSize = 'xs' | 'sm';
+export interface ValidationError {
+    index: number;
+    date: string | Date;
+    minDate?: string | Date;
+    maxDate?: string | Date;
+    violations: Array<'minDate' | 'maxDate'>;
+    previousDate?: string | Date;
+}
 interface Options {
     buttons?: DatePickerButton[];
     size: DatePickerSize;
     autoComplete?: 'on' | 'off';
     datePickerOptions: DatePickerOptionWrapper[];
+    onValidationError?: (error: ValidationError) => void;
 }
 interface DatePickerOptionWrapper {
     element: string;
@@ -31,6 +40,7 @@ export declare class DatePicker {
     private flatpickrInstances;
     private currentButton;
     private dateFormat;
+    private onValidationError?;
     constructor(wrapper: HTMLElement, options: Options);
     private validateWrapper;
     private init;
@@ -41,11 +51,35 @@ export declare class DatePicker {
     private reRenderButtonGroup;
     private initDatePicker;
     private initializeFlatpickr;
+    private createBlurHandler;
+    private setupFlatpickrLocale;
+    private createInputHandler;
+    private findFlatpickrInstanceByInput;
+    private clearInputValue;
+    private restorePreviousDate;
+    private createHourInputHandler;
+    private createMinuteInputHandler;
+    private createMouseDownHandler;
+    private createOnChangeHandler;
+    private invokeOriginalOnChange;
+    private isValidDate;
+    private validateAndRestoreIfNeeded;
+    private findFlatpickrInstanceIndexByInput;
+    private restoreDateToInstance;
+    private createOnReadyHandler;
+    private createOnDestroyHandler;
+    private convertDateOption;
+    private validateDate;
+    private checkDateViolations;
+    setDate(dates: string[]): void;
+    private formatDateForOption;
+    private parseDateWithMultipleFormats;
+    private formatMomentDate;
+    private calculatePeriod;
     private updateDateWithButton;
     private setMultipleDates;
     private updateButtonsByPeriod;
     private calculateDatesFromButton;
-    setDate(dates: string[]): void;
     private convertFlatpickrFormatToMoment;
     getDates(): string[];
 }

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -164,7 +164,7 @@ export declare const ButtonGroup: {
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
@@ -214,6 +214,8 @@ export declare const ButtonGroup: {
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -10,6 +10,13 @@ export type DatePickerProps = {
     placeholder?: string;
     isEndDate?: boolean;
     onChangeDate: (date: string) => void;
+    onValidationError?: (error: {
+        date: Date;
+        minDate?: any;
+        maxDate?: any;
+        violations: Array<'minDate' | 'maxDate'>;
+        previousDate?: Date;
+    }) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
 export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts

@@ -1,14 +1,71 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import { PERIOD_ITEM } from '../../constant/date-picker';
+import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
 import { type RangeDatePickerProps } from './RangeDatePicker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
-type RangeDatePickerWithButtonsProps = {
+type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
     useYesterdayAsEndDate?: boolean;
-    currentButtonId: PeriodKeyType;
-    setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
-    periodKeys: PeriodKeyType[];
+    currentButtonId: keyof T & string;
+    setCurrentButtonId: Dispatch<SetStateAction<keyof T & string>>;
+    periodKeys: (keyof T & string)[];
+    periodItems?: T;
     size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+}>({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }: RangeDatePickerWithButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

package/dist/types/src/constant/date-picker.d.ts

@@ -1,3 +1,9 @@
+export type PeriodItem = {
+    text: string;
+    period: number;
+    unit: string | null;
+};
+export type PeriodItemMap = Record<string, PeriodItem>;
 export declare const PERIOD_ITEM: {
     TODAY: {
         text: string;

package/dist/ui-admin/assets/styles/style.css

@@ -4157,6 +4157,10 @@ button {
   background-color: var(--gray-500);
   border-color: var(--gray-500);
 }
+.ncua-date-picker .flatpickr-day.selected.nextMonthDay, .ncua-date-picker .flatpickr-day.selected.prevMonthDay {
+  background-color: var(--gray-500);
+  border-color: var(--gray-500);
+}
 .ncua-date-picker .flatpickr-day.selected:hover {
   border-color: var(--gray-700);
   background-color: var(--gray-700);
@@ -5322,6 +5326,10 @@ button {
 .ncua-image-file-input__preview-container[disabled], .ncua-image-file-input__preview-container.is-disable, .ncua-image-file-input__preview-container.ncua-btn:hover {
   border: 1px dashed var(--gray-200);
 }
+.ncua-image-file-input__preview-container.destructive {
+  background-color: var(--primary-red-100);
+  border: 1px solid var(--primary-red-600);
+}
 .ncua-image-file-input__preview-remove-button {
   position: absolute;
   top: 50%;
@@ -6322,7 +6330,7 @@ span.flatpickr-weekday {
   }
 }
 /**
- * Swiper 11.2.10
+ * Swiper 11.2.6
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -6330,7 +6338,7 @@ span.flatpickr-weekday {
  *
  * Released under the MIT License
  *
- * Released on: June 28, 2025
+ * Released on: March 19, 2025
  */
 /* FONT_START */
 @font-face {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",