@ncds/ui-admin 0.0.33 → 0.0.35

package/dist/cjs/assets/scripts/datePicker.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = void 0;
+var __assign = void 0 && (void 0).__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);
+};
+// Constants
+var CONSTANTS = {
+  ICON_SIZES: {
+    sm: '14',
+    md: '16'
+  },
+  CLASS_NAMES: {
+    RANGE_WRAPPER: 'ncua-range-date-picker',
+    RANGE_WITH_BUTTONS: 'ncua-range-date-picker-with-buttons',
+    DATE_PICKER: 'ncua-date-picker',
+    DATE_PICKER_INPUT: 'ncua-date-picker__input',
+    DATE_PICKER_ICO: 'ncua-date-picker__ico',
+    BUTTON_GROUP: 'ncua-button-group',
+    BUTTON_GROUP_HAS_BORDER: 'has-border',
+    BUTTON: 'ncua-button-group__item'
+  },
+  FORMATS: {
+    DATE: 'YYYY-MM-DD'
+  },
+  ERROR_MESSAGES: {
+    FLATPICKR_NOT_LOADED: 'flatpickr 라이브러리가 로드되지 않았습니다.',
+    MOMENT_NOT_LOADED: 'moment 라이브러리가 로드되지 않았습니다.'
+  }
+};
+var DatePicker = exports.DatePicker = /** @class */function () {
+  function DatePicker(wrapper, options) {
+    this.flatpickrInstances = [];
+    this.currentButton = null;
+    var _a = options.buttons,
+      buttons = _a === void 0 ? [] : _a,
+      size = options.size,
+      datePickerOptions = options.datePickerOptions;
+    this.validationDependencies((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0);
+    this.element = wrapper;
+    this.datePickerOptions = datePickerOptions;
+    this.buttons = buttons;
+    this.size = size;
+    this.init();
+  }
+  DatePicker.prototype.init = function () {
+    this.element.innerHTML = '';
+    this.initializeWrapper();
+    this.initButtonGroup();
+    this.initDatePicker();
+  };
+  DatePicker.prototype.validationDependencies = function (hasButtons) {
+    if (typeof flatpickr === 'undefined') {
+      throw new Error(CONSTANTS.ERROR_MESSAGES.FLATPICKR_NOT_LOADED);
+    }
+    if (hasButtons && typeof moment === 'undefined') {
+      throw new Error(CONSTANTS.ERROR_MESSAGES.MOMENT_NOT_LOADED);
+    }
+  };
+  DatePicker.prototype.initializeWrapper = function () {
+    if (this.datePickerOptions.length < 2) return;
+    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
+  };
+  DatePicker.prototype.initButtonGroup = function () {
+    var _this = this;
+    if (this.buttons.length === 0) return;
+    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+    var createButtonWrapperElement = function () {
+      var wrapper = document.createElement('div');
+      wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP_HAS_BORDER, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, "--").concat(_this.size);
+      return wrapper;
+    };
+    var appendButtons = function (wrapper) {
+      _this.buttons.forEach(function (button) {
+        var buttonElement = _this.createButtonElement(button);
+        wrapper.appendChild(buttonElement);
+      });
+    };
+    var wrapper = createButtonWrapperElement();
+    appendButtons(wrapper);
+    wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
+    this.element.appendChild(wrapper);
+  };
+  DatePicker.prototype.createButtonElement = function (button) {
+    if (button.isCurrent) {
+      this.currentButton = button;
+    }
+    var buttonElement = document.createElement('button');
+    buttonElement.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON, " ").concat(button.isCurrent ? 'is-current' : '');
+    buttonElement.textContent = button.text;
+    buttonElement.type = 'button';
+    return buttonElement;
+  };
+  DatePicker.prototype.reRenderButtonGroup = function (buttons) {
+    var _this = this;
+    var buttonGroup = this.element.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
+    if (!buttonGroup) return;
+    buttonGroup.innerHTML = '';
+    buttons.forEach(function (button) {
+      if (button.isCurrent) {
+        _this.currentButton = button;
+      }
+      buttonGroup.appendChild(_this.createButtonElement(button));
+    });
+    this.buttons = buttons;
+  };
+  DatePicker.prototype.initDatePicker = function () {
+    var _this = this;
+    var datePickerOptions = this.datePickerOptions;
+    var createWrapperElement = function (size) {
+      var wrapper = document.createElement('div');
+      wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, " ").concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, "--").concat(size);
+      return wrapper;
+    };
+    var createInput = function (elementId) {
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.id = elementId;
+      input.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_INPUT;
+      return input;
+    };
+    var createIcon = function (size) {
+      var getCalendarIconSvg = function (size) {
+        return "\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" fill=\"none\">\n        <path\n          d=\"M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z\"\n          stroke=\"black\"\n          stroke-width=\"1.33333\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>");
+      };
+      var ico = document.createElement('span');
+      ico.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_ICO;
+      ico.innerHTML = getCalendarIconSvg(CONSTANTS.ICON_SIZES[size]);
+      return ico;
+    };
+    var insertSeparator = function () {
+      var span = document.createElement('span');
+      span.textContent = '-';
+      _this.element.insertBefore(span, _this.element.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
+    };
+    var createDatePickerElement = function (datePickerOption, index) {
+      var wrapper = createWrapperElement(_this.size);
+      var input = createInput(datePickerOption.element);
+      wrapper.appendChild(input);
+      wrapper.appendChild(createIcon(_this.size));
+      wrapper.addEventListener('click', function () {
+        _this.buttons.forEach(function (button) {
+          return button.isCurrent = false;
+        });
+        _this.currentButton = null;
+        _this.reRenderButtonGroup(_this.buttons);
+      });
+      _this.element.appendChild(wrapper);
+      if (index > 0) {
+        insertSeparator();
+      }
+      return _this.initializeFlatpickr(input, datePickerOption.options, wrapper);
+    };
+    var createFlatpickrInstances = function (datePickerOptions) {
+      return datePickerOptions.map(function (datePickerOption, index) {
+        return createDatePickerElement(datePickerOption, index);
+      });
+    };
+    var calcInitDates = function (datePickerOptions) {
+      var _a;
+      if (_this.buttons.length > 0) {
+        var _b = (_a = _this.buttons.find(function (button) {
+            return button.isCurrent;
+          })) !== null && _a !== void 0 ? _a : {
+            period: 0,
+            unit: 'days'
+          },
+          period = _b.period,
+          unit = _b.unit;
+        return [moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE), moment().format(CONSTANTS.FORMATS.DATE)];
+      }
+      return datePickerOptions.map(function (datePickerOption) {
+        var _a;
+        if ((_a = datePickerOption.options) === null || _a === void 0 ? void 0 : _a.defaultDate) {
+          return moment(datePickerOption.options.defaultDate.toString()).format(CONSTANTS.FORMATS.DATE);
+        }
+        return moment().format(CONSTANTS.FORMATS.DATE);
+      });
+    };
+    this.flatpickrInstances = createFlatpickrInstances(datePickerOptions);
+    var dates = calcInitDates(datePickerOptions);
+    this.setMultipleDates(dates);
+  };
+  DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
+    return flatpickr(input, __assign(__assign({}, options), {
+      appendTo: wrapper
+    }));
+  };
+  DatePicker.prototype.updateDateWithButton = function (e) {
+    var _this = this;
+    var target = e.target;
+    if (!target.classList.contains(CONSTANTS.CLASS_NAMES.BUTTON)) return;
+    var clickedButton = this.buttons.find(function (button) {
+      return button.text === target.textContent;
+    });
+    if (!clickedButton || clickedButton === this.currentButton) return;
+    // 날짜 계산
+    var calculateDates = function () {
+      var period = clickedButton.period,
+        unit = clickedButton.unit;
+      var dates = [];
+      var startDate = period ? moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE) : moment().format(CONSTANTS.FORMATS.DATE);
+      dates.push(startDate);
+      if (_this.datePickerOptions.length > 1) {
+        var endDate = moment().format(CONSTANTS.FORMATS.DATE);
+        dates.push(endDate);
+      }
+      return dates;
+    };
+    var updateButtonState = function () {
+      return _this.buttons.map(function (button) {
+        return __assign(__assign({}, button), {
+          isCurrent: button.text === (clickedButton === null || clickedButton === void 0 ? void 0 : clickedButton.text)
+        });
+      });
+    };
+    this.currentButton = clickedButton;
+    this.reRenderButtonGroup(updateButtonState());
+    this.setMultipleDates(calculateDates());
+  };
+  DatePicker.prototype.setMultipleDates = function (dates) {
+    var _this = this;
+    dates.forEach(function (date, index) {
+      _this.flatpickrInstances[index].setDate(date, true);
+      _this.flatpickrInstances[index].redraw();
+    });
+  };
+  DatePicker.prototype.setDate = function (dates) {
+    this.setMultipleDates(dates);
+  };
+  DatePicker.prototype.getDates = function () {
+    return this.flatpickrInstances.flatMap(function (instance) {
+      return instance.selectedDates;
+    });
+  };
+  return DatePicker;
+}();
+window.DatePicker = DatePicker;

