@reopt-ai/opt-ui 1.4.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/COMPONENT_CATALOG.md +291 -46
  2. package/dist/{chunk-N4NDU5ET.cjs → chunk-3QFYBBL6.cjs} +66 -52
  3. package/dist/{chunk-QWBHD54V.js → chunk-3XD4HIFL.js} +26 -3
  4. package/dist/{chunk-X5WCXJAF.cjs → chunk-NXZJIHEZ.cjs} +26 -3
  5. package/dist/{chunk-ELWICXYY.js → chunk-VBGPEW45.js} +69 -55
  6. package/dist/core/index.cjs +2 -2
  7. package/dist/core/index.d.cts +2 -1
  8. package/dist/core/index.d.ts +2 -1
  9. package/dist/core/index.js +1 -1
  10. package/dist/docs/02-components/01-core.md +156 -18
  11. package/dist/docs/02-components/03-shells.md +137 -30
  12. package/dist/docs/03-recipes/03-layouts.md +4 -0
  13. package/dist/docs/04-theming.md +3 -1
  14. package/dist/id-registry.cjs +8 -8
  15. package/dist/id-registry.js +8 -8
  16. package/dist/id-registry.json +16 -16
  17. package/dist/{index-DlAcuvQp.d.cts → index-DWyqDIkH.d.cts} +14 -11
  18. package/dist/{index-Slu5hOj1.d.ts → index-Uyijm14M.d.ts} +14 -11
  19. package/dist/index.cjs +282 -105
  20. package/dist/index.d.cts +7 -3
  21. package/dist/index.d.ts +7 -3
  22. package/dist/index.js +254 -77
  23. package/dist/meta.cjs +120 -10
  24. package/dist/meta.js +120 -10
  25. package/dist/shells/index.cjs +2 -2
  26. package/dist/shells/index.js +1 -1
  27. package/dist/tailwind.css +5 -5
  28. package/dist/theme/presets/default.css +12 -12
  29. package/dist/theme/server.cjs +281 -0
  30. package/dist/theme/server.d.cts +129 -0
  31. package/dist/theme/server.d.ts +129 -0
  32. package/dist/theme/server.js +242 -0
  33. package/package.json +14 -3
package/COMPONENT_CATALOG.md CHANGED
@@ -200,23 +200,23 @@
200
200
 
201
201
  ### Navigation & Layout
202
202
 
203
- | Component | Description | Key Exports |
204
- | --------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------- |
205
- | AppMenubar | 데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원. | `AppMenubar` |
206
- | MegaMenu | 메가 메뉴. Popover + CSS grid 멀티컬럼 + 카테고리 헤딩 + footer 슬롯. | `MegaMenu` |
207
- | SidebarNav | Composite 기반 사이드바 네비게이션. pathname 자동 동기화. | `SidebarNav` |
208
- | Sidebar | 접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키. | `Sidebar`, `useSidebar` |
209
- | AppShell | Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. Sidebar 컴포넌트와 조합. | `AppShell` |
210
- | ContentTabs | 탭 콘텐츠 패널. Tabs primitive 래퍼. | `ContentTabs` |
211
- | VerticalTabs | 세로 탭 레이아웃. 좌측 탭 리스트 + 우측 패널 구성입니다. | `VerticalTabs` |
212
- | FaqAccordion | FAQ 질문/답변 아코디언. Composite + Disclosure 조합. | `FaqAccordion` |
213
- | CommandPalette | Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색. | `CommandPalette` |
214
- | CommandPaletteTrigger | CommandPalette + Cmd+K 키보드 단축키 자동 바인딩. | `CommandPaletteTrigger` |
215
- | ProjectSwitcher | 프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원. | `ProjectSwitcher` |
216
- | EditorToolbar | 리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합. | `EditorToolbar` |
217
- | FloatingActionBar | 플로팅 액션 바. 선택된 항목에 대한 일괄 작업 버튼을 하단에 표시합니다. | `FloatingActionBar` |
218
- | TemplatePicker | 템플릿 선택기. 카테고리별 그리드와 검색을 제공하며 featured/tags 표시를 지원합니다. | `TemplatePicker` |
219
- | ThemeSwitcher | 테마 프리셋 선택기. 프리셋과 light/dark/system 모드 전환. | `ThemeSwitcher` |
203
+ | Component | Description | Key Exports |
204
+ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
205
+ | AppMenubar | 데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원. | `AppMenubar` |
206
+ | MegaMenu | 메가 메뉴. Popover + CSS grid 멀티컬럼 + 카테고리 헤딩 + footer 슬롯. | `MegaMenu` |
207
+ | SidebarNav | Composite 기반 사이드바 네비게이션. pathname 자동 동기화. | `SidebarNav` |
208
+ | Sidebar | 접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키. | `Sidebar`, `useSidebar` |
209
+ | AppShell | Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. AppShell.Sidebar는 모든 viewport에서 기본 표시되며 반응형 숨김/Drawer 전환은 소비자가 제어합니다. | `AppShell` |
210
+ | ContentTabs | 탭 콘텐츠 패널. Tabs primitive 래퍼. | `ContentTabs` |
211
+ | VerticalTabs | 세로 탭 레이아웃. 좌측 탭 리스트 + 우측 패널 구성입니다. | `VerticalTabs` |
212
+ | FaqAccordion | FAQ 질문/답변 아코디언. Composite + Disclosure 조합. | `FaqAccordion` |
213
+ | CommandPalette | Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색. | `CommandPalette` |
214
+ | CommandPaletteTrigger | CommandPalette + Cmd+K 키보드 단축키 자동 바인딩. | `CommandPaletteTrigger` |
215
+ | ProjectSwitcher | 프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원. | `ProjectSwitcher` |
216
+ | EditorToolbar | 리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합. | `EditorToolbar` |
217
+ | FloatingActionBar | 플로팅 액션 바. 선택된 항목에 대한 일괄 작업 버튼을 하단에 표시합니다. | `FloatingActionBar` |
218
+ | TemplatePicker | 템플릿 선택기. 카테고리별 그리드와 검색을 제공하며 featured/tags 표시를 지원합니다. | `TemplatePicker` |
219
+ | ThemeSwitcher | 테마 프리셋 선택기. 프리셋과 light/dark/system 모드 전환. | `ThemeSwitcher` |
220
220
 
