sellmate-design-system-react 9.0.0-beta.80 → 9.0.0-beta.83

package/AGENTS.md

@@ -42,7 +42,7 @@
 | **버튼·링크** | `SButton` `SGhostButton` `SMeatballButton`(⋯ 로 '더 보기' 메뉴를 여는 아이콘 버튼) `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SChatInput`(대화 입력창) `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
-| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
+| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` `STimeline`(날짜로 묶인 시간순 기록 — 작업 로그·메모 이력) |
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
@@ -167,7 +167,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 층 | 무엇인가 | 컴포넌트 |
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SGnbSystem`(GNB 맨 아래 판 · 전폭 상단바 오른쪽 끝) `SPage` `SPageHeader`(`SLayout` 안에서 `SPage` 앞에 둔다) |
-| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
+| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `STimeline` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
 | **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SMeatballButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SChatFile` `SImage` `SLinearProgress` `SCircleProgress` `SSkeleton` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `SLogo` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SLauncherListBox`(런처 버튼에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
@@ -563,6 +563,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 여러 건을 여러 열로 보여주고 열끼리 비교하게 한다 | `STable` | §3-7-6 |
 | 항목 하나의 속성들을 `라벨: 값` 으로 보여준다 | `SKeyValueTable` | §4-4 |
 | 한 줄로 읽히는 항목을 세로로 나열한다 | `SList` + `SListItem` | §3-7-6 |
+| 시각이 붙은 기록을 날짜별로 묶어 시간순으로 보여준다 (작업 로그·메모 이력) | `STimeline` | §3-7-6 |
 | 대화의 메시지 한 건을 보여준다 | `SChatMessage` | |
 | 대화 중간에 시스템이 알리는 사실을 끼운다 (상담사 배정·대화 종료 등) | `SChatSystemMessage` | 사람이 보낸 말이면 `SChatMessage` |
 | 나열한 항목을 펼쳐 하위 내용을 보여준다 | `SExpansionList` + `SExpansionItem` | §3-7-7 |
@@ -1898,15 +1899,17 @@ const [from, setFrom] = useState<string | null>(null);
 
 직접 쓰는 경우는 하나뿐이다 — **디자인 시스템에 없는 컨트롤**에 다른 필드와 똑같은 라벨·필수·에러 모양을 붙일 때.
 
-#### 3-7-6. 여러 건을 나열하는 셋 — STable vs SList vs SDraggableList
+#### 3-7-6. 여러 건을 나열하는 넷 — STable vs SList vs SDraggableList vs STimeline
 
 | 판별 | 사용 |
 | --- | --- |
 | 열이 둘 이상이고 **열끼리 값을 비교**한다 (정렬·합계·자릿수 맞춤) | `STable` |
 | 한 항목이 **한 줄로 읽힌다** (제목 + 보조 텍스트) | `SList` + `SListItem` |
 | **순서 자체가 데이터**라 사용자가 끌어서 바꾼다 | `SDraggableList` + `SDraggableItem` |
+| 항목마다 **시각**이 있고 날짜 머리글로 묶여 위에서 아래로 흐른다 (작업 로그·메모 이력) | `STimeline` |
 
 - **항목 하나의 속성을 나열하는 것은 목록이 아니다.** `라벨: 값` 이 세로로 쌓이는 것은 `SKeyValueTable` 이다 (§4-4).
+- **`STimeline` 의 레일(점·선)과 머리글·시각 열은 컴포넌트가 그린다.** `groups` 에 데이터만 넘기고, 점·선을 `border-l` 이나 절대 위치 `span` 으로 직접 그리지 않는다 — 선이 묶음 경계와 마지막 줄에서 끊기는 규칙을 컴포넌트가 계산한다. 작성자·편집 버튼 같은 업무 내용은 각 항목의 `content` 에 넣는다. 빈 상태 안내도 `emptyText` 로 넘기고, 불러오는 중에는 `emptyText={null}` 로 빈 안내를 숨긴다.
 - `SList` 는 레이아웃만 담당한다. depth 별 단일 펼침이 필요하면 `SExpansionList` 다 (§3-7-7).
 - **`SList` 의 자식은 `SListItem` 을 권장한다.** 다른 자식도 그대로 렌더되지만, 펼치는 항목은 `SExpansionList` + `SExpansionItem` 이, 끌어서 순서를 바꾸는 항목은 `SDraggableList` + `SDraggableItem` 이 여닫힘·정렬 동작까지 함께 관리하므로 그쪽을 쓴다 (§3-7-7).
 - **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `gap` 으로 띄운다 — `gap` 을 준 목록에도 구분선은 들어가지 않는다.
@@ -1919,6 +1922,8 @@ const [from, setFrom] = useState<string | null>(null);
 ❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>  {/* 구분선을 직접 붙이지 않는다 */}
 ❌ <SList><><SListItem title="일반 문의" /><SListItem title="결제 문의" /></></SList>  {/* Fragment 로 묶으면 그 안쪽은 구분되지 않는다 */}
 ❌ <SListItem title="일반 문의" selected />                        {/* clickable 없으면 선택 표시가 안 나온다 */}
+✅ <STimeline groups={[{ heading: '2026-10-07', entries: [{ key: id, time: '14:32', content: <Memo … /> }] }]} />
+❌ <div className="grid grid-cols-[52px_8px_1fr]"><span className="rounded-full …" />…</div>  {/* 타임라인 레일을 직접 그리지 않는다 */}
 ```
 
 ##### 행 안에 컨트롤을 둘 때
