sellmate-design-system-react 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export * from './components/STabs';
 export * from './components/SPagination';
 export * from './components/SStepper';
 export * from './components/STable';
+export * from './components/STableBar';
 export * from './components/SKeyValueTable';
 export * from './components/SToast';
 export * from './components/SForm';

package/dist/index.js

@@ -7806,6 +7806,61 @@ var STable = 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 = 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 })
+      ]
+    }
+  );
+});
 var FONT = {
   sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
   md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
@@ -11827,6 +11882,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SExpansionItem, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SExpansionItem, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map