sellmate-design-system-react 2.1.0 → 2.1.2

package/dist/index.cjs

@@ -2946,7 +2946,7 @@ var SExpansionItem = react.forwardRef(
       {
         ref,
         className: cn(
-          "group/expansion-item overflow-hidden bg-[var(--cmp-expansionItem-title-bg-default)]",
+          "group/expansion-item overflow-hidden bg-[var(--cmp-listExpansionItem-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]",
@@ -2968,14 +2968,14 @@ var SExpansionItem = react.forwardRef(
                 onToggle?.(next, event);
               },
               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-(--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)"
+                "flex w-full items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-[var(--cmp-listExpansionItem-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-(--cmp-listExpansionItem-title-border)",
+                !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
+                dense ? "min-h-8 py-(--cmp-listExpansionItem-title-paddingY-dense)" : "min-h-10 py-(--cmp-listExpansionItem-title-paddingY-normal)",
+                "gap-(--cmp-listExpansionItem-title-gap)",
+                "pr-(--cmp-listExpansionItem-title-paddingX)",
+                depth === 2 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+64px)]" : "pl-(--cmp-listExpansionItem-title-paddingX)",
+                isExpanded && "bg-(--cmp-listExpansionItem-title-bg-expanded) text-(--cmp-listExpansionItem-title-text-expanded)"
               ),
               children: [
                 !leading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3000,7 +3000,7 @@ var SExpansionItem = react.forwardRef(
               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",
+                "grid overflow-hidden bg-[var(--cmp-listExpansionItem-body-bg)] transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
                 isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3008,7 +3008,7 @@ var SExpansionItem = react.forwardRef(
                 {
                   className: cn(
                     "min-h-0 overflow-hidden",
-                    bodyPadding && isExpanded && "p-(--cmp-expansionItem-body-padding)"
+                    bodyPadding && isExpanded && "p-(--cmp-listExpansionItem-body-padding)"
                   ),
                   children
                 }
@@ -4839,11 +4839,17 @@ function SModalContainer({
                 /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children }) })
               ]
             }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: setPortalContainer,
+              className: "pointer-events-auto fixed left-0 top-0 z-[1001]"
+            }
           )
         ]
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalContainer, className: "pointer-events-auto fixed left-0 top-0 z-[1001]" })
+    ) })
   ] }) });
 }
 var TYPE_ICON = {
@@ -4895,7 +4901,8 @@ function SConfirmModal({
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
   const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
   const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }) : null);
-  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || tagNode != null || optionNode != null;
+  const hasContentBox = tagNode != null || optionNode != null;
+  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || hasContentBox;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SModalContainer,
     {
@@ -4922,11 +4929,28 @@ function SConfirmModal({
             )
           ] }),
           hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)] w-full", children: [
