sellmate-design-system-react 1.0.0 → 1.1.0

package/dist/components/STableBar/STableBar.cjs

@@ -0,0 +1,93 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var SDivider = react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      "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",
+        className
+      ),
+      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      ...rest
+    }
+  );
+});
+var COUNT_NULL = "var(--cmp-table-bar-count-null)";
+var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
+var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
+var STableBar = react.forwardRef(function STableBar2({ total, selected, actions, rightActions, className, ...rest }, ref) {
+  const hasTotal = total != null;
+  const hasSelected = selected != null;
+  const hasCount = hasTotal || hasSelected;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: actions || rightActions ? "toolbar" : void 0,
+      className: cn(
+        "flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]",
+        "h-[var(--cmp-table-bar-height)] shrink-0",
+        "rounded-[var(--cmp-table-radius)] border-[length:var(--cmp-table-border-width)] border-solid border-[var(--cmp-table-border-color)] bg-white",
+        className
+      ),
+      ...rest,
+      children: [
+        hasCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: [
+          hasTotal && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
+            "\uCD1D ",
+            /* @__PURE__ */ jsxRuntime.jsx("b", { style: { color: totalColor(total) }, children: total.toLocaleString() }),
+            " \uAC74"
+          ] }),
+          hasTotal && hasSelected && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "typo-table-body text-[var(--sys-color-fg-tertiary)]",
+              children: "/"
+            }
+          ),
+          hasSelected && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-table-body whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("b", { style: { color: selectedColor(selected) }, children: selected.toLocaleString() }),
+            " \uAC74 \uC120\uD0DD"
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden", children: [
+          hasCount && /* @__PURE__ */ jsxRuntime.jsx(
+            SDivider,
+            {
+              vertical: true,
+              className: "h-[var(--cmp-table-bar-divider-height)] self-center",
+              style: { backgroundColor: "var(--cmp-table-border-color)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: actions })
+        ] }),
+        rightActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-[var(--cmp-table-content-gap)] empty:hidden", children: rightActions })
+      ]
+    }
+  );
+});
+
+exports.STableBar = STableBar;
+//# sourceMappingURL=STableBar.cjs.map
+//# sourceMappingURL=STableBar.cjs.map

