@sellmate/design-system-react 1.4.0 → 1.6.0

package/dist/components/components.d.ts

@@ -10,6 +10,7 @@ import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/componen
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
+import { SdCallout as SdCalloutElement } from "@sellmate/design-system/dist/components/sd-callout.js";
 import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
 import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
 import { SdChip as SdChipElement } from "@sellmate/design-system/dist/components/sd-chip.js";
@@ -20,6 +21,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/des
 import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -86,6 +88,8 @@ export type SdCalendarEvents = {
     }>>;
 };
 export declare const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar>;
+export type SdCalloutEvents = NonNullable<unknown>;
+export declare const SdCallout: StencilReactComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout>;
 export type SdCardEvents = NonNullable<unknown>;
 export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents, Components.SdCard>;
 export type SdCheckboxEvents = {
@@ -140,8 +144,11 @@ export type SdDateRangePickerCalendarEvents = {
     }>>;
 };
 export declare const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar>;
+export type SdDividerEvents = NonNullable<unknown>;
+export declare const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>;
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>;
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{
         isOpen: boolean;
     }>>;

package/dist/components/components.js

@@ -6,6 +6,7 @@ import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from
 import { SdBarcodeInput as SdBarcodeInputElement, defineCustomElement as defineSdBarcodeInput } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
+import { SdCallout as SdCalloutElement, defineCustomElement as defineSdCallout } from "@sellmate/design-system/dist/components/sd-callout.js";
 import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
 import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
 import { SdChip as SdChipElement, defineCustomElement as defineSdChip } from "@sellmate/design-system/dist/components/sd-chip.js";
@@ -16,6 +17,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement, defineCustomElement
 import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement, defineCustomElement as defineSdDateRangePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement, defineCustomElement as defineSdDivider } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement, defineCustomElement as defineSdFilePicker } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -107,6 +109,14 @@ export const SdCalendar = /*@__PURE__*/ createComponent({
     },
     defineCustomElement: defineSdCalendar
 });