@@ -2169,6 +2174,7 @@ const [selectedId, setSelectedId] = useState<string>();
 - **실제 레이아웃을 그대로 따라 그린다.** 폼 컨트롤 자리는 `type="input"`·`"button"`·`"checkbox"` 처럼 DS 모양을 쓴다. 해당 컴포넌트 기본 size 의 크기·모서리를 토큰으로 넣으므로 **높이·radius 를 직접 주지 않는다** — 직접 주면 데이터가 왔을 때 레이아웃이 튄다. checkbox·radio·switch 는 크기를 바꾸지 않는다.
 - **텍스트 줄은 `type="text"` 를 실제 텍스트와 같은 typo 클래스 안에 둔다.** 줄 높이를 부모 line-height 에서 받으므로 typo 밖에 두면 높이가 어긋난다. `text` 에 `height` 를 주지 않는다 — 높이가 필요하면 `rect` 다.
 - **원은 `size` 하나로 준다.** `width`·`height` 를 따로 주면 타원이 된다.
+- **색은 바탕 밝기로 `mode` 만 고른다.** 흰 면·회색 면 위는 기본(`light`), 어두운 면 위는 `mode="dark"`. 색·투명도·모서리는 `--cmp-skeleton-*` 토큰으로 이미 들어가므로 `background`·`opacity`·`rounded-*` 를 직접 주지 않는다.
 - **넓은 영역에는 `pulse` 를 쓰지 않는다.** 블록 전체가 줄었다 커져 레이아웃이 흔들려 보인다. 기본 `wave` 를 쓰고, 한 화면에 아주 많으면 `none`.
 - **로딩 중이라는 사실은 감싸는 영역에 `aria-busy` 로 알린다.** `SSkeleton` 자체는 장식이라 보조기기에 숨겨져 있다.
 
@@ -2181,6 +2187,7 @@ const [selectedId, setSelectedId] = useState<string>();
 
 ❌ <SSkeleton type="input" height={40} />   {/* 실제 SInput 과 높이가 달라 데이터가 오면 튄다 */}
 ❌ <SSkeleton type="text" height={24} />    {/* text 는 세로 절반만 칠한다 — rect 를 쓴다 */}
+❌ <SSkeleton className="bg-grey-20" />     {/* 색은 토큰이 넣는다 — 어두운 면이면 mode="dark" */}
 ```
 
 ---

package/dist/components/SSkeleton/README.md

@@ -9,10 +9,10 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SSkeletonType` | `'rect'` | 자리표시 모양 - `rect`: 사각형. 폭은 부모를, 높이는 한 줄 높이를 따른다 — 이미지·카드 영역은 `height` 를 준다 - `circle`: 원형(아바타 등) - `text`: 텍스트 한 줄. 부모 타이포의 line-height 를 따르고 세로로 절반만 칠한다 - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리 |
+| `mode?` | `SSkeletonMode` | `'light'` | 놓이는 바탕의 밝기 - `light`: 흰 면·회색 면 위. 바탕보다 짙은 반투명 회색 - `dark`: 어두운 면 위. 바탕보다 밝은 반투명 회색 |
 | `animation?` | `SSkeletonAnimation` | `'wave'` | 로딩 애니메이션 - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다 - `pulse`: 크기가 숨쉬듯 줄었다 커진다. 블록 전체가 움직이므로 아바타처럼 작은 모양에만 쓴다 - `fade`: 투명도가 숨쉬듯 바뀐다 - `none`: 애니메이션 없음 OS 의 동작 줄이기 설정이 켜져 있으면 어떤 값이든 멈춘다. |
 | `animationSpeed?` | `number` | `1500` | 애니메이션 한 주기 (ms) |
 | `square?` | `boolean` | `false` | 모서리를 각지게 |
-| `bordered?` | `boolean` | `false` | 테두리 |
 | `size?` | `string \| number` | — | 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px |
 | `width?` | `string \| number` | — | 폭. 숫자는 px |
 | `height?` | `string \| number` | — | 높이. 숫자는 px |
@@ -25,6 +25,12 @@
 export type SSkeletonType = (typeof SKELETON_TYPES)[number];
 ```
 
+### SSkeletonMode
+
+```ts
+export type SSkeletonMode = (typeof SKELETON_MODES)[number];
+```
+
 ### SSkeletonAnimation
 
 ```ts
@@ -47,6 +53,12 @@ export const SKELETON_TYPES = [
 ] as const;
 ```
 
+### SKELETON_MODES
+
+```ts
+export const SKELETON_MODES = ['light', 'dark'] as const;
+```
+
 ### SKELETON_ANIMATIONS
 
 ```ts

package/dist/components/SSkeleton/SSkeleton.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import { type SSkeletonAnimation, type SSkeletonType } from './skeleton.config';
+import { type SSkeletonAnimation, type SSkeletonMode, type SSkeletonType } from './skeleton.config';
 export interface SSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * 자리표시 모양
