@sellmate/design-system 1.0.60 → 1.0.62

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

@@ -1,19 +1,19 @@
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { i as inputTokens } from './component.textinput-DSNs8RRn.js';
+import { i as inputTokens } from './component.textinput-CJwbBrt5.js';
 
 const TEXTAREA_TOKENS = {
-    paddingX: inputTokens.input.sm.paddingX,
-    paddingY: inputTokens.input.sm.paddingY,
-    radius: inputTokens.input.sm.radius,
-    fontSize: inputTokens.input.sm.typography.fontSize,
-    lineHeight: inputTokens.input.sm.typography.lineHeight,
-    fontWeight: inputTokens.input.sm.typography.fontWeight};
+    paddingX: inputTokens.textinput.sm.paddingX,
+    paddingY: inputTokens.textinput.sm.paddingY,
+    radius: inputTokens.textinput.sm.radius,
+    fontSize: inputTokens.textinput.sm.typography.fontSize,
+    lineHeight: inputTokens.textinput.sm.typography.lineHeight,
+    fontWeight: inputTokens.textinput.sm.typography.fontWeight};
 const TEXTAREA_COLORS = {
-    text: inputTokens.input.text,
-    bg: inputTokens.input.bg,
-    border: inputTokens.input.border,
-    resizer: inputTokens.input.resizer,
+    text: inputTokens.textinput.text,
+    bg: inputTokens.textinput.bg,
+    border: inputTokens.textinput.border,
+    resizer: inputTokens.textinput.resizer,
 };
 
 const sdTextareaCss = () => `sd-textarea{display:inline-flex}sd-textarea .sd-textarea__content{width:100%;display:flex}sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);font-family:inherit;font-size:var(--sd-textarea-font-size);line-height:var(--sd-textarea-line-height);font-weight:var(--sd-textarea-font-weight);color:var(--sd-textarea-text-color);resize:vertical}sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:var(--sd-textarea-placeholder-color)}sd-textarea .sd-textarea__content .sd-textarea__native:disabled{cursor:not-allowed;color:var(--sd-textarea-disabled-color)}`;
