@sellmate/design-system 0.0.52 → 0.0.54

package/dist/collection/collection-manifest.json

@@ -4,20 +4,25 @@
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
     "components/sd-modal-card/sd-modal-card.js",
+    "components/sd-radio-button-group/sd-radio-button-group.js",
     "components/sd-radio-group/sd-radio-group.js",
     "components/sd-select/sd-select.js",
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",
     "components/sd-table-backup/sd-table-backup.js",
+    "components/sd-tabs/sd-tabs.js",
     "components/sd-tag/sd-tag.js",
+    "components/sd-toast-message/sd-toast-message.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-card/sd-card.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
+    "components/sd-file-picker/sd-file-picker.js",
     "components/sd-guide/sd-guide.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-loading-spinner/sd-loading-spinner.js",
+    "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",
     "components/sd-portal/sd-portal.js",
@@ -30,13 +35,14 @@
     "components/sd-table/sd-th/sd-th.js",
     "components/sd-table/sd-tr/sd-tr.js",
     "components/sd-toggle/sd-toggle.js",
+    "components/sd-toggle-button/sd-toggle-button.js",
     "components/sd-tooltip/sd-tooltip.js",
     "components/sd-tooltip-portal/sd-tooltip-portal.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.38.3",
-    "typescriptVersion": "5.9.3"
+    "version": "4.39.0",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/sd-badge/sd-badge.js