package/dist/cjs/assets/scripts/index.js

@@ -1,27 +1,10 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _test = require("./test");
-Object.keys(_test).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _test[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _test[key];
-    }
-  });
-});
+var _datePicker = require("./datePicker");
 var _slider = require("./slider");
-Object.keys(_slider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _slider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _slider[key];
-    }
-  });
-});
+var _tab = require("./tab");
+window.ncua = {
+  Slider: _slider.Slider,
+  Tab: _tab.Tab,
+  DatePicker: _datePicker.DatePicker
+};

package/dist/cjs/assets/scripts/slider.js

@@ -17,9 +17,6 @@ var Slider = exports.Slider = /** @class */function () {
       e.preventDefault();
       _this.handleInteractionStart(e.clientX, targetElement);
       if (_this.isDragging) {
-        // 드래그 이벤트 추가
-        document.addEventListener('mousemove', _this.handleMouseMove);
-        document.addEventListener('mouseup', _this.handleMouseUp);
         // 텍스트 선택 방지
         document.body.style.userSelect = 'none';
       }
@@ -29,13 +26,6 @@ var Slider = exports.Slider = /** @class */function () {
         var targetElement = e.target;
         e.preventDefault();
         _this.handleInteractionStart(e.touches[0].clientX, targetElement);
-        if (_this.isDragging) {
-          // 드래그 이벤트 추가
-          document.addEventListener('touchmove', _this.handleTouchMove, {
-            passive: false
-          });
-          document.addEventListener('touchend', _this.handleTouchEnd);
-        }
       }
     };
     this.handleMouseMove = function (e) {
@@ -52,13 +42,9 @@ var Slider = exports.Slider = /** @class */function () {
     this.handleMouseUp = function () {
       _this.isDragging = false;
       document.body.style.userSelect = '';
-      document.removeEventListener('mousemove', _this.handleMouseMove);
-      document.removeEventListener('mouseup', _this.handleMouseUp);
     };
     this.handleTouchEnd = function () {
       _this.isDragging = false;
-      document.removeEventListener('touchmove', _this.handleTouchMove);
-      document.removeEventListener('touchend', _this.handleTouchEnd);
     };
     this.element = element;
     this.options = Object.assign({
@@ -102,10 +88,7 @@ var Slider = exports.Slider = /** @class */function () {
     }
     // 이벤트 리스너 추가
     if (!this.options.disabled) {
-      this.element.addEventListener('mousedown', this.handleMouseDown);
-      this.element.addEventListener('touchstart', this.handleTouchStart, {
-        passive: false
-      });
+      this.enable();
     }
     // 초기 위치 설정
     this.updateHandlePositions();
@@ -309,6 +292,10 @@ var Slider = exports.Slider = /** @class */function () {
     });
     this.element.removeEventListener('mousedown', this.handleMouseDown);
     this.element.removeEventListener('touchstart', this.handleTouchStart);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
   };
   Slider.prototype.enable = function () {
     this.options.disabled = false;
@@ -321,6 +308,10 @@ var Slider = exports.Slider = /** @class */function () {
     this.element.addEventListener('touchstart', this.handleTouchStart, {
       passive: false
     });
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+    document.addEventListener('touchmove', this.handleTouchMove);
+    document.addEventListener('touchend', this.handleTouchEnd);
   };
   Slider.prototype.destroy = function () {
     // 모든 이벤트 리스너 제거

package/dist/cjs/assets/scripts/tab.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = void 0;
+var _types = require("swiper/types");
+var Tab = exports.Tab = /** @class */function () {
+  function Tab(element) {
+    this.swiper = null;
+    if (!element) {
+      throw new Error('Tab element is required');
+    }
+    if (!(element instanceof HTMLElement)) {
+      throw new Error('Invalid element type provided to Tab');
+    }
+    this.element = element;
+    this.init();
+  }
+  Tab.prototype.init = function () {
+    this.swiper = new _types.Swiper(this.element, {
+      slidesPerView: 'auto',
+      spaceBetween: 8,
+      grabCursor: true,
+      loop: false,
+      freeMode: {
+        enabled: true,
+        sticky: false
+      },
+      mousewheel: true
+    });
+  };
+  Tab.prototype.destroy = function () {
+    if (this.swiper) {
+      this.swiper.destroy();
+      this.swiper = null;
+    }
+  };
+  return Tab;
+}();

package/dist/cjs/src/components/date-picker/RangeDatePicker.js

@@ -35,7 +35,7 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       endDateOptions.onChangeDate(newDate);
     }
     onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
-      type: 'end',
+      type: type,
       errorType: 'reset',
       newDate: newDate,
       currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
@@ -45,15 +45,25 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
-    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) return;
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      var newDate_1 = type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate;
+      var currentDate = type === 'start' ? endDateOptions.currentDate : startDateOptions.currentDate;
+      onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+        type: type,
+        errorType: 'overlap',
+        newDate: newDate_1,
+        currentDate: currentDate
+      });
+      return;
+    }
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
     var newDate = '';
     if (type === 'start') {
-      newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
-    } else {
       newDate = (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
+    } else {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
     }
     onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
       type: type,
@@ -63,7 +73,7 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     });
   }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
   var validateDateType = function (date) {
-    return !isNaN(Date.parse(date));
+    return (0, _moment.default)(date).isValid();
   };
   (0, _react.useEffect)(function () {
     var _a;
@@ -72,17 +82,17 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       resetDateAndAlert('start');
       return;
     }
+    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
     if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
       return;
     }
