sellmate-design-system-react 0.10.0 → 0.12.0

package/dist/components/SModal/index.d.ts

@@ -0,0 +1 @@
+export { SModal, type SModalRef, type SConfirmOptions, type SLoadingOptions, type SCreateOptions, type SModalCreateComponentProps, } from './SModal';

package/dist/index.cjs

@@ -2920,6 +2920,76 @@ var SCard = react.forwardRef(function SCard2({ bordered = false, className, chil
     }
   );
 });
+var SExpansionItem = react.forwardRef(
+  function SExpansionItem2({
+    title,
+    depth = 1,
+    leading,
+    trailing,
+    bodyPadding = true,
+    expanded,
+    defaultExpanded = false,
+    dense = false,
+    disabled = false,
+    onToggle,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
+    const isExpanded = expanded ?? internalExpanded;
+    const hasBody = react.Children.toArray(children).some(
+      (child) => child !== null && child !== void 0 && (typeof child !== "string" || child.trim() !== "")
+    );
+    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
+    const id = react.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group overflow-hidden bg-[var(--cmp-expansionItem-title-bg-default)]",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-expanded": isExpanded,
+              "aria-controls": id,
+              onClick: (event) => {
+                if (disabled) return;
+                const next = !isExpanded;
+                if (expanded === void 0) setInternalExpanded(next);
+                onToggle?.(next, event);
+              },
+              className: cn(
+                "flex w-full items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-[var(--cmp-expansionItem-title-text-default)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--sys-color-border-accent)] disabled:cursor-not-allowed disabled:text-[var(--sys-color-disabled-text)] cursor-pointer",
+                isExpanded && "border-b border-[var(--cmp-expansionItem-title-border)]",
+                !isExpanded && "hover:bg-[var(--cmp-expansionItem-title-bg-hover)]",
+                dense ? "min-h-8 py-[var(--cmp-expansionItem-title-paddingY-dense)]" : "min-h-10 py-[var(--cmp-expansionItem-title-paddingY-normal)]",
+                "gap-[var(--cmp-expansionItem-title-gap)]",
+                "pr-[var(--cmp-expansionItem-title-paddingX)]",
+                depth === 2 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+64px)]" : "pl-[var(--cmp-expansionItem-title-paddingX)]",
+                isExpanded && "bg-[var(--cmp-expansionItem-title-bg-expanded)] text-[var(--cmp-expansionItem-title-text-expanded)]"
+              ),
+              children: [
+                !leading && hasBody && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: isExpanded ? "caretUp" : "caretDown", size: 12 }),
+                leadingNode,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }) }),
+                trailing
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { id, hidden: !isExpanded, className: "bg-[var(--cmp-expansionItem-body-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyPadding ? "p-[var(--cmp-expansionItem-body-padding)]" : void 0, children }) })
+        ]
+      }
+    );
+  }
+);
 var SDivider = react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "hr",
@@ -4969,6 +5039,250 @@ function SLoadingModal({
     }
   );
 }
