sellmate-design-system-react 9.0.0-beta.77 → 9.0.0-beta.78

package/AGENTS.md

@@ -670,6 +670,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | **상태·분류를 라벨로 표시 (기본값)** | **`STag`** — `<STag size="sm" color="..." label="판매중" />`. 목록의 상태 컬럼, 상세의 분류 태그 등 대부분이 여기 해당한다 |
 | 라벨 없이 **색 점만**으로 상태를 찍을 때 | `SBadge` — 점(dot)만 그리는 인디케이터. 텍스트가 이미 있고 앞에 점만 붙이는 좁은 경우에만 |
 | 사용자가 입력·삭제·편집하는 **토큰** | `SChip` (단독) / `SChipInput` (입력 필드 안에서) |
+| 목록에서 **여러 개 고른 값**을 칩으로 보여주고 하나씩 빼게 할 때 | `SSelect` `type="multi"` + `valueDisplay="chip"` (§3-7-2) — `SChip` 을 따로 나열하지 않는다 |
 
 > 상태 표시는 **`STag size="sm"` 이 기본**이다. 색 점 + 텍스트 조합(`SBadge`)을 기본으로 쓰지 않는다.
 
@@ -1752,6 +1753,14 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
+##### 여러 개 고른 값을 칩으로 보여줄 때 — `valueDisplay="chip"`
+
+- **`type="multi"`·`"multi_depth"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
+- **후보가 정해진 목록에서 고르는 것이면 `SSelect` 의 `chip` 이고, 사용자가 값을 직접 타이핑해 쌓는 것이면 `SChipInput` 이다.** 목록에서 고른 값을 `SChipInput` 에 옮겨 담거나, `SSelect` 옆에 `SChip` 을 따로 나열해 선택값을 흉내 내지 않는다.
+- **단일 선택 type 에는 주지 않는다.** 무시되고 `text` 로 보인다. 단일 선택의 값 비우기는 `clearable` 이 맡는다.
+- 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. 높이·칩 간격은 `SSelect` 가 토큰으로 넣는다 — 직접 주지 않는다.
+- 전체 선택이면 칩 대신 `allSelectedLabel` 이 뜬다. 비활성 옵션의 칩과 비활성 셀렉트의 칩에는 × 가 없다.
+
 ##### 옵션을 서버에서 받는 동안 — `loading`
 
 - **받는 동안 `loading` 을 켠다.** 트리거의 펼침 아이콘 자리에 스피너가, 드롭다운에 로딩 행이 뜬다. 첫 조회든 다음 페이지든 같은 prop 이다.

package/dist/components/SSelect/README.md

@@ -13,6 +13,7 @@
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
 | `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
+| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
 | `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
 | `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
@@ -43,6 +44,7 @@
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다. |
+| `size?` | `SFieldSize` | `'sm'` | 트리거 크기 (기본값 `'sm'`). 높이·패딩·간격·글자 크기를 `--cmp-select-{size}-*` 토큰으로 바꾼다. 드롭다운 목록은 크기와 무관하게 같다. `valueDisplay="chip"` 이면 `md` 는 SChip 과 같은 칩을, `sm` 은 28px 트리거에 맞춘 낮은 칩을 낸다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -95,6 +97,13 @@ export interface SSelectOption {
 export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
 ```
 
+### SSelectValueDisplay
+
+```ts
+/** 트리거에 선택값을 보여주는 방식 — 쉼표로 이은 텍스트 | 값마다 칩 */
+export type SSelectValueDisplay = 'text' | 'chip';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SSelect/SSelect.d.ts

@@ -1,12 +1,12 @@
 import { type CSSProperties, type ForwardedRef, type ReactElement } from 'react';
 import { type Rule } from '../../lib/form';
-import { type SFieldAddonAlign, type SFieldLabelPosition } from '../SField';
+import { type SFieldAddonAlign, type SFieldLabelPosition, type SFieldSize } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type STooltipProps } from '../STooltip';
-import { type SSelectOption, type SSelectType } from './select.config';
+import { type SSelectOption, type SSelectType, type SSelectValueDisplay } from './select.config';
 import { type SFieldWidth } from '../../lib/field-width';
