sellmate-design-system-react 9.0.0-beta.20 → 9.0.0-beta.22

package/dist/index.cjs

@@ -3442,8 +3442,224 @@ var SBadge = /* @__PURE__ */ react.forwardRef(function SBadge2({ color = "blue",
     }
   ) });
 });
-var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/components/SButton/button.config.ts
+var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
+var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
+var V = (path) => `var(--cmp-button-${path})`;
+function buttonPreset(color, outline) {
+  switch (color) {
+    case "primary":
+      return outline ? {
+        bg: V("brand-outline-bg-default"),
+        bgHover: V("brand-outline-bg-hover"),
+        text: V("brand-outline-content"),
+        icon: V("brand-outline-content"),
+        border: V("brand-outline-border")
+      } : {
+        bg: V("brand-strong-bg-default"),
+        bgHover: V("brand-strong-bg-hover"),
+        text: V("brand-strong-content"),
+        icon: V("brand-strong-content"),
+        border: "transparent"
+      };
+    case "secondary":
+      return {
+        bg: V("brand-subtle-bg-default"),
+        bgHover: V("brand-subtle-bg-hover"),
+        text: V("brand-subtle-content"),
+        icon: V("brand-subtle-content"),
+        border: "transparent"
+      };
+    case "neutral":
+      return {
+        bg: V("neutral-outline-bg-default"),
+        bgHover: V("neutral-outline-bg-hover"),
+        text: V("neutral-outline-text"),
+        icon: V("neutral-outline-icon"),
+        border: outline ? V("neutral-outline-border") : "transparent"
+      };
+    case "danger":
+      return outline ? {
+        bg: V("danger-outline-bg-default"),
+        bgHover: V("danger-outline-bg-hover"),
+        text: V("danger-outline-content"),
+        icon: V("danger-outline-content"),
+        border: V("danger-outline-border")
+      } : {
+        bg: V("danger-strong-bg-default"),
+        bgHover: V("danger-strong-bg-hover"),
+        text: V("danger-strong-content"),
+        icon: V("danger-strong-content"),
+        border: "transparent"
+      };
+  }
+}
+var BUTTON_SIZE_CONFIG = {
+  xs: {
+    height: "var(--cmp-button-xs-height)",
+    paddingX: "var(--cmp-button-xs-paddingX)",
+    gap: "var(--cmp-button-xs-gap)",
+    iconSize: 12,
+    fontSize: 12,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-sm)",
+    minWidth: 36
+  },
+  sm: {
+    height: "var(--cmp-button-sm-height)",
+    paddingX: "var(--cmp-button-sm-paddingX)",
+    gap: "var(--cmp-button-sm-gap)",
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-sm)",
+    minWidth: 70
+  },
+  md: {
+    height: "var(--cmp-button-md-height)",
+    paddingX: "var(--cmp-button-md-paddingX)",
+    gap: "var(--cmp-button-md-gap)",
+    iconSize: 20,
+    fontSize: 16,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-md)",
+    minWidth: 100
+  },
+  lg: {
+    height: "var(--cmp-button-lg-height)",
+    paddingX: "var(--cmp-button-lg-paddingX)",
+    gap: "var(--cmp-button-lg-gap)",
+    iconSize: 24,
+    fontSize: 18,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-md)",
+    minWidth: 120
+  }
+};
+var BUTTON_FOCUS_RING = "var(--sys-color-border-accent)";
+var BUTTON_DISABLED_BG = "var(--cmp-button-bg-disabled, #E1E1E1)";
+var BUTTON_DISABLED_BORDER = "var(--cmp-button-border-disabled, #CCCCCC)";
+var BUTTON_DISABLED_TEXT = "var(--cmp-button-text-disabled, #888888)";
+var BUTTON_DISABLED_ICON = "var(--cmp-button-icon-disabled, #BBBBBB)";
+var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
+  color = "primary",
+  outline = false,
+  size = "sm",
+  icon,
+  rightIcon,
+  label,
+  className,
+  style,
+  type = "button",
+  disabled = false,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  const preset = buttonPreset(color, outline);
+  const s = BUTTON_SIZE_CONFIG[size];
+  const hasLabel = label != null && label !== "";
+  const iconOnly = !hasLabel && Boolean(icon) !== Boolean(rightIcon);
+  if (color === "secondary" && outline && typeof console !== "undefined") {
+    console.warn(
+      '[SButton] color="secondary" \uB294 outline \uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. solid \uB85C \uB80C\uB354\uB429\uB2C8\uB2E4.'
+    );
+  }
+  if (iconOnly && !ariaLabel && typeof console !== "undefined") {
+    console.warn(`[SButton] \uC544\uC774\uCF58 \uC804\uC6A9 \uBC84\uD2BC\uC740 aria-label \uC774 \uD544\uC694\uD569\uB2C8\uB2E4. (color="${color}")`);
+  }
+  const iconColor = disabled ? BUTTON_DISABLED_ICON : preset.icon;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: iconColor }) : null;
+  const rightIconNode = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: rightIcon, size: s.iconSize, color: iconColor }) : null;
+  const cssVars = {
+    "--btn-bg": disabled ? BUTTON_DISABLED_BG : preset.bg,
+    "--btn-bg-hover": preset.bgHover,
+    "--btn-border": disabled ? BUTTON_DISABLED_BORDER : preset.border,
+    "--btn-ring": BUTTON_FOCUS_RING,
+    "minHeight": s.height,
+    "minWidth": iconOnly ? s.height : hasLabel ? s.minWidth : void 0,
+    "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
+    "borderRadius": s.radius,
+    "gap": s.gap,
+    "fontSize": s.fontSize,
+    "fontWeight": s.fontWeight,
+    "color": disabled ? BUTTON_DISABLED_TEXT : preset.text,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled,
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap border border-solid leading-none transition-colors",
+        "border-[color:var(--btn-border)] bg-[var(--btn-bg)]",
+        "outline-none focus-visible:shadow-[0_0_0_2px_var(--btn-ring)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--btn-bg-hover)]",
+        className
+      ),
+      style: cssVars,
+      ...props,
+      children: [
+        iconNode,
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center", children: label }),
+        rightIconNode
+      ]
+    }
+  );
+});
+function SFooter({
+  bg = "white",
+  left,
+  button,
+  children,
+  className,
+  leftClassName,
+  style
+}) {
+  const isGrey = bg === "grey";
+  const hasSlot = left != null || children != null;
+  const hasButton = button != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "footer",
+    {
+      className: cn(
+        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
+        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--shadow-spread-md)]",
+        className
+      ),
+      style,
+      children: [
+        hasSlot && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex min-w-px flex-[1_0_0] items-center justify-between", leftClassName),
+            children: [
+              left,
+              children
+            ]
+          }
+        ),
+        hasButton && /* @__PURE__ */ jsxRuntime.jsx(
+          SButton,
+          {
+            color: button.color ?? "primary",
+            outline: button.outline,
+            size: button.size ?? "md",
+            disabled: button.disabled,
+            onClick: () => button.onClick?.(),
+            label: button.label ?? "\uD655\uC778"
+          }
+        )
+      ]
+    }
+  );
+}
+var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false, footerLeft, button, footerClassName, className, children, ...rest }, ref) {
+  const hasFooter = footerLeft != null || button != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
@@ -3453,7 +3669,18 @@ var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false,
         className
       ),
       ...rest,
