@sellmate/design-system 1.29.0 → 1.31.0

package/dist/cjs/sd-time-range-picker-selector.cjs.entry.js

@@ -0,0 +1,219 @@
+'use strict';
+
+var index = require('./index-Jr8OU0y9.js');
+var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
+require('./component.field-C7it8cZm.js');
+
+const sdTimeRangePickerSelectorCss = () => `sd-time-range-picker-selector{display:block}sd-time-range-picker-selector .sd-time-range-picker-selector{display:flex;align-items:flex-start;justify-content:center;gap:var(--selector-range-panel-gap);padding:var(--selector-range-padding);overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:var(--sd-system-shadow-spread-sm-x) var(--sd-system-shadow-spread-sm-y) var(--sd-system-shadow-spread-sm-blur) var(--sd-system-shadow-spread-sm-spread) var(--sd-system-shadow-spread-sm-color), var(--sd-system-shadow-spread-md-x) var(--sd-system-shadow-spread-md-y) var(--sd-system-shadow-spread-md-blur) var(--sd-system-shadow-spread-md-spread) var(--sd-system-shadow-spread-md-color)}sd-time-range-picker-selector .sd-time-range-picker-selector__panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-range-section-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading{display:flex;flex-direction:column;align-items:center;gap:var(--selector-range-heading-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading-text{color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:700;text-align:center;white-space:nowrap}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button{width:61px;height:28px;border:var(--selector-border-width) solid var(--selector-border-default);background:var(--selector-bg);color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--selected{z-index:1;border-color:var(--selector-border-focus);color:var(--selector-border-focus)}sd-time-range-picker-selector .sd-time-range-picker-selector__divider{align-self:stretch;width:1px;background:var(--selector-bg-disabled)}sd-time-range-picker-selector .sd-time-range-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:0 16px;background:var(--selector-bg)}sd-time-range-picker-selector .sd-time-range-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:var(--selector-border-width) solid var(--selector-border-default);border-radius:4px;background:var(--selector-bg);color:var(--selector-text-default);font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-range-picker-selector .sd-time-range-picker-selector__colon{width:var(--selector-colon-size);color:var(--selector-range-heading-color);font-size:16px;line-height:16px;text-align:center}`;
+
+const SdTimeRangePickerSelector = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate", 7);
+    }
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value = null;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem = false;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder = 'strict';
+    /** 시간 범위 변경 시 발생합니다. */
+    update;
+    editingKey = null;
+    inputDraft = {};
+    autoAdjusted = null;
+    getRange() {
+        return this.value ?? ['00:00', '23:59'];
+    }
+    getParts(side) {
+        const [start, end] = this.getRange();
+        return sdTimePicker_config.parseTimeValue(side === 'start' ? start : end);
+    }
+    getMeridiem(side) {
+        return this.getParts(side).hour >= 12 ? 'PM' : 'AM';
+    }
+    getDisplayHour(side) {
+        const { hour } = this.getParts(side);
+        if (!this.useMeridiem)
+            return hour;
+        const displayHour = hour % 12;
+        return displayHour === 0 ? 12 : displayHour;
+    }
+    emitSide(side, hour, minute, direction = 'unknown') {
+        const [start, end] = this.getRange();
+        const next = sdTimePicker_config.formatTimeValue(hour, minute);
+        this.update.emit(this.normalizeNextRange(side === 'start' ? [next, end] : [start, next], side, direction));
+    }
+    getTimeMinutes(value) {
+        const { hour, minute } = sdTimePicker_config.parseTimeValue(value);
+        return hour * 60 + minute;
+    }
+    normalizeNextRange(range, changedSide, direction) {
+        if (this.rangeOrder === 'allow-cross-day')
+            return range;
+        const [start, end] = range;
+        const [currentStart, currentEnd] = this.getRange();
+        if (this.getTimeMinutes(start) <= this.getTimeMinutes(end)) {
+            const shouldKeepSynced = this.autoAdjusted?.side === changedSide &&
+                currentStart === currentEnd &&
+                start !== end &&
+                (direction === 'unknown' || this.autoAdjusted.direction === direction);
+            if (shouldKeepSynced) {
+                return changedSide === 'start' ? [start, start] : [end, end];
+            }
+            this.autoAdjusted = null;
+            return range;
+        }
+        this.autoAdjusted = {
+            side: changedSide,
+            direction: changedSide === 'start' ? 'increase' : 'decrease',
+        };
+        return changedSide === 'start' ? [start, start] : [end, end];
+    }
+    getEditingKey(side, part) {
+        return `${side}-${part}`;
+    }
+    sanitizeInput(value) {
+        return value.replace(/\D/g, '').slice(0, 2);
+    }
+    setDraft(key, value) {
+        this.inputDraft = { ...this.inputDraft, [key]: value };
+    }
+    beginEdit(side, part, value) {
+        const key = this.getEditingKey(side, part);
+        this.editingKey = key;
+        this.setDraft(key, String(value).padStart(2, '0'));
+    }
+    commitHourDraft(side, draft) {
+        const raw = sdTimePicker_config.clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
+        const { minute } = this.getParts(side);
+        const meridiem = this.getMeridiem(side);
+        const nextHour = this.useMeridiem
+            ? meridiem === 'PM'
+                ? raw === 12
+                    ? 12
+                    : raw + 12
+                : raw === 12
+                    ? 0
+                    : raw
+            : raw;
+        this.emitSide(side, nextHour, minute);
+        return raw;
+    }
+    commitMinuteDraft(side, draft) {
+        const { hour } = this.getParts(side);
+        const nextMinute = sdTimePicker_config.clampTimePart(Number(draft), 0, 59);
+        this.emitSide(side, hour, nextMinute);
+        return nextMinute;
+    }
+    endEdit(side, part) {
+        const draft = this.inputDraft[this.getEditingKey(side, part)];
+        if (part === 'hour' && draft != null && draft !== '') {
+            this.commitHourDraft(side, draft);
+        }
+        if (part === 'minute' && draft != null && draft !== '') {
+            this.commitMinuteDraft(side, draft);
+        }
+        this.editingKey = null;
+        this.inputDraft = {};
+    }
+    setMeridiem(side, meridiem) {
+        const current = this.getMeridiem(side);
+        if (current === meridiem)
+            return;
+        const { hour, minute } = this.getParts(side);
+        this.emitSide(side, meridiem === 'AM' ? hour - 12 : hour + 12, minute);
+    }
+    changeHour(side, delta) {
+        const { hour, minute } = this.getParts(side);
+        this.emitSide(side, (hour + delta + 24) % 24, minute, delta > 0 ? 'increase' : 'decrease');
+    }
+    changeMinute(side, delta) {
+        const { hour, minute } = this.getParts(side);
+        const next = minute + delta;
+        if (next > 59) {
+            this.emitSide(side, (hour + 1) % 24, next - 60, delta > 0 ? 'increase' : 'decrease');
+            return;
+        }
+        if (next < 0) {
+            this.emitSide(side, (hour + 23) % 24, next + 60, delta > 0 ? 'increase' : 'decrease');
+            return;
+        }
+        this.emitSide(side, hour, next, delta > 0 ? 'increase' : 'decrease');
+    }
+    handleHourInput = (side, event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft(this.getEditingKey(side, 'hour'), draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const raw = this.commitHourDraft(side, draft);
+        const displayDraft = Number(draft) === raw ? draft : String(raw);
+        target.value = displayDraft;
+        this.setDraft(this.getEditingKey(side, 'hour'), displayDraft);
+    };
+    handleMinuteInput = (side, event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft(this.getEditingKey(side, 'minute'), draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const nextMinute = this.commitMinuteDraft(side, draft);
+        const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
+        target.value = displayDraft;
+        this.setDraft(this.getEditingKey(side, 'minute'), displayDraft);
+    };
+    renderMeridiemButton(side, label, meridiem, position) {
+        const selected = this.getMeridiem(side) === meridiem;
+        return (index.h("button", { type: "button", class: {
+                'sd-time-range-picker-selector__meridiem-button': true,
+                'sd-time-range-picker-selector__meridiem-button--selected': selected,
+                [`sd-time-range-picker-selector__meridiem-button--${position}`]: true,
+            }, onClick: () => this.setMeridiem(side, meridiem) }, label));
+    }
+    renderColumn(side, type) {
+        const isHour = type === 'hour';
+        const { minute } = this.getParts(side);
+        const value = isHour ? this.getDisplayHour(side) : minute;
+        const editingKey = this.getEditingKey(side, type);
+        const displayValue = this.editingKey === editingKey
+            ? (this.inputDraft[editingKey] ?? '')
+            : String(value).padStart(2, '0');
+        return (index.h("div", { class: "sd-time-range-picker-selector__column" }, index.h("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'} 증가`, onSdClick: () => isHour ? this.changeHour(side, 1) : this.changeMinute(side, this.minuteStep) }), index.h("input", { class: "sd-time-range-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(side, type, value), onBlur: () => this.endEdit(side, type), onInput: event => isHour ? this.handleHourInput(side, event) : this.handleMinuteInput(side, event), "aria-label": `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'}` }), index.h("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'} 감소`, onSdClick: () => isHour ? this.changeHour(side, -1) : this.changeMinute(side, -this.minuteStep) })));
+    }
+    renderPanel(side, title) {
+        return (index.h("div", { class: "sd-time-range-picker-selector__panel" }, index.h("div", { class: "sd-time-range-picker-selector__heading" }, index.h("div", { class: "sd-time-range-picker-selector__heading-text" }, title), this.useMeridiem && (index.h("div", { class: "sd-time-range-picker-selector__meridiem-group" }, this.renderMeridiemButton(side, '오전', 'AM', 'first'), this.renderMeridiemButton(side, '오후', 'PM', 'end')))), index.h("div", { class: "sd-time-range-picker-selector__time" }, this.renderColumn(side, 'hour'), index.h("span", { class: "sd-time-range-picker-selector__colon" }, ":"), this.renderColumn(side, 'minute'))));
+    }
+    render() {
+        const cssVars = {
+            '--selector-bg': sdTimePicker_config.TIMEPICKER_SELECTOR.bg,
+            '--selector-radius': `${sdTimePicker_config.TIMEPICKER_SELECTOR.radius}px`,
+            '--selector-range-padding': `${sdTimePicker_config.TIMEPICKER_SELECTOR.range.paddingXY}px`,
+            '--selector-range-panel-gap': `${sdTimePicker_config.TIMEPICKER_SELECTOR.range.panelGap}px`,
+            '--selector-range-section-gap': `${sdTimePicker_config.TIMEPICKER_SELECTOR.range.section.gap}px`,
+            '--selector-range-heading-gap': `${sdTimePicker_config.TIMEPICKER_SELECTOR.range.heading.gap}px`,
+            '--selector-range-heading-color': sdTimePicker_config.TIMEPICKER_SELECTOR.range.heading.color,
+            '--selector-time-gap': `${sdTimePicker_config.TIMEPICKER_SELECTOR.time.gap}px`,
+            '--selector-time-column-gap': `${sdTimePicker_config.TIMEPICKER_SELECTOR.time.column.gap}px`,
+            '--selector-input-width': `${sdTimePicker_config.TIMEPICKER_SELECTOR.inputWidth}px`,
+            '--selector-colon-size': `${sdTimePicker_config.TIMEPICKER_SELECTOR.colonSize}px`,
+            '--selector-border-width': `${sdTimePicker_config.TIMEPICKER_COLORS.border.width}px`,
+            '--selector-border-default': sdTimePicker_config.TIMEPICKER_COLORS.border.default,
+            '--selector-border-focus': sdTimePicker_config.TIMEPICKER_COLORS.border.focus,
+            '--selector-bg-disabled': sdTimePicker_config.TIMEPICKER_COLORS.bg.disabled,
+            '--selector-text-default': sdTimePicker_config.TIMEPICKER_COLORS.text.default,
+        };
+        return (index.h("div", { key: '2cfcf8240579a3526c40c430e1704c8b10556add', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), index.h("div", { key: 'c48b1c6af7897a64339ce9c1c1da9d8e4a02c612', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
+    }
+};
+SdTimeRangePickerSelector.style = sdTimeRangePickerSelectorCss();
+
+exports.sd_time_range_picker_selector = SdTimeRangePickerSelector;

package/dist/cjs/sd-time-range-picker.cjs.entry.js

@@ -0,0 +1,204 @@
+'use strict';
+
+var index = require('./index-Jr8OU0y9.js');
+var index$1 = require('./index-BUvXpPc3.js');
+var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
+require('./component.field-C7it8cZm.js');
+
+function getTimeMinutes(value) {
+    const { hour, minute } = sdTimePicker_config.parseTimeValue(value);
+    return hour * 60 + minute;
+}
+function normalizeTimeRangeValue(value, rangeOrder = 'strict') {
+    if (value == null)
+        return null;
+    const normalized = value.map(item => {
+        const parsed = sdTimePicker_config.parseTimeValue(item);
+        return sdTimePicker_config.formatTimeValue(parsed.hour, parsed.minute);
+    });
+    if (rangeOrder === 'strict' && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
+        return [normalized[0], normalized[0]];
+    }
+    return normalized;
+}
+function formatTimeRangeDisplay(value, type) {
+    if (value == null || value[0] === '' || value[1] === '')
+        return '';
+    return `${sdTimePicker_config.formatTimeDisplay(value[0], type)} ~ ${sdTimePicker_config.formatTimeDisplay(value[1], type)}`;
+}
+
+const sdTimeRangePickerCss = () => `sd-time-range-picker{display:inline-flex}sd-time-range-picker sd-portal{display:none}sd-time-range-picker .sd-time-range-picker{position:relative;min-width:var(--sd-time-range-picker-min-width);width:100%;height:100%}`;
+
+const SdTimeRangePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
+    }
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return index.getElement(this); }
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value = null;
+    /** 입력 필드 크기 */
+    size = 'sm';
+    /** 표시 타입: default(24시간) / midday(오전·오후) */
+    type = 'default';
+    /** 시간 미선택 시 표시할 placeholder */
+    placeholder = '00:00 ~ 23:59';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 값이 있을 때 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
+    useMeridiem;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder = 'strict';
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    width = '';
+    // sd-field 공통 props
+    /** 레이블 텍스트 */
+    label = '';
+    /** 레이블 너비 */
+    labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
+    addonLabel = '';
+    /** 어드온 정렬 방향 */
+    addonAlign = 'start';
+    /** 필드 하단 힌트 텍스트 */
+    hint = '';
+    /** 에러 메시지 */
+    errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
+    rules = [];
+    /** 에러 상태 여부 */
+    error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
+    /** 레이블 영역 아이콘 */
+    icon = undefined;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps = null;
+    isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
+    /** 시간 범위 선택 시 선택된 범위([시작, 종료])를 전달합니다. */
+    update;
+    /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
+    name = index$1.nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+        this.dropDownShow.emit({ isOpen: newValue });
+    }
+    valueChanged(newValue) {
+        const normalized = normalizeTimeRangeValue(newValue, this.rangeOrder);
+        if (normalized != null && JSON.stringify(normalized) !== JSON.stringify(newValue)) {
+            this.value = normalized;
+        }
+    }
+    rangeOrderChanged() {
+        this.valueChanged(this.value);
+    }
+    /** 유효성 검사를 실행합니다. */
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    /** 값과 유효성 상태를 초기화합니다. */
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    /** 유효성 상태만 초기화합니다. */
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    /** 입력 필드에 포커스를 이동합니다. */
+    async sdFocus() {
+        return this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        this.valueChanged(this.value);
+    }
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdTimeRangePicker.CLOSE_ANIMATION_DURATION);
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        this.value = null;
+        this.update.emit(null);
+    };
+    handleSelect = (event) => {
+        event.stopPropagation();
+        this.value = event.detail;
+        this.update.emit(this.value);
+    };
+    get effectiveUseMeridiem() {
+        return this.useMeridiem ?? this.type === 'midday';
+    }
+    get displayText() {
+        return formatTimeRangeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default');
+    }
+    render() {
+        const sizeTokens = sdTimePicker_config.TIMEPICKER_SIZE_MAP[this.size] ?? sdTimePicker_config.TIMEPICKER_SIZE_MAP.sm;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
+            '--sd-time-range-picker-min-width': `${sizeTokens.minWidth}px`,
+            '--sd-system-color-field-border-default': sdTimePicker_config.TIMEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': sdTimePicker_config.TIMEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': sdTimePicker_config.TIMEPICKER_COLORS.bg.default,
+        };
+        return (index.h("sd-field", { key: '41f3bdb3d08a72f590a25486975962d02cb7bbb8', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'b3b8e08bd44e3f96a733c7341b8ca66c343aaa9d', class: "sd-time-range-picker", ref: el => {
+                this.triggerRef = el;
+            } }, index.h("sd-time-picker-trigger", { key: '39c927a8a3eee331bf253d2faabe9711c2516987', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '33fd2740d81d4dea5af75ed21888e4de213de1e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-range-picker-selector", { key: '554057e0b4a0fd27d570bf9ea955c947cfc5cc50', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "rangeOrder": [{
+                "rangeOrderChanged": 0
+            }]
+    }; }
+};
+SdTimeRangePicker.style = sdTimeRangePickerCss();
+
+exports.sd_time_range_picker = SdTimeRangePicker;

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -243,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '3b7cfb69d072ae23f91b8afcced5d02f553f972b', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const toast = {
 	icon: "16",
@@ -93,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
+        return (index.h("div", { key: 'f452ef18c746e75d0a2139fe14e10e2f6badc09e', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, index.h("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '2f72746f674d8eb2ea60ee4d77421a08c55c519d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '41b1f311746bfae1cc85d262ab5358b3dc63b336', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'c683d9d8a4b0712f70895c9168f1db0ed6de64f9', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '6656f4d296ea8fb284f8eb6cca961a23a993c811', class: "sd-toast__content" }, index.h("span", { key: '17a9b19754c725a6b70e56c23f92e518e7ded0a1', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '0b6da1f070cc31d136a5e366bd8d6655d8bbc291', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '9325d2e1ec659e72858a190077c821475e5ef8f2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'acbb5e957e6fa989412e9824bf2b4f4314afca8c', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const toggle = {
 	height: "28",
@@ -123,7 +123,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'af787ccf9ff1c49242a7f5822e8c97c5a65f2b95', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'e2584e65a77af911136766358ecdaa730b631394', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-DOOcBlLp.js → tooltipArrow-BlrFItn5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-iiJZMzVM.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/cjs/useDatePicker-j06ymWZ_.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var sdDatePicker_config = require('./sd-date-picker.config-CgyNxY03.js');
+
+const CALENDAR_LAYOUT = {
+    bg: sdDatePicker_config.datepickerTokens.datepicker.calendar.bg,
+    paddingXY: sdDatePicker_config.datepickerTokens.datepicker.calendar.paddingXY,
+    gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.gap,
+    radius: sdDatePicker_config.datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.gap,
+        divider: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: sdDatePicker_config.datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: sdDatePicker_config.datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.width,
+        circleSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+        dot: {
+            size: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: sdDatePicker_config.datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: sdDatePicker_config.datepickerTokens.datepicker.calendar.legend.group.gap,
+    },
+};
+const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
+
+const daysInMonth = (date) => {
+    const year = Number(date.split('-')[0]);
+    const month = Number(date.split('-')[1]);
+    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
+
+const getToday = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+const today = getToday();
+
+const useDatePicker = () => {
+    const formatDate = (year, month, day) => {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    };
+    const createCalendar = (year, month) => {
+        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const prevMonthDays = Array.from({ length: firstDayIndex });
+        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
+        const afterMonthDays = Array.from({ length: remainingDays });
+        return { days, prevMonthDays, afterMonthDays };
+    };
+    const calculateYearMonth = (year, month, type) => {
+        let newYear = year;
+        let newMonth = type === 'prev' ? month - 1 : month + 1;
+        if (newMonth < 1) {
+            newYear = year - 1;
+            newMonth = 12;
+        }
+        else if (newMonth > 12) {
+            newYear = year + 1;
+            newMonth = 1;
+        }
+        return { newYear, newMonth };
+    };
+    return { formatDate, createCalendar, calculateYearMonth };
+};
+
+exports.CALENDAR_LAYOUT = CALENDAR_LAYOUT;
+exports.WEEK_LABELS = WEEK_LABELS;
+exports.today = today;
+exports.useDatePicker = useDatePicker;

package/dist/collection/collection-manifest.json

@@ -5,14 +5,12 @@
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-form/sd-form.js",
     "components/sd-guide/sd-guide.js",
-    "components/sd-button/sd-button.js",
-    "components/sd-text-link/sd-text-link.js",
-    "components/sd-popover/sd-popover.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
     "components/sd-action-modal/sd-action-modal.js",
     "components/sd-ghost-button/sd-ghost-button.js",
+    "components/sd-button/sd-button.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-calendar/sd-calendar.js",
@@ -41,6 +39,8 @@
     "components/sd-modal-container/sd-modal-container.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
+    "components/sd-popover/sd-popover.js",
+    "components/sd-text-link/sd-text-link.js",
     "components/sd-popup/sd-popup.js",
     "components/sd-select/sd-select.js",
     "components/sd-select/sd-select-trigger/sd-select-trigger.js",
@@ -50,6 +50,11 @@
     "components/sd-switch/sd-switch.js",
     "components/sd-tabs/sd-tabs.js",
     "components/sd-textarea/sd-textarea.js",
+    "components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.js",
+    "components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.js",
+    "components/sd-time-picker/sd-time-picker.js",
+    "components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.js",
+    "components/sd-time-range-picker/sd-time-range-picker.js",
     "components/sd-toast/sd-toast.js",
     "components/sd-toast-container/sd-toast-container.js",
     "components/sd-toggle/sd-toggle.js",