sellmate-design-system-react 9.0.0-beta.39 → 9.0.0-beta.40

package/AGENTS.md

@@ -26,11 +26,11 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
-| **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
+| **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |

package/dist/docs/Gallery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * "한눈에 보기" 그리드.
+ *
+ * 이 파일은 **나열 규칙만** 갖는다 — 분류·순서는 `categories.ts`(SSOT)가, 미리보기는
+ * `gallery-previews.tsx` 가, 링크 대상은 스토리의 `title` 이 정한다. 새 컴포넌트는
+ * 여기를 고치지 않고 그 셋만 채우면 자리를 잡는다.
+ */
+import type { ReactNode } from 'react';
+export default function Gallery(): ReactNode;

package/dist/docs/gallery-previews.d.ts

@@ -0,0 +1,24 @@
+/**
+ * "한눈에 보기" 페이지가 쓰는 컴포넌트별 미리보기.
+ *
+ * 이 저장소에서 **손으로 유지하는 유일한 문서 자산**이다. 그래서 두 가지를 지킨다.
+ *
+ * 1. **설명을 쓰지 않는다.** 카드에는 미리보기와 이름과 링크만 있다. "언제 쓰나" 는
+ *    AGENTS.md §3(Guide/컴포넌트 선택)이, Props 는 각 컴포넌트 Docs 탭이 갖는다.
+ *    여기에 한 줄 설명을 붙이는 순간 그 둘과 어긋나기 시작한다.
+ * 2. **빠지면 CI 가 잡는다.** 스토리가 있는 컴포넌트는 전부 여기 키가 있어야 한다 —
+ *    `npm run check:categories` 가 강제한다.
+ *
+ * 미리보기 상자는 `pointer-events-none` 이라 눌리지 않는다(Gallery.tsx). 갤러리는 보는
+ * 자리이고 만지는 자리는 각 컴포넌트의 Docs 탭이다 — 덕분에 오버레이가 열리거나 포커스를
+ * 뺏는 일 없이 수십 개를 한 화면에 살아 있는 채로 둘 수 있다.
+ *
+ * 화면 골격(앱 셸·모달·드로어)처럼 카드에 담기지 않는 것은 {@link note} 로 둔다.
+ * 억지로 축소해 알아볼 수 없는 그림을 넣느니 무엇인지 한 줄로 적는 편이 낫다.
+ */
+import type { ReactNode } from 'react';
+/**
+ * 컴포넌트 이름 → 미리보기.
+ * 키는 스토리 파일이 있는 컴포넌트와 정확히 같아야 한다 (check:categories).
+ */
+export declare const GALLERY_PREVIEWS: Record<string, ReactNode>;