@@ -126,7 +126,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '390028112d84c22766c6e00fa3625312b8096629', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '026ec0293049da167e7dbab5d3a28593d5e6b291', class: "sd-textarea__content" }, h("textarea", { key: 'd30b5e1bc61535c1c350f09bf2ea289f0b09001b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: 'ea611c76e2550f996cfe8848aa880d070325f133', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '90dbe39c0dd4eb8e6dfbf15afb8d04925d1c767b', class: "sd-textarea__content" }, h("textarea", { key: '9026a4837b4b7bba8bc8237ad3c1f516b9dda267', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-toast-container.entry.js

@@ -232,7 +232,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '7d2c4a095a0762710024c4c102ce49c7c7163368', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '18ef06077ee49165d6237dbd4fff06e8c1997bcb', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -55,10 +55,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: 'cb42937774233de10872edb8414db88f03868eb3', style: {
+        return (h("div", { key: '2a054f05ab63f450e7b0dc1d3816dc9cfca149d0', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: 'e58b3335c4d7c450ef3686c53138636502c4e0f3', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '62e42c814ab2f15d563b3f75c4e9dd3e559318a0', class: "sd-toast__icon" }, h("sd-icon", { key: '3e346baecd3207ee817ba843427ed2076fd7cc7c', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '700c7127a1d59409103b5ceb917e584020078736', class: "sd-toast__content" }, h("span", { key: 'd4165f0e324048edcb2492f3050795d26ce1fc86', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'f87089865b4e4fd5b488185478c453641920ac92', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '33de3a35d1532cd15215751996827a462a7b8cad', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'e9ebafe293282a8df041b343e83ccbcca0f15919', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'ebd56ba5d1aea16453a8e90be0ab1d7be8ccd579', class: "sd-toast__icon" }, h("sd-icon", { key: 'd01746c69004c6697209f76a88baba467bf290db', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '962d70832f11496be43a60415aa435a9094c3fef', class: "sd-toast__content" }, h("span", { key: 'fd868607134f556980c67f22c2e55d9819fbfb99', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '72feff87a7e2f0a7726ed293e14203ae1c82d80f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'f98218ceb7d1a339065219a35bef7db4125ea30b', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle-button.entry.js

@@ -39,7 +39,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '9d98201d5ab361d0d2d5c8c61ce1e5b129f4d588', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'a745715a752bf99a94ab01d8c07c87d0f507a8ef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '0e933c52b633eec101beec8aa6ec888dc6bc3448', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '833e7c26895e310cb6322b7231345f76f0a409dc', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -35,7 +35,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '9f4cf71a2aab588deb68d8e6908f0988ddbacb90', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '6d1279761ea384a233bff234c549030709fd4ea3', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '7ecd96f5e2c48fda17ed0086ab3cc8bc1caab458', class: "sd-toggle__label" }, this.label), h("div", { key: '26f4d468e4ff0c4473e2ce00b7e69a855a249a96', class: "sd-toggle__track" }, h("div", { key: '3a7f4019197cfa23dc268ee95308e60d7159ba28', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'ca08050cdbbb4e5e7e615f72411be5bff93955d8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'abdae5d4dc59fc121ded9cc0800f68d3996d4e50', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '37d23f59f877100c53deace3c6c70b441df5748c', class: "sd-toggle__label" }, this.label), h("div", { key: '545f76c3c1e63198f6dc80bdf6bf44f6840082b2', class: "sd-toggle__track" }, h("div", { key: '4142b2e46b93cf1d5f86cb1b5a4490c0e6a03a05', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/types/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class SdDatePickerCalendar {
+    value: string | null;
+    selectable?: [string, string];
+    private currentYear;
+    private currentMonth;
+    select: EventEmitter<string>;
+    viewChange: EventEmitter<{
+        year: number;
+        month: number;
+    }>;
+    private dateUtil;
+    componentWillLoad(): void;
+    handleValueChange(): void;
+    private syncViewFromValue;
+    private formatDate;
+    private get cells();
+    private emitViewChange;
+    private goPrevYear;
+    private goNextYear;
+    private goPrevMonth;
+    private goNextMonth;
+    private isDisabled;
+    private handleDayClick;
+    render(): any;
+}

package/dist/types/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { type DatePickerSize } from '../sd-date-picker.config';
+export declare class SdDatePickerTrigger {
+    displayText: string;
+    placeholder: string;
+    disabled: boolean;
+    size: DatePickerSize;
+    triggerClick: EventEmitter<void>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/sd-date-picker/sd-date-picker.config.d.ts

@@ -0,0 +1,71 @@
+export type DatePickerSize = 'sm' | 'md';
+export interface DatePickerSizeTokens {
+    height: string;
+    paddingX: string;
+    gap: string;
+    iconSize: string;
+    radius: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+}
+export declare const DATEPICKER_SIZE_MAP: Record<DatePickerSize, DatePickerSizeTokens>;
+export declare const DATEPICKER_COLORS: {
+    border: {
+        width: string;
+        default: string;
+        focus: string;
+        disabled: string;
+    };
+    bg: {
+        default: string;
+        disabled: string;
+    };
+    icon: {
+        default: string;
+        disabled: string;
+    };
+    text: {
+        default: string;
+        hint: string;
+        disabled: string;
+    };
+};
+export declare const CALENDAR_LAYOUT: {
+    bg: string;
+    paddingXY: string;
+    gap: string;
+    radius: string;
+    header: {
+        gap: string;
+        divider: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+    };
+    week: {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        color: string;
+    };
+    grid: {
+        rowGap: string;
+    };
+    day: {
+        size: string;
+        circleSize: string;
+        circleRadius: string;
+        defaultText: string;
+        hoverText: string;
+        hoverBorder: string;
+        selectBg: string;
+        selectText: string;
+        disabledText: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        boldFontWeight: string;
+    };
+};
+export declare const WEEK_LABELS: readonly ["일", "월", "화", "수", "목", "금", "토"];

package/dist/types/components/sd-date-picker/sd-date-picker.d.ts

@@ -1,21 +1,47 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { Rule } from '../../types/form';
+import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
+import { type DatePickerSize } from './sd-date-picker.config';
 export declare class SdDatePicker {
+    private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
     value: string | null;
-    label?: string;
+    size: DatePickerSize;
+    placeholder: string;
     selectable?: [string, string];
     disabled: boolean;
-    placeholder: string;
-    isOpen: boolean;
+    width: string | number;
+    label: string;
+    addonLabel: string;
+    hint: string;
+    errorMessage: string;
+    fieldName: string;
+    rules?: Rule[];
+    error: boolean;
+    icon?: IconProps;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    private isOpen;
+    private isAnimatingOut;
+    private focused;
+    private hovered;
     update: EventEmitter<string | null>;
     viewChange: EventEmitter<{
         year: number;
         month: number;
     }>;
-    private inputEl?;
-    private openMenu;
+    private triggerRef?;
+    private formField?;
+    private closeAnimationTimer?;
+    private internalName;
+    watchIsOpen(newValue: boolean): void;
+    sdValidate(): Promise<boolean | undefined>;
+    sdReset(): Promise<void | undefined>;
+    sdResetValidate(): Promise<void | undefined>;
+    private closeDropdown;
+    private handleTriggerClick;
     private handleSelect;
-    private handleClose;
     private handleViewChange;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class SdDateRangePickerCalendar {
+    value: [string, string] | null;
+    selectable?: [string, string];
+    maxRange?: number;
+    private currentYear;
+    private currentMonth;
+    private pendingStart;
+    private hoverDate;
+    private displayValue;
+    select: EventEmitter<[string, string]>;
+    viewChange: EventEmitter<{
+        year: number;
+        month: number;
+    }>;
+    private dateUtil;
+    componentWillLoad(): void;
+    handleValueChange(): void;
+    private syncFromValue;
+    private get rightYear();
+    private get rightMonth();
+    private formatDate;
+    private buildCells;
+    private emitViewChange;
+    private goPrevYear;
+    private goNextYear;
+    private goPrevMonth;
+    private goNextMonth;
+    private goToday;
+    private isDisabled;
+    private handleDayClick;
+    private handleDayHover;
+    private getRangeState;
+    private renderHeader;
+    private renderYearNav;
+    private renderPanel;
+    render(): any;
+}

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.config.d.ts

@@ -0,0 +1,9 @@
+import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, CALENDAR_LAYOUT, WEEK_LABELS, type DatePickerSize, type DatePickerSizeTokens } from '../sd-date-picker/sd-date-picker.config';
+export { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, CALENDAR_LAYOUT, WEEK_LABELS };
+export type { DatePickerSize, DatePickerSizeTokens };
+export declare const RANGE_LAYOUT: {
+    bg: string;
+    height: string;
+    panelGap: string;
+    divider: string;
+};

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts

@@ -1,45 +1,50 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { Rule } from '../../types/form';
+import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
+import { type DatePickerSize } from './sd-date-range-picker.config';
+export type DateRangeValue = [string, string] | null;
 export declare class SdDateRangePicker {
+    private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
-    value: [string, string];
-    label?: string;
+    value: DateRangeValue;
+    size: DatePickerSize;
+    placeholder: string;
     selectable?: [string, string];
     maxRange?: number;
     disabled: boolean;
-    placeholder: string;
-    isOpen: boolean;
-    dateRange: [string, string];
-    hoverDate: string;
-    prevYear: number;
-    prevMonth: number;
-    update: EventEmitter<[string, string]>;
+    width: string | number;
+    label: string;
+    addonLabel: string;
+    hint: string;
+    errorMessage: string;
+    fieldName: string;
+    rules?: Rule[];
+    error: boolean;
+    icon?: IconProps;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    private isOpen;
+    private isAnimatingOut;
+    private focused;
+    private hovered;
+    update: EventEmitter<DateRangeValue>;
     viewChange: EventEmitter<{
         year: number;
         month: number;
     }>;
-    private inputEl?;
-    private dateUtil;
-    private tempDateRange;
-    componentWillLoad(): void;
-    onValueChange(newValue: [string, string]): void;
-    private syncFromValue;
-    private resetCalendarByDateRange;
-    private get nextYear();
-    private get nextMonth();
-    private get prevCalendar();
-    private get nextCalendar();
-    private setPrevYear;
-    private setPrevMonth;
-    private updateYearMonth;
-    private setHoverDate;
-    private setDateRange;
-    private formatDate;
-    private getDateBoxType;
-    private isDateInRange;
-    private isDisabledDate;
-    private openMenu;
-    private closeMenu;
-    private handleDateClick;
-    private handleDateHover;
+    private triggerRef?;
+    private formField?;
+    private closeAnimationTimer?;
+    private internalName;
+    watchIsOpen(newValue: boolean): void;
+    sdValidate(): Promise<boolean | undefined>;
+    sdReset(): Promise<void | undefined>;
+    sdResetValidate(): Promise<void | undefined>;
+    private closeDropdown;
+    private handleTriggerClick;
+    private handleSelect;
+    private handleViewChange;
+    private get displayText();
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts

@@ -15,7 +15,6 @@ export declare const DROPDOWN_BUTTON_CONFIG: Record<DropdownButtonName, {
     size: DropdownButtonSize;
     color: string;
 }>;
-export declare const DROPDOWN_BUTTON_MIN_WIDTHS: Record<DropdownButtonSize, string>;
 export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly primary: string;
     readonly secondary: string;

package/dist/types/components/sd-ghost-button/sd-ghost-button.config.d.ts

@@ -1,5 +1,5 @@
 export type GhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
-export type GhostButtonIntent = 'default' | 'danger' | 'action';
+export type GhostButtonIntent = 'default' | 'danger' | 'action' | 'inverse';
 export declare const GHOST_BUTTON_FOCUS_RING_COLOR = "#0075FF";
 export declare const GHOST_BUTTON_SIZES: Record<GhostButtonSize, {
     size: number;
@@ -10,3 +10,4 @@ export declare const GHOST_BUTTON_HOVER_OPACITY: string;
 export declare const GHOST_BUTTON_CONTENT_COLORS: Record<GhostButtonIntent, string>;
 export declare const GHOST_BUTTON_HOVER_BG_COLORS: Record<GhostButtonIntent, string>;
 export declare const GHOST_BUTTON_DISABLED_ICON: string;
+export declare const GHOST_BUTTON_DISABLED_COLORS: Record<GhostButtonIntent, string>;

package/dist/types/components/sd-radio/sd-radio.config.d.ts

@@ -0,0 +1,29 @@
+export declare const RADIO_LAYOUT: {
+    size: string;
+    radius: string;
+    borderWidth: string;
+    gap: string;
+};
+export declare const RADIO_TYPOGRAPHY: {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+};
+export declare const RADIO_COLORS: {
+    unchecked: {
+        bg: string;
+        bgHover: string;
+        border: string;
+        borderHover: string;
+    };
+    checked: {
+        border: string;
+        dot: string;
+    };
+    disabled: {
+        bg: string;
+        border: string;
+        dot: string;
+    };
+    label: string;
+};

package/dist/types/components/sd-radio/sd-radio.d.ts

@@ -2,11 +2,13 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export type RadioValue = string | number | boolean;
 export declare class SdRadio {
     value: RadioValue;
-    disabled: boolean;
     val: RadioValue;
+    disabled: boolean;
     label?: string;
     update: EventEmitter<RadioValue>;
-    private getRadioClasses;
+    valueChanged(newValue: RadioValue): void;
+    private get isSelected();
+    private get radioClasses();
     private handleRadioChange;
     render(): any;
 }

package/dist/types/components/sd-select-v2/sd-select-v2.config.d.ts

@@ -86,7 +86,6 @@ export declare const LIST_ITEM_COLORS: {
 };
 export declare const LIST_BOX_LAYOUT: {
     radius: string;
-    paddingBottom: string;
 };
 export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;