sellmate-design-system-react 0.1.0

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

@@ -0,0 +1 @@
+export { KeyValueTable, type KeyValueTableProps, type KeyValueField, type KeyValueFieldType, type KeyValueChangeDetail, } from './KeyValueTable';

package/dist/components/LinearProgress/LinearProgress.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/LinearProgress/LinearProgress.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var FILL_COLOR = {
+  primary: "var(--cmp-progress-active-color)",
+  error: "var(--cmp-progress-error-color)",
+  complete: "var(--cmp-progress-success-color)"
+};
+var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var LinearProgress = react.forwardRef(
+  function LinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+    const v = clamp(value);
+    const fill = FILL_COLOR[type];
+    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
+    const valueText = `${Math.round(v)}%`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex w-full flex-col gap-[12px]", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 left-0 h-full rounded-[inherit]",
+                  indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+                ),
+                style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
+              }
+            ),
+            !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                  style: { color: valueColor },
+                  children: valueText
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                  style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
+                  children: valueText
+                }
+              )
+            ] })
+          ] }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+        ]
+      }
+    );
+  }
+);
+
+exports.LinearProgress = LinearProgress;
+//# sourceMappingURL=LinearProgress.cjs.map
+//# sourceMappingURL=LinearProgress.cjs.map

package/dist/components/LinearProgress/LinearProgress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/LinearProgress/LinearProgress.tsx"],"names":["twMerge","clsx","forwardRef","LinearProgress","jsxs","jsx","Fragment"],"mappings":";;;;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACJA,IAAM,UAAA,GAAiD;AAAA,EACrD,OAAA,EAAS,kCAAA;AAAA,EACT,KAAA,EAAO,iCAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAA;AAeA,IAAM,KAAA,GAAQ,CAAC,CAAA,KAAe,MAAA,CAAO,SAAS,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,CAAC,CAAC,CAAA,GAAI,CAAA;AAG5E,IAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CACP,EAAE,KAAA,GAAQ,CAAA,EAAG,IAAA,GAAO,SAAA,EAAW,aAAA,GAAgB,KAAA,EAAO,KAAA,EAAO,SAAA,EAAW,KAAA,IACxE,GAAA,EACA;AACA,IAAA,MAAM,CAAA,GAAI,MAAM,KAAK,CAAA;AACrB,IAAA,MAAM,IAAA,GAAO,WAAW,IAAI,CAAA;AAC5B,IAAA,MAAM,UAAA,GAAa,CAAA,KAAM,CAAA,GAAI,uCAAA,GAA0C,IAAA;AACvE,IAAA,MAAM,SAAA,GAAY,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA,CAAA;AAElC,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,SAAS,CAAA;AAAA,QACjE,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4FAAA,EACb,QAAA,EAAA;AAAA,4BAAAC,cAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,oDAAA;AAAA,kBACA,gBACI,iDAAA,GACA;AAAA,iBACN;AAAA,gBACA,KAAA,EAAO,EAAE,UAAA,EAAY,IAAA,EAAM,OAAO,aAAA,GAAgB,MAAA,GAAY,CAAA,EAAG,CAAC,CAAA,CAAA,CAAA;AAAI;AAAA,aACxE;AAAA,YACC,CAAC,iCACAD,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAD,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,8HAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,UAAA,EAAW;AAAA,kBAE1B,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,wKAAA;AAAA,kBACV,OAAO,EAAE,QAAA,EAAU,CAAA,QAAA,EAAW,GAAA,GAAM,CAAC,CAAA,MAAA,CAAA,EAAS;AAAA,kBAE7C,QAAA,EAAA;AAAA;AAAA;AACH,aAAA,EACF;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,KAAA,oBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF","file":"LinearProgress.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type LinearProgressType = 'primary' | 'error' | 'complete';\n\nconst FILL_COLOR: Record<LinearProgressType, string> = {\n  primary: 'var(--cmp-progress-active-color)',\n  error: 'var(--cmp-progress-error-color)',\n  complete: 'var(--cmp-progress-success-color)',\n};\n\nexport interface LinearProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 타입 */\n  type?: LinearProgressType;\n  /** 진행률 없이 무한 애니메이션 */\n  indeterminate?: boolean;\n  /** 하단 레이블 */\n  label?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/** LinearProgress — sd-linear-progress 포팅. */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    { value = 0, type = 'primary', indeterminate = false, label, className, style },\n    ref,\n  ) {\n    const v = clamp(value);\n    const fill = FILL_COLOR[type];\n    const valueColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : fill;\n    const valueText = `${Math.round(v)}%`;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex w-full flex-col gap-[12px]', className)}\n        style={style}\n      >\n        <div className=\"relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]\">\n          <div\n            className={cn(\n              'absolute inset-y-0 left-0 h-full rounded-[inherit]',\n              indeterminate\n                ? 'w-full origin-left animate-linear-indeterminate'\n                : 'transition-[width] duration-[400ms] ease-linear',\n            )}\n            style={{ background: fill, width: indeterminate ? undefined : `${v}%` }}\n          />\n          {!indeterminate && (\n            <>\n              <span\n                className=\"pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]\"\n                style={{ color: valueColor }}\n              >\n                {valueText}\n              </span>\n              <span\n                className=\"pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]\"\n                style={{ clipPath: `inset(0 ${100 - v}% 0 0)` }}\n              >\n                {valueText}\n              </span>\n            </>\n          )}\n        </div>\n        {label && (\n          <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"]}

package/dist/components/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+export type LinearProgressType = 'primary' | 'error' | 'complete';
+export interface LinearProgressProps {
+    /** 진행률 (0–100) */
+    value?: number;
+    /** 색상 타입 */
+    type?: LinearProgressType;
+    /** 진행률 없이 무한 애니메이션 */
+    indeterminate?: boolean;
+    /** 하단 레이블 */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** LinearProgress — sd-linear-progress 포팅. */
+export declare const LinearProgress: import("react").ForwardRefExoticComponent<LinearProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LinearProgress/LinearProgress.js

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/LinearProgress/LinearProgress.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var FILL_COLOR = {
+  primary: "var(--cmp-progress-active-color)",
+  error: "var(--cmp-progress-error-color)",
+  complete: "var(--cmp-progress-success-color)"
+};
+var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var LinearProgress = forwardRef(
+  function LinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+    const v = clamp(value);
+    const fill = FILL_COLOR[type];
+    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
+    const valueText = `${Math.round(v)}%`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex w-full flex-col gap-[12px]", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 left-0 h-full rounded-[inherit]",
+                  indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+                ),
+                style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
+              }
+            ),
+            !indeterminate && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                  style: { color: valueColor },
+                  children: valueText
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                  style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
+                  children: valueText
+                }
+              )
+            ] })
+          ] }),
+          label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+        ]
+      }
+    );
+  }
+);
+
+export { LinearProgress };
+//# sourceMappingURL=LinearProgress.js.map
+//# sourceMappingURL=LinearProgress.js.map

