sellmate-design-system-react 0.1.9 → 0.1.11

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

@@ -17,7 +17,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var PortalContainerContext = createContext(null);
+var InsideModalContext = createContext(false);
 var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
 function usePortalContainer() {
   return useContext(PortalContainerContext) ?? void 0;
 }
@@ -3125,7 +3127,7 @@ function SModalContainer({
                     className: "absolute right-[16px] top-[16px] z-10"
                   }
                 ),
-                /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children })
+                /* @__PURE__ */ jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children }) })
               ]
             }
           )
@@ -3148,12 +3150,35 @@ 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",
       {
@@ -3164,57 +3189,53 @@ var SCircleProgress = forwardRef(
         ),
         style,
         children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
-              xmlns: "http://www.w3.org/2000/svg",
-              className: cn("h-[80px] w-[80px]", indeterminate && "origin-center animate-circle-spin"),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: c,
-                    cy: c,
-                    r: RADIUS,
-                    fill: "none",
-                    strokeWidth: STROKE,
-                    style: { stroke: colors.track }
-                  }
+          /* @__PURE__ */ jsxs("div", { className: cn(innerValue && "relative"), children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+                xmlns: "http://www.w3.org/2000/svg",
+                className: cn(
+                  "h-[80px] w-[80px]",
+                  indeterminate && "origin-center animate-circle-spin"
                 ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: c,
-                    cy: c,
-                    r: RADIUS,
-                    fill: "none",
-                    strokeWidth: STROKE,
-                    strokeLinecap: "round",
-                    className: cn(
-                      "origin-center",
-                      indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
-                    ),
-                    style: {
-                      stroke: colors.arc,
-                      ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
                     }
-                  }
-                )
-              ]
-            }
-          ),
-          !indeterminate && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "text-center text-[16px] font-bold leading-[26px]",
-              style: { color: percentColor },
-              children: [
-                Math.round(v),
-                "%"
-              ]
-            }
-          ),
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      strokeLinecap: "round",
+                      className: cn(
+                        "origin-center",
+                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
+                      ),
+                      style: {
+                        stroke: colors.arc,
+                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            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 })
         ]
       }
@@ -3398,6 +3419,7 @@ var DEFAULT_BUTTON_LABEL = {
 function SLoadingModal({
   open,
   onOpenChange,
+  onClose,
   persistent,
   state = "loading",
   progress,
@@ -3416,6 +3438,8 @@ function SLoadingModal({
     {
       open,
       onOpenChange,
+      onClose,
+      showClose: state === "error",
       persistent,
       ariaTitle: lines[0] || "\uB85C\uB529 \uC911",
       width,