sellmate-design-system-react 9.0.0-beta.9 → 9.0.0-beta.91

package/dist/components/SPieChart/SPieChart.d.ts

@@ -0,0 +1,73 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** 범례 위치. */
+export type SPieChartLegendPosition = 'top' | 'bottom';
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SPieChartPalette = 'multi' | 'gradation' | 'custom';
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SPieChartColor = 'positivePrimary' | 'positiveSecondary' | 'negativePrimary' | 'negativeSecondary' | 'neutralPrimary' | 'neutralSecondary';
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SPieChartSlice {
+    /** 범례·툴팁에 표시할 이름 */
+    name: string;
+    /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+    value: number;
+}
+/** 클릭이 가리키는 조각. */
+export interface SPieChartSlicePoint {
+    /** `data` 안에서의 인덱스 */
+    index: number;
+    name: string;
+    value: number;
+    /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+    ratio: number;
+}
+export interface SPieChartProps {
+    /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
+    data: SPieChartSlice[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
+    /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
+    palette?: SPieChartPalette;
+    /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
+    colors?: SPieChartColor[];
+    /** 조각 안에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
+    showValueLabel?: boolean;
+    /** 범례를 보인다 */
+    showLegend?: boolean;
+    /** 범례 위치 */
+    legendPosition?: SPieChartLegendPosition;
+    /** 조각에 마우스를 올리면 값 상자를 띄운다 */
+    showTooltip?: boolean;
+    /** 값 표시 형식 */
+    formatValue?: (value: number) => string;
+    /** 조각을 눌렀을 때 */
+    onSliceClick?: (slice: SPieChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SPieChartSlicePoint) => ReactNode;
+    /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SPieChart — 원그래프.
+ *
+ * **한 시점의 전체를 몇 개의 몫으로 나눈 것**을 보여줄 때 쓴다. 조각이 대여섯 개를 넘거나
+ * 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` 가 맞다 — 사람은 각도보다 길이를
+ * 훨씬 정확하게 견준다. 합계를 함께 강조하려면 `SDonutChart` 를 쓴다.
+ *
+ * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
+ */
+export declare const SPieChart: import("react").ForwardRefExoticComponent<SPieChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SPieChart, type SPieChartProps, type SPieChartSlice, type SPieChartSlicePoint, type SPieChartPalette, type SPieChartColor, type SPieChartLegendPosition, } from './SPieChart';

package/dist/components/SPopover/README.md

@@ -33,6 +33,21 @@
 | `onLeftLinkClick` | `() => void` | 하단 좌측 링크 클릭 |
 | `onButtonClick` | `() => void` | 하단 우측 버튼 클릭 |
 
+## Types
+
+### SPopoverPlacement
+
+```ts
+export type SPopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+```
+
+### SPopoverType
+
+```ts
+/** 색상 타입 — default: 다크 배경 / danger·warning·accent: 라이트 배경 (component.popover 토큰) */
+export type SPopoverType = 'default' | 'danger' | 'warning' | 'accent';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SPopup/README.md

@@ -10,10 +10,10 @@
 |------|------|---------|-------------|
 | `popupTitle?` | `string` | `''` | 헤더 제목 |
 | `type?` | `SPopupType` | `'default'` | 타입 (헤더 색상) |
-| `useFooter?` | `boolean` | `false` | 하단 footer 표시 여부 |
+| `showFooter?` | `boolean` | `false` | 하단 footer 표시 여부 |
 | `submitButton?` | `SPopupSubmitButton` | — | 확인 버튼 설정 |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 영역 |
-| `noPadding?` | `boolean` | `false` | 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. |
+| `padding?` | `SPopupBodyPadding` | `'default'` | 본문 안쪽 여백. 기본은 `default` — 표를 가장자리까지 채우는 등 본문이 여백을 직접 다룰 때만 `none`. (`SList` 의 `padding` 과 같은 이름이지만 기본값이 반대다 — 각 면의 성격이 다르다) |
 | `children?` | `ReactNode` | — | 본문 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -24,6 +24,30 @@
 |-------|------|-------------|
 | `onSubmit` | `() => void` | 확인 버튼 클릭 (sdSubmit) |
 
+## Types
+
+### SPopupType
+
+```ts
+export type SPopupType = 'default' | 'light';
+```
+
+### SPopupSubmitButton
+
+```ts
+/**
+ * 확인 버튼 설정 — `SButton` 의 prop 을 그대로 받되 `onClick` 만 뺀다.
+ * 클릭은 `onSubmit` 이 전담하므로, 여기로도 받으면 조용히 덮어써지는 prop 이 생긴다.
+ */
+export type SPopupSubmitButton = Omit<SFooterButton, 'onClick'>;
+```
+
+### SPopupBodyPadding
+
+```ts
+export type SPopupBodyPadding = 'default' | 'none';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SPopup/SPopup.d.ts

@@ -1,27 +1,30 @@
 import { type ReactNode, type CSSProperties } from 'react';
-import { type SButtonColor, type SButtonSize } from '../SButton';
+import { type SFooterButton } from '../SFooter';
 export type SPopupType = 'default' | 'light';
-export interface SPopupSubmitButton {
-    label?: string;
-    color?: SButtonColor;
-    outline?: boolean;
-    size?: SButtonSize;
-}
+export type SPopupBodyPadding = 'default' | 'none';
+/**
+ * 확인 버튼 설정 — `SButton` 의 prop 을 그대로 받되 `onClick` 만 뺀다.
+ * 클릭은 `onSubmit` 이 전담하므로, 여기로도 받으면 조용히 덮어써지는 prop 이 생긴다.
+ */
+export type SPopupSubmitButton = Omit<SFooterButton, 'onClick'>;
 export interface SPopupProps {
     /** 헤더 제목 */
     popupTitle?: string;
     /** 타입 (헤더 색상) */
     type?: SPopupType;
     /** 하단 footer 표시 여부 */
-    useFooter?: boolean;
+    showFooter?: boolean;
     /** 확인 버튼 설정 */
     submitButton?: SPopupSubmitButton;
     /** 확인 버튼 클릭 (sdSubmit) */
     onSubmit?: () => void;
     /** footer 좌측 영역 */
     footerLeft?: ReactNode;
-    /** 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. */
-    noPadding?: boolean;
+    /**
+     * 본문 안쪽 여백. 기본은 `default` — 표를 가장자리까지 채우는 등 본문이 여백을 직접
+     * 다룰 때만 `none`. (`SList` 의 `padding` 과 같은 이름이지만 기본값이 반대다 — 각 면의 성격이 다르다)
+     */
+    padding?: SPopupBodyPadding;
     /** 본문 */
     children?: ReactNode;
     className?: string;

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

@@ -1 +1 @@
-export { SPopup, type SPopupProps, type SPopupType, type SPopupSubmitButton } from './SPopup';
+export { SPopup, type SPopupBodyPadding, type SPopupProps, type SPopupType, type SPopupSubmitButton, } from './SPopup';

package/dist/components/SPortal/README.md

@@ -34,18 +34,38 @@
 | `onCloseAutoFocus` | `(event: Event) => void` | 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. |
 | `onPointerDownOutside` | `(event: Event) => void` | 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). |
 
+## Types
+
+### SPortalPlacement
+
+```ts
+export type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';
+```
+
+### SPortalAlign
+
+```ts
+export type SPortalAlign = 'start' | 'center' | 'end';
+```
+
 ## Dependencies
 
 ### Used by
 
+ - [SAccountListBox](../SAccountListBox)
  - [SChipInput](../SChipInput)
+ - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
  - [SSelect](../SSelect)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SAccountListBox --> SPortal
   SChipInput --> SPortal
+  SGnb --> SPortal
+  SGnbSystem --> SPortal
   SSelect --> SPortal
   style SPortal fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadio/README.md

@@ -42,6 +42,26 @@
 |-------|------|-------------|
 | `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
 
+## Types
+
+### SRadioOption
+
+```ts
+export interface SRadioOption {
+  /** 옵션 값 (sd-radio-group SRadioOption.value) */
+  value: SRadioValue;
+  label: string;
+  disabled?: boolean;
+}
+```
+
+### SRadioValue
+
+```ts
+/** 라디오 값 타입 (sd-radio SRadioValue) */
+export type SRadioValue = string | number | boolean;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SRadioButton/README.md

@@ -12,7 +12,9 @@
 | `value?` | `string \| number \| null` | — | 현재 선택 값 |
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼은 글자가 disabled 색이고 반투명하게 흐려진다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
 | `name?` | `string` | — | input name 속성 |
+| `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -22,16 +24,41 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string \| number) => void` | 변경 (sdUpdate) |
 
+## Types
+
+### SRadioButtonOption
+
+```ts
+export interface SRadioButtonOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  /** 호버 시 툴팁 문구. `showTooltip` 이 켜져 있을 때만 노출된다 */
+  tooltip?: string;
+}
+```
+
+### SRadioButtonSize
+
+```ts
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SChipFilter](../SChipFilter)
 