package/dist/components/STableBar/STableBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SDivider/SDivider.tsx","../../../src/components/STableBar/STableBar.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SDivider","jsx","STableBar","jsxs"],"mappings":"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","file":"STableBar.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 HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SDividerProps extends HTMLAttributes<HTMLHRElement> {\n  /** true면 수직 분할선, false면 수평 분할선 */\n  vertical?: boolean;\n}\n\n/** SDivider — sd-divider 포팅. 색상은 `--sys-color-divider-default`. */\nexport const SDivider = forwardRef<HTMLHRElement, SDividerProps>(function SDivider(\n  { vertical = false, className, style, ...rest },\n  ref,\n) {\n  return (\n    <hr\n      ref={ref}\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      className={cn(\n        'shrink-0 border-0',\n        vertical ? 'inline-block h-auto w-px self-stretch' : 'block h-px w-full',\n        className,\n      )}\n      style={{ backgroundColor: 'var(--sys-color-divider-default, #E1E1E1)', ...style }}\n      {...rest}\n    />\n  );\n});\n","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\nimport { SDivider } from '../SDivider';\n\n/** 0(또는 미집계)은 죽은 값이라 어느 쪽이든 count-null. */\nconst COUNT_NULL = 'var(--cmp-table-bar-count-null)';\n\n/** 전체 건수 색 — 1건 이상이면 count-total. */\nconst totalColor = (n: number) => (n > 0 ? 'var(--cmp-table-bar-count-total)' : COUNT_NULL);\n\n/**\n * 선택 건수 색 — 선택이 있으면 brilliantblue_75 로 강조한다.\n * 전체 건수(count-total)보다 밝은 파랑이라 \"지금 선택된 상태\"가 눈에 먼저 들어온다.\n */\nconst selectedColor = (n: number) => (n > 0 ? 'var(--color-brilliantblue-75)' : COUNT_NULL);\n\nexport interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** 전체 건수. 지정하면 \"총 N 건\" 을 표시한다 (천단위 구분 자동) */\n  total?: number;\n  /** 선택 건수. 지정하면 \"N건 선택\" 을 표시한다 */\n  selected?: number;\n  /** 구분선 오른쪽 좌측 액션 영역 */\n  actions?: ReactNode;\n  /** 우측 정렬 액션 영역 */\n  rightActions?: ReactNode;\n}\n\n/**\n * STableBar — STable 위에 얹는 툴바.\n * 왼쪽에 건수 요약(총 N 건 / N건 선택), 구분선 뒤에 좌측 액션, 오른쪽 끝에 우측 액션을 둔다.\n * 색·간격은 모두 테이블 컴포넌트 토큰(--cmp-table-bar-*) 기반.\n */\nexport const STableBar = forwardRef<HTMLDivElement, STableBarProps>(function STableBar(\n  { total, selected, actions, rightActions, className, ...rest },\n  ref,\n) {\n  const hasTotal = total != null;\n  const hasSelected = selected != null;\n  const hasCount = hasTotal || hasSelected;\n\n  return (\n    <div\n      ref={ref}\n      // 액션이 하나도 없으면 조작 대상이 없는 요약 텍스트 줄이라 toolbar 롤을 붙이지 않는다.\n      role={actions || rightActions ? 'toolbar' : undefined}\n      className={cn(\n        'flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]',\n        'h-[var(--cmp-table-bar-height)] shrink-0',\n        'rounded-[var(--cmp-table-radius)] border-[length:var(--cmp-table-border-width)] border-solid border-[var(--cmp-table-border-color)] bg-white',\n        className,\n      )}\n      {...rest}\n    >\n      {/* 건수 요약은 한 섹션이라 내부 간격만 content-gap(8px), 바깥 구분선까지는 section-gap(12px). */}\n      {hasCount && (\n        <div className=\"flex items-center gap-[var(--cmp-table-content-gap)]\">\n          {hasTotal && (\n            <span className=\"typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]\">\n              총 <b style={{ color: totalColor(total) }}>{total.toLocaleString()}</b> 건\n            </span>\n          )}\n\n          {hasTotal && hasSelected && (\n            <span\n              aria-hidden=\"true\"\n              className=\"typo-table-body text-[var(--sys-color-fg-tertiary)]\"\n            >\n              /\n            </span>\n          )}\n\n          {hasSelected && (\n            <span className=\"typo-table-body whitespace-nowrap text-[var(--sys-color-fg-primary)]\">\n              <b style={{ color: selectedColor(selected) }}>{selected.toLocaleString()}</b> 건 선택\n            </span>\n          )}\n        </div>\n      )}\n\n      {/*\n        actions 가 Fragment 라 truthy 인데 내부 분기로 아무것도 렌더되지 않는 경우가 있다.\n        React 로는 알 수 없으므로 슬롯이 실제로 비었는지(:empty)를 CSS 로 보고\n        구분선까지 통째로 감춘다. 구분선을 이 래퍼 안에 둔 이유도 그것.\n      */}\n      {actions && (\n        <div className=\"flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden\">\n          {hasCount && (\n            <SDivider\n              vertical\n              className=\"h-[var(--cmp-table-bar-divider-height)] self-center\"\n              // 색은 SDivider 가 인라인 style 로 깔므로 클래스가 아니라 style 로 덮어써야 한다.\n              style={{ backgroundColor: 'var(--cmp-table-border-color)' }}\n            />\n          )}\n          <div className=\"flex items-center gap-[var(--cmp-table-content-gap)]\">{actions}</div>\n        </div>\n      )}\n\n      {rightActions && (\n        <div className=\"ml-auto flex items-center gap-[var(--cmp-table-content-gap)] empty:hidden\">\n          {rightActions}\n        </div>\n      )}\n    </div>\n  );\n});\n"]}

package/dist/components/STableBar/STableBar.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) */
+    total?: number;
+    /** 선택 건수. 지정하면 "N건 선택" 을 표시한다 */
+    selected?: number;
+    /** 구분선 오른쪽 좌측 액션 영역 */
+    actions?: ReactNode;
+    /** 우측 정렬 액션 영역 */
+    rightActions?: ReactNode;
+}
+/**
+ * STableBar — STable 위에 얹는 툴바.
+ * 왼쪽에 건수 요약(총 N 건 / N건 선택), 구분선 뒤에 좌측 액션, 오른쪽 끝에 우측 액션을 둔다.
+ * 색·간격은 모두 테이블 컴포넌트 토큰(--cmp-table-bar-*) 기반.
+ */
+export declare const STableBar: import("react").ForwardRefExoticComponent<STableBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/STableBar/STableBar.js