-export type { SSelectOption, SSelectType } from './select.config';
+export type { SSelectOption, SSelectType, SSelectValueDisplay } from './select.config';
 export interface SSelectHandle {
     /** 트리거 버튼에 포커스 (sdFocus) */
     focus: () => void;
@@ -44,6 +44,17 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
     options?: SSelectOption[];
     /** 타입: default | multi | default_depth | multi_depth */
     type?: SSelectType;
+    /**
+     * 트리거에 선택값을 보여주는 방식.
+     * - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다.
+     * - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다.
+     *   칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다.
+     *
+     * `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다.
+     * 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다.
+     * 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다.
+     */
+    valueDisplay?: SSelectValueDisplay;
     /** 검색 입력 사용 */
     showSearch?: boolean;
     /** 전체선택 옵션 사용 (multi 전용) */
@@ -158,6 +169,12 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
      * 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다.
      */
     width?: SFieldWidth;
+    /**
+     * 트리거 크기 (기본값 `'sm'`). 높이·패딩·간격·글자 크기를 `--cmp-select-{size}-*` 토큰으로 바꾼다.
+     * 드롭다운 목록은 크기와 무관하게 같다.
+     * `valueDisplay="chip"` 이면 `md` 는 SChip 과 같은 칩을, `sm` 은 28px 트리거에 맞춘 낮은 칩을 낸다.
+     */
+    size?: SFieldSize;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1 +1 @@
-export { SSelect, type SSelectHandle, type SSelectProps, type SSelectChangeValue, type SSelectOption, type SSelectType, } from './SSelect';
+export { SSelect, type SSelectHandle, type SSelectProps, type SSelectChangeValue, type SSelectOption, type SSelectType, type SSelectValueDisplay, } from './SSelect';

package/dist/components/SSelect/select.config.d.ts

@@ -5,6 +5,8 @@ export interface SSelectOption {
     children?: SSelectOption[];
 }
 export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+/** 트리거에 선택값을 보여주는 방식 — 쉼표로 이은 텍스트 | 값마다 칩 */
+export type SSelectValueDisplay = 'text' | 'chip';
 export interface FlatOption {
     value: string;
     label: string;

package/dist/components/STooltip/README.md

@@ -68,6 +68,7 @@ export type STooltipType = 'default' | 'danger' | 'warning' | 'accent';
  - [SField](../SField)
  - [SGnbSystem](../SGnbSystem)
  - [SKeyValueTable](../SKeyValueTable)
+ - [SRadioButton](../SRadioButton)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SStepper](../SStepper)
  - [STable](../STable)
@@ -87,6 +88,7 @@ graph TD;
   SField --> STooltip
   SGnbSystem --> STooltip
   SKeyValueTable --> STooltip
+  SRadioButton --> STooltip
   SSectionHeaderCard --> STooltip
   SStepper --> STooltip
   STable --> STooltip

package/dist/index.cjs

@@ -15615,6 +15615,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   name,
   options = [],
   type = "default",
+  valueDisplay = "text",
   showSearch = false,
   showSelectAll = false,
   allSelectedLabel = "\uC804\uCCB4",
@@ -15647,6 +15648,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   hint,
   errorMessage,
   width,
+  size = "sm",
   className,
   style
 }, ref) {
@@ -15951,6 +15953,16 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     }
     return labelByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.label ?? selected[0];
   })();
+  const showChips = valueDisplay === "chip" && multi && selected.length > 0 && !allSelected;
+  const disabledValues = react.useMemo(
+    () => new Set(flat.filter((o) => !o.isGroup && o.disabled).map((o) => o.value)),
+    [flat]
+  );
+  const chips = showChips ? selected.map((v) => ({
+    value: v,
+    label: labelByValue.get(v) ?? valueOptions.get(v)?.label ?? v,
+    removable: !effectiveDisabled && !disabledValues.has(v)
+  })) : [];
   const isPlaceholder = selected.length === 0;
   const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
@@ -15958,6 +15970,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     emit3([]);
     if (rules && rules.length > 0) setRuleError(runRules(multi ? [] : "", rules));
   };
