sellmate-design-system-react 9.0.0-beta.10 → 9.0.0-beta.12

package/dist/components/SNumberInput/README.md

@@ -52,6 +52,14 @@
 | `onFocus` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 포커스 이벤트 (sdFocus) |
 | `onBlur` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 블러 이벤트 (sdBlur) |
 
+## Types
+
+### SNumberInputSize
+
+```ts
+export type SNumberInputSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SPage/README.md

@@ -32,6 +32,44 @@
 | `contentHeight?` | `SPageContentHeight` | `'auto'` | 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다. `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로 `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />` 구성이 성립한다. `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다. |
 | `header?` | `SPageHeaderProps` | — | 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다. `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다. |
 
+## Types
+
+### SPageBackground
+
+```ts
+export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
+```
+
+### SPageContentHeight
+
+```ts
+export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];
+```
+
+### PAGE_BACKGROUNDS
+
+```ts
+/**
+ * 페이지 배경 — 표면의 역할로 이름을 붙인다(리터럴 색이 아니다).
+ * - frame:   콘텐츠를 얹는 흰 표면 (sys.color.bg.frame)
+ * - neutral: 한 단계 눌러앉은 회색 표면 (sys.color.bg.neutralLight)
+ * - screen:  카드·패널이 떠 있는 앱 바탕 (sys.color.bg.screen)
+ */
+export const PAGE_BACKGROUNDS = ['frame', 'neutral', 'screen'] as const;
+```
+
+### PAGE_CONTENT_HEIGHTS
+
+```ts
+/**
+ * 본문 높이 모드 — 페이지가 스크롤할지, 본문이 남은 높이를 채울지.
+ * - auto: 콘텐츠가 흐르고, 넘치면 페이지가 스크롤한다
+ * - fill: 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다.
+ *         표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용.
+ */
+export const PAGE_CONTENT_HEIGHTS = ['auto', 'fill'] as const;
+```
+
 ## Dependencies
 
 ### Depends on

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

@@ -24,6 +24,25 @@
 |-------|------|-------------|
 | `onSubmit` | `() => void` | 확인 버튼 클릭 (sdSubmit) |
 
+## Types
+
+### SPopupType
+
+```ts
+export type SPopupType = 'default' | 'light';
+```
+
+### SPopupSubmitButton
+
+```ts
+export interface SPopupSubmitButton {
+  label?: string;
+  color?: SButtonColor;
+  outline?: boolean;
+  size?: SButtonSize;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SPortal/README.md

@@ -34,6 +34,20 @@
 | `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

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

@@ -22,6 +22,24 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string \| number) => void` | 변경 (sdUpdate) |
 
+## Types
+
+### SRadioButtonOption
+
+```ts
+export interface SRadioButtonOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+```
+
+### SRadioButtonSize
+
+```ts
+export type SRadioButtonSize = 'xs' | 'sm';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SScrollArea/README.md

@@ -14,3 +14,17 @@
 | `maxHeight?` | `string` | — | viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. |
 | `maxWidth?` | `string` | — | viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. |
 
+## 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;
+```
+

package/dist/components/SSearchInput/README.md

@@ -29,8 +29,20 @@
 | `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
+
+ - [SSelect](../SSelect)
+
 ### Depends on
 
 - [SField](../SField)
@@ -44,5 +56,6 @@ graph TD;
   SSearchInput --> SField
   SSearchInput --> SGhostButton
   SSearchInput --> SIcon
+  SSelect --> SSearchInput
   style SSearchInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SSectionHeaderCard/README.md

@@ -21,6 +21,38 @@
 | `background?` | `SSectionHeaderCardBodyBackground` | — | 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다. `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이 **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며, **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어 흰 바탕에서도 경계가 읽힌다. 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다), 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다). |
 | `children?` | `SSectionHeaderCardChildren` | — | 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. |
 
+## Types
+
+### SSectionHeaderCardTitleSize
+
+```ts
+export type SSectionHeaderCardTitleSize = 'xs' | 'sm';
+```
+
+### SSectionHeaderCardThickness
+
+```ts
+export type SSectionHeaderCardThickness = false | 'default' | 'accent';
+```
+
+### SSectionHeaderCardBodyPadding
+
+```ts
+export type SSectionHeaderCardBodyPadding = 'default' | 'wide' | 'none';
+```
+
+### SSectionHeaderCardBodyBackground
+
+```ts
+export type SSectionHeaderCardBodyBackground = 'frame' | 'neutral';
+```
+
+### SSectionHeaderCardChildren
+
+```ts
+export type SSectionHeaderCardChildren = ReactNode;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SSelect/README.md

@@ -51,6 +51,25 @@
 | `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
+## Types
+
+### SSelectOption
+
+```ts
+export interface SSelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  children?: SSelectOption[];
+}
+```
+
+### SSelectType
+
+```ts
+export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+```
+
 ## Dependencies
 
 ### Used by
@@ -62,18 +81,18 @@
 ### Depends on
 
 - [SField](../SField)
-- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
+- [SSearchInput](../SSearchInput)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SSelect --> SField
-  SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
+  SSelect --> SSearchInput
   SChipFilter --> SSelect
   SKeyValueTable --> SSelect
   STable --> SSelect

package/dist/components/SSplitter/README.md

@@ -25,3 +25,18 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
 
+## Types
+
+### SSplitterUnit
+
+```ts
+/** 모델·limits 를 읽는 단위. Quasar QSplitter 의 `unit` 과 같다. */
+export type SSplitterUnit = (typeof SSPLITTER_UNITS)[number];
+```
+
+### SSPLITTER_UNITS
+
+```ts
+export const SSPLITTER_UNITS = ['%', 'px'] as const;
+```
+

package/dist/components/SStepper/README.md

@@ -30,6 +30,32 @@
 | `showItemTooltip` | `() => void` | error 아이템 중 첫 번째에 툴팁을 연다. error 아이템이 없으면 아무 일도 일어나지 않는다. |
 | `hideItemTooltip` | `() => void` | 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. |
 
+## Types
+
+### SStepperItem
+
+```ts
+export type SStepperItem = {
+  label: string;
+  value?: string;
+  group?: string;
+  completed?: boolean;
+  error?: boolean;
+};
+```
+
+### SStepperSize
+
+```ts
+export type SStepperSize = (typeof STEPPER_SIZES)[number];
+```
+
+### STEPPER_SIZES
+
+```ts
+export const STEPPER_SIZES = ['sm', 'lg'] as const;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/STable/README.md

@@ -60,6 +60,109 @@
 | `updateRowSelect` | `(row: SRow) => void` | 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 |
 | `toggleSelectAll` | `(checked: boolean, rows: SRow[]) => void` | 주어진 행들 전체 선택/해제 (sd-table toggleSelectAll) — onSelectedChange 발생 |
 
+## Types
+
+### STableColumn
+
+```ts
+export interface STableColumn {
+  name: string;
+  label: string;
+  /** 값 접근: 필드명 또는 접근 함수 */
+  field: string | ((row: SRow) => any);
+  align?: 'left' | 'center' | 'right';
+  width?: string;
+  /** 고정폭 없이 자동 너비 (sticky/resize 계산에서 제외) */
+  autoWidth?: boolean;
+  /** 리사이즈 최소/최대 너비 (px) */
+  minWidth?: number;
+  maxWidth?: number;
+  /** 표시 포맷 */
+  format?: (value: any, row: SRow) => string;
+  visible?: boolean;
+  icon?: SIconName;
+  /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
+  iconColor?: SColor;
+  /**
+   * 셀에 무엇이 들어가는지. 좌우 여백이 여기서 갈린다 — 기본은 `text`(넓게).
+   *
+   * 자기 폭을 가진 컨트롤(`SInput`·`SNumberInput`·`SSelect` 등)이 들어가는 열은 `control` 로 준다.
+   * 텍스트와 같은 넓은 여백을 두면 컨트롤이 쓸 폭이 그만큼 줄어 같은 열 폭에서도 좁아 보인다.
+   *
+   * `SKeyValueTable` 은 `field.type` 으로 이 판정을 스스로 하지만, `STable` 의 셀은 소비 앱이 넘긴
+   * 임의의 `render` 결과라 컴포넌트가 알 수 없다. 그래서 열 단위로 받는다.
+   */
+  contentType?: 'text' | 'control';
+  /** 셀 커스텀 렌더 (React 확장) — `<td>` 안쪽 내용만 교체한다 */
+  render?: (row: SRow, value: any) => ReactNode;
+  /**
+   * 셀(`<td>`) 자체를 커스텀 렌더 (React 확장). 반환한 엘리먼트가 그대로 `<td>`가 되므로
+   * `colSpan` / `rowSpan`을 직접 지정할 수 있다. `render`보다 우선한다.
+   *
+   * - `ctx.className` / `ctx.style`을 그대로 펼쳐야 구분선·정렬·sticky 등 기본 스타일이 유지된다.
+   * - `null`(또는 `false`)을 반환하면 그 자리에는 `<td>`를 만들지 않는다.
+   *   다른 셀의 `colSpan` / `rowSpan`에 덮이는 자리를 이렇게 비운다.
+   * - 병합은 sticky 컬럼(인덱스 기준 offset 계산)과 함께 쓰지 않는 것을 전제로 한다.
+   *   `rowSpan`은 행을 잘라 쓰는 가상 스크롤 / 내부 페이지네이션과 경계에서 어긋날 수 있다.
+   */
+  renderCell?: (ctx: STableCellContext) => ReactNode;
+  /** 헤더 셀 커스텀 렌더 (React 확장) */
+  renderHeader?: (column: STableColumn, index: number) => ReactNode;
+  /** 본문 셀 커스텀 클래스. 함수를 주면 행마다 다른 클래스를 반환할 수 있다 */
+  tdClass?: string | ((row: SRow) => string | undefined);
+  /** 헤더 셀 커스텀 클래스/스타일 (sd-table thClass/thStyle) */
+  thClass?: string;
+  thStyle?: CSSProperties;
+}
+```
+
+### SRow
+
+```ts
+export type SRow = Record<string, any>;
+```
+
+### STableStickyColumn
+
+```ts
+export interface STableStickyColumn {
+  left?: number;
+  right?: number;
+}
+```
+
+### STablePagination
+
+```ts
+export interface STablePagination {
+  page: number;
+  rowsPerPage: number;
+  lastPage?: number;
+}
+```
+
+### STableCellContext
+
+```ts
+/** `STableColumn.renderCell`에 전달되는 컨텍스트 */
+export interface STableCellContext {
+  row: SRow;
+  /** `field` + `format`이 적용된 표시 값 */
+  value: any;
+  column: STableColumn;
+  /** 보이는 컬럼 기준 인덱스 */
+  colIndex: number;
+  /** 현재 렌더 중인 행 목록 기준 인덱스 (페이지/가상 스크롤 윈도우 기준) */
+  rowIndex: number;
+  /** 행 선택 여부 */
+  isSelected: boolean;
+  /** STable이 이 셀에 적용하려던 클래스 (구분선·말줄임·sticky 그림자 포함) */
+  className: string;
+  /** STable이 이 셀에 적용하려던 스타일 (패딩·정렬·폭·sticky offset 포함) */
+  style: CSSProperties;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/STabs/README.md

@@ -21,6 +21,18 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string) => void` | 탭 변경 (sdUpdate) |
 