@@ -0,0 +1,91 @@
+"use client";
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SDivider = forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ref,
+      "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",
+        className
+      ),
+      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      ...rest
+    }
+  );
+});
+var COUNT_NULL = "var(--cmp-table-bar-count-null)";
+var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
+var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
+var STableBar = forwardRef(function STableBar2({ total, selected, actions, rightActions, className, ...rest }, ref) {
+  const hasTotal = total != null;
+  const hasSelected = selected != null;
+  const hasCount = hasTotal || hasSelected;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: actions || rightActions ? "toolbar" : void 0,
+      className: cn(
+        "flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]",
+        "h-[var(--cmp-table-bar-height)] shrink-0",
+        "rounded-[var(--cmp-table-radius)] border-[length:var(--cmp-table-border-width)] border-solid border-[var(--cmp-table-border-color)] bg-white",
+        className
+      ),
+      ...rest,
+      children: [
+        hasCount && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: [
+          hasTotal && /* @__PURE__ */ jsxs("span", { className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
+            "\uCD1D ",
+            /* @__PURE__ */ jsx("b", { style: { color: totalColor(total) }, children: total.toLocaleString() }),
+            " \uAC74"
+          ] }),
+          hasTotal && hasSelected && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "typo-table-body text-[var(--sys-color-fg-tertiary)]",
+              children: "/"
+            }
+          ),
+          hasSelected && /* @__PURE__ */ jsxs("span", { className: "typo-table-body whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
+            /* @__PURE__ */ jsx("b", { style: { color: selectedColor(selected) }, children: selected.toLocaleString() }),
+            " \uAC74 \uC120\uD0DD"
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden", children: [
+          hasCount && /* @__PURE__ */ jsx(
+            SDivider,
+            {
+              vertical: true,
+              className: "h-[var(--cmp-table-bar-divider-height)] self-center",
+              style: { backgroundColor: "var(--cmp-table-border-color)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: actions })
+        ] }),
+        rightActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-[var(--cmp-table-content-gap)] empty:hidden", children: rightActions })
+      ]
+    }
+  );
+});
+
+export { STableBar };
+//# sourceMappingURL=STableBar.js.map
+//# sourceMappingURL=STableBar.js.map

package/dist/components/STableBar/STableBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SDivider/SDivider.tsx","../../../src/components/STableBar/STableBar.tsx"],"names":["SDivider","forwardRef","STableBar","jsx"],"mappings":"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","file":"STableBar.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 HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SDividerProps extends HTMLAttributes<HTMLHRElement> {\n  /** true면 수직 분할선, false면 수평 분할선 */\n  vertical?: boolean;\n}\n\n/** SDivider — sd-divider 포팅. 색상은 `--sys-color-divider-default`. */\nexport const SDivider = forwardRef<HTMLHRElement, SDividerProps>(function SDivider(\n  { vertical = false, className, style, ...rest },\n  ref,\n) {\n  return (\n    <hr\n      ref={ref}\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      className={cn(\n        'shrink-0 border-0',\n        vertical ? 'inline-block h-auto w-px self-stretch' : 'block h-px w-full',\n        className,\n      )}\n      style={{ backgroundColor: 'var(--sys-color-divider-default, #E1E1E1)', ...style }}\n      {...rest}\n    />\n  );\n});\n","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\nimport { SDivider } from '../SDivider';\n\n/** 0(또는 미집계)은 죽은 값이라 어느 쪽이든 count-null. */\nconst COUNT_NULL = 'var(--cmp-table-bar-count-null)';\n\n/** 전체 건수 색 — 1건 이상이면 count-total. */\nconst totalColor = (n: number) => (n > 0 ? 'var(--cmp-table-bar-count-total)' : COUNT_NULL);\n\n/**\n * 선택 건수 색 — 선택이 있으면 brilliantblue_75 로 강조한다.\n * 전체 건수(count-total)보다 밝은 파랑이라 \"지금 선택된 상태\"가 눈에 먼저 들어온다.\n */\nconst selectedColor = (n: number) => (n > 0 ? 'var(--color-brilliantblue-75)' : COUNT_NULL);\n\nexport interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** 전체 건수. 지정하면 \"총 N 건\" 을 표시한다 (천단위 구분 자동) */\n  total?: number;\n  /** 선택 건수. 지정하면 \"N건 선택\" 을 표시한다 */\n  selected?: number;\n  /** 구분선 오른쪽 좌측 액션 영역 */\n  actions?: ReactNode;\n  /** 우측 정렬 액션 영역 */\n  rightActions?: ReactNode;\n}\n\n/**\n * STableBar — STable 위에 얹는 툴바.\n * 왼쪽에 건수 요약(총 N 건 / N건 선택), 구분선 뒤에 좌측 액션, 오른쪽 끝에 우측 액션을 둔다.\n * 색·간격은 모두 테이블 컴포넌트 토큰(--cmp-table-bar-*) 기반.\n */\nexport const STableBar = forwardRef<HTMLDivElement, STableBarProps>(function STableBar(\n  { total, selected, actions, rightActions, className, ...rest },\n  ref,\n) {\n  const hasTotal = total != null;\n  const hasSelected = selected != null;\n  const hasCount = hasTotal || hasSelected;\n\n  return (\n    <div\n      ref={ref}\n      // 액션이 하나도 없으면 조작 대상이 없는 요약 텍스트 줄이라 toolbar 롤을 붙이지 않는다.\n      role={actions || rightActions ? 'toolbar' : undefined}\n      className={cn(\n        'flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]',\n        'h-[var(--cmp-table-bar-height)] shrink-0',\n        'rounded-[var(--cmp-table-radius)] border-[length:var(--cmp-table-border-width)] border-solid border-[var(--cmp-table-border-color)] bg-white',\n        className,\n      )}\n      {...rest}\n    >\n      {/* 건수 요약은 한 섹션이라 내부 간격만 content-gap(8px), 바깥 구분선까지는 section-gap(12px). */}\n      {hasCount && (\n        <div className=\"flex items-center gap-[var(--cmp-table-content-gap)]\">\n          {hasTotal && (\n            <span className=\"typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]\">\n              총 <b style={{ color: totalColor(total) }}>{total.toLocaleString()}</b> 건\n            </span>\n          )}\n\n          {hasTotal && hasSelected && (\n            <span\n              aria-hidden=\"true\"\n              className=\"typo-table-body text-[var(--sys-color-fg-tertiary)]\"\n            >\n              /\n            </span>\n          )}\n\n          {hasSelected && (\n            <span className=\"typo-table-body whitespace-nowrap text-[var(--sys-color-fg-primary)]\">\n              <b style={{ color: selectedColor(selected) }}>{selected.toLocaleString()}</b> 건 선택\n            </span>\n          )}\n        </div>\n      )}\n\n      {/*\n        actions 가 Fragment 라 truthy 인데 내부 분기로 아무것도 렌더되지 않는 경우가 있다.\n        React 로는 알 수 없으므로 슬롯이 실제로 비었는지(:empty)를 CSS 로 보고\n        구분선까지 통째로 감춘다. 구분선을 이 래퍼 안에 둔 이유도 그것.\n      */}\n      {actions && (\n        <div className=\"flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden\">\n          {hasCount && (\n            <SDivider\n              vertical\n              className=\"h-[var(--cmp-table-bar-divider-height)] self-center\"\n              // 색은 SDivider 가 인라인 style 로 깔므로 클래스가 아니라 style 로 덮어써야 한다.\n              style={{ backgroundColor: 'var(--cmp-table-border-color)' }}\n            />\n          )}\n          <div className=\"flex items-center gap-[var(--cmp-table-content-gap)]\">{actions}</div>\n        </div>\n      )}\n\n      {rightActions && (\n        <div className=\"ml-auto flex items-center gap-[var(--cmp-table-content-gap)] empty:hidden\">\n          {rightActions}\n        </div>\n      )}\n    </div>\n  );\n});\n"]}

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

@@ -0,0 +1 @@
+export { STableBar, type STableBarProps } from './STableBar';

package/dist/index.cjs

@@ -7834,6 +7834,61 @@ var STable = react.forwardRef(function STable2({
     }
   );
 });
+var COUNT_NULL = "var(--cmp-table-bar-count-null)";
+var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
+var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
+var STableBar = react.forwardRef(function STableBar2({ total, selected, actions, rightActions, className, ...rest }, ref) {
+  const hasTotal = total != null;
+  const hasSelected = selected != null;
+  const hasCount = hasTotal || hasSelected;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: actions || rightActions ? "toolbar" : void 0,
+      className: cn(
+        "flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]",
+        "h-[var(--cmp-table-bar-height)] shrink-0",
+        "rounded-[var(--cmp-table-radius)] border-[length:var(--cmp-table-border-width)] border-solid border-[var(--cmp-table-border-color)] bg-white",
+        className
+      ),
+      ...rest,
+      children: [
+        hasCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: [
+          hasTotal && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
+            "\uCD1D ",
+            /* @__PURE__ */ jsxRuntime.jsx("b", { style: { color: totalColor(total) }, children: total.toLocaleString() }),
+            " \uAC74"
+          ] }),
+          hasTotal && hasSelected && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "typo-table-body text-[var(--sys-color-fg-tertiary)]",
+              children: "/"
+            }
+          ),
+          hasSelected && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-table-body whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("b", { style: { color: selectedColor(selected) }, children: selected.toLocaleString() }),
+            " \uAC74 \uC120\uD0DD"
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden", children: [
+          hasCount && /* @__PURE__ */ jsxRuntime.jsx(
+            SDivider,
+            {
+              vertical: true,
+              className: "h-[var(--cmp-table-bar-divider-height)] self-center",
+              style: { backgroundColor: "var(--cmp-table-border-color)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: actions })
+        ] }),
+        rightActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-[var(--cmp-table-content-gap)] empty:hidden", children: rightActions })
+      ]
+    }
+  );
+});
 var FONT = {
   sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
   md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
@@ -11918,6 +11973,7 @@ exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
 exports.STEPPER_SIZES = STEPPER_SIZES;
 exports.STable = STable;
+exports.STableBar = STableBar;
 exports.STabs = STabs;
 exports.STag = STag;
 exports.STextLink = STextLink;