-      children
+      children: [
+        children,
+        hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+          SFooter,
+          {
+            bg: "grey",
+            left: footerLeft,
+            button,
+            className: cn("px-(--sys-space-panel-padding-default)", footerClassName)
+          }
+        )
+      ]
     }
   );
 });
@@ -3745,7 +3972,8 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, height, className, style, ...rest }, ref) {
+  const fixedHeight = vertical && height !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "hr",
     {
@@ -3753,10 +3981,14 @@ var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical =
       "aria-orientation": vertical ? "vertical" : "horizontal",
       className: cn(
         "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        vertical ? cn("inline-block w-px", fixedHeight ? "self-center" : "h-auto self-stretch") : "block h-px w-full",
         className
       ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      style: {
+        backgroundColor: "var(--sys-color-divider-default, #E1E1E1)",
+        ...fixedHeight ? { height: typeof height === "number" ? `${height}px` : height } : null,
+        ...style
+      },
       ...rest
     }
   );
@@ -5568,11 +5800,15 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
     headerClassName,
     padding,
     background,
+    footerLeft,
+    button,
+    footerClassName,
     className,
     children,
     ...rest
   }, ref) {
     const hasHeader = title != null;
+    const hasFooter = footerLeft != null || button != null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -5597,7 +5833,16 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
               className: headerClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(SSectionHeaderCardBodyImpl, { padding, background, children })
+          /* @__PURE__ */ jsxRuntime.jsx(SSectionHeaderCardBodyImpl, { padding, background, children }),
+          hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+            SFooter,
+            {
+              bg: "grey",
+              left: footerLeft,
+              button,
+              className: cn("px-(--cmp-sectionHeaderCard-header-paddingX)", footerClassName)
+            }
+          )
         ]
       }
     );
