sellmate-design-system-react 0.1.9 → 0.1.10

package/dist/components/STable/STable.cjs

@@ -2959,12 +2959,35 @@ 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",
       {
@@ -2975,57 +2998,53 @@ var SCircleProgress = react.forwardRef(
         ),
         style,
         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.jsxs("div", { className: cn(innerValue && "relative"), 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"
                 ),
-                /* @__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 }
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
                     }
-                  }
-                )
-              ]
-            }
-          ),
-          !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "text-center text-[16px] font-bold leading-[26px]",
-              style: { color: percentColor },
-              children: [
-                Math.round(v),
-                "%"
-              ]
-            }
-          ),
+                  ),
+                  /* @__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 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            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 })
         ]
       }
@@ -3391,7 +3410,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -3993,7 +4012,7 @@ function ItemList({
             isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
             // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
             // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-            o.disabled && "text-[color:var(--cmp-listItem-content-disabled)]",
+            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
             o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
           ),
           style: { paddingLeft: padLeft },
@@ -4008,10 +4027,14 @@ function ItemList({
       {
         value: o.value,
         disabled: o.disabled,
+        accessibleWhenDisabled: true,
         className: cn(
           itemBase,
           isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          activeClass
+          // Ariakit은 disabled 항목도 hover 시 active(data-active-item) 처리하므로,
+          // 비활성 항목에는 hover 하이라이트를 적용하지 않아 회색 비활성 스타일을 유지한다.
+          // (원본 Stencil의 `--focused...:not(--disabled)` 규칙과 동일한 의도)
+          !o.disabled && activeClass
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
         render: useSearch ? /* @__PURE__ */ jsxRuntime.jsx(Ariakit__namespace.ComboboxItem, {}) : void 0,
@@ -4024,7 +4047,7 @@ function ItemList({
                 "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
                 o.disabled ? (
                   // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                  "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                  "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
                 ) : cn(
                   "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
                   isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
@@ -4326,7 +4349,8 @@ var STable = react.forwardRef(function STable2({
     else onSelectedChange?.([...selected, row]);
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
-  const cellPadY = dense ? "var(--cmp-table-body-dense-paddingY)" : "var(--cmp-table-body-default-paddingY)";
+  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
+  const cellPadX = dense ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
   const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
@@ -4501,13 +4525,15 @@ var STable = react.forwardRef(function STable2({
                                   className: cn(
                                     // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
                                     // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
-                                    "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] px-[16px] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                    "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                     rowBg,
                                     "group-hover:bg-[var(--color-grey-05)]",
                                     stickyShadowClass(i),
                                     col.tdClass
                                   ),
                                   style: {
+                                    paddingLeft: cellPadX,
+                                    paddingRight: cellPadX,
                                     paddingTop: cellPadY,
                                     paddingBottom: cellPadY,
                                     textAlign: col.align ?? "left",