@@ -6,7 +6,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: '2599667a6e14485cc9aeb5cb7f9f8c2fa6be9730' }, h("div", { key: '411c02845794514d4ae7c0849e4e9479bfce257b', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '72c8fe5094b0c8dc4065dd0646200c052cd7cfca', class: "sd-badge__dot" }), h("div", { key: 'e9e338154b11ba92b32a748d11d09899fad29442', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: '3e165b8e2f95b48fb1e80173a3e30c87d5da29db' }, h("div", { key: '6bb4a29f27dd191881a5764b347db47511718c3a', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'f766cbca2d033075ef6d1c15bec084e2bfa7aec2', class: "sd-badge__dot" }), h("div", { key: '07f2de048fa03232d1dcee43bf389f95cd691c06', class: "sd-badge__label" }, this.label))));
     }
     static get is() { return "sd-badge"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-card/sd-card.js

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = true;
     class = '';
     render() {
-        return (h(Host, { key: 'f19b796cbe69bb22165a52864cf0eef7c8afeac1' }, h("div", { key: '2a6272608b5fca143883d477ddb7f8fdb60acb0d', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '60f687272faa536e182e9a65ea0c07a233194bd8' }))));
+        return (h(Host, { key: '4a44b9ef84a83b91879dabaa099a21b499baad2c' }, h("div", { key: 'cb8499ddef896bf1e2ba753dd4b0a35f41f7e39f', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: 'e7d6f9ffa8ad8d5061471a6e8cbeb5c4d5d5f2b4' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -74,7 +74,7 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '6f835c6778d618a0285dc070c43022e4787e9eb6', class: "sd-date-picker" }, h("sd-input", { key: '9d09bd679c1c239ad6106464b9b6b2bd2fd164cc', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd3790bf739adeef7b381e983bb7426e8684b9e66', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '6e6833f13a1ec4083f06b09ebc61e378e47599cf', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'd6b36f1a26904a8287bcb3b3d64981a0f628a911', class: "sd-date-picker__menu" }, h("div", { key: '37b9795686360b719b69a9a385a7e4bf27c217e5', class: "sd-date-picker__header" }, h("div", { key: 'c885554693c93eddb3d1148e12ca8610f23625a4', class: "year-nav" }, h("button", { key: '8628fca079f02183aaf07f953ebcf9e4141060f3', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '3597f373c01ff11b4dcc97e692cedc31bcd8d548', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'ed71145dc3a34b8ae491088f65ea43b4cd0acec3', class: "year-nav__current" }, this.currentYear), h("button", { key: 'b1bbd644e7ff7bb8141758e3b897c93f5d2c1a38', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5a55e81f9e01f3acb73bbb7b6c6f4034430ad2a4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1e95092fd966e7d8c2480fd8823e8886a141c83b', class: "month-nav" }, h("button", { key: 'e49b6e1528ff2f814e021fb70a7df0425f0efb11', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4d0e61ccb0fcf006d11b48acff31593c95426acd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '8eacea2970a8b9f2963f4afd3f0e7aa4ee2bdca9', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'd209068e6b0e244b572c42cdc5a3ece8ed4be0fa', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a067b7c5e59ae9b32f1e13e1a80b49055b451a80', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'c99e6a24b1113f5c78d17586a9491053e23ee053', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9e243d5edf78f0fd606e787b714ae993c549b828', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: 'b60ea48c6ea76b984c48040b32c83358ab7776df', class: "sd-date-picker" }, h("sd-input", { key: 'a55a5d6b0e752081e919fa317761a9529b58b75c', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: '707f8c0a38a72651581228d1ac887bd38fbb33b0', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '4fb84ae1246c05546dc063abfce4d89e2440c8ff', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c8dae2a875b66cb90a2de898fb5588e4429e01a2', class: "sd-date-picker__menu" }, h("div", { key: '35d9d132bb2e68156c12019cb9ca20eaef7cd5dc', class: "sd-date-picker__header" }, h("div", { key: '327bb3fe00fb31c4ec9fde79bc6984fe176462c9', class: "year-nav" }, h("button", { key: '4e67fe3d237cb864e9d5cbf3d4ace942ac8f02cc', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'd97729c331c93fe122b51ee2dee4f4b9ddf70ad8', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '8c75d30528776992327504b05688cacbcab513d3', class: "year-nav__current" }, this.currentYear), h("button", { key: '5f4c36b216ab1230719998e0d8a00bba59fd49bd', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '79b2a3efdbac3f4fe32105ddaf77e023bdb7ac43', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'b8d141899f9ad45f4b16e376d78e181f710e28df', class: "month-nav" }, h("button", { key: '07b81a1875dab96062d32129a58efcf50c11b660', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'b5447e3e134cda07140c1d6e2708a97cc87e2b32', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '4161405b68aa5166423974167a455fa411891272', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '3fd84295b94f92ff0fbb8347ffb03c4d5d20423c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'c9879eb2a25d727cc76f538b974588ca19a3f85e', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '3030bd477ec7b4f4aae9e36b33962dad48492c9a', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'e384b514d1fe0cca98935d0e5ad272291421eb34', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'a546e1ab7d199688377b3852b51711b283ed9735', class: "sd-date-range-picker" }, h("sd-input", { key: 'f7edc5f8e03d0f781f906cf1abc9f6eddd93f3b6', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: 'a6053b18e510d72345d3fc8622a34e2e916ae09a', class: "sd-date-range-picker" }, h("sd-input", { key: '32a1c3e8c6f56a8c88ea5731d7aba8612918a412', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'dbd1acab929f74afd822c9c9e2ca4bd8e6e25c02', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '86f98f816b61f3dcb49eb284266c32dd644d1641', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '221f126d9d4c92daf84312459b4e6aa9069b4131', class: "sd-date-range-picker__menu" }, h("div", { key: 'c3b10e8544af4e52509a90650946045c33cf909c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '253cdb65199cff3d4344eb0a1b0920939f917a18', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '33480e0a2f498f5481908e9e1541bb1a26f2b9d2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '2db9fed11f2c923a6fba475cacb72cc1865beecd', class: "header-label" }, this.prevYear), h("button", { key: '36603bc40a926337d45f60b416d6dabaaa3cfc7e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '8d46e41a1fc5d4de945f92c5ae8842f8dd2c75cf', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '236b93e84d17746e4f8852a9beda0d398edf096b', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'c1e7d9c3a3becc4f8cd09a4a1034788d75b71b43', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ac35b85f5ec3fdf6f89929e1d0ce16c61de5a24d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'f9ede52633306262d3d1f53fe98c0ed71d2760c3', class: "sd-date-range-picker__menu" }, h("div", { key: '46b75bb25b1c11b2a5c9d95998a6b8a909d271e2', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'f194f5c67019c933934526591834305cf2a33587', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '43e8213a6bee3dcd9f2045f7ebb404da8a904a8a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '2b585ec3a4d0f2ed2e1ae4f3a49a4b511f076ba9', class: "header-label" }, this.prevYear), h("button", { key: 'c97c6694b39f0a8979e90dbbca49615efcdde694', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'b64856f508e653a676a6bc3c7dfc4d1ecb87149a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'd983671d652eca108580817d3c1181676985bec7', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -0,0 +1,95 @@
+.sd-file-picker {
+  display: inline-flex;
+  align-items: center;
+  max-width: var(--picker-width, 100%);
+  height: 28px;
+  gap: 8px;
+  padding: 4px 8px;
+  border: 1px solid #aaaaaa;
+  border-radius: 4px;
+  background-color: #ffffff;
+  cursor: pointer;
+  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: 400;
+  font-size: 12px;
+  line-height: 20px;
+  color: #aaaaaa;
+}
+.sd-file-picker__text--active {
+  color: #222222;
+}
+.sd-file-picker__text--placeholder {
+  color: #aaaaaa;
+}
+.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: 1000;
+  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-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
+  background-color: #f6f6f6;
+}
+.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
+  background-color: #ffffff;
+}
+.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text {
+  color: #222222;
+}
+.sd-file-picker--disabled:not(.sd-file-picker--inline) {
+  background-color: #eeeeee;
+  border-color: #cccccc;
+}
+.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text {
+  color: #888888;
+}
+.sd-file-picker--inline {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  height: auto;
+}
+.sd-file-picker--inline .sd-file-picker__text {
+  color: #aaaaaa;
+}
+.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text {
+  color: #737373;
+}
+.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active {
+  color: #222222;
+}
+.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text {
+  color: #cccccc;
+}

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -0,0 +1,299 @@
+import { h, } from "@stencil/core";
+export class SdFilePicker {
+    el;
+    value = null;
+    placeholder = 'Click to upload';
+    disabled = false;
+    inline = false;
+    multiple = false;
+    accept;
+    width;
+    internalValue = null;
+    hovered = false;
+    showTooltip = false;
+    fileInputRef;
+    fileNamesRef;
+    sdChange;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    componentDidLoad() {
+        this.checkOverflow();
+    }
+    componentDidUpdate() {
+        this.checkOverflow();
+    }
+    handleFileChange = (event) => {
+        const input = event.target;
+        const files = input.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        const fileArray = Array.from(files);
+        if (this.multiple) {
+            this.internalValue = fileArray;
+        }
+        else {
+            this.internalValue = fileArray[0];
+        }
+        this.value = this.internalValue;
+        this.sdChange?.emit(this.value);
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        const clearedValue = this.multiple ? [] : null;
+        this.value = clearedValue;
+        this.internalValue = clearedValue;
+        this.sdChange?.emit(clearedValue);
+        if (this.fileInputRef) {
+            this.fileInputRef.value = '';
+        }
+    };
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.fileInputRef?.click();
+    };
+    getStatusClass() {
+        if (this.disabled)
+            return 'sd-file-picker--disabled';
+        if (this.hasFiles())
+            return 'sd-file-picker--active';
+        return '';
+    }
+    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() {
+        if (this.disabled) {
+            return this.inline ? 'grey_45' : 'grey_55';
+        }
+        return 'grey_70';
+    }
+    render() {
+        const hasFiles = this.hasFiles();
+        const displayText = this.getDisplayText();
+        return (h("div", { key: 'bfa4054517dcf1ef728a2354927bc40c177274ce', class: {
+                'sd-file-picker': true,
+                [this.getStatusClass()]: true,
+                'sd-file-picker--inline': this.inline,
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'b2f2e730b30c58641615d1216633ee20a67ee6c1', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange }), h("sd-icon", { key: '08b4bbcc3bb757a7a8e3dee3a416b202c7e86f66', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'cba9e6fb17a6a9c5de479e0ccdc6a3de7c23a615', 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-icon", { key: 'eb3c02cb001168d82eac1a3e2855e1cfcc6b960e', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '8f09fe54f7f77453eac07f60942401d83955fc0b', class: "sd-file-picker__tooltip" }, displayText))));
+    }
+    static get is() { return "sd-file-picker"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-file-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-file-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "File[] | File | null",
+                    "resolved": "File | File[] | null | undefined",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Click to upload'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "hovered": {},
+            "showTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File[] | File | null",
+                    "resolved": "File | File[] | null",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=sd-file-picker.js.map

package/dist/collection/components/sd-file-picker/sd-file-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-file-picker.js","sourceRoot":"","sources":["../../../src/components/sd-file-picker/sd-file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ComponentInterface,\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n EventEmitter,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-file-picker',\r\n styleUrl: 'sd-file-picker.scss',\r\n})\r\nexport class SdFilePicker implements ComponentInterface {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: File[] | File | null = null;\r\n @Prop() placeholder: string = 'Click to upload';\r\n @Prop() disabled: boolean = false;\r\n @Prop() inline: boolean = false;\r\n @Prop() multiple: boolean = false;\r\n @Prop() accept?: string;\r\n @Prop() width?: number | string;\r\n\r\n @State() private internalValue: File[] | File | null = null;\r\n @State() private hovered: boolean = false;\r\n @State() private showTooltip: boolean = false;\r\n\r\n private fileInputRef?: HTMLInputElement;\r\n private fileNamesRef?: HTMLElement;\r\n\r\n @Event() sdChange!: EventEmitter<File[] | File | null>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: File[] | File | null) {\r\n  this.internalValue = newValue;\r\n }\r\n\r\n componentDidLoad() {\r\n  this.checkOverflow();\r\n }\r\n\r\n componentDidUpdate() {\r\n  this.checkOverflow();\r\n }\r\n\r\n private handleFileChange = (event: Event) => {\r\n  const input = event.target as HTMLInputElement;\r\n  const files = input.files;\r\n\r\n  if (!files || files.length === 0) {\r\n   return;\r\n  }\r\n\r\n  const fileArray = Array.from(files);\r\n\r\n  if (this.multiple) {\r\n   this.internalValue = fileArray;\r\n  } else {\r\n   this.internalValue = fileArray[0];\r\n  }\r\n  this.value = this.internalValue;\r\n  this.sdChange?.emit(this.value);\r\n };\r\n\r\n private handleClear = (event: Event) => {\r\n  event.stopPropagation();\r\n  const clearedValue = this.multiple ? [] : null;\r\n  this.value = clearedValue;\r\n  this.internalValue = clearedValue\r\n  this.sdChange?.emit(clearedValue);\r\n\r\n  if (this.fileInputRef) {\r\n   this.fileInputRef.value = '';\r\n  }\r\n };\r\n\r\n private handleClick = () => {\r\n  if (this.disabled) return;\r\n  this.fileInputRef?.click();\r\n };\r\n\r\n private getStatusClass(): string {\r\n  if (this.disabled) return 'sd-file-picker--disabled';\r\n  if (this.hasFiles()) return 'sd-file-picker--active';\r\n  return '';\r\n }\r\n\r\n private hasFiles(): boolean {\r\n  if (!this.internalValue) return false;\r\n  if (Array.isArray(this.internalValue)) {\r\n   return this.internalValue.length > 0;\r\n  }\r\n  return true;\r\n }\r\n\r\n private getDisplayText(): string {\r\n  if (!this.hasFiles()) return this.placeholder;\r\n\r\n  if (Array.isArray(this.internalValue)) {\r\n   return this.internalValue.map(f => f.name).join(', ');\r\n  }\r\n\r\n  return this.internalValue?.name || this.placeholder;\r\n }\r\n\r\n private checkOverflow() {\r\n  if (!this.fileNamesRef) return;\r\n  const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\r\n  this.showTooltip = isOverflowing;\r\n }\r\n\r\n private getIconColor(): string {\r\n  if (this.disabled) {\r\n   return this.inline ? 'grey_45' : 'grey_55';\r\n  }\r\n  return 'grey_70';\r\n }\r\n\r\n render() {\r\n  const hasFiles = this.hasFiles();\r\n  const displayText = this.getDisplayText();\r\n\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-file-picker': true,\r\n     [this.getStatusClass()]: true,\r\n     'sd-file-picker--inline': this.inline,\r\n    }}\r\n    onClick={this.handleClick}\r\n    onMouseEnter={() => (this.hovered = true)}\r\n    onMouseLeave={() => (this.hovered = false)}\r\n   >\r\n    <input\r\n     ref={el => (this.fileInputRef = el as HTMLInputElement)}\r\n     type=\"file\"\r\n     class=\"sd-file-picker__input\"\r\n     disabled={this.disabled}\r\n     multiple={this.multiple}\r\n     accept={this.accept}\r\n     onInput={this.handleFileChange}\r\n    />\r\n\r\n    <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\r\n\r\n    <div\r\n     ref={el => (this.fileNamesRef = el as HTMLElement)}\r\n     class={{\r\n      'sd-file-picker__text': true,\r\n      'sd-file-picker__text--placeholder': !hasFiles,\r\n      'sd-file-picker__text--active': hasFiles,\r\n     }}\r\n    >\r\n     {displayText}\r\n    </div>\r\n\r\n    {!this.disabled && hasFiles && (\r\n     <sd-icon\r\n      name=\"close\"\r\n      size={12}\r\n      color=\"#888888\"\r\n      class=\"sd-file-picker__clear-icon\"\r\n      onClick={this.handleClear}\r\n     />\r\n    )}\r\n\r\n    {this.showTooltip && hasFiles && this.hovered && (\r\n     <div class=\"sd-file-picker__tooltip\">{displayText}</div>\r\n    )}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-guide/sd-guide.js

@@ -48,11 +48,11 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: '32cff34a733ab423b4db37aaa91f4c63152566a3', style: {
+        return (h(Host, { key: 'c15218a6d9dbef0147701e31f798a3e6fa8e7679', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '7efc84462239fcab6ac7d532d75ff418bebee957', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '9868dd7fd8b5e42cfd6b2011c2a8679a8f9ece02', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '974448ac29c162372a7a5e8ba12c493d4e8a2287', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e28679c5cdeac9ca8e0b5701d4979a94a7c4f182', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, h("sd-button", { key: '773093b74b917d9e15a8e8c280aaa7564832abe1', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '64cfb5c8b425b0d48a9f9954b203c9b3883fb1f3', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'f748907b385a77490ad79f8f811ad7fc4eaee8bb', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '8b154c2d239fc7038cb939f826417e5b68043a85', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: 'c598b70154a4b2c4a4a2790a0072eaf4f7de7099', class: "sd-guide__popup__header" }, h("sd-icon", { key: '6837f7934c24a7da2bf0558d7cdcd5effcdb5481', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '6b7b8f9d6f3602f3cd036efdd308318988ce339b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'fbee7a0d4ad49cd6cac2ef5bb4617937aaff5882', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: 'eaa2160d01bbe8172fc176117b8e506e469c5dde', class: "sd-guide__popup__header" }, h("sd-icon", { key: '54436229beee740efc607c3c2dd7be4c390e3285', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'e848c736bb5d49221feb194ecd43e904d51c82f8', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '57536a93be487239c30d7338f48c87ab57fbb3d0', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-icon/sd-icon.css

@@ -1,10 +1,7 @@
 sd-icon {
+  display: inline-block;
   line-height: 0;
 }
-sd-icon .sd-icon {
-  line-height: 0;
-  vertical-align: middle;
-}
 sd-icon .sd-icon--rotate-90 {
   transform: rotate(90deg);
 }

package/dist/collection/components/sd-icon/sd-icon.js

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: 'dc540c5746fedd2fed7bdf8e179b56878abe5a3b', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'ff1e903198b5362d8e3521c6477ddd0b96948ad9', color: this.resolvedColor })));
+        return (h("i", { key: 'f3ff9d0b1134a67b6f8897ede7b4cd449589d618', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '0acd90f22d7f2e3e875b690d41dbb4a297b42d7f', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-input/sd-input.css

@@ -1,10 +1,7 @@
 sd-icon {
+  display: inline-block;
   line-height: 0;
 }
-sd-icon .sd-icon {
-  line-height: 0;
-  vertical-align: middle;
-}
 sd-icon .sd-icon--rotate-90 {
   transform: rotate(90deg);
 }

package/dist/collection/components/sd-input/sd-input.js

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: 'f793db1bf48fccad644292b06e725676568d2686', style: inputWidth }, this.label && h("div", { key: '1f59002678f46ffdfeb47a0adb9b48ad74c24191', class: "sd-input__label" }, this.label), h("label", { key: '2fa9f8744f1e6357aa864ea4b97685d35fd0e712', class: {
+        return (h(Host, { key: '265fb05d7c005cd843443475d74c2e8127e4ae2d', style: inputWidth }, this.label && h("div", { key: '2ce6d2611927ec3e491122b8a17b94a2b39edcd5', class: "sd-input__label" }, this.label), h("label", { key: '6731592e7d55098daf4aa8b8177233897daf2900', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '6baa7f30c5057bcd96167741b7219877a0de8b81', name: "prefix" }), h("input", { key: 'd3210037a23b3015a3650f2771f0205d3baa9af8', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '72cc3cf71cdcab1e540f68c54a7a7715cb73af83', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '04a65fa5e2042ffad00a2cfae10d77babdeaaf28', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'e07590e1ee2540183c18aceb8dae0ff39d5adca4', name: "prefix" }), h("input", { key: '76b8bbba1030cbef5b57e3303b6cd300858c4fee', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'e10dc614a0283bc63bb3e44bd627f7279728dae6', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3324d72d1353231209aa9c284425c921bbb1e17b', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdLoadingSpinner {
     render() {
-        return (h(Host, { key: '7538c9986c448d666ea1993324d8fd811c2ba289' }, h("svg", { key: '7e254a0b15ecda3e480582c336b33b1020715125', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '8a6356ba2e8d42c9d1c789ba5676ca6f7485cda1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: 'f8c61aa1c1f500da0aa9deac8d031306427bddb4' }, h("svg", { key: '66b9d93ed53b1539f4ba51cf7ca0350728ed343c', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '3e6e687a243ec457065e14ac44bb56706c89bb10', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {