@sellmate/design-system-react 1.0.63 → 1.0.65

package/dist/components/components.server.js

@@ -9,7 +9,11 @@ import { createComponent } from '@stencil/react-output-target/ssr';
 export const serializeShadowRoot = { default: "declarative-shadow-dom" };
 export const SdActionModal = /*@__PURE__*/ createComponent({
     tagName: 'sd-action-modal',
-    properties: { modalTitle: 'modal-title' },
+    properties: {
+        modalTitle: 'modal-title',
+        width: 'width',
+        height: 'height'
+    },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdActionModal,
     serializeShadowRoot,
@@ -44,6 +48,7 @@ export const SdBarcodeInput = /*@__PURE__*/ createComponent({
         focused: 'focused',
         hovered: 'hovered',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         rules: 'rules'
     },
@@ -171,6 +176,7 @@ export const SdDatePicker = /*@__PURE__*/ createComponent({
         disabled: 'disabled',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -211,6 +217,7 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
         disabled: 'disabled',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -256,6 +263,7 @@ export const SdField = /*@__PURE__*/ createComponent({
         width: 'width',
         size: 'size',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         rules: 'rules'
@@ -277,6 +285,7 @@ export const SdFilePicker = /*@__PURE__*/ createComponent({
         maxFiles: 'max-files',
         name: 'name',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -379,6 +388,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
         focused: 'focused',
         hovered: 'hovered',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         rules: 'rules'
     },
@@ -424,6 +434,7 @@ export const SdNumberInput = /*@__PURE__*/ createComponent({
         useDecimal: 'use-decimal',
         value: 'value',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         placeholder: 'placeholder',
         disabled: 'disabled',
@@ -554,6 +565,7 @@ export const SdSelect = /*@__PURE__*/ createComponent({
         clearable: 'clearable',
         searchable: 'searchable',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         error: 'error',
@@ -594,6 +606,7 @@ export const SdSelectGroup = /*@__PURE__*/ createComponent({
         clearable: 'clearable',
         searchable: 'searchable',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         error: 'error',
@@ -618,6 +631,7 @@ export const SdSelectMultiple = /*@__PURE__*/ createComponent({
         useAll: 'use-all',
         useCheckbox: 'use-checkbox',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         error: 'error',
         value: 'value',
@@ -643,6 +657,7 @@ export const SdSelectMultipleGroup = /*@__PURE__*/ createComponent({
         allCheckedLabel: 'all-checked-label',
         allCheckOptionLabel: 'all-check-option-label',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         error: 'error',
         value: 'value',
@@ -700,6 +715,7 @@ export const SdSelectV2 = /*@__PURE__*/ createComponent({
         dropdownHeight: 'dropdown-height',
         disabled: 'disabled',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         error: 'error',
         hint: 'hint',
@@ -872,6 +888,7 @@ export const SdTextarea = /*@__PURE__*/ createComponent({
         spellcheck: 'spellcheck',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',

package/dist/sdModal.d.ts

@@ -7,7 +7,7 @@ import { type ConfirmModalOptions, type LoadingModalOptions, type ModalDialogRef
  *   이 경우 `componentProps` 는 무시됩니다.
  * - `component` 에 React 컴포넌트(`ComponentType`) 를 넘기면 `componentProps` 로
  *   props 를 지정해 `createRoot + flushSync` 로 렌더한 뒤 core 로 위임합니다.
- * - `persist` 는 core 옵션을 그대로 전달합니다.
+ * - `persistent` 는 core 옵션을 그대로 전달합니다.
  */
 export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'component'> {
     component: HTMLElement | ComponentType<any>;
@@ -17,7 +17,7 @@ export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'comp
  * React-aware `sdModal`.
  *
  * - `sdModal.confirm(options)` — core 와 동일
- * - `sdModal.create({ component, componentProps?, persist? })` —
+ * - `sdModal.create({ component, componentProps?, persistent? })` —
  *   `component` 가 HTMLElement 면 core 로 위임, React 컴포넌트면
  *   `createRoot + flushSync` 로 렌더한 뒤 위임합니다. 모달이 닫히면
  *   자동으로 언마운트됩니다.

package/dist/sdModal.js

@@ -19,7 +19,7 @@ function mountReactComponent(component, componentProps) {
  * React-aware `sdModal`.
  *
  * - `sdModal.confirm(options)` — core 와 동일
- * - `sdModal.create({ component, componentProps?, persist? })` —
+ * - `sdModal.create({ component, componentProps?, persistent? })` —
  *   `component` 가 HTMLElement 면 core 로 위임, React 컴포넌트면
  *   `createRoot + flushSync` 로 렌더한 뒤 위임합니다. 모달이 닫히면
  *   자동으로 언마운트됩니다.
@@ -40,10 +40,10 @@ export const sdModal = {
         coreSdModal.configure(options);
     },
     create(input) {
-        const { component, componentProps = {}, persist } = input;
+        const { component, componentProps = {}, persistent } = input;
         // HTMLElement 오버로드: core 로 바로 위임
         if (isHTMLElement(component)) {
-            return coreSdModal.create({ component, persist });
+            return coreSdModal.create({ component, persistent });
         }
         // React 컴포넌트 오버로드 — modalRef 를 먼저 만들어 props 에 주입한 뒤 mount
         const modalRef = _createSdModalRef();
@@ -51,7 +51,7 @@ export const sdModal = {
             ...componentProps,
             modalRef,
         });
-        _attachSdModalWithRef(modalRef, { component: el, persist });
+        _attachSdModalWithRef(modalRef, { component: el, persistent });
         modalRef.onDismissed(() => {
             root.unmount();
             host.remove();

package/lib/components/components.server.ts

@@ -85,7 +85,11 @@ export type SdActionModalEvents = {
 
 export const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents> = /*@__PURE__*/ createComponent<SdActionModalElement, SdActionModalEvents>({
     tagName: 'sd-action-modal',
-    properties: { modalTitle: 'modal-title' },
+    properties: {
+        modalTitle: 'modal-title',
+        width: 'width',
+        height: 'height'
+    },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdActionModal as ReactWebComponent<SdActionModalElement, SdActionModalEvents>,
     serializeShadowRoot,
@@ -130,6 +134,7 @@ export const SdBarcodeInput: StencilReactComponent<SdBarcodeInputElement, SdBarc
         focused: 'focused',
         hovered: 'hovered',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
@@ -295,6 +300,7 @@ export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePick
         disabled: 'disabled',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -349,6 +355,7 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
         disabled: 'disabled',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -407,6 +414,7 @@ export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@
         width: 'width',
         size: 'size',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         rules: 'rules'},
@@ -436,6 +444,7 @@ export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePick
         maxFiles: 'max-files',
         name: 'name',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -561,6 +570,7 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
         focused: 'focused',
         hovered: 'hovered',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         rules: 'rules'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
@@ -621,6 +631,7 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
         useDecimal: 'use-decimal',
         value: 'value',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         placeholder: 'placeholder',
         disabled: 'disabled',
@@ -774,6 +785,7 @@ export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> =
         clearable: 'clearable',
         searchable: 'searchable',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         error: 'error',
@@ -829,6 +841,7 @@ export const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelect
         clearable: 'clearable',
         searchable: 'searchable',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         error: 'error',
@@ -858,6 +871,7 @@ export const SdSelectMultiple: StencilReactComponent<SdSelectMultipleElement, Sd
         useAll: 'use-all',
         useCheckbox: 'use-checkbox',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         error: 'error',
         value: 'value',
@@ -888,6 +902,7 @@ export const SdSelectMultipleGroup: StencilReactComponent<SdSelectMultipleGroupE
         allCheckedLabel: 'all-checked-label',
         allCheckOptionLabel: 'all-check-option-label',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         error: 'error',
         value: 'value',
@@ -975,6 +990,7 @@ export const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Even
         dropdownHeight: 'dropdown-height',
         disabled: 'disabled',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         error: 'error',
         hint: 'hint',
@@ -1199,6 +1215,7 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
         spellcheck: 'spellcheck',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',

package/lib/sdModal.ts

@@ -21,7 +21,7 @@ import {
  *   이 경우 `componentProps` 는 무시됩니다.
  * - `component` 에 React 컴포넌트(`ComponentType`) 를 넘기면 `componentProps` 로
  *   props 를 지정해 `createRoot + flushSync` 로 렌더한 뒤 core 로 위임합니다.
- * - `persist` 는 core 옵션을 그대로 전달합니다.
+ * - `persistent` 는 core 옵션을 그대로 전달합니다.
  */
 export interface SdModalCreateOption
   extends Omit<CoreSdModalCreateOption, 'component'> {
@@ -52,7 +52,7 @@ function mountReactComponent(
  * React-aware `sdModal`.
  *
  * - `sdModal.confirm(options)` — core 와 동일
- * - `sdModal.create({ component, componentProps?, persist? })` —
+ * - `sdModal.create({ component, componentProps?, persistent? })` —
  *   `component` 가 HTMLElement 면 core 로 위임, React 컴포넌트면
  *   `createRoot + flushSync` 로 렌더한 뒤 위임합니다. 모달이 닫히면
  *   자동으로 언마운트됩니다.
@@ -76,11 +76,11 @@ export const sdModal = {
   },
 
   create(input: SdModalCreateOption): ModalDialogRef {
-    const { component, componentProps = {}, persist } = input;
+    const { component, componentProps = {}, persistent } = input;
 
     // HTMLElement 오버로드: core 로 바로 위임
     if (isHTMLElement(component)) {
-      return coreSdModal.create({ component, persist });
+      return coreSdModal.create({ component, persistent });
     }
 
     // React 컴포넌트 오버로드 — modalRef 를 먼저 만들어 props 에 주입한 뒤 mount
@@ -89,7 +89,7 @@ export const sdModal = {
       ...componentProps,
       modalRef,
     });
-    _attachSdModalWithRef(modalRef, { component: el, persist });
+    _attachSdModalWithRef(modalRef, { component: el, persistent });
     modalRef.onDismissed(() => {
       root.unmount();
       host.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "1.0.63",
+ "version": "1.0.65",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -54,7 +54,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.63",
+  "@sellmate/design-system": "^1.0.65",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {