@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/temp/src/components/combobox/ComboBox.js

@@ -0,0 +1,199 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useDropdown } from '../../hooks/dropdown';
+import { useMultiSelect } from '../../utils/dropdown/multiSelect';
+import { Button } from '../button';
+import { InputBase } from '../input/InputBase';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+var defaultMaxHeight = 275;
+var toggleMultiSelectValue = function (currentValue, optionId) {
+    var currentValues = Array.isArray(currentValue) ? currentValue : [];
+    if (currentValues.includes(optionId)) {
+        return currentValues.filter(function (v) { return v !== optionId; });
+    }
+    return __spreadArray(__spreadArray([], currentValues, true), [optionId], false);
+};
+var notifyFormChange = function (register, multiple, newValue) {
+    if (register === null || register === void 0 ? void 0 : register.onChange) {
+        register.onChange({
+            target: {
+                value: multiple ? JSON.stringify(newValue) : newValue,
+                name: register.name,
+            },
+        });
+    }
+};
+var ComboBox = forwardRef(function (_a, ref) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? '검색하세요' : _b, id = _a.id, className = _a.className, hintText = _a.hintText, children = _a.children, _c = _a.size, size = _c === void 0 ? 'xs' : _c, _d = _a.destructive, destructive = _d === void 0 ? false : _d, value = _a.value, _e = _a.optionItems, optionItems = _e === void 0 ? [] : _e, onChange = _a.onChange, onSearch = _a.onSearch, _f = _a.disabled, disabled = _f === void 0 ? false : _f, register = _a.register, _g = _a.maxHeight, maxHeight = _g === void 0 ? defaultMaxHeight : _g, _h = _a.searchValue, searchValue = _h === void 0 ? '' : _h, label = _a.label, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.multiple, multiple = _k === void 0 ? false : _k, _l = _a.showFooterButtons, showFooterButtons = _l === void 0 ? false : _l, onEdit = _a.onEdit, props = __rest(_a, ["placeholder", "id", "className", "hintText", "children", "size", "destructive", "value", "optionItems", "onChange", "onSearch", "disabled", "register", "maxHeight", "searchValue", "label", "required", "multiple", "showFooterButtons", "onEdit"]);
+    var internalRef = useRef(null);
+    var dropdownRef = useRef(null);
+    var inputRef = useRef(null);
+    var _m = useState(searchValue), inputValue = _m[0], setInputValue = _m[1];
+    var _o = useState(false), showAllItems = _o[0], setShowAllItems = _o[1];
+    var _p = useState([]), selectedTags = _p[0], setSelectedTags = _p[1];
+    var handleOptionSelect = function (option) {
+        if (disabled)
+            return;
+        if (multiple) {
+            var newValue_1 = toggleMultiSelectValue(value !== null && value !== void 0 ? value : [], option.id);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue_1);
+            notifyFormChange(register, multiple, newValue_1);
+            return;
+        }
+        var newValue = option.id;
+        var tag = { id: option.id, label: option.label };
+        setSelectedTags([tag]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        notifyFormChange(register, multiple, newValue);
+    };
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        setInputValue(newValue);
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(newValue);
+        setShowAllItems(false);
+        if (!isOpen && !disabled) {
+            toggleDropdown();
+        }
+    };
+    var handleInputClick = function () {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (inputValue) {
+            toggleDropdown();
+        }
+    };
+    // useDropdown 훅 사용
+    var _q = useDropdown({
+        triggerRef: internalRef,
+        dropdownRef: dropdownRef,
+        maxHeight: maxHeight,
+        itemCount: optionItems.length,
+        optionItems: optionItems,
+        disabled: disabled,
+        multiple: multiple,
+        onSelect: handleOptionSelect,
+    }), isOpen = _q.isOpen, dropdownDirection = _q.direction, focusedIndex = _q.focusedIndex, toggleDropdown = _q.toggleDropdown, dropdownClose = _q.closeDropdown, dropdownHandleKeyDown = _q.handleKeyDown, handleDropdownSelect = _q.handleOptionSelect, handleMouseMove = _q.handleMouseMove, isKeyboardNavigation = _q.isKeyboardNavigation;
+    var showAllItem = function () {
+        var _a;
+        if (disabled)
+            return;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setInputValue('');
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+        setShowAllItems(true);
+        if (!isOpen) {
+            toggleDropdown();
+        }
+    };
+    var closeDropdown = function () {
+        setShowAllItems(false);
+        dropdownClose();
+    };
+    // 키보드 이벤트 처리는 useDropdown 훅에서 처리됨
+    var handleKeyDown = function (e) {
+        // input 전용 키보드 이벤트 처리
+        if (e.key === 'Escape' && isOpen) {
+            closeDropdown();
+            e.preventDefault();
+            return;
+        }
+        // 나머지는 useDropdown 훅에서 처리
+        dropdownHandleKeyDown(e);
+    };
+    useImperativeHandle(ref, function () { return internalRef.current; }, []);
+    var trailingElement = {
+        type: 'custom',
+        children: (_jsx("div", __assign({ className: "ncua-input__icon-wrap ncua-input__right-icon", onClick: showAllItem }, { children: _jsx(Button, { label: "\uC804\uCCB4", hierarchy: "text", size: "xxs", leadingIcon: { type: 'icon', icon: ChevronSelectorVertical } }) }))),
+    };
+    var leadingElement = {
+        type: 'icon',
+        icon: SearchLg,
+        size: 14,
+        color: 'gray300',
+    };
+    var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+    var _r = useMultiSelect(currentSelectedValues, optionItems), selectAllButtonText = _r.buttonText, toggleSelectAll = _r.toggleSelectAll, getSelectedTagsData = _r.getSelectedTagsData, removeTag = _r.removeTag;
+    var handleSelectAll = function () {
+        if (!multiple || !onChange)
+            return;
+        var newSelectedValues = toggleSelectAll();
+        onChange(newSelectedValues);
+    };
+    var handleEdit = function () {
+        onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+    };
+    var handleComplete = function () {
+        if (!multiple)
+            return;
+        var tags = getSelectedTagsData();
+        setSelectedTags(tags);
+        setInputValue('');
+        closeDropdown();
+    };
+    var handleRemoveTag = function (tagId) {
+        if (!onChange)
+            return;
+        if (multiple) {
+            var newSelectedValues = removeTag(tagId);
+            onChange(newSelectedValues);
+            setSelectedTags(function (prev) { return prev.filter(function (tag) { return tag.id !== tagId; }); });
+            return;
+        }
+        onChange('');
+        setSelectedTags([]);
+    };
+    var comboboxId = "combobox-options-".concat(id || 'default');
+    var hasVisibleOptions = showAllItems || inputValue;
+    var displayedOptions = hasVisibleOptions ? optionItems : [];
+    var showNoResults = !hasVisibleOptions || optionItems.length === 0;
+    var showFooter = multiple || showFooterButtons;
+    var hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
+    var hasTags = selectedTags.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ ref: internalRef, className: classNames('ncua-combobox', "ncua-combobox--".concat(size), {
+                    'ncua-combobox--open': isOpen,
+                    'ncua-combobox--disabled': disabled,
+                    destructive: destructive,
+                }, className) }, props, { children: [_jsxs("div", __assign({ className: "ncua-combobox__content" }, { children: [_jsx(InputBase, { ref: inputRef, size: size, label: label, required: required, placeholder: placeholder, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onClick: handleInputClick, disabled: disabled, destructive: destructive, leadingElement: leadingElement, trailingElement: trailingElement, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": comboboxId, "aria-disabled": disabled, autoComplete: "off", clearText: !!inputValue, onClearText: function () {
+                                    setInputValue('');
+                                    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+                                } }), _jsxs(SelectDropdown, __assign({ ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: displayedOptions, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: comboboxId, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, isKeyboardNavigation: isKeyboardNavigation, multiple: multiple, showFooterButtons: showFooter, selectAllButtonText: selectAllButtonText, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, componentType: "combobox" }, { children: [showNoResults ? _jsx("li", __assign({ className: "ncua-select-dropdown__no-results" }, { children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })) : null, children] }))] })), register && _jsx("input", __assign({ type: "hidden" }, register, { value: hiddenInputValue })), hintText && _jsx(HintText, __assign({ destructive: destructive }, { children: hintText }))] })), hasTags && (_jsx("div", __assign({ className: "ncua-combobox__tags" }, { children: selectedTags.map(function (tag) { return (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: function () { return handleRemoveTag(tag.id); } }, tag.id)); }) })))] }));
+});
+ComboBox.displayName = 'ComboBox';
+export { defaultMaxHeight, ComboBox };