@@ -5870,174 +6115,6 @@ var SSplitter2 = /* @__PURE__ */ Object.assign(SSplitterRoot, {
   Before: SSplitterBefore2,
   After: SSplitterAfter2
 });
-
-// src/components/SButton/button.config.ts
-var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
-var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
-var V = (path) => `var(--cmp-button-${path})`;
-function buttonPreset(color, outline) {
-  switch (color) {
-    case "primary":
-      return outline ? {
-        bg: V("brand-outline-bg-default"),
-        bgHover: V("brand-outline-bg-hover"),
-        text: V("brand-outline-content"),
-        icon: V("brand-outline-content"),
-        border: V("brand-outline-border")
-      } : {
-        bg: V("brand-strong-bg-default"),
-        bgHover: V("brand-strong-bg-hover"),
-        text: V("brand-strong-content"),
-        icon: V("brand-strong-content"),
-        border: "transparent"
-      };
-    case "secondary":
-      return {
-        bg: V("brand-subtle-bg-default"),
-        bgHover: V("brand-subtle-bg-hover"),
-        text: V("brand-subtle-content"),
-        icon: V("brand-subtle-content"),
-        border: "transparent"
-      };
-    case "neutral":
-      return {
-        bg: V("neutral-outline-bg-default"),
-        bgHover: V("neutral-outline-bg-hover"),
-        text: V("neutral-outline-text"),
-        icon: V("neutral-outline-icon"),
-        border: outline ? V("neutral-outline-border") : "transparent"
-      };
-    case "danger":
-      return outline ? {
-        bg: V("danger-outline-bg-default"),
-        bgHover: V("danger-outline-bg-hover"),
-        text: V("danger-outline-content"),
-        icon: V("danger-outline-content"),
-        border: V("danger-outline-border")
-      } : {
-        bg: V("danger-strong-bg-default"),
-        bgHover: V("danger-strong-bg-hover"),
-        text: V("danger-strong-content"),
-        icon: V("danger-strong-content"),
-        border: "transparent"
-      };
-  }
-}
-var BUTTON_SIZE_CONFIG = {
-  xs: {
-    height: "var(--cmp-button-xs-height)",
-    paddingX: "var(--cmp-button-xs-paddingX)",
-    gap: "var(--cmp-button-xs-gap)",
-    iconSize: 12,
-    fontSize: 12,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-sm)",
-    minWidth: 36
-  },
-  sm: {
-    height: "var(--cmp-button-sm-height)",
-    paddingX: "var(--cmp-button-sm-paddingX)",
-    gap: "var(--cmp-button-sm-gap)",
-    iconSize: 16,
-    fontSize: 12,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-sm)",
-    minWidth: 70
-  },
-  md: {
-    height: "var(--cmp-button-md-height)",
-    paddingX: "var(--cmp-button-md-paddingX)",
-    gap: "var(--cmp-button-md-gap)",
-    iconSize: 20,
-    fontSize: 16,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-md)",
-    minWidth: 100
-  },
-  lg: {
-    height: "var(--cmp-button-lg-height)",
-    paddingX: "var(--cmp-button-lg-paddingX)",
-    gap: "var(--cmp-button-lg-gap)",
-    iconSize: 24,
-    fontSize: 18,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-md)",
-    minWidth: 120
-  }
-};
-var BUTTON_FOCUS_RING = "var(--sys-color-border-accent)";
-var BUTTON_DISABLED_BG = "var(--cmp-button-bg-disabled, #E1E1E1)";
-var BUTTON_DISABLED_BORDER = "var(--cmp-button-border-disabled, #CCCCCC)";
-var BUTTON_DISABLED_TEXT = "var(--cmp-button-text-disabled, #888888)";
-var BUTTON_DISABLED_ICON = "var(--cmp-button-icon-disabled, #BBBBBB)";
-var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
-  color = "primary",
-  outline = false,
-  size = "sm",
-  icon,
-  rightIcon,
-  label,
-  className,
-  style,
-  type = "button",
-  disabled = false,
-  "aria-label": ariaLabel,
-  ...props
-}, ref) {
-  const preset = buttonPreset(color, outline);
-  const s = BUTTON_SIZE_CONFIG[size];
-  const hasLabel = label != null && label !== "";
-  const iconOnly = !hasLabel && Boolean(icon) !== Boolean(rightIcon);
-  if (color === "secondary" && outline && typeof console !== "undefined") {
-    console.warn(
-      '[SButton] color="secondary" \uB294 outline \uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. solid \uB85C \uB80C\uB354\uB429\uB2C8\uB2E4.'
-    );
-  }
-  if (iconOnly && !ariaLabel && typeof console !== "undefined") {
-    console.warn(`[SButton] \uC544\uC774\uCF58 \uC804\uC6A9 \uBC84\uD2BC\uC740 aria-label \uC774 \uD544\uC694\uD569\uB2C8\uB2E4. (color="${color}")`);
-  }
-  const iconColor = disabled ? BUTTON_DISABLED_ICON : preset.icon;
-  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: iconColor }) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: rightIcon, size: s.iconSize, color: iconColor }) : null;
-  const cssVars = {
-    "--btn-bg": disabled ? BUTTON_DISABLED_BG : preset.bg,
-    "--btn-bg-hover": preset.bgHover,
-    "--btn-border": disabled ? BUTTON_DISABLED_BORDER : preset.border,
-    "--btn-ring": BUTTON_FOCUS_RING,
-    "minHeight": s.height,
-    "minWidth": iconOnly ? s.height : hasLabel ? s.minWidth : void 0,
-    "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
-    "borderRadius": s.radius,
-    "gap": s.gap,
-    "fontSize": s.fontSize,
-    "fontWeight": s.fontWeight,
-    "color": disabled ? BUTTON_DISABLED_TEXT : preset.text,
-    ...style
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ref,
-      type,
-      disabled,
-      "aria-label": ariaLabel,
-      className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap border border-solid leading-none transition-colors",
-        "border-[color:var(--btn-border)] bg-[var(--btn-bg)]",
-        "outline-none focus-visible:shadow-[0_0_0_2px_var(--btn-ring)]",
-        disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--btn-bg-hover)]",
-        className
-      ),
-      style: cssVars,
-      ...props,
-      children: [
-        iconNode,
-        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center", children: label }),
-        rightIconNode
-      ]
-    }
-  );
-});
 var DANGER_TITLE_LABEL = "\uC8FC\uC758\uC0AC\uD56D";
 function renderItems(message, depth = 1) {
   const out = [];
@@ -6881,53 +6958,6 @@ function SPortal({
     }
   );
 }
