sellmate-design-system-react 0.1.8 → 0.1.10

package/dist/components/SCircleProgress/SCircleProgress.cjs

@@ -29,20 +29,46 @@ var COLOR_MAP = {
 };
 var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative h-[80px] w-[80px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerValue && "relative"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "svg",
               {
@@ -86,18 +112,9 @@ var SCircleProgress = react.forwardRef(
                 ]
               }
             ),
-            !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),
-                  "%"
-                ]
-              }
-            )
+            showPercent && innerValue && percentNode
           ] }),
+          showPercent && !innerValue && percentNode,
           label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }

package/dist/components/SCircleProgress/SCircleProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SCircleProgress","jsxs","jsx"],"mappings":"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","file":"SCircleProgress.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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 SCircleProgressType = '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<SCircleProgressType, { arc: string; track: string }> = {\n  primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n  inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n  error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n  complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 테마 */\n  type?: SCircleProgressType;\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/** SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n  function SCircleProgress(\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        {/* percent 는 원(ring) 중앙에 오버레이 */}\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"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SCircleProgress","jsxs","jsx"],"mappings":";;;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACjBA,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,GAAyE;AAAA,EAC7E,OAAA,EAAS,EAAE,GAAA,EAAK,kCAAA,EAAoC,OAAO,iCAAA,EAAkC;AAAA;AAAA,EAE7F,OAAA,EAAS,EAAE,GAAA,EAAK,oBAAA,EAAsB,OAAO,uBAAA,EAAwB;AAAA,EACrE,KAAA,EAAO,EAAE,GAAA,EAAK,qBAAA,EAAuB,OAAO,iCAAA,EAAkC;AAAA,EAC9E,QAAA,EAAU,EAAE,GAAA,EAAK,SAAA,EAAW,OAAO,iCAAA;AACrC,CAAA;AAiBA,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,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,gBAAAA,CACP;AAAA,IACE,KAAA,GAAQ,CAAA;AAAA,IACR,IAAA,GAAO,SAAA;AAAA,IACP,aAAA,GAAgB,KAAA;AAAA,IAChB,KAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,SAAA;AAAA,IACA;AAAA,KAEF,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;AAC3B,IAAA,MAAM,cAAc,CAAC,aAAA;AACrB,IAAA,MAAM,WAAA,mBACJC,eAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,kDAAA;AAAA,UACA,UAAA,IAAc;AAAA,SAChB;AAAA,QACA,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QAE5B,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA,UAAE;AAAA;AAAA;AAAA,KACjB;AAGF,IAAA,uBACEA,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,0EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,UAAA,IAAc,UAAU,CAAA,EACzC,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,YAEC,eAAe,UAAA,IAAc;AAAA,WAAA,EAChC,CAAA;AAAA,UAEC,WAAA,IAAe,CAAC,UAAA,IAAc,WAAA;AAAA,UAC9B,KAAA,oBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF","file":"SCircleProgress.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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 SCircleProgressType = '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<SCircleProgressType, { arc: string; track: string }> = {\n  primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n  inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n  error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n  complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 테마 */\n  type?: SCircleProgressType;\n  /** 불확정(스피너) 모드 — value 무시 */\n  indeterminate?: boolean;\n  /** 하단 레이블 */\n  label?: string;\n  /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */\n  innerValue?: boolean;\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/** SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n  function SCircleProgress(\n    {\n      value = 0,\n      type = 'primary',\n      indeterminate = false,\n      label,\n      innerValue = false,\n      className,\n      style,\n    },\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    const showPercent = !indeterminate;\n    const percentNode = (\n      <span\n        className={cn(\n          'text-center text-[16px] font-bold leading-[26px]',\n          innerValue && 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n        )}\n        style={{ color: percentColor }}\n      >\n        {Math.round(v)}%\n      </span>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]',\n          className,\n        )}\n        style={style}\n      >\n        <div className={cn(innerValue && 'relative')}>\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          {/* innerValue: 원 가운데에 퍼센트 오버레이 */}\n          {showPercent && innerValue && percentNode}\n        </div>\n        {/* 기본: 퍼센트를 원(ring) 아래에 표시 */}\n        {showPercent && !innerValue && percentNode}\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/SCircleProgress/SCircleProgress.d.ts

@@ -9,6 +9,8 @@ export interface SCircleProgressProps {
     indeterminate?: boolean;
     /** 하단 레이블 */
     label?: string;
+    /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */
+    innerValue?: boolean;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SCircleProgress/SCircleProgress.js

@@ -27,20 +27,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",
               {
@@ -84,18 +110,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 })
         ]
       }

package/dist/components/SCircleProgress/SCircleProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["SCircleProgress"],"mappings":"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","file":"SCircleProgress.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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 SCircleProgressType = '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<SCircleProgressType, { arc: string; track: string }> = {\n  primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n  inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n  error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n  complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 테마 */\n  type?: SCircleProgressType;\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/** SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n  function SCircleProgress(\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        {/* percent 는 원(ring) 중앙에 오버레이 */}\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"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["SCircleProgress"],"mappings":"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","file":"SCircleProgress.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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 SCircleProgressType = '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<SCircleProgressType, { arc: string; track: string }> = {\n  primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n  inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n  error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n  complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n  /** 진행률 (0–100) */\n  value?: number;\n  /** 색상 테마 */\n  type?: SCircleProgressType;\n  /** 불확정(스피너) 모드 — value 무시 */\n  indeterminate?: boolean;\n  /** 하단 레이블 */\n  label?: string;\n  /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */\n  innerValue?: boolean;\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/** SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n  function SCircleProgress(\n    {\n      value = 0,\n      type = 'primary',\n      indeterminate = false,\n      label,\n      innerValue = false,\n      className,\n      style,\n    },\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    const showPercent = !indeterminate;\n    const percentNode = (\n      <span\n        className={cn(\n          'text-center text-[16px] font-bold leading-[26px]',\n          innerValue && 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n        )}\n        style={{ color: percentColor }}\n      >\n        {Math.round(v)}%\n      </span>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]',\n          className,\n        )}\n        style={style}\n      >\n        <div className={cn(innerValue && 'relative')}>\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          {/* innerValue: 원 가운데에 퍼센트 오버레이 */}\n          {showPercent && innerValue && percentNode}\n        </div>\n        {/* 기본: 퍼센트를 원(ring) 아래에 표시 */}\n        {showPercent && !innerValue && percentNode}\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"]}