@sellmate/design-system 1.0.78 → 1.1.0

package/dist/types/components/{sd-button-v2/sd-button-v2.config.d.ts → sd-button/sd-button.config.d.ts}

@@ -1,14 +1,8 @@
-export type ButtonV2Size = 'xs' | 'sm' | 'md' | 'lg';
-export type ButtonV2Type = 'button' | 'submit' | 'reset';
+import type { Components } from '../../components';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonType = 'button' | 'submit' | 'reset';
 export declare const BUTTON_FOCUS_RING_COLOR = "#0075FF";
-export interface ButtonV2Props {
-    name?: ButtonV2Name;
-    label?: string;
-    icon?: IconName;
-    ariaLabel?: string;
-    disabled?: boolean;
-    type?: ButtonV2Type;
-}
+export type ButtonProps = Partial<Components.SdButton>;
 export declare const BUTTON_CONFIG: {
     readonly primary_xs: {
         readonly variant: "primary";
@@ -131,8 +125,8 @@ export declare const BUTTON_CONFIG: {
         readonly color: string;
     };
 };
-export type ButtonV2Name = keyof typeof BUTTON_CONFIG;
-export declare const BUTTON_ICON_SIZES: Record<ButtonV2Size, number>;
+export type ButtonName = keyof typeof BUTTON_CONFIG;
+export declare const BUTTON_ICON_SIZES: Record<ButtonSize, number>;
 export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly primary: string;
     readonly secondary: string;
@@ -157,8 +151,8 @@ export declare const PRESET_BORDER_COLORS: {
     readonly danger: "transparent";
     readonly danger_outline: string;
 };
-export type ButtonV2Preset = keyof typeof PRESET_CONTENT_COLORS;
+export type ButtonPreset = keyof typeof PRESET_CONTENT_COLORS;
 export declare const DISABLED_TEXT: string;
 export declare const DISABLED_ICON: string;
-export declare const isButtonV2Name: (value: string) => value is ButtonV2Name;
-export declare const getPresetName: (value: ButtonV2Name) => ButtonV2Preset;
+export declare const isButtonName: (value: string) => value is ButtonName;
+export declare const getPresetName: (value: ButtonName) => ButtonPreset;

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

@@ -1,22 +1,20 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ButtonVariant = 'primary' | 'outline' | 'ghost';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+import { type ButtonName, type ButtonType } from './sd-button.config';
 export declare class SdButton {
-    el: HTMLElement;
-    variant?: ButtonVariant;
-    size: ButtonSize;
-    color: string;
+    name: ButtonName;
     label: string;
-    disabled: boolean;
-    type: 'button' | 'submit' | 'reset';
     icon?: IconName;
-    iconColor?: string;
-    iconSize?: number;
-    iconRight?: IconName;
-    noHover: boolean;
-    sdClass: string;
+    rightIcon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonType;
     click: EventEmitter<MouseEvent>;
+    private hasWarnedMissingAriaLabel;
     private handleClick;
+    private get resolvedName();
+    private get resolvedConfig();
     private getButtonClasses;
+    componentWillRender(): void;
+    private warnIfMissingAriaLabel;
     render(): any;
 }

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.config.d.ts

@@ -1,5 +1,5 @@
 import type { TagName } from '../sd-tag/sd-tag.config';
-import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+import type { ButtonName } from '../sd-button/sd-button.config';
 export type ConfirmModalType = 'positive' | 'negative' | 'default';
 export type PositiveMainButton = 'primary_md' | 'primary_outline_md';
 export type NegativeMainButton = 'danger_md' | 'danger_outline_md';
@@ -9,5 +9,5 @@ export declare const CONFIRM_MODAL_DEFAULT_BUTTON: Record<ConfirmModalType, Conf
 export declare const CONFIRM_MODAL_ICON_MAP: Record<ConfirmModalType, IconName | null>;
 export declare const CONFIRM_MODAL_ICON_COLOR: Record<ConfirmModalType, string>;
 export declare const TITLE_ICON_SIZE: number;
-export declare const SUB_BUTTON_PRESET: ButtonV2Name;
-export type { TagName, ButtonV2Name };
+export declare const SUB_BUTTON_PRESET: ButtonName;
+export type { TagName, ButtonName };

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ConfirmModalType, type ConfirmModalMainButton, type TagName } from './sd-confirm-modal.config';
+import { type ConfirmModalMainButton, type ConfirmModalType, type TagName } from './sd-confirm-modal.config';
 export declare class SdConfirmModal {
     el: HTMLElement;
     private hasSlottedContent;
@@ -24,6 +24,7 @@ export declare class SdConfirmModal {
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
+    private get resolvedType();
     private get resolvedMainButton();
     private get hasTagContent();
     private get showContentBox();

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

@@ -1,4 +1,4 @@
-import { type ButtonV2Name, type ButtonV2Preset } from '../sd-button-v2/sd-button-v2.config';
+import { type ButtonName, type ButtonPreset } from '../sd-button/sd-button.config';
 export interface DropdownButtonItem {
     value: string | number;
     label: string;
@@ -8,8 +8,8 @@ export interface DropdownButtonItem {
 export type DropdownButtonValue = DropdownButtonItem['value'];
 export type DropdownButtonSize = 'xs' | 'sm' | 'md';
 type UnsupportedDropdownButtonName = `${string}_lg`;
-export type DropdownButtonName = Exclude<ButtonV2Name, UnsupportedDropdownButtonName>;
-export type DropdownButtonPreset = ButtonV2Preset;
+export type DropdownButtonName = Exclude<ButtonName, UnsupportedDropdownButtonName>;
+export type DropdownButtonPreset = ButtonPreset;
 export declare const DROPDOWN_BUTTON_CONFIG: Record<DropdownButtonName, {
     variant: "primary" | "outline";
     size: DropdownButtonSize;

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

@@ -26,6 +26,7 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     closeDropdown: () => void;
     protected handleDocumentClick(event: Event): void;
     protected handleDocumentKeydown(event: KeyboardEvent): void;
+    private get resolvedName();
     private get resolvedConfig();
     private getNextEnabledIndex;
     private toggleDropdown;

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

@@ -8,6 +8,7 @@ export declare class SdField implements ValidatableField {
     rules?: Rule[];
     error?: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     hovered?: boolean;
     focused?: boolean;
     status?: 'default' | 'pass' | 'error';

package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts

@@ -0,0 +1,105 @@
+import type { Components } from '../../components';
+export declare const KEY_VALUE_TABLE_LAYOUT: {
+    rowHeight: number;
+    thWidth: number;
+    borderRadius: number;
+    paddingX: number;
+    paddingY: number;
+    helpIconSize: number;
+    requiredIconSize: number;
+    gap: number;
+    labelGap: number;
+    borderWidth: number;
+    searchPaddingX: number;
+};
+export declare const KEY_VALUE_TABLE_COLORS: {
+    border: string;
+    thBg: string;
+    thLabel: string;
+    required: string;
+    helpIcon: string;
+    tdBg: string;
+    tdText: string;
+    searchBg: string;
+};
+export declare const KEY_VALUE_TABLE_TYPOGRAPHY: {
+    labelFontFamily: string;
+    labelFontSize: number;
+    labelFontWeight: number;
+    labelLineHeight: number;
+    tdFontFamily: string;
+    tdFontSize: number;
+    tdFontWeight: number;
+    tdLineHeight: number;
+};
+export type SdKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'date-picker' | 'date-range-picker' | 'file-picker';
+export interface SdKeyValueTextOptions {
+    value?: string | number | null;
+}
+export type SdKeyValueInputOptions = Partial<Components.SdInput>;
+export type SdKeyValueSelectOptions = Partial<Components.SdSelect>;
+export type SdKeyValueRadioOptions = Partial<Components.SdRadioGroup>;
+export type SdKeyValueCheckboxOptions = Partial<Components.SdCheckbox>;
+export type SdKeyValueDatePickerOptions = Partial<Components.SdDatePicker>;
+export type SdKeyValueDateRangePickerOptions = Partial<Components.SdDateRangePicker>;
+export type SdKeyValueTextareaOptions = Partial<Components.SdTextarea>;
+export type SdKeyValueNumberInputOptions = Partial<Components.SdNumberInput>;
+export type SdKeyValueFilePickerOptions = Partial<Components.SdFilePicker>;
+interface FieldBase {
+    name: string;
+    label?: string;
+    required?: boolean;
+    helpText?: string;
+    /** th 셀 자체를 렌더링하지 않음. 위 row의 thRowSpan으로 가려진 위치를 명시할 때 사용 */
+    hideTh?: boolean;
+    /** th 셀이 아래 row까지 확장 (HTML rowspan). 같은 컬럼 인덱스의 다음 (N-1)개 row는 th 자동 생략 */
+    thRowSpan?: number;
+    /** th 셀이 옆 컬럼까지 확장 (HTML colspan) */
+    thColSpan?: number;
+    /** td 셀이 아래 row까지 확장 (HTML rowspan) */
+    tdRowSpan?: number;
+    /** td 셀이 옆 컬럼까지 확장 (HTML colspan) */
+    tdColSpan?: number;
+    /** th 셀에 추가할 클래스 (string 또는 클래스명 배열) */
+    thClass?: string | string[];
+    /** th 셀에 적용할 인라인 스타일 */
+    thStyle?: {
+        [key: string]: string;
+    };
+}
+export type SdKeyValueField = (FieldBase & {
+    type?: 'text';
+    options?: SdKeyValueTextOptions;
+}) | (FieldBase & {
+    type: 'input';
+    options?: SdKeyValueInputOptions;
+}) | (FieldBase & {
+    type: 'textarea';
+    options?: SdKeyValueTextareaOptions;
+}) | (FieldBase & {
+    type: 'number-input';
+    options?: SdKeyValueNumberInputOptions;
+}) | (FieldBase & {
+    type: 'select';
+    options?: SdKeyValueSelectOptions;
+}) | (FieldBase & {
+    type: 'radio';
+    options?: SdKeyValueRadioOptions;
+}) | (FieldBase & {
+    type: 'checkbox';
+    options?: SdKeyValueCheckboxOptions;
+}) | (FieldBase & {
+    type: 'date-picker';
+    options?: SdKeyValueDatePickerOptions;
+}) | (FieldBase & {
+    type: 'date-range-picker';
+    options?: SdKeyValueDateRangePickerOptions;
+}) | (FieldBase & {
+    type: 'file-picker';
+    options?: SdKeyValueFilePickerOptions;
+});
+export interface SdKeyValueChangeDetail {
+    name: string;
+    value: unknown;
+}
+export {};

package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SdKeyValueField, SdKeyValueChangeDetail } from './sd-key-value-table.config';
+export declare class SdKeyValueTable {
+    /**
+     * 2차원 배열. 외부 배열 = row, 내부 배열 = 한 row에 들어가는 [th|td] field들.
+     * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
+     */
+    fields: SdKeyValueField[][];
+    /**
+     * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
+     */
+    search: boolean;
+    /**
+     * true이면 테이블 상단 border-radius를 0으로 처리.
+     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     */
+    useTop: boolean;
+    change: EventEmitter<SdKeyValueChangeDetail>;
+    searchEvent: EventEmitter<void>;
+    private emit;
+    private handleSearchClick;
+    private renderField;
+    private renderHelpIcon;
+    /**
+     * 같은 컬럼 인덱스의 thRowSpan에 의해 가려지는 위치를 자동 계산.
+     * `skip[r][c] === true` 이면 row r의 c번째 field는 th 셀을 렌더하지 않음.
+     */
+    private computeAutoSkipTh;
+    /**
+     * 모든 row를 훑어 전체 컬럼 수를 계산.
+     * th/td 자체와 thColSpan/tdColSpan, hideTh, thRowSpan(autoSkip)을 모두 반영.
+     */
+    private computeMaxCols;
+    private renderTh;
+    private renderTd;
+    private warnDuplicateNames;
+    render(): any;
+}

package/dist/types/components/sd-loading-modal/sd-loading-modal.config.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+import type { ButtonName } from '../sd-button/sd-button.config';
 export type LoadingModalState = 'loading' | 'error';
 export declare const LOADING_MODAL_LAYOUT: {
     minWidth: number;
@@ -22,4 +22,4 @@ export declare const LOADING_MODAL_TYPOGRAPHY: {
 };
 export declare const LOADING_MODAL_DEFAULT_MESSAGE: Record<LoadingModalState, string>;
 export declare const LOADING_MODAL_DEFAULT_BUTTON_LABEL: Record<LoadingModalState, string>;
-export declare const LOADING_MODAL_BUTTON_PRESET: ButtonV2Name;
+export declare const LOADING_MODAL_BUTTON_PRESET: ButtonName;

package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts

@@ -8,6 +8,7 @@ export declare class SdLoadingModal {
     width?: string | number;
     height?: string | number;
     click: EventEmitter<void>;
+    private get resolvedState();
     private get resolvedMessage();
     private get resolvedButtonLabel();
     private handleClick;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmModalType, ConfirmModalMainButton } from '../sd-confirm-modal/sd-confirm-modal.config';
+import type { ConfirmModalMainButton, ConfirmModalType } from '../sd-confirm-modal/sd-confirm-modal.config';
 import type { LoadingModalState } from '../sd-loading-modal/sd-loading-modal.config';
 import type { TagName } from '../sd-tag/sd-tag.config';
 export interface ConfirmModalOptions {

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

@@ -1,13 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
-export interface PopoverButton {
+import { type ButtonName, type ButtonType } from '../sd-button/sd-button.config';
+import type { SdButton } from '../sd-button/sd-button';
+import type { SdTextLink } from '../sd-text-link/sd-text-link';
+export type PopoverButton = Partial<Pick<SdButton, 'name' | 'icon' | 'rightIcon' | 'ariaLabel' | 'disabled' | 'type'>> & {
     label: string;
-    variant?: ButtonVariant;
-    color?: string;
-    size?: ButtonSize;
-    icon?: IconName;
     onClick?: (e: Event) => void;
-}
+};
+export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'useArrow' | 'underline' | 'disabled'>> & {
+    label: string;
+    onClick?: (e: Event) => void;
+};
 export declare class SdPopover {
     el: HTMLElement;
     show: boolean;
@@ -16,11 +18,15 @@ export declare class SdPopover {
     icon: IconName;
     iconSize: number;
     label: string;
-    buttonSize: ButtonSize;
-    buttonVariant: ButtonVariant;
+    name: ButtonName;
+    rightIcon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonType;
     menuTitle?: string;
     messages: string[];
-    buttons: PopoverButton[];
+    leftLink?: PopoverLink;
+    button?: PopoverButton;
     menuClass: string;
     useClose: boolean;
     showChange: EventEmitter<boolean>;

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

@@ -0,0 +1,30 @@
+export type PopupType = 'default' | 'light';
+export declare const POPUP_LAYOUT: {
+    bodyBg: string;
+};
+export declare const POPUP_HEADER: {
+    bg: {
+        default: string;
+        light: string;
+    };
+    titleColor: {
+        default: string;
+        light: string;
+    };
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: number;
+    lineHeight: number;
+    height: number;
+    paddingX: number;
+    paddingY: number;
+};
+export declare const POPUP_FOOTER: {
+    bg: string;
+    paddingX: number;
+    paddingY: number;
+    gap: number;
+    height: number;
+    slotHeight: number;
+    shadow: string;
+};

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

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ButtonProps } from '../sd-button/sd-button.config';
+import { type PopupType } from './sd-popup.config';
+export declare class SdPopup {
+    popupTitle: string;
+    type: PopupType;
+    useFooter: boolean;
+    submitButtonProps?: ButtonProps;
+    submit: EventEmitter<void>;
+    render(): any;
+}

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

@@ -15,6 +15,7 @@ export declare class SdTable {
     height?: string;
     stickyHeader: boolean;
     stickyColumn: SdTableStickyColumn;
+    radius: 'default' | 'useTop';
     noDataLabel: string;
     resolvedNoDataLabel: string;
     isLoading: boolean;
@@ -135,6 +136,7 @@ export declare class SdTable {
     getCellClassSync(rowKey: string, field: string): string | undefined;
     hasRowspanSync(): boolean;
     isCoveredSync(rowKey: string, colIdx: number, columns: SdTableColumn[]): boolean;
+    isVisualLastRowSync(rowKey: string, field: string): boolean;
     setRowCountSync(count: number): void;
     setRowCount(count: number): Promise<void>;
     calculateVisibleRange(scrollTop: number, containerHeight: number): {

package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts

@@ -35,5 +35,7 @@ export declare class SdTr {
     private getSpanFor;
     private isCovered;
     private getCellClassFor;
+    private isVisualLastRow;
+    private isVisualLastRowForSelfRow;
     render(): any;
 }

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

@@ -4,6 +4,7 @@ export declare class SdTag {
     label: string;
     icon?: IconName;
     isLeft: boolean;
+    private get resolvedName();
     private get resolvedConfig();
     private renderIcon;
     render(): any;

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

@@ -1,7 +1,11 @@
-export type ToastType = 'default' | 'danger' | 'caution' | 'complete' | 'accent';
+import type { ButtonName } from '../sd-button/sd-button.config';
+export type ToastType = 'default' | 'danger' | 'caution' | 'complete' | 'accent' | 'info';
+export declare const TOAST_BUTTON_NAME_BY_TYPE: Record<ToastType, ButtonName>;
 export declare const TOAST_TYPE_CONFIG: Record<ToastType, {
     bg: string;
     content: string;
+    icon?: string;
+    linkColor?: string;
 }>;
 export declare const TOAST_LAYOUT: {
     radius: string;

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

@@ -5,8 +5,10 @@ export declare class SdToast {
     message: string;
     link?: string;
     linkLabel?: string;
+    buttonLabel?: string;
     useClose: boolean;
     type: ToastType;
     close: EventEmitter<void>;
+    buttonClick: EventEmitter<MouseEvent>;
     render(): any;
 }

package/dist/types/components/sd-toast-container/sd-toast-container.config.d.ts

@@ -6,8 +6,10 @@ export interface ToastNotifyOptions {
     icon?: IconName;
     link?: string;
     linkLabel?: string;
+    buttonLabel?: string;
     useClose?: boolean;
     duration?: number;
+    onButtonClick?: (event: MouseEvent) => void;
 }
 export interface ToastEntry {
     id: string;

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

@@ -1,18 +1,7 @@
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
+import type { Components } from '../../components';
 export type TooltipType = 'default' | 'danger' | 'warning' | 'accent';
 export declare const TOOLTIP_TYPE_CONFIG: Record<TooltipType, {
     bg: string;
     content: string;
 }>;
-export interface SdTooltipProps {
-    trigger?: 'hover' | 'click';
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    color?: string;
-    tooltipType?: TooltipType;
-    icon?: IconName;
-    iconSize?: number;
-    label?: string;
-    buttonSize?: ButtonSize;
-    buttonVariant?: ButtonVariant;
-    noHover?: boolean;
-}
+export type SdTooltipProps = Partial<Components.SdTooltip>;

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

@@ -1,4 +1,4 @@
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
+import { type ButtonName, type ButtonType } from '../sd-button/sd-button.config';
 import { type TooltipType } from './sd-tooltip.config';
 export declare class SdTooltip {
     el: HTMLElement;
@@ -9,9 +9,11 @@ export declare class SdTooltip {
     icon: IconName;
     iconSize: number;
     label: string;
-    buttonSize: ButtonSize;
-    buttonVariant: ButtonVariant;
-    noHover: boolean;
+    name: ButtonName;
+    rightIcon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonType;
     sdClass?: string;
     showTooltip: boolean;
     slotContentHTML: string;