@sellmate/design-system 0.0.19 → 0.0.22

package/dist/components/p-BqFU4TZF.js

@@ -0,0 +1,167 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-B50AuWf2.js';
+import { d as defineCustomElement$1 } from './p-C3mJCyWE.js';
+
+const sdInputCss = "sd-icon{line-height:0}sd-icon .sd-icon{line-height:0;vertical-align:middle}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)}.sd-input{display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input.sd-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__clear-icon{cursor:pointer;margin-left:8px}";
+
+const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdClick = createEvent(this, "sdClick");
+        this.sdInput = createEvent(this, "sdInput");
+        this.sdChange = createEvent(this, "sdChange");
+        this.sdFocus = createEvent(this, "sdFocus");
+        this.sdBlur = createEvent(this, "sdBlur");
+    }
+    get el() { return this; }
+    value = null;
+    label;
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    clearable = false;
+    width;
+    barcode = false;
+    rules;
+    autoFocus = false;
+    status;
+    inputClass = '';
+    readonly = false;
+    //  props - custom styles
+    inputStyle = {};
+    internalValue = null;
+    error = false;
+    focused = false;
+    hovered = false;
+    nativeEl = undefined;
+    sdClick;
+    sdInput;
+    sdChange;
+    sdFocus;
+    sdBlur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.sdInput?.emit(this.value);
+        }
+        if (!this.rules || this.rules.length === 0)
+            return;
+        this.error = false;
+        for (const rule of this.rules) {
+            const result = rule(newValue);
+            if (result !== true) {
+                this.error = true;
+                break;
+            }
+        }
+    }
+    async getNativeElement() {
+        return this.nativeEl || null;
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.internalValue = this.value;
+        }
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.internalValue = target.value;
+        this.sdInput?.emit(this.internalValue);
+    };
+    handleChange = (event) => {
+        const target = event.target;
+        this.internalValue = target.value;
+        this.sdChange?.emit(this.internalValue);
+    };
+    handleFocus = (type, event) => {
+        this.focused = type === 'focus';
+        if (type === 'blur')
+            this.sdBlur?.emit(event);
+        else
+            this.sdFocus?.emit(event);
+    };
+    getInputStatus() {
+        // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)
+        if (this.disabled)
+            return 'sd-input--disabled';
+        if (this.hovered)
+            return 'sd-input--hovered';
+        if (this.focused)
+            return 'sd-input--focused';
+        if (this.status)
+            return `sd-input--${this.status}`;
+        if (this.error)
+            return 'sd-input--error';
+        return '';
+    }
+    render() {
+        const inputWidth = this.width
+            ? {
+                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
+            }
+            : {};
+        return (h(Host, { key: '099f819c08b8eb4627f7857d10877d2a9bbeac51', style: inputWidth }, this.label && h("div", { key: 'ef1dffa2707e2f2844efee6646e14b750ea7c319', class: "sd-input__label" }, this.label), h("label", { key: '89e8a0ea5a02ecd114b9e1a7cb9fdcdce0130849', 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: 'b1c64655ea940ae454bac4aed58df8944ed579a3', name: "prefix" }), h("input", { key: '1bb32efb0c46d3e1b91ac90c64e60943ac59ee41', 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: 'bcdc6e6780b6eba56e788665669abcfe04406e64', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3f8d9fe950d5313f0df807b06ffd5872dc4b1835', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+                this.internalValue = '';
+                this.sdChange?.emit(this.internalValue);
+                this.sdInput?.emit(this.internalValue);
+            } })))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }; }
+    static get style() { return sdInputCss; }
+}, [772, "sd-input", {
+        "value": [1032],
+        "label": [1],
+        "placeholder": [1],
+        "disabled": [4],
+        "clearable": [4],
+        "width": [8],
+        "barcode": [4],
+        "rules": [16],
+        "autoFocus": [4, "auto-focus"],
+        "status": [1],
+        "inputClass": [1, "input-class"],
+        "readonly": [4],
+        "inputStyle": [16],
+        "internalValue": [32],
+        "error": [32],
+        "focused": [32],
+        "hovered": [32],
+        "getNativeElement": [64]
+    }, undefined, {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-input", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdInput);
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdInput as S, defineCustomElement as d };
+//# sourceMappingURL=p-BqFU4TZF.js.map
+
+//# sourceMappingURL=p-BqFU4TZF.js.map

package/dist/components/p-BqFU4TZF.js.map

@@ -0,0 +1 @@
+{"file":"p-BqFU4TZF.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\r\n@import '../sd-icon/sd-icon.scss';\r\n\r\n.sd-input {\r\n display: flex;\r\n width: var(--input-width, 100%);\r\n align-items: center;\r\n height: 28px;\r\n padding: 4px 8px;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n line-height: 20px;\r\n background: white;\r\n\r\n &--hovered,\r\n &--focused {\r\n  border-color: $brilliantblue_75;\r\n  box-shadow: 0 0 4px 0 #0071ff66;\r\n }\r\n\r\n &.sd-input--error {\r\n  border-color: $red_70;\r\n }\r\n\r\n &.sd-input--pass {\r\n  border-color: $green_65;\r\n }\r\n\r\n &.sd-input--barcode:not(.sd-input--disabled) {\r\n  background-color: $olive_15;\r\n }\r\n\r\n &.sd-input--disabled {\r\n  background-color: $grey_20 !important;\r\n  border-color: $grey_45 !important;\r\n  cursor: not-allowed !important;\r\n  box-shadow: none !important;\r\n  .sd-input__native_element {\r\n   color: $grey_65 !important;\r\n  }\r\n }\r\n\r\n .sd-input__native_element {\r\n  display: block;\r\n  width: 100%;\r\n  height: 20px;\r\n  line-height: 20px;\r\n  border: none;\r\n  outline: none;\r\n  background: transparent;\r\n  font-size: inherit;\r\n  color: $grey_90;\r\n  margin-left: 4px;\r\n  margin-right: 4px;\r\n  padding-block: 0;\r\n  padding-inline: 0;\r\n\r\n  &::placeholder {\r\n   font-size: 12px;\r\n   height: 20px;\r\n   line-height: 20px;\r\n   color: $grey_55;\r\n  }\r\n }\r\n\r\n .sd-input__clear-icon {\r\n  cursor: pointer;\r\n  margin-left: 8px;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Method,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-input',\r\n styleUrl: 'sd-input.scss',\r\n})\r\nexport class SdInput {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: string | number | null = null;\r\n @Prop() label?: string;\r\n @Prop() placeholder: string = '입력해 주세요.';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() width?: number | string;\r\n @Prop() barcode?: boolean = false;\r\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\r\n @Prop() autoFocus: boolean = false;\r\n @Prop() status?: 'default' | 'pass' | 'error';\r\n @Prop() inputClass: string = '';\r\n @Prop() readonly: boolean = false;\r\n\r\n //  props - custom styles\r\n @Prop() inputStyle: { [key: string]: string } = {};\r\n\r\n @State() private internalValue: string | number | null = null;\r\n @State() private error: boolean = false;\r\n @State() private focused: boolean = false;\r\n @State() private hovered: boolean = false;\r\n\r\n private nativeEl: HTMLInputElement | undefined = undefined;\r\n\r\n @Event() sdClick?: EventEmitter<string | number | null>;\r\n @Event() sdInput?: EventEmitter<string | number | null>;\r\n @Event() sdChange?: EventEmitter<string | number | null>;\r\n @Event() sdFocus?: EventEmitter<Event>;\r\n @Event() sdBlur?: EventEmitter<Event>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string | number | null) {\r\n  this.internalValue = newValue;\r\n }\r\n\r\n @Watch('internalValue')\r\n internalValueChanged(newValue: string | number | null) {\r\n  if (newValue !== this.value) {\r\n   this.value = newValue;\r\n   this.sdInput?.emit(this.value);\r\n  }\r\n\r\n  if (!this.rules || this.rules.length === 0) return;\r\n  this.error = false;\r\n  for (const rule of this.rules) {\r\n   const result = rule(newValue);\r\n   if (result !== true) {\r\n    this.error = true;\r\n    break;\r\n   }\r\n  }\r\n }\r\n\r\n @Method()\r\n async getNativeElement(): Promise<HTMLInputElement | null> {\r\n  return this.nativeEl || null;\r\n }\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.internalValue = this.value;\r\n  }\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n  const target = event.target as HTMLInputElement;\r\n  this.internalValue = target.value;\r\n  this.sdInput?.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n  const target = event.target as HTMLInputElement;\r\n  this.internalValue = target.value;\r\n  this.sdChange?.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (type: 'focus' | 'blur', event: Event) => {\r\n  this.focused = type === 'focus';\r\n\r\n  if (type === 'blur') this.sdBlur?.emit(event);\r\n  else this.sdFocus?.emit(event);\r\n };\r\n\r\n getInputStatus() {\r\n  // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\r\n  if (this.disabled) return 'sd-input--disabled';\r\n  if (this.hovered) return 'sd-input--hovered';\r\n  if (this.focused) return 'sd-input--focused';\r\n  if (this.status) return `sd-input--${this.status}`;\r\n  if (this.error) return 'sd-input--error';\r\n  return '';\r\n }\r\n\r\n render() {\r\n  const inputWidth = this.width\r\n   ? {\r\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\r\n     }\r\n   : {};\r\n\r\n  return (\r\n   <Host style={inputWidth}>\r\n    {this.label && <div class=\"sd-input__label\">{this.label}</div>}\r\n    <label\r\n     class={{\r\n      'sd-input': true,\r\n      [this.getInputStatus()]: true,\r\n      'sd-input--barcode': !!this.barcode,\r\n     }}\r\n     onMouseEnter={() => (this.hovered = true)}\r\n     onMouseLeave={() => (this.hovered = false)}\r\n     style={this.inputStyle}\r\n    >\r\n     <slot name=\"prefix\"></slot>\r\n     <input\r\n      ref={el => (this.nativeEl = el)}\r\n      class={`sd-input__native_element ${this.inputClass}`}\r\n      type=\"text\"\r\n      value={this.internalValue || ''}\r\n      placeholder={this.placeholder}\r\n      disabled={this.disabled}\r\n      readonly={this.readonly}\r\n      autofocus={this.autoFocus}\r\n      onInput={this.handleInput}\r\n      onChange={this.handleChange}\r\n      onFocus={event => this.handleFocus('focus', event)}\r\n      onBlur={event => this.handleFocus('blur', event)}\r\n     />\r\n     <slot name=\"suffix\"></slot>\r\n     {this.clearable && this.internalValue && (\r\n      <sd-icon\r\n       name=\"close\"\r\n       color=\"#888\"\r\n       class=\"sd-input__clear-icon\"\r\n       onClick={() => {\r\n        this.internalValue = '';\r\n        this.sdChange?.emit(this.internalValue);\r\n        this.sdInput?.emit(this.internalValue);\r\n       }}\r\n      />\r\n     )}\r\n    </label>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/p-C060DxcL.js

@@ -0,0 +1,102 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-B50AuWf2.js';
+import { r as resolveColor } from './p-BYf-ybt2.js';
+import { d as defineCustomElement$1 } from './p-C3mJCyWE.js';
+
+const sdButtonCss = ".sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
+
+const ICON_SIZES = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const SdButton = /*@__PURE__*/ proxyCustomElement(class SdButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdClick = createEvent(this, "sdClick");
+    }
+    get el() { return this; }
+    variant = 'primary';
+    size = 'sm';
+    color = '#025497';
+    label = '';
+    disabled = false;
+    type = 'button';
+    icon;
+    iconColor;
+    iconSize;
+    iconRight;
+    noHover = false;
+    class = '';
+    sdClick;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.sdClick.emit(event);
+    };
+    getButtonClasses() {
+        const classes = ['sd-button'];
+        classes.push(`sd-button--${this.variant}`);
+        classes.push(`sd-button--${this.size}`);
+        classes.push(`sd-button--color-${this.color}`);
+        if (this.disabled) {
+            classes.push('sd-button--disabled');
+        }
+        if (!this.label && (this.icon || this.iconRight)) {
+            classes.push('sd-button--icon-only');
+        }
+        if (this.noHover) {
+            classes.push('sd-button--no-hover');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const buttonClasses = this.getButtonClasses();
+        // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
+        const resolvedColor = resolveColor(this.color);
+        return (h(Host, { key: 'b30c8006e2f187fb971bcd47f8ce4a91d1dc47a6', style: { '--button-color': resolvedColor } }, h("button", { key: 'f494c93fc0b9d55537b468f5c6458569df962633', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, h("div", { key: '7d64a6526baeac8569cccc60d9befacef3e3777d', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '9439e9456783aa5b057d383252a6b0c45a44b588', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ? this.iconSize : ICON_SIZES[this.size], color: this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor })), this.label && h("div", { key: '324371a6f8864c444cda39e7b349b4c9ec19b7f6', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '733790ceda6e1822c71911b17e66f527936b15a2', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
+    }
+    static get style() { return sdButtonCss; }
+}, [768, "sd-button", {
+        "variant": [1],
+        "size": [1],
+        "color": [1],
+        "label": [1],
+        "disabled": [4],
+        "type": [1],
+        "icon": [1],
+        "iconColor": [1, "icon-color"],
+        "iconSize": [2, "icon-size"],
+        "iconRight": [1, "icon-right"],
+        "noHover": [4, "no-hover"],
+        "class": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-button", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdButton);
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdButton as S, defineCustomElement as d };
+//# sourceMappingURL=p-C060DxcL.js.map
+
+//# sourceMappingURL=p-C060DxcL.js.map

package/dist/components/p-C060DxcL.js.map

@@ -0,0 +1 @@
+{"file":"p-C060DxcL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-button {\r\n text-decoration: none;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n &--xs {\r\n  padding: 0 8px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 20px;\r\n  min-height: 24px;\r\n }\r\n &--sm {\r\n  padding: 0 12px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 20px;\r\n  min-height: 28px;\r\n }\r\n &--md {\r\n  padding: 0 20px;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  line-height: 26px;\r\n  min-height: 34px;\r\n }\r\n &--lg {\r\n  padding: 0 28px;\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  line-height: 30px;\r\n  min-height: 62px;\r\n }\r\n &--primary {\r\n  background-color: var(--button-color);\r\n  color: white;\r\n  transition: filter 0.2s ease;\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: #000000;\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.25;\r\n  }\r\n }\r\n\r\n &--outline {\r\n  background: white;\r\n  border: 1px solid var(--button-color);\r\n  color: var(--button-color);\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: var(--button-color);\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.15;\r\n  }\r\n\r\n  .sd-button__content {\r\n   position: relative;\r\n   z-index: 1;\r\n  }\r\n }\r\n &--ghost {\r\n  background-color: transparent;\r\n  color: var(--button-color);\r\n  border-color: transparent;\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: var(--button-color);\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.15;\r\n  }\r\n\r\n  .sd-button__content {\r\n   position: relative;\r\n   z-index: 1;\r\n  }\r\n }\r\n &--disabled {\r\n  border: 1px solid $grey_45;\r\n  background: $grey_30;\r\n  color: $grey_65;\r\n  cursor: not-allowed !important;\r\n }\r\n &--icon-only {\r\n  padding: 0;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  aspect-ratio: 1 / 1;\r\n }\r\n &--no-hover {\r\n  &:hover::before {\r\n   opacity: 0 !important;\r\n  }\r\n }\r\n\r\n .sd-button__content {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n\r\n  z-index: 1;\r\n  font-weight: 500;\r\n }\r\n}\r\n\r\n// /* Focus styles */\r\n// .sd-button:focus-visible {\r\n//  outline: 2px solid $primary;\r\n//  outline-offset: 2px;\r\n// }\r\n\r\n// /* High contrast mode support */\r\n// @media (prefers-contrast: high) {\r\n//  .sd-button {\r\n//   border-width: 2px;\r\n//  }\r\n// }\r\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n @Prop() class: string = '';\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  if (this.disabled) {\r\n   event.preventDefault();\r\n   event.stopPropagation();\r\n   return;\r\n  }\r\n  this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n  const classes = ['sd-button'];\r\n\r\n  classes.push(`sd-button--${this.variant}`);\r\n  classes.push(`sd-button--${this.size}`);\r\n  classes.push(`sd-button--color-${this.color}`);\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-button--disabled');\r\n  }\r\n\r\n  if (!this.label && (this.icon || this.iconRight)) {\r\n   classes.push('sd-button--icon-only');\r\n  }\r\n\r\n  if (this.noHover) {\r\n   classes.push('sd-button--no-hover');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const buttonClasses = this.getButtonClasses();\r\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n  const resolvedColor = resolveColor(this.color);\r\n\r\n  return (\r\n   <Host style={{ '--button-color': resolvedColor }}>\r\n    <button\r\n     class={`${buttonClasses} ${this.class}`}\r\n     type={this.type}\r\n     disabled={this.disabled}\r\n     onClick={this.handleClick}\r\n    >\r\n     <div class=\"sd-button__content\">\r\n      {this.icon && (\r\n       <sd-icon\r\n        class=\"sd-button__icon sd-button__icon--left\"\r\n        name={this.icon}\r\n        size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n        color={\r\n         this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\r\n        }\r\n       ></sd-icon>\r\n      )}\r\n\r\n      {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n      {this.iconRight && (\r\n       <sd-icon\r\n        class=\"sd-button__icon sd-button__icon--right\"\r\n        name={this.iconRight}\r\n        size={ICON_SIZES[this.size!]}\r\n        color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n       ></sd-icon>\r\n      )}\r\n     </div>\r\n    </button>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-COjeSZYo.js → p-C3mJCyWE.js}

@@ -1,4 +1,4 @@
-import { h, p as proxyCustomElement, H } from './p-D_VunbXE.js';
+import { h, p as proxyCustomElement, H } from './p-B50AuWf2.js';
 import { r as resolveColor } from './p-BYf-ybt2.js';
 
 const Check12 = (props) => {
@@ -36,6 +36,32 @@ var ArrowDown = /*#__PURE__*/Object.freeze({
     arrowDown: arrowDown
 });
 
+const Arrow2Down10 = (props) => (h("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M5 1.15625V8.84375M5 8.84375L2 5.84375M5 8.84375L8 5.84375", stroke: "currentColor", "stroke-width": "0.8", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+
+const Arrow2Down12 = (props) => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M5.99999 1.38751V10.6125M5.99999 10.6125L2.39999 7.01251M5.99999 10.6125L9.59999 7.01251", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+
+const Arrow2Down16 = (props) => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M7.99998 1.85001V14.15M7.99998 14.15L3.19998 9.35001M7.99998 14.15L12.8 9.35001", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+
+const Arrow2Down20 = (props) => (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M10 2.3125V17.6875M10 17.6875L4 11.6875M10 17.6875L16 11.6875", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+
+const Arrow2Down24 = (props) => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M12 2.77499V21.225M12 21.225L4.79999 14.025M12 21.225L19.2 14.025", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+
+const Arrow2Down8 = (props) => (h("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M4.00001 0.924988V7.07499M4.00001 7.07499L1.60001 4.67499M4.00001 7.07499L6.40001 4.67499", stroke: "currentColor", "stroke-width": "0.6", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+
+const arrow2Down = {
+    8: Arrow2Down8,
+    10: Arrow2Down10,
+    12: Arrow2Down12,
+    16: Arrow2Down16,
+    20: Arrow2Down20,
+    24: Arrow2Down24,
+};
+
+var Arrow2Down = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    arrow2Down: arrow2Down
+});
+
 const ArrowLeft12 = (props) => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_8697_41980)" }, h("path", { d: "M8.25 1.39999L3.83551 5.91258C3.78798 5.96117 3.78798 6.03882 3.83551 6.08741L8.25 10.6", stroke: "currentColor", "stroke-linecap": "round", ...props })), h("defs", null, h("clipPath", { id: "clip0_8697_41980" }, h("rect", { width: "12", height: "12", fill: "white" })))));
 
 const arrowLeft = {
@@ -80,6 +106,19 @@ var ArrowUp = /*#__PURE__*/Object.freeze({
     arrowUp: arrowUp
 });
 
+const Barcode12 = (props) => {
+    return (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("g", { "clip-path": "url(#clip0_1914_11730)" }, h("path", { d: "M2.625 1.5C2.83211 1.5 3 1.66789 3 1.875V10.125C3 10.3321 2.83211 10.5 2.625 10.5H1.875C1.66789 10.5 1.5 10.3321 1.5 10.125V1.875C1.5 1.66789 1.66789 1.5 1.875 1.5H2.625ZM3.75 1.5C3.95711 1.5 4.125 1.66789 4.125 1.875V10.125C4.125 10.3321 3.95711 10.5 3.75 10.5C3.54289 10.5 3.375 10.3321 3.375 10.125V1.875C3.375 1.66789 3.54289 1.5 3.75 1.5ZM4.875 1.5C5.08211 1.5 5.25 1.66789 5.25 1.875V10.125C5.25 10.3321 5.08211 10.5 4.875 10.5C4.66789 10.5 4.5 10.3321 4.5 10.125V1.875C4.5 1.66789 4.66789 1.5 4.875 1.5ZM6.75 1.5C6.95711 1.5 7.125 1.66789 7.125 1.875V10.125C7.125 10.3321 6.95711 10.5 6.75 10.5H6C5.79289 10.5 5.625 10.3321 5.625 10.125V1.875C5.625 1.66789 5.79289 1.5 6 1.5H6.75ZM7.875 1.5C8.08211 1.5 8.25 1.66789 8.25 1.875V10.125C8.25 10.3321 8.08211 10.5 7.875 10.5C7.66789 10.5 7.5 10.3321 7.5 10.125V1.875C7.5 1.66789 7.66789 1.5 7.875 1.5ZM10.125 1.5C10.3321 1.5 10.5 1.66789 10.5 1.875V10.125C10.5 10.3321 10.3321 10.5 10.125 10.5H9.375C9.16789 10.5 9 10.3321 9 10.125V1.875C9 1.66789 9.16789 1.5 9.375 1.5H10.125Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_1914_11730" }, h("rect", { width: "12", height: "12", fill: "white" })))));
+};
+
+const barcode = {
+    12: Barcode12,
+};
+
+var Barcode = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    barcode: barcode
+});
+
 const Close10 = (props) => (h("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("g", { "clip-path": "url(#clip0_8773_6916)" }, h("path", { d: "M8.29999 1.13382C8.4562 0.97761 8.71018 0.97761 8.86639 1.13382C9.02255 1.29003 9.02259 1.54403 8.86639 1.70023L5.56561 5.00003L8.86639 8.30081C9.02234 8.45699 9.02237 8.71009 8.86639 8.86624C8.71018 9.02245 8.4562 9.02245 8.29999 8.86624L5.00018 5.56644L1.70038 8.86624C1.54419 9.02243 1.29019 9.0224 1.13397 8.86624C0.977762 8.71003 0.977762 8.45604 1.13397 8.29984L4.43378 5.00003L1.13397 1.70023C0.977762 1.54402 0.977762 1.29003 1.13397 1.13382C1.2902 0.977769 1.54422 0.977663 1.70038 1.13382L4.99921 4.43362L8.29999 1.13382Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_8773_6916" }, h("rect", { width: "10", height: "10", fill: "white" })))));
 
 const Close12 = (props) => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("g", { "clip-path": "url(#clip0_8697_41957)" }, h("path", { d: "M9.94635 1.34637C10.1416 1.15113 10.4581 1.15117 10.6534 1.34637C10.8486 1.54164 10.8486 1.85814 10.6534 2.05341L6.70709 5.99969L10.6534 9.94598C10.8486 10.1412 10.8485 10.4577 10.6534 10.653C10.4581 10.8483 10.1416 10.8483 9.94635 10.653L6.00006 6.70673L2.05377 10.653C1.85851 10.8483 1.542 10.8483 1.34674 10.653C1.15154 10.4577 1.1515 10.1412 1.34674 9.94598L5.29303 5.99969L1.34674 2.05341C1.15148 1.85814 1.15148 1.54164 1.34674 1.34637C1.54201 1.15125 1.85855 1.15116 2.05377 1.34637L6.00006 5.29266L9.94635 1.34637Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_8697_41957" }, h("rect", { width: "12", height: "12", fill: "white" })))));
@@ -274,11 +313,13 @@ var Youtube = /*#__PURE__*/Object.freeze({
 
 const Icons = {
     ...ArrowDown,
+    ...Arrow2Down,
     ...ArrowLeft,
     ...ArrowLeftEnd,
     ...ArrowRight,
     ...ArrowRightEnd,
     ...ArrowUp,
+    ...Barcode,
     ...Check,
     ...Close,
     ...Date,
@@ -292,7 +333,7 @@ const Icons = {
     ...Youtube,
 };
 
-const sdIconCss = ":host{line-height:0}.sd-icon{line-height:0;vertical-align:middle}.sd-icon--rotate-90{transform:rotate(90deg)}.sd-icon--rotate-180{transform:rotate(180deg)}.sd-icon--rotate-270{transform:rotate(270deg)}";
+const sdIconCss = "sd-icon{line-height:0}sd-icon .sd-icon{line-height:0;vertical-align:middle}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)}";
 
 const SdIcon = /*@__PURE__*/ proxyCustomElement(class SdIcon extends H {
     constructor(registerHost) {
@@ -350,6 +391,6 @@ function defineCustomElement() {
 }
 
 export { SdIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-COjeSZYo.js.map
+//# sourceMappingURL=p-C3mJCyWE.js.map
 
-//# sourceMappingURL=p-COjeSZYo.js.map
+//# sourceMappingURL=p-C3mJCyWE.js.map