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

package/dist/lib/mode-listbox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 연·월·시간을 세로 리스트에서 고르는 피커 조각(SDatePicker 의 연·월 리스트, STimePicker 의 시간
+ * 리스트)이 함께 쓰는 치수와 항목 클래스. 스펙(`--cmp-datepicker-mode-*`)이 하나라 한곳에 둔다.
+ */
+/** 리스트 높이(px) — 항목 높이와 함께 "선택 항목을 가운데로" 계산에 쓴다 */
+export declare const MODE_LIST_HEIGHT = 240;
+/** 항목 한 줄 높이(px) — paddingY(4) × 2 + line-height(20) */
+export declare const MODE_ITEM_HEIGHT = 28;
+/** 리스트 항목(button) 클래스 — 기본 / 선택 / 비활성 */
+export declare const modeListItemClass: (selected: boolean, disabled: boolean) => string;

package/dist/llms-full.txt

@@ -1896,6 +1896,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` 을 담을 수 있어야 한다.
@@ -8888,7 +8895,7 @@ export interface SGnbSystemAlert {
   /** 라벨 텍스트. 기본 `'알림'` */
   label?: string;
   /**
-   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수 배지가 붙는다.
    * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
    * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
    */
@@ -8990,7 +8997,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 를 그대로 따라간다 */
@@ -9006,6 +9015,7 @@ export const GNB_SYSTEM_COLORS = ['light', 'dark'] as const;
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
 - [SSystemActionButton](../SSystemActionButton)
+- [STag](../STag)
 - [STooltip](../STooltip)
 
 ### Graph
@@ -12472,7 +12482,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
 | `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` | — |  |
@@ -12548,8 +12558,8 @@ export type STimePickerSize = 'sm' | 'md';
 | `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/llms.txt

@@ -1897,6 +1897,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/styles.css

@@ -917,9 +917,6 @@
   .mt-sd-36 {
     margin-top: var(--spacing-sd-36);
   }
-  .-mr-px {
-    margin-right: -1px;
-  }
   .mr-\[6px\] {
     margin-right: 6px;
   }
@@ -1211,9 +1208,6 @@
   .h-\[var\(--cmp-table-header-height\)\] {
     height: var(--cmp-table-header-height);
   }
-  .h-\[var\(--cmp-textinput-sm-height\)\] {
-    height: var(--cmp-textinput-sm-height);
-  }
   .h-\[var\(--sys-size-\.\.\.\)\] {
     height: var(--sys-size-...);
   }
@@ -1379,9 +1373,6 @@
   .w-\[48px\] {
     width: 48px;
   }
-  .w-\[61px\] {
-    width: 61px;
-  }
   .w-\[72px\] {
     width: 72px;
   }
@@ -2535,10 +2526,6 @@
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
   }
-  .rounded-l-\[var\(--cmp-select-sm-radius\)\] {
-    border-top-left-radius: var(--cmp-select-sm-radius);
-    border-bottom-left-radius: var(--cmp-select-sm-radius);
-  }
   .rounded-tl {
     border-top-left-radius: 0.25rem;
   }
@@ -2550,10 +2537,6 @@
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-  .rounded-r-\[var\(--cmp-select-sm-radius\)\] {
-    border-top-right-radius: var(--cmp-select-sm-radius);
-    border-bottom-right-radius: var(--cmp-select-sm-radius);
-  }
   .rounded-tr {
     border-top-right-radius: 0.25rem;
   }
@@ -2809,12 +2792,6 @@
   .border-\[var\(--cmp-table-border-color\)\] {
     border-color: var(--cmp-table-border-color);
   }
-  .border-\[var\(--cmp-timepicker-border-default\)\] {
-    border-color: var(--cmp-timepicker-border-default);
-  }
-  .border-\[var\(--cmp-timepicker-border-focus\)\] {
-    border-color: var(--cmp-timepicker-border-focus);
-  }
   .border-border-default {
     border-color: var(--color-border-default);
   }
@@ -4463,12 +4440,6 @@
   .text-\[color\:var\(--sys-color-field-text-default\)\] {
     color: var(--sys-color-field-text-default);
   }
-  .text-\[var\(--cmp-field-hint-color\)\] {
-    color: var(--cmp-field-hint-color);
-  }
-  .text-\[var\(--cmp-timepicker-border-focus\)\] {
-    color: var(--cmp-timepicker-border-focus);
-  }
   .text-\[var\(--cmp-timepicker-selector-range-heading-color\)\] {
     color: var(--cmp-timepicker-selector-range-heading-color);
   }
@@ -4684,6 +4655,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
   }
+  .outline-offset-\[-2px\] {
+    outline-offset: -2px;
+  }
   .outline-\(--sys-color-border-default\) {
     outline-color: var(--sys-color-border-default);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.91",
+  "version": "9.0.0-beta.92",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [