sellmate-design-system-react 0.1.8 → 0.1.10

package/dist/components/SLoadingModal/SLoadingModal.d.ts

@@ -2,6 +2,8 @@ export type LoadingModalState = 'loading' | 'error';
 export interface SLoadingModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** 닫기(X) 버튼 클릭 (sdClose) — error 상태에서만 노출 */
+    onClose?: () => void;
     /** true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). 로딩 중 닫힘 방지에 유용 */
     persistent?: boolean;
     /** 상태 (loading: 스피너, error: 경고 아이콘) */
@@ -20,4 +22,4 @@ export interface SLoadingModalProps {
     height?: number | string;
 }
 /** SLoadingModal — sd-loading-modal 포팅. state(loading/error) + progress + 옵션 버튼. */
-export declare function SLoadingModal({ open, onOpenChange, persistent, state, progress, message, useButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;
+export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, useButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;

package/dist/components/SLoadingModal/SLoadingModal.js

@@ -3148,20 +3148,46 @@ var COLOR_MAP = {
 };
 var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = forwardRef(
-  function SCircleProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+  function SCircleProgress2({
+    value = 0,
+    type = "primary",
+    indeterminate = false,
+    label,
+    innerValue = false,
+    className,
+    style
+  }, ref) {
     const v = clamp(value);
     const colors = COLOR_MAP[type];
     const c = VIEWBOX / 2;
     const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
     const filled = v / 100 * CIRCUMFERENCE;
+    const showPercent = !indeterminate;
+    const percentNode = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "text-center text-[16px] font-bold leading-[26px]",
+          innerValue && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        style: { color: percentColor },
+        children: [
+          Math.round(v),
+          "%"
+        ]
+      }
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn("inline-flex flex-col items-center gap-[8px]", className),
+        className: cn(
+          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
+          className
+        ),
         style,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative h-[80px] w-[80px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(innerValue && "relative"), children: [
             /* @__PURE__ */ jsxs(
               "svg",
               {
@@ -3205,18 +3231,9 @@ var SCircleProgress = forwardRef(
                 ]
               }
             ),
-            !indeterminate && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "absolute inset-0 flex items-center justify-center text-[16px] font-bold leading-[26px]",
-                style: { color: percentColor },
-                children: [
-                  Math.round(v),
-                  "%"
-                ]
-              }
-            )
+            showPercent && innerValue && percentNode
           ] }),
+          showPercent && !innerValue && percentNode,
           label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -3390,7 +3407,7 @@ var SButton = forwardRef(function SButton2({
   );
 });
 var DEFAULT_MESSAGE = {
-  loading: "",
+  loading: "\uC791\uC5C5 \uC9C4\uD589\uC911...",
   error: "\uC791\uC5C5\uC5D0 \uC2E4\uD328\uD558\uC600\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694."
 };
 var DEFAULT_BUTTON_LABEL = {
@@ -3400,6 +3417,7 @@ var DEFAULT_BUTTON_LABEL = {
 function SLoadingModal({
   open,
   onOpenChange,
+  onClose,
   persistent,
   state = "loading",
   progress,
@@ -3412,11 +3430,14 @@ function SLoadingModal({
 }) {
   const resolvedMessage = message ?? DEFAULT_MESSAGE[state];
   const lines = Array.isArray(resolvedMessage) ? resolvedMessage : resolvedMessage ? [resolvedMessage] : [];
+  const showButton = useButton || state === "error";
   return /* @__PURE__ */ jsx(
     SModalContainer,
     {
       open,
       onOpenChange,
+      onClose,
+      showClose: state === "error",
       persistent,
       ariaTitle: lines[0] || "\uB85C\uB529 \uC911",
       width,
@@ -3431,7 +3452,7 @@ function SLoadingModal({
           },
           i
         )) }),
-        useButton && /* @__PURE__ */ jsx(
+        showButton && /* @__PURE__ */ jsx(
           SButton,
           {
             color: "neutral",