package/dist/components/LinearProgress/LinearProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/LinearProgress/LinearProgress.tsx"],"names":["LinearProgress"],"mappings":";;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACJA,IAAM,UAAA,GAAiD;AAAA,EACrD,OAAA,EAAS,kCAAA;AAAA,EACT,KAAA,EAAO,iCAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAA;AAeA,IAAM,KAAA,GAAQ,CAAC,CAAA,KAAe,MAAA,CAAO,SAAS,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,CAAC,CAAC,CAAA,GAAI,CAAA;AAG5E,IAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CACP,EAAE,KAAA,GAAQ,CAAA,EAAG,IAAA,GAAO,SAAA,EAAW,aAAA,GAAgB,KAAA,EAAO,KAAA,EAAO,SAAA,EAAW,KAAA,IACxE,GAAA,EACA;AACA,IAAA,MAAM,CAAA,GAAI,MAAM,KAAK,CAAA;AACrB,IAAA,MAAM,IAAA,GAAO,WAAW,IAAI,CAAA;AAC5B,IAAA,MAAM,UAAA,GAAa,CAAA,KAAM,CAAA,GAAI,uCAAA,GAA0C,IAAA;AACvE,IAAA,MAAM,SAAA,GAAY,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA,CAAA;AAElC,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,SAAS,CAAA;AAAA,QACjE,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4FAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,oDAAA;AAAA,kBACA,gBACI,iDAAA,GACA;AAAA,iBACN;AAAA,gBACA,KAAA,EAAO,EAAE,UAAA,EAAY,IAAA,EAAM,OAAO,aAAA,GAAgB,MAAA,GAAY,CAAA,EAAG,CAAC,CAAA,CAAA,CAAA;AAAI;AAAA,aACxE;AAAA,YACC,CAAC,iCACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,8HAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,UAAA,EAAW;AAAA,kBAE1B,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,wKAAA;AAAA,kBACV,OAAO,EAAE,QAAA,EAAU,CAAA,QAAA,EAAW,GAAA,GAAM,CAAC,CAAA,MAAA,CAAA,EAAS;AAAA,kBAE7C,QAAA,EAAA;AAAA;AAAA;AACH,aAAA,EACF;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF","file":"LinearProgress.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type LinearProgressType = 'primary' | 'error' | 'complete';\n\nconst FILL_COLOR: Record<LinearProgressType, string> = {\n  primary: 'var(--cmp-progress-active-color)',\n  error: 'var(--cmp-progress-error-color)',\n  complete: 'var(--cmp-progress-success-color)',\n};\n\nexport interface LinearProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 타입 */\n  type?: LinearProgressType;\n  /** 진행률 없이 무한 애니메이션 */\n  indeterminate?: boolean;\n  /** 하단 레이블 */\n  label?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/** LinearProgress — sd-linear-progress 포팅. */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    { value = 0, type = 'primary', indeterminate = false, label, className, style },\n    ref,\n  ) {\n    const v = clamp(value);\n    const fill = FILL_COLOR[type];\n    const valueColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : fill;\n    const valueText = `${Math.round(v)}%`;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex w-full flex-col gap-[12px]', className)}\n        style={style}\n      >\n        <div className=\"relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]\">\n          <div\n            className={cn(\n              'absolute inset-y-0 left-0 h-full rounded-[inherit]',\n              indeterminate\n                ? 'w-full origin-left animate-linear-indeterminate'\n                : 'transition-[width] duration-[400ms] ease-linear',\n            )}\n            style={{ background: fill, width: indeterminate ? undefined : `${v}%` }}\n          />\n          {!indeterminate && (\n            <>\n              <span\n                className=\"pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]\"\n                style={{ color: valueColor }}\n              >\n                {valueText}\n              </span>\n              <span\n                className=\"pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]\"\n                style={{ clipPath: `inset(0 ${100 - v}% 0 0)` }}\n              >\n                {valueText}\n              </span>\n            </>\n          )}\n        </div>\n        {label && (\n          <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"]}

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

@@ -0,0 +1 @@
+export { LinearProgress, type LinearProgressProps, type LinearProgressType, } from './LinearProgress';

package/dist/components/LoadingContainer/LoadingContainer.cjs

@@ -0,0 +1,126 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/LoadingContainer/LoadingContainer.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var VIEWBOX = 80;
+var RADIUS = 34;
+var STROKE = 12;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var COLOR_MAP = {
+  primary: { arc: "var(--cmp-spinner-color-arc)", track: "var(--cmp-spinner-color-track)" },
+  inverse: { arc: "var(--color-white)", track: "transparent" },
+  error: { arc: "var(--color-red-75)", track: "var(--cmp-spinner-color-track)" },
+  complete: { arc: "#01BB4B", track: "var(--cmp-spinner-color-track)" }
+};
+var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var CircleProgress = react.forwardRef(
+  function CircleProgress2({ value = 0, type = "primary", indeterminate = false, label, 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;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex flex-col items-center gap-[8px]", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[80px] w-[80px]", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "absolute inset-0 flex items-center justify-center text-[16px] font-bold leading-[26px]",
+                style: { color: percentColor },
+                children: [
+                  Math.round(v),
+                  "%"
+                ]
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+        ]
+      }
+    );
+  }
+);
+var LoadingContainer = react.forwardRef(
+  function LoadingContainer2({ open = false, message, zIndex = 999, className, style }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "aria-hidden": !open,
+        className: cn(
+          "fixed inset-0 flex items-center justify-center transition-opacity duration-200",
+          open ? "pointer-events-auto visible opacity-100" : "pointer-events-none invisible opacity-0",
+          className
+        ),
+        style: { zIndex, ...style },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center gap-[16px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CircleProgress, { indeterminate: true, type: "inverse" }),
+            message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 max-w-[400px] break-keep text-center text-[14px] font-medium leading-[22px] text-[color:var(--color-white)]", children: message })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+exports.LoadingContainer = LoadingContainer;
+//# sourceMappingURL=LoadingContainer.cjs.map
+//# sourceMappingURL=LoadingContainer.cjs.map

package/dist/components/LoadingContainer/LoadingContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/CircleProgress/CircleProgress.tsx","../../../src/components/LoadingContainer/LoadingContainer.tsx"],"names":["twMerge","clsx","forwardRef","CircleProgress","jsxs","jsx","LoadingContainer"],"mappings":";;;;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACJA,IAAM,OAAA,GAAU,EAAA;AAChB,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,MAAA;AAEpC,IAAM,SAAA,GAAwE;AAAA,EAC5E,OAAA,EAAS,EAAE,GAAA,EAAK,8BAAA,EAAgC,OAAO,gCAAA,EAAiC;AAAA,EACxF,OAAA,EAAS,EAAE,GAAA,EAAK,oBAAA,EAAsB,OAAO,aAAA,EAAc;AAAA,EAC3D,KAAA,EAAO,EAAE,GAAA,EAAK,qBAAA,EAAuB,OAAO,gCAAA,EAAiC;AAAA,EAC7E,QAAA,EAAU,EAAE,GAAA,EAAK,SAAA,EAAW,OAAO,gCAAA;AACrC,CAAA;AAeA,IAAM,KAAA,GAAQ,CAAC,CAAA,KAAe,MAAA,CAAO,SAAS,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,CAAC,CAAC,CAAA,GAAI,CAAA;AAG5E,IAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CACP,EAAE,KAAA,GAAQ,CAAA,EAAG,IAAA,GAAO,SAAA,EAAW,aAAA,GAAgB,KAAA,EAAO,KAAA,EAAO,SAAA,EAAW,KAAA,IACxE,GAAA,EACA;AACA,IAAA,MAAM,CAAA,GAAI,MAAM,KAAK,CAAA;AACrB,IAAA,MAAM,MAAA,GAAS,UAAU,IAAI,CAAA;AAC7B,IAAA,MAAM,IAAI,OAAA,GAAU,CAAA;AACpB,IAAA,MAAM,YAAA,GAAe,CAAA,KAAM,CAAA,GAAI,uCAAA,GAA0C,MAAA,CAAO,GAAA;AAChF,IAAA,MAAM,MAAA,GAAU,IAAI,GAAA,GAAO,aAAA;AAE3B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,6CAAA,EAA+C,SAAS,CAAA;AAAA,QACtE,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EACb,QAAA,EAAA;AAAA,4BAAAA,eAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAS,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,gBAClC,KAAA,EAAM,4BAAA;AAAA,gBACN,SAAA,EAAW,EAAA;AAAA,kBACT,mBAAA;AAAA,kBACA,aAAA,IAAiB;AAAA,iBACnB;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAAC,cAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,CAAO,KAAA;AAAM;AAAA,mBAChC;AAAA,kCACAA,cAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,aAAA,EAAc,OAAA;AAAA,sBACd,SAAA,EAAW,EAAA;AAAA,wBACT,eAAA;AAAA,wBACA,gBACI,oBAAA,GACA;AAAA,uBACN;AAAA,sBACA,KAAA,EAAO;AAAA,wBACL,QAAQ,MAAA,CAAO,GAAA;AAAA,wBACf,GAAI,aAAA,GACA,EAAC,GACD,EAAE,eAAA,EAAiB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,EAAI,gBAAA,EAAkB,CAAA;AAAE;AAC3E;AAAA;AACF;AAAA;AAAA,aACF;AAAA,YACC,CAAC,aAAA,oBACAD,eAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,wFAAA;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,gBAE5B,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA,kBAAE;AAAA;AAAA;AAAA;AACjB,WAAA,EAEJ,CAAA;AAAA,UACC,KAAA,oBACCC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF,CAAA;ACtFO,IAAM,gBAAA,GAAmBH,gBAAAA;AAAA,EAC9B,SAASI,iBAAAA,CAAiB,EAAE,IAAA,GAAO,KAAA,EAAO,OAAA,EAAS,MAAA,GAAS,GAAA,EAAK,SAAA,EAAW,KAAA,EAAM,EAAG,GAAA,EAAK;AACxF,IAAA,uBACEF,eAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,eAAa,CAAC,IAAA;AAAA,QACd,SAAA,EAAW,EAAA;AAAA,UACT,gFAAA;AAAA,UACA,OACI,yCAAA,GACA,yCAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,KAAA,EAAO,EAAE,MAAA,EAAQ,GAAG,KAAA,EAAM;AAAA,QAE1B,QAAA,EAAA;AAAA,0BAAAC,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAA+B,CAAA;AAAA,0BAC9CD,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gDAAA,EACb,QAAA,EAAA;AAAA,4BAAAC,cAAAA,CAAC,cAAA,EAAA,EAAe,aAAA,EAAa,IAAA,EAAC,MAAK,SAAA,EAAU,CAAA;AAAA,YAC5C,2BACCA,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,mHACV,QAAA,EAAA,OAAA,EACH;AAAA,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF","file":"LoadingContainer.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type CircleProgressType = 'primary' | 'inverse' | 'error' | 'complete';\n\nconst VIEWBOX = 80;\nconst RADIUS = 34;\nconst STROKE = 12;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nconst COLOR_MAP: Record<CircleProgressType, { arc: string; track: string }> = {\n  primary: { arc: 'var(--cmp-spinner-color-arc)', track: 'var(--cmp-spinner-color-track)' },\n  inverse: { arc: 'var(--color-white)', track: 'transparent' },\n  error: { arc: 'var(--color-red-75)', track: 'var(--cmp-spinner-color-track)' },\n  complete: { arc: '#01BB4B', track: 'var(--cmp-spinner-color-track)' },\n};\n\nexport interface CircleProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 테마 */\n  type?: CircleProgressType;\n  /** 불확정(스피너) 모드 — value 무시 */\n  indeterminate?: boolean;\n  /** 하단 레이블 */\n  label?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/** CircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */\nexport const CircleProgress = forwardRef<HTMLDivElement, CircleProgressProps>(\n  function CircleProgress(\n    { value = 0, type = 'primary', indeterminate = false, label, className, style },\n    ref,\n  ) {\n    const v = clamp(value);\n    const colors = COLOR_MAP[type];\n    const c = VIEWBOX / 2;\n    const percentColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : colors.arc;\n    const filled = (v / 100) * CIRCUMFERENCE;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex flex-col items-center gap-[8px]', className)}\n        style={style}\n      >\n        <div className=\"relative h-[80px] w-[80px]\">\n          <svg\n            viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn(\n              'h-[80px] w-[80px]',\n              indeterminate && 'origin-center animate-circle-spin',\n            )}\n          >\n            <circle\n              cx={c}\n              cy={c}\n              r={RADIUS}\n              fill=\"none\"\n              strokeWidth={STROKE}\n              style={{ stroke: colors.track }}\n            />\n            <circle\n              cx={c}\n              cy={c}\n              r={RADIUS}\n              fill=\"none\"\n              strokeWidth={STROKE}\n              strokeLinecap=\"round\"\n              className={cn(\n                'origin-center',\n                indeterminate\n                  ? 'animate-circle-arc'\n                  : '-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear',\n              )}\n              style={{\n                stroke: colors.arc,\n                ...(indeterminate\n                  ? {}\n                  : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }),\n              }}\n            />\n          </svg>\n          {!indeterminate && (\n            <span\n              className=\"absolute inset-0 flex items-center justify-center text-[16px] font-bold leading-[26px]\"\n              style={{ color: percentColor }}\n            >\n              {Math.round(v)}%\n            </span>\n          )}\n        </div>\n        {label && (\n          <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\nimport { CircleProgress } from '../CircleProgress';\n\nexport interface LoadingContainerProps {\n  /** 오버레이 표시 여부 (Stencil의 show()/hide() 명령형 API → 제어 prop으로 대체) */\n  open?: boolean;\n  /** 스피너 하단 메시지 */\n  message?: string;\n  /** z-index (기본 999) */\n  zIndex?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * LoadingContainer — sd-loading-container 포팅.\n * 전체 화면 딤 오버레이 + inverse 스피너. React에서는 `open` 제어 prop 사용.\n */\nexport const LoadingContainer = forwardRef<HTMLDivElement, LoadingContainerProps>(\n  function LoadingContainer({ open = false, message, zIndex = 999, className, style }, ref) {\n    return (\n      <div\n        ref={ref}\n        aria-hidden={!open}\n        className={cn(\n          'fixed inset-0 flex items-center justify-center transition-opacity duration-200',\n          open\n            ? 'pointer-events-auto visible opacity-100'\n            : 'pointer-events-none invisible opacity-0',\n          className,\n        )}\n        style={{ zIndex, ...style }}\n      >\n        <div className=\"absolute inset-0 bg-black/40\" />\n        <div className=\"relative flex flex-col items-center gap-[16px]\">\n          <CircleProgress indeterminate type=\"inverse\" />\n          {message && (\n            <p className=\"m-0 max-w-[400px] break-keep text-center text-[14px] font-medium leading-[22px] text-[color:var(--color-white)]\">\n              {message}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

package/dist/components/LoadingContainer/LoadingContainer.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+export interface LoadingContainerProps {
+    /** 오버레이 표시 여부 (Stencil의 show()/hide() 명령형 API → 제어 prop으로 대체) */
+    open?: boolean;
+    /** 스피너 하단 메시지 */
+    message?: string;
+    /** z-index (기본 999) */
+    zIndex?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * LoadingContainer — sd-loading-container 포팅.
+ * 전체 화면 딤 오버레이 + inverse 스피너. React에서는 `open` 제어 prop 사용.
+ */
+export declare const LoadingContainer: import("react").ForwardRefExoticComponent<LoadingContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LoadingContainer/LoadingContainer.js

@@ -0,0 +1,124 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/LoadingContainer/LoadingContainer.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var VIEWBOX = 80;
+var RADIUS = 34;
+var STROKE = 12;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var COLOR_MAP = {
+  primary: { arc: "var(--cmp-spinner-color-arc)", track: "var(--cmp-spinner-color-track)" },
+  inverse: { arc: "var(--color-white)", track: "transparent" },
+  error: { arc: "var(--color-red-75)", track: "var(--cmp-spinner-color-track)" },
+  complete: { arc: "#01BB4B", track: "var(--cmp-spinner-color-track)" }
+};
+var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var CircleProgress = forwardRef(
+  function CircleProgress2({ value = 0, type = "primary", indeterminate = false, label, 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;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex flex-col items-center gap-[8px]", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-[80px] w-[80px]", 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__ */ 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 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            !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),
+                  "%"
+                ]
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+        ]
+      }
+    );
+  }
+);
+var LoadingContainer = forwardRef(
+  function LoadingContainer2({ open = false, message, zIndex = 999, className, style }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "aria-hidden": !open,
+        className: cn(
+          "fixed inset-0 flex items-center justify-center transition-opacity duration-200",
+          open ? "pointer-events-auto visible opacity-100" : "pointer-events-none invisible opacity-0",
+          className
+        ),
+        style: { zIndex, ...style },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-[16px]", children: [
+            /* @__PURE__ */ jsx(CircleProgress, { indeterminate: true, type: "inverse" }),
+            message && /* @__PURE__ */ jsx("p", { className: "m-0 max-w-[400px] break-keep text-center text-[14px] font-medium leading-[22px] text-[color:var(--color-white)]", children: message })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export { LoadingContainer };
+//# sourceMappingURL=LoadingContainer.js.map
+//# sourceMappingURL=LoadingContainer.js.map

package/dist/components/LoadingContainer/LoadingContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/CircleProgress/CircleProgress.tsx","../../../src/components/LoadingContainer/LoadingContainer.tsx"],"names":["CircleProgress","forwardRef","LoadingContainer","jsxs","jsx"],"mappings":"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","file":"LoadingContainer.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type CircleProgressType = 'primary' | 'inverse' | 'error' | 'complete';\n\nconst VIEWBOX = 80;\nconst RADIUS = 34;\nconst STROKE = 12;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nconst COLOR_MAP: Record<CircleProgressType, { arc: string; track: string }> = {\n  primary: { arc: 'var(--cmp-spinner-color-arc)', track: 'var(--cmp-spinner-color-track)' },\n  inverse: { arc: 'var(--color-white)', track: 'transparent' },\n  error: { arc: 'var(--color-red-75)', track: 'var(--cmp-spinner-color-track)' },\n  complete: { arc: '#01BB4B', track: 'var(--cmp-spinner-color-track)' },\n};\n\nexport interface CircleProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 테마 */\n  type?: CircleProgressType;\n  /** 불확정(스피너) 모드 — value 무시 */\n  indeterminate?: boolean;\n  /** 하단 레이블 */\n  label?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/** CircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */\nexport const CircleProgress = forwardRef<HTMLDivElement, CircleProgressProps>(\n  function CircleProgress(\n    { value = 0, type = 'primary', indeterminate = false, label, className, style },\n    ref,\n  ) {\n    const v = clamp(value);\n    const colors = COLOR_MAP[type];\n    const c = VIEWBOX / 2;\n    const percentColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : colors.arc;\n    const filled = (v / 100) * CIRCUMFERENCE;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex flex-col items-center gap-[8px]', className)}\n        style={style}\n      >\n        <div className=\"relative h-[80px] w-[80px]\">\n          <svg\n            viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn(\n              'h-[80px] w-[80px]',\n              indeterminate && 'origin-center animate-circle-spin',\n            )}\n          >\n            <circle\n              cx={c}\n              cy={c}\n              r={RADIUS}\n              fill=\"none\"\n              strokeWidth={STROKE}\n              style={{ stroke: colors.track }}\n            />\n            <circle\n              cx={c}\n              cy={c}\n              r={RADIUS}\n              fill=\"none\"\n              strokeWidth={STROKE}\n              strokeLinecap=\"round\"\n              className={cn(\n                'origin-center',\n                indeterminate\n                  ? 'animate-circle-arc'\n                  : '-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear',\n              )}\n              style={{\n                stroke: colors.arc,\n                ...(indeterminate\n                  ? {}\n                  : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }),\n              }}\n            />\n          </svg>\n          {!indeterminate && (\n            <span\n              className=\"absolute inset-0 flex items-center justify-center text-[16px] font-bold leading-[26px]\"\n              style={{ color: percentColor }}\n            >\n              {Math.round(v)}%\n            </span>\n          )}\n        </div>\n        {label && (\n          <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\nimport { CircleProgress } from '../CircleProgress';\n\nexport interface LoadingContainerProps {\n  /** 오버레이 표시 여부 (Stencil의 show()/hide() 명령형 API → 제어 prop으로 대체) */\n  open?: boolean;\n  /** 스피너 하단 메시지 */\n  message?: string;\n  /** z-index (기본 999) */\n  zIndex?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * LoadingContainer — sd-loading-container 포팅.\n * 전체 화면 딤 오버레이 + inverse 스피너. React에서는 `open` 제어 prop 사용.\n */\nexport const LoadingContainer = forwardRef<HTMLDivElement, LoadingContainerProps>(\n  function LoadingContainer({ open = false, message, zIndex = 999, className, style }, ref) {\n    return (\n      <div\n        ref={ref}\n        aria-hidden={!open}\n        className={cn(\n          'fixed inset-0 flex items-center justify-center transition-opacity duration-200',\n          open\n            ? 'pointer-events-auto visible opacity-100'\n            : 'pointer-events-none invisible opacity-0',\n          className,\n        )}\n        style={{ zIndex, ...style }}\n      >\n        <div className=\"absolute inset-0 bg-black/40\" />\n        <div className=\"relative flex flex-col items-center gap-[16px]\">\n          <CircleProgress indeterminate type=\"inverse\" />\n          {message && (\n            <p className=\"m-0 max-w-[400px] break-keep text-center text-[14px] font-medium leading-[22px] text-[color:var(--color-white)]\">\n              {message}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"]}

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

@@ -0,0 +1,2 @@
+export { LoadingContainer, type LoadingContainerProps } from './LoadingContainer';
+export { loading, LoadingViewport } from './loading';