+  const handleRemoveChip = (target) => {
+    const next = selected.filter((v) => v !== target);
+    emit3(next);
+    if (rules && rules.length > 0) setRuleError(runRules(next, rules));
+    triggerRef.current?.focus();
+  };
   const handleSelect = (nextValue, index, extend = false) => {
     if (multi) {
       const anchor = rangeAnchorRef.current;
@@ -16113,6 +16131,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       disabled: effectiveDisabled,
       width,
+      size,
+      multiline: showChips,
       className,
       style,
       children: [
@@ -16130,55 +16150,59 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             "aria-busy": showTriggerSpinner || void 0,
             onClick: () => requestOpen(!open),
             onKeyDown: handleKeyDown,
-            className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+            className: cn(
+              "flex h-full w-full cursor-pointer items-center justify-between bg-transparent text-left outline-none disabled:cursor-not-allowed",
+              size === "md" ? "typo-body-md-default gap-(--cmp-select-md-gap) px-(--cmp-select-md-paddingX)" : "typo-body-sm-default gap-(--cmp-select-sm-gap) px-(--cmp-select-sm-paddingX)"
+            ),
             style: {
+              // 칩 한 줄이 기본 높이 안에서 세로 가운데에 오는 여백. 줄이 늘면 같은 여백을 유지한 채 트리거가 커진다.
+              // sm 칩은 높이가 라벨 줄높이(typo-body-xs-medium)라 남는 높이가 4px 로 떨어진다.
+              paddingBlock: showChips ? size === "md" ? "calc((var(--cmp-select-md-height) - var(--cmp-select-md-borderWidth) * 2 - var(--cmp-chip-height)) / 2)" : "var(--spacing-sd-4)" : void 0,
               color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
             },
             children: [
-              isHtmlLabel(triggerText) ? /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "truncate",
-                  dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(triggerText) }
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: triggerText }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
-                showClear && /* @__PURE__ */ jsxRuntime.jsxs(
+              showChips ? (
+                // md 는 SChip 과 같은 모양(높이 --cmp-chip-height)이다. SChip 을 그대로 넣지 않는 것은
+                // SChip 의 × 가 <button> 이라 트리거 button 안에 중첩할 수 없어서다 — 모양만 같은 토큰으로 맞춘다.
+                // sm 은 28px 트리거에 들어가도록 낮춘 칩 — 높이를 주지 않고 라벨 줄높이(typo-body-xs-medium)가 정한다.
+                // 두 크기 모두 패딩·라벨↔× 간격은 chip 토큰 그대로.
+                /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    role: "button",
-                    tabIndex: 0,
-                    "aria-label": "\uC120\uD0DD \uC9C0\uC6B0\uAE30",
-                    className: "group/select-clear relative inline-flex shrink-0 cursor-pointer items-center justify-center",
-                    style: {
-                      width: "var(--cmp-ghostButton-xxs-size)",
-                      height: "var(--cmp-ghostButton-xxs-size)",
-                      borderRadius: "var(--cmp-ghostButton-radius-sm)"
-                    },
-                    onClick: (event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      handleClear();
-                    },
-                    onKeyDown: (event) => {
-                      if (event.key !== "Enter" && event.key !== " ") return;
-                      event.preventDefault();
-                      event.stopPropagation();
-                      handleClear();
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "aria-hidden": true,
-                          className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/select-clear:opacity-5",
-                          style: { background: "var(--cmp-ghostButton-default-hover-bg)" }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
-                    ]
+                    className: cn(
+                      "flex min-w-0 flex-1 flex-wrap items-center",
+                      size === "md" ? "gap-(--cmp-chipInput-chip-gap)" : "gap-sd-6"
+                    ),
+                    children: chips.map((chip) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "box-border inline-flex min-w-0 max-w-full items-center gap-(--cmp-chip-gap) overflow-hidden whitespace-nowrap px-(--cmp-chip-paddingX)",
+                          size === "md" ? "h-(--cmp-chip-height) text-[12px] font-medium leading-[20px]" : "typo-body-xs-medium"
+                        ),
+                        style: {
+                          borderRadius: "var(--cmp-chip-radius)",
+                          background: chip.removable ? "var(--cmp-chip-bg-default)" : "var(--cmp-chip-bg-disabled)",
+                          color: chip.removable ? "var(--cmp-chip-content-default)" : "var(--cmp-chip-content-disabled)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(TriggerLabel, { label: chip.label }),
+                          chip.removable && /* @__PURE__ */ jsxRuntime.jsx(
+                            TriggerRemoveButton,
+                            {
+                              ariaLabel: `${isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label} \uC120\uD0DD \uD574\uC81C`,
+                              onRemove: () => handleRemoveChip(chip.value)
+                            }
+                          )
+                        ]
+                      },
+                      chip.value
+                    ))
                   }