-function SFooter({
-  bg = "white",
-  left,
-  button,
-  children,
-  className,
-  leftClassName,
-  style
-}) {
-  const isGrey = bg === "grey";
-  const hasSlot = left != null || children != null;
-  const hasButton = button != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "footer",
-    {
-      className: cn(
-        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
-        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--shadow-spread-md)]",
-        className
-      ),
-      style,
-      children: [
-        hasSlot && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn("flex min-w-px flex-[1_0_0] items-center justify-between", leftClassName),
-            children: [
-              left,
-              children
-            ]
-          }
-        ),
-        hasButton && /* @__PURE__ */ jsxRuntime.jsx(
-          SButton,
-          {
-            color: button.color ?? "primary",
-            outline: button.outline,
-            size: button.size ?? "md",
-            disabled: button.disabled,
-            onClick: () => button.onClick?.(),
-            label: button.label ?? "\uD655\uC778"
-          }
-        )
-      ]
-    }
-  );
-}
 var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
   popupTitle = "",
   type = "default",
@@ -11316,7 +11346,6 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   onPageChange,
   useInternalPagination = false,
   useRowsPerPageSelect = false,
-  useDensityToggle = false,
   rowsPerPageOption = DEFAULT_ROWS_PER_PAGE_OPTION,
   onRowsPerPageChange,
   useVirtualScroll = false,