+## Types
+
+### STabOption
+
+```ts
+export interface STabOption {
+  label: string;
+  value: string;
+  badge?: string | number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/STag/README.md

@@ -16,6 +16,53 @@
 | `iconLeft?` | `boolean` | `true` | 아이콘을 레이블 왼쪽에 배치 |
 | `width?` | `string \| number` | — | 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기 |
 
+## Types
+
+### STagShape
+
+```ts
+export type STagShape = (typeof TAG_SHAPES)[number];
+```
+
+### STagSize
+
+```ts
+export type STagSize = (typeof TAG_SIZES)[number];
+```
+
+### STagColor
+
+```ts
+export type STagColor = (typeof TAG_COLORS)[number];
+```
+
+### TAG_SHAPES
+
+```ts
+export const TAG_SHAPES = ['square', 'pill'] as const;
+```
+
+### TAG_SIZES
+
+```ts
+export const TAG_SIZES = ['xs', 'sm', 'md'] as const;
+```
+
+### TAG_COLORS
+
+```ts
+export const TAG_COLORS = [
+  'grey',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'darkblue',
+  'indigo',
+] as const;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/STextLink/README.md

@@ -24,6 +24,20 @@
 |-------|------|-------------|
 | `onClick` | `() => void` |  |
 
+## Types
+
+### STextLinkArrow
+
+```ts
+export type STextLinkArrow = 'none' | 'chevron' | 'caret';
+```
+
+### STextLinkSize
+
+```ts
+export type STextLinkSize = 'sm' | 'md' | 'lg';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/STimePicker/README.md

@@ -41,6 +41,20 @@
 | `onValueChange` | `(time: string \| null) => void` | 선택 변경 (sdUpdate) |
 | `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
 
+## Types
+
+### STimePickerType
+
+```ts
+export type STimePickerType = 'default' | 'midday';
+```
+
+### STimePickerSize
+
+```ts
+export type STimePickerSize = 'sm' | 'md';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/STimeRangePicker/README.md

@@ -42,6 +42,32 @@
 | `onValueChange` | `(range: STimeRangeValue) => void` | 선택 변경 (sdUpdate) |
 | `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
 
+## Types
+
+### STimeRangeValue
+
+```ts
+export type STimeRangeValue = [string, string] | null;
+```
+
+### STimeRangePickerType
+
+```ts
+export type STimeRangePickerType = STimePickerType;
+```
+
+### STimeRangePickerSize
+
+```ts
+export type STimeRangePickerSize = STimePickerSize;
+```
+
+### STimeRangePickerRangeOrder
+
+```ts
+export type STimeRangePickerRangeOrder = 'strict' | 'allow-cross-day';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SToast/README.md

@@ -51,6 +51,30 @@
 | `onClose` | `() => void` | 닫기 (sdClose) |
 | `onButtonClick` | `(e: MouseEvent) => void` | 버튼 클릭 (sdButtonClick) |
 
+## Types
+
+### SToastPosition
+
+```ts
+export type SToastPosition =
+  'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+```
+
+### SToastNotifyOptions
+
+```ts
+export interface SToastNotifyOptions extends Omit<SToastProps, 'onClose'> {
+  /** 자동 닫힘 지연(ms). 0이면 자동 닫힘 없음 (없으면 defaultDuration) */
+  duration?: number;
+}
+```
+
+### SToastType
+
+```ts
+export type SToastType = 'default' | 'danger' | 'caution' | 'complete' | 'accent' | 'info';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SToggle/README.md

@@ -21,3 +21,11 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: boolean) => void` | 변경 (sdUpdate) |
 
+## Types
+
+### SToggleSize
+
+```ts
+export type SToggleSize = 'xs' | 'sm';
+```
+