-    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     var _b = validationOption.setting,
       unit = _b.unit,
       period = _b.period;
     var isValidPeriod = (0, _moment.default)(startDateOptions.currentDate).isSameOrAfter((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit));
-    if (isOverDate) {
-      changeSettingDateAndAlert('start');
-    }
     if (!isValidPeriod) {
       changeSettingDateAndAlert('start', !isValidPeriod);
     }
@@ -94,18 +104,21 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       resetDateAndAlert('end');
       return;
     }
-    var isNotTodayEndDate = endDateOptions.currentDate !== (0, _utils.getDateFormat)();
-    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+    var isNotTodayEndDate = !(0, _moment.default)(endDateOptions.currentDate).isSame((0, _moment.default)(), 'day');
+    if (!isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
       return;
     }
-    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     var _b = validationOption.setting,
       unit = _b.unit,
       period = _b.period;
     var isValidPeriod = (0, _moment.default)(endDateOptions.currentDate).isSameOrBefore((0, _moment.default)(startDateOptions.currentDate).add(period, unit));
-    if (isOverDate) {
-      changeSettingDateAndAlert('end');
-    }
     if (!isValidPeriod) {
       changeSettingDateAndAlert('end', !isValidPeriod);
     }

package/dist/cjs/src/components/toggle/Toggle.js

@@ -39,7 +39,6 @@ var Toggle = function (_a) {
     props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
   return (0, _jsxRuntime.jsxs)("label", __assign({
     className: (0, _classnames.default)('ncua-toggle', "ncua-toggle--".concat(size), {
-      'ncua-toggle--checked': props === null || props === void 0 ? void 0 : props.checked,
       'ncua-toggle--disabled': disabled
     }, className)
   }, {

package/dist/esm/assets/scripts/datePicker.js

@@ -0,0 +1,243 @@
+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);
+};
+// Constants
+var CONSTANTS = {
+  ICON_SIZES: {
+    sm: '14',
+    md: '16'
+  },
+  CLASS_NAMES: {
+    RANGE_WRAPPER: 'ncua-range-date-picker',
+    RANGE_WITH_BUTTONS: 'ncua-range-date-picker-with-buttons',
+    DATE_PICKER: 'ncua-date-picker',
+    DATE_PICKER_INPUT: 'ncua-date-picker__input',
+    DATE_PICKER_ICO: 'ncua-date-picker__ico',
+    BUTTON_GROUP: 'ncua-button-group',
+    BUTTON_GROUP_HAS_BORDER: 'has-border',
+    BUTTON: 'ncua-button-group__item'
+  },
+  FORMATS: {
+    DATE: 'YYYY-MM-DD'
+  },
+  ERROR_MESSAGES: {
+    FLATPICKR_NOT_LOADED: 'flatpickr 라이브러리가 로드되지 않았습니다.',
+    MOMENT_NOT_LOADED: 'moment 라이브러리가 로드되지 않았습니다.'
+  }
+};
+var DatePicker = /** @class */function () {
+  function DatePicker(wrapper, options) {
+    this.flatpickrInstances = [];
+    this.currentButton = null;
+    var _a = options.buttons,
+      buttons = _a === void 0 ? [] : _a,
+      size = options.size,
+      datePickerOptions = options.datePickerOptions;
+    this.validationDependencies((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0);
+    this.element = wrapper;
+    this.datePickerOptions = datePickerOptions;
+    this.buttons = buttons;
+    this.size = size;
+    this.init();
+  }
+  DatePicker.prototype.init = function () {
+    this.element.innerHTML = '';
+    this.initializeWrapper();
+    this.initButtonGroup();
+    this.initDatePicker();
+  };
+  DatePicker.prototype.validationDependencies = function (hasButtons) {
+    if (typeof flatpickr === 'undefined') {
+      throw new Error(CONSTANTS.ERROR_MESSAGES.FLATPICKR_NOT_LOADED);
+    }
+    if (hasButtons && typeof moment === 'undefined') {
+      throw new Error(CONSTANTS.ERROR_MESSAGES.MOMENT_NOT_LOADED);
+    }
+  };
+  DatePicker.prototype.initializeWrapper = function () {
+    if (this.datePickerOptions.length < 2) return;
+    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WRAPPER);
+  };
+  DatePicker.prototype.initButtonGroup = function () {
+    var _this = this;
+    if (this.buttons.length === 0) return;
+    this.element.classList.add(CONSTANTS.CLASS_NAMES.RANGE_WITH_BUTTONS);
+    var createButtonWrapperElement = function () {
+      var wrapper = document.createElement('div');
+      wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP_HAS_BORDER, " ").concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP, "--").concat(_this.size);
+      return wrapper;
+    };
+    var appendButtons = function (wrapper) {
+      _this.buttons.forEach(function (button) {
+        var buttonElement = _this.createButtonElement(button);
+        wrapper.appendChild(buttonElement);
+      });
+    };
+    var wrapper = createButtonWrapperElement();
+    appendButtons(wrapper);
+    wrapper.addEventListener('click', this.updateDateWithButton.bind(this));
+    this.element.appendChild(wrapper);
+  };
+  DatePicker.prototype.createButtonElement = function (button) {
+    if (button.isCurrent) {
+      this.currentButton = button;
+    }
+    var buttonElement = document.createElement('button');
+    buttonElement.className = "".concat(CONSTANTS.CLASS_NAMES.BUTTON, " ").concat(button.isCurrent ? 'is-current' : '');
+    buttonElement.textContent = button.text;
+    buttonElement.type = 'button';
+    return buttonElement;
+  };
+  DatePicker.prototype.reRenderButtonGroup = function (buttons) {
+    var _this = this;
+    var buttonGroup = this.element.querySelector(".".concat(CONSTANTS.CLASS_NAMES.BUTTON_GROUP));
+    if (!buttonGroup) return;
+    buttonGroup.innerHTML = '';
+    buttons.forEach(function (button) {
+      if (button.isCurrent) {
+        _this.currentButton = button;
+      }
+      buttonGroup.appendChild(_this.createButtonElement(button));
+    });
+    this.buttons = buttons;
+  };
+  DatePicker.prototype.initDatePicker = function () {
+    var _this = this;
+    var datePickerOptions = this.datePickerOptions;
+    var createWrapperElement = function (size) {
+      var wrapper = document.createElement('div');
+      wrapper.className = "".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, " ").concat(CONSTANTS.CLASS_NAMES.DATE_PICKER, "--").concat(size);
+      return wrapper;
+    };
+    var createInput = function (elementId) {
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.id = elementId;
+      input.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_INPUT;
+      return input;
+    };
+    var createIcon = function (size) {
+      var getCalendarIconSvg = function (size) {
+        return "\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" fill=\"none\">\n        <path\n          d=\"M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z\"\n          stroke=\"black\"\n          stroke-width=\"1.33333\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>");
+      };
+      var ico = document.createElement('span');
+      ico.className = CONSTANTS.CLASS_NAMES.DATE_PICKER_ICO;
+      ico.innerHTML = getCalendarIconSvg(CONSTANTS.ICON_SIZES[size]);
+      return ico;
+    };
+    var insertSeparator = function () {
+      var span = document.createElement('span');
+      span.textContent = '-';
+      _this.element.insertBefore(span, _this.element.querySelectorAll(".".concat(CONSTANTS.CLASS_NAMES.DATE_PICKER))[1]);
+    };
+    var createDatePickerElement = function (datePickerOption, index) {
+      var wrapper = createWrapperElement(_this.size);
+      var input = createInput(datePickerOption.element);
+      wrapper.appendChild(input);
+      wrapper.appendChild(createIcon(_this.size));
+      wrapper.addEventListener('click', function () {
+        _this.buttons.forEach(function (button) {
+          return button.isCurrent = false;
+        });
+        _this.currentButton = null;
+        _this.reRenderButtonGroup(_this.buttons);
+      });
+      _this.element.appendChild(wrapper);
+      if (index > 0) {
+        insertSeparator();
+      }
+      return _this.initializeFlatpickr(input, datePickerOption.options, wrapper);
+    };
+    var createFlatpickrInstances = function (datePickerOptions) {
+      return datePickerOptions.map(function (datePickerOption, index) {
+        return createDatePickerElement(datePickerOption, index);
+      });
+    };
+    var calcInitDates = function (datePickerOptions) {
+      var _a;
+      if (_this.buttons.length > 0) {
+        var _b = (_a = _this.buttons.find(function (button) {
+            return button.isCurrent;
+          })) !== null && _a !== void 0 ? _a : {
+            period: 0,
+            unit: 'days'
+          },
+          period = _b.period,
+          unit = _b.unit;
+        return [moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE), moment().format(CONSTANTS.FORMATS.DATE)];
+      }
+      return datePickerOptions.map(function (datePickerOption) {
+        var _a;
+        if ((_a = datePickerOption.options) === null || _a === void 0 ? void 0 : _a.defaultDate) {
+          return moment(datePickerOption.options.defaultDate.toString()).format(CONSTANTS.FORMATS.DATE);
+        }
+        return moment().format(CONSTANTS.FORMATS.DATE);
+      });
+    };
+    this.flatpickrInstances = createFlatpickrInstances(datePickerOptions);
+    var dates = calcInitDates(datePickerOptions);
+    this.setMultipleDates(dates);
+  };
+  DatePicker.prototype.initializeFlatpickr = function (input, options, wrapper) {
+    return flatpickr(input, __assign(__assign({}, options), {
+      appendTo: wrapper
+    }));
+  };
+  DatePicker.prototype.updateDateWithButton = function (e) {
+    var _this = this;
+    var target = e.target;
+    if (!target.classList.contains(CONSTANTS.CLASS_NAMES.BUTTON)) return;
+    var clickedButton = this.buttons.find(function (button) {
+      return button.text === target.textContent;
+    });
+    if (!clickedButton || clickedButton === this.currentButton) return;
+    // 날짜 계산
+    var calculateDates = function () {
+      var period = clickedButton.period,
+        unit = clickedButton.unit;
+      var dates = [];
+      var startDate = period ? moment().subtract(period, unit).format(CONSTANTS.FORMATS.DATE) : moment().format(CONSTANTS.FORMATS.DATE);
+      dates.push(startDate);
+      if (_this.datePickerOptions.length > 1) {
+        var endDate = moment().format(CONSTANTS.FORMATS.DATE);
+        dates.push(endDate);
+      }
+      return dates;
+    };
+    var updateButtonState = function () {
+      return _this.buttons.map(function (button) {
+        return __assign(__assign({}, button), {
+          isCurrent: button.text === (clickedButton === null || clickedButton === void 0 ? void 0 : clickedButton.text)
+        });
+      });
+    };
+    this.currentButton = clickedButton;
+    this.reRenderButtonGroup(updateButtonState());
+    this.setMultipleDates(calculateDates());
+  };
+  DatePicker.prototype.setMultipleDates = function (dates) {
+    var _this = this;
+    dates.forEach(function (date, index) {
+      _this.flatpickrInstances[index].setDate(date, true);
+      _this.flatpickrInstances[index].redraw();
+    });
+  };
+  DatePicker.prototype.setDate = function (dates) {
+    this.setMultipleDates(dates);
+  };
+  DatePicker.prototype.getDates = function () {
+    return this.flatpickrInstances.flatMap(function (instance) {
+      return instance.selectedDates;
+    });
+  };
+  return DatePicker;
+}();
+export { DatePicker };
+window.DatePicker = DatePicker;