-                ),
+                )
+              ) : /* @__PURE__ */ jsxRuntime.jsx(TriggerLabel, { label: triggerText }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
+                showClear && /* @__PURE__ */ jsxRuntime.jsx(TriggerRemoveButton, { ariaLabel: "\uC120\uD0DD \uC9C0\uC6B0\uAE30", onRemove: handleClear }),
                 showTriggerSpinner ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsxRuntime.jsx(
                   SIcon,
                   {
@@ -16510,6 +16534,47 @@ function ItemList({
     bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
+function TriggerLabel({ label }) {
+  return isHtmlLabel(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label });
+}
+function TriggerRemoveButton({ ariaLabel, onRemove }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      className: "group/select-remove relative inline-flex shrink-0 cursor-pointer items-center justify-center",
+      style: {
+        width: "var(--cmp-ghostButton-xxs-size)",
+        height: "var(--cmp-ghostButton-xxs-size)",
+        borderRadius: "var(--cmp-ghostButton-radius-sm)"
+      },
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onRemove();
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        event.stopPropagation();
+        onRemove();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/select-remove:opacity-5",
+            style: { background: "var(--cmp-ghostButton-default-hover-bg)" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+      ]
+    }
+  );
+}
 function CheckboxBox({
   state: state2,
   disabled = false,
@@ -22573,71 +22638,76 @@ function SRadioButton({
 }) {
   const s = SIZE_CONFIG2[size];
   const [hoveredValue, setHoveredValue] = react.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "radiogroup",
-      "aria-disabled": disabled,
-      className: cn("inline-flex", className),
-      style,
-      children: options.map((o, i) => {
-        const selected = o.value === value;
-        const od = disabled || o.disabled;
-        const first = i === 0;
-        const last = i === options.length - 1;
-        const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
-        const button = /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            name,
-            "aria-checked": selected,
-            disabled: od,
-            onClick: () => !od && !selected && onValueChange?.(o.value),
-            onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
-            onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
-            onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
-            onBlur: tooltip ? () => setHoveredValue(null) : void 0,
-            className: cn(
-              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
-              first ? "" : "-ml-px",
-              selected ? "z-10" : "",
-              !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
-              od ? "cursor-not-allowed" : "cursor-pointer"
-            ),
-            style: {
-              height: `var(--cmp-radioButton-${size}-height)`,
-              padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
-              fontSize: `${s.fontSize}px`,
-              lineHeight: `${s.lineHeight}px`,
-              borderRadius: [
-                first ? s.radius : "0",
-                last ? s.radius : "0",
-                last ? s.radius : "0",
-                first ? s.radius : "0"
-              ].join(" "),
-              background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
-              borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
-              color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+  return (
+    // isolate: 선택·hover 버튼의 z-10 은 겹친 테두리(-ml-px) 위로 올리기 위한 값이라 그룹 안에서
+    // 끝나야 한다. 빼면 상위 컨텍스트까지 올라가 모달 안 floating 밴드(z-2)를 이겨, 위에서 연
+    // SSelect listbox 위로 선택된 버튼만 뚫고 그려진다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-disabled": disabled,
+        className: cn("inline-flex isolate", className),
+        style,
+        children: options.map((o, i) => {
+          const selected = o.value === value;
+          const od = disabled || o.disabled;
+          const first = i === 0;
+          const last = i === options.length - 1;
+          const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
+          const button = /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              name,
+              "aria-checked": selected,
+              disabled: od,
+              onClick: () => !od && !selected && onValueChange?.(o.value),
+              onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
+              onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
+              onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
+              onBlur: tooltip ? () => setHoveredValue(null) : void 0,
+              className: cn(
+                "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
+                first ? "" : "-ml-px",
+                selected ? "z-10" : "",
+                !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
+                od ? "cursor-not-allowed" : "cursor-pointer"
+              ),
+              style: {
+                height: `var(--cmp-radioButton-${size}-height)`,
+                padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
+                fontSize: `${s.fontSize}px`,
+                lineHeight: `${s.lineHeight}px`,
+                borderRadius: [
+                  first ? s.radius : "0",
+                  last ? s.radius : "0",
+                  last ? s.radius : "0",
+                  first ? s.radius : "0"
+                ].join(" "),
+                background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
+                borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
+                color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+              },
+              children: o.label
             },
-            children: o.label
-          },
-          o.value
-        );
-        return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
-          STooltip2,
-          {
-            trigger: "none",
-            open: hoveredValue === o.value,
-            tooltipType: "accent",
-            message: [tooltip],
-            children: button
-          },
-          o.value
-        ) : button;
-      })
-    }
+            o.value
+          );
+          return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+            STooltip2,
+            {
+              trigger: "none",
+              open: hoveredValue === o.value,
+              tooltipType: "accent",
+              message: [tooltip],
+              children: button
+            },
+            o.value
+          ) : button;
+        })
+      }
+    )
   );
 }
 function SRadioCard({