sellmate-design-system-react 0.12.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

@@ -1,7 +1,7 @@
 "use client";
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, Children, useId, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, useLayoutEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { forwardRef, useState, useId, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, useLayoutEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -2899,6 +2899,7 @@ var SExpansionItem = forwardRef(
     leading,
     trailing,
     bodyPadding = true,
+    bordered = false,
     expanded,
     defaultExpanded = false,
     dense = false,
@@ -2910,9 +2911,6 @@ var SExpansionItem = forwardRef(
   }, ref) {
     const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
     const isExpanded = expanded ?? internalExpanded;
-    const hasBody = Children.toArray(children).some(
-      (child) => child !== null && child !== void 0 && (typeof child !== "string" || child.trim() !== "")
-    );
     const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
     const id = useId();
     return /* @__PURE__ */ jsxs(
@@ -2921,6 +2919,9 @@ var SExpansionItem = forwardRef(
         ref,
         className: cn(
           "group overflow-hidden bg-[var(--cmp-expansionItem-title-bg-default)]",
+          // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
+          bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
+          bordered && isExpanded && "!border-[#93C4FF]",
           className
         ),
         ...rest,
@@ -2940,23 +2941,52 @@ var SExpansionItem = forwardRef(
               },
               className: cn(
                 "flex w-full items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-[var(--cmp-expansionItem-title-text-default)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--sys-color-border-accent)] disabled:cursor-not-allowed disabled:text-[var(--sys-color-disabled-text)] cursor-pointer",
-                isExpanded && "border-b border-[var(--cmp-expansionItem-title-border)]",
-                !isExpanded && "hover:bg-[var(--cmp-expansionItem-title-bg-hover)]",
-                dense ? "min-h-8 py-[var(--cmp-expansionItem-title-paddingY-dense)]" : "min-h-10 py-[var(--cmp-expansionItem-title-paddingY-normal)]",
-                "gap-[var(--cmp-expansionItem-title-gap)]",
-                "pr-[var(--cmp-expansionItem-title-paddingX)]",
-                depth === 2 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+64px)]" : "pl-[var(--cmp-expansionItem-title-paddingX)]",
-                isExpanded && "bg-[var(--cmp-expansionItem-title-bg-expanded)] text-[var(--cmp-expansionItem-title-text-expanded)]"
+                isExpanded && "border-b border-(--cmp-expansionItem-title-border)",
+                !isExpanded && "hover:bg-(--cmp-expansionItem-title-bg-hover)",
+                dense ? "min-h-8 py-(--cmp-expansionItem-title-paddingY-dense)" : "min-h-10 py-(--cmp-expansionItem-title-paddingY-normal)",
+                "gap-(--cmp-expansionItem-title-gap)",
+                "pr-(--cmp-expansionItem-title-paddingX)",
+                depth === 2 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+64px)]" : "pl-(--cmp-expansionItem-title-paddingX)",
+                isExpanded && "bg-(--cmp-expansionItem-title-bg-expanded) text-(--cmp-expansionItem-title-text-expanded)"
               ),
               children: [
-                !leading && hasBody && /* @__PURE__ */ jsx(SIcon, { name: isExpanded ? "caretUp" : "caretDown", size: 12 }),
+                !leading && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
+                      isExpanded && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: 12 })
+                  }
+                ),
                 leadingNode,
                 /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("span", { children: title }) }),
                 trailing
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { id, hidden: !isExpanded, className: "bg-[var(--cmp-expansionItem-body-bg)]", children: /* @__PURE__ */ jsx("div", { className: bodyPadding ? "p-[var(--cmp-expansionItem-body-padding)]" : void 0, children }) })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id,
+              "aria-hidden": !isExpanded,
+              className: cn(
+                "grid overflow-hidden bg-[var(--cmp-expansionItem-body-bg)] transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+                isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "min-h-0 overflow-hidden",
+                    bodyPadding && isExpanded && "p-(--cmp-expansionItem-body-padding)"
+                  ),
+                  children
+                }
+              )
+            }
+          )
         ]
       }
     );
@@ -4282,7 +4312,7 @@ var STooltip = forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsx(Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
+    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -4749,7 +4779,7 @@ function SModalContainer({
             "div",
             {
               className: cn(
-                "relative overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
+                "relative flex max-h-[calc(100dvh-48px)] flex-col overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
                 shaking && "animate-modal-shake",
                 className
               ),
@@ -4841,8 +4871,8 @@ function SConfirmModal({
       showClose: true,
       onClose,
       className: "w-fit min-w-[520px]",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-[20px]", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-auto flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full min-h-0 flex-col items-center gap-[20px] overflow-y-auto", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[12px]", children: [
             iconName && /* @__PURE__ */ jsx(SIcon, { name: iconName, size: 32, color: TYPE_ICON_COLOR[type] }),
             /* @__PURE__ */ jsx(
@@ -4864,7 +4894,7 @@ function SConfirmModal({
             optionNode != null && optionNode
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-[8px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [
           subButtonLabel && /* @__PURE__ */ jsx(
             SButton,
             {
@@ -4917,8 +4947,8 @@ function SActionModal({
       showClose: true,
       width,
       height,
-      className: "w-fit min-w-[480px] min-h-[320px]",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[320px] flex-col", children: [
+      className: "w-fit min-w-[480px] min-h-[min(320px,calc(100dvh-48px))]",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-auto flex-col", children: [
         /* @__PURE__ */ jsx("header", { className: "flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] py-[var(--cmp-overlay-header-paddingY)] pl-[var(--cmp-overlay-header-paddingX)] pr-[calc(var(--cmp-overlay-header-paddingX)+20px)]", children: /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: modalTitle }) }),
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
         button && /* @__PURE__ */ jsx(
@@ -4984,7 +5014,7 @@ function SLoadingModal({
       ariaTitle: lines[0] || "\uB85C\uB529 \uC911",
       width,
       height,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-[20px] px-[32px]", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-auto flex-col overflow-y-auto px-[32px]", children: /* @__PURE__ */ jsxs("div", { className: "m-auto flex flex-col items-center gap-[20px]", children: [
         state2 === "loading" ? progress !== void 0 ? /* @__PURE__ */ jsx(SCircleProgress, { value: progress }) : /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true }) : /* @__PURE__ */ jsx(SIcon, { name: "warningOutline", size: 80, color: "var(--cmp-modal-confirm-negative-icon)" }),
         lines.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: lines.map((m, i) => /* @__PURE__ */ jsx(
           "p",
@@ -5007,7 +5037,7 @@ function SLoadingModal({
             label: buttonLabel ?? DEFAULT_BUTTON_LABEL[state2]
           }
         )
-      ] })
+      ] }) })
     }
   );
 }
@@ -5090,6 +5120,10 @@ var SModalRefImpl = class {
     this.root = root;
     this.host = host;
   }
+  /** @internal create 의 마운트 검사용 host 조회 */
+  _getHost() {
+    return this.host;
+  }
   /** @internal 닫힘 시작 표시 — 컴포넌트 버튼·백드롭·ESC 닫힘 경로가 호출(중복 트리거 방지) */
   _markDismissed() {
     this.dismissRequested = true;
@@ -5185,46 +5219,35 @@ function LoadingMount({ options, refImpl }) {
     }
   );
 }
+function warnIfNotModal(host, component) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV === "production") return;
+  if (!host || host.childElementCount === 0) return;
+  const name = component?.name || "component";
+  console.warn(
+    `[SModal.create] ${name} \uC774(\uAC00) \uBAA8\uB2EC\uC744 \uB744\uC6B0\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4. create \uB294 \uCEE8\uD14C\uC774\uB108\uB97C \uB367\uC50C\uC6B0\uC9C0 \uC54A\uC73C\uBBC0\uB85C component \uB294 \uB8E8\uD2B8\uC5D0 SActionModal \uC744 \uB80C\uB354\uD558\uACE0, \uC8FC\uC785\uBC1B\uC740 open/onOpenChange/onClose \uB97C \uADF8\uB300\uB85C \uC804\uB2EC\uD574\uC57C \uD569\uB2C8\uB2E4. \uD655\uC778/\uCDE8\uC18C\uB294 SModal.confirm, \uB85C\uB529\uC740 SModal.loading \uC744 \uC0AC\uC6A9\uD558\uC138\uC694.`
+  );
+}
 function CreateMount({ options, refImpl }) {
-  const {
-    component: Component,
-    componentProps,
-    persistent,
-    showClose,
-    width,
-    height,
-    className,
-    ariaTitle
-  } = options;
+  const { component: Component, componentProps } = options;
   const [open, setOpen] = useState(true);
   useEffect(() => {
     refImpl._bindClose(() => setOpen(false));
     refImpl._bindUpdate(() => {
     });
-  }, [refImpl]);
+    warnIfNotModal(refImpl._getHost(), Component);
+  }, [refImpl, Component]);
   useExitTeardown(open, refImpl);
   const componentAllProps = {
     ...componentProps,
+    open,
+    onOpenChange: (o) => {
+      if (!o) refImpl._markDismissed();
+      setOpen(o);
+    },
+    onClose: () => refImpl._emitClose(),
     modalRef: refImpl
   };
-  return /* @__PURE__ */ jsx(
-    SModalContainer,
-    {
-      open,
-      onOpenChange: (o) => {
-        if (!o) refImpl._markDismissed();
-        setOpen(o);
-      },
-      persistent,
-      showClose,
-      onClose: () => refImpl.close(),
-      ariaTitle,
-      width,
-      height,
-      className,
-      children: /* @__PURE__ */ jsx(Component, { ...componentAllProps })
-    }
-  );
+  return /* @__PURE__ */ jsx(Component, { ...componentAllProps });
 }
 function mount(render) {
   const host = document.createElement("div");
@@ -5248,8 +5271,9 @@ var SModal = {
     return mount((refImpl) => /* @__PURE__ */ jsx(LoadingMount, { options: { persistent: true, ...options }, refImpl }));
   },
   /**
-   * 커스텀 React 컴포넌트를 SModalContainer(딤+카드) 안에 띄운다. component 에 modalRef 가
-   * prop 으로 주입되어 컴포넌트가 ok()/cancel()/close()/submit()/onSubmit() 으로 자기 모달을 제어한다.
+   * SActionModal 을 루트로 렌더하는 컴포넌트를 띄운다. 컨테이너를 덧씌우지 않고 표시 제어
+   * (open/onOpenChange/onClose)와 modalRef 만 주입하며, 닫힘 애니메이션 종료 후 자동으로
+   * 언마운트한다. 컴포넌트가 모달을 띄우지 않으면 개발 모드에서 경고한다.
    */
   create(options) {
     return mount((refImpl) => /* @__PURE__ */ jsx(CreateMount, { options, refImpl }));
@@ -7725,7 +7749,7 @@ var STable = forwardRef(function STable2({
                                     rowBg,
                                     "group-hover:bg-[var(--color-grey-05)]",
                                     stickyShadowClass(i),
-                                    col.tdClass
+                                    typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
                                   ),
                                   style: {
                                     paddingLeft: cellPadX,
@@ -7782,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)" }
@@ -11803,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