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

package/AGENTS.md

@@ -1888,6 +1888,13 @@ useEffect(() => {
 
 **`SKeyValueTable` 안에서는 필드마다 `maxWidth` 를 주지 않는다.** 표 안에서 이 상한이 거슬리는 이유는 대개 "같은 행의 다른 필드와 오른쪽 끝이 어긋난다" 이고, 그건 표 전체의 문제다. 표의 `fieldWidth="fill"` 로 한 번에 정한다 (§4-3). 그 표에서 한 필드만 예외로 둘 때만 `options.maxWidth` 를 쓴다.
 
+##### 시간 피커 — 분 간격은 `minuteStep`, 범위 순서는 `rangeOrder`
+
+`STimePicker`·`STimeRangePicker` 는 `[오전/오후] | 시 | 분` 리스트에서 고른다 (직접 타이핑하지 않는다).
+
+- **분 간격은 `minuteStep` 으로 정한다.** 분 리스트에 그 간격의 분만 나열되므로, 고른 값을 앱에서 다시 반올림하거나 `rules` 로 간격을 검사하지 않는다.
+- **`STimeRangePicker` 의 "종료가 시작보다 이르면 안 된다" 는 앱이 검증하지 않는다.** 기본 `rangeOrder="strict"` 가 종료 리스트에서 그 시각을 비활성으로 막는다. 자정을 넘는 범위(야간 근무 22:00~02:00 등)를 받아야 할 때만 `rangeOrder="allow-cross-day"` 를 준다.
+
 ##### 값을 지울 수 있게 하려면 `clearable`
 
 `SSelect` · `SDatePicker` · `SDateRangePicker` · `STimePicker` · `STimeRangePicker` 가 같은 규칙으로 갖는다. 값이 있을 때만 지우기 버튼이 나타나고, 누르면 **`onValueChange` 로 `null` 이 온다** (빈 문자열이 아니다). 받는 쪽 상태도 `null` 을 담을 수 있어야 한다.

package/dist/components/SGnbSystem/README.md

@@ -52,7 +52,7 @@ export interface SGnbSystemAlert {
   /** 라벨 텍스트. 기본 `'알림'` */
   label?: string;
   /**
-   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수 배지가 붙는다.
    * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
    * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
    */
@@ -154,7 +154,9 @@ export interface SGnbSystemAccount {
  * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
  *   domainTag.typography      → typo-body-sm-medium   (12/500/20)
  *   item.label.typography     → typo-body-sm-semibold (12/600/20)
- *   alertButton.count         → typo-body-md-bold     (13/700/22)
+ *
+ * 알림 개수는 글자가 아니라 배지(`STag` xs · deep)로 그린다 — 배경·글자색·치수는 태그 토큰
+ * (`--cmp-tag-*`)이 쥔다.
  */
 
 /** 색상(표면). light = 흰 면, dark = 오션블루 면. GNB 의 color 를 그대로 따라간다 */
@@ -170,6 +172,7 @@ export const GNB_SYSTEM_COLORS = ['light', 'dark'] as const;
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
 - [SSystemActionButton](../SSystemActionButton)
+- [STag](../STag)
 - [STooltip](../STooltip)
 
 ### Graph
@@ -181,6 +184,7 @@ graph TD;
   SGnbSystem --> SIcon
   SGnbSystem --> SPortal
   SGnbSystem --> SSystemActionButton
+  SGnbSystem --> STag
   SGnbSystem --> STooltip
   style SGnbSystem fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SGnbSystem/SGnbSystem.d.ts

@@ -23,7 +23,7 @@ export interface SGnbSystemAlert {
     /** 라벨 텍스트. 기본 `'알림'` */
     label?: string;
     /**
-     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수 배지가 붙는다.
      * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
      * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
      */
@@ -156,8 +156,8 @@ export interface SGnbSystemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * 접힌 패널은 렌더되지 않으므로, 접힌 상태에서도 닿아야 하는 것은 SGnb 의 `foldedTop`·`foldedFooter` 에 둔다.
  * 상단바는 접어도 남으므로 `top` 에는 접힘 형태가 없다.
  *
- * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀐다 — light 는 파랑,
- * 어두운 면은 노랑(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
+ * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀌고 개수 배지가 붙는다 —
+ * light 는 파랑 배지에 흰 글자, 어두운 면은 노랑 배지에 검은 글자(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
  *
  * 안내 툴팁(`alert.tooltip`)은 문구를 받은 동안 떠 있다가 알림을 누르거나 커서를 빼면 닫힌다.
  * 다시 띄우는 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이라, 같은 문구도 비웠다 다시 넘기면

package/dist/components/SGnbSystem/gnbSystem.config.d.ts

@@ -13,7 +13,9 @@ import type { SSystemActionButtonColor } from '../SSystemActionButton';
  * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
  *   domainTag.typography      → typo-body-sm-medium   (12/500/20)
  *   item.label.typography     → typo-body-sm-semibold (12/600/20)
- *   alertButton.count         → typo-body-md-bold     (13/700/22)
+ *
+ * 알림 개수는 글자가 아니라 배지(`STag` xs · deep)로 그린다 — 배경·글자색·치수는 태그 토큰
+ * (`--cmp-tag-*`)이 쥔다.
  */
 /** 색상(표면). light = 흰 면, dark = 오션블루 면. GNB 의 color 를 그대로 따라간다 */
 export declare const GNB_SYSTEM_COLORS: readonly ["light", "dark"];
@@ -48,7 +50,7 @@ export interface GnbSystemColorTokens {
     domainText: string;
     /** 알림이 있을 때의 벨 글리프색 */
     alertIcon: string;
-    /** 알림 개수(펼침) · 점 배지(접힘) 색 */
+    /** 점 배지(접힘·좁은 판) 색 */
     alertCount: string;
     /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
     alertHoverBg?: string;
@@ -73,7 +75,7 @@ export interface GnbSystemTopColorTokens {
     domainText: string;
     /** 알림이 있을 때의 벨 글리프색 */
     alertIcon: string;
-    /** 알림 개수 색 */
+    /** 점 배지 색 (상단바는 점 배지를 쓰지 않지만 색표를 패널과 맞춰 둔다) */
     alertCount: string;
     /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
     alertHoverBg?: string;

package/dist/components/STimePicker/README.md

@@ -15,7 +15,7 @@
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
 | `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
-| `minuteStep?` | `number` | `1` |  |
+| `minuteStep?` | `number` | `1` | 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm`)에 맞춘 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |

package/dist/components/STimePicker/STimePicker.d.ts

@@ -7,6 +7,7 @@ import { type STooltipProps } from '../STooltip';
 import { type STimePickerSize, type STimePickerType } from './timepicker.config';
 import { type SFieldWidth } from '../../lib/field-width';
 export type { STimePickerSize, STimePickerType } from './timepicker.config';
+export { TimeListbox } from './TimeListbox';
 export interface STimePickerProps {
     /** 선택 시간 (HH:mm) */
     value?: string | null;
@@ -22,6 +23,7 @@ export interface STimePickerProps {
     clearable?: boolean;
     /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
     showMeridiem?: boolean;
+    /** 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 */
     minuteStep?: number;
     /**
      * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
@@ -70,11 +72,5 @@ export interface STimePickerProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function TimeSelector({ value, showMeridiem, minuteStep, onChange, }: {
-    value?: string | null;
-    showMeridiem: boolean;
-    minuteStep: number;
-    onChange: (time: string) => void;
-}): import("react").JSX.Element;
-/** STimePicker — sd-time-picker 포팅. SField + Popover(TimeSelector). */
+/** STimePicker — sd-time-picker 포팅. SField + Popover(TimeListbox). */
 export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;

package/dist/components/STimePicker/TimeListbox.d.ts

@@ -0,0 +1,21 @@
+/** 리스트에서 고른 열 — STimePicker 는 분을 고르면 팝오버를 닫는다 */
+export type TimeListboxPart = 'meridiem' | 'hour' | 'minute';
+interface TimeListboxProps {
+    /** 선택 시간 (HH:mm). 비어 있으면 아무것도 선택되지 않은 채 열린다 */
+    value?: string | null;
+    showMeridiem: boolean;
+    /** 분 열에 나열할 간격 (분) */
+    minuteStep: number;
+    /** 고를 수 없는 시각 — 자정부터 센 분(0~1439)을 받는다. 시·오전/오후 항목은 그 안의 모든
+     *  분을 고를 수 없을 때만 비활성이 된다 */
+    isDisabled?: (minutes: number) => boolean;
+    onChange: (time: string, part: TimeListboxPart) => void;
+    /** 열 접근성 레이블 앞에 붙는 말 — STimeRangePicker 의 "시작"·"종료" */
+    labelPrefix?: string;
+    /** 그림자·모서리를 두른 떠 있는 상자로 그린다. 다른 상자 안에 넣을 때는 끈다 */
+    elevated?: boolean;
+}
+/** TimeListbox — `[오전/오후] | 시 | 분` 을 세로 리스트에서 고르는 시간 선택 조각.
+ *  SDatePickerMonthListbox(연 | 월)와 같은 스펙이며, STimePicker·STimeRangePicker 팝오버가 쓴다. */
+export declare function TimeListbox({ value, showMeridiem, minuteStep, isDisabled, onChange, labelPrefix, elevated, }: TimeListboxProps): import("react").JSX.Element;
+export {};

package/dist/components/STimeRangePicker/README.md

@@ -15,8 +15,8 @@
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
 | `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
-| `minuteStep?` | `number` | `1` |  |
-| `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. |
+| `minuteStep?` | `number` | `1` | 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 |
+| `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. `strict` 는 종료 리스트에서 시작보다 이른 시각을 비활성으로 막고, 시작을 종료 뒤로 옮기면 종료가 따라온다. `allow-cross-day` 는 제약 없이 고른다(자정을 넘는 범위). |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm ~ HH:mm`)에 맞춘 내장 상한이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |

package/dist/components/STimeRangePicker/STimeRangePicker.d.ts

@@ -22,8 +22,12 @@ export interface STimeRangePickerProps {
     clearable?: boolean;
     /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
     showMeridiem?: boolean;
+    /** 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 */
     minuteStep?: number;
-    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    /**
+     * 범위 순서 정책. `strict` 는 종료 리스트에서 시작보다 이른 시각을 비활성으로 막고,
+     * 시작을 종료 뒤로 옮기면 종료가 따라온다. `allow-cross-day` 는 제약 없이 고른다(자정을 넘는 범위).
+     */
     rangeOrder?: STimeRangePickerRangeOrder;
     /**
      * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.