@sellmate/design-system 1.0.78 → 1.2.0

package/dist/esm/sd-date-picker_7.entry.js

@@ -0,0 +1,1227 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-B6cqMQaM.js';
+import { i as inputTokens } from './component.textinput-ByhWX2NK.js';
+
+const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
+
+const SdDatePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
+    }
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return getElement(this); }
+    value = null;
+    size = 'sm';
+    placeholder = 'YYYY-MM-DD';
+    selectable;
+    disabled = false;
+    width = '';
+    // sd-field 공통 props
+    label = '';
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    hint = '';
+    errorMessage = '';
+    rules = [];
+    error = false;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
+    update;
+    viewChange;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    name = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+    }
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDatePicker.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;
+        }
+    };
+    handleSelect = (e) => {
+        this.closeDropdown();
+        this.value = e.detail;
+        const nextValue = this.value;
+        requestAnimationFrame(() => {
+            this.update.emit(nextValue);
+        });
+    };
+    handleViewChange = (e) => {
+        this.viewChange.emit(e.detail);
+    };
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    render() {
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': DATEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: '7678d58f741276e9848e05759f5c41f576e7fe66', 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, 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 }, h("div", { key: '8b3d615b241860ec1fb314fa0eeef5f51ea32f43', class: "sd-date-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-date-picker-trigger", { key: '43185c67462cf0cb559c918e5f709723bf4d5aee', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2cf151b52b3117de9c4d55bbc3c045b0a7b614e9', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '9f77742d034dcb462eb1c4546b2c2a367544f97e', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }]
+    }; }
+};
+SdDatePicker.style = sdDatePickerCss();
+
+const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
+
+const SdDateRangePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
+    }
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return getElement(this); }
+    value = null;
+    size = 'sm';
+    placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
+    selectable;
+    maxRange;
+    disabled = false;
+    width = '';
+    // sd-field 공통 props
+    label = '';
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    hint = '';
+    errorMessage = '';
+    rules = [];
+    error = false;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
+    update;
+    viewChange;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    name = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+    }
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDateRangePicker.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;
+        }
+    };
+    handleSelect = (e) => {
+        this.closeDropdown();
+        this.value = e.detail;
+        const nextValue = this.value;
+        requestAnimationFrame(() => {
+            this.update.emit(nextValue);
+        });
+    };
+    handleViewChange = (e) => {
+        this.viewChange.emit(e.detail);
+    };
+    get displayText() {
+        if (this.value == null || this.value[0] === '' || this.value[1] === '')
+            return '';
+        return `${this.value[0]} ~ ${this.value[1]}`;
+    }
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    render() {
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': DATEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: '1c335b82235bc829f26b06d01c967d81268fc348', 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, 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 }, h("div", { key: '495f6e88d01bc6f19e57e04152e84bff2d0415d4', class: "sd-date-range-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-date-picker-trigger", { key: '59c2d6ecdd7724e361ac4f6222d34d9ceca7ffd3', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '5ba7ab62c1205823fba496e984f4819dbb89064d', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: 'e6f84d99a4ceebee972900fd56593c18497cba9d', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }]
+    }; }
+};
+SdDateRangePicker.style = sdDateRangePickerCss();
+
+const filepicker = {
+	height: "28",
+	paddingX: "12",
+	gap: "8",
+	radius: "4",
+	typography: {
+		fontWeight: "400",
+		fontSize: "12",
+		lineHeight: "20"},
+	size: {
+		icon: "16"
+	},
+	text: {
+		"default": "#222222",
+		placeholder: "#AAAAAA",
+		disabled: "#888888"
+	},
+	icon: {
+		disabled: "#BBBBBB"
+	}
+};
+var filePickerTokens = {
+	filepicker: filepicker
+};
+
+const fp = filePickerTokens.filepicker;
+const FILE_PICKER_LAYOUT = {
+    height: fp.height,
+    paddingX: fp.paddingX,
+    gap: fp.gap,
+    radius: fp.radius,
+    fontSize: fp.typography.fontSize,
+    lineHeight: fp.typography.lineHeight,
+    fontWeight: fp.typography.fontWeight,
+    iconSize: fp.size.icon};
+const FILE_PICKER_COLORS = {
+    text: fp.text,
+    icon: {
+        default: '#888888', // TODO: 토큰 반영 후 교체
+        disabled: fp.icon.disabled,
+    },
+};
+
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
+
+const SdFilePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.reject = createEvent(this, "sdReject", 7);
+    }
+    get el() { return getElement(this); }
+    value = null;
+    placeholder = 'Click to upload';
+    disabled = false;
+    inline = false;
+    multiple = false;
+    accept;
+    maxFileSize;
+    maxTotalSize;
+    maxFiles;
+    // sd-field 패스스루 props
+    name = nanoid();
+    label = '';
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    hint = '';
+    errorMessage = '';
+    width = '';
+    rules;
+    error = false;
+    status;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    focused = false;
+    hovered = false;
+    internalValue = null;
+    showTooltip = false;
+    fileInputRef;
+    fileNamesRef;
+    formField;
+    update;
+    reject;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    componentDidLoad() {
+        this.checkOverflow();
+    }
+    componentDidUpdate() {
+        this.checkOverflow();
+    }
+    async sdValidate() {
+        return this.formField?.sdValidate() ?? Promise.resolve(true);
+    }
+    async sdReset() {
+        const clearedValue = this.multiple ? [] : null;
+        this.value = clearedValue;
+        this.internalValue = clearedValue;
+        if (this.fileInputRef) {
+            this.fileInputRef.value = '';
+        }
+        await this.formField?.sdResetValidation();
+    }
+    async sdResetValidate() {
+        await this.formField?.sdResetValidation();
+    }
+    toBytes(value) {
+        if (value == null)
+            return undefined;
+        return typeof value === 'string' ? Number(value) : value;
+    }
+    validateFiles(files) {
+        const maxFileSize = this.toBytes(this.maxFileSize);
+        const maxTotalSize = this.toBytes(this.maxTotalSize);
+        const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
+        if (maxFiles != null && files.length > maxFiles) {
+            return { accepted: [], rejected: files, reason: 'max-files' };
+        }
+        if (maxFileSize != null) {
+            const oversized = files.filter(f => f.size > maxFileSize);
+            if (oversized.length > 0) {
+                return { accepted: [], rejected: oversized, reason: 'max-file-size' };
+            }
+        }
+        if (maxTotalSize != null) {
+            const totalSize = files.reduce((sum, f) => sum + f.size, 0);
+            if (totalSize > maxTotalSize) {
+                return { accepted: [], rejected: files, reason: 'max-total-size' };
+            }
+        }
+        return { accepted: files, rejected: [] };
+    }
+    handleFileChange = (event) => {
+        const input = event.target;
+        const files = input.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        const fileArray = Array.from(files);
+        const { accepted, rejected, reason } = this.validateFiles(fileArray);
+        if (reason != null) {
+            this.reject?.emit({ files: rejected, reason });
+            if (this.fileInputRef) {
+                this.fileInputRef.value = '';
+            }
+            return;
+        }
+        if (this.multiple) {
+            this.internalValue = accepted;
+        }
+        else {
+            this.internalValue = accepted[0];
+        }
+        this.value = this.internalValue;
+        this.update?.emit(this.value);
+    };
+    handleClear = (event) => {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        const clearedValue = this.multiple ? [] : null;
+        this.value = clearedValue;
+        this.internalValue = clearedValue;
+        this.update?.emit(clearedValue);
+        if (this.fileInputRef) {
+            this.fileInputRef.value = '';
+        }
+    };
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.fileInputRef?.click();
+    };
+    hasFiles() {
+        if (!this.internalValue)
+            return false;
+        if (Array.isArray(this.internalValue)) {
+            return this.internalValue.length > 0;
+        }
+        return true;
+    }
+    getDisplayText() {
+        if (!this.hasFiles())
+            return this.placeholder ?? 'Click to upload';
+        if (Array.isArray(this.internalValue)) {
+            return this.internalValue.map(f => f.name).join(', ');
+        }
+        return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
+    }
+    checkOverflow() {
+        if (!this.fileNamesRef)
+            return;
+        const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;
+        this.showTooltip = isOverflowing;
+    }
+    getIconColor() {
+        return this.disabled ? FILE_PICKER_COLORS.icon.disabled : FILE_PICKER_COLORS.icon.default;
+    }
+    render() {
+        const hasFiles = this.hasFiles();
+        const displayText = this.getDisplayText();
+        const cssVars = {
+            '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
+            '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
+            '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
+            '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
+            '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
+            '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
+            '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
+            '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
+            // sd-field 시스템 변수 override
+            '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
+            '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
+        };
+        const content = (h("div", { role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
+                'sd-file-picker__text': true,
+                'sd-file-picker__text--placeholder': !hasFiles,
+                'sd-file-picker__text--active': hasFiles,
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+        if (this.inline) {
+            return (h("div", { class: {
+                    'sd-file-picker--inline': true,
+                    'sd-file-picker--inline-disabled': this.disabled,
+                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
+        }
+        return (h("sd-field", { 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, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdFilePicker.style = sdFilePickerCss();
+
+const sm$1 = inputTokens.textinput.sm;
+const md$1 = inputTokens.textinput.md;
+const INPUT_SIZE_MAP = {
+    sm: {
+        height: sm$1.height,
+        paddingX: sm$1.paddingX,
+        gap: sm$1.gap,
+        radius: sm$1.radius,
+        fontSize: sm$1.typography.fontSize,
+        lineHeight: sm$1.typography.lineHeight,
+        fontWeight: sm$1.typography.fontWeight,
+    },
+    md: {
+        height: md$1.height,
+        paddingX: md$1.paddingX,
+        gap: md$1.gap,
+        radius: md$1.radius,
+        fontSize: md$1.typography.fontSize,
+        lineHeight: md$1.typography.lineHeight,
+        fontWeight: md$1.typography.fontWeight,
+    },
+};
+const INPUT_COLORS = {
+    text: inputTokens.textinput.text,
+    icon: inputTokens.textinput.icon,
+};
+
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native[readonly]{color:var(--sd-system-color-field-text-read-only)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon,sd-input .sd-input__content .sd-input__native[readonly]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[readonly]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}`;
+
+const SdInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.input = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
+    }
+    get host() { return getElement(this); }
+    value = null;
+    type = 'text';
+    size = 'sm';
+    addonLabel = '';
+    addonAlign = 'start';
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    clearable = false;
+    width = '';
+    rules = [];
+    autoFocus = false;
+    autocomplete = '';
+    maxlength;
+    minlength;
+    inputmode;
+    enterkeyhint;
+    spellcheck = false;
+    status;
+    hint = '';
+    errorMessage = '';
+    inputClass = '';
+    readonly = false;
+    error = false;
+    focused = false;
+    hovered = false;
+    // props - label
+    label = '';
+    labelWidth = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    //  props - custom styles
+    inputStyle = {};
+    internalValue = null;
+    passwordVisible = false;
+    nativeEl = undefined;
+    formField;
+    name = nanoid();
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdGetNativeElement() {
+        return this.nativeEl || null;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        if (this.value != null && this.value !== '') {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.internalValue = target.value;
+    };
+    handleFocus = async (type, event) => {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            // Auto-validate on blur if rules exist
+            if (this.rules && this.rules.length > 0) {
+                await this.formField?.sdValidate();
+            }
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    };
+    render() {
+        const sizeTokens = INPUT_SIZE_MAP[this.size] ?? INPUT_SIZE_MAP.sm;
+        const cssVars = {
+            // sd-input 자체 토큰
+            '--sd-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-input-font-weight': sizeTokens.fontWeight,
+            '--sd-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-input-gap': `${sizeTokens.gap}px`,
+            '--sd-input-text-color': INPUT_COLORS.text.default,
+            '--sd-input-placeholder-color': INPUT_COLORS.text.placeholder,
+            '--sd-input-disabled-color': INPUT_COLORS.text.disabled,
+            '--sd-input-icon-color': INPUT_COLORS.icon.default,
+            // sd-field 시스템 변수 override (size별 높이/반경)
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+        };
+        return (h("sd-field", { key: 'a81aefc3060587c77acf9f6de9f26f7f421b4c91', 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, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, h("label", { key: '7486a081cceed565d2624125e74cbde4a97a4d5c', class: "sd-input__content" }, h("slot", { key: 'cf65ff444baddbf20004ae3ef80c5a54564d7d6f', name: "prefix" }), h("input", { key: '468d342c1cd6f60f7ad573a8c4b0acd4d7424e13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5de289a0767297fc1952dbcb26bbe256f2f0d6c4', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '2ef30f443a82492f1cdd56f812651605b4057fa2', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+                if (this.disabled || this.readonly)
+                    return;
+                this.internalValue = '';
+                await this.formField?.sdValidate();
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'a8cd4f37a0cea5512e080748310032256af9187d', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+                if (this.disabled || this.readonly)
+                    return;
+                this.passwordVisible = !this.passwordVisible;
+            } })))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdInput.style = sdInputCss();
+
+const numberInput = {
+	sm: {
+		height: "28",
+		paddingX: "6",
+		radius: "4",
+		typography: {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}},
+	md: {
+		height: "36",
+		paddingX: "8",
+		radius: "6",
+		typography: {
+			fontWeight: "400",
+			fontSize: "14",
+			lineHeight: "24"
+		}},
+	contents: {
+		gap: "4"
+	},
+	border: {
+		"default": "#AAAAAA",
+		focus: "#0075FF",
+		danger: "#FB4444"},
+	bg: {
+		"default": "#FFFFFF"},
+	text: {
+		"default": "#222222",
+		placeholder: "#AAAAAA",
+		disabled: "#888888"
+	},
+	hint: {
+		color: "#555555",
+		typography: {
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	errorMessage: {
+		color: "#E30000",
+		typography: {
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	stepper: {
+		sm: {
+			size: "20"
+		},
+		md: {
+			size: "24"
+		},
+		radius: "4",
+		bg: {
+			"default": "#EFF6FF",
+			disabled: "#EEEEEE"
+		},
+		icon: {
+			"default": "#0075FF",
+			disabled: "#BBBBBB"
+		}
+	}
+};
+var numberInputTokens = {
+	numberInput: numberInput
+};
+
+const sm = numberInputTokens.numberInput.sm;
+const md = numberInputTokens.numberInput.md;
+const NUMBER_INPUT_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+const NUMBER_INPUT_COLORS = {
+    border: numberInputTokens.numberInput.border,
+    bg: numberInputTokens.numberInput.bg,
+    text: numberInputTokens.numberInput.text,
+};
+const NUMBER_INPUT_STEPPER = {
+    sm: { size: numberInputTokens.numberInput.stepper.sm.size },
+    md: { size: numberInputTokens.numberInput.stepper.md.size },
+    radius: numberInputTokens.numberInput.stepper.radius,
+    bg: numberInputTokens.numberInput.stepper.bg,
+    icon: numberInputTokens.numberInput.stepper.icon,
+};
+const NUMBER_INPUT_HINT = numberInputTokens.numberInput.hint;
+const NUMBER_INPUT_ERROR_MESSAGE = numberInputTokens.numberInput.errorMessage;
+const NUMBER_INPUT_CONTENTS_GAP = numberInputTokens.numberInput.contents.gap;
+
+const sdNumberInputCss = () => `sd-number-input{display:inline-flex}sd-number-input .sd-number-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;gap:var(--sd-number-input-padding-x);color:var(--sd-number-input-text-color);font-size:var(--sd-number-input-font-size);line-height:var(--sd-number-input-line-height);font-weight:var(--sd-number-input-font-weight);padding:0 var(--sd-number-input-padding-x)}sd-number-input .sd-number-input__content--no-stepper{padding:0 calc(var(--sd-number-input-padding-x) * 2)}sd-number-input .sd-number-input__content .sd-number-input__native{width:100%;height:100%;min-width:0;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;padding-block:0;padding-inline:0}sd-number-input .sd-number-input__content .sd-number-input__native[disabled]{cursor:not-allowed;color:var(--sd-number-input-disabled-color)}sd-number-input .sd-number-input__content .sd-number-input__native[readonly]{color:var(--sd-system-color-field-text-read-only)}sd-number-input .sd-number-input__content .sd-number-input__native::placeholder{color:var(--sd-number-input-placeholder-color)}sd-number-input .sd-number-input__content .sd-number-input__prefix,sd-number-input .sd-number-input__content .sd-number-input__suffix{flex-shrink:0;white-space:nowrap;color:var(--sd-number-input-placeholder-color);font-size:inherit;line-height:inherit}sd-number-input .sd-number-input__content .sd-number-input__stepper{flex-shrink:0;width:var(--sd-number-input-stepper-size);height:var(--sd-number-input-stepper-size);border:none;border-radius:var(--sd-number-input-stepper-radius);background-color:var(--sd-number-input-stepper-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.15s ease}sd-number-input .sd-number-input__content .sd-number-input__stepper:hover:not(:disabled){filter:brightness(0.95)}sd-number-input .sd-number-input__content .sd-number-input__stepper:disabled{background-color:var(--sd-number-input-stepper-bg-disabled);cursor:not-allowed}`;
+
+const SdNumberInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
+    }
+    get el() { return getElement(this); }
+    size = 'sm';
+    min = Number.NEGATIVE_INFINITY;
+    max = Number.POSITIVE_INFINITY;
+    step = 1;
+    useButton = false;
+    useDecimal = false;
+    value = null;
+    label;
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    width;
+    rules = [];
+    autoFocus = false;
+    status;
+    hint = '';
+    errorMessage = '';
+    inputPrefix = '';
+    inputSuffix = '';
+    inputClass = '';
+    readonly = false;
+    inputStyle = {};
+    error = false;
+    focused = false;
+    hovered = false;
+    internalValue = null;
+    displayValue = '';
+    nativeEl = undefined;
+    formField;
+    name = nanoid();
+    update;
+    focus;
+    blur;
+    toNumber(val) {
+        if (val === null || val === undefined || val === '')
+            return null;
+        if (typeof val === 'number')
+            return isNaN(val) ? null : val;
+        if (typeof val === 'string')
+            return this.parseInput(val);
+        const num = Number(val);
+        return isNaN(num) ? null : num;
+    }
+    formatWithCommas(value) {
+        if (value === null || value === undefined || isNaN(value))
+            return '';
+        const isNegative = value < 0;
+        const absValue = Math.abs(value);
+        const [intPart, decPart] = absValue.toString().split('.');
+        const formatted = (+intPart).toLocaleString();
+        const result = isNegative ? '-' + formatted : formatted;
+        return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
+    }
+    parseInput(input) {
+        if (input.trim() === '')
+            return null;
+        const cleaned = input.replace(/,/g, '').trim();
+        if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
+            return null;
+        }
+        const parsed = parseFloat(cleaned);
+        if (isNaN(parsed))
+            return null;
+        if (!this.useDecimal && cleaned.includes('.')) {
+            return null;
+        }
+        return parsed;
+    }
+    clampMinMax(value) {
+        if (isNaN(value))
+            return 0;
+        return Math.min(Math.max(value, this.min), this.max);
+    }
+    updateDisplay() {
+        this.displayValue = this.formatWithCommas(this.internalValue);
+    }
+    isIncrementDisabled() {
+        if (this.disabled || this.readonly)
+            return true;
+        if (this.internalValue !== null) {
+            return this.internalValue >= this.max;
+        }
+        return false;
+    }
+    isDecrementDisabled() {
+        if (this.disabled || this.readonly)
+            return true;
+        if (this.internalValue !== null) {
+            return this.internalValue <= this.min;
+        }
+        return false;
+    }
+    valueChanged(newValue) {
+        const parsed = this.toNumber(newValue);
+        if (parsed !== null) {
+            this.internalValue = this.clampMinMax(parsed);
+        }
+        else {
+            this.internalValue = null;
+        }
+        this.updateDisplay();
+    }
+    internalValueChanged(newValue) {
+        this.updateDisplay();
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.update?.emit(newValue);
+        }
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    async sdGetNativeElement() {
+        return this.nativeEl || null;
+    }
+    componentWillLoad() {
+        const parsed = this.toNumber(this.value);
+        if (parsed !== null) {
+            this.internalValue = this.clampMinMax(parsed);
+        }
+        this.updateDisplay();
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요
+    handleInput = (event) => {
+        const target = event.target;
+        const inputValue = target.value;
+        if (inputValue === '') {
+            this.internalValue = null;
+            this.displayValue = '';
+            return;
+        }
+        const commasRemoved = inputValue.replace(/,/g, '');
+        const decimalCount = (commasRemoved.match(/\./g) || []).length;
+        if (decimalCount > 1) {
+            target.value = this.displayValue;
+            return;
+        }
+        if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {
+            target.value = commasRemoved;
+            return;
+        }
+        if (commasRemoved.endsWith('.') && decimalCount === 1) {
+            const numberPart = commasRemoved.slice(0, -1);
+            const parsed = this.parseInput(numberPart);
+            if (parsed !== null) {
+                const formatted = this.formatWithCommas(parsed);
+                target.value = formatted + '.';
+                return;
+            }
+        }
+        const parsed = this.parseInput(commasRemoved);
+        if (parsed !== null) {
+            if (parsed < this.min) {
+                target.value = this.displayValue;
+                return;
+            }
+            if (parsed > this.max) {
+                target.value = this.displayValue;
+                return;
+            }
+            this.internalValue = parsed;
+            this.displayValue = this.formatWithCommas(parsed);
+            target.value = this.displayValue;
+        }
+        else {
+            target.value = this.displayValue;
+        }
+    };
+    handleFocus = (event) => {
+        this.focused = true;
+        this.focus?.emit(event);
+    };
+    handleBlur = async (event) => {
+        this.updateDisplay();
+        if (this.nativeEl) {
+            this.nativeEl.value = this.displayValue;
+        }
+        if (this.rules && this.rules.length > 0) {
+            await this.formField?.sdValidate();
+        }
+        this.focused = false;
+        this.blur?.emit(event);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.handleIncrement();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.handleDecrement();
+        }
+    };
+    handleIncrement = () => {
+        if (this.isIncrementDisabled())
+            return;
+        const currentVal = this.internalValue ?? this.min ?? 0;
+        let nextVal = currentVal + this.step;
+        if (nextVal > this.max) {
+            nextVal = this.max;
+        }
+        if (nextVal === currentVal)
+            return;
+        this.internalValue = nextVal;
+    };
+    handleDecrement = () => {
+        if (this.isDecrementDisabled())
+            return;
+        const currentVal = this.internalValue ?? this.min ?? 0;
+        let nextVal = currentVal - this.step;
+        if (nextVal < this.min) {
+            nextVal = this.min;
+        }
+        if (nextVal === currentVal)
+            return;
+        this.internalValue = nextVal;
+    };
+    render() {
+        const sizeTokens = NUMBER_INPUT_SIZE_MAP[this.size] ?? NUMBER_INPUT_SIZE_MAP.sm;
+        const stepperSize = NUMBER_INPUT_STEPPER[this.size]?.size ?? NUMBER_INPUT_STEPPER.sm.size;
+        const iconSize = this.size === 'md' ? 14 : 12;
+        const cssVars = {
+            // 컴포넌트 로컬 토큰
+            '--sd-number-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-number-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-number-input-font-weight': sizeTokens.fontWeight,
+            '--sd-number-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-number-input-text-color': NUMBER_INPUT_COLORS.text.default,
+            '--sd-number-input-placeholder-color': NUMBER_INPUT_COLORS.text.placeholder,
+            '--sd-number-input-disabled-color': NUMBER_INPUT_COLORS.text.disabled,
+            // 스테퍼 토큰
+            '--sd-number-input-stepper-size': `${stepperSize}px`,
+            '--sd-number-input-stepper-radius': `${NUMBER_INPUT_STEPPER.radius}px`,
+            '--sd-number-input-stepper-bg': NUMBER_INPUT_STEPPER.bg.default,
+            '--sd-number-input-stepper-bg-disabled': NUMBER_INPUT_STEPPER.bg.disabled,
+            '--sd-number-input-stepper-icon-color': NUMBER_INPUT_STEPPER.icon.default,
+            '--sd-number-input-stepper-icon-disabled': NUMBER_INPUT_STEPPER.icon.disabled,
+            // sd-field 시스템 변수 오버라이드
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': NUMBER_INPUT_COLORS.border.default,
+            '--sd-system-color-field-border-focus': NUMBER_INPUT_COLORS.border.focus,
+            '--sd-system-color-field-border-danger': NUMBER_INPUT_COLORS.border.danger,
+            '--sd-system-color-field-bg-default': NUMBER_INPUT_COLORS.bg.default,
+            // 힌트/에러 메시지 오버라이드
+            '--sd-textinput-input-text-error-message': NUMBER_INPUT_ERROR_MESSAGE.color,
+            '--sd-textinput-input-error-message-typography-font-size': `${NUMBER_INPUT_ERROR_MESSAGE.typography.fontSize}px`,
+            '--sd-textinput-input-error-message-typography-line-height': `${NUMBER_INPUT_ERROR_MESSAGE.typography.lineHeight}px`,
+            '--sd-textinput-input-text-hint': NUMBER_INPUT_HINT.color,
+            '--sd-textinput-input-hint-typography-font-size': `${NUMBER_INPUT_HINT.typography.fontSize}px`,
+            '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
+            '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
+        };
+        return (h("sd-field", { key: '543a3fa5d759f4c64222e4eeca4de142296f663e', 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, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8d71a794e1c25f661d8260756f26ee6a47016aa9', class: {
+                'sd-number-input__content': true,
+                'sd-number-input__content--no-stepper': !this.useButton,
+            } }, this.useButton && (h("button", { key: 'aaa21a743b73b1251780a9e03f40bef5765508d7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'c94aa4c4dfb344de8c87b506eca7b02e7ffd8b0a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+                ? NUMBER_INPUT_STEPPER.icon.disabled
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '11b2efa4d6a665f03135adbb6a30b496deea820d', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'b58452e12a222c7adb0dd7be810db874788e63b0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                textAlign: this.useButton ? 'center' : 'right',
+                ...this.inputStyle,
+            } }), this.inputSuffix && h("span", { key: 'c71e6fa80e99b9551d927b0958696dee2f278d85', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '620477a2710b32cba13433e7fd2c2ae59a20ce3c', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'adb263a5d16743641429c611a006192677a2c0e0', name: "add", size: iconSize, color: this.isIncrementDisabled()
+                ? NUMBER_INPUT_STEPPER.icon.disabled
+                : NUMBER_INPUT_STEPPER.icon.default }))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdNumberInput.style = sdNumberInputCss();
+
+const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}`;
+
+const SdRadioGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "sdUpdate", 7);
+    }
+    value;
+    options = [];
+    direction = 'vertical';
+    disabled = false;
+    groupName;
+    change;
+    valueChanged(newValue) {
+        this.value = newValue;
+    }
+    handleRadioChange = (optionValue) => {
+        if (this.disabled)
+            return;
+        const matched = this.options.find(o => String(o.value) === String(optionValue));
+        const resolved = matched ? matched.value : optionValue;
+        this.value = resolved;
+        this.change?.emit(resolved);
+    };
+    getGroupClasses() {
+        const classes = ['sd-radio-group', `sd-radio-group--${this.direction ?? 'vertical'}`];
+        return classes.join(' ');
+    }
+    render() {
+        return (h("div", { key: 'c5404526e6a21258d616f6459499b636a6636384', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+            return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
+        })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdRadioGroup.style = sdRadioGroupCss();
+
+const TEXTAREA_TOKENS = {
+    paddingX: inputTokens.textinput.sm.paddingX,
+    paddingY: inputTokens.textinput.sm.paddingY,
+    radius: inputTokens.textinput.sm.radius,
+    fontSize: inputTokens.textinput.sm.typography.fontSize,
+    lineHeight: inputTokens.textinput.sm.typography.lineHeight,
+    fontWeight: inputTokens.textinput.sm.typography.fontWeight};
+const TEXTAREA_COLORS = {
+    text: inputTokens.textinput.text,
+    bg: inputTokens.textinput.bg,
+    border: inputTokens.textinput.border,
+    resizer: inputTokens.textinput.resizer,
+};
+
+const sdTextareaCss = () => `sd-textarea{display:inline-flex}sd-textarea .sd-textarea__content{width:100%;display:flex}sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);font-family:inherit;font-size:var(--sd-textarea-font-size);line-height:var(--sd-textarea-line-height);font-weight:var(--sd-textarea-font-weight);color:var(--sd-textarea-text-color);resize:vertical}sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:var(--sd-textarea-placeholder-color)}sd-textarea .sd-textarea__content .sd-textarea__native:disabled{cursor:not-allowed;color:var(--sd-textarea-disabled-color)}sd-textarea .sd-textarea__content .sd-textarea__native[readonly]{color:var(--sd-system-color-field-text-read-only)}`;
+
+const SdTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.input = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
+    }
+    get host() { return getElement(this); }
+    value = null;
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    readonly = false;
+    autoFocus = false;
+    textareaClass = '';
+    textareaStyle = {};
+    maxLength;
+    rows;
+    spellcheck = false;
+    width = '';
+    // props - sd-field
+    label = '';
+    labelWidth = '';
+    addonLabel = '';
+    addonAlign = 'start';
+    hint = '';
+    errorMessage = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    rules = [];
+    error = false;
+    status;
+    focused = false;
+    hovered = false;
+    internalValue = null;
+    nativeEl = undefined;
+    formField;
+    name = nanoid();
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdGetNativeElement() {
+        return this.nativeEl || null;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.internalValue = target.value;
+    };
+    handleFocus = async (type, event) => {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            if (this.rules && this.rules.length > 0) {
+                await this.formField?.sdValidate();
+            }
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    };
+    render() {
+        const cssVars = {
+            '--sd-textarea-font-size': `${TEXTAREA_TOKENS.fontSize}px`,
+            '--sd-textarea-line-height': `${TEXTAREA_TOKENS.lineHeight}px`,
+            '--sd-textarea-font-weight': TEXTAREA_TOKENS.fontWeight,
+            '--sd-textarea-padding-x': `${TEXTAREA_TOKENS.paddingX}px`,
+            '--sd-textarea-padding-y': `${TEXTAREA_TOKENS.paddingY}px`,
+            '--sd-textarea-radius': `${TEXTAREA_TOKENS.radius}px`,
+            '--sd-textarea-text-color': TEXTAREA_COLORS.text.default,
+            '--sd-textarea-placeholder-color': TEXTAREA_COLORS.text.placeholder,
+            '--sd-textarea-disabled-color': TEXTAREA_COLORS.text.disabled,
+            '--sd-textarea-bg-color': TEXTAREA_COLORS.bg.default,
+            '--sd-textarea-disabled-bg-color': TEXTAREA_COLORS.bg.disabled,
+            '--sd-textarea-border-color': TEXTAREA_COLORS.border.default,
+            '--sd-textarea-resizer-color': TEXTAREA_COLORS.resizer.color,
+            // sd-field 시스템 변수 override (textarea는 고정 높이가 아닌 auto)
+            '--sd-system-size-field-sm-height': 'auto',
+            '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
+        };
+        return (h("sd-field", { key: '64595853405ae2a66231229516e93a74a4340ef0', 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, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b7cddedc733c83d4c50234559c02c5f220634008', class: "sd-textarea__content" }, h("textarea", { key: '2d1b852e6ba7b913901c07fce36ce30598f15e12', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdTextarea.style = sdTextareaCss();
+
+export { SdDatePicker as sd_date_picker, SdDateRangePicker as sd_date_range_picker, SdFilePicker as sd_file_picker, SdInput as sd_input, SdNumberInput as sd_number_input, SdRadioGroup as sd_radio_group, SdTextarea as sd_textarea };