221
221
  ### Data Display
222
222
 
@@ -254,7 +254,7 @@
254
254
  | StatusSelect | 색상 인디케이터가 있는 상태 선택 드롭다운. | `StatusSelect` |
255
255
  | BranchSelect | Git 브랜치 선택 드롭다운. Select primitive 래퍼. | `BranchSelect` |
256
256
  | FilterBar | 필터링 바 컴포넌트. 검색, 선택, 다중 선택 필터 지원. | `FilterBar` |
257
- | SavedFilters | 필터 프리셋 관리. 현재 필터를 저장하고 불러오는 Popover UI. | `SavedFilters` |
257
+ | SavedFilters | 필터 프리셋 관리. 키보드 목록 탐색, 현재 필터 저장, 안전한 삭제 확인 흐름을 제공하는 Popover UI. | `SavedFilters` |
258
258
  | QuickActions | 빠른 작업 패널. 그리드/리스트 레이아웃, 단축키 표시 지원. | `QuickActions` |
259
259
  | TimeRangeSelector | 시간 범위 선택기. Popover + DateRangePicker + 프리셋 버튼 조합. 12개 시계열 Surface에서 사용. | `TimeRangeSelector` |
260
260
  | ComparisonSelector | 비교 선택기. 고유 레이블이 연결된 Select × 2 + Swap 버튼 조합. CohortComparison, FunnelAnalysis 등에서 사용합니다. | `ComparisonSelector` |
@@ -495,6 +495,15 @@
495
495
  | `focusWrap` | `boolean` | | true | 행 끝에서 다음 행으로 이동 |
496
496
  | `className` | `string` | | | 컨테이너 CSS 클래스 |
497
497
 
498
+ **Keyboard Shortcuts:**
499
+
500
+ | Keys | Action |
501
+ | --------- | -------------------- |
502
+ | `↑ ↓ ← →` | 2D 방향 탐색 |
503
+ | `Home` | 첫 항목으로 이동 |
504
+ | `End` | 마지막 항목으로 이동 |
505
+ | `Tab` | 영역 밖으로 이동 |
506
+
498
507
  #### Disclosure
499
508
 
500
509
  **Import:** `import { DisclosureRoot } from "@reopt-ai/opt-ui"`
@@ -521,6 +530,12 @@
521
530
  | `children` | `ReactNode` | Yes | | 접히는 콘텐츠 |
522
531
  | `className` | `string` | | | 기본 스타일 오버라이드 |
523
532
 
533
+ **Keyboard Shortcuts:**
534
+
535
+ | Keys | Action |
536
+ | --------------- | -------------- |
537
+ | `Enter / Space` | 열기/닫기 토글 |
538
+
524
539
  #### Tabs
525
540
 
526
541
  **Import:** `import { TabsRoot } from "@reopt-ai/opt-ui"`
@@ -556,6 +571,14 @@
556
571
  | `children` | `ReactNode` | Yes | | 패널 콘텐츠 |
557
572
  | `className` | `string` | | | 기본 스타일 오버라이드 |
558
573
 
574
+ **Keyboard Shortcuts:**
575
+
576
+ | Keys | Action |
577
+ | ------ | ------------------- |
578
+ | `← →` | 탭 탐색 |
579
+ | `Home` | 첫 번째 탭으로 이동 |
580
+ | `End` | 마지막 탭으로 이동 |
581
+
559
582
  #### Select