@@ -11332,10 +11361,18 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
 }, ref) {
   const autoId = react.useId();
   const resolvedTableId = tableId ?? autoId;
+  const [innerDense, setInnerDense] = react.useState(dense);
+  react.useEffect(() => {
+    setInnerDense(dense);
+  }, [dense]);
+  const changeDense = (next) => {
+    setInnerDense(next);
+    onDenseChange?.(next);
+  };
   const visibleCols = react.useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
   const stickyLeft = stickyColumn?.left ?? 0;
   const stickyRight = stickyColumn?.right ?? 0;
-  const effectiveRowHeight = rowHeight ?? (dense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
+  const effectiveRowHeight = rowHeight ?? (innerDense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
   const colSignature = react.useMemo(
     () => visibleCols.map((c) => `${c.name}:${c.width ?? ""}:${c.autoWidth ? 1 : 0}`).join("|"),
     [visibleCols]
@@ -11565,9 +11602,9 @@ var STable = /* @__PURE__ */ 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-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
+  const cellPadY = innerDense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
   const cellPadXOf = (col) => col.contentType === "control" ? "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 rowH = innerDense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
     const isLeft = i < stickyLeft;
@@ -11919,10 +11956,11 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
             ]
           }
         ),
-        showPagination && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
+        (showPagination || dense) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
+        // 페이지네이션이 없어도 dense 면 이 바를 그린다 — 밀도 토글이 사는 곳이 여기다.
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -11932,22 +11970,20 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
               bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              (useDensityToggle || useRowsPerPageSelect) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
-                useDensityToggle && // 라벨·아이콘은 현재 밀도가 아니라 **누르면 되는 상태**를 가리킨다 (dense 면 "넓게 보기").
-                // row·rowDense 는 세로 막대라 90도 돌려 가로 행으로 쓴다.
-                /* @__PURE__ */ jsxRuntime.jsx(
+              showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+              (dense || useRowsPerPageSelect) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+                dense && /* @__PURE__ */ jsxRuntime.jsx(
                   STextLink,
                   {
                     size: "sm",
-                    icon: dense ? "row" : "rowDense",
+                    icon: innerDense ? "row" : "rowDense",
                     iconRotate: 90,
                     iconColor: "var(--sys-color-fg-quaternary)",
-                    label: dense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
-                    onClick: () => onDenseChange?.(!dense)
+                    label: innerDense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
+                    onClick: () => changeDense(!innerDense)
                   }
                 ),
-                useDensityToggle && useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
+                dense && useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
                 useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(
                   SSelect2,
                   {
@@ -12010,7 +12046,7 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
             SDivider,
             {
               vertical: true,
-              className: "h-[var(--cmp-table-bar-divider-height)] self-center",
+              height: "var(--cmp-table-bar-divider-height)",
               style: { backgroundColor: "var(--cmp-table-border-color)" }
             }
           ),
@@ -12935,13 +12971,7 @@ function SCalendar({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SDivider,
-            {
-              vertical: true,
-              className: "h-[var(--cmp-datepicker-calendar-header-divider-height)] self-center"
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, height: "var(--cmp-datepicker-calendar-header-divider-height)" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,