+var EXIT_DURATION = 300;
+var EXIT_BUFFER = 100;
+var SModalRefImpl = class {
+  constructor() {
+    this.pendingClose = false;
+    this.pendingPatches = [];
+    this.dismissRequested = false;
+  }
+  onOk(fn) {
+    this.okFn = fn;
+    return this;
+  }
+  onCancel(fn) {
+    this.cancelFn = fn;
+    return this;
+  }
+  onClose(fn) {
+    this.closeFn = fn;
+    return this;
+  }
+  onClick(fn) {
+    this.clickFn = fn;
+    return this;
+  }
+  onSubmit(fn) {
+    this.submitFn = fn;
+    return this;
+  }
+  onDismissed(fn) {
+    this.dismissedFn = fn;
+    return this;
+  }
+  update(patch) {
+    if (this.updateBinding) this.updateBinding(patch);
+    else this.pendingPatches.push(patch);
+    return this;
+  }
+  // 닫힘 트리거 — 이미 닫힘이 시작됐으면 무시(중복 콜백 방지)
+  settle(emit2) {
+    if (this.dismissRequested) return;
+    this.dismissRequested = true;
+    emit2();
+    if (this.closeBinding) this.closeBinding();
+    else this.pendingClose = true;
+  }
+  ok() {
+    this.settle(() => this.okFn?.());
+    return this;
+  }
+  cancel() {
+    this.settle(() => this.cancelFn?.());
+    return this;
+  }
+  close() {
+    this.settle(() => this.closeFn?.());
+    return this;
+  }
+  submit() {
+    this.submitFn?.();
+    return this;
+  }
+  /** @internal 마운트 컴포넌트가 닫기 함수를 등록 (등록 전 close() 호출은 지연 반영) */
+  _bindClose(fn) {
+    this.closeBinding = fn;
+    if (this.pendingClose) fn();
+  }
+  /** @internal 마운트 컴포넌트가 옵션 갱신 함수를 등록 (등록 전 update() 호출은 지연 반영) */
+  _bindUpdate(fn) {
+    this.updateBinding = fn;
+    if (this.pendingPatches.length) {
+      this.pendingPatches.forEach(fn);
+      this.pendingPatches = [];
+    }
+  }
+  /** @internal 정리 대상(root·host) 주입 */
+  _setTeardown(root, host) {
+    this.root = root;
+    this.host = host;
+  }
+  /** @internal 닫힘 시작 표시 — 컴포넌트 버튼·백드롭·ESC 닫힘 경로가 호출(중복 트리거 방지) */
+  _markDismissed() {
+    this.dismissRequested = true;
+  }
+  /** @internal confirm 버튼 경로에서 onOk 발화 */
+  _emitOk() {
+    this.okFn?.();
+  }
+  /** @internal confirm 버튼 경로에서 onCancel 발화 */
+  _emitCancel() {
+    this.cancelFn?.();
+  }
+  /** @internal 닫기(X) 경로에서 onClose 발화 */
+  _emitClose() {
+    this.closeFn?.();
+  }
+  /** @internal loading 버튼 경로에서 onClick 발화 */
+  _emitClick() {
+    this.clickFn?.();
+  }
+  /** @internal */
+  _emitDismissed() {
+    this.dismissedFn?.();
+  }
+  /** @internal 닫힘 애니메이션 종료 후 언마운트 */
+  _teardown() {
+    this.root?.unmount();
+    this.host?.remove();
+  }
+};
+function useExitTeardown(open, refImpl) {
+  const dismissedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (open || dismissedRef.current) return;
+    dismissedRef.current = true;
+    const t = setTimeout(() => {
+      refImpl._emitDismissed();
+      refImpl._teardown();
+    }, EXIT_DURATION + EXIT_BUFFER);
+    return () => clearTimeout(t);
+  }, [open, refImpl]);
+}
+function ConfirmMount({ options, refImpl }) {
+  const [open, setOpen] = react.useState(true);
+  const [opts, setOpts] = react.useState(options);
+  react.useEffect(() => {
+    refImpl._bindClose(() => setOpen(false));
+    refImpl._bindUpdate((patch) => setOpts((prev) => ({ ...prev, ...patch })));
+  }, [refImpl]);
+  useExitTeardown(open, refImpl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SConfirmModal,
+    {
+      ...opts,
+      open,
+      onOpenChange: (o) => {
+        if (!o) refImpl._markDismissed();
+        setOpen(o);
+      },
+      onOk: () => refImpl._emitOk(),
+      onCancel: () => refImpl._emitCancel(),
+      onClose: () => refImpl._emitClose()
+    }
+  );
+}
+function LoadingMount({ options, refImpl }) {
+  const [open, setOpen] = react.useState(true);
+  const [opts, setOpts] = react.useState(options);
+  const buttonClicked = react.useRef(false);
+  react.useEffect(() => {
+    refImpl._bindClose(() => setOpen(false));
+    refImpl._bindUpdate((patch) => setOpts((prev) => ({ ...prev, ...patch })));
+  }, [refImpl]);
+  useExitTeardown(open, refImpl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SLoadingModal,
+    {
+      ...opts,
+      open,
+      onOpenChange: (o) => {
+        if (!o && buttonClicked.current) {
+          buttonClicked.current = false;
+          return;
+        }
+        if (!o) refImpl._markDismissed();
+        setOpen(o);
+      },
+      onClose: () => refImpl._emitClose(),
+      onButtonClick: () => {
+        buttonClicked.current = true;
+        refImpl._emitClick();
+      }
+    }
+  );
+}
+function CreateMount({ options, refImpl }) {
+  const {
+    component: Component,
+    componentProps,
+    persistent,
+    showClose,
+    width,
+    height,
+    className,
+    ariaTitle
+  } = options;
+  const [open, setOpen] = react.useState(true);
+  react.useEffect(() => {
+    refImpl._bindClose(() => setOpen(false));
+    refImpl._bindUpdate(() => {
+    });
+  }, [refImpl]);
+  useExitTeardown(open, refImpl);
+  const componentAllProps = {
+    ...componentProps,
+    modalRef: refImpl
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SModalContainer,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) refImpl._markDismissed();
+        setOpen(o);
+      },
+      persistent,
+      showClose,
+      onClose: () => refImpl.close(),
+      ariaTitle,
+      width,
+      height,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentAllProps })
+    }
+  );
+}
+function mount(render) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const refImpl = new SModalRefImpl();
+  const root = client.createRoot(host);
+  refImpl._setTeardown(root, host);
+  root.render(render(refImpl));
+  return refImpl;
+}
+var SModal = {
+  /** 확인/취소 모달을 즉시 띄운다. 반환 핸들에 onOk/onCancel/onClose/onDismissed 체이닝. */
+  confirm(options) {
+    return mount((refImpl) => /* @__PURE__ */ jsxRuntime.jsx(ConfirmMount, { options, refImpl }));
+  },
+  /**
+   * 로딩(스피너/에러) 모달을 즉시 띄운다. 로딩 중 임의 닫힘 방지를 위해 persistent 기본 true.
+   * 버튼 클릭은 자동 닫힘 없이 onClick 만 발화 — update()/close() 로 후속 동작을 결정한다.
+   */
+  loading(options = {}) {
+    return mount((refImpl) => /* @__PURE__ */ jsxRuntime.jsx(LoadingMount, { options: { persistent: true, ...options }, refImpl }));
+  },
+  /**
+   * 커스텀 React 컴포넌트를 SModalContainer(딤+카드) 안에 띄운다. component 에 modalRef 가
+   * prop 으로 주입되어 컴포넌트가 ok()/cancel()/close()/submit()/onSubmit() 으로 자기 모달을 제어한다.
+   */
+  create(options) {
+    return mount((refImpl) => /* @__PURE__ */ jsxRuntime.jsx(CreateMount, { options, refImpl }));
+  }
+};
 
 // src/components/SGnb/gnb.config.ts
 var gnb = (p) => `var(--cmp-gnb-${p})`;
@@ -11548,6 +11862,7 @@ exports.SDatePicker = SDatePicker;
 exports.SDateRangePicker = SDateRangePicker;
 exports.SDivider = SDivider;
 exports.SDropdownButton = SDropdownButton;
+exports.SExpansionItem = SExpansionItem;
 exports.SField = SField;
 exports.SFilePicker = SFilePicker;
 exports.SForm = SForm;
@@ -11563,6 +11878,7 @@ exports.SLinearProgress = SLinearProgress;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
+exports.SModal = SModal;
 exports.SNumberInput = SNumberInput;
 exports.SPage = SPage;
 exports.SPagination = SPagination;