+### Depends on
+
+- [STooltip](../STooltip)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SRadioButton --> STooltip
   SChipFilter --> SRadioButton
   style SRadioButton fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadioButton/SRadioButton.d.ts

@@ -1,9 +1,11 @@
 import { type CSSProperties } from 'react';
-export type SRadioButtonSize = 'xs' | 'sm';
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
 export interface SRadioButtonOption {
     value: string | number;
     label: string;
     disabled?: boolean;
+    /** 호버 시 툴팁 문구. `showTooltip` 이 켜져 있을 때만 노출된다 */
+    tooltip?: string;
 }
 export interface SRadioButtonProps {
     /** 옵션 목록 */
@@ -14,8 +16,20 @@ export interface SRadioButtonProps {
     size?: SRadioButtonSize;
     /** 전체 비활성 */
     disabled?: boolean;
+    /**
+     * 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다.
+     * 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고
+     * 선택되지 않은 버튼은 글자가 disabled 색이고 반투명하게 흐려진다.
+     * 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다.
+     */
+    readOnly?: boolean;
     /** input name 속성 */
     name?: string;
+    /**
+     * 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다.
+     * 툴팁 타입은 `accent` 고정이다.
+     */
+    showTooltip?: boolean;
     /** 변경 (sdUpdate) */
     onValueChange?: (value: string | number) => void;
     className?: string;
@@ -23,6 +37,6 @@ export interface SRadioButtonProps {
 }
 /**
  * SRadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).
- * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.
+ * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled · readOnly.
  */
-export declare function SRadioButton({ options, value, size, disabled, name, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;
+export declare function SRadioButton({ options, value, size, disabled, readOnly, name, showTooltip, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;

package/dist/components/SRadioCard/README.md

@@ -0,0 +1,78 @@
+# SRadioCard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SRadioCardGroup
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options?` | `SRadioCardOption[]` | `[]` | 옵션 목록 |
+| `value?` | `SRadioValue \| null` | — | 현재 선택 값 |
+| `direction?` | `'vertical' \| 'horizontal'` | `'vertical'` | 배치 방향 |
+| `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `groupName?` | `string` | — | 라디오 name 속성 (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) |
+
+### SRadioCard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `val` | `SRadioValue` | — | 이 카드의 값 |
+| `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
+| `label` | `string` | — | 라벨 (첫 줄) |
+| `subtitle?` | `string` | — | 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 |
+| `tag?` | `Omit<STagProps, 'size'>` | — | 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
+
+## Types
+
+### SRadioCardOption
+
+```ts
+export interface SRadioCardOption {
+  /** 옵션 값 */
+  value: SRadioValue;
+  /** 라벨 (첫 줄) */
+  label: string;
+  /** 서브타이틀 (둘째 줄) */
+  subtitle?: string;
+  /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
+  tag?: Omit<STagProps, 'size'>;
+  /** 이 옵션만 비활성 */
+  disabled?: boolean;
+}
+```
+
+## Dependencies
+
+### Depends on
+
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SRadioCard --> STag
+  style SRadioCard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SRadioCard/SRadioCard.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+import { type SRadioValue } from '../SRadio';
+import { type STagProps } from '../STag';
+export interface SRadioCardProps {
+    /** 이 카드의 값 */
+    val: SRadioValue;
+    /** 그룹의 현재 선택 값 */
+    value?: SRadioValue | null;
+    /** 라벨 (첫 줄) */
+    label: string;
+    /** 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 */
+    subtitle?: string;
+    /** 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 */
+    tag?: Omit<STagProps, 'size'>;
+    /** 비활성 */
+    disabled?: boolean;
+    /** native radio name (form-agnostic 그룹핑) */
+    name?: string;
+    /** 선택 변경 (sdUpdate) — 선택된 val 전달 */
+    onValueChange?: (val: SRadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SRadioCard — 라디오 + 라벨 + 서브타이틀을 카드 한 장에 담은 선택지.
+ * 카드 전체가 클릭 영역이며 `value === val` 이면 선택 상태다.
+ * 선택지마다 설명이 붙어 한 줄짜리 `SRadio` 로는 담기 어려울 때 쓴다.
+ */
+export declare function SRadioCard({ val, value, label, subtitle, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;

package/dist/components/SRadioCard/SRadioCardGroup.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type SRadioValue } from '../SRadio';
+import { type STagProps } from '../STag';
+export interface SRadioCardOption {
+    /** 옵션 값 */
+    value: SRadioValue;
+    /** 라벨 (첫 줄) */
+    label: string;
+    /** 서브타이틀 (둘째 줄) */
+    subtitle?: string;
+    /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
+    tag?: Omit<STagProps, 'size'>;
+    /** 이 옵션만 비활성 */
+    disabled?: boolean;
+}
+export interface SRadioCardGroupProps {
+    /** 옵션 목록 */
+    options?: SRadioCardOption[];
+    /** 현재 선택 값 */
+    value?: SRadioValue | null;
+    /** 배치 방향 */
+    direction?: 'vertical' | 'horizontal';
+    /** 전체 비활성 */
+    disabled?: boolean;
+    /** 라디오 name 속성 (form-agnostic 그룹핑) */
+    groupName?: string;
+    /** 선택 변경 (sdUpdate) */
+    onValueChange?: (val: SRadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SRadioCardGroup — `options` 를 SRadioCard 로 렌더하고 카드 사이 간격을 맞춘다.
+ * 카드는 컨테이너 폭을 채우므로 horizontal 이면 카드들이 폭을 균등하게 나눠 갖는다.
+ */
+export declare function SRadioCardGroup({ options, value, direction, disabled, groupName, onValueChange, className, style, }: SRadioCardGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SRadioCard, type SRadioCardProps } from './SRadioCard';
+export { SRadioCardGroup, type SRadioCardGroupProps, type SRadioCardOption, } from './SRadioCardGroup';

package/dist/components/SScrollArea/README.md

@@ -13,4 +13,32 @@
 | `bordered?` | `boolean` | `false` | true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. |
 | `maxHeight?` | `string` | — | viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. |
 | `maxWidth?` | `string` | — | viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. |
+| `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 영역 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 스크롤이 생겨도 안쪽 콘텐츠 폭이 줄지 않는다. **막대는 스크롤하는 동안에만 보인다.** 멎으면 페이드로 사라진다 — 자리를 차지하지 않는 막대는 늘 떠 있을 이유도 없다. 끌고 있는 동안에는 사라지지 않는다. (`SPage` 의 같은 이름 prop 은 막대를 항상 보인다. 페이지는 스크롤이 늘 있는 자리라 "여기는 스크롤된다"는 신호를 남겨 둔 쪽이다.) **켜면 구조가 한 겹 늘어난다.** `className`·`style`·`maxHeight`·`maxWidth` 가 바깥 상자로 가고 스크롤 요소가 그 안을 채운다 — 막대를 얹을 기준 상자가 필요해서다. 크기·자리를 잡는 클래스(`h-*`·`flex-1`·`min-h-0`)는 그대로 듣지만, 패딩은 스크롤 요소가 아니라 바깥 상자에 걸리므로 콘텐츠가 그 여백 아래로 흘러 들어가지 않는다. `background`·`bordered` 는 네이티브 트랙을 꾸미는 값이라 이때 무시된다. |
 
+## Types
+
+### SScrollAreaAxis
+
+```ts
+export type SScrollAreaAxis = (typeof SCROLL_AREA_AXES)[number];
+```
+
+### SCROLL_AREA_AXES
+
+```ts
+export const SCROLL_AREA_AXES = ['vertical', 'horizontal', 'both'] as const;
+```
+
+## Dependencies
+
+### Used by
+
+ - [SCalendarBoard](../SCalendarBoard)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCalendarBoard --> SScrollArea
+  style SScrollArea fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SScrollArea/SScrollArea.d.ts

@@ -11,6 +11,23 @@ export interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     maxHeight?: string;
     /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */
     maxWidth?: string;
+    /**
+     * true면 네이티브 스크롤바를 숨기고 영역 위에 오버레이 스크롤바를 얹는다.
+     * 스크롤바가 레이아웃 폭을 차지하지 않아 스크롤이 생겨도 안쪽 콘텐츠 폭이 줄지 않는다.
+     *
+     * **막대는 스크롤하는 동안에만 보인다.** 멎으면 페이드로 사라진다 — 자리를 차지하지
+     * 않는 막대는 늘 떠 있을 이유도 없다. 끌고 있는 동안에는 사라지지 않는다.
+     * (`SPage` 의 같은 이름 prop 은 막대를 항상 보인다. 페이지는 스크롤이 늘 있는 자리라
+     * "여기는 스크롤된다"는 신호를 남겨 둔 쪽이다.)
+     *
+     * **켜면 구조가 한 겹 늘어난다.** `className`·`style`·`maxHeight`·`maxWidth` 가 바깥
+     * 상자로 가고 스크롤 요소가 그 안을 채운다 — 막대를 얹을 기준 상자가 필요해서다.
+     * 크기·자리를 잡는 클래스(`h-*`·`flex-1`·`min-h-0`)는 그대로 듣지만, 패딩은 스크롤
+     * 요소가 아니라 바깥 상자에 걸리므로 콘텐츠가 그 여백 아래로 흘러 들어가지 않는다.
+     *
+     * `background`·`bordered` 는 네이티브 트랙을 꾸미는 값이라 이때 무시된다.
+     */
+    overlayScrollbar?: boolean;
 }
 /**
  * SScrollArea — sd-scroll-area 포팅.

package/dist/components/SSearchInput/README.md

@@ -13,10 +13,10 @@
 | `placeholder?` | `string` | `'결과 내 검색'` | 플레이스홀더 |
 | `clearable?` | `boolean` | `false` | 지우기 버튼 — 값이 있을 때만 나타난다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
-| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 미지정 시 부모 폭을 채운다 |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 미지정 시 부모 폭을 채운다. |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -29,8 +29,21 @@
 | `onChange` | `InputHTMLAttributes<HTMLInputElement>['onChange']` | 네이티브 onChange (form-agnostic 연동용, RHF 등) |
 | `onSearch` | `(value: string) => void` | 검색 실행 — Enter 키에서 현재 값과 함께 호출된다. 한글 조합 중의 Enter(IME 확정)는 검색으로 치지 않는다. |
 
+## Types
+
+### SSearchInputSize
+
+```ts
+export type SSearchInputSize = SFieldSize;
+```
+
 ## Dependencies
 
+### Used by
+
+ - [SChipFilter](../SChipFilter)
+ - [SSelect](../SSelect)
+
 ### Depends on
 
 - [SField](../SField)
@@ -44,5 +57,7 @@ graph TD;
   SSearchInput --> SField
   SSearchInput --> SGhostButton
   SSearchInput --> SIcon
+  SChipFilter --> SSearchInput
+  SSelect --> SSearchInput
   style SSearchInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SSearchInput/SSearchInput.d.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties, type InputHTMLAttributes } from 'react';
 import { type SFieldSize } from '../SField';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SSearchInputSize = SFieldSize;
 export interface SSearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type' | 'prefix' | 'suffix'> {
     /** 값 (제어) */
@@ -21,14 +22,19 @@ export interface SSearchInputProps extends Omit<InputHTMLAttributes<HTMLInputEle
     clearable?: boolean;
     /** 비활성 */
     disabled?: boolean;
-    /** 컨트롤 너비 (숫자=px). 미지정 시 부모 폭을 채운다 */
-    width?: number | string;
-    /** 포커스 상태 (제어/반영) */
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     * 미지정 시 부모 폭을 채운다.
+     */
+    width?: SFieldWidth;
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
-    /** 호버 상태 (제어/반영) */
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 내부 input 요소 className */
-    inputClass?: string;
+    inputClassName?: string;
     /** 내부 input 요소 style */
     inputStyle?: CSSProperties;
     className?: string;