package/dist/esm/assets/scripts/index.js

@@ -1,2 +1,8 @@
-export * from './test';
-export * from './slider';
+import { DatePicker } from './datePicker';
+import { Slider } from './slider';
+import { Tab } from './tab';
+window.ncua = {
+  Slider: Slider,
+  Tab: Tab,
+  DatePicker: DatePicker
+};

package/dist/esm/assets/scripts/slider.js

@@ -11,9 +11,6 @@ var Slider = /** @class */function () {
       e.preventDefault();
       _this.handleInteractionStart(e.clientX, targetElement);
       if (_this.isDragging) {
-        // 드래그 이벤트 추가
-        document.addEventListener('mousemove', _this.handleMouseMove);
-        document.addEventListener('mouseup', _this.handleMouseUp);
         // 텍스트 선택 방지
         document.body.style.userSelect = 'none';
       }
@@ -23,13 +20,6 @@ var Slider = /** @class */function () {
         var targetElement = e.target;
         e.preventDefault();
         _this.handleInteractionStart(e.touches[0].clientX, targetElement);
-        if (_this.isDragging) {
-          // 드래그 이벤트 추가
-          document.addEventListener('touchmove', _this.handleTouchMove, {
-            passive: false
-          });
-          document.addEventListener('touchend', _this.handleTouchEnd);
-        }
       }
     };
     this.handleMouseMove = function (e) {
@@ -46,13 +36,9 @@ var Slider = /** @class */function () {
     this.handleMouseUp = function () {
       _this.isDragging = false;
       document.body.style.userSelect = '';
-      document.removeEventListener('mousemove', _this.handleMouseMove);
-      document.removeEventListener('mouseup', _this.handleMouseUp);
     };
     this.handleTouchEnd = function () {
       _this.isDragging = false;
-      document.removeEventListener('touchmove', _this.handleTouchMove);
-      document.removeEventListener('touchend', _this.handleTouchEnd);
     };
     this.element = element;
     this.options = Object.assign({
@@ -96,10 +82,7 @@ var Slider = /** @class */function () {
     }
     // 이벤트 리스너 추가
     if (!this.options.disabled) {
-      this.element.addEventListener('mousedown', this.handleMouseDown);
-      this.element.addEventListener('touchstart', this.handleTouchStart, {
-        passive: false
-      });
+      this.enable();
     }
     // 초기 위치 설정
     this.updateHandlePositions();
@@ -303,6 +286,10 @@ var Slider = /** @class */function () {
     });
     this.element.removeEventListener('mousedown', this.handleMouseDown);
     this.element.removeEventListener('touchstart', this.handleTouchStart);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
   };
   Slider.prototype.enable = function () {
     this.options.disabled = false;
@@ -315,6 +302,10 @@ var Slider = /** @class */function () {
     this.element.addEventListener('touchstart', this.handleTouchStart, {
       passive: false
     });
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+    document.addEventListener('touchmove', this.handleTouchMove);
+    document.addEventListener('touchend', this.handleTouchEnd);
   };
   Slider.prototype.destroy = function () {
     // 모든 이벤트 리스너 제거

package/dist/esm/assets/scripts/tab.js

@@ -0,0 +1,35 @@
+import { Swiper } from 'swiper/types';
+var Tab = /** @class */function () {
+  function Tab(element) {
+    this.swiper = null;
+    if (!element) {
+      throw new Error('Tab element is required');
+    }
+    if (!(element instanceof HTMLElement)) {
+      throw new Error('Invalid element type provided to Tab');
+    }
+    this.element = element;
+    this.init();
+  }
+  Tab.prototype.init = function () {
+    this.swiper = new Swiper(this.element, {
+      slidesPerView: 'auto',
+      spaceBetween: 8,
+      grabCursor: true,
+      loop: false,
+      freeMode: {
+        enabled: true,
+        sticky: false
+      },
+      mousewheel: true
+    });
+  };
+  Tab.prototype.destroy = function () {
+    if (this.swiper) {
+      this.swiper.destroy();
+      this.swiper = null;
+    }
+  };
+  return Tab;
+}();
+export { Tab };

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

@@ -28,7 +28,7 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       endDateOptions.onChangeDate(newDate);
     }
     onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
-      type: 'end',
+      type: type,
       errorType: 'reset',
       newDate: newDate,
       currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
@@ -38,15 +38,25 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
-    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) return;
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      var newDate_1 = type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate;
+      var currentDate = type === 'start' ? endDateOptions.currentDate : startDateOptions.currentDate;
+      onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+        type: type,
+        errorType: 'overlap',
+        newDate: newDate_1,
+        currentDate: currentDate
+      });
+      return;
+    }
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
     var newDate = '';
     if (type === 'start') {
-      newDate = getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
-    } else {
       newDate = getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+    } else {
+      newDate = getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
     }
     onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
       type: type,
