@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,112 +1,94 @@
-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';
+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 * 100,
-          color: segment.color
-        };
-      });
+      segmentsToProcess = segmentsToProcess.map(segment => ({
+        value: segment.value / originalTotal * MAX_PERCENTAGE,
+        color: segment.color
+      }));
     }
   }
   // 각 값 제한 (0-100 범위)
-  var limitedSegments = segmentsToProcess.map(function (segment) {
-    return {
-      value: clampValue(segment.value),
-      color: segment.color
-    };
-  });
+  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, 100);
+  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 () {
-      // segments가 있을 때는 각 값을 제한하고 전체 합계를 계산
-      // value는 무시되며, 각 segment의 값을 value로 처리
-      if (hasSegments) {
-        return processSegments(segments, segmentCount, valueToPercent);
-      }
-      // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
-      if (value !== undefined) {
-        var clamped = clampValue(value);
-        return {
-          totalValue: clamped,
-          displayValue: "".concat(clamped.toFixed(0), "%"),
-          processedSegments: [],
-          shouldSpaceOut: false
-        };
-      }
+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) {
+      return processSegments(segments, segmentCount, valueToPercent);
+    }
+    // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
+    if (value !== undefined) {
+      const clamped = clampValue(value);
       return {
-        totalValue: 0,
-        displayValue: '0%',
+        totalValue: clamped,
+        displayValue: `${clamped.toFixed(0)}%`,
         processedSegments: [],
         shouldSpaceOut: false
       };
-    }, [hasSegments, segments, segmentCount, value, valueToPercent]),
-    totalValue = _b.totalValue,
-    displayValue = _b.displayValue,
-    processedSegments = _b.processedSegments,
-    shouldSpaceOut = _b.shouldSpaceOut;
+    }
+    return {
+      totalValue: 0,
+      displayValue: '0%',
+      processedSegments: [],
+      shouldSpaceOut: false
+    };
+  }, [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, "%")
+        '--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/esm/src/components/progress-bar/utils.js

@@ -1,22 +1,24 @@
 /**
  * 색상 이름을 fill 색상 클래스명으로 변환
  */
-export 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 색상 클래스명으로 변환
  */
-export 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}`;
 };
+const MAX_PERCENTAGE = 100;
 /**
  * 값을 0-100 범위로 제한
  */
-export var clampValue = function (value) {
-  return Math.min(Math.max(0, value), 100);
-};
+const clampValue = value => {
+  return Math.min(Math.max(0, value), MAX_PERCENTAGE);
+};
+export { getFillColorClass, getLabelColorClass, clampValue };

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

@@ -1,32 +1,21 @@
-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";
-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), 100);
+const MAX_PERCENTAGE = 100;
+export const ProgressCircle = _ref => {
+  let {
+    size,
+    label,
+    value,
+    theme = 'circle'
+  } = _ref;
+  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({
+    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"
-        }, {
+          viewBox: "0 0 100 100",
           children: [_jsx("circle", {
             className: "ncua-progress-circle__background",
             cx: "50",
@@ -42,73 +31,61 @@ export var ProgressCircle = function (_a) {
             strokeWidth: "10",
             fill: "none",
             strokeDasharray: "var(--circle-circumference)",
-            strokeDashoffset: "calc(var(--circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
+            strokeDashoffset: `calc(var(--circle-circumference) * (1 - ${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"
-          }, {
+        }), _jsxs("div", {
+          className: "ncua-progress-circle__label-container",
+          children: [size !== 'xxs' && label && _jsx("div", {
+            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
-      }))]
-    }));
-  } else {
-    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"
+          }), _jsx("div", {
+            className: "ncua-progress-circle__label",
+            children: `${limitedValue}%`
           })]
-        })), _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"
-      }, {
+        })]
+      }), size === 'xxs' && label && _jsx("div", {
+        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/esm/src/components/radio/Radio.js

@@ -1,57 +1,38 @@
-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 = /*#__PURE__*/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), {
+export const Radio = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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, __assign({
+    }, 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", __assign({
-        className: "ncua-radio-field__text"
-      }, {
+      className: "ncua-radio-field__input",
+      ...props
+    }), _jsxs("span", {
+      children: [text && _jsx("span", {
+        className: "ncua-radio-field__text",
         children: text
-      })), supportText && _jsx("span", __assign({
-        className: "ncua-radio-field__support-text"
-      }, {
+      }), supportText && _jsx("span", {
+        className: "ncua-radio-field__support-text",
         children: supportText
-      }))]
+      })]
     })]
-  }));
+  });
 });

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

@@ -1,43 +1,25 @@
-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 = /*#__PURE__*/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({
+export const RadioInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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))
-  }));
+      disabled: disabled,
+      ...props
+    })
+  });
 });

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

@@ -0,0 +1,141 @@
+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 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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(function (type) {
+    let isOverPeriod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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/esm/src/components/range-date-picker/index.js

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