sellmate-design-system-react 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -2982,6 +2982,7 @@ var STag = react.forwardRef(function STag2({
   label = "",
   icon,
   iconLeft = true,
+  width,
   className,
   style,
   ...rest
@@ -2989,13 +2990,14 @@ var STag = react.forwardRef(function STag2({
   const s = TAG_SIZE_CONFIG[size];
   const contentColor = `var(--cmp-tag-${color}-content)`;
   const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       ref,
       "aria-label": label || "tag",
       className: cn(
-        "box-border inline-flex select-none items-center justify-center whitespace-nowrap",
+        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
         className
       ),
       style: {
@@ -3008,6 +3010,7 @@ var STag = react.forwardRef(function STag2({
         lineHeight: `${s.lineHeight}px`,
         background: `var(--cmp-tag-${color}-bg)`,
         color: contentColor,
+        ...resolvedWidth != null ? { width: resolvedWidth } : {},
         ...style
       },
       ...rest,
@@ -3916,7 +3919,7 @@ var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[12px]", children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: line }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -4880,7 +4883,7 @@ function SCheckbox({
       onValueChange(false);
     }
   };
-  const boxBg = disabled ? "var(--cmp-checkbox-bg-disabled)" : isChecked && !inverse ? "var(--cmp-checkbox-checked-bg-default)" : "transparent";
+  const boxBg = disabled ? "var(--cmp-checkbox-bg-disabled)" : inverse ? "transparent" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-bg-default)";
   const boxBorder = disabled ? "var(--cmp-checkbox-border-disabled)" : inverse ? "var(--cmp-checkbox-checked-border-inverse)" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-border-default)";
   const iconColor = disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)";
   const labelColor = disabled ? "var(--cmp-checkbox-label-disabled)" : inverse ? "var(--cmp-checkbox-label-inverse)" : "var(--cmp-checkbox-label-default)";
@@ -5926,8 +5929,10 @@ 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)]",
-                                    stickyInfo(i).isSticky && cn(rowBg, "group-hover:bg-[var(--color-grey-05)]"),
+                                    rowBg,
+                                    "group-hover:bg-[var(--color-grey-05)]",
                                     stickyShadowClass(i),
                                     col.tdClass
                                   ),