@sellmate/design-system 1.0.78 → 1.2.0

package/dist/esm/sd-file-picker.entry.js

@@ -1,242 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
-
-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) {
-            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;
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.map(f => f.name).join(', ');
-        }
-        return this.internalValue?.name || this.placeholder;
-    }
-    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", { class: "sd-file-picker__content", onClick: 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 }), 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();
-
-export { SdFilePicker as sd_file_picker };

package/dist/esm/sd-input.entry.js

@@ -1,173 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
-import { i as inputTokens } from './component.textinput-ByhWX2NK.js';
-
-const sm = inputTokens.textinput.sm;
-const md = inputTokens.textinput.md;
-const INPUT_SIZE_MAP = {
-    sm: {
-        height: sm.height,
-        paddingX: sm.paddingX,
-        gap: sm.gap,
-        radius: sm.radius,
-        fontSize: sm.typography.fontSize,
-        lineHeight: sm.typography.lineHeight,
-        fontWeight: sm.typography.fontWeight,
-    },
-    md: {
-        height: md.height,
-        paddingX: md.paddingX,
-        gap: md.gap,
-        radius: md.radius,
-        fontSize: md.typography.fontSize,
-        lineHeight: md.typography.lineHeight,
-        fontWeight: md.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-input-disabled-color)}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{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) {
-            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: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', 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, 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: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, h("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), h("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, 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: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
-                if (this.disabled)
-                    return;
-                this.internalValue = '';
-                await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '92cb57b65e70a499c48e73f028e30715f1b1356c', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
-                if (this.disabled)
-                    return;
-                this.passwordVisible = !this.passwordVisible;
-            } })))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }],
-        "internalValue": [{
-                "internalValueChanged": 0
-            }]
-    }; }
-};
-SdInput.style = sdInputCss();
-
-export { SdInput as sd_input };