package/dist/lib/doc-sections.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Storybook 의 Guide 문서 페이지가 쓰는 마크다운 슬라이서.
+ *
+ * Guide 페이지는 **자기 원문을 갖지 않는다.** AGENTS.md·README.md 를 `?raw` 로 읽어
+ * 필요한 `## ` 섹션만 잘라 {@link https://storybook.js.org/docs/writing-docs/doc-blocks Markdown 블록}에 넘긴다.
+ * 문서를 Storybook 에 복사해 두면 AGENTS.md 가 바뀔 때마다 조용히 낡고,
+ * 이 저장소는 이미 한 변경이 네 곳(README·stories·playground·AGENTS.md)에 흩어져 있다 —
+ * 다섯 번째 사본을 만들지 않는 것이 이 파일의 존재 이유다.
+ *
+ * @example
+ * import agents from '../../AGENTS.md?raw';
+ * <Markdown>{mdSections(agents, '2.')}</Markdown>
+ */
+/**
+ * `## ` 섹션을 제목 접두어로 잘라 이어 붙인다. 접두어는 번호(`'2.'`)든 제목(`'설치'`)이든 된다.
+ *
+ * 넘긴 순서가 아니라 **원문 순서**로 이어 붙인다 — 문서 안의 "위에서 말한" 류의 참조가
+ * 순서를 뒤집으면 거짓이 되기 때문이다.
+ *
+ * 찾지 못한 접두어가 하나라도 있으면 던진다. 조용히 빈 페이지가 되면
+ * AGENTS.md 의 절 번호가 바뀐 것을 아무도 모른 채 배포된다.
+ */
+export declare function mdSections(md: string, ...prefixes: string[]): string;
+/**
+ * 원문의 저장소 상대 링크(`./README.md`)를 Storybook 문서 경로로 바꾼다.
+ *
+ * 원문은 npm 패키지에 그대로 실려 소비 앱의 `node_modules` 에서 읽히는 것이 1차 용도라
+ * 링크가 파일 경로다. Storybook 안에서는 그 경로가 404 이므로 여기서만 갈아 끼운다 —
+ * 원문은 손대지 않는다.
+ *
+ * 표에 없는 링크는 그대로 둔다.
+ */
+export declare function relinkToDocs(md: string): string;
+/** {@link mdSections} + {@link relinkToDocs} — Guide 페이지가 쓰는 기본 조합 */
+export declare function guideSections(md: string, ...prefixes: string[]): string;

package/dist/llms-full.txt

@@ -34,11 +34,11 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
-| **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
+| **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |

package/dist/llms.txt

@@ -35,11 +35,11 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
-| **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
+| **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |

package/dist/playground/categories.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 컴포넌트 분류의 **SSOT**. playground 사이드바와 Storybook 사이드바가 같은 것을 쓴다.
+ * - `.storybook/preview.ts` 의 `storySort.order` 는 여기 `label` 목록·순서와 같아야 한다
+ *   (Storybook 이 그 배열을 정적으로 읽어 가서 import 로는 못 만든다).
+ * - 각 스토리의 `title` 접두어는 그 컴포넌트가 속한 `label` 과 같아야 한다 —
+ *   `npm run check:categories` 가 강제한다.
+ * - 카테고리 내부: 알파벳 순.
+ * 여기에 없는 컴포넌트는 playground 에서 자동으로 "Other" 그룹으로 묶인다.
+ * (SField 컴포넌트는 Storybook 스토리가 없지만 폼 래퍼이므로 SField 그룹에 포함)
+ */
+export declare const COMPONENT_CATEGORIES: {
+    label: string;
+    components: string[];
+}[];
+export type CategoryGroup<T> = {
+    label: string;
+    items: T[];
+};
+export declare function groupByCategory<T>(items: T[], getName: (item: T) => string): CategoryGroup<T>[];

package/dist/styles.css

@@ -888,6 +888,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .ml-sd-8 {
+    margin-left: var(--spacing-sd-8);
+  }
   .box-border {
     box-sizing: border-box;
   }
@@ -1025,9 +1028,21 @@
   .h-\[80vh\] {
     height: 80vh;
   }
+  .h-\[96px\] {
+    height: 96px;
+  }
+  .h-\[104px\] {
+    height: 104px;
+  }
+  .h-\[124px\] {
+    height: 124px;
+  }
   .h-\[140px\] {
     height: 140px;
   }
+  .h-\[180px\] {
+    height: 180px;
+  }
   .h-\[200px\] {
     height: 200px;
   }
@@ -1265,9 +1280,15 @@
   .w-\[176px\] {
     width: 176px;
   }
+  .w-\[180px\] {
+    width: 180px;
+  }
   .w-\[200px\] {
     width: 200px;
   }
+  .w-\[214px\] {
+    width: 214px;
+  }
   .w-\[220px\] {
     width: 220px;
   }
@@ -1298,9 +1319,15 @@
   .w-\[528px\] {
     width: 528px;
   }
+  .w-\[560px\] {
+    width: 560px;
+  }
   .w-\[600px\] {
     width: 600px;
   }
+  .w-\[640px\] {
+    width: 640px;
+  }
   .w-\[680px\] {
     width: 680px;
   }
@@ -1508,6 +1535,30 @@
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-\[0\.3\] {
+    scale: 0.3;
+  }
+  .scale-\[0\.4\] {
+    scale: 0.4;
+  }
+  .scale-\[0\.5\] {
+    scale: 0.5;
+  }
+  .scale-\[0\.6\] {
+    scale: 0.6;
+  }
+  .scale-\[0\.22\] {
+    scale: 0.22;
+  }
+  .scale-\[0\.42\] {
+    scale: 0.42;
+  }
+  .scale-\[0\.62\] {
+    scale: 0.62;
+  }
+  .scale-\[0\.72\] {
+    scale: 0.72;
+  }
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
@@ -1568,6 +1619,9 @@
   .resize-y {
     resize: vertical;
   }
+  .scroll-mt-sd-24 {
+    scroll-margin-top: var(--spacing-sd-24);
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -1589,6 +1643,9 @@
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
+  .grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
+  }
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -1937,6 +1994,9 @@
   .gap-sd-24 {
     gap: var(--spacing-sd-24);
   }
+  .gap-sd-32 {
+    gap: var(--spacing-sd-32);
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -3339,6 +3399,9 @@
   .text-\[14px\] {
     font-size: 14px;
   }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
   .text-\[16px\] {
     font-size: 16px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.39",
+  "version": "9.0.0-beta.40",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -71,6 +71,7 @@
     "check:docs-refs": "node scripts/check-docs-refs.mjs",
     "check:routing": "node scripts/check-routing.mjs",
     "check:cn-scales": "node scripts/check-cn-scales.mjs",
+    "check:categories": "node scripts/check-story-categories.mjs",
     "version": "node scripts/version.mjs --prerelease beta --tag",
     "version:dry": "node scripts/version.mjs --prerelease beta --dry-run",
     "version:stable": "node scripts/version.mjs --tag",