@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/temp/src/components/progress-bar/components/SegmentLabels.js

@@ -1,45 +1,32 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getLabelColorClass } from '../utils';
-var SegmentLabels = function (_a) {
-    var segments = _a.segments, segmentCount = _a.segmentCount, _b = _a.showZeroLabel, showZeroLabel = _b === void 0 ? false : _b;
+const SegmentLabels = ({ segments, segmentCount, showZeroLabel = false }) => {
     if (segmentCount >= 2) {
-        return (_jsx("div", __assign({ className: "ncua-progress-bar__labels--multiple" }, { children: segments.map(function (segment, index) {
+        return (_jsx("div", { className: "ncua-progress-bar__labels--multiple", children: segments.map((segment, index) => {
                 // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
                 if (segment.value === 0 && !showZeroLabel) {
                     return null;
                 }
-                var leftPosition = 0;
-                for (var i = 0; i < index; i++) {
+                let leftPosition = 0;
+                for (let i = 0; i < index; i++) {
                     leftPosition += segments[i].width;
                 }
                 // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
                 // 그 외에는 중앙에 정렬
-                var isZero = segment.value === 0;
+                const isZero = segment.value === 0;
                 // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
-                var labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
-                var transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
-                return (_jsx("span", __assign({ className: "ncua-progress-bar__label ncua-progress-bar__label--segment ".concat(getLabelColorClass(segment.color)), style: { left: "".concat(labelPosition, "%"), transform: transform } }, { children: "".concat(segment.value.toFixed(0), "%") }), "".concat(segment.color, "-").concat(index)));
-            }) })));
+                const labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+                const transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+                return (_jsx("span", { className: `ncua-progress-bar__label ncua-progress-bar__label--segment ${getLabelColorClass(segment.color)}`, style: { left: `${labelPosition}%`, transform }, children: `${segment.value.toFixed(0)}%` }, `${segment.color}-${index}`));
+            }) }));
     }
     return null;
 };
-var SingleLabel = function (_a) {
-    var labelType = _a.labelType, displayValue = _a.displayValue, totalValue = _a.totalValue, _b = _a.showZeroLabel, showZeroLabel = _b === void 0 ? false : _b;
+const SingleLabel = ({ labelType, displayValue, totalValue, showZeroLabel = false }) => {
     // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
     if (totalValue === 0 && !showZeroLabel) {
         return null;
     }
-    return _jsx("span", __assign({ className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType) }, { children: displayValue }));
+    return _jsx("span", { className: `ncua-progress-bar__label ncua-progress-bar__label-${labelType}`, children: displayValue });
 };
 export { SegmentLabels, SingleLabel };

package/dist/temp/src/components/progress-bar/hooks/useProgressBar.js

@@ -1,58 +1,49 @@
-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);
-};
 import { useMemo } from 'react';
 import { clampValue } from '../utils';
-var MAX_PERCENTAGE = 100;
+const MAX_PERCENTAGE = 100;
 /**
  * segments를 처리하여 프로그레스 바에 표시할 데이터를 계산합니다.
  */