@@ -9,6 +9,12 @@ export interface SSkeletonProps extends HTMLAttributes<HTMLDivElement> {
      * - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리
      */
     type?: SSkeletonType;
+    /**
+     * 놓이는 바탕의 밝기
+     * - `light`: 흰 면·회색 면 위. 바탕보다 짙은 반투명 회색
+     * - `dark`: 어두운 면 위. 바탕보다 밝은 반투명 회색
+     */
+    mode?: SSkeletonMode;
     /**
      * 로딩 애니메이션
      * - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다
@@ -23,8 +29,6 @@ export interface SSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     animationSpeed?: number;
     /** 모서리를 각지게 */
     square?: boolean;
-    /** 테두리 */
-    bordered?: boolean;
     /** 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px */
     size?: string | number;
     /** 폭. 숫자는 px */

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

@@ -1,2 +1,2 @@
 export { SSkeleton, type SSkeletonProps } from './SSkeleton';
-export { SKELETON_TYPES, SKELETON_ANIMATIONS, SKELETON_TYPE_CONFIG, type SSkeletonType, type SSkeletonAnimation, } from './skeleton.config';
+export { SKELETON_TYPES, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPE_CONFIG, type SSkeletonType, type SSkeletonAnimation, type SSkeletonMode, } from './skeleton.config';

package/dist/components/SSkeleton/skeleton.config.d.ts

@@ -2,6 +2,8 @@ export declare const SKELETON_TYPES: readonly ["rect", "circle", "text", "button
 export type SSkeletonType = (typeof SKELETON_TYPES)[number];
 export declare const SKELETON_ANIMATIONS: readonly ["wave", "pulse", "fade", "none"];
 export type SSkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+export declare const SKELETON_MODES: readonly ["light", "dark"];
+export type SSkeletonMode = (typeof SKELETON_MODES)[number];
 /**
  * type 별 기본 크기·모서리. 값이 없는 축은 내용(공백 한 글자)과 부모 폭을 따른다.
  * DS 모양(button·input…)은 해당 컴포넌트의 **기본 size** 토큰을 그대로 가리켜
@@ -12,11 +14,11 @@ export declare const SKELETON_TYPE_CONFIG: Record<SSkeletonType, {
     height?: string;
     radius: string;
 }>;
-export declare const SKELETON_COLORS: {
-    /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
+/**
+ * mode 별 색. 배경색을 반투명(`cmp-skeleton-opacity`)으로 깔아 흰 면·회색 면 어디서든 바탕보다 한 단계 짙게(dark 는 밝게) 보인다.
+ * 밝은 면(light)에는 어두운 색(`bg-dark`)을, 어두운 면(dark)에는 밝은 색(`bg-light`)을 쓴다 — Quasar 의 검정·흰색 반투명과 같은 축.
+ */
+export declare const SKELETON_COLORS: Record<SSkeletonMode, {
     bg: string;
-    /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
-    border: string;
-    /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
     wave: string;
-};
+}>;

package/dist/components/STimeline/README.md

@@ -0,0 +1,41 @@
+# STimeline
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STimeline
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `groups` | `STimelineGroup[]` | — | 머리글로 묶은 항목 목록. 순서 그대로 그린다 |
+| `emptyText?` | `ReactNode` | `'내역이 없습니다.'` | 항목이 하나도 없을 때 가운데 띄우는 안내. 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다. |
+
+## Types
+
+### STimelineGroup
+
+```ts
+export interface STimelineGroup {
+  /** React key. 생략하면 순서로 대신한다 */
+  key?: Key;
+  /** 묶음 머리글 (예: 날짜) */
+  heading: ReactNode;
+  /** 머리글 아래 항목. 비어 있으면 머리글째 그리지 않는다 */
+  entries: STimelineEntry[];
+}
+```
+
+### STimelineEntry
+
+```ts
+export interface STimelineEntry {
+  /** React key — 묶음 안에서 유일해야 한다 */
+  key: Key;
+  /** 레일 왼쪽 열에 오른쪽 정렬로 서는 시각 (예: `14:32`) */
+  time?: ReactNode;
+  /** 레일 오른쪽 본문. 타이포·색은 감싸는 쪽을 따른다 — 업무 내용은 소비 앱이 그린다 */
+  content: ReactNode;
+}
+```
+

package/dist/components/STimeline/STimeline.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type Key, type ReactNode } from 'react';
+export interface STimelineEntry {
+    /** React key — 묶음 안에서 유일해야 한다 */
+    key: Key;
+    /** 레일 왼쪽 열에 오른쪽 정렬로 서는 시각 (예: `14:32`) */
+    time?: ReactNode;
+    /** 레일 오른쪽 본문. 타이포·색은 감싸는 쪽을 따른다 — 업무 내용은 소비 앱이 그린다 */
+    content: ReactNode;
+}
+export interface STimelineGroup {
+    /** React key. 생략하면 순서로 대신한다 */
+    key?: Key;
+    /** 묶음 머리글 (예: 날짜) */
+    heading: ReactNode;
+    /** 머리글 아래 항목. 비어 있으면 머리글째 그리지 않는다 */
+    entries: STimelineEntry[];
+}
+export interface STimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 머리글로 묶은 항목 목록. 순서 그대로 그린다 */
+    groups: STimelineGroup[];
+    /**
+     * 항목이 하나도 없을 때 가운데 띄우는 안내.
+     * 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다.
+     */
+    emptyText?: ReactNode;
+}
+export declare const STimeline: import("react").ForwardRefExoticComponent<STimelineProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { STimeline, type STimelineEntry, type STimelineGroup, type STimelineProps, } from './STimeline';

package/dist/index.cjs

@@ -5170,16 +5170,22 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     },
     [ref]
   );
