@qijenchen/design-system 0.1.0-beta.74 → 0.1.0-beta.75

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 (82) hide show
  1. package/dist/components/BulkActionBar/bulk-action-bar.d.ts.map +1 -1
  2. package/dist/components/BulkActionBar/bulk-action-bar.js +1 -1
  3. package/dist/components/BulkActionBar/bulk-action-bar.js.map +1 -1
  4. package/dist/components/DataTable/data-table.d.ts +27 -6
  5. package/dist/components/DataTable/data-table.d.ts.map +1 -1
  6. package/dist/components/DataTable/data-table.js +57 -34
  7. package/dist/components/DataTable/data-table.js.map +1 -1
  8. package/ds-canonical/hooks/check_story_invariants.sh +26 -0
  9. package/ds-canonical/hooks/tests/test_check_story_invariants.sh +30 -0
  10. package/llms-full.txt +1 -1
  11. package/llms.txt +1 -1
  12. package/package.json +1 -1
  13. package/src/components/Accordion/accordion.principles.stories.tsx +3 -3
  14. package/src/components/Alert/alert.principles.stories.tsx +5 -5
  15. package/src/components/AppShell/app-shell.principles.stories.tsx +6 -6
  16. package/src/components/AspectRatio/aspect-ratio.principles.stories.tsx +1 -1
  17. package/src/components/Avatar/avatar.principles.stories.tsx +3 -3
  18. package/src/components/Badge/badge.principles.stories.tsx +3 -3
  19. package/src/components/Breadcrumb/breadcrumb.principles.stories.tsx +3 -3
  20. package/src/components/BulkActionBar/bulk-action-bar.anatomy.stories.tsx +1 -1
  21. package/src/components/BulkActionBar/bulk-action-bar.principles.stories.tsx +3 -3
  22. package/src/components/BulkActionBar/bulk-action-bar.spec.md +4 -2
  23. package/src/components/BulkActionBar/bulk-action-bar.stories.tsx +2 -2
  24. package/src/components/BulkActionBar/bulk-action-bar.tsx +3 -2
  25. package/src/components/Button/button.principles.stories.tsx +3 -3
  26. package/src/components/Calendar/calendar.principles.stories.tsx +3 -3
  27. package/src/components/Carousel/carousel.principles.stories.tsx +2 -2
  28. package/src/components/Chart/chart.principles.stories.tsx +4 -4
  29. package/src/components/Checkbox/checkbox.principles.stories.tsx +2 -2
  30. package/src/components/Chip/chip.principles.stories.tsx +3 -3
  31. package/src/components/Coachmark/coachmark.principles.stories.tsx +3 -3
  32. package/src/components/Combobox/combobox.anatomy.stories.tsx +2 -2
  33. package/src/components/Combobox/combobox.principles.stories.tsx +5 -5
  34. package/src/components/Command/command.principles.stories.tsx +7 -7
  35. package/src/components/DataTable/data-table.principles.stories.tsx +3 -3
  36. package/src/components/DataTable/data-table.spec.md +23 -15
  37. package/src/components/DataTable/data-table.stories.tsx +29 -25
  38. package/src/components/DataTable/data-table.tsx +92 -44
  39. package/src/components/DateGrid/date-grid.principles.stories.tsx +4 -4
  40. package/src/components/DatePicker/date-picker.principles.stories.tsx +5 -5
  41. package/src/components/DescriptionList/description-list.principles.stories.tsx +5 -5
  42. package/src/components/Dialog/dialog.principles.stories.tsx +4 -4
  43. package/src/components/DropdownMenu/dropdown-menu.anatomy.stories.tsx +1 -1
  44. package/src/components/DropdownMenu/dropdown-menu.principles.stories.tsx +5 -5
  45. package/src/components/Empty/empty.principles.stories.tsx +2 -2
  46. package/src/components/Field/field.principles.stories.tsx +4 -4
  47. package/src/components/FileItem/file-item.principles.stories.tsx +5 -5
  48. package/src/components/FileUpload/file-upload.principles.stories.tsx +4 -4
  49. package/src/components/FileViewer/file-viewer.principles.stories.tsx +5 -5
  50. package/src/components/HoverCard/hover-card.principles.stories.tsx +5 -5
  51. package/src/components/Input/input.principles.stories.tsx +4 -4
  52. package/src/components/LinkInput/link-input.principles.stories.tsx +5 -5
  53. package/src/components/Menu/menu-item.principles.stories.tsx +7 -7
  54. package/src/components/Notice/notice.principles.stories.tsx +7 -7
  55. package/src/components/NumberInput/number-input.principles.stories.tsx +4 -4
  56. package/src/components/OverflowIndicator/overflow-indicator.principles.stories.tsx +5 -5
  57. package/src/components/PeoplePicker/people-picker.principles.stories.tsx +3 -3
  58. package/src/components/Popover/popover.principles.stories.tsx +1 -1
  59. package/src/components/ProfileCard/profile-card.principles.stories.tsx +1 -1
  60. package/src/components/ProgressBar/progress-bar.principles.stories.tsx +2 -2
  61. package/src/components/RadioGroup/radio-group.principles.stories.tsx +2 -2
  62. package/src/components/Rating/rating.principles.stories.tsx +3 -3
  63. package/src/components/ScrollArea/scroll-area.principles.stories.tsx +4 -4
  64. package/src/components/Select/select.principles.stories.tsx +5 -5
  65. package/src/components/SelectMenu/select-menu.principles.stories.tsx +8 -8
  66. package/src/components/SelectionControl/selection-item.principles.stories.tsx +7 -7
  67. package/src/components/Separator/separator.principles.stories.tsx +4 -4
  68. package/src/components/Sheet/sheet.principles.stories.tsx +2 -2
  69. package/src/components/Sidebar/sidebar.principles.stories.tsx +4 -4
  70. package/src/components/Skeleton/skeleton.principles.stories.tsx +5 -5
  71. package/src/components/Slider/slider.principles.stories.tsx +3 -3
  72. package/src/components/Steps/steps.principles.stories.tsx +4 -4
  73. package/src/components/Switch/switch.principles.stories.tsx +1 -1
  74. package/src/components/Tabs/tabs.principles.stories.tsx +3 -3
  75. package/src/components/Tag/tag.principles.stories.tsx +3 -3
  76. package/src/components/Textarea/textarea.principles.stories.tsx +2 -2
  77. package/src/components/TimePicker/time-picker.principles.stories.tsx +5 -5
  78. package/src/components/Toast/toast.principles.stories.tsx +2 -2
  79. package/src/components/Tooltip/tooltip.principles.stories.tsx +3 -3
  80. package/src/components/TreeView/tree-view.principles.stories.tsx +5 -5
  81. package/src/components/TreeView/tree-view.stories.tsx +1 -1
  82. package/src/tokens/color/color.spec.md +2 -0