560
583
 
561
584
  **Import:** `import { SelectRoot } from "@reopt-ai/opt-ui"`
@@ -600,6 +623,15 @@
600
623
  | `children` | `ReactNode` | Yes | | 옵션 레이블 |
601
624
  | `className` | `string` | | | 기본 스타일 오버라이드 |
602
625
 
626
+ **Keyboard Shortcuts:**
627
+
628
+ | Keys | Action |
629
+ | --------------- | -------------- |
630
+ | `↑ ↓` | 옵션 탐색 |
631
+ | `Enter / Space` | 옵션 선택 |
632
+ | `Esc` | 팝오버 닫기 |
633
+ | `문자 입력` | Typeahead 탐색 |
634
+
603
635
  **Examples:**
604
636
 
605
637
  _기본 선택:_
@@ -687,6 +719,13 @@ import {
687
719
  | ---------- | ----------- | -------- | ------- | -------------- |
688
720
  | `children` | `ReactNode` | Yes | | 액션 버튼 영역 |
689
721
 
722
+ **Keyboard Shortcuts:**
723
+
724
+ | Keys | Action |
725
+ | ----- | -------------------------------- |
726
+ | `Esc` | 다이얼로그 닫기 |
727
+ | `Tab` | 다이얼로그 내 포커스 이동 (트랩) |
728
+
690
729
  **Examples:**
691
730
 
692
731
  _모달 대화상자:_
@@ -766,6 +805,14 @@ import {
766
805
  | `children` | `ReactNode` | | "결과가 없습니다." | 빈 상태 메시지 |
767
806
  | `className` | `string` | | | 기본 스타일 오버라이드 |
768
807
 
808
+ **Keyboard Shortcuts:**
809
+
810
+ | Keys | Action |
811
+ | ------- | ----------- |
812
+ | `↑ ↓` | 항목 탐색 |
813
+ | `Enter` | 항목 선택 |
814
+ | `Esc` | 팝오버 닫기 |
815
+
769
816
  #### Menu
770
817
 
771
818
  **Import:** `import { MenubarRoot } from "@reopt-ai/opt-ui"`
@@ -844,6 +891,15 @@ import {
844
891
  | ----------- | -------- | -------- | ------- | ---------------------- |
845
892
  | `className` | `string` | | | 기본 스타일 오버라이드 |
846
893
 
894
+ **Keyboard Shortcuts:**
895
+
896
+ | Keys | Action |
897
+ | --------------- | -------------- |
898
+ | `← →` | 메뉴 간 탐색 |
899
+ | `↑ ↓` | 메뉴 항목 탐색 |
900
+ | `Enter / Space` | 항목 선택/토글 |
901
+ | `Esc` | 메뉴 닫기 |
902
+
847
903
  #### Toolbar
848
904
 
849
905
  **Import:** `import { ToolbarRoot } from "@reopt-ai/opt-ui"`
@@ -894,6 +950,15 @@ import {
894
950
  | `children` | `ReactNode` | Yes | | 툴팁 내용 |
895
951
  | `className` | `string` | | | 기본 스타일 오버라이드 |
896
952
 
953
+ **Keyboard Shortcuts:**
954
+
955
+ | Keys | Action |
956
+ | --------------- | --------------------- |
957
+ | `← →` | 버튼 간 탐색 |
958
+ | `Enter / Space` | 버튼 활성화 |
959
+ | `Home` | 첫 번째 버튼으로 이동 |
960
+ | `End` | 마지막 버튼으로 이동 |
961
+
897
962
  #### Form
898
963
 
899
964
  **Import:** `import { FormRoot } from "@reopt-ai/opt-ui"`
@@ -1533,6 +1598,14 @@ import {
1533
1598
  | `description` | `string` | | | 레이블 아래 설명 텍스트 |
1534
1599
  | `size` | `"sm" \| "md" \| "lg"` | | "md" | 라디오 크기 |
1535
1600
 
1601
+ **Keyboard Shortcuts:**
1602
+
1603
+ | Keys | Action |
1604
+ | ------- | ------------------- |
1605
+ | `↑ ↓` | 라디오 옵션 간 탐색 |
1606
+ | `← →` | 라디오 옵션 간 탐색 |
1607
+ | `Space` | 현재 옵션 선택 |
1608
+
1536
1609
  #### DateRangePicker
1537
1610
 
1538
1611
  **Import:** `import { DateRangePicker } from "@reopt-ai/opt-ui"`
@@ -1569,6 +1642,17 @@ import {
1569
1642
  | `delimiters` | `(string \| RegExp)[]` | | [",", ";", "\n"] | 붙여넣기 시 태그를 분할할 구분자 목록 |
1570
1643
  | `allowDuplicates` | `boolean` | | false | 중복 태그 허용 여부 |
1571
1644
 
1645
+ **Keyboard Shortcuts:**
1646
+
1647
+ | Keys | Action |
1648
+ | -------------- | ---------------------------------------- |
1649
+ | `Enter` | 태그 추가 |
1650
+ | `Backspace` | 마지막 태그 삭제 (입력 비어있을 때) |
1651
+ | `←/→` | 태그 간 이동 (Composite roving tabindex) |
1652
+ | `Delete` | 포커스된 태그 삭제 |
1653
+ | `Ctrl+Z` | 실행취소 |
1654
+ | `Ctrl+Shift+Z` | 다시실행 |
1655
+
1572
1656
  #### ColorPicker
1573
1657
 
1574
1658
  **Import:** `import { ColorPicker } from "@reopt-ai/opt-ui"`
@@ -1630,6 +1714,13 @@ import {
1630
1714
  | `gutter` | `number` | | 8 | 트리거와의 간격 (px) |
1631
1715
  | `className` | `string` | | | 커스텀 CSS 클래스 |
1632
1716
 
1717
+ **Keyboard Shortcuts:**
1718
+
1719
+ | Keys | Action |
1720
+ | --------------- | ------------- |
1721
+ | `Esc` | 팝오버 닫기 |
1722
+ | `Enter / Space` | 트리거 활성화 |
1723
+
1633
1724
  #### DropdownMenu
1634
1725
 
1635
1726
  **Import:** `import { DropdownMenu } from "@reopt-ai/opt-ui"`
@@ -1648,6 +1739,14 @@ import {
1648
1739
  | `onClick` | `() => void` | | | 항목 클릭 핸들러 |
1649
1740
  | `disabled` | `boolean` | | | 비활성 상태 |
1650
1741
 
1742
+ **Keyboard Shortcuts:**
1743
+
1744
+ | Keys | Action |
1745
+ | --------------- | -------------- |
1746
+ | `↑ ↓` | 메뉴 항목 탐색 |
1747
+ | `Enter / Space` | 항목 선택 |
1748
+ | `Esc` | 메뉴 닫기 |
1749
+
1651
1750
  #### NumberInput
1652
1751
 
1653
1752
  **Import:** `import { NumberInput } from "@reopt-ai/opt-ui"`
@@ -1668,6 +1767,13 @@ import {
1668
1767
  | `disabledReason` | `string` | | | aria-disabled 상태에서 노출할 비활성 사유 |
1669
1768
  | `labels` | `NumberInputLabels` | | | 입력/증감/clear/invalid 접근성 문구 |
1670
1769
 
1770
+ **Keyboard Shortcuts:**
1771
+
1772
+ | Keys | Action |
1773
+ | ---- | ------------------- |
1774
+ | `↑` | 값 증가 (step 단위) |
1775
+ | `↓` | 값 감소 (step 단위) |
1776
+
1671
1777
  #### Slider
1672
1778
 
1673
1779
  **Import:** `import { Slider } from "@reopt-ai/opt-ui"`
@@ -1735,30 +1841,37 @@ import {
1735
1841
 
1736
1842
  **ResizablePanelGroup:**
1737
1843
 
1738
- | Prop | Type | Required | Default | Description |
1739
- | ------------ | ---------------------------- | -------- | ------- | ---------------------------------------- |
1740
- | `direction` | `"horizontal" \| "vertical"` | Yes | | 패널 분할 방향 |
1741
- | `children` | `ReactNode` | Yes | | ResizablePanel + ResizableHandle 조합 |
1742
- | `autoSaveId` | `string` | | | 로컬 스토리지에 크기 상태 저장 (고유 ID) |
1743
- | `className` | `string` | | | 커스텀 CSS 클래스 |
1844
+ | Prop | Type | Required | Default | Description |
1845
+ | ----------------- | ------------------------------------------ | -------- | ------- | --------------------------------------------------- |
1846
+ | `direction` | `"horizontal" \| "vertical"` | Yes | | 패널 분할 방향 |
1847
+ | `children` | `ReactNode` | Yes | | ResizablePanel + ResizableHandle 조합 |
1848
+ | `id` | `string` | | | 그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID |
1849
+ | `defaultLayout` | `Record<string, number>` | | | 패널 ID별 초기 비율(0-100) |
1850
+ | `onLayoutChanged` | `(layout: Record<string, number>) => void` | | | 드래그가 끝난 뒤 확정된 레이아웃 콜백 |
1851
+ | `groupRef` | `Ref<ResizablePanelGroupHandle>` | | | 레이아웃 조회·설정을 위한 명령형 그룹 ref |
1852
+ | `autoSaveId` | `string` | | | id의 deprecated 별칭 |
1853
+ | `className` | `string` | | | 커스텀 CSS 클래스 |
1744
1854
 
1745
1855
  **ResizablePanel:**
1746
1856
 
1747
- | Prop | Type | Required | Default | Description |
1748
- | ------------- | ----------- | -------- | ------- | ----------------------------- |
1749
- | `defaultSize` | `number` | | | 초기 크기 (퍼센트, 0-100) |
1750
- | `minSize` | `number` | | | 최소 크기 (퍼센트) |
1751
- | `maxSize` | `number` | | | 최대 크기 (퍼센트) |
1752
- | `collapsible` | `boolean` | | false | 최소 크기 이하 시 접히기 허용 |
1753
- | `children` | `ReactNode` | Yes | | 패널 콘텐츠 |
1754
- | `className` | `string` | | | 커스텀 CSS 클래스 |
1857
+ | Prop | Type | Required | Default | Description |
1858
+ | ------------- | ------------------------------------------------------------------------------------------ | -------- | ------- | -------------------------------------------------- |
1859
+ | `defaultSize` | `number \| string` | | | 초기 크기. 숫자는 퍼센트, 문자열은 명시한 CSS 단위 |
1860
+ | `minSize` | `number \| string` | | | 최소 크기. 숫자는 퍼센트 |
1861
+ | `maxSize` | `number \| string` | | | 최대 크기. 숫자는 퍼센트 |
1862
+ | `collapsible` | `boolean` | | false | 최소 크기 이하 시 접히기 허용 |
1863
+ | `onResize` | `(size: ResizablePanelSize, id?: string \| number, previous?: ResizablePanelSize) => void` | | | 패널 크기 변경 콜백 |
1864
+ | `panelRef` | `Ref<ResizablePanelHandle>` | | | 접기·펼치기·크기 제어를 위한 명령형 패널 ref |
1865
+ | `children` | `ReactNode` | Yes | | 패널 콘텐츠 |
1866
+ | `className` | `string` | | | 커스텀 CSS 클래스 |
1755
1867
 
1756
1868
  **ResizableHandle:**
1757
1869
 
1758
- | Prop | Type | Required | Default | Description |
1759
- | ------------ | --------- | -------- | ------- | ----------------------- |
1760
- | `withHandle` | `boolean` | | false | 시각적 드래그 핸들 표시 |
1761
- | `className` | `string` | | | 커스텀 CSS 클래스 |
1870
+ | Prop | Type | Required | Default | Description |
1871
+ | ------------ | --------- | -------- | ------- | ---------------------------------- |
1872
+ | `withHandle` | `boolean` | | false | 시각적 드래그 핸들 표시 |
1873
+ | `disabled` | `boolean` | | | 드래그 및 키보드 리사이즈 비활성화 |
1874
+ | `className` | `string` | | | 커스텀 CSS 클래스 |
1762
1875
 
1763
1876
  #### BlockLayout
1764
1877
 
@@ -1856,6 +1969,13 @@ const MyDashboard = createBlock<MyDashboardProps>(
1856
1969
  | `swipeToDismiss` | `boolean` | | true | 가장자리 방향으로 드래그해 닫기 활성화 |
1857
1970
  | `swipeDismissThreshold` | `number` | | 80 | 닫힘 커밋에 필요한 드래그 거리(px) |
1858
1971
 
1972
+ **Keyboard Shortcuts:**
1973
+
1974
+ | Keys | Action |
1975
+ | ----- | ----------------------- |
1976
+ | `Esc` | 드로어 닫기 |
1977
+ | `Tab` | 드로어 내부 포커스 이동 |
1978
+
1859
1979
  #### Pagination
1860
1980
 
1861
1981
  **Import:** `import { Pagination } from "@reopt-ai/opt-ui"`
@@ -1909,6 +2029,15 @@ const MyDashboard = createBlock<MyDashboardProps>(
1909
2029
  | `readOnly` | `boolean` | | false | 읽기 전용 모드 |
1910
2030
  | `size` | `"sm" \| "md" \| "lg"` | | "md" | 별 아이콘 크기 |
1911
2031
 
2032
+ **Keyboard Shortcuts:**
2033
+
2034
+ | Keys | Action |
2035
+ | ----------------------- | ---------------- |
2036
+ | `ArrowRight / ArrowUp` | 별점 1 증가 |
2037
+ | `ArrowLeft / ArrowDown` | 별점 1 감소 |
2038
+ | `Home` | 별점 1로 설정 |
2039
+ | `End` | 별점 최대로 설정 |
2040
+
1912
2041
  #### ErrorBoundary
1913
2042
 
1914
2043
  **Import:** `import { ErrorBoundary } from "@reopt-ai/opt-ui"`
@@ -1951,6 +2080,15 @@ const MyDashboard = createBlock<MyDashboardProps>(
1951
2080
  | `keywords` | `string[]` | | | value에 더해 검색어와 비교할 추가 키워드 |
1952
2081
  | `onSelect` | `(value: string) => void` | | | Enter/클릭 시 호출 |
1953
2082
 
2083
+ **Keyboard Shortcuts:**
2084
+
2085
+ | Keys | Action |
2086
+ | ------------ | ---------------- |
2087
+ | `↑ ↓` | 활성 항목 이동 |
2088
+ | `Home / End` | 처음/마지막 항목 |
2089
+ | `Enter` | 활성 항목 선택 |
2090
+ | `Esc` | dialog 닫기 |
2091
+
1954
2092
  #### ShaderSurface
1955
2093
 
1956
2094
  **Import:** `import { ShaderSurface } from "@reopt-ai/opt-ui"`
@@ -2014,6 +2152,13 @@ const MyDashboard = createBlock<MyDashboardProps>(
2014
2152
  | `stats` | `StatCard[]` | Yes | | 통계 데이터 배열. { id, title, value, change, trend } |
2015
2153
  | `columns` | `number` | | 3 | 행당 컬럼 수 |
2016
2154
 
2155
+ **Keyboard Shortcuts:**
2156
+
2157
+ | Keys | Action |
2158
+ | --------- | ------------------ |
2159
+ | `↑ ↓ ← →` | 카드 간 2D 탐색 |
2160
+ | `Tab` | 다음 섹션으로 이동 |
2161
+
2017
2162
  #### SearchCombobox
2018
2163
 
2019
2164
  **Import:** `import { SearchCombobox } from "@reopt-ai/opt-ui"`
@@ -2212,6 +2357,17 @@ const fields = [
2212
2357
  | `bar` | `(row: T) => number` | | | 인라인 프로그레스 바 비율(0-1) 계산 함수. 범위 밖/NaN은 보정 |
2213
2358
  | `barColor` | `string` | | "bg-accent" | 인라인 바 색상 클래스 |
2214
2359
 
2360
+ **Keyboard Shortcuts:**
2361
+
2362
+ | Keys | Action |
2363
+ | -------------------------------- | ---------------------------------- |
2364
+ | `↑ ↓` | 행 탐색 |
2365
+ | `← →` | 셀 탐색 |
2366
+ | `Enter / Space` | 정렬 가능한 헤더 또는 행 활성화 |
2367
+ | `리사이즈 핸들: ← →` | 컬럼 너비를 10px 단위로 조절 |
2368
+ | `리사이즈 핸들: Shift+← Shift+→` | 컬럼 너비를 40px 단위로 조절 |
2369
+ | `리사이즈 핸들: Home / End` | 컬럼 너비를 최솟값/최댓값으로 이동 |
2370
+
2215
2371
  **Examples:**
2216
2372
 
2217
2373
  _기본 테이블:_
@@ -2301,6 +2457,14 @@ import { DataTable } from "@reopt-ai/opt-ui";
2301
2457
  | `onTaskStatusChange` | `(task: TaskDef, completed: boolean) => void` | | | 완료 상태 변경 핸들러 |
2302
2458
  | `showSubtasks` | `boolean` | | false | 하위 작업 표시 여부 |
2303
2459
 
2460
+ **Keyboard Shortcuts:**
2461
+
2462
+ | Keys | Action |
2463
+ | ------- | ------------ |
2464
+ | `↑ ↓` | 작업 간 이동 |
2465
+ | `Enter` | 작업 선택 |
2466
+ | `Space` | 완료 토글 |
2467
+
2304
2468
  #### ActivityFeed
2305
2469
 
2306
2470
  **Import:** `import { ActivityFeed } from "@reopt-ai/opt-ui"`
@@ -2315,6 +2479,13 @@ import { DataTable } from "@reopt-ai/opt-ui";
2315
2479
  | `layout` | `"list" \| "compact"` | | "list" | 시간 표시 레이아웃 모드 |
2316
2480
  | `renderActions` | `(activity: ActivityDef) => ReactNode` | | | 각 활동 항목 우측 액션 슬롯 렌더 함수 |
2317
2481
 
2482
+ **Keyboard Shortcuts:**
2483
+
2484
+ | Keys | Action |
2485
+ | ------- | ------------ |
2486
+ | `↑ ↓` | 활동 간 이동 |
2487
+ | `Enter` | 활동 선택 |
2488
+
2318
2489
  #### FilterBar
2319
2490
 
2320
2491
  **Import:** `import { FilterBar } from "@reopt-ai/opt-ui"`
@@ -2357,6 +2528,14 @@ const filters = [
2357
2528
  | `layout` | `"grid" \| "list"` | | "grid" | 레이아웃 모드 |
2358
2529
  | `columns` | `2 \| 3 \| 4` | | 3 | 그리드 컬럼 수 |
2359
2530
 
2531
+ **Keyboard Shortcuts:**
2532
+
2533
+ | Keys | Action |
2534
+ | --------- | --------------------- |
2535
+ | `↑ ↓ ← →` | 그리드에서 4방향 탐색 |
2536
+ | `↑ ↓` | 리스트에서 수직 탐색 |
2537
+ | `Enter` | 작업 실행 |
2538
+
2360
2539
  #### TeamMemberList
2361
2540
 
2362
2541
  **Import:** `import { TeamMemberList } from "@reopt-ai/opt-ui"`
@@ -2370,6 +2549,13 @@ const filters = [
2370
2549
  | `maxDisplay` | `number` | | | 최대 표시 인원 |
2371
2550
  | `onMemberClick` | `(member: TeamMemberDef) => void` | | | 팀원 클릭 핸들러 |
2372
2551
 
2552
+ **Keyboard Shortcuts:**
2553
+
2554
+ | Keys | Action |
2555
+ | ------- | ------------ |
2556
+ | `↑ ↓` | 팀원 간 이동 |
2557
+ | `Enter` | 팀원 선택 |
2558
+
2373
2559
  #### AuthForm
2374
2560
 
2375
2561
  **Import:** `import { AuthForm } from "@reopt-ai/opt-ui"`
@@ -2466,6 +2652,13 @@ const filters = [
2466
2652
  | `onFailureClick` | `(failure: FailureItem) => void` | | | 실패 항목 클릭 핸들러 |
2467
2653
  | `renderActions` | `(failure: FailureItem) => ReactNode` | | | 각 항목 우측 액션 슬롯 렌더 함수 |
2468
2654
 
2655
+ **Keyboard Shortcuts:**
2656
+
2657
+ | Keys | Action |
2658
+ | ------- | ----------------- |
2659
+ | `↑ ↓` | 실패 항목 간 이동 |
2660
+ | `Enter` | 실패 항목 선택 |
2661
+
2469
2662
  #### KeyValueEditor
2470
2663
 
2471
2664
  **Import:** `import { KeyValueEditor } from "@reopt-ai/opt-ui"`
@@ -2482,6 +2675,12 @@ const filters = [
2482
2675
  | `renderActions` | `(entry: KeyValueEntry, index: number) => ReactNode` | | | 항목별 커스텀 액션 슬롯 |
2483
2676
  | `validateKey` | `(key: string, entries: KeyValueEntry[]) => string \| undefined` | | | 키 유효성 검사 함수 |
2484
2677
 
2678
+ **Keyboard Shortcuts:**
2679
+
2680
+ | Keys | Action |
2681
+ | ----- | ------------------ |
2682
+ | `Tab` | 키/값 필드 간 이동 |
2683
+
2485
2684
  #### WorkflowCanvas
2486
2685
 
2487
2686
  **Import:** `import { WorkflowCanvas } from "@reopt-ai/opt-ui"`
@@ -2494,6 +2693,13 @@ const filters = [
2494
2693
  | `onStepMove` | `(stepId: string, row: number, col: number) => void` | | | 화살표 키 이동 핸들러 |
2495
2694
  | `onSelectStep` | `(step: WorkflowCanvasStep) => void` | | | 스텝 선택 핸들러 |
2496
2695
 
2696
+ **Keyboard Shortcuts:**
2697
+
2698
+ | Keys | Action |
2699
+ | --------- | ----------------------------------- |
2700
+ | `↑ ↓ ← →` | 선택 스텝 이동 (onStepMove 제공 시) |
2701
+ | `Enter` | 스텝 선택 |
2702
+
2497
2703
  #### CodeSnippetViewer
2498
2704
 
2499
2705
  **Import:** `import { CodeSnippetViewer } from "@reopt-ai/opt-ui"`
@@ -2668,6 +2874,14 @@ const filters = [
2668
2874
  | `badge` | `ReactNode` | | | 우측 배지 (숫자/텍스트). 접힌 상태에서 아이콘 위 dot으로 축소 |
2669
2875
  | `className` | `string` | | | 커스텀 CSS 클래스 |
2670
2876
 
2877
+ **Keyboard Shortcuts:**
2878
+
2879
+ | Keys | Action |
2880
+ | ------------ | ------------------------------------- |
2881
+ | `Ctrl+[` | 사이드바 접기/펼치기 토글 |
2882
+ | `↑ ↓` | 사이드바 항목 간 이동 |
2883
+ | `Home / End` | 첫 번째/마지막 사이드바 항목으로 이동 |
2884
+
2671
2885
  #### AppShell
2672
2886
 
2673
2887
  **Import:** `import { AppShell } from "@reopt-ai/opt-ui"`
@@ -2876,16 +3090,40 @@ import { AppShell } from "@reopt-ai/opt-ui";
2876
3090
  #### SavedFilters
2877
3091
 
2878
3092
  **Import:** `import { SavedFilters } from "@reopt-ai/opt-ui"`
2879
- **Dependencies:** popover (core), input (core)
2880
-
2881
- | Prop | Type | Required | Default | Description |
2882
- | ---------------- | ---------------------------------------------------------- | -------- | ------- | -------------------- |
2883
- | `currentFilters` | `Record<string, unknown>` | Yes | | 현재 적용 중인 필터 |
2884
- | `presets` | `FilterPreset[]` | Yes | | 저장된 프리셋 목록 |
2885
- | `onSavePreset` | `(name: string, filters: Record<string, unknown>) => void` | Yes | | 프리셋 저장 콜백 |
2886
- | `onLoadPreset` | `(preset: FilterPreset) => void` | Yes | | 프리셋 불러오기 콜백 |
2887
- | `onDeletePreset` | `(presetId: string) => void` | Yes | | 프리셋 삭제 콜백 |
2888
- | `className` | `string` | | | 커스텀 CSS 클래스 |
3093
+ **Dependencies:** popover (core), input (core), button (core)
3094
+
3095
+ **SavedFilters:**
3096
+
3097
+ | Prop | Type | Required | Default | Description |
3098
+ | ---------------- | ---------------------------------------------------------- | -------- | ------- | -------------------------------------------------- |
3099
+ | `currentFilters` | `Record<string, unknown>` | Yes | | 현재 적용 중인 필터 |
3100
+ | `presets` | `FilterPreset[]` | Yes | | 저장된 프리셋 목록 |
3101
+ | `onSavePreset` | `(name: string, filters: Record<string, unknown>) => void` | Yes | | 프리셋 저장 콜백 |
3102
+ | `onLoadPreset` | `(preset: FilterPreset) => void` | Yes | | 프리셋 불러오기 콜백 |
3103
+ | `onDeletePreset` | `(presetId: string) => void` | Yes | | 프리셋 삭제 콜백 |
3104
+ | `labels` | `SavedFiltersLabels` | | | 트리거, 빈 상태, 저장 및 삭제 확인 문구 오버라이드 |
3105
+ | `className` | `string` | | | 커스텀 CSS 클래스 |
3106
+
3107
+ **SavedFiltersLabels:**
3108
+
3109
+ | Prop | Type | Required | Default | Description |
3110
+ | -------------------- | --------------------------- | -------- | ------------------ | --------------------------------------- |
3111
+ | `triggerLabel` | `(count: number) => string` | | | 저장된 프리셋 수를 포함한 트리거 레이블 |
3112
+ | `emptyMessage` | `string` | | "No saved filters" | 프리셋이 없을 때 표시할 메시지 |
3113
+ | `deleteLabel` | `(name: string) => string` | | | 프리셋 삭제 버튼의 접근 가능한 이름 |
3114
+ | `namePlaceholder` | `string` | | "Filter name…" | 새 프리셋 이름 입력 안내 |
3115
+ | `saveLabel` | `string` | | "Save" | 새 프리셋 저장 버튼 레이블 |
3116
+ | `confirmDeleteLabel` | `string` | | "Confirm" | 삭제 확인 버튼 레이블 |
3117
+ | `cancelDeleteLabel` | `string` | | "Cancel" | 삭제 취소 버튼 레이블 |
3118
+
3119
+ **Keyboard Shortcuts:**
3120
+
3121
+ | Keys | Action |
3122
+ | ------------ | ------------------------------------------- |
3123
+ | `↑ ↓` | 저장된 프리셋 간 이동 |
3124
+ | `Home / End` | 첫 번째/마지막 프리셋으로 이동 |
3125
+ | `Enter` | 프리셋 불러오기 또는 새 프리셋 저장 |
3126
+ | `Escape` | 삭제 확인 취소 후 삭제 버튼으로 포커스 복귀 |
2889
3127
 
2890
3128
  #### NotificationCenter
2891
3129
 
@@ -2954,6 +3192,13 @@ import { AppShell } from "@reopt-ai/opt-ui";
2954
3192
  | `showHint` | `boolean` | | true | Shift+Enter 힌트 표시 여부 |
2955
3193
  | `labels` | `ChatInputLabels` | | | i18n 라벨 오버라이드 |
2956
3194
 
3195
+ **Keyboard Shortcuts:**
3196
+
3197
+ | Keys | Action |
3198
+ | --------------- | ----------- |
3199
+ | `Enter` | 메시지 전송 |
3200
+ | `Shift + Enter` | 줄바꿈 |
3201
+
2957
3202
  **Examples:**
2958
3203
 
2959
3204
  _채팅 입력:_