-var processSegments = function (segments, segmentCount, valueToPercent) {
+const processSegments = (segments, segmentCount, valueToPercent) => {
     // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
-    var shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
-    var segmentsToProcess = segments;
+    const shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+    let segmentsToProcess = segments;
     // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
     if (shouldApplyValueToPercent) {
         // 원본 값들의 합계 계산
-        var originalTotal_1 = segmentsToProcess.reduce(function (sum, seg) { return sum + Number(seg.value); }, 0);
-        if (originalTotal_1 > 0) {
+        const originalTotal = segmentsToProcess.reduce((sum, seg) => sum + Number(seg.value), 0);
+        if (originalTotal > 0) {
             // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
-            segmentsToProcess = segmentsToProcess.map(function (segment) { return ({
-                value: (segment.value / originalTotal_1) * MAX_PERCENTAGE,
+            segmentsToProcess = segmentsToProcess.map((segment) => ({
+                value: (segment.value / originalTotal) * MAX_PERCENTAGE,
                 color: segment.color,
-            }); });
+            }));
         }
     }
     // 각 값 제한 (0-100 범위)
-    var limitedSegments = segmentsToProcess.map(function (segment) { return ({
+    const limitedSegments = segmentsToProcess.map((segment) => ({
         value: clampValue(segment.value),
         color: segment.color,
-    }); });
+    }));
     // 전체 합계 계산
-    var actualTotal = limitedSegments.reduce(function (sum, seg) { return sum + seg.value; }, 0);
-    var total = Math.min(actualTotal, MAX_PERCENTAGE);
+    const actualTotal = limitedSegments.reduce((sum, seg) => sum + seg.value, 0);
+    const total = Math.min(actualTotal, MAX_PERCENTAGE);
     // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
-    var processed = limitedSegments.map(function (segment) { return (__assign(__assign({}, segment), { width: actualTotal > 0 ? (segment.value / actualTotal) * total : 0 })); });
+    const processed = limitedSegments.map((segment) => ({
+        ...segment,
+        width: actualTotal > 0 ? (segment.value / actualTotal) * total : 0,
+    }));
     return {
         totalValue: total,
-        displayValue: "".concat(total.toFixed(0), "%"),
+        displayValue: `${total.toFixed(0)}%`,
         processedSegments: processed,
         shouldSpaceOut: false, // 항상 왼쪽에 붙도록 통일
     };
 };
-export var useProgressBar = function (label, value, segments, valueToPercent) {
-    var _a;
-    var hasSegments = Boolean(segments && segments.length > 0);
-    var segmentCount = (_a = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _a !== void 0 ? _a : 0;
-    var _b = useMemo(function () {
+export const useProgressBar = (label, value, segments, valueToPercent) => {
+    const hasSegments = Boolean(segments && segments.length > 0);
+    const segmentCount = segments?.length ?? 0;
+    const { totalValue, displayValue, processedSegments, shouldSpaceOut } = useMemo(() => {
         // segments가 있을 때는 각 값을 제한하고 전체 합계를 계산
         // value는 무시되며, 각 segment의 값을 value로 처리
         if (hasSegments) {
@@ -60,10 +51,10 @@ export var useProgressBar = function (label, value, segments, valueToPercent) {
         }
         // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
         if (value !== undefined) {
-            var clamped = clampValue(value);
+            const clamped = clampValue(value);
             return {
                 totalValue: clamped,
-                displayValue: "".concat(clamped.toFixed(0), "%"),
+                displayValue: `${clamped.toFixed(0)}%`,
                 processedSegments: [],
                 shouldSpaceOut: false,
             };
@@ -74,23 +65,23 @@ export var useProgressBar = function (label, value, segments, valueToPercent) {
             processedSegments: [],
             shouldSpaceOut: false,
         };
-    }, [hasSegments, segments, segmentCount, value, valueToPercent]), totalValue = _b.totalValue, displayValue = _b.displayValue, processedSegments = _b.processedSegments, shouldSpaceOut = _b.shouldSpaceOut;
+    }, [hasSegments, segments, segmentCount, value, valueToPercent]);
     // segment의 개수가 2이상일때는 bottom 라벨로 고정
-    var effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
-    var progressValueStyle = useMemo(function () {
+    const effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+    const progressValueStyle = useMemo(() => {
         if (effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float') {
-            return { '--progress-value': "".concat(totalValue, "%") };
+            return { '--progress-value': `${totalValue}%` };
         }
         return undefined;
     }, [effectiveLabel, totalValue]);
     return {
-        totalValue: totalValue,
-        displayValue: displayValue,
-        processedSegments: processedSegments,
-        effectiveLabel: effectiveLabel,
-        progressValueStyle: progressValueStyle,
-        hasSegments: hasSegments,
-        segmentCount: segmentCount,
-        shouldSpaceOut: shouldSpaceOut,
+        totalValue,
+        displayValue,
+        processedSegments,
+        effectiveLabel,
+        progressValueStyle,
+        hasSegments,
+        segmentCount,
+        shouldSpaceOut,
     };
 };

package/dist/temp/src/components/progress-bar/utils.js

@@ -1,26 +1,26 @@
 /**
  * 색상 이름을 fill 색상 클래스명으로 변환
  */
-var getFillColorClass = function (color) {
+const getFillColorClass = (color) => {
     if (!color)
         return '';
-    var normalizedColor = color.toLowerCase().trim();
-    return "ncua-progress-bar__fill--color-".concat(normalizedColor);
+    const normalizedColor = color.toLowerCase().trim();
+    return `ncua-progress-bar__fill--color-${normalizedColor}`;
 };
 /**
  * 색상 이름을 label 색상 클래스명으로 변환
  */
-var getLabelColorClass = function (color) {
+const getLabelColorClass = (color) => {
     if (!color)
         return '';
-    var normalizedColor = color.toLowerCase().trim();
-    return "ncua-progress-bar__label--color-".concat(normalizedColor);
+    const normalizedColor = color.toLowerCase().trim();
+    return `ncua-progress-bar__label--color-${normalizedColor}`;
 };
-var MAX_PERCENTAGE = 100;
+const MAX_PERCENTAGE = 100;
 /**
  * 값을 0-100 범위로 제한
  */
-var clampValue = function (value) {
+const clampValue = (value) => {
     return Math.min(Math.max(0, value), MAX_PERCENTAGE);
 };
 export { getFillColorClass, getLabelColorClass, clampValue };

package/dist/temp/src/components/progress-circle/ProgressCircle.js

@@ -1,21 +1,9 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var MAX_PERCENTAGE = 100;
-export var ProgressCircle = function (_a) {
-    var size = _a.size, label = _a.label, value = _a.value, _b = _a.theme, theme = _b === void 0 ? 'circle' : _b;
-    var limitedValue = Math.min(Math.max(0, value), MAX_PERCENTAGE);
+const MAX_PERCENTAGE = 100;
+export const ProgressCircle = ({ size, label, value, theme = 'circle' }) => {
+    const limitedValue = Math.min(Math.max(0, value), MAX_PERCENTAGE);
     if (theme === 'circle') {
-        return (_jsxs("div", __assign({ className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme) }, { children: [_jsxs("div", __assign({ className: "ncua-progress-circle__content" }, { children: [_jsxs("svg", __assign({ className: "ncua-progress-circle__svg", viewBox: "0 0 100 100" }, { children: [_jsx("circle", { className: "ncua-progress-circle__background", cx: "50", cy: "50", r: "45", strokeWidth: "10", fill: "none" }), _jsx("circle", { className: "ncua-progress-circle__progress", cx: "50", cy: "50", r: "45", strokeWidth: "10", fill: "none", strokeDasharray: "var(--circle-circumference)", strokeDashoffset: "calc(var(--circle-circumference) * (1 - ".concat(limitedValue, " / 100))"), transform: "rotate(-90 50 50)", strokeLinecap: "round" })] })), _jsxs("div", __assign({ className: "ncua-progress-circle__label-container" }, { children: [size !== 'xxs' && label && _jsx("div", __assign({ className: "ncua-progress-circle__label-text" }, { children: label })), _jsx("div", __assign({ className: "ncua-progress-circle__label" }, { children: "".concat(limitedValue, "%") }))] }))] })), size === 'xxs' && label && _jsx("div", __assign({ className: "ncua-progress-circle__outside-label" }, { children: label }))] })));
+        return (_jsxs("div", { className: `ncua-progress-circle ncua-progress-circle-${size} ncua-progress-circle-${theme}`, children: [_jsxs("div", { className: "ncua-progress-circle__content", children: [_jsxs("svg", { className: "ncua-progress-circle__svg", viewBox: "0 0 100 100", children: [_jsx("circle", { className: "ncua-progress-circle__background", cx: "50", cy: "50", r: "45", strokeWidth: "10", fill: "none" }), _jsx("circle", { className: "ncua-progress-circle__progress", cx: "50", cy: "50", r: "45", strokeWidth: "10", fill: "none", strokeDasharray: "var(--circle-circumference)", strokeDashoffset: `calc(var(--circle-circumference) * (1 - ${limitedValue} / 100))`, transform: "rotate(-90 50 50)", strokeLinecap: "round" })] }), _jsxs("div", { className: "ncua-progress-circle__label-container", children: [size !== 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__label-text", children: label }), _jsx("div", { className: "ncua-progress-circle__label", children: `${limitedValue}%` })] })] }), size === 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__outside-label", children: label })] }));
     }
-    return (_jsxs("div", __assign({ className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme) }, { children: [_jsxs("div", __assign({ className: "ncua-progress-circle__content" }, { children: [_jsxs("svg", __assign({ className: "ncua-progress-circle__svg", viewBox: "0 0 100 50" }, { children: [_jsx("path", { className: "ncua-progress-circle__background", d: "M 5 50 A 45 45 0 0 1 95 50", strokeWidth: "10", fill: "none", strokeLinecap: "round" }), _jsx("path", { className: "ncua-progress-circle__progress", d: "M 5 50 A 45 45 0 0 1 95 50", strokeWidth: "10", fill: "none", strokeDasharray: "var(--half-circle-circumference)", strokeDashoffset: "calc(var(--half-circle-circumference) * (1 - ".concat(limitedValue, " / 100))"), strokeLinecap: "round" })] })), _jsxs("div", __assign({ className: "ncua-progress-circle__label-container" }, { children: [size !== 'xxs' && label && _jsx("div", __assign({ className: "ncua-progress-circle__label-text" }, { children: label })), _jsx("div", __assign({ className: "ncua-progress-circle__label" }, { children: "".concat(limitedValue, "%") }))] }))] })), size === 'xxs' && label && _jsx("div", __assign({ className: "ncua-progress-circle__outside-label" }, { children: label }))] })));
+    return (_jsxs("div", { className: `ncua-progress-circle ncua-progress-circle-${size} ncua-progress-circle-${theme}`, children: [_jsxs("div", { className: "ncua-progress-circle__content", children: [_jsxs("svg", { className: "ncua-progress-circle__svg", viewBox: "0 0 100 50", children: [_jsx("path", { className: "ncua-progress-circle__background", d: "M 5 50 A 45 45 0 0 1 95 50", strokeWidth: "10", fill: "none", strokeLinecap: "round" }), _jsx("path", { className: "ncua-progress-circle__progress", d: "M 5 50 A 45 45 0 0 1 95 50", strokeWidth: "10", fill: "none", strokeDasharray: "var(--half-circle-circumference)", strokeDashoffset: `calc(var(--half-circle-circumference) * (1 - ${limitedValue} / 100))`, strokeLinecap: "round" })] }), _jsxs("div", { className: "ncua-progress-circle__label-container", children: [size !== 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__label-text", children: label }), _jsx("div", { className: "ncua-progress-circle__label", children: `${limitedValue}%` })] })] }), size === 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__outside-label", children: label })] }));
 };

package/dist/temp/src/components/radio/Radio.js

@@ -1,30 +1,7 @@
-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";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { RadioInput } from './RadioInput';
-export var Radio = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 'xs' : _b, text = _a.text, supportText = _a.supportText, disabled = _a.disabled, checked = _a.checked, className = _a.className, onChange = _a.onChange, props = __rest(_a, ["size", "text", "supportText", "disabled", "checked", "className", "onChange"]);
-    return (_jsxs("label", __assign({ className: classNames('ncua-radio-field', "ncua-radio-field--".concat(size), { 'has-text': text }, className) }, { children: [_jsx(RadioInput, __assign({ size: size, ref: ref, checked: checked, disabled: disabled, onChange: onChange, className: "ncua-radio-field__input" }, props)), _jsxs("span", { children: [text && _jsx("span", __assign({ className: "ncua-radio-field__text" }, { children: text })), supportText && _jsx("span", __assign({ className: "ncua-radio-field__support-text" }, { children: supportText }))] })] })));
+export const Radio = forwardRef(({ size = 'xs', text, supportText, disabled, checked, className, onChange, ...props }, ref) => {
+    return (_jsxs("label", { className: classNames('ncua-radio-field', `ncua-radio-field--${size}`, { 'has-text': text }, className), children: [_jsx(RadioInput, { size: size, ref: ref, checked: checked, disabled: disabled, onChange: onChange, className: "ncua-radio-field__input", ...props }), _jsxs("span", { children: [text && _jsx("span", { className: "ncua-radio-field__text", children: text }), supportText && _jsx("span", { className: "ncua-radio-field__support-text", children: supportText })] })] }));
 });

package/dist/temp/src/components/radio/RadioInput.js

@@ -1,29 +1,6 @@
-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 } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-export var RadioInput = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 'xs' : _b, disabled = _a.disabled, className = _a.className, _c = _a.destructive, destructive = _c === void 0 ? false : _c, onChange = _a.onChange, props = __rest(_a, ["size", "disabled", "className", "destructive", "onChange"]);
-    return (_jsx("span", __assign({ className: classNames('ncua-radio-input', "ncua-radio-input--".concat(size), { destructive: destructive }, className) }, { children: _jsx("input", __assign({ type: "radio", ref: ref, onChange: onChange, disabled: disabled }, props)) })));
+export const RadioInput = forwardRef(({ size = 'xs', disabled, className, destructive = false, onChange, ...props }, ref) => {
+    return (_jsx("span", { className: classNames('ncua-radio-input', `ncua-radio-input--${size}`, { destructive }, className), children: _jsx("input", { type: "radio", ref: ref, onChange: onChange, disabled: disabled, ...props }) }));
 });

package/dist/{types/src/components/date-picker → temp/src/components/range-date-picker}/RangeDatePicker.d.ts

@@ -1,5 +1,5 @@
 import { type unitOfTime } from 'moment';
-import { type DatePickerProps } from './DatePicker';
+import { type DatePickerProps } from '../date-picker/DatePicker';
 type RangeDatePickerProps = {
     startDateOptions: DatePickerProps;
     endDateOptions: DatePickerProps;

package/dist/temp/src/components/range-date-picker/RangeDatePicker.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from 'moment';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { DatePicker } from '../date-picker/DatePicker';
+import { getDateFormat } from '../date-picker/utils';
+const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validationOption, onDateValidation, size = 'xs' }, ref) => {
+    const getOverlapResult = useCallback((type) => {
+        if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+            return { newDate: endDateOptions.currentDate, currentDate: startDateOptions.currentDate };
+        }
+        if (type === 'end' && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+            return { newDate: startDateOptions.currentDate, currentDate: endDateOptions.currentDate };
+        }
+        return null;
+    }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+    const getSettingNewDate = useCallback((type, isOverPeriod, unit, period) => {
+        if (type === 'start') {
+            if (isOverPeriod) {
+                return getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+            }
+            if (moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+                return endDateOptions.currentDate;
+            }
+        }
+        else {
+            if (isOverPeriod) {
+                return getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+            }
+            if (moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+                return startDateOptions.currentDate;
+            }
+        }
+        return '';
+    }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+    const changeSettingDateAndAlert = useCallback((type, isOverPeriod = false) => {
+        if (!validationOption?.setting) {
+            const result = getOverlapResult(type);
+            if (result) {
+                onDateValidation?.({ type, errorType: 'overlap', ...result });
+            }
+            return;
+        }
+        const { unit, period } = validationOption.setting;
+        const newDate = getSettingNewDate(type, isOverPeriod, unit, period);
+        if (newDate) {
+            onDateValidation?.({
+                type,
+                errorType: isOverPeriod ? 'period' : 'overlap',
+                newDate,
+                currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate,
+            });
+        }
+    }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
+    useEffect(() => {
+        const isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+        if (isOverDate) {
+            changeSettingDateAndAlert('start');
+            return;
+        }
+        if (!validationOption?.setting) {
+            return;
+        }
+        const { unit, period } = validationOption.setting;
+        const isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
+        if (isValidPeriod) {
+            onDateValidation?.({
+                type: 'start',
+                errorType: null,
+                newDate: startDateOptions.currentDate,
+                currentDate: startDateOptions.currentDate,
+            });
+        }
+        else {
+            changeSettingDateAndAlert('start', true);
+        }
+    }, [startDateOptions.currentDate]);
+    useEffect(() => {
+        const isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
+        if (!validationOption?.setting || !isNotTodayEndDate) {
+            return;
+        }
+        const isOverDate = moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+        if (isOverDate) {
+            changeSettingDateAndAlert('end');
+            return;
+        }
+        const { unit, period } = validationOption.setting;
+        const isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
+        if (isValidPeriod) {
+            onDateValidation?.({
+                type: 'end',
+                errorType: null,
+                newDate: endDateOptions.currentDate,
+                currentDate: endDateOptions.currentDate,
+            });
+        }
+        else {
+            changeSettingDateAndAlert('end', true);
+        }
+    }, [endDateOptions.currentDate]);
+    return (_jsxs("div", { className: "ncua-range-date-picker", ref: ref || undefined, children: [_jsx(DatePicker, { ...startDateOptions, ref: undefined, size: size }), "~", _jsx(DatePicker, { isEndDate: true, ...endDateOptions, ref: undefined, size: size })] }));
+});
+RangeDatePicker.displayName = 'RangeDatePicker';
+export { RangeDatePicker };

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

@@ -0,0 +1 @@
+export * from './RangeDatePicker';

package/dist/temp/src/components/range-date-picker/index.js

@@ -0,0 +1 @@
+export * from './RangeDatePicker';

package/dist/{types/src/components/date-picker → temp/src/components/range-date-picker-with-buttons}/RangeDatePickerWithButtons.d.ts

@@ -1,6 +1,6 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
-import { type RangeDatePickerProps } from './RangeDatePicker';
+import { type RangeDatePickerProps } from '../range-date-picker/RangeDatePicker';
 type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
     useYesterdayAsEndDate?: boolean;

package/dist/temp/src/components/range-date-picker-with-buttons/RangeDatePickerWithButtons.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { ButtonGroup } from '../button-group';
+import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
+const RangeDatePickerWithButtons = ({ useYesterdayAsEndDate = false, size = 'xs', currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }) => {
+    const items = (periodItems ?? PERIOD_ITEM);
+    const setCalculatedDate = () => {
+        const currentPeriodItem = items[currentButtonId];
+        if (!currentPeriodItem) {
+            return;
+        }
+        if (currentButtonId === 'ENTIRE') {
+            startDateOptions.onChangeDate('');
+            endDateOptions.onChangeDate('');
+            return;
+        }
+        const startDate = getDateFormat(getSubtractDate({
+            period: currentPeriodItem.period,
+            unit: currentPeriodItem.unit,
+        }));
+        startDateOptions.onChangeDate(startDate);
+        const endDate = useYesterdayAsEndDate
+            ? getDateFormat(getSubtractDate({
+                period: 1,
+                unit: 'days',
+            }))
+            : getDateFormat();
+        endDateOptions.onChangeDate(endDate);
+    };
+    const handleOnChangeDate = (date, type) => {
+        type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+        currentButtonId && setCurrentButtonId('NONE');
+    };
+    useEffect(() => {
+        if (currentButtonId !== 'NONE') {
+            setCalculatedDate();
+        }
+    }, [currentButtonId]);
+    return (_jsxs("div", { className: "ncua-range-date-picker-with-buttons", children: [_jsx(ButtonGroup, { size: size, children: periodKeys.map((key) => (_jsx(ButtonGroup.Item, { isCurrent: currentButtonId === key, label: items[key].text, onClick: () => setCurrentButtonId(key) }, key))) }), _jsx(RangeDatePicker, { startDateOptions: { ...startDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'START') }, endDateOptions: { ...endDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'END') }, validationOption: validationOption, onDateValidation: onDateValidation, size: size })] }));
+};
+export { RangeDatePickerWithButtons };

package/dist/temp/src/components/range-date-picker-with-buttons/index.d.ts

@@ -0,0 +1 @@
+export * from './RangeDatePickerWithButtons';

package/dist/temp/src/components/range-date-picker-with-buttons/index.js

@@ -0,0 +1 @@
+export * from './RangeDatePickerWithButtons';

package/dist/temp/src/components/select/Select.js

@@ -1,33 +1,10 @@
-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";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
-export var Select = forwardRef(function (_a, ref) {
-    var placeholder = _a.placeholder, _b = _a.disabledPlaceholder, disabledPlaceholder = _b === void 0 ? false : _b, id = _a.id, className = _a.className, hintText = _a.hintText, children = _a.children, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.type, type = _d === void 0 ? 'default' : _d, _e = _a.destructive, destructive = _e === void 0 ? false : _e, value = _a.value, optionItems = _a.optionItems, register = _a.register, _f = _a.disabled, disabled = _f === void 0 ? false : _f, props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register", "disabled"]);
-    return (_jsxs("span", __assign({ className: classNames('ncua-select', {
+export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, ...props }, ref) => {
+    return (_jsxs("span", { className: classNames('ncua-select', {
             destructive: destructive,
             'ncua-select--simple': type === 'simple',
-        }, className, "ncua-select--".concat(size)) }, { children: [_jsx("span", __assign({ className: "ncua-select__content" }, { children: _jsxs("select", __assign({ value: value, ref: ref, id: id, className: classNames('ncua-select__tag', className), disabled: disabled }, register, props, { children: [placeholder && (_jsx("option", __assign({ value: "", selected: true, disabled: disabledPlaceholder }, { children: placeholder }))), optionItems === null || optionItems === void 0 ? void 0 : optionItems.map(function (item) { return (_jsx("option", __assign({ value: item.id }, { children: item.label }), item.id)); }), children] })) })), hintText && (_jsx(HintText, __assign({ destructive: destructive, className: "ncua-hint-text" }, { children: hintText })))] })));
+        }, className, `ncua-select--${size}`), children: [_jsx("span", { className: "ncua-select__content", children: _jsxs("select", { value: value, ref: ref, id: id, className: classNames('ncua-select__tag', className), disabled: disabled, ...register, ...props, children: [placeholder && (_jsx("option", { value: "", selected: true, disabled: disabledPlaceholder, children: placeholder })), optionItems?.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))), children] }) }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText }))] }));
 });