@@ -56,7 +66,7 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     });
   }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
   var validateDateType = function (date) {
-    return !isNaN(Date.parse(date));
+    return moment(date).isValid();
   };
   useEffect(function () {
     var _a;
@@ -65,17 +75,17 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       resetDateAndAlert('start');
       return;
     }
+    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
     if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
       return;
     }
-    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     var _b = validationOption.setting,
       unit = _b.unit,
       period = _b.period;
     var isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
-    if (isOverDate) {
-      changeSettingDateAndAlert('start');
-    }
     if (!isValidPeriod) {
       changeSettingDateAndAlert('start', !isValidPeriod);
     }
@@ -87,18 +97,21 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       resetDateAndAlert('end');
       return;
     }
-    var isNotTodayEndDate = endDateOptions.currentDate !== getDateFormat();
-    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+    var isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
+    if (!isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
       return;
     }
-    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     var _b = validationOption.setting,
       unit = _b.unit,
       period = _b.period;
     var isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
-    if (isOverDate) {
-      changeSettingDateAndAlert('end');
-    }
     if (!isValidPeriod) {
       changeSettingDateAndAlert('end', !isValidPeriod);
     }

package/dist/esm/src/components/toggle/Toggle.js

@@ -32,7 +32,6 @@ export var Toggle = function (_a) {
     props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
   return _jsxs("label", __assign({
     className: classNames('ncua-toggle', "ncua-toggle--".concat(size), {
-      'ncua-toggle--checked': props === null || props === void 0 ? void 0 : props.checked,
       'ncua-toggle--disabled': disabled
     }, className)
   }, {

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

@@ -0,0 +1,49 @@
+export type DatePickerSize = 'sm' | 'md';
+interface Options {
+    buttons?: DatePickerButton[];
+    size: DatePickerSize;
+    datePickerOptions: DatePickerOptionWrapper[];
+}
+interface DatePickerOptionWrapper {
+    element: string;
+    options: DatePickerOption;
+}
+interface DatePickerOption {
+    defaultDate?: string | Date | Date[];
+    enableTime?: boolean;
+    dateFormat?: string;
+    locale?: string;
+    mode?: 'single' | 'range' | 'multiple';
+    maxDate?: string | Date;
+    minDate?: string | Date;
+    onChange?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+}
+interface DatePickerButton {
+    text: string;
+    period: number;
+    unit: 'days' | 'weeks' | 'months' | 'years';
+    isCurrent: boolean;
+}
+export declare class DatePicker {
+    private readonly element;
+    private readonly datePickerOptions;
+    private readonly size;
+    private buttons;
+    private flatpickrInstances;
+    private currentButton;
+    constructor(wrapper: HTMLElement, options: Options);
+    private init;
+    private validationDependencies;
+    private initializeWrapper;
+    private initButtonGroup;
+    private createButtonElement;
+    private reRenderButtonGroup;
+    private initDatePicker;
+    private initializeFlatpickr;
+    private updateDateWithButton;
+    private setMultipleDates;
+    setDate(dates: string[]): void;
+    getDates(): Date[];
+}
+export {};
+//# sourceMappingURL=datePicker.d.ts.map

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

@@ -1,3 +1,7 @@
-export * from './test';
-export * from './slider';
+declare global {
+    interface Window {
+        ncua: Object;
+    }
+}
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,8 @@
+export declare class Tab {
+    private element;
+    private swiper;
+    constructor(element: HTMLElement | null);
+    private init;
+    destroy(): void;
+}
+//# sourceMappingURL=tab.d.ts.map

package/dist/types/src/components/badge/BadgeGroup.d.ts

@@ -1,4 +1,4 @@
-import { ColorTone } from 'ui-admin/constant/color';
+import { ColorTone } from '@ncds/ui-admin/constant/color';
 import { BadgeProps } from '.';
 import { Size } from '../../../constant/size';
 import { SideSlotType } from '../../types/side-slot';

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

@@ -1209,7 +1209,7 @@ button {
   border: 1px solid var(--gray-200);
 }
 .ncua-input__field--xs {
-  padding: 5px 10px;
+  padding: 4px 10px;
 }
 .ncua-input__field--md {
   padding: 6px 12px;
@@ -1363,7 +1363,7 @@ button {
   border: 1px solid var(--gray-200);
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
-  padding: 5px 10px;
+  padding: 4px 10px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--md {
   padding: 6px 12px;
@@ -1387,7 +1387,7 @@ button {
   border: 1px solid var(--gray-200);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
-  padding: 5px 10px;
+  padding: 4px 10px;
 }
 .ncua-input__trailing-button .ncua-input__button--md {
   padding: 6px 12px;
@@ -1402,7 +1402,7 @@ button {
   cursor: pointer;
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
-  padding: 4px 10px;
+  padding: 5px 10px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
@@ -2709,7 +2709,7 @@ button {
   font-size: var(--toggle-sm-font-size);
   line-height: var(--toggle-sm-line-height);
 }
-.ncua-toggle--sm.ncua-toggle--checked .ncua-toggle__slider {
+.ncua-toggle--sm .ncua-toggle__input:checked + .ncua-toggle__switch .ncua-toggle__slider {
   transform: translateX(var(--toggle-sm-translate));
 }
 .ncua-toggle--md .ncua-toggle__switch {
@@ -2727,19 +2727,19 @@ button {
   font-size: var(--toggle-md-font-size);
   line-height: var(--toggle-md-line-height);
 }
-.ncua-toggle--md.ncua-toggle--checked .ncua-toggle__slider {
+.ncua-toggle--md .ncua-toggle__input:checked + .ncua-toggle__switch .ncua-toggle__slider {
   transform: translateX(var(--toggle-md-translate));
 }
 .ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
   background-color: var(--gray-300);
 }
-.ncua-toggle--checked .ncua-toggle__switch {
-  background-color: var(--green-500);
-}
-.ncua-toggle--checked:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
+.ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__input:checked + .ncua-toggle__switch {
   background-color: var(--green-600);
 }
-.ncua-toggle--checked__input:focus + .ncua-toggle__switch {
+.ncua-toggle__input:checked + .ncua-toggle__switch {
+  background-color: var(--green-500);
+}
+.ncua-toggle__input:checked:focus + .ncua-toggle__switch {
   box-shadow: var(--toggle-checked-focus-shadow);
 }
 .ncua-toggle__input:focus + .ncua-toggle__switch {
@@ -3053,7 +3053,6 @@ button {
   display: flex;
   align-items: center;
   height: 28px;
-  padding: 4px 6px;
   color: var(--gray-400);
   font-weight: var(--font-weights-commerce-sans-1);
   cursor: pointer;
@@ -3065,7 +3064,7 @@ button {
 .ncua-breadcrumb__list-item--active {
   color: var(--gray-600);
 }
-.ncua-breadcrumb__list-item:hover {
+.ncua-breadcrumb__list-item:hover > .ncua-breadcrumb__item {
   background-color: var(--gray-100);
   border-radius: 4px;
 }
@@ -3081,9 +3080,11 @@ button {
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M6 12L10 8L6 4" stroke="%23D3D4D8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position: center;
+  pointer-events: none;
 }
 .ncua-breadcrumb__item {
   display: flex;
+  padding: 4px 6px;
   align-items: center;
   color: inherit;
   text-decoration: none;
@@ -3191,6 +3192,9 @@ button {
   border-radius: 16px;
   cursor: pointer;
 }
+.ncua-badge-group:hover {
+  text-decoration: none;
+}
 .ncua-badge-group__label {
   margin-left: 8px;
   font-weight: var(--font-weights-commerce-sans-1);

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
     "build": "webpack --node-env production",
     "build:npm": "node build-npm.js",
     "dev": "webpack serve --node-env development --open --hot",
+    "dev:html": "webpack serve --node-env development --open --config webpack.html.config.js",
     "eject": "react-scripts eject",
     "lint": "eslint \"**/*.ts*\"",
     "major": "yarn version --major",

package/dist/cjs/assets/scripts/test.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.test = void 0;
-var test = function () {
-  console.log('test');
-};
-exports.test = test;

package/dist/esm/assets/scripts/test.js

@@ -1,3 +0,0 @@
-export var test = function () {
-  console.log('test');
-};

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

@@ -1,2 +0,0 @@
-export declare const test: () => void;
-//# sourceMappingURL=test.d.ts.map