package/dist/temp/src/components/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export type { ComboBoxProps } from './ComboBox';
+export { ComboBox } from './ComboBox';

package/dist/temp/src/components/combobox/index.js

@@ -0,0 +1 @@
+export { ComboBox } from './ComboBox';

package/dist/temp/src/components/date-picker/CustomInput.d.ts

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes } from 'react';
+import type { Size } from '../../../constant/size';
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled: boolean;
+    iconName: 'calendar' | 'clock';
+    iconSize: Extract<Size, 'xs' | 'sm'>;
+    placeholder?: string;
+}
+declare const CustomInput: import("react").ForwardRefExoticComponent<CustomInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export { CustomInput };

package/dist/temp/src/components/date-picker/CustomInput.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, Clock } from '@ncds/ui-admin-icon';
+import { forwardRef } from 'react';
+var SVG_SIZE_XS = 14;
+var SVG_SIZE_SM = 16;
+var CustomInput = forwardRef(function (_a, ref) {
+    var disabled = _a.disabled, iconSize = _a.iconSize, iconName = _a.iconName, props = __rest(_a, ["disabled", "iconSize", "iconName"]);
+    var svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
+    return (_jsxs(_Fragment, { children: [_jsx("input", __assign({ ref: ref, disabled: disabled, autoComplete: props.autoComplete || 'off' }, props)), _jsx("label", __assign({ className: "ncua-date-picker__ico", htmlFor: props.id }, { children: iconName === 'calendar' ? (_jsx(Calendar, { width: svgSize, height: svgSize })) : (_jsx(Clock, { width: svgSize, height: svgSize })) }))] }));
+});
+CustomInput.displayName = 'CustomInput';
+export { CustomInput };

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