+export const SdCallout = /*@__PURE__*/ createComponent({
+    tagName: 'sd-callout',
+    elementClass: SdCalloutElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineSdCallout
+});
 export const SdCard = /*@__PURE__*/ createComponent({
     tagName: 'sd-card',
     elementClass: SdCardElement,
@@ -208,6 +218,14 @@ export const SdDateRangePickerCalendar = /*@__PURE__*/ createComponent({
     },
     defineCustomElement: defineSdDateRangePickerCalendar
 });
+export const SdDivider = /*@__PURE__*/ createComponent({
+    tagName: 'sd-divider',
+    elementClass: SdDividerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineSdDivider
+});
 export const SdDropdownButton = /*@__PURE__*/ createComponent({
     tagName: 'sd-dropdown-button',
     elementClass: SdDropdownButtonElement,
@@ -215,6 +233,7 @@ export const SdDropdownButton = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onSdClick: 'sdClick',
+        onSdButtonClick: 'sdButtonClick',
         onSdDropDownShow: 'sdDropDownShow'
     },
     defineCustomElement: defineSdDropdownButton

package/dist/components/components.server.d.ts

@@ -11,6 +11,7 @@ import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/componen
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
+import { SdCallout as SdCalloutElement } from "@sellmate/design-system/dist/components/sd-callout.js";
 import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
 import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
 import { SdChip as SdChipElement } from "@sellmate/design-system/dist/components/sd-chip.js";
@@ -21,6 +22,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/des
 import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -88,6 +90,8 @@ export type SdCalendarEvents = {
     }>>;
 };
 export declare const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar>;
+export type SdCalloutEvents = NonNullable<unknown>;
+export declare const SdCallout: StencilReactComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout>;
 export type SdCardEvents = NonNullable<unknown>;
 export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents, Components.SdCard>;
 export type SdCheckboxEvents = {
@@ -142,8 +146,11 @@ export type SdDateRangePickerCalendarEvents = {
     }>>;
 };
 export declare const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar>;
+export type SdDividerEvents = NonNullable<unknown>;
+export declare const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>;
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>;
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{
         isOpen: boolean;
     }>>;

package/dist/components/components.server.js

@@ -70,12 +70,23 @@ export const SdCalendar = /*@__PURE__*/ createComponent({
     tagName: 'sd-calendar',
     properties: {
         value: 'value',
+        elevated: 'elevated',
         events: 'events'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdCalendar,
     serializeShadowRoot
 });
+export const SdCallout = /*@__PURE__*/ createComponent({
+    tagName: 'sd-callout',
+    properties: {
+        type: 'type',
+        message: 'message'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdCallout,
+    serializeShadowRoot
+});
 export const SdCard = /*@__PURE__*/ createComponent({
     tagName: 'sd-card',
     properties: {
@@ -225,12 +236,20 @@ export const SdDateRangePickerCalendar = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdDateRangePickerCalendar,
     serializeShadowRoot
 });
+export const SdDivider = /*@__PURE__*/ createComponent({
+    tagName: 'sd-divider',
+    properties: { vertical: 'vertical' },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdDivider,
+    serializeShadowRoot
+});
 export const SdDropdownButton = /*@__PURE__*/ createComponent({
     tagName: 'sd-dropdown-button',
     properties: {
         name: 'name',
         label: 'label',
         disabled: 'disabled',
+        split: 'split',
         items: 'items'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
@@ -452,6 +471,7 @@ export const SdNumberInput = /*@__PURE__*/ createComponent({
         value: 'value',
         label: 'label',
         labelWidth: 'label-width',
+        labelTooltip: 'label-tooltip',
         addonLabel: 'addon-label',
         addonAlign: 'addon-align',
         placeholder: 'placeholder',
@@ -502,7 +522,6 @@ export const SdPopover = /*@__PURE__*/ createComponent({
         type: 'type',
         menuTitle: 'menu-title',
         menuClass: 'menu-class',
-        useClose: 'use-close',
         messages: 'messages'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
@@ -669,7 +688,7 @@ export const SdTable = /*@__PURE__*/ createComponent({
         width: 'width',
         height: 'height',
         stickyHeader: 'sticky-header',
-        radius: 'radius',
+        useTop: 'use-top',
         noDataLabel: 'no-data-label',
         isLoading: 'is-loading',
         useInternalPagination: 'use-internal-pagination',

package/dist/define-custom-elements.d.ts

@@ -0,0 +1 @@
+export declare function defineCustomElements(): void;

package/dist/define-custom-elements.js

@@ -0,0 +1,25 @@
+import { defineCustomElements as defineLazyCustomElements } from '@sellmate/design-system/loader';
+// Host 기반 컴포넌트는 static 등록으로 고정해, 이중 runtime에서 발생하는 Host 식별자 불일치를 방지한다.
+import { defineCustomElement as defineSdCircleProgress } from '@sellmate/design-system/dist/components/sd-circle-progress.js';
+import { defineCustomElement as defineSdLinearProgress } from '@sellmate/design-system/dist/components/sd-linear-progress.js';
+import { defineCustomElement as defineSdLoadingModal } from '@sellmate/design-system/dist/components/sd-loading-modal.js';
+import { defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
+import { defineCustomElement as defineSdTbody } from '@sellmate/design-system/dist/components/sd-tbody.js';
+import { defineCustomElement as defineSdTd } from '@sellmate/design-system/dist/components/sd-td.js';
+import { defineCustomElement as defineSdThead } from '@sellmate/design-system/dist/components/sd-thead.js';
+import { defineCustomElement as defineSdTr } from '@sellmate/design-system/dist/components/sd-tr.js';
+export function defineCustomElements() {
+    if (typeof customElements === 'undefined')
+        return;
+    // Host 기반 컴포넌트 우선 등록
+    defineSdCircleProgress();
+    defineSdLinearProgress();
+    defineSdLoadingModal();
+    defineSdTable();
+    defineSdTbody();
+    defineSdTd();
+    defineSdThead();
+    defineSdTr();
+    // 나머지 컴포넌트는 Stencil loader가 lazy 등록
+    defineLazyCustomElements();
+}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export * from './components/components.js';
 export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
 export type { VirtualRow } from './hooks/useSdTableVirtualScroll';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+export { defineCustomElements } from './define-custom-elements';
 export { sdModal } from './sdModal';
 export type { SdModalCreateOption } from './sdModal';
 export { sdLoading } from '@sellmate/design-system/utils';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use client';
 export * from './components/components.js';
 export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+export { defineCustomElements } from './define-custom-elements';
 export { sdModal } from './sdModal';
 export { sdLoading } from '@sellmate/design-system/utils';

package/lib/components/components.server.ts

@@ -19,6 +19,7 @@ import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/componen
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
+import { SdCallout as SdCalloutElement } from "@sellmate/design-system/dist/components/sd-callout.js";
 import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
 import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
 import { SdChip as SdChipElement } from "@sellmate/design-system/dist/components/sd-chip.js";
@@ -29,6 +30,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/des
 import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -162,13 +164,26 @@ export type SdCalendarEvents = {
 export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar> = /*@__PURE__*/ createComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar>({
     tagName: 'sd-calendar',
     properties: {
- value: 'value',
- events: 'events'},
+        value: 'value',
+        elevated: 'elevated',
+        events: 'events'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdCalendar as StencilReactComponent<SdCalendarElement, SdCalendarEvents, Components.SdCalendar>,
     serializeShadowRoot
 });
 
+export type SdCalloutEvents = NonNullable<unknown>;
+
+export const SdCallout: StencilReactComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout> = /*@__PURE__*/ createComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout>({
+    tagName: 'sd-callout',
+    properties: {
+ type: 'type',
+ message: 'message'},
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdCallout as StencilReactComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout>,
+    serializeShadowRoot
+});
+
 export type SdCardEvents = NonNullable<unknown>;
 
 export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents, Components.SdCard> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents, Components.SdCard>({
@@ -365,8 +380,19 @@ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerC
     serializeShadowRoot
 });
 
+export type SdDividerEvents = NonNullable<unknown>;
+
+export const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider> = /*@__PURE__*/ createComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>({
+    tagName: 'sd-divider',
+    properties: { vertical: 'vertical' },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdDivider as StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>,
+    serializeShadowRoot
+});
+
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>,
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{ isOpen: boolean }>>
 };
 
@@ -376,6 +402,7 @@ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, Sd
         name: 'name',
         label: 'label',
         disabled: 'disabled',
+        split: 'split',
         items: 'items'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdDropdownButton as StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents, Components.SdDropdownButton>,
@@ -649,6 +676,7 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
         value: 'value',
         label: 'label',
         labelWidth: 'label-width',
+        labelTooltip: 'label-tooltip',
         addonLabel: 'addon-label',
         addonAlign: 'addon-align',
         placeholder: 'placeholder',
@@ -704,7 +732,6 @@ export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents,
         type: 'type',
         menuTitle: 'menu-title',
         menuClass: 'menu-class',
-        useClose: 'use-close',
         messages: 'messages'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdPopover as StencilReactComponent<SdPopoverElement, SdPopoverEvents, Components.SdPopover>,
@@ -918,7 +945,7 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents, Compo
         width: 'width',
         height: 'height',
         stickyHeader: 'sticky-header',
-        radius: 'radius',
+        useTop: 'use-top',
         noDataLabel: 'no-data-label',
         isLoading: 'is-loading',
         useInternalPagination: 'use-internal-pagination',

package/lib/components/components.ts

@@ -18,6 +18,7 @@ import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from
 import { SdBarcodeInput as SdBarcodeInputElement, defineCustomElement as defineSdBarcodeInput } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
 import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
+import { SdCallout as SdCalloutElement, defineCustomElement as defineSdCallout } from "@sellmate/design-system/dist/components/sd-callout.js";
 import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
 import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
 import { SdChip as SdChipElement, defineCustomElement as defineSdChip } from "@sellmate/design-system/dist/components/sd-chip.js";
@@ -28,6 +29,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement, defineCustomElement
 import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement, defineCustomElement as defineSdDateRangePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement, defineCustomElement as defineSdDivider } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement, defineCustomElement as defineSdFilePicker } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -145,6 +147,17 @@ export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEven
     defineCustomElement: defineSdCalendar
 });
 
+export type SdCalloutEvents = NonNullable<unknown>;
+
+export const SdCallout: StencilReactComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout> = /*@__PURE__*/ createComponent<SdCalloutElement, SdCalloutEvents, Components.SdCallout>({
+    tagName: 'sd-callout',
+    elementClass: SdCalloutElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdCalloutEvents,
+    defineCustomElement: defineSdCallout
+});
+
 export type SdCardEvents = NonNullable<unknown>;
 
 export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents, Components.SdCard> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents, Components.SdCard>({
@@ -297,8 +310,20 @@ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerC
     defineCustomElement: defineSdDateRangePickerCalendar
 });
 
+export type SdDividerEvents = NonNullable<unknown>;
+
+export const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider> = /*@__PURE__*/ createComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>({
+    tagName: 'sd-divider',
+    elementClass: SdDividerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdDividerEvents,
+    defineCustomElement: defineSdDivider
+});
+
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>,
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{ isOpen: boolean }>>
 };
 
@@ -309,6 +334,7 @@ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, Sd
     react: React,
     events: {
         onSdClick: 'sdClick',
+        onSdButtonClick: 'sdButtonClick',
         onSdDropDownShow: 'sdDropDownShow'
     } as SdDropdownButtonEvents,
     defineCustomElement: defineSdDropdownButton

package/lib/define-custom-elements.ts

@@ -0,0 +1,28 @@
+import { defineCustomElements as defineLazyCustomElements } from '@sellmate/design-system/loader';
+
+// Host 기반 컴포넌트는 static 등록으로 고정해, 이중 runtime에서 발생하는 Host 식별자 불일치를 방지한다.
+import { defineCustomElement as defineSdCircleProgress } from '@sellmate/design-system/dist/components/sd-circle-progress.js';
+import { defineCustomElement as defineSdLinearProgress } from '@sellmate/design-system/dist/components/sd-linear-progress.js';
+import { defineCustomElement as defineSdLoadingModal } from '@sellmate/design-system/dist/components/sd-loading-modal.js';
+import { defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
+import { defineCustomElement as defineSdTbody } from '@sellmate/design-system/dist/components/sd-tbody.js';
+import { defineCustomElement as defineSdTd } from '@sellmate/design-system/dist/components/sd-td.js';
+import { defineCustomElement as defineSdThead } from '@sellmate/design-system/dist/components/sd-thead.js';
+import { defineCustomElement as defineSdTr } from '@sellmate/design-system/dist/components/sd-tr.js';
+
+export function defineCustomElements(): void {
+  if (typeof customElements === 'undefined') return;
+
+  // Host 기반 컴포넌트 우선 등록
+  defineSdCircleProgress();
+  defineSdLinearProgress();
+  defineSdLoadingModal();
+  defineSdTable();
+  defineSdTbody();
+  defineSdTd();
+  defineSdThead();
+  defineSdTr();
+
+  // 나머지 컴포넌트는 Stencil loader가 lazy 등록
+  defineLazyCustomElements();
+}

package/lib/index.ts

@@ -3,7 +3,7 @@
 export * from './components/components.js';
 export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
 export type { VirtualRow } from './hooks/useSdTableVirtualScroll';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+export { defineCustomElements } from './define-custom-elements';
 export { sdModal } from './sdModal';
 export type { SdModalCreateOption } from './sdModal';
 export { sdLoading } from '@sellmate/design-system/utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellmate/design-system-react",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Design System - React Component Wrappers",
   "keywords": [
     "react",
@@ -55,7 +55,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@sellmate/design-system": "^1.4.0",
+    "@sellmate/design-system": "^1.6.0",
     "@stencil/react-output-target": "^1.2.0"
   },
   "peerDependencies": {