package/src/components/Empty/empty.principles.stories.tsx CHANGED
@@ -59,10 +59,10 @@ export const UsageGuidance: Story = {
59
59
  <p>適合 Empty 的真實業務場景(點擊跳轉「展示」頁範例):</p>
60
60
  <ul className="space-y-1">
61
61
  <li>
62
- <LinkTo kind="Design System/Components/Empty/展示" name="搜尋無結果"><span className="text-primary hover:underline font-medium cursor-pointer">搜尋無結果</span></LinkTo>
62
+ <LinkTo kind="Design System/Components/Empty/展示" name="搜尋無結果"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">搜尋無結果</span></LinkTo>
63
63
  </li>
64
64
  <li>
65
- <LinkTo kind="Design System/Components/Empty/展示" name="空清單"><span className="text-primary hover:underline font-medium cursor-pointer">空清單</span></LinkTo>
65
+ <LinkTo kind="Design System/Components/Empty/展示" name="空清單"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">空清單</span></LinkTo>
66
66
  </li>
67
67
  </ul>
68
68
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方「vs 近親」)。</p>
package/src/components/Field/field.principles.stories.tsx CHANGED
@@ -49,10 +49,10 @@ export const UsageGuidance: Story = {
49
49
  <div className="prose prose-sm max-w-prose mb-8">
50
50
  <p>適合 Field 的真實業務場景(點擊跳轉「展示」頁範例):</p>
51
51
  <ul className="space-y-1">
52
- <li><LinkTo kind="Design System/Components/Field/展示" name="垂直"><span className="text-primary hover:underline font-medium cursor-pointer">註冊 / 建立專案表單 — 引導式逐欄輸入(垂直佈局)</span></LinkTo></li>
53
- <li><LinkTo kind="Design System/Components/Field/展示" name="水平"><span className="text-primary hover:underline font-medium cursor-pointer">帳號設定 / 偏好設定頁 — 修改已知屬性(水平佈局)</span></LinkTo></li>
54
- <li><LinkTo kind="Design System/Components/Field/展示" name="混合控制元件的高度對齊"><span className="text-primary hover:underline font-medium cursor-pointer">同一表單混用 Input / Select / DatePicker 等控制元件</span></LinkTo></li>
55
- <li><LinkTo kind="Design System/Components/Field/展示" name="SegmentedControl 作為 Field 控制元件"><span className="text-primary hover:underline font-medium cursor-pointer">少量互斥選項(計費週期、版面密度)用 SegmentedControl 當控制元件</span></LinkTo></li>
52
+ <li><LinkTo kind="Design System/Components/Field/展示" name="垂直"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">註冊 / 建立專案表單 — 引導式逐欄輸入(垂直佈局)</span></LinkTo></li>
53
+ <li><LinkTo kind="Design System/Components/Field/展示" name="水平"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">帳號設定 / 偏好設定頁 — 修改已知屬性(水平佈局)</span></LinkTo></li>
54
+ <li><LinkTo kind="Design System/Components/Field/展示" name="混合控制元件的高度對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">同一表單混用 Input / Select / DatePicker 等控制元件</span></LinkTo></li>
55
+ <li><LinkTo kind="Design System/Components/Field/展示" name="SegmentedControl 作為 Field 控制元件"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">少量互斥選項(計費週期、版面密度)用 SegmentedControl 當控制元件</span></LinkTo></li>
56
56
  </ul>
57
57
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
58
58
  </div>
package/src/components/FileItem/file-item.principles.stories.tsx CHANGED
@@ -43,19 +43,19 @@ export const UsageGuidance: Story = {
43
43
  <p>適合 FileItem 的真實業務場景(點擊跳轉「展示」頁範例):</p>
44
44
  <ul className="space-y-1">
45
45
  <li>
46
- <LinkTo kind="Design System/Components/FileItem/展示" name="豐富樣式"><span className="text-primary hover:underline font-medium cursor-pointer">圖片 / 設計稿上傳 — 需要縮圖預覽(豐富樣式)</span></LinkTo>
46
+ <LinkTo kind="Design System/Components/FileItem/展示" name="豐富樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">圖片 / 設計稿上傳 — 需要縮圖預覽(豐富樣式)</span></LinkTo>
47
47
  </li>
48
48
  <li>
49
- <LinkTo kind="Design System/Components/FileItem/展示" name="緊湊樣式"><span className="text-primary hover:underline font-medium cursor-pointer">CSV / JSON 批次匯入的密集清單(緊湊樣式)</span></LinkTo>
49
+ <LinkTo kind="Design System/Components/FileItem/展示" name="緊湊樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">CSV / JSON 批次匯入的密集清單(緊湊樣式)</span></LinkTo>
50
50
  </li>
51
51
  <li>
52
- <LinkTo kind="Design System/Components/FileItem/展示" name="懸停替換"><span className="text-primary hover:underline font-medium cursor-pointer">上傳完成後滑入整列、狀態 icon 換成下載鈕(懸停替換)</span></LinkTo>
52
+ <LinkTo kind="Design System/Components/FileItem/展示" name="懸停替換"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">上傳完成後滑入整列、狀態 icon 換成下載鈕(懸停替換)</span></LinkTo>
53
53
  </li>
54
54
  <li>
55
- <LinkTo kind="Design System/Components/FileItem/展示" name="已上傳"><span className="text-primary hover:underline font-medium cursor-pointer">工單 / 訊息附件的已上傳靜態檔案</span></LinkTo>
55
+ <LinkTo kind="Design System/Components/FileItem/展示" name="已上傳"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">工單 / 訊息附件的已上傳靜態檔案</span></LinkTo>
56
56
  </li>
57
57
  <li>
58
- <LinkTo kind="Design System/Components/FileItem/展示" name="緊湊 混合"><span className="text-primary hover:underline font-medium cursor-pointer">同一批次混合上傳中 / 完成 / 失敗狀態的清單</span></LinkTo>
58
+ <LinkTo kind="Design System/Components/FileItem/展示" name="緊湊 混合"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">同一批次混合上傳中 / 完成 / 失敗狀態的清單</span></LinkTo>
59
59
  </li>
60
60
  </ul>
61
61
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見 <code>Vs*Rule</code> stories)。</p>
package/src/components/FileUpload/file-upload.principles.stories.tsx CHANGED
@@ -64,16 +64,16 @@ export const UsageGuidance: Story = {
64
64
  <p>適合 FileUpload 的真實業務場景(點擊跳轉「展示」頁範例):</p>
65
65
  <ul className="space-y-1">
66
66
  <li>
67
- <LinkTo kind="Design System/Components/FileUpload/展示" name="單檔上傳"><span className="text-primary hover:underline font-medium cursor-pointer">履歷 / 大頭貼等單檔上傳</span></LinkTo>
67
+ <LinkTo kind="Design System/Components/FileUpload/展示" name="單檔上傳"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">履歷 / 大頭貼等單檔上傳</span></LinkTo>
68
68
  </li>
69
69
  <li>
70
- <LinkTo kind="Design System/Components/FileUpload/展示" name="批次上傳"><span className="text-primary hover:underline font-medium cursor-pointer">相簿照片 / 多檔附件批次上傳</span></LinkTo>
70
+ <LinkTo kind="Design System/Components/FileUpload/展示" name="批次上傳"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">相簿照片 / 多檔附件批次上傳</span></LinkTo>
71
71
  </li>
72
72
  <li>
73
- <LinkTo kind="Design System/Components/FileUpload/展示" name="內建 files 屬性"><span className="text-primary hover:underline font-medium cursor-pointer">上傳後直接顯示進度清單(內建 files 屬性)</span></LinkTo>
73
+ <LinkTo kind="Design System/Components/FileUpload/展示" name="內建 files 屬性"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">上傳後直接顯示進度清單(內建 files 屬性)</span></LinkTo>
74
74
  </li>
75
75
  <li>
76
- <LinkTo kind="Design System/Components/FileUpload/展示" name="自訂內容"><span className="text-primary hover:underline font-medium cursor-pointer">品牌化上傳區 — 自訂 dropzone 內容</span></LinkTo>
76
+ <LinkTo kind="Design System/Components/FileUpload/展示" name="自訂內容"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">品牌化上傳區 — 自訂 dropzone 內容</span></LinkTo>
77
77
  </li>
78
78
  </ul>
79
79
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見 <code>Vs*Rule</code> stories)。</p>
package/src/components/FileViewer/file-viewer.principles.stories.tsx CHANGED
@@ -106,19 +106,19 @@ export const UsageGuidance: Story = {
106
106
  <p>適合 FileViewer 的真實業務場景(點擊跳轉「展示」頁範例):</p>
107
107
  <ul className="space-y-1">
108
108
  <li>
109
- <LinkTo kind="Design System/Components/FileViewer/展示" name="Jira — 附件多圖檢視"><span className="text-primary hover:underline font-medium cursor-pointer">Jira — 附件多圖檢視</span></LinkTo>
109
+ <LinkTo kind="Design System/Components/FileViewer/展示" name="Jira — 附件多圖檢視"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Jira — 附件多圖檢視</span></LinkTo>
110
110
  </li>
111
111
  <li>
112
- <LinkTo kind="Design System/Components/FileViewer/展示" name="Notion — 頁內配圖相簿"><span className="text-primary hover:underline font-medium cursor-pointer">Notion — 頁面配圖相簿瀏覽</span></LinkTo>
112
+ <LinkTo kind="Design System/Components/FileViewer/展示" name="Notion — 頁內配圖相簿"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Notion — 頁面配圖相簿瀏覽</span></LinkTo>
113
113
  </li>
114
114
  <li>
115
- <LinkTo kind="Design System/Components/FileViewer/展示" name="Figma — 單檔縮放聚焦"><span className="text-primary hover:underline font-medium cursor-pointer">Figma — 設計稿單檔縮放聚焦檢視</span></LinkTo>
115
+ <LinkTo kind="Design System/Components/FileViewer/展示" name="Figma — 單檔縮放聚焦"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Figma — 設計稿單檔縮放聚焦檢視</span></LinkTo>
116
116
  </li>
117
117
  <li>
118
- <LinkTo kind="Design System/Components/FileViewer/展示" name="Gmail — 多附件預覽"><span className="text-primary hover:underline font-medium cursor-pointer">Gmail — 信件多附件快速預覽</span></LinkTo>
118
+ <LinkTo kind="Design System/Components/FileViewer/展示" name="Gmail — 多附件預覽"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Gmail — 信件多附件快速預覽</span></LinkTo>
119
119
  </li>
120
120
  <li>
121
- <LinkTo kind="Design System/Components/FileViewer/展示" name="活動相集 — 縮圖膠卷展開"><span className="text-primary hover:underline font-medium cursor-pointer">活動相集 — 開啟縮圖膠卷瀏覽跳轉</span></LinkTo>
121
+ <LinkTo kind="Design System/Components/FileViewer/展示" name="活動相集 — 縮圖膠卷展開"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">活動相集 — 開啟縮圖膠卷瀏覽跳轉</span></LinkTo>
122
122
  </li>
123
123
  </ul>
124
124
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見 <code>Vs*Rule</code> stories)。</p>
package/src/components/HoverCard/hover-card.principles.stories.tsx CHANGED
@@ -50,19 +50,19 @@ export const UsageGuidance: Story = {
50
50
  <p>適合 HoverCard 的真實業務場景(點擊跳轉「展示」頁範例):</p>
51
51
  <ul className="space-y-1">
52
52
  <li>
53
- <LinkTo kind="Design System/Internal/HoverCard/展示" name="人員頭像 ProfileCard"><span className="text-primary hover:underline font-medium cursor-pointer">人員頭像 ProfileCard</span></LinkTo>
53
+ <LinkTo kind="Design System/Internal/HoverCard/展示" name="人員頭像 ProfileCard"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">人員頭像 ProfileCard</span></LinkTo>
54
54
  </li>
55
55
  <li>
56
- <LinkTo kind="Design System/Internal/HoverCard/展示" name="連結預覽卡"><span className="text-primary hover:underline font-medium cursor-pointer">連結預覽卡</span></LinkTo>
56
+ <LinkTo kind="Design System/Internal/HoverCard/展示" name="連結預覽卡"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">連結預覽卡</span></LinkTo>
57
57
  </li>
58
58
  <li>
59
- <LinkTo kind="Design System/Internal/HoverCard/展示" name="溢出清單"><span className="text-primary hover:underline font-medium cursor-pointer">溢出清單</span></LinkTo>
59
+ <LinkTo kind="Design System/Internal/HoverCard/展示" name="溢出清單"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">溢出清單</span></LinkTo>
60
60
  </li>
61
61
  <li>
62
- <LinkTo kind="Design System/Internal/HoverCard/展示" name="儲存庫資訊卡"><span className="text-primary hover:underline font-medium cursor-pointer">Repository 資訊卡</span></LinkTo>
62
+ <LinkTo kind="Design System/Internal/HoverCard/展示" name="儲存庫資訊卡"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Repository 資訊卡</span></LinkTo>
63
63
  </li>
64
64
  <li>
65
- <LinkTo kind="Design System/Internal/HoverCard/展示" name="觸發點類型與延遲"><span className="text-primary hover:underline font-medium cursor-pointer">Trigger 類型與 delay</span></LinkTo>
65
+ <LinkTo kind="Design System/Internal/HoverCard/展示" name="觸發點類型與延遲"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Trigger 類型與 delay</span></LinkTo>
66
66
  </li>
67
67
  </ul>
68
68
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方「vs 近親」)。</p>
package/src/components/Input/input.principles.stories.tsx CHANGED
@@ -50,10 +50,10 @@ export const UsageGuidance: Story = {
50
50
  <div className="prose prose-sm max-w-prose mb-8">
51
51
  <p>適合 Input 的真實業務場景(點擊跳轉「展示」頁範例):</p>
52
52
  <ul className="space-y-1">
53
- <li><LinkTo kind="Design System/Components/Input/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">商品名稱欄位的編輯 / 純展示 / 唯讀 / 停用四模式</span></LinkTo></li>
54
- <li><LinkTo kind="Design System/Components/Input/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:underline font-medium cursor-pointer">搜尋列 — 輸入框與按鈕並排等高</span></LinkTo></li>
55
- <li><LinkTo kind="Design System/Components/Input/展示" name="尾端操作"><span className="text-primary hover:underline font-medium cursor-pointer">密碼顯示切換 / 搜尋清除等尾端操作</span></LinkTo></li>
56
- <li><LinkTo kind="Design System/Components/Input/展示" name="錯誤狀態"><span className="text-primary hover:underline font-medium cursor-pointer">Email 格式錯誤的驗證回饋</span></LinkTo></li>
53
+ <li><LinkTo kind="Design System/Components/Input/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">商品名稱欄位的編輯 / 純展示 / 唯讀 / 停用四模式</span></LinkTo></li>
54
+ <li><LinkTo kind="Design System/Components/Input/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">搜尋列 — 輸入框與按鈕並排等高</span></LinkTo></li>
55
+ <li><LinkTo kind="Design System/Components/Input/展示" name="尾端操作"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">密碼顯示切換 / 搜尋清除等尾端操作</span></LinkTo></li>
56
+ <li><LinkTo kind="Design System/Components/Input/展示" name="錯誤狀態"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Email 格式錯誤的驗證回饋</span></LinkTo></li>
57
57
  </ul>
58
58
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
59
59
  </div>
package/src/components/LinkInput/link-input.principles.stories.tsx CHANGED
@@ -47,19 +47,19 @@ export const UsageGuidance: Story = {
47
47
  <p>適合 LinkInput 的真實業務場景(點擊跳轉「展示」頁範例):</p>
48
48
  <ul className="space-y-1">
49
49
  <li>
50
- <LinkTo kind="Design System/Components/LinkInput/展示" name="空值"><span className="text-primary hover:underline font-medium cursor-pointer">空值</span></LinkTo>
50
+ <LinkTo kind="Design System/Components/LinkInput/展示" name="空值"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">空值</span></LinkTo>
51
51
  </li>
52
52
  <li>
53
- <LinkTo kind="Design System/Components/LinkInput/展示" name="失焦驗證"><span className="text-primary hover:underline font-medium cursor-pointer">Blur 驗證</span></LinkTo>
53
+ <LinkTo kind="Design System/Components/LinkInput/展示" name="失焦驗證"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Blur 驗證</span></LinkTo>
54
54
  </li>
55
55
  <li>
56
- <LinkTo kind="Design System/Components/LinkInput/展示" name="尺寸"><span className="text-primary hover:underline font-medium cursor-pointer">尺寸</span></LinkTo>
56
+ <LinkTo kind="Design System/Components/LinkInput/展示" name="尺寸"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">尺寸</span></LinkTo>
57
57
  </li>
58
58
  <li>
59
- <LinkTo kind="Design System/Components/LinkInput/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">四模式</span></LinkTo>
59
+ <LinkTo kind="Design System/Components/LinkInput/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">四模式</span></LinkTo>
60
60
  </li>
61
61
  <li>
62
- <LinkTo kind="Design System/Components/LinkInput/展示" name="展示樣式"><span className="text-primary hover:underline font-medium cursor-pointer">展示樣式</span></LinkTo>
62
+ <LinkTo kind="Design System/Components/LinkInput/展示" name="展示樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">展示樣式</span></LinkTo>
63
63
  </li>
64
64
  </ul>
65
65
  <p className="text-fg-muted mt-3">判斷不確定時:先確認這個值是不是「儲存後使用者會想直接點開的完整網址」。若不是(例如純字串代號、email、內部路徑),改用 Input。下方「vs 近親」段有正反對照範例。</p>
package/src/components/Menu/menu-item.principles.stories.tsx CHANGED
@@ -24,19 +24,19 @@ export const UsageGuidance: Story = {
24
24
  <p>適合 Menu 的真實業務場景(點擊跳轉「展示」頁範例):</p>
25
25
  <ul className="space-y-1">
26
26
  <li>
27
- <LinkTo kind="Design System/Internal/Menu/展示" name="基本"><span className="text-primary hover:underline font-medium cursor-pointer">信箱資料夾切換選單(收件匣 / 草稿 / 已傳送)— 純文字選項</span></LinkTo>
27
+ <LinkTo kind="Design System/Internal/Menu/展示" name="基本"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">信箱資料夾切換選單(收件匣 / 草稿 / 已傳送)— 純文字選項</span></LinkTo>
28
28
  </li>
29
29
  <li>
30
- <LinkTo kind="Design System/Internal/Menu/展示" name="前置圖示 + 說明文字"><span className="text-primary hover:underline font-medium cursor-pointer">通知偏好設定選單 — 前置圖示 + 說明文字</span></LinkTo>
30
+ <LinkTo kind="Design System/Internal/Menu/展示" name="前置圖示 + 說明文字"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">通知偏好設定選單 — 前置圖示 + 說明文字</span></LinkTo>
31
31
  </li>
32
32
  <li>
33
- <LinkTo kind="Design System/Internal/Menu/展示" name="頭像"><span className="text-primary hover:underline font-medium cursor-pointer">指派負責人選單 — 人員頭像列</span></LinkTo>
33
+ <LinkTo kind="Design System/Internal/Menu/展示" name="頭像"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">指派負責人選單 — 人員頭像列</span></LinkTo>
34
34
  </li>
35
35
  <li>
36
- <LinkTo kind="Design System/Internal/Menu/展示" name="頭像 + 說明文字"><span className="text-primary hover:underline font-medium cursor-pointer">跨部門選人 — 頭像 + 部門說明文字</span></LinkTo>
36
+ <LinkTo kind="Design System/Internal/Menu/展示" name="頭像 + 說明文字"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">跨部門選人 — 頭像 + 部門說明文字</span></LinkTo>
37
37
  </li>
38
38
  <li>
39
- <LinkTo kind="Design System/Internal/Menu/展示" name="多選"><span className="text-primary hover:underline font-medium cursor-pointer">通知管道多選(電子郵件 / 推播 / Slack)</span></LinkTo>
39
+ <LinkTo kind="Design System/Internal/Menu/展示" name="多選"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">通知管道多選(電子郵件 / 推播 / Slack)</span></LinkTo>
40
40
  </li>
41
41
  </ul>
42
42
  <p className="text-fg-muted mt-3">判斷不確定時:先確認情境是否屬於上面這些「在選單裡挑一個或多個選項」的場景;若不是(例如是可編輯的表單欄位、或需要大塊內容的列表行),改用對應的近親元件,下方「vs 近親元件」段有說明。</p>
@@ -66,10 +66,10 @@ export const CompositionRules: Story = {
66
66
  <p>MenuItem 是選單選項列的共用排版元件,由以下三類選單元件包起來使用,不會直接寫在產品頁面裡:</p>
67
67
 
68
68
  <h4>Pattern 1 — DropdownMenu + MenuItem(action menu)</h4>
69
- <p>使用者點擊觸發某個 action(複製 / 刪除 / 重新命名)→ <LinkTo kind="Design System/Components/DropdownMenu/展示" name="基本"><span className="text-primary hover:underline font-medium cursor-pointer">DropdownMenu</span></LinkTo>(Radix 控制 open / close + keyboard nav,MenuItem 提供 row layout)。</p>
69
+ <p>使用者點擊觸發某個 action(複製 / 刪除 / 重新命名)→ <LinkTo kind="Design System/Components/DropdownMenu/展示" name="基本"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">DropdownMenu</span></LinkTo>(Radix 控制 open / close + keyboard nav,MenuItem 提供 row layout)。</p>
70
70
 
71
71
  <h4>Pattern 2 — SelectMenu(Popover + Command + MenuItem)— form value 選擇</h4>
72
- <p>使用者選一個 / 多個值寫回 form → <LinkTo kind="Design System/Components/Select/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">Select</span></LinkTo> / <LinkTo kind="Design System/Components/Combobox/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">Combobox</span></LinkTo>(內部已組合 SelectMenu + cmdk + MenuItem)。</p>
72
+ <p>使用者選一個 / 多個值寫回 form → <LinkTo kind="Design System/Components/Select/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Select</span></LinkTo> / <LinkTo kind="Design System/Components/Combobox/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Combobox</span></LinkTo>(內部已組合 SelectMenu + cmdk + MenuItem)。</p>
73
73
 
74
74
  <h4>Pattern 3 — ContextMenu + MenuItem(右鍵選單,未來)</h4>
75
75
  <p>右鍵觸發 contextual action → 預留消費者(Radix ContextMenu + MenuItem 同 layout primitive)。</p>
package/src/components/Notice/notice.principles.stories.tsx CHANGED
@@ -26,19 +26,19 @@ export const UsageGuidance: Story = {
26
26
  <p>適合 Notice 的真實業務場景(點擊跳轉「展示」頁範例):</p>
27
27
  <ul className="space-y-1">
28
28
  <li>
29
- <LinkTo kind="Design System/Internal/Notice/展示" name="部署成功 橫幅"><span className="text-primary hover:underline font-medium cursor-pointer">CI/CD 部署成功橫幅 — 附「查看部署紀錄」動作</span></LinkTo>
29
+ <LinkTo kind="Design System/Internal/Notice/展示" name="部署成功 橫幅"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">CI/CD 部署成功橫幅 — 附「查看部署紀錄」動作</span></LinkTo>
30
30
  </li>
31
31
  <li>
32
- <LinkTo kind="Design System/Internal/Notice/展示" name="工作區付款失敗"><span className="text-primary hover:underline font-medium cursor-pointer">工作區付款失敗 — 附「更新付款方式」補救動作</span></LinkTo>
32
+ <LinkTo kind="Design System/Internal/Notice/展示" name="工作區付款失敗"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">工作區付款失敗 — 附「更新付款方式」補救動作</span></LinkTo>
33
33
  </li>
34
34
  <li>
35
- <LinkTo kind="Design System/Internal/Notice/展示" name="行內通知變體對照"><span className="text-primary hover:underline font-medium cursor-pointer">方案限制 / 空間不足 / 連線失敗等行內提示(五種語意變體)</span></LinkTo>
35
+ <LinkTo kind="Design System/Internal/Notice/展示" name="行內通知變體對照"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">方案限制 / 空間不足 / 連線失敗等行內提示(五種語意變體)</span></LinkTo>
36
36
  </li>
37
37
  <li>
38
- <LinkTo kind="Design System/Internal/Notice/展示" name="Toast 樣式"><span className="text-primary hover:underline font-medium cursor-pointer">「變更已儲存」「已複製連結」Toast 短暫提示</span></LinkTo>
38
+ <LinkTo kind="Design System/Internal/Notice/展示" name="Toast 樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">「變更已儲存」「已複製連結」Toast 短暫提示</span></LinkTo>
39
39
  </li>
40
40
  <li>
41
- <LinkTo kind="Design System/Internal/Notice/展示" name="中性 純文字"><span className="text-primary hover:underline font-medium cursor-pointer">成員邀請待加入提醒 — 中性純文字</span></LinkTo>
41
+ <LinkTo kind="Design System/Internal/Notice/展示" name="中性 純文字"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">成員邀請待加入提醒 — 中性純文字</span></LinkTo>
42
42
  </li>
43
43
  </ul>
44
44
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親段落)。</p>
@@ -74,7 +74,7 @@ export const CompositionRules: Story = {
74
74
  <div>
75
75
  <Section title="Pattern 1 — Alert(persistent inline announcement)">
76
76
  <div className="prose prose-sm max-w-prose">
77
- <p>需要「持續顯示直到 user 主動 dismiss」→ <LinkTo kind="Design System/Components/Alert/展示" name="低調單行"><span className="text-primary hover:underline font-medium cursor-pointer">Alert 低調單行</span></LinkTo>。Alert 內部消費 Notice + 加上 dismiss button + live region ARIA(error/warning → role="alert" assertive;info/success/neutral → role="status" polite)。</p>
77
+ <p>需要「持續顯示直到 user 主動 dismiss」→ <LinkTo kind="Design System/Components/Alert/展示" name="低調單行"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Alert 低調單行</span></LinkTo>。Alert 內部消費 Notice + 加上 dismiss button + live region ARIA(error/warning → role="alert" assertive;info/success/neutral → role="status" polite)。</p>
78
78
  <ul>
79
79
  <li>典型場景:付款失敗 banner / workspace 警告 / 重要通知 user 必看</li>
80
80
  <li>對齊世界級:Polaris <code>Banner</code> / Material <code>Banner</code> / Atlassian <code>InlineMessage</code> — 共識用「persistent + dismissible」</li>
@@ -84,7 +84,7 @@ export const CompositionRules: Story = {
84
84
 
85
85
  <Section title="Pattern 2 — Toast(auto-dismiss floating announcement)">
86
86
  <div className="prose prose-sm max-w-prose">
87
- <p>需要「短暫提示,使用者不需 acknowledge」→ <LinkTo kind="Design System/Components/Toast/展示" name="有標題與描述"><span className="text-primary hover:underline font-medium cursor-pointer">有 Title + Description</span></LinkTo>。Toast 基於 Sonner + 消費 Notice layout,自動 4 秒消失(可調)。</p>
87
+ <p>需要「短暫提示,使用者不需 acknowledge」→ <LinkTo kind="Design System/Components/Toast/展示" name="有標題與描述"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">有 Title + Description</span></LinkTo>。Toast 基於 Sonner + 消費 Notice layout,自動 4 秒消失(可調)。</p>
88
88
  <ul>
89
89
  <li>典型場景:儲存成功 / 複製到剪貼簿 / 非關鍵操作回饋</li>
90
90
  <li>對齊世界級:Material <code>Snackbar</code> / Polaris <code>Toast</code> / Sonner — 共識用「auto-dismiss + 浮動 + 不阻塞 task」</li>
package/src/components/NumberInput/number-input.principles.stories.tsx CHANGED
@@ -50,10 +50,10 @@ export const UsageGuidance: Story = {
50
50
  <div className="prose prose-sm max-w-prose mb-8">
51
51
  <p>適合 NumberInput 的真實業務場景(點擊跳轉「展示」頁範例):</p>
52
52
  <ul className="space-y-1">
53
- <li><LinkTo kind="Design System/Components/NumberInput/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">四模式</span></LinkTo></li>
54
- <li><LinkTo kind="Design System/Components/NumberInput/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:underline font-medium cursor-pointer">尺寸與 Button 對齊</span></LinkTo></li>
55
- <li><LinkTo kind="Design System/Components/NumberInput/展示" name="格式化選項"><span className="text-primary hover:underline font-medium cursor-pointer">格式化選項</span></LinkTo></li>
56
- <li><LinkTo kind="Design System/Components/NumberInput/展示" name="DataTable 整合"><span className="text-primary hover:underline font-medium cursor-pointer">DataTable 整合</span></LinkTo></li>
53
+ <li><LinkTo kind="Design System/Components/NumberInput/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">四模式</span></LinkTo></li>
54
+ <li><LinkTo kind="Design System/Components/NumberInput/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">尺寸與 Button 對齊</span></LinkTo></li>
55
+ <li><LinkTo kind="Design System/Components/NumberInput/展示" name="格式化選項"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">格式化選項</span></LinkTo></li>
56
+ <li><LinkTo kind="Design System/Components/NumberInput/展示" name="DataTable 整合"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">DataTable 整合</span></LinkTo></li>
57
57
  </ul>
58
58
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
59
59
  </div>
package/src/components/OverflowIndicator/overflow-indicator.principles.stories.tsx CHANGED
@@ -24,16 +24,16 @@ export const UsageGuidance: Story = {
24
24
  <p>適合 OverflowIndicator 的真實業務場景(點擊跳轉「展示」頁範例):</p>
25
25
  <ul className="space-y-1">
26
26
  <li>
27
- <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="Combobox 標籤溢出"><span className="text-primary hover:underline font-medium cursor-pointer">Combobox 標籤溢出</span></LinkTo>
27
+ <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="Combobox 標籤溢出"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Combobox 標籤溢出</span></LinkTo>
28
28
  </li>
29
29
  <li>
30
- <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="人員頭像 疊合 +N"><span className="text-primary hover:underline font-medium cursor-pointer">PR reviewer 頭像疊合 +N(只顯前 3 位)</span></LinkTo>
30
+ <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="人員頭像 疊合 +N"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">PR reviewer 頭像疊合 +N(只顯前 3 位)</span></LinkTo>
31
31
  </li>
32
32
  <li>
33
- <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="Breadcrumb 中段收合"><span className="text-primary hover:underline font-medium cursor-pointer">Breadcrumb 中段收合</span></LinkTo>
33
+ <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="Breadcrumb 中段收合"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Breadcrumb 中段收合</span></LinkTo>
34
34
  </li>
35
35
  <li>
36
- <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="DataTable 人員欄位"><span className="text-primary hover:underline font-medium cursor-pointer">DataTable 人員欄位</span></LinkTo>
36
+ <LinkTo kind="Design System/Internal/OverflowIndicator/展示" name="DataTable 人員欄位"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">DataTable 人員欄位</span></LinkTo>
37
37
  </li>
38
38
  </ul>
39
39
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親段落)。</p>
@@ -62,7 +62,7 @@ export const CompositionRules: Story = {
62
62
  <p>OverflowIndicator 是顯示「還有 N 個沒列出來」的 `+N` 小標籤,由下列幾種元件在內部使用(顯示前幾項 + 把剩下的折成 `+N`),不直接放在頁面程式碼裡:</p>
63
63
 
64
64
  <h4>Pattern 1 — Combobox 標籤溢出(單行模式)</h4>
65
- <p>多選標籤太多、單行放不下 → <LinkTo kind="Design System/Components/Combobox/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">Combobox</span></LinkTo> 內部使用 OverflowIndicator;hover `+N` 展開完整清單。對齊 GitHub 多標籤 / Linear 多指派人的做法。</p>
65
+ <p>多選標籤太多、單行放不下 → <LinkTo kind="Design System/Components/Combobox/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Combobox</span></LinkTo> 內部使用 OverflowIndicator;hover `+N` 展開完整清單。對齊 GitHub 多標籤 / Linear 多指派人的做法。</p>
66
66
 
67
67
  <h4>Pattern 2 — 人員頭像疊合 +N</h4>
68
68
  <p>一群人只顯示前幾位、其餘折成 `+M`。目前由列表元件自行把頭像疊合再放上 OverflowIndicator(形狀用圓形對齊頭像);未來規劃中的 Avatar 群組元件會把這段組合收進去。對齊 Slack 工作區成員預覽 / Linear 團隊成員的做法。</p>
package/src/components/PeoplePicker/people-picker.principles.stories.tsx CHANGED
@@ -58,13 +58,13 @@ export const UsageGuidance: Story = {
58
58
  >
59
59
  <ul className="space-y-1">
60
60
  <li>
61
- <LinkTo kind="Design System/Components/PeoplePicker/展示" name="單人"><span className="text-primary hover:underline font-medium cursor-pointer">單人</span></LinkTo>
61
+ <LinkTo kind="Design System/Components/PeoplePicker/展示" name="單人"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">單人</span></LinkTo>
62
62
  </li>
63
63
  <li>
64
- <LinkTo kind="Design System/Components/PeoplePicker/展示" name="多人"><span className="text-primary hover:underline font-medium cursor-pointer">多人</span></LinkTo>
64
+ <LinkTo kind="Design System/Components/PeoplePicker/展示" name="多人"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">多人</span></LinkTo>
65
65
  </li>
66
66
  <li>
67
- <LinkTo kind="Design System/Components/PeoplePicker/展示" name="尺寸"><span className="text-primary hover:underline font-medium cursor-pointer">尺寸</span></LinkTo>
67
+ <LinkTo kind="Design System/Components/PeoplePicker/展示" name="尺寸"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">尺寸</span></LinkTo>
68
68
  </li>
69
69
  </ul>
70
70
  </Rule>
package/src/components/Popover/popover.principles.stories.tsx CHANGED
@@ -77,7 +77,7 @@ export const UsageGuidance: Story = {
77
77
  <p>適合 Popover 的真實業務場景(點擊跳轉「展示」頁範例):</p>
78
78
  <ul className="space-y-1">
79
79
  <li>
80
- <LinkTo kind="Design System/Components/Popover/展示" name="篩選面板"><span className="text-primary hover:underline font-medium cursor-pointer">篩選面板</span></LinkTo>
80
+ <LinkTo kind="Design System/Components/Popover/展示" name="篩選面板"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">篩選面板</span></LinkTo>
81
81
  </li>
82
82
  </ul>
83
83
  <p className="text-fg-muted mt-3">判斷不確定時:往下看下方「Popover 與近親元件的分界」三組對照(對上 Dialog、DropdownMenu、Tooltip),確認該用哪個元件。</p>
package/src/components/ProfileCard/profile-card.principles.stories.tsx CHANGED
@@ -87,7 +87,7 @@ export const UsageGuidance: Story = {
87
87
  <p>適合 ProfileCard 的真實業務場景(點擊跳轉「展示」頁範例):</p>
88
88
  <ul className="space-y-1">
89
89
  <li>
90
- <LinkTo kind="Design System/Internal/ProfileCard/展示" name="懸停展開 ProfileCard"><span className="text-primary hover:underline font-medium cursor-pointer">懸停留言者 / PR reviewer / 成員列表的頭像,展開人員詳情卡</span></LinkTo>
90
+ <LinkTo kind="Design System/Internal/ProfileCard/展示" name="懸停展開 ProfileCard"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">懸停留言者 / PR reviewer / 成員列表的頭像,展開人員詳情卡</span></LinkTo>
91
91
  </li>
92
92
  </ul>
93
93
  <p>判斷時對照 spec.md「何時用 / 何時不用」段落。</p>
package/src/components/ProgressBar/progress-bar.principles.stories.tsx CHANGED
@@ -61,11 +61,11 @@ export const UsageGuidance: Story = {
61
61
  <p>適合 ProgressBar 的真實業務場景(點擊跳轉「展示」頁範例):</p>
62
62
  <ul className="space-y-1">
63
63
  <li>
64
- <LinkTo kind="Design System/Components/ProgressBar/展示" name="批次任務進度"><span className="text-primary hover:underline font-medium cursor-pointer">批次任務進度</span></LinkTo>
64
+ <LinkTo kind="Design System/Components/ProgressBar/展示" name="批次任務進度"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">批次任務進度</span></LinkTo>
65
65
  <span className="text-fg-secondary"> — CSV 匯入 1,250 筆客戶資料、批次寄送:總量已知,單一 prominent 進度條讓使用者掌握整體完成比例</span>
66
66
  </li>
67
67
  <li>
68
- <LinkTo kind="Design System/Components/ProgressBar/展示" name="DataTable 儲存格內進度"><span className="text-primary hover:underline font-medium cursor-pointer">DataTable 儲存格內進度</span></LinkTo>
68
+ <LinkTo kind="Design System/Components/ProgressBar/展示" name="DataTable 儲存格內進度"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">DataTable 儲存格內進度</span></LinkTo>
69
69
  <span className="text-fg-secondary"> — 列表中每列各自的配額使用率 / 任務完成度,4px 細線不搶走主要欄位的閱讀重量</span>
70
70
  </li>
71
71
  </ul>
package/src/components/RadioGroup/radio-group.principles.stories.tsx CHANGED
@@ -46,8 +46,8 @@ export const UsageGuidance: Story = {
46
46
  <div className="prose prose-sm max-w-prose mb-8">
47
47
  <p>適合 RadioGroup 的真實業務場景(點擊跳轉「展示」頁範例):</p>
48
48
  <ul className="space-y-1">
49
- <li><LinkTo kind="Design System/Components/RadioGroup/展示" name="直式群組"><span className="text-primary hover:underline font-medium cursor-pointer">直式群組</span></LinkTo><span className="text-fg-secondary"> — 訂閱方案選擇(月付 / 年付 / 終身):需要對比價格與說明的決策節點,直式 + description 完整閱讀</span></li>
50
- <li><LinkTo kind="Design System/Components/RadioGroup/展示" name="水平排列"><span className="text-primary hover:underline font-medium cursor-pointer">水平排列</span></LinkTo><span className="text-fg-secondary"> — 外觀主題切換(淺色 / 深色 / 系統):2-3 個短 label、不需描述文字,橫排省垂直空間</span></li>
49
+ <li><LinkTo kind="Design System/Components/RadioGroup/展示" name="直式群組"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">直式群組</span></LinkTo><span className="text-fg-secondary"> — 訂閱方案選擇(月付 / 年付 / 終身):需要對比價格與說明的決策節點,直式 + description 完整閱讀</span></li>
50
+ <li><LinkTo kind="Design System/Components/RadioGroup/展示" name="水平排列"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">水平排列</span></LinkTo><span className="text-fg-secondary"> — 外觀主題切換(淺色 / 深色 / 系統):2-3 個短 label、不需描述文字,橫排省垂直空間</span></li>
51
51
  </ul>
52
52
  <p className="text-fg-muted mt-3">判斷不確定時:回頭看「何時用 / 何時不用」;若仍不符,改用近親元件(見下方「vs 近親元件」)。</p>
53
53
  </div>
package/src/components/Rating/rating.principles.stories.tsx CHANGED
@@ -58,15 +58,15 @@ export const UsageGuidance: Story = {
58
58
  <p>適合 Rating 的真實業務場景(點擊跳轉「展示」頁範例):</p>
59
59
  <ul className="space-y-1">
60
60
  <li>
61
- <LinkTo kind="Design System/Components/Rating/展示" name="商品列表平均分"><span className="text-primary hover:underline font-medium cursor-pointer">商品列表平均分</span></LinkTo>
61
+ <LinkTo kind="Design System/Components/Rating/展示" name="商品列表平均分"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">商品列表平均分</span></LinkTo>
62
62
  <span className="text-fg-secondary"> — 電商搜尋結果每張商品卡的 readOnly 平均分 + 評論數(4.7、12,843 則)</span>
63
63
  </li>
64
64
  <li>
65
- <LinkTo kind="Design System/Components/Rating/展示" name="送出評分流程"><span className="text-primary hover:underline font-medium cursor-pointer">送出評分流程</span></LinkTo>
65
+ <LinkTo kind="Design System/Components/Rating/展示" name="送出評分流程"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">送出評分流程</span></LinkTo>
66
66
  <span className="text-fg-secondary"> — 訂單完成 / 用餐後使用者親自給分:hover 預覽 + click 送出(interactive)</span>
67
67
  </li>
68
68
  <li>
69
- <LinkTo kind="Design System/Components/Rating/展示" name="包在 Field 內"><span className="text-primary hover:underline font-medium cursor-pointer">包在 Field 內</span></LinkTo>
69
+ <LinkTo kind="Design System/Components/Rating/展示" name="包在 Field 內"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">包在 Field 內</span></LinkTo>
70
70
  <span className="text-fg-secondary"> — 售後問卷表單中作為欄位:label + 驗證跟其他 Field 控制項一致</span>
71
71
  </li>
72
72
  </ul>
package/src/components/ScrollArea/scroll-area.principles.stories.tsx CHANGED
@@ -93,16 +93,16 @@ export const UsageGuidance: Story = {
93
93
  <p>適合 ScrollArea 的真實業務場景(點擊跳轉「展示」頁範例):</p>
94
94
  <ul className="space-y-1">
95
95
  <li>
96
- <LinkTo kind="Design System/Components/ScrollArea/展示" name="垂直捲動 — Linear 議題清單"><span className="text-primary hover:underline font-medium cursor-pointer">垂直捲動 — Linear issue 清單</span></LinkTo>
96
+ <LinkTo kind="Design System/Components/ScrollArea/展示" name="垂直捲動 — Linear 議題清單"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">垂直捲動 — Linear issue 清單</span></LinkTo>
97
97
  </li>
98
98
  <li>
99
- <LinkTo kind="Design System/Components/ScrollArea/展示" name="垂直捲動 — Notion 側欄 導覽"><span className="text-primary hover:underline font-medium cursor-pointer">垂直捲動 — Notion sidebar 導覽</span></LinkTo>
99
+ <LinkTo kind="Design System/Components/ScrollArea/展示" name="垂直捲動 — Notion 側欄 導覽"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">垂直捲動 — Notion sidebar 導覽</span></LinkTo>
100
100
  </li>
101
101
  <li>
102
- <LinkTo kind="Design System/Components/ScrollArea/展示" name="水平捲動 — Stripe 寬欄位商品表"><span className="text-primary hover:underline font-medium cursor-pointer">水平捲動 — Stripe 寬欄位商品表</span></LinkTo>
102
+ <LinkTo kind="Design System/Components/ScrollArea/展示" name="水平捲動 — Stripe 寬欄位商品表"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">水平捲動 — Stripe 寬欄位商品表</span></LinkTo>
103
103
  </li>
104
104
  <li>
105
- <LinkTo kind="Design System/Components/ScrollArea/展示" name="雙向捲動 — GitHub PR 大型檢閱表"><span className="text-primary hover:underline font-medium cursor-pointer">雙向捲動 — GitHub PR 大型檢閱表</span></LinkTo>
105
+ <LinkTo kind="Design System/Components/ScrollArea/展示" name="雙向捲動 — GitHub PR 大型檢閱表"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">雙向捲動 — GitHub PR 大型檢閱表</span></LinkTo>
106
106
  </li>
107
107
  </ul>
108
108
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見 <code>Vs*Rule</code> stories)。</p>
package/src/components/Select/select.principles.stories.tsx CHANGED
@@ -67,19 +67,19 @@ export const UsageGuidance: Story = {
67
67
  <p>適合 Select 的真實業務場景(點擊跳轉「展示」頁範例):</p>
68
68
  <ul className="space-y-1">
69
69
  <li>
70
- <LinkTo kind="Design System/Components/Select/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">四模式</span></LinkTo>
70
+ <LinkTo kind="Design System/Components/Select/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">四模式</span></LinkTo>
71
71
  </li>
72
72
  <li>
73
- <LinkTo kind="Design System/Components/Select/展示" name="顯示模式"><span className="text-primary hover:underline font-medium cursor-pointer">顯示模式</span></LinkTo>
73
+ <LinkTo kind="Design System/Components/Select/展示" name="顯示模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">顯示模式</span></LinkTo>
74
74
  </li>
75
75
  <li>
76
- <LinkTo kind="Design System/Components/Select/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:underline font-medium cursor-pointer">尺寸與 Button 對齊</span></LinkTo>
76
+ <LinkTo kind="Design System/Components/Select/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">尺寸與 Button 對齊</span></LinkTo>
77
77
  </li>
78
78
  <li>
79
- <LinkTo kind="Design System/Components/Select/展示" name="可清除"><span className="text-primary hover:underline font-medium cursor-pointer">可清除</span></LinkTo>
79
+ <LinkTo kind="Design System/Components/Select/展示" name="可清除"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">可清除</span></LinkTo>
80
80
  </li>
81
81
  <li>
82
- <LinkTo kind="Design System/Components/Select/展示" name="搜尋"><span className="text-primary hover:underline font-medium cursor-pointer">搜尋</span></LinkTo>
82
+ <LinkTo kind="Design System/Components/Select/展示" name="搜尋"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">搜尋</span></LinkTo>
83
83
  </li>
84
84
  </ul>
85
85
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方「vs 近親」)。</p>
package/src/components/SelectMenu/select-menu.principles.stories.tsx CHANGED
@@ -28,11 +28,11 @@ export const UsageGuidance: Story = {
28
28
  <div className="prose prose-sm max-w-prose mb-8">
29
29
  <p>適合 SelectMenu 的真實業務場景(點擊跳轉「展示」頁範例):</p>
30
30
  <ul className="space-y-1">
31
- <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="單選"><span className="text-primary hover:underline font-medium cursor-pointer">議題狀態欄位擇一指派(單選)</span></LinkTo></li>
32
- <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="搜尋"><span className="text-primary hover:underline font-medium cursor-pointer">數百人組織選負責人,輸入過濾(搜尋)</span></LinkTo></li>
33
- <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="多選"><span className="text-primary hover:underline font-medium cursor-pointer">工單同時貼多個標籤(多選)</span></LinkTo></li>
34
- <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="多選 + 搜尋"><span className="text-primary hover:underline font-medium cursor-pointer">大量標籤庫中過濾並複選(多選 + 搜尋)</span></LinkTo></li>
35
- <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="可清除"><span className="text-primary hover:underline font-medium cursor-pointer">篩選列一鍵清空已選條件(可清除)</span></LinkTo></li>
31
+ <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="單選"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">議題狀態欄位擇一指派(單選)</span></LinkTo></li>
32
+ <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="搜尋"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">數百人組織選負責人,輸入過濾(搜尋)</span></LinkTo></li>
33
+ <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="多選"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">工單同時貼多個標籤(多選)</span></LinkTo></li>
34
+ <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="多選 + 搜尋"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">大量標籤庫中過濾並複選(多選 + 搜尋)</span></LinkTo></li>
35
+ <li><LinkTo kind="Design System/Internal/SelectMenu/展示" name="可清除"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">篩選列一鍵清空已選條件(可清除)</span></LinkTo></li>
36
36
  </ul>
37
37
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
38
38
  </div>
@@ -70,7 +70,7 @@ export const CompositionRules: Story = {
70
70
  <div>
71
71
  <Section title="Pattern 1 — Select(static 單選 dropdown)">
72
72
  <div className="prose prose-sm max-w-prose">
73
- <p>已知選項清單 + 單選回 form → <LinkTo kind="Design System/Components/Select/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">Select</span></LinkTo>(內部 SelectMenu + cmdk + MenuItem)。對齊 Material <code>Select</code> / Ant <code>Select</code> idiom。</p>
73
+ <p>已知選項清單 + 單選回 form → <LinkTo kind="Design System/Components/Select/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Select</span></LinkTo>(內部 SelectMenu + cmdk + MenuItem)。對齊 Material <code>Select</code> / Ant <code>Select</code> idiom。</p>
74
74
  <ul>
75
75
  <li>典型場景:Country picker / Status selector / Priority dropdown</li>
76
76
  <li>判斷:選項 ≤ 20 + 不需搜尋 → Select(可選 searchable mode 啟用搜尋)</li>
@@ -80,7 +80,7 @@ export const CompositionRules: Story = {
80
80
 
81
81
  <Section title="Pattern 2 — Combobox(多選 + 搜尋 + 可建立新值)">
82
82
  <div className="prose prose-sm max-w-prose">
83
- <p>多選 + 大量選項需搜尋 + 可創新 tag → <LinkTo kind="Design System/Components/Combobox/展示" name="四模式"><span className="text-primary hover:underline font-medium cursor-pointer">Combobox</span></LinkTo>。對齊 GitHub Label picker / Linear Multi-assignee / Notion Multi-select idiom。</p>
83
+ <p>多選 + 大量選項需搜尋 + 可創新 tag → <LinkTo kind="Design System/Components/Combobox/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Combobox</span></LinkTo>。對齊 GitHub Label picker / Linear Multi-assignee / Notion Multi-select idiom。</p>
84
84
  <ul>
85
85
  <li>典型場景:Tag picker / Multi-assignee / Filter chips multi-value</li>
86
86
  <li>單行模式自動接 OverflowIndicator(`+N`)避免 tag wrap</li>
@@ -90,7 +90,7 @@ export const CompositionRules: Story = {
90
90
 
91
91
  <Section title="Pattern 3 — PeoplePicker(人員選擇 + Avatar 渲染)">
92
92
  <div className="prose prose-sm max-w-prose">
93
- <p>選人員(單 / 多)+ 渲染 avatar + 名稱 + role → <LinkTo kind="Design System/Components/PeoplePicker/展示" name="單人"><span className="text-primary hover:underline font-medium cursor-pointer">PeoplePicker</span></LinkTo>。對齊 Slack mention / Linear assignee / Asana people-search idiom。</p>
93
+ <p>選人員(單 / 多)+ 渲染 avatar + 名稱 + role → <LinkTo kind="Design System/Components/PeoplePicker/展示" name="單人"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">PeoplePicker</span></LinkTo>。對齊 Slack mention / Linear assignee / Asana people-search idiom。</p>
94
94
  <ul>
95
95
  <li>典型場景:Task assignee / Document collaborator / Workspace member invite</li>
96
96
  </ul>