@ncds/ui-admin 0.0.34 → 0.0.36

package/dist/cjs/src/hooks/useMediaQuery.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaQuery = void 0;
+var _react = require("react");
+var useMediaQuery = function (query, options) {
+  var _a = (0, _react.useState)(false),
+    matches = _a[0],
+    setMatches = _a[1];
+  (0, _react.useEffect)(function () {
+    var mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    var handleChange = function (e) {
+      var _a;
+      setMatches(e.matches);
+      if (e.matches) {
+        (_a = options === null || options === void 0 ? void 0 : options.onMatched) === null || _a === void 0 ? void 0 : _a.call(options);
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query, options === null || options === void 0 ? void 0 : options.onMatched]);
+  return matches;
+};
+exports.useMediaQuery = useMediaQuery;

package/dist/cjs/src/utils/date-picker.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDateFormat = getDateFormat;
+exports.getSubtractDate = getSubtractDate;
+exports.getToday = getToday;
+var _moment = _interopRequireDefault(require("moment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return (0, _moment.default)(date).format('YYYY-MM-DD');
+}
+function getToday() {
+  return (0, _moment.default)().toDate();
+}
+function getSubtractDate(_a) {
+  var _b = _a.date,
+    date = _b === void 0 ? getToday() : _b,
+    period = _a.period,
+    unit = _a.unit;
+  return (0, _moment.default)(date).subtract(period, unit).toDate();
+}

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/{temp → esm}/assets/scripts/index.js

@@ -2,7 +2,7 @@ import { DatePicker } from './datePicker';
 import { Slider } from './slider';
 import { Tab } from './tab';
 window.ncua = {
-    Slider: Slider,
-    Tab: Tab,
-    DatePicker: DatePicker,
-};
+  Slider: Slider,
+  Tab: Tab,
+  DatePicker: DatePicker
+};

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

@@ -0,0 +1,327 @@
+var Slider = /** @class */function () {
+  function Slider(element, options) {
+    var _this = this;
+    this.activeHandle = null;
+    this.isDragging = false;
+    this.handleElements = [];
+    this.progressElement = null;
+    this.trackElement = null;
+    this.handleMouseDown = function (e) {
+      var targetElement = e.target;
+      e.preventDefault();
+      _this.handleInteractionStart(e.clientX, targetElement);
+      if (_this.isDragging) {
+        // 텍스트 선택 방지
+        document.body.style.userSelect = 'none';
+      }
+    };
+    this.handleTouchStart = function (e) {
+      if (e.touches.length > 0) {
+        var targetElement = e.target;
+        e.preventDefault();
+        _this.handleInteractionStart(e.touches[0].clientX, targetElement);
+      }
+    };
+    this.handleMouseMove = function (e) {
+      if (_this.isDragging) {
+        _this.updateValueFromClientX(e.clientX);
+      }
+    };
+    this.handleTouchMove = function (e) {
+      if (_this.isDragging && e.touches.length > 0) {
+        e.preventDefault();
+        _this.updateValueFromClientX(e.touches[0].clientX);
+      }
+    };
+    this.handleMouseUp = function () {
+      _this.isDragging = false;
+      document.body.style.userSelect = '';
+    };
+    this.handleTouchEnd = function () {
+      _this.isDragging = false;
+    };
+    this.element = element;
+    this.options = Object.assign({
+      min: 0,
+      max: 100,
+      step: 1,
+      value: 0,
+      disabled: false
+    }, options);
+    this.value = this.options.value;
+    this.options.min = Number(this.options.min);
+    this.options.max = Number(this.options.max);
+    this.options.step = Number(this.options.step);
+    this.init();
+  }
+  Slider.prototype.init = function () {
+    if (this.options.disabled) {
+      this.element.style.opacity = '0.5';
+    }
+    // 기존 내용 제거
+    this.element.innerHTML = '';
+    // Track 생성
+    this.trackElement = document.createElement('div');
+    this.trackElement.className = 'ncua-slider__track';
+    this.element.appendChild(this.trackElement);
+    // Progress 생성
+    this.progressElement = document.createElement('div');
+    this.progressElement.className = 'ncua-slider__progress';
+    this.element.appendChild(this.progressElement);
+    // Handle(s) 생성
+    if (Array.isArray(this.value)) {
+      // Range slider (2 handles)
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      this.createHandle(0, leftValue);
+      this.createHandle(1, rightValue);
+    } else {
+      // Single slider (1 handle)
+      this.createHandle(0, this.value);
+    }
+    // 이벤트 리스너 추가
+    if (!this.options.disabled) {
+      this.enable();
+    }
+    // 초기 위치 설정
+    this.updateHandlePositions();
+  };
+  Slider.prototype.createHandle = function (index, value) {
+    var _this = this;
+    var handle = document.createElement('div');
+    handle.className = 'ncua-slider__handle';
+    handle.setAttribute('role', 'slider');
+    handle.setAttribute('tabindex', this.options.disabled ? '-1' : '0');
+    handle.setAttribute('aria-valuemin', Array.isArray(this.value) && index === 1 ? String(this.value[0]) : String(this.options.min));
+    handle.setAttribute('aria-valuemax', Array.isArray(this.value) && index === 0 ? String(this.value[1]) : String(this.options.max));
+    handle.setAttribute('aria-valuenow', String(value));
+    handle.setAttribute('aria-disabled', String(this.options.disabled));
+    handle.dataset.index = String(index);
+    handle.addEventListener('focus', function () {
+      _this.activeHandle = index;
+      _this.updateHandleClasses();
+    });
+    handle.addEventListener('blur', function () {
+      _this.activeHandle = null;
+      _this.updateHandleClasses();
+    });
+    if (this.options.labelPosition === 'bottom') {
+      var label = document.createElement('div');
+      label.className = "ncua-slider__label";
+      label.textContent = "".concat(value, "%");
+      handle.appendChild(label);
+    }
+    if (this.options.labelPosition === 'top-floating') {
+      var label = document.createElement('div');
+      label.className = "ncua-slider__label ncua-slider__label--tooltip";
+      label.textContent = "".concat(value, "%");
+      handle.appendChild(label);
+    }
+    this.element.appendChild(handle);
+    this.handleElements[index] = handle;
+  };
+  Slider.prototype.updateHandlePositions = function () {
+    if (Array.isArray(this.value)) {
+      // Range slider
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      var leftPosition = this.getPositionFromValue(leftValue);
+      var rightPosition = this.getPositionFromValue(rightValue);
+      this.handleElements[0].style.left = "".concat(leftPosition, "%");
+      this.handleElements[1].style.left = "".concat(rightPosition, "%");
+      if (this.options.labelPosition) {
+        var leftLabel = this.handleElements[0].querySelector('.ncua-slider__label');
+        var rightLabel = this.handleElements[1].querySelector('.ncua-slider__label');
+        if (leftLabel) leftLabel.textContent = "".concat(leftValue, "%");
+        if (rightLabel) rightLabel.textContent = "".concat(rightValue, "%");
+      }
+      if (this.progressElement) {
+        this.progressElement.style.left = "".concat(leftPosition, "%");
+        this.progressElement.style.width = "".concat(rightPosition - leftPosition, "%");
+      }
+    } else {
+      // Single slider
+      var position = this.getPositionFromValue(this.value);
+      this.handleElements[0].style.left = "".concat(position, "%");
+      if (this.options.labelPosition) {
+        var label = this.handleElements[0].querySelector('.ncua-slider__label');
+        if (label) label.textContent = "".concat(this.value, "%");
+      }
+      if (this.progressElement) {
+        this.progressElement.style.left = '0';
+        this.progressElement.style.width = "".concat(position, "%");
+      }
+    }
+    // ARIA 속성 업데이트
+    this.updateAriaAttributes();
+  };
+  Slider.prototype.updateHandleClasses = function () {
+    var _this = this;
+    this.handleElements.forEach(function (handle, index) {
+      if (index === _this.activeHandle) {
+        handle.classList.add('is-active');
+      } else {
+        handle.classList.remove('is-active');
+      }
+    });
+  };
+  Slider.prototype.updateAriaAttributes = function () {
+    if (Array.isArray(this.value)) {
+      // Range slider
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      this.handleElements[0].setAttribute('aria-valuenow', String(leftValue));
+      this.handleElements[0].setAttribute('aria-valuemax', String(rightValue));
+      this.handleElements[1].setAttribute('aria-valuenow', String(rightValue));
+      this.handleElements[1].setAttribute('aria-valuemin', String(leftValue));
+    } else {
+      // Single slider
+      this.handleElements[0].setAttribute('aria-valuenow', String(this.value));
+    }
+  };
+  Slider.prototype.getPositionFromValue = function (value) {
+    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+  };
+  Slider.prototype.getValueFromPosition = function (position) {
+    var percentage = Math.min(Math.max(position, 0), 100);
+    var exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    var steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
+    return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
+  };
+  Slider.prototype.handleInteractionStart = function (clientX, target) {
+    // 슬라이더 영역 내부를 클릭/터치한 경우
+    if (target.closest('.ncua-slider')) {
+      // 핸들을 직접 클릭/터치했는지 확인
+      var handleElement = target.closest('.ncua-slider__handle');
+      if (handleElement) {
+        if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.max) {
+          this.activeHandle = 0;
+        } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
+          this.activeHandle = 1;
+        } else {
+          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+        }
+      } else {
+        // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
+        var rect = this.element.getBoundingClientRect();
+        var position = (clientX - rect.left) / rect.width * 100;
+        if (Array.isArray(this.value)) {
+          var _a = this.value,
+            leftValue = _a[0],
+            rightValue = _a[1];
+          var leftPosition = this.getPositionFromValue(leftValue);
+          var rightPosition = this.getPositionFromValue(rightValue);
+          if (position < leftPosition) {
+            this.activeHandle = 0;
+          } else if (position > rightPosition) {
+            this.activeHandle = 1;
+          } else {
+            this.activeHandle = Math.abs(position - leftPosition) < Math.abs(position - rightPosition) ? 0 : 1;
+          }
+        } else {
+          this.activeHandle = 0;
+        }
+      }
+      this.updateHandleClasses();
+      this.isDragging = true;
+      // 클릭/터치 위치로 값 업데이트
+      this.updateValueFromClientX(clientX);
+    }
+  };
+  Slider.prototype.updateValueFromClientX = function (clientX) {
+    if (!this.element || this.activeHandle === null) return;
+    var rect = this.element.getBoundingClientRect();
+    var position = (clientX - rect.left) / rect.width * 100;
+    var newValue = this.getValueFromPosition(position);
+    var prevValue = this.value;
+    if (Array.isArray(this.value)) {
+      // Range slider
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      if (this.activeHandle === 0) {
+        // 왼쪽 핸들
+        this.value = [Math.min(newValue, rightValue), rightValue];
+      } else if (this.activeHandle === 1) {
+        // 오른쪽 핸들
+        this.value = [leftValue, Math.max(newValue, leftValue)];
+      }
+    } else {
+      // Single slider
+      this.value = newValue;
+    }
+    this.notifyChange(prevValue);
+    this.updateHandlePositions();
+  };
+  Slider.prototype.notifyChange = function (prevValue) {
+    var _this = this;
+    var isSingle = !Array.isArray(prevValue);
+    var checkChangedSingle = function () {
+      return prevValue !== _this.value;
+    };
+    var checkChangedRange = function () {
+      return Array.isArray(prevValue) && Array.isArray(_this.value) && (prevValue[0] !== _this.value[0] || prevValue[1] !== _this.value[1]);
+    };
+    var isChanged = isSingle ? checkChangedSingle() : checkChangedRange();
+    if (this.options.onChange && isChanged) {
+      this.options.onChange(this.value);
+    }
+  };
+  Slider.prototype.setValue = function (value) {
+    this.value = value;
+    this.updateHandlePositions();
+  };
+  Slider.prototype.getValue = function () {
+    return this.value;
+  };
+  Slider.prototype.disable = function () {
+    this.options.disabled = true;
+    this.element.style.opacity = '0.5';
+    this.handleElements.forEach(function (handle) {
+      handle.setAttribute('tabindex', '-1');
+      handle.setAttribute('aria-disabled', 'true');
+    });
+    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;
+    this.element.style.opacity = '1';
+    this.handleElements.forEach(function (handle) {
+      handle.setAttribute('tabindex', '0');
+      handle.setAttribute('aria-disabled', 'false');
+    });
+    this.element.addEventListener('mousedown', this.handleMouseDown);
+    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 () {
+    // 모든 이벤트 리스너 제거
+    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);
+    // 모든 내용 제거
+    this.element.innerHTML = '';
+    // 참조 정리
+    this.handleElements = [];
+    this.progressElement = null;
+    this.trackElement = null;
+  };
+  return Slider;
+}();
+export { Slider };

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 };