+  const autoSizedRef = react.useRef(false);
+  const styleHeight = textareaStyle?.height;
   react.useLayoutEffect(() => {
     const el = innerRef.current;
     if (el == null) return;
     if (!autogrow) {
-      el.style.height = "";
+      if (autoSizedRef.current) {
+        el.style.height = typeof styleHeight === "number" ? `${styleHeight}px` : styleHeight ?? "";
+        autoSizedRef.current = false;
+      }
       return;
     }
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
-  }, [autogrow, maxHeight, minHeight, rows, value]);
+    autoSizedRef.current = true;
+  }, [autogrow, maxHeight, minHeight, rows, styleHeight, value]);
   useFormField({
     name: rest.name,
     validate: () => {
@@ -22649,10 +22655,13 @@ var SKELETON_TYPES = [
   "switch"
 ];
 var SKELETON_ANIMATIONS = ["wave", "pulse", "fade", "none"];
+var SKELETON_MODES = ["light", "dark"];
 var SKELETON_TYPE_CONFIG = {
-  rect: { radius: "var(--sys-radius-control-sm)" },
+  rect: { radius: "var(--cmp-skeleton-radius)" },
   circle: { width: "48px", height: "48px", radius: "50%" },
-  text: { radius: "var(--sys-radius-control-sm)" },
+  // 세로를 절반(scale-y-50)으로 줄여 그리므로 세로 반지름을 두 배로 줘야 모서리가 둥글게 남는다.
+  // 칠하는 높이가 한 줄의 절반이라 스켈레톤 radius 는 알약처럼 보여 한 단계 작은 값을 쓴다
+  text: { radius: "var(--radius-2) / calc(var(--radius-2) * 2)" },
   button: {
     width: "90px",
     height: "var(--cmp-button-sm-height)",
@@ -22676,13 +22685,18 @@ var SKELETON_TYPE_CONFIG = {
     radius: "var(--cmp-switch-radius)"
   }
 };
+var wave = (alpha) => `linear-gradient(90deg, transparent, color-mix(in srgb, var(--cmp-skeleton-highlight) ${alpha}, transparent), transparent)`;
 var SKELETON_COLORS = {
-  /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
-  bg: "var(--sys-color-disabled-bg)",
-  /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
-  border: "color-mix(in srgb, var(--sys-color-border-strong) 25%, transparent)",
-  /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
-  wave: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--sys-color-bg-frame) 50%, transparent), transparent)"
+  light: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-dark) var(--cmp-skeleton-opacity), transparent)",
+    /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+    wave: wave("50%")
+  },
+  dark: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-light) var(--cmp-skeleton-opacity), transparent)",
+    /** 어두운 면에서 50% 흰 띠는 너무 튀어 바탕과 같은 투명도로 낮춘다 (Quasar dark 도 .1) */
+    wave: wave("var(--cmp-skeleton-opacity)")
+  }
 };
 var ANIMATION_CLASS = {
   pulse: "animate-skeleton-pulse",
@@ -22691,10 +22705,10 @@ var ANIMATION_CLASS = {
 var toCss = (v) => typeof v === "number" ? `${v}px` : v;
 var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
   type = "rect",
+  mode = "light",
   animation = "wave",
   animationSpeed = 1500,
   square = false,
-  bordered = false,
   size,
   width,
   height,
@@ -22703,6 +22717,7 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
   ...props
 }, ref) {
   const t = SKELETON_TYPE_CONFIG[type];
+  const colors = SKELETON_COLORS[mode];
   const duration = `${animationSpeed}ms`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -22714,7 +22729,6 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
         "box-border cursor-wait select-none",
         // text 는 transform 이 아니라 scale 속성으로 줄여서 pulse 의 transform 애니메이션과 겹치지 않는다
         type === "text" && "scale-y-50",
-        bordered && "border border-solid",
         animation === "wave" && "relative overflow-hidden",
         animation !== "wave" && animation !== "none" && ANIMATION_CLASS[animation],
         "motion-reduce:animate-none",
@@ -22724,8 +22738,7 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
         width: toCss(width ?? size) ?? t.width,
         height: toCss(height ?? size) ?? t.height,
         borderRadius: square ? 0 : t.radius,
-        background: SKELETON_COLORS.bg,
-        borderColor: bordered ? SKELETON_COLORS.border : void 0,
+        background: colors.bg,
         animationDuration: animation === "pulse" || animation === "fade" ? duration : void 0,
         ...style
       },