@@ -0,0 +1,24 @@
+import type { Options } from 'flatpickr/dist/types/options';
+import { type DateTimePickerHandle, type DateTimePickerProps } from 'react-flatpickr';
+import type { Size } from '../../../constant/size';
+type DatePickerProps = {
+    size?: Extract<Size, 'xs' | 'sm'>;
+    shouldFocus?: boolean;
+    currentDate: string;
+    datePickerOptions?: Options;
+    destructive?: string;
+    placeholder?: string;
+    isEndDate?: boolean;
+    className?: string;
+    onChangeDate: (date: string) => void;
+    onValidationError?: (error: {
+        date: Date;
+        minDate?: any;
+        maxDate?: any;
+        violations: Array<'minDate' | 'maxDate'>;
+        previousDate?: Date;
+    }) => void;
+} & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
+declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;
+export { DatePicker };
+export type { DatePickerProps };

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

@@ -0,0 +1,326 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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, useRef } from 'react';
+import Flatpickr from 'react-flatpickr';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+import { CustomInput } from './CustomInput';
+var isValidDate = function (dateString) {
+    var date = new Date(dateString);
+    return date instanceof Date && !isNaN(date.getTime());
+};
+var getTimeOnlyValue = function (hasSeconds, isEndDate) {
+    var endTime = hasSeconds ? '23:59:59' : '23:59';
+    var startTime = hasSeconds ? '00:00:00' : '00:00';
+    return isEndDate ? endTime : startTime;
+};
+var getDateTimeValue = function (currentDate, hasSeconds, isEndDate) {
+    var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+    var momentDate = moment(currentDate);
+    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+};
+var processDate = function (currentDate, isEndDate, enableTime, noCalendar, enableSeconds) {
+    if (!enableTime && !noCalendar)
+        return currentDate;
+    if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':'))
+        return currentDate;
+    if (noCalendar) {
+        return getTimeOnlyValue(enableSeconds, isEndDate);
+    }
+    if (!currentDate)
+        return '';
+    return getDateTimeValue(currentDate, enableSeconds, isEndDate);
+};
+var DatePicker = forwardRef(function (_a, ref) {
+    var _b = _a.shouldFocus, shouldFocus = _b === void 0 ? true : _b, currentDate = _a.currentDate, _c = _a.size, size = _c === void 0 ? 'xs' : _c, onChangeDate = _a.onChangeDate, datePickerOptions = _a.datePickerOptions, _d = _a.isEndDate, isEndDate = _d === void 0 ? false : _d, onValidationError = _a.onValidationError, className = _a.className, attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError", "className"]);
+    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 isValidDateInstance = function (date) {
+        return date instanceof Date && !isNaN(date.getTime());
+    };
+    var handleInvalidSelectedDate = function (instance) {
+        var previousDate = instance === null || instance === void 0 ? void 0 : instance._previousDateBeforeInput;
+        if (isValidDateInstance(previousDate)) {
+            // 이전 값이 있으면 이전 값으로 복원
+            instance.selectedDates = [previousDate];
+            instance.setDate(previousDate, false);
+        }
+        else {
+            // 이전 값이 없으면 빈 값으로 처리
+            restorePreviousDate(instance.input, instance);
+        }
+        return true;
+    };
+    var handleDateViolations = function (selectedDate, instance) {
+        var _a;
+        var minDate = options.minDate, maxDate = options.maxDate;
+        var violations = checkDateViolations(selectedDate, minDate, maxDate);
+        if (violations.length > 0 && onValidationError) {
+            var prevDate = (_a = instance === null || instance === void 0 ? void 0 : instance.selectedDates) === null || _a === void 0 ? void 0 : _a[0];
+            onValidationError({
+                date: selectedDate,
+                minDate: minDate,
+                maxDate: maxDate,
+                violations: violations,
+                previousDate: isValidDateInstance(prevDate) ? prevDate : undefined,
+            });
+            return true; // onValidationError가 있으면 날짜 변경 안 함
+        }
+        return false;
+    };
+    var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
+        if (!dateTimeStamp || dateTimeStamp.length === 0) {
+            restorePreviousDate(instance.input, instance);
+            return;
+        }
+        var selectedDate = dateTimeStamp[0];
+        if (!isValidDateInstance(selectedDate)) {
+            // 유효하지 않은 날짜 - 이전 값으로 복원하거나 빈 값으로 처리
+            handleInvalidSelectedDate(instance);
+            return;
+        }
+        if (handleDateViolations(selectedDate, instance)) {
+            return;
+        }
+        // 유효한 날짜인 경우 이전 날짜로 저장
+        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 handleEmptyInput = function (target, instance) {
+        target.value = '';
+        instance.setDate('', false);
+        onChangeDate('');
+        return true;
+    };
+    var validateFormattedDate = function (formattedInput, target, instance) {
+        var parsedDate = moment(formattedInput);
+        if (!parsedDate.isValid()) {
+            restorePreviousDate(target, instance);
+            return false;
+        }
+        var parsedDateObj = parsedDate.toDate();
+        var violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
+        // onInputHandler에서는 onValidationError를 호출하지 않음
+        // validation은 onChangeDateHandler에서만 처리
+        return violations.length === 0;
+    };
+    var onInputHandler = function (e) {
+        var target = e.target;
+        var input = target.value;
+        var instance = flatpickrInstanceRef.current;
+        if (!instance)
+            return;
+        if (!input || input.trim() === '') {
+            handleEmptyInput(target, instance);
+            return;
+        }
+        // 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
+        if (!/[0-9]/.test(input)) {
+            restorePreviousDate(target, instance);
+            return;
+        }
+        var formattedInput = formatDateInput(input);
+        if (formattedInput !== input) {
+            target.value = formattedInput;
+            return;
+        }
+        if (formattedInput && formattedInput.length >= 10 && !validateFormattedDate(formattedInput, target, instance)) {
+            return;
+        }
+    };
+    var onHourInputHandler = function (e) {
+        var target = e.target;
+        var input = target.value;
+        var formattedInput = formatHourInput(input);
+        if (formattedInput === input)
+            return;
+        target.value = formattedInput;
+    };
+    var onMinuteInputHandler = function (e) {
+        var target = e.target;
+        var input = target.value;
+        var formattedInput = formatMinuteInput(input);
+        if (formattedInput === input)
+            return;
+        target.value = formattedInput;
+    };
+    var inputId = useId();
+    var options = __assign({ mode: 'single', static: true, locale: Korean, 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');
+            var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+            if (!hourInput || !minuteInput)
+                return;
+            hourInput.addEventListener('input', onHourInputHandler);
+            minuteInput.addEventListener('input', onMinuteInputHandler);
+            var handleMouseDown = function (e) {
+                var _a;
+                var flatpickrCalendar = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-calendar.open');
+                if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+                    var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+                    timeInputs.forEach(function (timeInput) {
+                        if (document.activeElement === timeInput) {
+                            timeInput.blur();
+                        }
+                    });
+                }
+            };
+            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 이벤트 리스너 제거
+            var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+            if (hourInput) {
+                hourInput.removeEventListener('input', onHourInputHandler);
+            }
+            // 분 input 이벤트 리스너 제거
+            var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+            if (minuteInput) {
+                minuteInput.removeEventListener('input', onMinuteInputHandler);
+            }
+            var handleMouseDown = instance._handleMouseDown;
+            if (handleMouseDown) {
+                document.removeEventListener('mousedown', handleMouseDown, true);
+            }
+        } }, datePickerOptions);
+    var hasTimeOption = datePickerOptions ? Object.hasOwn(datePickerOptions, 'enableTime') : false;
+    var iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
+    var processedCurrentDate = useMemo(function () { return processDate(currentDate, isEndDate, options.enableTime, options.noCalendar, options.enableSeconds); }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
+    return (_jsxs("div", __assign({ className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
+            'ncua-date-picker--disabled': attrs.disabled,
+            'ncua-date-picker--has-time': hasTimeOption,
+            'ncua-date-picker--destructive': attrs.destructive,
+        }, className) }, { children: [_jsx(Flatpickr, __assign({}, attrs, { ref: ref || undefined, className: classNames('ncua-date-picker__input'), options: options, value: processedCurrentDate, render: function (_a, ref) {
+                    var defaultValue = _a.defaultValue, _value = _a.value, props = __rest(_a, ["defaultValue", "value"]);
+                    // 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, render = _b.render, inputProps = __rest(_b, ["allowInput", "dateFormat", "minDate", "maxDate", "enableTime", "enableSeconds", "noCalendar", "render"]);
+                    return (_jsx(CustomInput, __assign({}, inputProps, { id: inputId, iconSize: size, disabled: !!attrs.disabled, defaultValue: defaultValue, iconName: iconName, ref: ref, onInput: onInputHandler, placeholder: attrs.placeholder })));
+                } })), attrs.destructive && _jsx("p", __assign({ className: "ncua-date-picker__destructive" }, { children: attrs.destructive }))] })));
+});
+DatePicker.displayName = 'DatePicker';
+export { DatePicker };

package/dist/temp/src/components/date-picker/RangeDatePicker.d.ts

@@ -0,0 +1,26 @@
+import { type unitOfTime } from 'moment';
+import { type DatePickerProps } from './DatePicker';
+type RangeDatePickerProps = {
+    startDateOptions: DatePickerProps;
+    endDateOptions: DatePickerProps;
+    validationOption?: {
+        initDate?: {
+            startDate?: string;
+            endDate?: string;
+        };
+        setting?: {
+            unit: unitOfTime.Diff;
+            period: number;
+        };
+    };
+    onDateValidation?: (params: {
+        type: 'start' | 'end';
+        errorType: 'reset' | 'period' | 'overlap' | null;
+        newDate: string;
+        currentDate: string;
+    }) => void;
+    size?: 'xs' | 'sm';
+};
+declare const RangeDatePicker: import("react").ForwardRefExoticComponent<RangeDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { RangeDatePicker };
+export type { RangeDatePickerProps };