-            topMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) }),
-            tagNode != null && // tag 위치 content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: tagNode }),
-            bottomMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) }),
-            optionNode != null && optionNode
+            topMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "m-0",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+              },
+              i
+            )) }),
+            hasContentBox && // content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
+            // tag 왼쪽, slotLabel/optionSlot 이 그 오른쪽에 gap 8 로 나란히 놓인다
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: [
+              tagNode,
+              optionNode
+            ] }),
+            bottomMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "m-0",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+              },
+              i
+            )) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [
@@ -6269,7 +6293,7 @@ var STEPPER_LAYOUT = {
   itemGap: V2("item-gap"),
   dashWidth: V2("dash-width"),
   sequenceRadius: V2("sequence-radius"),
-  sequenceBorderWidth: V2("sequence-border-witdh"),
+  sequenceBorderWidth: V2("sequence-border-width"),
   sequenceIcon: V2("sequence-icon")
 };
 var STEPPER_COLORS = {
@@ -6793,7 +6817,7 @@ var SSelect = react.forwardRef(function SSelect2({
     );
     onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
   };
-  const commitOpen = (next) => {
+  const commitOpen = (next, valueForRules) => {
     setOpen(next);
     onOpenChange?.(next);
     if (next) {
@@ -6802,7 +6826,8 @@ var SSelect = react.forwardRef(function SSelect2({
       setPendingOpen(false);
       setSearch("");
       if (rules && rules.length > 0) {
-        setRuleError(runRules(multi ? selectedRef.current : selectedRef.current[0] ?? "", rules));
+        const current = valueForRules ?? selectedRef.current;
+        setRuleError(runRules(multi ? current : current[0] ?? "", rules));
       }
     }
   };
@@ -6886,7 +6911,7 @@ var SSelect = react.forwardRef(function SSelect2({
       return;
     }
     emit2([nextValue]);
-    commitOpen(false);
+    commitOpen(false, [nextValue]);
   };
   const handleSelectAll = () => {
     emit2(allSelected ? [] : allValues);
@@ -7126,7 +7151,7 @@ var SSelect = react.forwardRef(function SSelect2({
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
                 ]
               }
             )
@@ -7154,10 +7179,10 @@ function ItemList({
   const selectedSet = react.useMemo(() => new Set(selected), [selected]);
   const itemBase = cn(
     "group/select-item flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
-    "text-[color:var(--cmp-listItem-content-default)]",
-    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listItem-content-disabled)]"
+    "text-[color:var(--cmp-listBoxItem-content-default)]",
+    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
-  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus-visible:bg-[var(--cmp-listItem-bg-hover)] focus-visible:text-[color:var(--cmp-listItem-content-hover)]";
+  const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -7167,7 +7192,7 @@ function ItemList({
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
           itemBase,
-          focusedValue === "__select_all__" && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+          focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
         onMouseEnter: () => onHoverValue("__select_all__"),
@@ -7184,7 +7209,7 @@ function ItemList({
       const rowKey = `${o.value}-${idx}`;
       if (o.isGroup) {
         const isDepth1 = o.depth === 1;
-        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium";
+        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)] bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium";
         if (multi) {
           const leafValues = groupLeafValues.get(idx) ?? [];
           const total = leafValues.length;
@@ -7202,12 +7227,12 @@ function ItemList({
               "data-select-focused": groupFocused ? "true" : void 0,
               "data-select-active": groupFocused ? "true" : void 0,
               className: cn(
-                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
                 groupTone,
-                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]" : "cursor-pointer",
-                groupDisabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]",
+                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
+                groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
                 // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
-                groupFocused && !groupDisabled && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+                groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
               ),
               style: { paddingLeft: padLeft },
               onMouseEnter: () => onHoverValue(`__group_${idx}__`),
@@ -7227,7 +7252,7 @@ function ItemList({
                   {
                     className: cn(
                       "shrink-0 font-medium",
-                      groupFocused ? "text-white" : "text-[color:var(--cmp-listItem-content-disabled)]"
+                      groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
                     ),
                     children: [
                       "(",
@@ -7247,12 +7272,12 @@ function ItemList({
           "div",
           {
             className: cn(
-              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
               // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
               // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
-              o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
+              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
+              o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
             ),
             style: { paddingLeft: padLeft },
             children: o.label
@@ -7272,8 +7297,8 @@ function ItemList({
           "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
             itemBase,
-            isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-            focusedValue === o.value && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]",
+            isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
+            focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
             // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
             // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
             !o.disabled && activeClass
@@ -10893,7 +10918,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
                             "aria-selected": selected || active,
                             className: cn(
                               "s-chip-input__suggestion-item flex shrink-0 cursor-pointer items-center gap-8 overflow-hidden text-ellipsis whitespace-nowrap px-12 py-4 text-12 leading-20",
-                              selected ? "cursor-default overflow-visible font-bold text-(--cmp-listItem-content-selected)" : active ? "bg-(--cmp-listItem-bg-hover) font-medium text-(--cmp-listItem-content-hover)" : "text-(--cmp-listItem-content-default)"
+                              selected ? "cursor-default overflow-visible font-bold text-(--cmp-listBoxItem-content-selected)" : active ? "bg-(--cmp-listBoxItem-bg-hover) font-medium text-(--cmp-listBoxItem-content-hover)" : "text-(--cmp-listBoxItem-content-default)"
                             ),
                             onMouseDown: (e) => {
                               e.preventDefault();
@@ -10901,7 +10926,14 @@ var SChipInput = react.forwardRef(function SChipInput2({
                             },
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item }),
-                              selected && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: 12, color: "var(--cmp-listItem-content-selected)" })
+                              selected && /* @__PURE__ */ jsxRuntime.jsx(
+                                SIcon,
+                                {
+                                  name: "check",
+                                  size: 12,
+                                  color: "var(--cmp-listBoxItem-content-selected)"
+                                }
+                              )
                             ]
                           },
                           item
@@ -11191,7 +11223,7 @@ function TimeSelector({
     setInputDraft({});
   };
   const inputStyle = {
-    width: "var(--cmp-timepicker-selector-input-width)",
+    width: "var(--cmp-timepicker-selector-time-input-width)",
     height: "var(--cmp-textinput-sm-height)",
     borderRadius: "var(--cmp-textinput-sm-radius)",
     border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
@@ -11632,7 +11664,7 @@ function RangeTimeSelector({
     setInputDraft({});
   };
   const inputStyle = {
-    width: "var(--cmp-timepicker-selector-input-width)",
+    width: "var(--cmp-timepicker-selector-time-input-width)",
     height: "var(--cmp-textinput-sm-height)",
     borderRadius: "var(--cmp-textinput-sm-radius)",
     border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",