@@ -22735,13 +22748,81 @@ var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
           "span",
           {
             className: "absolute inset-0 animate-skeleton-wave motion-reduce:hidden",
-            style: { background: SKELETON_COLORS.wave, animationDuration: duration }
+            style: {
+              background: colors.wave,
+              animationDuration: duration,
+              transform: "translateX(-100%)"
+            }
           }
         )
       ]
     }
   );
 });
+var STimelineImpl = /* @__PURE__ */ react.forwardRef(function STimeline({ groups, emptyText = "\uB0B4\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", className, ...rest }, ref) {
+  const filled = groups.filter((group) => group.entries.length > 0);
+  if (filled.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "typo-body-sm-default flex h-full items-center justify-center text-[color:var(--cmp-timeline-empty-color)]",
+          className
+        ),
+        ...rest,
+        children: emptyText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col", className), ...rest, children: filled.map((group, groupIndex) => {
+    const isLastGroup = groupIndex === filled.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typo-body-sm-bold py-[var(--cmp-timeline-heading-paddingY)] text-[color:var(--cmp-timeline-heading-color)]", children: group.heading }),
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "m-0 flex list-none flex-col p-0", children: group.entries.map((entry, entryIndex) => {
+        const isFirstEntry = entryIndex === 0;
+        const isLastEntry = entryIndex === group.entries.length - 1;
+        return (
+          // 시각 열 너비는 토큰이 없다 — 줄마다 grid 가 따로라 auto 로 두면 열이 어긋나므로 고정한다.
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: "grid grid-cols-[52px_var(--cmp-timeline-rail-dot-size)_minmax(0,1fr)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typo-body-sm-medium whitespace-nowrap pr-[var(--cmp-timeline-entry-horizontalGap)] text-right text-[color:var(--cmp-timeline-time-color)]", children: entry.time }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": true, className: "relative", children: [
+                  !(isLastGroup && isLastEntry) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute left-1/2 w-[var(--cmp-timeline-rail-line-width)] -translate-x-1/2 bg-[var(--cmp-timeline-rail-line-color)]",
+                        isFirstEntry && groupIndex > 0 ? "top-0" : "top-[14px]",
+                        isLastEntry ? "bottom-0" : "bottom-[-8px]"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-0 top-[6px] size-[var(--cmp-timeline-rail-dot-size)] rounded-[var(--cmp-timeline-rail-dot-radius)] bg-[var(--cmp-timeline-rail-dot-bg)]" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 pl-[var(--cmp-timeline-entry-horizontalGap)]",
+                      !isLastEntry && "pb-[var(--cmp-timeline-entry-gap)]"
+                    ),
+                    children: entry.content
+                  }
+                )
+              ]
+            },
+            entry.key
+          )
+        );
+      }) })
+    ] }, group.key ?? groupIndex);
+  }) });
+});
+var STimeline2 = /* @__PURE__ */ withDisplayName(STimelineImpl, "STimeline");
 var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = react.useRef(null);
   const fieldsRef = react.useRef(/* @__PURE__ */ new Set());
@@ -28598,6 +28679,7 @@ exports.SIcon = SIcon;
 exports.SImage = SImage;
 exports.SInput = SInput;
 exports.SKELETON_ANIMATIONS = SKELETON_ANIMATIONS;
+exports.SKELETON_MODES = SKELETON_MODES;
 exports.SKELETON_TYPES = SKELETON_TYPES;
 exports.SKELETON_TYPE_CONFIG = SKELETON_TYPE_CONFIG;
 exports.SKeyValueTable = SKeyValueTable;
@@ -28648,6 +28730,7 @@ exports.STextLink = STextLink;
 exports.STextarea = STextarea;
 exports.STimePicker = STimePicker;
 exports.STimeRangePicker = STimeRangePicker;
+exports.STimeline = STimeline2;
 exports.SToast = SToast;
 exports.SToastContainer = SToastContainer;
 exports.SToggle = SToggle;