@sellmate/design-system 1.0.78 → 1.1.0

package/dist/cjs/sd-radio-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-BlxrCRYi.js');
 
 const radioButton = {
 	xs: {
@@ -140,7 +140,7 @@ const SdRadioButton = class {
         return classes.join(' ');
     }
     getGroupClasses() {
-        const classes = ['sd-radio-button', `sd-radio-button--${this.size}`];
+        const classes = ['sd-radio-button', `sd-radio-button--${this.size ?? 'sm'}`];
         return classes.join(' ');
     }
     _groupName;
@@ -151,7 +151,7 @@ const SdRadioButton = class {
         return this._groupName;
     }
     render() {
-        const sizeTokens = RADIO_BUTTON_SIZES[this.size];
+        const sizeTokens = RADIO_BUTTON_SIZES[this.size ?? 'sm'] ?? RADIO_BUTTON_SIZES.sm;
         const cssVars = {
             '--sd-radio-button-height': `${sizeTokens.height}px`,
             '--sd-radio-button-padding-x': `${sizeTokens.paddingX}px`,
@@ -175,7 +175,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (index.h("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.h("div", { key: 'fc1cfe14f2e71092496b241f3b4efa42a1ed878c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-BlxrCRYi.js');
 
 const radio = {
 	size: "16",
@@ -118,7 +118,7 @@ const SdRadio = class {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (index.h("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '1f44ab44d741ef40152318ce6fd437bb091c3cfb', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && index.h("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
+        return (index.h("label", { key: 'bbbca45f706514a12be434ba877de0bd0f82c944', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'e2cacd52037790cfe2d0eacacb975864858f73f8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'bfbfdcb93536cef9fecbf1cc3a5dc5c2adbf5dd0', class: "sd-radio__circle" }), this.label && index.h("span", { key: '04c8d1e8de88bbb8d4041ebbbda00f58f8dc460c', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-select-list-item_2.cjs.entry.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var index = require('./index-BlxrCRYi.js');
+var sdSelect_config = require('./sd-select.config-B19ptCT2.js');
+
+const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
+
+const SdSelectListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.listItemClick = index.createEvent(this, "sdListItemClick", 7);
+    }
+    option;
+    depth = 1;
+    isSelected = false;
+    isFocused = false;
+    useCheckbox = false;
+    countInfo;
+    listItemClick;
+    get isGroup() {
+        return !!this.option.children;
+    }
+    get isSelectable() {
+        return !this.isGroup || this.useCheckbox;
+    }
+    get depthKey() {
+        if (this.depth <= 1)
+            return 'depth1';
+        if (this.depth === 2)
+            return 'depth2';
+        return 'depth3';
+    }
+    get paddingLeft() {
+        return `${sdSelect_config.LIST_ITEM_LAYOUT.paddingLeft[this.depthKey]}px`;
+    }
+    handleClick = (e) => {
+        e.stopPropagation();
+        if (this.option.disabled || !this.isSelectable)
+            return;
+        this.listItemClick.emit(this.option);
+    };
+    handleCheckboxClick = (e) => {
+        e.stopPropagation();
+    };
+    handleCheckboxUpdate = (e) => {
+        e.stopPropagation();
+        if (this.option.disabled || !this.isSelectable)
+            return;
+        this.listItemClick.emit(this.option);
+    };
+    render() {
+        const isGroup = this.isGroup;
+        const isDepth1Group = isGroup && this.depth === 1;
+        const isDepth2Group = isGroup && this.depth === 2;
+        const cssVars = {
+            '--list-item-padding-y': `${sdSelect_config.LIST_ITEM_LAYOUT.paddingY}px`,
+            '--list-item-padding-left': this.paddingLeft,
+            '--list-item-padding-right': `${sdSelect_config.LIST_ITEM_LAYOUT.paddingRight}px`,
+            '--list-item-gap': `${sdSelect_config.LIST_ITEM_LAYOUT.gap}px`,
+            '--list-item-font-size': `${sdSelect_config.LIST_ITEM_TYPOGRAPHY.fontSize}px`,
+            '--list-item-line-height': `${sdSelect_config.LIST_ITEM_TYPOGRAPHY.lineHeight}px`,
+            '--list-item-font-weight': sdSelect_config.LIST_ITEM_TYPOGRAPHY.fontWeight,
+            '--list-item-bg': isDepth1Group
+                ? sdSelect_config.LIST_ITEM_COLORS.depth1.bg
+                : isDepth2Group
+                    ? sdSelect_config.LIST_ITEM_COLORS.depth2.bg
+                    : sdSelect_config.LIST_ITEM_COLORS.bg.default,
+            '--list-item-bg-hover': sdSelect_config.LIST_ITEM_COLORS.bg.hover,
+            '--list-item-color': sdSelect_config.LIST_ITEM_COLORS.content.default,
+            '--list-item-color-hover': sdSelect_config.LIST_ITEM_COLORS.content.hover,
+            '--list-item-color-disabled': sdSelect_config.LIST_ITEM_COLORS.content.disabled,
+            '--list-item-color-selected': sdSelect_config.LIST_ITEM_COLORS.content.selected,
+            '--list-item-font-weight-selected': sdSelect_config.LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
+        };
+        if (isDepth1Group) {
+            cssVars['--list-item-border-top'] = `${sdSelect_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelect_config.LIST_ITEM_COLORS.depth1.border}`;
+        }
+        return (index.h("div", { key: 'd580af48ad969b82d964d35fa3ed6bc02e807a77', class: {
+                'sd-select-list-item': true,
+                'sd-select-list-item--group': isGroup,
+                'sd-select-list-item--depth1-group': isDepth1Group,
+                'sd-select-list-item--depth2-group': isDepth2Group,
+                'sd-select-list-item--selected': this.isSelected === true,
+                'sd-select-list-item--indeterminate': this.isSelected === null,
+                'sd-select-list-item--focused': this.isFocused,
+                'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
+                'sd-select-list-item--disabled': !!this.option.disabled,
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '57cee194abfeb1fb12db1ebc72397fdb2f5268ba', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: 'dc10ebc823b7007988c29facfd559d477caa9bb8', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '3504a51d1c92f6b21ec3f36b4546b1763fcc931f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+    }
+};
+SdSelectListItem.style = sdSelectListItemCss();
+
+const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #cccccc;border-radius:4px;background:white}sd-select-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075ff}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-list-item-search .sd-select-list-item-search__input::placeholder{color:#aaaaaa}sd-select-list-item-search .sd-select-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-list-item-search .sd-select-list-item-search__clear:hover{background:#f0f0f0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
+
+const SdSelectListItemSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.searchFilter = index.createEvent(this, "sdSearchFilter", 7);
+        this.searchFocus = index.createEvent(this, "sdSearchFocus", 7);
+    }
+    isScrolled = false;
+    searchText = '';
+    searchFilter;
+    searchFocus;
+    inputEl;
+    debounceTimer;
+    focusRafId;
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.focusRafId = requestAnimationFrame(() => {
+                this.inputEl?.focus();
+            });
+        });
+    }
+    async sdFocus() {
+        this.inputEl?.focus();
+    }
+    handleInput = (e) => {
+        this.searchText = e.target.value;
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            this.searchFilter.emit(this.searchText);
+        }, sdSelect_config.SEARCH_DEBOUNCE_MS);
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.searchText = '';
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this.searchFilter.emit('');
+        this.inputEl?.focus();
+    };
+    disconnectedCallback() {
+        if (this.focusRafId)
+            cancelAnimationFrame(this.focusRafId);
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+    }
+    render() {
+        return (index.h("div", { key: '8714ef9e06f54fd5c2ae5241cac65a74ea45dccf', class: {
+                'sd-select-list-item-search': true,
+                'sd-select-list-item-search--scrolled': this.isScrolled,
+            } }, index.h("div", { key: '428aea3765711fd91ae7b587b21347dd9634636b', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: 'ed3363eea1a7d6a4f44141a74855c4e767a34999', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'c3f5539e037a81d96ce2fa41225f0c33c32add6e', ref: el => {
+                this.inputEl = el;
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: 'b081b5a6eced0397db40784ce25e0e84c574f869', type: "button", class: {
+                'sd-select-list-item-search__clear': true,
+                'sd-select-list-item-search__clear--hidden': !this.searchText,
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, index.h("sd-icon", { key: '29615969a7efa118089e2c8dba741086196f8593', name: "close", size: 12, color: "#888888" })))));
+    }
+};
+SdSelectListItemSearch.style = sdSelectListItemSearchCss();
+
+exports.sd_select_list_item = SdSelectListItem;
+exports.sd_select_list_item_search = SdSelectListItemSearch;

package/dist/cjs/sd-select.config-B19ptCT2.js

@@ -0,0 +1,178 @@
+'use strict';
+
+const select = {
+	paddingX: "12",
+	icon: {
+		"default": "#888888",
+		disabled: "#BBBBBB"
+	},
+	gap: "8",
+	typography: {
+		fontWeight: "400",
+		fontSize: "12",
+		lineHeight: "20"},
+	text: {
+		"default": "#222222",
+		disabled: "#888888"
+	}};
+var selectTokens = {
+	select: select
+};
+
+const listItem = {
+	paddingY: "4",
+	paddingRight: "12",
+	gap: "8",
+	paddingLeft: {
+		depth1: "12",
+		depth2: "20",
+		depth3: "28"
+	},
+	typography: {
+		"default": {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "700"}
+	},
+	bg: {
+		"default": "#FFFFFF",
+		hover: "#0075FF"
+	},
+	content: {
+		"default": "#222222",
+		hover: "#FFFFFF",
+		disabled: "#888888",
+		selected: "#0075FF"
+	},
+	depth1: {
+		bg: {
+			"default": "#EFF6FF"},
+		border: {
+			color: "#E1E1E1",
+			width: "1"
+		}},
+	depth2: {
+		middle: {
+			bg: "#F6F6F6"}
+	}};
+var listItemTokens = {
+	listItem: listItem
+};
+
+const listBox = {
+	radius: "4"};
+var listBoxTokens = {
+	listBox: listBox
+};
+
+// ── Select Trigger Tokens ──
+const SELECT_LAYOUT = {
+    paddingX: selectTokens.select.paddingX,
+    gap: selectTokens.select.gap};
+const SELECT_TYPOGRAPHY = {
+    fontSize: selectTokens.select.typography.fontSize,
+    lineHeight: selectTokens.select.typography.lineHeight,
+    fontWeight: selectTokens.select.typography.fontWeight,
+};
+const SELECT_COLORS = {
+    icon: {
+        default: selectTokens.select.icon.default,
+        disabled: selectTokens.select.icon.disabled,
+    },
+    text: {
+        default: selectTokens.select.text.default,
+        disabled: selectTokens.select.text.disabled,
+    },
+};
+// ── ListItem Tokens ──
+const LIST_ITEM_LAYOUT = {
+    paddingY: listItemTokens.listItem.paddingY,
+    paddingRight: listItemTokens.listItem.paddingRight,
+    paddingLeft: {
+        depth1: listItemTokens.listItem.paddingLeft.depth1,
+        depth2: listItemTokens.listItem.paddingLeft.depth2,
+        depth3: listItemTokens.listItem.paddingLeft.depth3,
+    },
+    gap: listItemTokens.listItem.gap,
+};
+const LIST_ITEM_TYPOGRAPHY = {
+    fontSize: listItemTokens.listItem.typography.default.fontSize,
+    lineHeight: listItemTokens.listItem.typography.default.lineHeight,
+    fontWeight: listItemTokens.listItem.typography.default.fontWeight,
+    selectedFontWeight: listItemTokens.listItem.typography.selected.fontWeight,
+};
+const LIST_ITEM_COLORS = {
+    bg: {
+        default: listItemTokens.listItem.bg.default,
+        hover: listItemTokens.listItem.bg.hover,
+    },
+    content: {
+        default: listItemTokens.listItem.content.default,
+        hover: listItemTokens.listItem.content.hover,
+        disabled: listItemTokens.listItem.content.disabled,
+        selected: listItemTokens.listItem.content.selected,
+    },
+    depth1: {
+        bg: listItemTokens.listItem.depth1.bg.default,
+        border: listItemTokens.listItem.depth1.border.color,
+        borderWidth: listItemTokens.listItem.depth1.border.width,
+    },
+    depth2: {
+        bg: listItemTokens.listItem.depth2.middle.bg,
+    }};
+// ── ListBox Tokens ──
+const LIST_BOX_LAYOUT = {
+    radius: listBoxTokens.listBox.radius,
+};
+// ── Constants ──
+const SEARCH_THRESHOLD = 11;
+const SEARCH_DEBOUNCE_MS = 1000;
+const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
+// ── Utilities ──
+function countLeaves(options) {
+    return options.reduce((sum, option) => {
+        if (option.children) {
+            return sum + countLeaves(option.children);
+        }
+        return sum + 1;
+    }, 0);
+}
+function filterTree(options, keyword) {
+    const lowerKeyword = keyword.toLowerCase();
+    return options.reduce((acc, option) => {
+        const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
+        if (option.children) {
+            // 그룹: 자식은 항상 추가로 필터링한다.
+            // - 자식 중 일치하는 게 있으면 그 자식들만 노출
+            // - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
+            //   (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
+            //    의 fallback 이 원본 트리를 사용해 처리한다)
+            const filteredChildren = filterTree(option.children, keyword);
+            if (filteredChildren.length > 0) {
+                acc.push({ ...option, children: filteredChildren });
+            }
+            else if (selfMatch) {
+                acc.push({ ...option, children: [] });
+            }
+        }
+        else if (selfMatch) {
+            acc.push({ ...option });
+        }
+        return acc;
+    }, []);
+}
+
+exports.EMPTY_MESSAGE = EMPTY_MESSAGE;
+exports.LIST_BOX_LAYOUT = LIST_BOX_LAYOUT;
+exports.LIST_ITEM_COLORS = LIST_ITEM_COLORS;
+exports.LIST_ITEM_LAYOUT = LIST_ITEM_LAYOUT;
+exports.LIST_ITEM_TYPOGRAPHY = LIST_ITEM_TYPOGRAPHY;
+exports.SEARCH_DEBOUNCE_MS = SEARCH_DEBOUNCE_MS;
+exports.SEARCH_THRESHOLD = SEARCH_THRESHOLD;
+exports.SELECT_COLORS = SELECT_COLORS;
+exports.SELECT_LAYOUT = SELECT_LAYOUT;
+exports.SELECT_TYPOGRAPHY = SELECT_TYPOGRAPHY;
+exports.countLeaves = countLeaves;
+exports.filterTree = filterTree;