@godxjp/ui 31.31.8 → 32.0.1

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 (732) hide show
  1. package/README.md +102 -121
  2. package/agent/START-HERE.md +10 -10
  3. package/agent/components/Accordion.json +2 -2
  4. package/agent/components/AccountChip.json +1 -1
  5. package/agent/components/Actions.json +1 -1
  6. package/agent/components/Activity.json +2 -2
  7. package/agent/components/Affix.json +1 -1
  8. package/agent/components/Alert.json +22 -6
  9. package/agent/components/AlertDialog.json +8 -1
  10. package/agent/components/Anchor.json +4 -3
  11. package/agent/components/AppLauncher.json +2 -2
  12. package/agent/components/AppProvider.json +19 -11
  13. package/agent/components/AppSettingPicker.json +18 -2
  14. package/agent/components/AppShell.json +4 -5
  15. package/agent/components/AreaChart.json +0 -1
  16. package/agent/components/AspectRatio.json +2 -2
  17. package/agent/components/Attachments.json +3 -3
  18. package/agent/components/AuthAccountSummary.json +1 -1
  19. package/agent/components/AuthDivider.json +1 -1
  20. package/agent/components/AuthExpiryProvider.json +0 -1
  21. package/agent/components/AuthFooter.json +2 -2
  22. package/agent/components/AuthIdentity.json +3 -3
  23. package/agent/components/AuthStack.json +1 -1
  24. package/agent/components/Avatar.json +2 -12
  25. package/agent/components/Badge.json +1 -1
  26. package/agent/components/BarChart.json +0 -1
  27. package/agent/components/BranchScopePicker.json +1 -1
  28. package/agent/components/Breadcrumb.json +1 -1
  29. package/agent/components/Button.json +3 -3
  30. package/agent/components/Calendar.json +1 -1
  31. package/agent/components/Card.json +2 -2
  32. package/agent/components/CardBar.json +0 -1
  33. package/agent/components/CardContent.json +0 -1
  34. package/agent/components/Carousel.json +4 -3
  35. package/agent/components/Cascader.json +1 -1
  36. package/agent/components/CenteredShell.json +78 -17
  37. package/agent/components/ChatBubble.json +3 -3
  38. package/agent/components/ChatBubbleList.json +3 -3
  39. package/agent/components/ChatComposer.json +3 -3
  40. package/agent/components/ChatSuggestion.json +3 -3
  41. package/agent/components/Checkbox.json +1 -1
  42. package/agent/components/CheckboxGroup.json +0 -1
  43. package/agent/components/CodeBlock.json +1 -1
  44. package/agent/components/Collapsible.json +4 -4
  45. package/agent/components/ColorPicker.json +1 -1
  46. package/agent/components/Command.json +5 -5
  47. package/agent/components/CommandPalette.json +1 -1
  48. package/agent/components/CompactBarTrend.json +1 -1
  49. package/agent/components/Conversations.json +3 -3
  50. package/agent/components/CredentialReveal.json +1 -1
  51. package/agent/components/DataState.json +2 -2
  52. package/agent/components/DataTable.json +1 -1
  53. package/agent/components/DatePicker.json +1 -1
  54. package/agent/components/Descriptions.json +1 -1
  55. package/agent/components/Dialog.json +2 -2
  56. package/agent/components/DraggablePanel.json +5 -4
  57. package/agent/components/DropdownMenu.json +1 -1
  58. package/agent/components/EmojiPicker.json +3 -2
  59. package/agent/components/EmptyState.json +1 -1
  60. package/agent/components/ErrorSurface.json +3 -3
  61. package/agent/components/FeatureList.json +1 -1
  62. package/agent/components/Field.json +0 -1
  63. package/agent/components/Flex.json +34 -4
  64. package/agent/components/FloatButton.json +6 -5
  65. package/agent/components/Form.json +1 -1
  66. package/agent/components/FormErrors.json +0 -1
  67. package/agent/components/FormField.json +6 -6
  68. package/agent/components/FormFieldArray.json +0 -1
  69. package/agent/components/FormFieldControl.json +0 -1
  70. package/agent/components/FormRoot.json +1 -1
  71. package/agent/components/Heading.json +3 -0
  72. package/agent/components/Icon.json +1 -1
  73. package/agent/components/Image.json +7 -4
  74. package/agent/components/InfiniteQueryState.json +1 -1
  75. package/agent/components/Input.json +1 -1
  76. package/agent/components/InputOTP.json +2 -2
  77. package/agent/components/Label.json +3 -3
  78. package/agent/components/LegalDocumentShell.json +5 -4
  79. package/agent/components/Legend.json +1 -1
  80. package/agent/components/LineChart.json +0 -1
  81. package/agent/components/Link.json +0 -1
  82. package/agent/components/ListRow.json +1 -1
  83. package/agent/components/Logo.json +5 -4
  84. package/agent/components/Marquee.json +4 -3
  85. package/agent/components/Masonry.json +4 -3
  86. package/agent/components/MasterDetail.json +1 -1
  87. package/agent/components/MegaMenu.json +4 -3
  88. package/agent/components/MobileShell.json +4 -4
  89. package/agent/components/NavList.json +1 -1
  90. package/agent/components/NumberInput.json +1 -1
  91. package/agent/components/OrgChart.json +4 -3
  92. package/agent/components/OrgSwitcher.json +1 -1
  93. package/agent/components/OverlayPortalProvider.json +0 -1
  94. package/agent/components/PageContainer.json +3 -3
  95. package/agent/components/PageCover.json +3 -2
  96. package/agent/components/Pagination.json +1 -1
  97. package/agent/components/PasswordInput.json +1 -1
  98. package/agent/components/PasswordStrength.json +1 -1
  99. package/agent/components/PermissionMatrix.json +1 -1
  100. package/agent/components/PieChart.json +0 -1
  101. package/agent/components/Popover.json +31 -6
  102. package/agent/components/PrefetchLink.json +1 -1
  103. package/agent/components/Progress.json +1 -1
  104. package/agent/components/Prose.json +1 -1
  105. package/agent/components/QrCode.json +1 -1
  106. package/agent/components/Radio.json +0 -1
  107. package/agent/components/RadioGroup.json +2 -2
  108. package/agent/components/RangeTimeline.json +2 -1
  109. package/agent/components/Rating.json +1 -1
  110. package/agent/components/RecordPicker.json +1 -1
  111. package/agent/components/ResizablePanel.json +1 -1
  112. package/agent/components/ResponsiveGrid.json +2 -2
  113. package/agent/components/Reveal.json +3 -3
  114. package/agent/components/ScrollArea.json +2 -2
  115. package/agent/components/SearchInput.json +1 -1
  116. package/agent/components/Segmented.json +1 -1
  117. package/agent/components/Select.json +7 -5
  118. package/agent/components/Separator.json +1 -1
  119. package/agent/components/ServiceCatalogCta.json +0 -1
  120. package/agent/components/ServiceLauncherCard.json +1 -1
  121. package/agent/components/ServiceRolePanel.json +1 -1
  122. package/agent/components/Sheet.json +5 -5
  123. package/agent/components/Sidebar.json +1 -1
  124. package/agent/components/Skeleton.json +26 -12
  125. package/agent/components/Slider.json +2 -2
  126. package/agent/components/SortableList.json +3 -2
  127. package/agent/components/SplitPane.json +1 -1
  128. package/agent/components/StatCard.json +1 -1
  129. package/agent/components/Steps.json +1 -1
  130. package/agent/components/Swatch.json +1 -1
  131. package/agent/components/Switch.json +1 -1
  132. package/agent/components/Table.json +1 -1
  133. package/agent/components/Tabs.json +3 -3
  134. package/agent/components/Text.json +5 -1
  135. package/agent/components/TextDiff.json +5 -4
  136. package/agent/components/Textarea.json +1 -1
  137. package/agent/components/ThemeScope.json +1 -1
  138. package/agent/components/ThoughtChain.json +3 -3
  139. package/agent/components/TimePicker.json +1 -1
  140. package/agent/components/Timeline.json +1 -1
  141. package/agent/components/TimelineGrid.json +5 -4
  142. package/agent/components/Toaster.json +0 -1
  143. package/agent/components/Toggle.json +3 -3
  144. package/agent/components/ToggleGroup.json +1 -1
  145. package/agent/components/Toolbar.json +10 -3
  146. package/agent/components/Tooltip.json +9 -9
  147. package/agent/components/Topbar.json +1 -1
  148. package/agent/components/TopbarItem.json +1 -1
  149. package/agent/components/Transfer.json +2 -2
  150. package/agent/components/Tree.json +1 -1
  151. package/agent/components/TreeSelect.json +1 -1
  152. package/agent/components/TwoFactorSetup.json +1 -1
  153. package/agent/components/Upload.json +1 -1
  154. package/agent/components/UploadCropDialog.json +1 -1
  155. package/agent/components/Welcome.json +3 -3
  156. package/agent/components/formatDate.json +2 -2
  157. package/agent/components/inertiaUpload.json +0 -1
  158. package/agent/components/useZodForm.json +0 -1
  159. package/agent/components-index.json +80 -154
  160. package/agent/components.json +541 -1737
  161. package/agent/index.json +10 -10
  162. package/agent/llms.txt +9 -9
  163. package/agent/patterns/account-recovery-settings.json +1 -1
  164. package/agent/patterns/auth-recovery-panels.json +2 -2
  165. package/agent/patterns/error-pages.json +1 -1
  166. package/agent/patterns/pricing-plans.json +17 -0
  167. package/agent/patterns-index.json +17 -1
  168. package/agent/patterns.json +21 -4
  169. package/agent/rules.json +30 -65
  170. package/agent/tokens.json +27 -57
  171. package/agent/vocabulary.json +3 -3
  172. package/dist/app/app-provider.d.ts +5 -3
  173. package/dist/app/app-provider.js +47 -12
  174. package/dist/app/date-format-labels.d.ts +3 -1
  175. package/dist/app/date-format-labels.js +2 -4
  176. package/dist/app/date-formats.d.ts +21 -2
  177. package/dist/app/date-formats.js +51 -2
  178. package/dist/app/index.d.ts +3 -1
  179. package/dist/app/index.js +5 -0
  180. package/dist/app/locales.d.ts +58 -3
  181. package/dist/app/locales.js +134 -8
  182. package/dist/app/preset.d.ts +25 -0
  183. package/dist/app/preset.js +10 -0
  184. package/dist/app/request-headers.d.ts +3 -3
  185. package/dist/app/request-headers.js +19 -10
  186. package/dist/app/settings-scope.d.ts +54 -0
  187. package/dist/app/settings-scope.js +46 -0
  188. package/dist/app/tenant-theme.js +8 -3
  189. package/dist/app/time-format-labels.d.ts +4 -1
  190. package/dist/app/time-format-labels.js +7 -1
  191. package/dist/app/types.d.ts +10 -2
  192. package/dist/app/use-formatting.d.ts +1 -1
  193. package/dist/components/admin/index.d.ts +1 -1
  194. package/dist/components/admin/index.js +1 -1
  195. package/dist/components/data-display/accordion.d.ts +51 -1
  196. package/dist/components/data-display/accordion.js +247 -1
  197. package/dist/components/data-display/avatar.d.ts +16 -1
  198. package/dist/components/data-display/avatar.js +109 -1
  199. package/dist/components/data-display/credential-reveal.d.ts +9 -2
  200. package/dist/components/data-display/credential-reveal.js +156 -1
  201. package/dist/components/data-display/image.js +5 -3
  202. package/dist/components/data-display/index.d.ts +0 -21
  203. package/dist/components/data-display/index.js +1 -43
  204. package/dist/components/data-display/popover.d.ts +15 -3
  205. package/dist/components/data-display/popover.js +168 -2
  206. package/dist/components/data-entry/branch-scope-picker.d.ts +1 -1
  207. package/dist/components/data-entry/index.d.ts +5 -12
  208. package/dist/components/data-entry/index.js +11 -12
  209. package/dist/components/data-entry/input-otp.d.ts +48 -2
  210. package/dist/components/data-entry/input-otp.js +94 -1
  211. package/dist/components/data-entry/number-input.d.ts +1 -1
  212. package/dist/components/data-entry/password-input.d.ts +38 -2
  213. package/dist/components/data-entry/password-input.js +56 -1
  214. package/dist/components/data-entry/rating.d.ts +38 -2
  215. package/dist/components/data-entry/rating.js +127 -1
  216. package/dist/components/data-entry/segmented.d.ts +94 -2
  217. package/dist/components/data-entry/segmented.js +104 -1
  218. package/dist/components/{ui/tag-input.d.ts → data-entry/select-tags-inline.d.ts} +7 -4
  219. package/dist/components/{ui/tag-input.js → data-entry/select-tags-inline.js} +4 -4
  220. package/dist/components/data-entry/select.js +4 -0
  221. package/dist/components/data-entry/toggle-group.d.ts +108 -2
  222. package/dist/components/data-entry/toggle-group.js +189 -1
  223. package/dist/components/data-entry/toggle.d.ts +86 -2
  224. package/dist/components/data-entry/toggle.js +153 -2
  225. package/dist/components/feedback/alert.d.ts +5 -3
  226. package/dist/components/feedback/alert.js +14 -2
  227. package/dist/components/feedback/index.d.ts +2 -6
  228. package/dist/components/feedback/index.js +1 -13
  229. package/dist/components/feedback/skeleton.d.ts +4 -17
  230. package/dist/components/feedback/skeleton.js +3 -40
  231. package/dist/components/general/index.d.ts +2 -4
  232. package/dist/components/general/index.js +1 -6
  233. package/dist/components/general/typography.d.ts +4 -58
  234. package/dist/components/general/typography.js +7 -141
  235. package/dist/components/layout/aspect-ratio.d.ts +24 -1
  236. package/dist/components/layout/aspect-ratio.js +18 -1
  237. package/dist/components/layout/auth-divider.js +1 -1
  238. package/dist/components/layout/auth-identity.js +6 -2
  239. package/dist/components/layout/centered-shell.d.ts +13 -8
  240. package/dist/components/layout/centered-shell.js +43 -1
  241. package/dist/components/layout/flex.d.ts +1 -1
  242. package/dist/components/layout/flex.js +73 -1
  243. package/dist/components/layout/index.d.ts +1 -13
  244. package/dist/components/layout/index.js +0 -12
  245. package/dist/components/layout/separator.d.ts +25 -2
  246. package/dist/components/layout/separator.js +71 -1
  247. package/dist/components/navigation/{app-setting-toggle.d.ts → app-setting-cycle.d.ts} +3 -4
  248. package/dist/components/navigation/{app-setting-toggle.js → app-setting-cycle.js} +3 -3
  249. package/dist/components/navigation/app-setting-picker.d.ts +6 -2
  250. package/dist/components/navigation/app-setting-picker.js +20 -2
  251. package/dist/components/navigation/index.d.ts +3 -11
  252. package/dist/components/navigation/index.js +1 -9
  253. package/dist/components/navigation/tabs.js +1 -1
  254. package/dist/components/ui/carousel.d.ts +1 -1
  255. package/dist/components/ui/carousel.js +1 -1
  256. package/dist/components/ui/index.d.ts +11 -5
  257. package/dist/components/ui/index.js +5 -5
  258. package/dist/contracts/measurement.json +2 -2
  259. package/dist/email/brand-mark.d.ts +3 -2
  260. package/dist/email/brand-mark.js +1 -1
  261. package/dist/email/color.d.ts +7 -0
  262. package/dist/email/color.js +14 -1
  263. package/dist/email/index.d.ts +10 -2
  264. package/dist/email/index.js +23 -2
  265. package/dist/email/tokens.generated.d.ts +120 -2
  266. package/dist/email/tokens.generated.js +119 -1
  267. package/dist/i18n/locale-tags.d.ts +25 -0
  268. package/dist/i18n/locale-tags.js +59 -0
  269. package/dist/i18n/translate.d.ts +20 -3
  270. package/dist/i18n/translate.js +25 -14
  271. package/dist/i18n/use-translation.d.ts +3 -3
  272. package/dist/i18n/use-translation.js +4 -2
  273. package/dist/{components/navigation → lab}/anchor.d.ts +2 -2
  274. package/dist/{components/navigation → lab}/anchor.js +5 -5
  275. package/dist/{components/data-display → lab}/carousel.js +2 -2
  276. package/dist/{components/layout → lab}/draggable-panel.d.ts +8 -8
  277. package/dist/{components/layout → lab}/draggable-panel.js +2 -2
  278. package/dist/{components/data-entry → lab}/emoji-picker.d.ts +2 -2
  279. package/dist/{components/data-entry → lab}/emoji-picker.js +6 -6
  280. package/dist/{components/general → lab}/float-button.d.ts +8 -8
  281. package/dist/{components/general → lab}/float-button.js +7 -7
  282. package/dist/lab/index.d.ts +39 -0
  283. package/dist/lab/index.js +48 -0
  284. package/dist/{components/layout → lab}/legal-document-shell.d.ts +2 -2
  285. package/dist/{components/layout → lab}/legal-document-shell.js +4 -4
  286. package/dist/{components/data-display → lab}/marquee.d.ts +5 -5
  287. package/dist/{components/data-display → lab}/marquee.js +5 -5
  288. package/dist/{components/layout → lab}/masonry.d.ts +2 -2
  289. package/dist/{components/layout → lab}/masonry.js +3 -3
  290. package/dist/{components/navigation → lab}/mega-menu.d.ts +4 -4
  291. package/dist/{components/navigation → lab}/mega-menu.js +2 -2
  292. package/dist/{components/data-display → lab}/org-chart.d.ts +2 -2
  293. package/dist/{components/data-display → lab}/org-chart.js +4 -4
  294. package/dist/{components/layout → lab}/page-cover.d.ts +2 -2
  295. package/dist/{components/layout → lab}/page-cover.js +2 -2
  296. package/dist/{components/data-display → lab}/range-timeline.d.ts +1 -1
  297. package/dist/{components/data-display → lab}/range-timeline.js +6 -6
  298. package/dist/{components/data-entry → lab}/sortable-list.d.ts +2 -2
  299. package/dist/{components/data-entry → lab}/sortable-list.js +3 -3
  300. package/dist/{components/data-display → lab}/text-diff.d.ts +3 -3
  301. package/dist/{components/data-display → lab}/text-diff.js +4 -4
  302. package/dist/{components/data-display → lab}/timeline-grid.d.ts +2 -2
  303. package/dist/{components/data-display → lab}/timeline-grid.js +1 -1
  304. package/dist/lib/control-styles.js +1 -1
  305. package/dist/lib/datetime/format.js +20 -6
  306. package/dist/lib/datetime/sync.d.ts +6 -2
  307. package/dist/lib/datetime/sync.js +14 -18
  308. package/dist/lib/platform.d.ts +1 -1
  309. package/dist/props/components/app.prop.d.ts +28 -13
  310. package/dist/props/components/data-display.prop.d.ts +19 -29
  311. package/dist/props/components/feedback.prop.d.ts +15 -44
  312. package/dist/props/components/general.prop.d.ts +2 -64
  313. package/dist/props/components/index.d.ts +9 -1
  314. package/dist/props/components/layout.prop.d.ts +41 -57
  315. package/dist/props/registry.d.ts +48 -101
  316. package/dist/props/registry.js +45 -129
  317. package/dist/props/vocabulary/index.d.ts +1 -1
  318. package/dist/props/vocabulary/interaction.prop.d.ts +3 -12
  319. package/dist/styles/alert-layout.css +0 -29
  320. package/dist/styles/data-display-layout.css +14 -22
  321. package/dist/styles/fonts/OFL.txt +93 -0
  322. package/dist/styles/form-layout.css +4 -0
  323. package/dist/styles/index.css +0 -2
  324. package/dist/styles/layers.json +44 -179
  325. package/dist/styles/text-layout.css +0 -15
  326. package/dist/styles.css +2 -0
  327. package/dist/themes/godx-tokens.css +41 -0
  328. package/dist/themes/godx.css +3 -0
  329. package/dist/themes/godx.d.ts +16 -0
  330. package/dist/themes/godx.js +12 -0
  331. package/dist/tokens/components/feedback.css +0 -6
  332. package/dist/tokens/derived.css +23 -22
  333. package/dist/tokens/foundation.css +4 -6
  334. package/docs/COMPOSITION-VS-COMPONENT.md +58 -33
  335. package/docs/CONSUMER-RULES.md +1 -1
  336. package/docs/CUSTOMER-THEMING.md +17 -53
  337. package/docs/migrations/v32.md +105 -0
  338. package/package.json +59 -19
  339. package/scripts/_agent-setup.mjs +54 -3
  340. package/scripts/brand-accent.generated.mjs +15 -2
  341. package/scripts/cli.mjs +36 -11
  342. package/scripts/codemod.mjs +542 -0
  343. package/scripts/consumer-rule.md +21 -43
  344. package/scripts/postinstall.mjs +10 -47
  345. package/scripts/prune-css.mjs +1 -1
  346. package/scripts/ui-audit.mjs +5 -2
  347. package/dist/components/data-display/chat-bubble.d.ts +0 -30
  348. package/dist/components/data-display/chat-bubble.js +0 -229
  349. package/dist/components/data-display/hover-card.d.ts +0 -1
  350. package/dist/components/data-display/hover-card.js +0 -7
  351. package/dist/components/data-display/thought-chain.d.ts +0 -42
  352. package/dist/components/data-display/thought-chain.js +0 -177
  353. package/dist/components/data-display/thumbnail.d.ts +0 -37
  354. package/dist/components/data-display/thumbnail.js +0 -20
  355. package/dist/components/data-display/welcome.d.ts +0 -26
  356. package/dist/components/data-display/welcome.js +0 -37
  357. package/dist/components/data-entry/attachments.d.ts +0 -19
  358. package/dist/components/data-entry/attachments.js +0 -366
  359. package/dist/components/data-entry/chat-composer.d.ts +0 -51
  360. package/dist/components/data-entry/chat-composer.js +0 -200
  361. package/dist/components/data-entry/chat-suggestion.d.ts +0 -28
  362. package/dist/components/data-entry/chat-suggestion.js +0 -309
  363. package/dist/components/data-entry/tag-input.d.ts +0 -2
  364. package/dist/components/data-entry/tag-input.js +0 -5
  365. package/dist/components/feedback/banner.d.ts +0 -21
  366. package/dist/components/feedback/banner.js +0 -19
  367. package/dist/components/feedback/callout.d.ts +0 -23
  368. package/dist/components/feedback/callout.js +0 -42
  369. package/dist/components/layout/auth-shell.d.ts +0 -10
  370. package/dist/components/layout/auth-shell.js +0 -42
  371. package/dist/components/layout/space-compact.d.ts +0 -65
  372. package/dist/components/layout/space-compact.js +0 -52
  373. package/dist/components/navigation/conversations.d.ts +0 -39
  374. package/dist/components/navigation/conversations.js +0 -371
  375. package/dist/components/ui/accordion.d.ts +0 -51
  376. package/dist/components/ui/accordion.js +0 -254
  377. package/dist/components/ui/aspect-ratio.d.ts +0 -24
  378. package/dist/components/ui/aspect-ratio.js +0 -21
  379. package/dist/components/ui/avatar.d.ts +0 -16
  380. package/dist/components/ui/avatar.js +0 -115
  381. package/dist/components/ui/credential-reveal.d.ts +0 -9
  382. package/dist/components/ui/credential-reveal.js +0 -160
  383. package/dist/components/ui/hover-card.d.ts +0 -47
  384. package/dist/components/ui/hover-card.js +0 -205
  385. package/dist/components/ui/input-otp.d.ts +0 -48
  386. package/dist/components/ui/input-otp.js +0 -101
  387. package/dist/components/ui/password-input.d.ts +0 -38
  388. package/dist/components/ui/password-input.js +0 -60
  389. package/dist/components/ui/rating.d.ts +0 -38
  390. package/dist/components/ui/rating.js +0 -131
  391. package/dist/components/ui/segmented.d.ts +0 -94
  392. package/dist/components/ui/segmented.js +0 -108
  393. package/dist/components/ui/separator.d.ts +0 -25
  394. package/dist/components/ui/separator.js +0 -74
  395. package/dist/components/ui/toggle-group.d.ts +0 -108
  396. package/dist/components/ui/toggle-group.js +0 -194
  397. package/dist/components/ui/toggle.d.ts +0 -86
  398. package/dist/components/ui/toggle.js +0 -156
  399. package/docs/CANONICAL-CONTRACTS.md +0 -206
  400. package/docs/COMPONENTS.md +0 -163
  401. package/docs/DATETIME.md +0 -78
  402. package/docs/DEVELOPMENT.md +0 -269
  403. package/docs/FRAME-A11Y-CI.md +0 -287
  404. package/docs/FRAME-COVERAGE-LEDGER.md +0 -123
  405. package/docs/FRAME-COVERAGE-REPORT.md +0 -228
  406. package/docs/FRAME-COVERAGE-STANDARD.md +0 -65
  407. package/docs/FRAME-COVERAGE.md +0 -29
  408. package/docs/MEASUREMENT-CONTRACT.md +0 -109
  409. package/docs/PROPS-REGISTRY.md +0 -61
  410. package/docs/PROPS-VOCABULARY.md +0 -100
  411. package/docs/REGISTRY.md +0 -70
  412. package/docs/TESTING.md +0 -107
  413. package/docs/THEME-API-COVERAGE.md +0 -538
  414. package/docs/WHAT-BELONGS-HERE.md +0 -179
  415. package/docs/asset-modules.d.ts +0 -53
  416. package/docs/assets/cover-terrain.svg +0 -6
  417. package/docs/assets/portrait-amber.svg +0 -5
  418. package/docs/assets/portrait-clay.svg +0 -5
  419. package/docs/assets/portrait-indigo.svg +0 -5
  420. package/docs/assets/portrait-iris.svg +0 -5
  421. package/docs/assets/portrait-moss.svg +0 -5
  422. package/docs/assets/portrait-plum.svg +0 -5
  423. package/docs/assets/portrait-slate.svg +0 -5
  424. package/docs/assets/service-mark-rose.svg +0 -6
  425. package/docs/assets/service-mark-teal.svg +0 -5
  426. package/docs/assets/shot-landscape.svg +0 -12
  427. package/docs/assets/shot-portrait.svg +0 -10
  428. package/docs/assets/tcgm/card-1.svg +0 -1
  429. package/docs/assets/tcgm/card-2.svg +0 -1
  430. package/docs/assets/tcgm/card-3.svg +0 -1
  431. package/docs/assets/tcgm/card-4.svg +0 -1
  432. package/docs/assets/tcgm/card-5.svg +0 -1
  433. package/docs/assets/tcgm/card-6.svg +0 -1
  434. package/docs/assets/tcgm/hero-prism.svg +0 -1
  435. package/docs/assets/tcgm/scene-1.svg +0 -1
  436. package/docs/assets/tcgm/scene-2.svg +0 -1
  437. package/docs/assets/tcgm/scene-3.svg +0 -1
  438. package/docs/assets/tcgm/scene-4.svg +0 -1
  439. package/docs/assets/tcgm/scene-5.svg +0 -1
  440. package/docs/assets/tcgm/tcgm-lockup-color.svg +0 -1
  441. package/docs/assets/tcgm/tcgm-symbol-color.svg +0 -1
  442. package/docs/charts/cjk-category-axis.tsx +0 -81
  443. package/docs/charts/compact-bar-trend.tsx +0 -327
  444. package/docs/charts/size-tiers.tsx +0 -192
  445. package/docs/data-display/accordion.tsx +0 -99
  446. package/docs/data-display/avatar.tsx +0 -502
  447. package/docs/data-display/badge.tsx +0 -335
  448. package/docs/data-display/card/examples/detail-panel.tsx +0 -106
  449. package/docs/data-display/card/examples/tab-list.tsx +0 -97
  450. package/docs/data-display/card/index.md +0 -3
  451. package/docs/data-display/card/index.tsx +0 -390
  452. package/docs/data-display/carousel.tsx +0 -160
  453. package/docs/data-display/charts.tsx +0 -278
  454. package/docs/data-display/chat-bubble.tsx +0 -397
  455. package/docs/data-display/code-block.tsx +0 -188
  456. package/docs/data-display/collapsible.tsx +0 -162
  457. package/docs/data-display/credential-reveal.tsx +0 -148
  458. package/docs/data-display/data-table/examples/antd-parity.tsx +0 -257
  459. package/docs/data-display/data-table/examples/approval-queue.tsx +0 -212
  460. package/docs/data-display/data-table/examples/grid-features.tsx +0 -158
  461. package/docs/data-display/data-table/examples/list-page.tsx +0 -175
  462. package/docs/data-display/data-table/examples/selectable-inbox.tsx +0 -113
  463. package/docs/data-display/data-table/examples/server-paged.tsx +0 -179
  464. package/docs/data-display/data-table/examples/striped-list.tsx +0 -173
  465. package/docs/data-display/data-table/index.md +0 -9
  466. package/docs/data-display/data-table/index.tsx +0 -407
  467. package/docs/data-display/descriptions.tsx +0 -263
  468. package/docs/data-display/empty-state.tsx +0 -164
  469. package/docs/data-display/feature-list.tsx +0 -159
  470. package/docs/data-display/hover-card.tsx +0 -181
  471. package/docs/data-display/image.tsx +0 -170
  472. package/docs/data-display/legend.tsx +0 -158
  473. package/docs/data-display/list-row.tsx +0 -441
  474. package/docs/data-display/markdown.tsx +0 -86
  475. package/docs/data-display/marquee.tsx +0 -254
  476. package/docs/data-display/org-chart.tsx +0 -165
  477. package/docs/data-display/permission-matrix.tsx +0 -188
  478. package/docs/data-display/popover-touch.tsx +0 -27
  479. package/docs/data-display/popover.tsx +0 -331
  480. package/docs/data-display/progress.tsx +0 -162
  481. package/docs/data-display/prose.tsx +0 -169
  482. package/docs/data-display/qr-code.tsx +0 -68
  483. package/docs/data-display/scroll-area.tsx +0 -420
  484. package/docs/data-display/service-launcher-card.tsx +0 -445
  485. package/docs/data-display/stat-card.tsx +0 -354
  486. package/docs/data-display/swatch.tsx +0 -107
  487. package/docs/data-display/table.tsx +0 -362
  488. package/docs/data-display/text-diff.tsx +0 -89
  489. package/docs/data-display/thought-chain.tsx +0 -176
  490. package/docs/data-display/thumbnail.tsx +0 -128
  491. package/docs/data-display/timeline-grid.tsx +0 -119
  492. package/docs/data-display/timeline.tsx +0 -671
  493. package/docs/data-display/touch-actions.tsx +0 -36
  494. package/docs/data-display/tree.tsx +0 -724
  495. package/docs/data-display/welcome.tsx +0 -115
  496. package/docs/data-entry/attachments.tsx +0 -160
  497. package/docs/data-entry/block-editor.tsx +0 -105
  498. package/docs/data-entry/branch-scope-picker.tsx +0 -128
  499. package/docs/data-entry/calendar.tsx +0 -226
  500. package/docs/data-entry/cascader.tsx +0 -380
  501. package/docs/data-entry/chat-composer.tsx +0 -619
  502. package/docs/data-entry/chat-suggestion.tsx +0 -301
  503. package/docs/data-entry/checkbox.tsx +0 -256
  504. package/docs/data-entry/color-picker.tsx +0 -189
  505. package/docs/data-entry/command-palette.tsx +0 -179
  506. package/docs/data-entry/command.tsx +0 -341
  507. package/docs/data-entry/country-picker-recipe.tsx +0 -175
  508. package/docs/data-entry/date-picker.tsx +0 -452
  509. package/docs/data-entry/emoji-picker.tsx +0 -35
  510. package/docs/data-entry/form/examples/employee-settings.tsx +0 -267
  511. package/docs/data-entry/form/examples/invoice-form.tsx +0 -387
  512. package/docs/data-entry/form-dynamic-fields.tsx +0 -199
  513. package/docs/data-entry/form-field/examples/a11y-contract.tsx +0 -242
  514. package/docs/data-entry/form-field/examples/create-form.tsx +0 -107
  515. package/docs/data-entry/form-field/index.md +0 -8
  516. package/docs/data-entry/form-field/index.tsx +0 -337
  517. package/docs/data-entry/form-inertia.tsx +0 -80
  518. package/docs/data-entry/form-root.tsx +0 -112
  519. package/docs/data-entry/form.tsx +0 -1498
  520. package/docs/data-entry/input-otp.tsx +0 -258
  521. package/docs/data-entry/input.tsx +0 -796
  522. package/docs/data-entry/label.tsx +0 -102
  523. package/docs/data-entry/markdown-editor.tsx +0 -69
  524. package/docs/data-entry/number-input.tsx +0 -279
  525. package/docs/data-entry/password-input.tsx +0 -102
  526. package/docs/data-entry/password-strength.tsx +0 -99
  527. package/docs/data-entry/radio-group.tsx +0 -316
  528. package/docs/data-entry/rating.tsx +0 -91
  529. package/docs/data-entry/record-picker.tsx +0 -209
  530. package/docs/data-entry/search-input.tsx +0 -121
  531. package/docs/data-entry/segmented-in-filter-row.tsx +0 -60
  532. package/docs/data-entry/segmented.tsx +0 -300
  533. package/docs/data-entry/select-async-contracts.tsx +0 -108
  534. package/docs/data-entry/select-matrix.tsx +0 -209
  535. package/docs/data-entry/select.tsx +0 -547
  536. package/docs/data-entry/slider.tsx +0 -212
  537. package/docs/data-entry/sortable-list.tsx +0 -76
  538. package/docs/data-entry/switch.tsx +0 -314
  539. package/docs/data-entry/tag-input.tsx +0 -145
  540. package/docs/data-entry/textarea.tsx +0 -249
  541. package/docs/data-entry/time-picker.tsx +0 -187
  542. package/docs/data-entry/time-range-picker.tsx +0 -55
  543. package/docs/data-entry/toggle-count.tsx +0 -348
  544. package/docs/data-entry/toggle-group.tsx +0 -438
  545. package/docs/data-entry/toggle.tsx +0 -217
  546. package/docs/data-entry/transfer.tsx +0 -115
  547. package/docs/data-entry/tree-select.tsx +0 -204
  548. package/docs/data-entry/upload-crop-dialog.tsx +0 -109
  549. package/docs/data-entry/upload.tsx +0 -310
  550. package/docs/feedback/alert-dialog.tsx +0 -270
  551. package/docs/feedback/alert.tsx +0 -248
  552. package/docs/feedback/auth-expiry.tsx +0 -104
  553. package/docs/feedback/banner.tsx +0 -183
  554. package/docs/feedback/callout.tsx +0 -220
  555. package/docs/feedback/danger-confirm.tsx +0 -91
  556. package/docs/feedback/dialog-touch.tsx +0 -24
  557. package/docs/feedback/dialog.tsx +0 -373
  558. package/docs/feedback/sheet.tsx +0 -510
  559. package/docs/feedback/skeleton.tsx +0 -168
  560. package/docs/feedback/toast.tsx +0 -135
  561. package/docs/feedback/tooltip.tsx +0 -171
  562. package/docs/feedback/two-factor-setup.tsx +0 -68
  563. package/docs/foundation/_email-specimen.ts +0 -274
  564. package/docs/foundation/_theme-editor-scope.ts +0 -222
  565. package/docs/foundation/colors.tsx +0 -207
  566. package/docs/foundation/density.tsx +0 -242
  567. package/docs/foundation/email-tokens.tsx +0 -323
  568. package/docs/foundation/radius-shadow.tsx +0 -154
  569. package/docs/foundation/spacing.tsx +0 -216
  570. package/docs/foundation/theme-editor.tsx +0 -654
  571. package/docs/foundation/typography.tsx +0 -147
  572. package/docs/general/actions.tsx +0 -175
  573. package/docs/general/activity.tsx +0 -289
  574. package/docs/general/button/examples/destructive-confirm.tsx +0 -90
  575. package/docs/general/button/examples/form-actions.tsx +0 -87
  576. package/docs/general/button/examples/toolbar.tsx +0 -160
  577. package/docs/general/button/index.md +0 -16
  578. package/docs/general/button/index.tsx +0 -236
  579. package/docs/general/float-button.tsx +0 -133
  580. package/docs/general/icon.tsx +0 -217
  581. package/docs/general/logo.tsx +0 -194
  582. package/docs/general/reveal.tsx +0 -309
  583. package/docs/general/typography.tsx +0 -542
  584. package/docs/i18n/messages/en.json +0 -1715
  585. package/docs/i18n/messages/ja.json +0 -1708
  586. package/docs/i18n/messages/vi.json +0 -1708
  587. package/docs/layout/account-chip.tsx +0 -72
  588. package/docs/layout/admin-collection.tsx +0 -122
  589. package/docs/layout/affix.tsx +0 -209
  590. package/docs/layout/app-launcher.tsx +0 -211
  591. package/docs/layout/app-shell-arrangements.tsx +0 -225
  592. package/docs/layout/app-shell-narrow-bar.tsx +0 -205
  593. package/docs/layout/app-shell-states.tsx +0 -171
  594. package/docs/layout/app-shell.tsx +0 -395
  595. package/docs/layout/aspect-ratio.tsx +0 -135
  596. package/docs/layout/auth-account-summary.tsx +0 -103
  597. package/docs/layout/auth-divider.tsx +0 -28
  598. package/docs/layout/auth-footer.tsx +0 -37
  599. package/docs/layout/auth-identity.tsx +0 -70
  600. package/docs/layout/auth-recovery/examples/mfa-challenge.md +0 -41
  601. package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +0 -254
  602. package/docs/layout/auth-recovery/examples/mobile-390.md +0 -25
  603. package/docs/layout/auth-recovery/examples/mobile-390.tsx +0 -82
  604. package/docs/layout/auth-recovery/examples/password-recovery.md +0 -24
  605. package/docs/layout/auth-recovery/examples/password-recovery.tsx +0 -197
  606. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +0 -27
  607. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +0 -156
  608. package/docs/layout/auth-recovery/index.md +0 -140
  609. package/docs/layout/auth-recovery/index.tsx +0 -96
  610. package/docs/layout/auth-shell-context.tsx +0 -103
  611. package/docs/layout/auth-shell-device.tsx +0 -112
  612. package/docs/layout/auth-shell-registration.tsx +0 -338
  613. package/docs/layout/auth-shell-variants.tsx +0 -143
  614. package/docs/layout/auth-shell.tsx +0 -59
  615. package/docs/layout/auth-stack.tsx +0 -40
  616. package/docs/layout/centered-shell.tsx +0 -102
  617. package/docs/layout/draggable-panel.tsx +0 -127
  618. package/docs/layout/error-surface/examples/application-403.tsx +0 -84
  619. package/docs/layout/error-surface/examples/application-404.tsx +0 -77
  620. package/docs/layout/error-surface/examples/system-500.tsx +0 -47
  621. package/docs/layout/error-surface/examples/system-503.tsx +0 -48
  622. package/docs/layout/error-surface/index.md +0 -153
  623. package/docs/layout/error-surface/index.tsx +0 -239
  624. package/docs/layout/flex.tsx +0 -444
  625. package/docs/layout/legal-document-shell/_data.ts +0 -110
  626. package/docs/layout/legal-document-shell/examples/desktop-1440.md +0 -12
  627. package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +0 -83
  628. package/docs/layout/legal-document-shell/examples/mobile-390.md +0 -22
  629. package/docs/layout/legal-document-shell/examples/mobile-390.tsx +0 -70
  630. package/docs/layout/legal-document-shell/examples/tablet-1024.md +0 -3
  631. package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +0 -84
  632. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +0 -18
  633. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +0 -61
  634. package/docs/layout/legal-document-shell/index.md +0 -51
  635. package/docs/layout/legal-document-shell/index.tsx +0 -101
  636. package/docs/layout/masonry.tsx +0 -291
  637. package/docs/layout/master-detail.tsx +0 -390
  638. package/docs/layout/mobile-shell.tsx +0 -106
  639. package/docs/layout/nav-list.tsx +0 -584
  640. package/docs/layout/org-switcher.tsx +0 -131
  641. package/docs/layout/page-container.tsx +0 -1020
  642. package/docs/layout/page-cover.tsx +0 -56
  643. package/docs/layout/resizable-panel.tsx +0 -419
  644. package/docs/layout/responsive-grid.tsx +0 -403
  645. package/docs/layout/separator.tsx +0 -327
  646. package/docs/layout/service-role-panel.tsx +0 -144
  647. package/docs/layout/sidebar.tsx +0 -689
  648. package/docs/layout/space-compact.tsx +0 -202
  649. package/docs/layout/split-pane.tsx +0 -532
  650. package/docs/layout/topbar-item.tsx +0 -233
  651. package/docs/layout/topbar.tsx +0 -360
  652. package/docs/navigation/anchor.tsx +0 -295
  653. package/docs/navigation/app-setting-picker.tsx +0 -178
  654. package/docs/navigation/app-setting-toggle.tsx +0 -111
  655. package/docs/navigation/breadcrumb.tsx +0 -207
  656. package/docs/navigation/card-tabs.tsx +0 -344
  657. package/docs/navigation/conversations.tsx +0 -176
  658. package/docs/navigation/dropdown-menu.tsx +0 -345
  659. package/docs/navigation/filter-bar.tsx +0 -247
  660. package/docs/navigation/mega-menu-panel.tsx +0 -86
  661. package/docs/navigation/mega-menu.tsx +0 -254
  662. package/docs/navigation/pagination.tsx +0 -293
  663. package/docs/navigation/steps.tsx +0 -315
  664. package/docs/navigation/tabs-rtl.tsx +0 -28
  665. package/docs/navigation/tabs.tsx +0 -755
  666. package/docs/navigation/toolbar.tsx +0 -347
  667. package/docs/providers/app-provider.tsx +0 -191
  668. package/docs/providers/format-date.tsx +0 -230
  669. package/docs/providers/theme-scope.tsx +0 -186
  670. package/docs/query/button-refetch.tsx +0 -161
  671. package/docs/query/data-state.tsx +0 -262
  672. package/docs/query/infinite-query-state.tsx +0 -97
  673. package/docs/query/mutation-feedback.tsx +0 -128
  674. package/docs/query/touch-actions.tsx +0 -68
  675. package/docs/react-router/prefetch-link.tsx +0 -262
  676. package/docs/roadmap/ai-chat-components.md +0 -206
  677. package/docs/roadmap/antd-parity.md +0 -155
  678. package/docs/roadmap/badge-tag-chip-count.md +0 -172
  679. package/docs/roadmap/list-masonry.md +0 -159
  680. package/docs/roadmap/parity-audit-data-display-feedback.md +0 -567
  681. package/docs/roadmap/parity-audit-data-entry.md +0 -368
  682. package/docs/roadmap/parity-audit-layout-navigation-general.md +0 -459
  683. package/docs/roadmap/parity-backlog.md +0 -77
  684. package/docs/roadmap/tree-components.md +0 -151
  685. package/docs/roadmap/website-components.md +0 -813
  686. package/docs/showcase/acme-portal.tsx +0 -461
  687. package/docs/showcase/acme-website.tsx +0 -499
  688. package/docs/showcase/caimono-price-comparison.tsx +0 -919
  689. package/docs/showcase/case1-warehouse-dashboard.tsx +0 -358
  690. package/docs/showcase/case2-employee-me.tsx +0 -438
  691. package/docs/showcase/case3-approval-workflow.tsx +0 -531
  692. package/docs/showcase/case4-login.tsx +0 -312
  693. package/docs/showcase/case5-shift-calendar.tsx +0 -702
  694. package/docs/showcase/case6-agency-handy.tsx +0 -1120
  695. package/docs/showcase/futurelastic-web.tsx +0 -441
  696. package/docs/showcase/marketing-page.tsx +0 -895
  697. package/docs/showcase/org-switcher.tsx +0 -320
  698. package/docs/showcase/permission-matrix.tsx +0 -354
  699. package/docs/showcase/public-landing.tsx +0 -210
  700. package/docs/showcase/settings-account-sections.tsx +0 -559
  701. package/docs/showcase/settings-security-mfa.tsx +0 -145
  702. package/docs/showcase/table-approval-queue.tsx +0 -199
  703. package/docs/showcase/table-bulk-actions.tsx +0 -468
  704. package/docs/showcase/table-compact-kintone.tsx +0 -438
  705. package/docs/showcase/table-conditional-format.tsx +0 -367
  706. package/docs/showcase/table-crud-list.tsx +0 -544
  707. package/docs/showcase/table-density.tsx +0 -349
  708. package/docs/showcase/table-expandable-rows.tsx +0 -496
  709. package/docs/showcase/table-filter-chips.tsx +0 -468
  710. package/docs/showcase/table-footer-totals.tsx +0 -328
  711. package/docs/showcase/table-grouped-subtotals.tsx +0 -398
  712. package/docs/showcase/table-master-detail.tsx +0 -482
  713. package/docs/showcase/table-pagination.tsx +0 -409
  714. package/docs/showcase/table-states.tsx +0 -371
  715. package/docs/showcase/table-sticky-columns.tsx +0 -377
  716. package/docs/showcase/table-tree-rows.tsx +0 -451
  717. package/docs/showcase/table-view-tabs.tsx +0 -488
  718. package/docs/showcase/tcgm-website.tsx +0 -1047
  719. package/docs/showcase/tenant-brand-color.tsx +0 -338
  720. package/docs/showcase/theme-customization.tsx +0 -1292
  721. package/docs/showcase/theme-lab.tsx +0 -2125
  722. package/docs/themes/flat.css +0 -466
  723. package/docs/themes/glassmorphism.css +0 -960
  724. package/docs/themes/index.ts +0 -219
  725. package/docs/themes/neubrutalism.css +0 -481
  726. /package/dist/components/navigation/{filter-bar.d.ts → toolbar.d.ts} +0 -0
  727. /package/dist/components/navigation/{filter-bar.js → toolbar.js} +0 -0
  728. /package/dist/{components/data-display → lab}/carousel.d.ts +0 -0
  729. /package/dist/{components/data-entry → lab}/emoji-data.d.ts +0 -0
  730. /package/dist/{components/data-entry → lab}/emoji-data.js +0 -0
  731. /package/dist/{components/data-display → lab}/marquee-reveal.d.ts +0 -0
  732. /package/dist/{components/data-display → lab}/marquee-reveal.js +0 -0
package/docs/showcase/theme-customization.tsx DELETED
@@ -1,1292 +0,0 @@
1
- /**
2
- * Showcase · theme-customization — "Flexible theme customization".
3
- *
4
- * ONE DENSE BOARD, dozens of real primitives, and a theme bar above it. Pick a palette and the
5
- * whole board repaints in place: no reload, no remount, no second stylesheet. The page is the
6
- * inventory claim as much as the theming claim — every cell below is a real installable
7
- * `@godxjp/ui` export, composed the way a consumer would compose it.
8
- *
9
- * ── Gate 0 verdict: COMPOSITION PATTERN ──────────────────────────────────────────────────────
10
- * A "ThemeBoard" / "ThemePresetChips" fails the Framework-Component Test
11
- * (docs/COMPOSITION-VS-COMPONENT.md): C2 it owns no behaviour a primitive does not already own
12
- * (`Segmented` is the one-of-N control, `ColorPicker` is the hex control, `applyPrimaryColor` is
13
- * the seed API); C3 it is fully expressible from existing primitives plus a scoped token block;
14
- * C7 it would ship one marketing page's layout to every consumer. So it lives HERE. Zero new
15
- * components, zero new tokens.
16
- *
17
- * ── How the chips change the SEED (docs/CUSTOMER-THEMING.md, level 1 · scoped at level 3) ────
18
- * The chips never touch a component and never touch a role. They move `--primary` — the seed the
19
- * whole action family derives from at runtime (`--primary-hover`, `--primary-active`,
20
- * `--primary-border`, `--control-outline`, `--text-link`, `--text-brand`, `--text-primary` are all
21
- * `initial` knobs resolved at the painting element, src/tokens/derived.css). They are declared
22
- * under `[data-godx-theme="…"]`, a SCOPE, so the board repaints while the rest of the document
23
- * does not have to know.
24
- *
25
- * ── THE FREEZE TRAP THIS PAGE ACTUALLY HIT (docs/TOKENS.md · "the :root freeze rule") ─────────
26
- * Two of them, and neither is a colour knob:
27
- *
28
- * 1. `--ring` is NOT an `initial` knob. src/tokens/derived.css declares `--ring: var(--primary)`
29
- * at `:root`, and says why it cannot be a knob: it is a public role that consumer CSS reads
30
- * as `hsl(var(--ring))` directly. A `var()` substitutes at the element that DECLARES it, so
31
- * `--ring` computes once on `<html>` from the ROOT seed and inherits that frozen value all
32
- * the way down. Scoping `--primary` alone therefore repainted every fill, border, link and
33
- * hover on the board and left every FOCUS RING on the old violet. The fix is one line per
34
- * scope: re-declare `--ring: var(--primary)` INSIDE the scope, where it re-resolves.
35
- *
36
- * 2. The radius scale is the same shape one tier up. `--radius-xs … --radius-2xl` are
37
- * `calc(var(--radius) · φⁿ)` declared at `:root` (src/styles/base.css), and
38
- * `--card-radius: var(--radius-xl)` / `--control-radius: var(--radius)` /
39
- * `--button-radius: var(--radius-md)` / `--badge-radius: var(--radius-md)` mirror them from
40
- * `:root` too. Scoping `--radius` for the corner chips moved NOTHING until the scope restated
41
- * the six steps and the four component mirrors. That is the same fix acme-portal carries.
42
- *
43
- * ── The one thing the chips deliberately do NOT move ─────────────────────────────────────────
44
- * `--brand` / `--brand-foreground`. The identity role is independent of the action colour on
45
- * purpose (gh#250), so a tenant changing its button colour does not retint its logo.
46
- *
47
- * ── Reaching the edges, deliberately ─────────────────────────────────────────────────────────
48
- * A tidy board is the defect, not the deliverable, so every row here carries at least one of:
49
- * a three-line label beside a one-word one; a 71-character unbreakable token; a slot left empty
50
- * beside the same slot fully filled; CJK beside Latin beside Vietnamese diacritics.
51
- *
52
- * THE FIRST SWEEP AT 375px FOUND TWO THINGS, and neither was in the page's own markup:
53
- *
54
- * · `ChatBubble loading` painted a 544px placeholder inside a 341px card, 214px of it outside
55
- * with no scrollport above it. `.ui-chat-bubble-skeleton-line` declared a DEFINITE 34rem
56
- * inside an implicit `auto` grid track, and an `auto` track floors at its item's max-content,
57
- * so the line's own `max-inline-size: 100%` resolved against 544px and did nothing. Fixed
58
- * upstream in src/styles/data-display-layout.css (`grid-template-columns: minmax(0, …)`),
59
- * because a local workaround here would have left it broken for every other consumer.
60
- *
61
- * · A `TagInput` sat 37px wider than its column. That one was THIS page's bug: `Field` is the
62
- * compact label-plus-control row and puts `flex-shrink: 0` on its control cell, which is right
63
- * for a checkbox box and wrong for a full-width field. Every full-width control below is
64
- * `FormField`; `Field` is kept only for the two `Switch` rows, which is what it is for.
65
- *
66
- * Measured after both: `check:frame-overflow`'s own probe reports 0 hits and 0 page overflow at
67
- * 320 / 375 / 390 / 768 / 1024 / 1280 / 1440, and 0 under `dir="rtl"`.
68
- *
69
- * ── i18n / a11y / RTL ────────────────────────────────────────────────────────────────────────
70
- * Every string and every `aria-label` comes from `t()` (`themeShowcase.*` in
71
- * docs/i18n/messages/{en,ja,vi}.json — demo copy the preview registers at startup rather than
72
- * ship to consumers; gh#858); the locale picker drives the SAME `AppProvider` locale the
73
- * library's own chrome reads, so the page and its components switch together. Numbers, currency,
74
- * dates, lists, regions and plurals go through `Intl` with that locale — no hand-built formats, no
75
- * emoji flags. Logical CSS only; no Tailwind spacing or layout utilities on this page's own
76
- * markup.
77
- */
78
- import * as React from "react";
79
- import {
80
- AtSign,
81
- Bell,
82
- CircleUserRound,
83
- Fingerprint,
84
- KeyRound,
85
- Mail,
86
- MapPin,
87
- ShieldCheck,
88
- Trash2,
89
- } from "lucide-react";
90
-
91
- import { applyPrimaryColor } from "@godxjp/ui/app";
92
- import { useTranslation } from "@godxjp/ui/i18n";
93
- import { Activity, Button, Icon, Text } from "@godxjp/ui/general";
94
- import {
95
- Avatar,
96
- AvatarFallback,
97
- Badge,
98
- Card,
99
- CardAction,
100
- CardContent,
101
- CardDescription,
102
- CardFooter,
103
- CardHeader,
104
- CardTitle,
105
- Carousel,
106
- CarouselContent,
107
- CarouselDots,
108
- CarouselItem,
109
- CarouselNext,
110
- CarouselPrevious,
111
- ChatBubble,
112
- CredentialReveal,
113
- Descriptions,
114
- Legend,
115
- ListRow,
116
- Popover,
117
- PopoverContent,
118
- PopoverDescription,
119
- PopoverHeader,
120
- PopoverTitle,
121
- PopoverTrigger,
122
- Progress,
123
- QrCode,
124
- StatCard,
125
- Swatch,
126
- Table,
127
- TableBody,
128
- TableCell,
129
- TableHead,
130
- TableHeader,
131
- TableRow,
132
- ThoughtChain,
133
- Timeline,
134
- Welcome,
135
- type BadgeTone,
136
- type TimelineItem,
137
- } from "@godxjp/ui/data-display";
138
- import {
139
- Form,
140
- CheckboxGroup,
141
- ColorPicker,
142
- DatePicker,
143
- Field,
144
- FormField,
145
- InputOTP,
146
- InputOTPGroup,
147
- InputOTPSlot,
148
- Input,
149
- PasswordInput,
150
- PasswordStrength,
151
- RadioGroup,
152
- Rating,
153
- Segmented,
154
- Select,
155
- Slider,
156
- Switch,
157
- TagInput,
158
- } from "@godxjp/ui/data-entry";
159
- import {
160
- Alert,
161
- AlertDescription,
162
- AlertTitle,
163
- Tooltip,
164
- TooltipContent,
165
- TooltipTrigger,
166
- } from "@godxjp/ui/feedback";
167
- import { AuthDivider, Flex, PageContainer, ResponsiveGrid, Separator } from "@godxjp/ui/layout";
168
- import { AppSettingPicker, AppSettingToggle, Steps, Tabs } from "@godxjp/ui/navigation";
169
-
170
- /* ────────────────────────────────────────────────────────────────────────────────────────────
171
- * THE ENTIRE THEME LAYER. One scoped block per palette, one per corner step. No component CSS,
172
- * no `!important`, no fork. Every seed pair was measured before it was written (WCAG 2.2 SC 1.4.3
173
- * on the label, SC 1.4.11 on the fill against its canvas):
174
- *
175
- * palette light seed label fill/canvas dark seed label fill/canvas
176
- * godx #7A00FF 6.42:1 6.42:1 #DCBCFF 12.68:1 10.61:1
177
- * indigo #4338CA 7.90:1 7.90:1 #A5B4FC 10.53:1 8.81:1
178
- * teal #0F766E 5.47:1 5.47:1 #5EEAD4 14.20:1 11.88:1
179
- * amber #B45309 5.02:1 5.02:1 #FCD34D 14.56:1 12.18:1
180
- * rose #BE123C 6.29:1 6.29:1 #FDA4AF 11.11:1 9.29:1
181
- *
182
- * A DARK SEED IS NOT A LIGHT SEED. Nothing in CSS lifts one onto the dark spine, so each palette
183
- * declares both and the dark half is selected by the theme axis AppProvider writes to <html>
184
- * (`[data-theme="dark"]`, with the legacy `.dark` class as its equal alias). A block that set the
185
- * light seed only would keep a mid-dark fill on a dark canvas and nothing would say so.
186
- * ──────────────────────────────────────────────────────────────────────────────────────────── */
187
- const THEME_CSS = `
188
- [data-godx-theme="godx"] { --primary: 268.7 100% 50%; --primary-foreground: 0 0% 100%; }
189
- [data-godx-theme="indigo"] { --primary: 244.5 57.9% 50.6%; --primary-foreground: 0 0% 100%; }
190
- [data-godx-theme="teal"] { --primary: 175.3 77.4% 26.1%; --primary-foreground: 0 0% 100%; }
191
- [data-godx-theme="amber"] { --primary: 26 90.5% 37.1%; --primary-foreground: 0 0% 100%; }
192
- [data-godx-theme="rose"] { --primary: 345.3 82.7% 40.8%; --primary-foreground: 0 0% 100%; }
193
-
194
- :root[data-theme="dark"] [data-godx-theme="godx"], .dark [data-godx-theme="godx"] { --primary: 268.7 100% 86.9%; --primary-foreground: 0 0% 0%; }
195
- :root[data-theme="dark"] [data-godx-theme="indigo"], .dark [data-godx-theme="indigo"] { --primary: 229.7 93.5% 81.8%; --primary-foreground: 0 0% 0%; }
196
- :root[data-theme="dark"] [data-godx-theme="teal"], .dark [data-godx-theme="teal"] { --primary: 170.6 76.9% 64.3%; --primary-foreground: 0 0% 0%; }
197
- :root[data-theme="dark"] [data-godx-theme="amber"], .dark [data-godx-theme="amber"] { --primary: 45.9 96.7% 64.5%; --primary-foreground: 0 0% 0%; }
198
- :root[data-theme="dark"] [data-godx-theme="rose"], .dark [data-godx-theme="rose"] { --primary: 352.6 95.7% 81.8%; --primary-foreground: 0 0% 0%; }
199
-
200
- /* TRAP 1 — --ring is a public ROLE, not an \`initial\` knob (src/tokens/derived.css declares
201
- * \`--ring: var(--primary)\` at :root and explains why it must stay a role). It therefore freezes on
202
- * the ROOT seed, and every focus ring on this board stayed violet until this line existed. One
203
- * declaration inside the scope re-resolves it against the scope's own --primary. */
204
- [data-godx-theme] { --ring: var(--primary); }
205
-
206
- /* TRAP 2 — the radius scale freezes the same way, one tier up: the six steps are
207
- * \`calc(var(--radius) · φⁿ)\` declared at :root, and four component knobs mirror them from :root
208
- * too. Scoping --radius alone moved nothing at all; the scope has to restate the chain. */
209
- [data-godx-corner="sharp"] { --radius: 0rem; }
210
- [data-godx-corner="default"] { --radius: 0.375rem; }
211
- [data-godx-corner="soft"] { --radius: 0.875rem; }
212
- [data-godx-corner] {
213
- --radius-xs: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio));
214
- --radius-sm: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio));
215
- --radius-md: calc(var(--radius) / var(--radius-ratio));
216
- --radius-lg: var(--radius);
217
- --radius-xl: calc(var(--radius) * var(--radius-ratio));
218
- --radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));
219
- --card-radius: var(--radius-xl);
220
- --control-radius: var(--radius);
221
- --button-radius: var(--radius-md);
222
- --badge-radius: var(--radius-md);
223
- }
224
- `;
225
-
226
- /** The hex each palette chip stands for, in the LIGHT theme — what the Swatch beside it samples. */
227
- const PALETTE_SEED: Record<string, string> = {
228
- godx: "#7A00FF",
229
- indigo: "#4338CA",
230
- teal: "#0F766E",
231
- amber: "#B45309",
232
- rose: "#BE123C",
233
- };
234
-
235
- /* ── Data. Ids, hex, people's names and amounts are DATA and stay as they are; every label that
236
- * describes them is a message key. Hosts use RFC 2606 reserved names. ────────────────────────── */
237
-
238
- /** 71 characters, no space, no hyphenation opportunity a browser will take. The string exists to
239
- * prove the board survives one: it sits in a Descriptions value, a Timeline title and a table
240
- * cell, each of which has to decide between truncating it and pushing its neighbour off the row. */
241
- const UNBREAKABLE = "THEME_SEED_LEDGER_0007_CONTRAST_VERIFIED_AGAINST_CANVAS_AND_LABEL_00042";
242
-
243
- const REGION_CODES = ["JP", "VN", "DE", "BR", "IN"] as const;
244
-
245
- const RELEASE_ROWS = [
246
- {
247
- id: "RLS-2026-0912",
248
- ref: UNBREAKABLE,
249
- owner: "佐藤 玲",
250
- initials: "佐",
251
- region: "JP",
252
- currency: "JPY",
253
- amount: 1_284_000,
254
- tone: "success" as BadgeTone,
255
- statusKey: "shipped",
256
- },
257
- {
258
- id: "RLS-2026-0913",
259
- ref: "RLS-13",
260
- owner: "Nguyễn Thị Hương Giang",
261
- initials: "NG",
262
- region: "VN",
263
- currency: "VND",
264
- amount: 41_500_000,
265
- tone: "warning" as BadgeTone,
266
- statusKey: "review",
267
- },
268
- {
269
- id: "RLS-2026-0914",
270
- ref: "",
271
- owner: "A",
272
- initials: "A",
273
- region: "DE",
274
- currency: "EUR",
275
- amount: 0,
276
- tone: "muted" as BadgeTone,
277
- statusKey: "draft",
278
- },
279
- {
280
- id: "RLS-2026-0915",
281
- ref: "RLS-15-BUILD-ARTEFACT",
282
- owner: "Ana Beatriz Gonçalves de Almeida",
283
- initials: "AB",
284
- region: "BR",
285
- currency: "BRL",
286
- amount: 87_640.5,
287
- tone: "destructive" as BadgeTone,
288
- statusKey: "failed",
289
- },
290
- ] as const;
291
-
292
- const AVATARS = [
293
- { initials: "佐", presence: "online" as const },
294
- { initials: "NG", presence: "busy" as const },
295
- { initials: "AB", presence: "away" as const },
296
- { initials: "Д", presence: "offline" as const },
297
- ];
298
-
299
- export default function ThemeCustomizationShowcase() {
300
- const { t, locale } = useTranslation();
301
- const boardRef = React.useRef<HTMLDivElement>(null);
302
-
303
- const [palette, setPalette] = React.useState("godx");
304
- const [corner, setCorner] = React.useState("default");
305
- const [custom, setCustom] = React.useState("#0F62FE");
306
- const [regions, setRegions] = React.useState<string[]>(["JP", "VN"]);
307
- /* UNBREAKABLE FIRST, ON PURPOSE (gh#840). With `maxTagCount={2}` the tag in third place is the
308
- * one that collapses into `+N` — so while the 71-character id sat last, the chip that painted
309
- * outside the control was never actually drawn on this page, and `maxTagTextLength` had nothing
310
- * to demonstrate. Held first, the row now draws all three of the issue's answers at once: the
311
- * long id truncated to its ceiling (full value in `title` and in the remover's name), a normal
312
- * chip beside it, and a `+1` that names the tag behind it. */
313
- const [labels, setLabels] = React.useState<string[]>([UNBREAKABLE, "本番", "ổn định"]);
314
- const [plan, setPlan] = React.useState("standard");
315
- const [channels, setChannels] = React.useState<string[]>(["email"]);
316
- const [cadence, setCadence] = React.useState("weekly");
317
- const [density, setDensity] = React.useState("comfortable");
318
- const [autoDeploy, setAutoDeploy] = React.useState(true);
319
- const [budget, setBudget] = React.useState<number[]>([40]);
320
- const [score, setScore] = React.useState(3.5);
321
- const [secret, setSecret] = React.useState("");
322
- const [confirmOpen, setConfirmOpen] = React.useState(false);
323
-
324
- /* The CUSTOM chip takes the other documented road to the same seed: `applyPrimaryColor` computes
325
- * `--primary`, picks `--primary-foreground` by the fill's own luminance, resets the four derived
326
- * knobs so an ancestor's literal cannot outrank the new seed, and — note — sets `--ring` itself,
327
- * for exactly the reason trap 1 above exists. It writes to this element, so it is scoped too.
328
- * It does NOT lift the seed for a dark canvas; that is what `pnpm gen:brand` is for. */
329
- React.useEffect(() => {
330
- const root = boardRef.current;
331
- if (!root || palette !== "custom") return;
332
- return applyPrimaryColor(root, custom);
333
- }, [palette, custom]);
334
-
335
- const money = (amount: number, currency: string) =>
336
- new Intl.NumberFormat(locale, { style: "currency", currency }).format(amount);
337
- const regionName = (code: string) =>
338
- new Intl.DisplayNames([locale], { type: "region" }).of(code) ?? code;
339
- const shortDate = (iso: string) =>
340
- new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(new Date(iso));
341
- const percent = (value: number) =>
342
- new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(value);
343
- const regionList = new Intl.ListFormat(locale, { style: "long", type: "conjunction" }).format(
344
- regions.map(regionName),
345
- );
346
- /* The counted noun is a CLDR CATEGORY MAP in the catalog; `t()` selects the category with
347
- * `Intl.PluralRules` for the active locale and formats the number with `Intl.NumberFormat`.
348
- * "1 regions" is a bug, and a single template is how you ship one. */
349
- const seatNoun = t("themeShowcase.dashboard.seats", { count: regions.length });
350
-
351
- const paletteOptions = ["godx", "indigo", "teal", "amber", "rose", "custom"].map((id) => ({
352
- value: id,
353
- label: (
354
- <Flex as="span" align="center" gap="xs">
355
- <Swatch color={id === "custom" ? custom : PALETTE_SEED[id]} />
356
- <Text as="span" size="xs">
357
- {t(`themeShowcase.palette.${id}`)}
358
- </Text>
359
- </Flex>
360
- ),
361
- }));
362
-
363
- const timelineItems: TimelineItem[] = [
364
- {
365
- title: t("themeShowcase.timeline.seedApplied"),
366
- location: t("themeShowcase.timeline.scope"),
367
- time: shortDate("2026-09-12T09:30:00Z"),
368
- status: "done",
369
- },
370
- {
371
- /* A title with an intrinsic width of its own: it must shrink rather than push `time` off the
372
- * end of the row. Every other item here is a short string, which can never show that. */
373
- title: (
374
- <Text truncate mono>
375
- {UNBREAKABLE}
376
- </Text>
377
- ),
378
- time: shortDate("2026-09-12T11:18:00Z"),
379
- status: "current",
380
- },
381
- { title: t("themeShowcase.timeline.contrastQueued"), status: "pending" },
382
- ];
383
-
384
- return (
385
- <div ref={boardRef} data-godx-theme={palette} data-godx-corner={corner}>
386
- <style>{THEME_CSS}</style>
387
- <PageContainer
388
- title={t("themeShowcase.page.title")}
389
- subtitle={t("themeShowcase.page.subtitle")}
390
- extra={{
391
- end: (
392
- <Flex align="center" gap="sm" wrap>
393
- <AppSettingPicker kind="locale" appearance="bar" />
394
- <AppSettingToggle kind="theme" appearance="bar" />
395
- </Flex>
396
- ),
397
- }}
398
- >
399
- <Flex direction="col" gap="lg">
400
- {/* ── The theme bar: seed, corner, custom hex ─────────────────────────────────── */}
401
- <Card>
402
- <CardHeader>
403
- <CardTitle level={2}>{t("themeShowcase.bar.title")}</CardTitle>
404
- <CardDescription>{t("themeShowcase.bar.description")}</CardDescription>
405
- </CardHeader>
406
- <CardContent>
407
- <Flex direction="col" gap="md">
408
- <Segmented
409
- aria-label={t("themeShowcase.bar.paletteLabel")}
410
- value={palette}
411
- onValueChange={setPalette}
412
- options={paletteOptions}
413
- />
414
- <Flex direction={{ base: "col", md: "row" }} gap="md" align="start">
415
- <Segmented
416
- aria-label={t("themeShowcase.bar.cornerLabel")}
417
- value={corner}
418
- onValueChange={setCorner}
419
- size="sm"
420
- options={[
421
- { value: "sharp", label: t("themeShowcase.corner.sharp") },
422
- { value: "default", label: t("themeShowcase.corner.default") },
423
- { value: "soft", label: t("themeShowcase.corner.soft") },
424
- ]}
425
- />
426
- <FormField
427
- id="theme-seed"
428
- label={t("themeShowcase.bar.customLabel")}
429
- helper={t("themeShowcase.bar.customHint")}
430
- >
431
- <ColorPicker
432
- id="theme-seed"
433
- value={custom}
434
- onValueChange={(next) => {
435
- setCustom(next);
436
- setPalette("custom");
437
- }}
438
- />
439
- </FormField>
440
- </Flex>
441
- <Text size="xs" tone="muted">
442
- {t("themeShowcase.bar.identityNote")}
443
- </Text>
444
- </Flex>
445
- </CardContent>
446
- </Card>
447
-
448
- {/* ── The board ───────────────────────────────────────────────────────────────── */}
449
- <Card>
450
- <CardContent flush>
451
- <Tabs
452
- defaultValue="components"
453
- variant="line"
454
- bodied
455
- items={[
456
- {
457
- value: "components",
458
- label: t("themeShowcase.tabs.components"),
459
- content: (
460
- <ComponentsBoard
461
- t={t}
462
- locale={locale}
463
- regions={regions}
464
- setRegions={setRegions}
465
- regionList={regionList}
466
- labels={labels}
467
- setLabels={setLabels}
468
- plan={plan}
469
- setPlan={setPlan}
470
- channels={channels}
471
- setChannels={setChannels}
472
- cadence={cadence}
473
- setCadence={setCadence}
474
- density={density}
475
- setDensity={setDensity}
476
- autoDeploy={autoDeploy}
477
- setAutoDeploy={setAutoDeploy}
478
- budget={budget}
479
- setBudget={setBudget}
480
- score={score}
481
- setScore={setScore}
482
- secret={secret}
483
- setSecret={setSecret}
484
- confirmOpen={confirmOpen}
485
- setConfirmOpen={setConfirmOpen}
486
- percent={percent}
487
- />
488
- ),
489
- },
490
- {
491
- value: "dashboard",
492
- label: t("themeShowcase.tabs.dashboard"),
493
- content: (
494
- <DashboardBoard
495
- t={t}
496
- money={money}
497
- regionName={regionName}
498
- shortDate={shortDate}
499
- percent={percent}
500
- seatNoun={seatNoun}
501
- timelineItems={timelineItems}
502
- locale={locale}
503
- />
504
- ),
505
- },
506
- ]}
507
- />
508
- </CardContent>
509
- </Card>
510
- </Flex>
511
- </PageContainer>
512
- </div>
513
- );
514
- }
515
-
516
- type Translate = (key: string, params?: Record<string, string | number>) => string;
517
-
518
- /* ── Tab 1 · COMPONENTS — the dense inventory ─────────────────────────────────────────────── */
519
- function ComponentsBoard(props: {
520
- t: Translate;
521
- locale: string;
522
- regions: string[];
523
- setRegions: (next: string[]) => void;
524
- regionList: string;
525
- labels: string[];
526
- setLabels: (next: string[]) => void;
527
- plan: string;
528
- setPlan: (next: string) => void;
529
- channels: string[];
530
- setChannels: (next: string[]) => void;
531
- cadence: string;
532
- setCadence: (next: string) => void;
533
- density: string;
534
- setDensity: (next: string) => void;
535
- autoDeploy: boolean;
536
- setAutoDeploy: (next: boolean) => void;
537
- budget: number[];
538
- setBudget: (next: number[]) => void;
539
- score: number;
540
- setScore: (next: number) => void;
541
- secret: string;
542
- setSecret: (next: string) => void;
543
- confirmOpen: boolean;
544
- setConfirmOpen: (next: boolean) => void;
545
- percent: (value: number) => string;
546
- }) {
547
- const {
548
- t,
549
- regions,
550
- setRegions,
551
- regionList,
552
- labels,
553
- setLabels,
554
- plan,
555
- setPlan,
556
- channels,
557
- setChannels,
558
- cadence,
559
- setCadence,
560
- density,
561
- setDensity,
562
- autoDeploy,
563
- setAutoDeploy,
564
- budget,
565
- setBudget,
566
- score,
567
- setScore,
568
- secret,
569
- setSecret,
570
- confirmOpen,
571
- setConfirmOpen,
572
- percent,
573
- } = props;
574
-
575
- return (
576
- /* PADDED HERE, because nothing above this pads it (gh#841 follow-up). The board sits in
577
- `<CardContent flush>` so the tab STRIP can meet the card edge — which is right, a line
578
- variant's underline should run edge to edge — and `bodied` is a no-op on `variant="line"`
579
- by design (`tabs.tsx`: `const bodiedCard = card && Boolean(bodied)`). So the body has no
580
- inline inset from either side, and the form sat 1px from the card border: measured label
581
- at x=25 against a card at x=24. `pad` on the board is the composition answer — the same
582
- step `CardContent` would have used. */
583
- <ResponsiveGrid
584
- columns={{ base: 1, sm: 2, lg: 3 }}
585
- gap="lg"
586
- align="start"
587
- pad={{ inline: "lg", block: "md" }}
588
- >
589
- {/* 1 · text entry */}
590
- <Form>
591
- <Flex direction="col" gap="md">
592
- <FormField
593
- id="board-email"
594
- label={t("themeShowcase.form.email")}
595
- helper={t("themeShowcase.form.emailHint")}
596
- >
597
- <Input
598
- id="board-email"
599
- type="email"
600
- autoComplete="email"
601
- prefix={<Mail aria-hidden="true" />}
602
- placeholder={t("themeShowcase.form.emailPlaceholder")}
603
- defaultValue="release-desk@ops.example.jp"
604
- />
605
- </FormField>
606
- <FormField id="board-handle" label={t("themeShowcase.form.handle")}>
607
- <Input
608
- id="board-handle"
609
- addonBefore={<AtSign aria-hidden="true" />}
610
- defaultValue="release-desk"
611
- count={{ max: 24, show: true }}
612
- />
613
- </FormField>
614
- </Flex>
615
- </Form>
616
-
617
- {/* 2 · multi-select with removable tags + free tags */}
618
- <Form>
619
- <Flex direction="col" gap="md">
620
- <FormField
621
- id="board-regions"
622
- label={t("themeShowcase.form.regions")}
623
- helper={regions.length > 0 ? regionList : t("themeShowcase.form.regionsEmpty")}
624
- >
625
- <Select
626
- id="board-regions"
627
- mode="multiple"
628
- maxTagCount={2}
629
- value={regions}
630
- onValueChange={setRegions}
631
- placeholder={t("themeShowcase.form.regionsPlaceholder")}
632
- options={REGION_CODES.map((code) => ({
633
- value: code,
634
- label: new Intl.DisplayNames([props.locale], { type: "region" }).of(code) ?? code,
635
- }))}
636
- />
637
- </FormField>
638
- <FormField id="board-labels" label={t("themeShowcase.form.labels")}>
639
- <TagInput
640
- id="board-labels"
641
- value={labels}
642
- onValueChange={setLabels}
643
- maxTagCount={2}
644
- /* The ceiling the 71-character id is measured against (gh#840). 16 is the widest cut
645
- that still leaves room for a second chip and the `+1` on one row at 375px; the value
646
- is untouched — it stays in the chip's `title` and in the remover's accessible name,
647
- which is the only reason truncating an identifier is allowed at all. */
648
- maxTagTextLength={16}
649
- placeholder={t("themeShowcase.form.labelsPlaceholder")}
650
- />
651
- </FormField>
652
- </Flex>
653
- </Form>
654
-
655
- {/* 3 · dropdown + date */}
656
- <Form>
657
- <Flex direction="col" gap="md">
658
- <FormField id="board-plan" label={t("themeShowcase.form.plan")}>
659
- <Select
660
- id="board-plan"
661
- value={plan}
662
- onValueChange={setPlan}
663
- options={[
664
- { value: "starter", label: t("themeShowcase.plan.starter") },
665
- { value: "standard", label: t("themeShowcase.plan.standard") },
666
- { value: "scale", label: t("themeShowcase.plan.scale") },
667
- ]}
668
- />
669
- </FormField>
670
- <FormField id="board-date" label={t("themeShowcase.form.releaseDate")}>
671
- <DatePicker id="board-date" defaultValue={new Date("2026-09-12T00:00:00Z")} />
672
- </FormField>
673
- </Flex>
674
- </Form>
675
-
676
- {/* 4 · checkboxes — a three-line label beside a one-word one, and a disabled row */}
677
- <Flex direction="col" gap="md">
678
- <Text size="xs" tone="muted" weight="medium">
679
- {t("themeShowcase.form.channels")}
680
- </Text>
681
- <CheckboxGroup
682
- name="board-channels"
683
- value={channels}
684
- onValueChange={setChannels}
685
- options={[
686
- { value: "email", label: t("themeShowcase.channel.email") },
687
- {
688
- value: "escalation",
689
- label: t("themeShowcase.channel.escalation"),
690
- description: t("themeShowcase.channel.escalationHint"),
691
- },
692
- { value: "pager", label: t("themeShowcase.channel.pager"), disabled: true },
693
- ]}
694
- />
695
- </Flex>
696
-
697
- {/* 5 · radios + segmented */}
698
- <Flex direction="col" gap="md">
699
- <Text size="xs" tone="muted" weight="medium">
700
- {t("themeShowcase.form.cadence")}
701
- </Text>
702
- <RadioGroup
703
- name="board-cadence"
704
- value={cadence}
705
- onValueChange={setCadence}
706
- orientation="horizontal"
707
- options={[
708
- { value: "daily", label: t("themeShowcase.cadence.daily") },
709
- { value: "weekly", label: t("themeShowcase.cadence.weekly") },
710
- { value: "manual", label: t("themeShowcase.cadence.manual") },
711
- ]}
712
- />
713
- <Segmented
714
- aria-label={t("themeShowcase.form.density")}
715
- value={density}
716
- onValueChange={setDensity}
717
- size="sm"
718
- options={[
719
- { value: "compact", label: t("themeShowcase.density.compact") },
720
- { value: "default", label: t("themeShowcase.density.default") },
721
- { value: "comfortable", label: t("themeShowcase.density.comfortable") },
722
- ]}
723
- />
724
- </Flex>
725
-
726
- {/* 6 · switch + slider + activity */}
727
- <Flex direction="col" gap="md">
728
- <Field
729
- id="board-auto"
730
- label={t("themeShowcase.form.autoDeploy")}
731
- description={t("themeShowcase.form.autoDeployHint")}
732
- >
733
- <Switch id="board-auto" checked={autoDeploy} onCheckedChange={setAutoDeploy} />
734
- </Field>
735
- <Field id="board-freeze" label={t("themeShowcase.form.freeze")}>
736
- <Switch id="board-freeze" loading defaultChecked />
737
- </Field>
738
- <FormField
739
- id="board-budget"
740
- label={t("themeShowcase.form.budget", { value: percent(budget[0] / 100) })}
741
- >
742
- <Slider id="board-budget" value={budget} onValueChange={setBudget} />
743
- </FormField>
744
- <Activity label={t("themeShowcase.form.syncing")} />
745
- </Flex>
746
-
747
- {/* 7 · steps */}
748
- <Flex direction="col" gap="md">
749
- <Text size="xs" tone="muted" weight="medium">
750
- {t("themeShowcase.steps.caption")}
751
- </Text>
752
- <Steps
753
- value={1}
754
- percent={62}
755
- orientation="vertical"
756
- items={[
757
- {
758
- title: t("themeShowcase.steps.finished"),
759
- description: t("themeShowcase.steps.finishedHint"),
760
- },
761
- { title: t("themeShowcase.steps.inProcess") },
762
- {
763
- title: t("themeShowcase.steps.waiting"),
764
- description: t("themeShowcase.steps.waitingHint"),
765
- },
766
- ]}
767
- />
768
- </Flex>
769
-
770
- {/* 8 · progress: bar, ring, breakdown + legend */}
771
- <Flex direction="col" gap="md">
772
- <Progress
773
- value={62}
774
- label={t("themeShowcase.progress.rollout", { value: percent(0.62) })}
775
- />
776
- <Progress
777
- value={94}
778
- tone="warning"
779
- label={t("themeShowcase.progress.quota", { value: percent(0.94) })}
780
- />
781
- <Flex align="center" gap="md" wrap>
782
- <Progress shape="ring" value={18} label="18/42" />
783
- <Progress
784
- shape="ring"
785
- value={100}
786
- tone="success"
787
- label={t("themeShowcase.progress.done")}
788
- />
789
- </Flex>
790
- <Progress
791
- segments={[
792
- { value: 2, tone: "destructive", label: t("themeShowcase.legend.failed") },
793
- { value: 3, tone: "warning", label: t("themeShowcase.legend.review") },
794
- { value: 12, tone: "success", label: t("themeShowcase.legend.shipped") },
795
- ]}
796
- />
797
- <Legend
798
- items={[
799
- { tone: "destructive", label: t("themeShowcase.legend.failed") },
800
- { tone: "warning", label: t("themeShowcase.legend.review") },
801
- { tone: "success", label: t("themeShowcase.legend.shipped") },
802
- ]}
803
- />
804
- </Flex>
805
-
806
- {/* 9 · status marks — never colour alone: every dot carries its word */}
807
- <Flex direction="col" gap="md">
808
- <Text size="xs" tone="muted" weight="medium">
809
- {t("themeShowcase.status.caption")}
810
- </Text>
811
- <Flex gap="xs" wrap>
812
- <Badge tone="success">{t("themeShowcase.status.success")}</Badge>
813
- <Badge tone="destructive">{t("themeShowcase.status.error")}</Badge>
814
- <Badge tone="muted">{t("themeShowcase.status.default")}</Badge>
815
- <Badge tone="info">{t("themeShowcase.status.processing")}</Badge>
816
- <Badge tone="warning">{t("themeShowcase.status.warning")}</Badge>
817
- <Badge tone="primary" variant="outline">
818
- {t("themeShowcase.status.seed")}
819
- </Badge>
820
- </Flex>
821
- <Flex gap="xs" wrap>
822
- <Button size="sm">{t("themeShowcase.action.primary")}</Button>
823
- <Button size="sm" variant="secondary">
824
- {t("themeShowcase.action.secondary")}
825
- </Button>
826
- <Button size="sm" variant="outline">
827
- {t("themeShowcase.action.outline")}
828
- </Button>
829
- <Button size="sm" variant="dashed">
830
- {t("themeShowcase.action.dashed")}
831
- </Button>
832
- <Button size="sm" variant="ghost">
833
- {t("themeShowcase.action.ghost")}
834
- </Button>
835
- <Button size="sm" loading loadingText={t("themeShowcase.action.deploying")}>
836
- {t("themeShowcase.action.deploying")}
837
- </Button>
838
- <Tooltip>
839
- <TooltipTrigger asChild>
840
- <Button
841
- size="icon-sm"
842
- variant="outline"
843
- aria-label={t("themeShowcase.action.discard")}
844
- >
845
- <Trash2 aria-hidden="true" />
846
- </Button>
847
- </TooltipTrigger>
848
- <TooltipContent>{t("themeShowcase.action.discard")}</TooltipContent>
849
- </Tooltip>
850
- </Flex>
851
- </Flex>
852
-
853
- {/* 10 · confirm popover + avatar stack */}
854
- <Flex direction="col" gap="md">
855
- <Popover open={confirmOpen} onOpenChange={setConfirmOpen}>
856
- <PopoverTrigger asChild>
857
- <Button variant="outline" size="sm">
858
- {t("themeShowcase.confirm.trigger")}
859
- </Button>
860
- </PopoverTrigger>
861
- <PopoverContent>
862
- <PopoverHeader>
863
- <PopoverTitle>{t("themeShowcase.confirm.title")}</PopoverTitle>
864
- <PopoverDescription>{t("themeShowcase.confirm.description")}</PopoverDescription>
865
- </PopoverHeader>
866
- <Flex gap="xs" justify="end">
867
- <Button size="xs" variant="ghost" onClick={() => setConfirmOpen(false)}>
868
- {t("themeShowcase.confirm.cancel")}
869
- </Button>
870
- <Button size="xs" variant="destructive" onClick={() => setConfirmOpen(false)}>
871
- {t("themeShowcase.confirm.ok")}
872
- </Button>
873
- </Flex>
874
- </PopoverContent>
875
- </Popover>
876
- <Flex align="center" gap="xs" wrap>
877
- {AVATARS.map((person) => (
878
- <Avatar key={person.initials} size="sm" presence={person.presence}>
879
- <AvatarFallback>{person.initials}</AvatarFallback>
880
- </Avatar>
881
- ))}
882
- <Avatar size="sm" appearance="tinted">
883
- <AvatarFallback>+8</AvatarFallback>
884
- </Avatar>
885
- <Text size="xs" tone="muted">
886
- {t("themeShowcase.avatars.caption")}
887
- </Text>
888
- </Flex>
889
- <Rating
890
- value={score}
891
- onValueChange={setScore}
892
- allowHalf
893
- tooltips={[
894
- t("themeShowcase.rating.1"),
895
- t("themeShowcase.rating.2"),
896
- t("themeShowcase.rating.3"),
897
- t("themeShowcase.rating.4"),
898
- t("themeShowcase.rating.5"),
899
- ]}
900
- />
901
- <Rating value={4} readOnly />
902
- </Flex>
903
-
904
- {/* 11 · OTP verification card */}
905
- <Card variant="outline">
906
- <CardHeader>
907
- <CardTitle level={3}>{t("themeShowcase.otp.title")}</CardTitle>
908
- <CardDescription>{t("themeShowcase.otp.description")}</CardDescription>
909
- </CardHeader>
910
- <CardContent>
911
- <InputOTP
912
- maxLength={6}
913
- align="center"
914
- pattern="[0-9]*"
915
- aria-label={t("themeShowcase.otp.field")}
916
- >
917
- <InputOTPGroup>
918
- <InputOTPSlot index={0} />
919
- <InputOTPSlot index={1} />
920
- <InputOTPSlot index={2} />
921
- <InputOTPSlot index={3} />
922
- <InputOTPSlot index={4} />
923
- <InputOTPSlot index={5} />
924
- </InputOTPGroup>
925
- </InputOTP>
926
- </CardContent>
927
- <CardFooter>
928
- <Button fullWidth>{t("themeShowcase.otp.verify")}</Button>
929
- </CardFooter>
930
- </Card>
931
-
932
- {/* 12 · sign-up card with a divider and two identity handoffs */}
933
- <Card variant="outline">
934
- <CardHeader>
935
- <CardTitle level={3}>{t("themeShowcase.signup.title")}</CardTitle>
936
- <CardDescription>{t("themeShowcase.signup.description")}</CardDescription>
937
- </CardHeader>
938
- <CardContent>
939
- <Form>
940
- <Flex direction="col" gap="md">
941
- <FormField id="signup-email" label={t("themeShowcase.signup.email")}>
942
- <Input
943
- id="signup-email"
944
- type="email"
945
- autoComplete="email"
946
- placeholder="you@example.jp"
947
- />
948
- </FormField>
949
- <FormField id="signup-secret" label={t("themeShowcase.signup.password")}>
950
- <PasswordInput
951
- id="signup-secret"
952
- value={secret}
953
- onChange={(event) => setSecret(event.target.value)}
954
- autoComplete="new-password"
955
- />
956
- </FormField>
957
- <PasswordStrength value={secret} />
958
- <Button fullWidth>{t("themeShowcase.signup.submit")}</Button>
959
- <AuthDivider label={t("themeShowcase.signup.or")} />
960
- <Button variant="outline" fullWidth>
961
- <ShieldCheck aria-hidden="true" />
962
- {t("themeShowcase.signup.sso")}
963
- </Button>
964
- <Button variant="outline" fullWidth>
965
- <Fingerprint aria-hidden="true" />
966
- {t("themeShowcase.signup.passkey")}
967
- </Button>
968
- </Flex>
969
- </Form>
970
- </CardContent>
971
- </Card>
972
-
973
- {/* 13 · notifications — one row with every slot filled, one with only a title */}
974
- <Card variant="outline">
975
- <CardHeader>
976
- <CardTitle level={3}>{t("themeShowcase.notify.title")}</CardTitle>
977
- <CardAction>
978
- <Badge tone="info">2</Badge>
979
- </CardAction>
980
- </CardHeader>
981
- <CardContent flush>
982
- <Flex as="ul" marker="none" direction="col" gap="none">
983
- <ListRow
984
- as="li"
985
- unread
986
- align="start"
987
- overflow="wrap"
988
- leading={<Bell aria-hidden="true" />}
989
- title={t("themeShowcase.notify.longTitle")}
990
- description={t("themeShowcase.notify.longMeta")}
991
- trailing={
992
- <Button size="xs" variant="outline">
993
- {t("themeShowcase.notify.open")}
994
- </Button>
995
- }
996
- />
997
- <ListRow
998
- as="li"
999
- align="start"
1000
- overflow="wrap"
1001
- title={t("themeShowcase.notify.bareTitle")}
1002
- />
1003
- </Flex>
1004
- </CardContent>
1005
- </Card>
1006
-
1007
- {/* 14 · enrolment QR + the manual fallback */}
1008
- <Flex direction="col" gap="md">
1009
- <Text size="xs" tone="muted" weight="medium">
1010
- {t("themeShowcase.qr.caption")}
1011
- </Text>
1012
- <QrCode
1013
- value="otpauth://totp/ops.example.jp:release-desk?secret=JBSWY3DPEHPK3PXP&issuer=ops.example.jp"
1014
- label={t("themeShowcase.qr.label")}
1015
- size="md"
1016
- />
1017
- <CredentialReveal
1018
- secret="JBSW Y3DP EHPK 3PXP"
1019
- label={t("themeShowcase.qr.manualKey")}
1020
- warning={null}
1021
- />
1022
- </Flex>
1023
-
1024
- {/* 15 · assistant surfaces — Welcome, ChatBubble (full · bare · pending), ThoughtChain */}
1025
- <Flex direction="col" gap="md">
1026
- <Welcome
1027
- icon={<Icon as={CircleUserRound} size="lg" tone="primary" />}
1028
- title={t("themeShowcase.welcome.title")}
1029
- description={t("themeShowcase.welcome.description")}
1030
- extra={
1031
- <Button size="xs" variant="ghost">
1032
- {t("themeShowcase.welcome.dismiss")}
1033
- </Button>
1034
- }
1035
- />
1036
- <ChatBubble
1037
- placement="start"
1038
- avatar={
1039
- <Avatar size="sm" aria-hidden="true">
1040
- <AvatarFallback>AI</AvatarFallback>
1041
- </Avatar>
1042
- }
1043
- header={t("themeShowcase.chat.assistant")}
1044
- footer={t("themeShowcase.chat.sent")}
1045
- >
1046
- {t("themeShowcase.chat.answer")}
1047
- </ChatBubble>
1048
- <ChatBubble placement="end">{t("themeShowcase.chat.bare")}</ChatBubble>
1049
- <ChatBubble placement="start" header={t("themeShowcase.chat.assistant")} loading />
1050
- <ThoughtChain
1051
- label={t("themeShowcase.thought.label")}
1052
- defaultExpandedKeys={["contrast"]}
1053
- items={[
1054
- {
1055
- key: "read",
1056
- title: t("themeShowcase.thought.read"),
1057
- description: t("themeShowcase.thought.readHint"),
1058
- status: "success",
1059
- },
1060
- {
1061
- key: "contrast",
1062
- title: t("themeShowcase.thought.contrast"),
1063
- content: t("themeShowcase.thought.contrastBody"),
1064
- collapsible: true,
1065
- status: "loading",
1066
- },
1067
- { key: "write", title: t("themeShowcase.thought.write"), status: "error" },
1068
- ]}
1069
- />
1070
- </Flex>
1071
-
1072
- {/* 16 · carousel */}
1073
- <Flex direction="col" gap="md">
1074
- <Text size="xs" tone="muted" weight="medium">
1075
- {t("themeShowcase.carousel.caption")}
1076
- </Text>
1077
- <Carousel opts={{ loop: true }}>
1078
- <CarouselContent>
1079
- {["godx", "indigo", "teal", "amber", "rose"].map((id) => (
1080
- <CarouselItem key={id}>
1081
- <Card variant="muted">
1082
- <CardContent>
1083
- <Flex align="center" gap="sm">
1084
- <Swatch
1085
- color={PALETTE_SEED[id]}
1086
- aria-label={t(`themeShowcase.palette.${id}`)}
1087
- />
1088
- <Flex direction="col" gap="none">
1089
- <Text weight="medium">{t(`themeShowcase.palette.${id}`)}</Text>
1090
- <Text size="xs" tone="muted" mono>
1091
- {PALETTE_SEED[id]}
1092
- </Text>
1093
- </Flex>
1094
- </Flex>
1095
- </CardContent>
1096
- </Card>
1097
- </CarouselItem>
1098
- ))}
1099
- </CarouselContent>
1100
- <CarouselPrevious />
1101
- <CarouselNext />
1102
- <CarouselDots />
1103
- </Carousel>
1104
- </Flex>
1105
-
1106
- {/* 17 · an alert that is not tidy: a long body beside a one-word title */}
1107
- <Flex direction="col" gap="md">
1108
- <Alert tone="warning">
1109
- <AlertTitle>{t("themeShowcase.alert.title")}</AlertTitle>
1110
- <AlertDescription>{t("themeShowcase.alert.description")}</AlertDescription>
1111
- </Alert>
1112
- <Alert tone="success">
1113
- <AlertTitle>{t("themeShowcase.alert.okTitle")}</AlertTitle>
1114
- </Alert>
1115
- </Flex>
1116
- </ResponsiveGrid>
1117
- );
1118
- }
1119
-
1120
- /* ── Tab 2 · DASHBOARD ─────────────────────────────────────────────────────────────────────── */
1121
- function DashboardBoard(props: {
1122
- t: Translate;
1123
- money: (amount: number, currency: string) => string;
1124
- regionName: (code: string) => string;
1125
- shortDate: (iso: string) => string;
1126
- percent: (value: number) => string;
1127
- seatNoun: string;
1128
- timelineItems: TimelineItem[];
1129
- locale: string;
1130
- }) {
1131
- const { t, money, regionName, shortDate, percent, seatNoun, timelineItems, locale } = props;
1132
-
1133
- return (
1134
- <Flex direction="col" gap="lg">
1135
- <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 4 }} gap="md">
1136
- <StatCard
1137
- label={t("themeShowcase.dashboard.releases")}
1138
- value={new Intl.NumberFormat(locale).format(1284)}
1139
- delta="+12%"
1140
- hint={t("themeShowcase.dashboard.releasesHint")}
1141
- />
1142
- <StatCard
1143
- label={t("themeShowcase.dashboard.revenue")}
1144
- value={money(8_200_000, "JPY")}
1145
- accent="primary"
1146
- />
1147
- {/* Every slot filled, next to a tile with nothing but its label and a dash. */}
1148
- <StatCard
1149
- label={t("themeShowcase.dashboard.failureRate")}
1150
- value={percent(0.021)}
1151
- delta="-0.4pt"
1152
- hint={t("themeShowcase.dashboard.failureHint")}
1153
- inverse
1154
- />
1155
- <StatCard label={t("themeShowcase.dashboard.seatsLabel")} value="—" hint={seatNoun} />
1156
- </ResponsiveGrid>
1157
-
1158
- <ResponsiveGrid columns={{ base: 1, lg: 2 }} gap="lg" align="start">
1159
- <Card>
1160
- <CardHeader>
1161
- <CardTitle level={3}>{t("themeShowcase.dashboard.mix")}</CardTitle>
1162
- <CardAction>
1163
- <Legend
1164
- items={[
1165
- { tone: "destructive", label: t("themeShowcase.legend.failed") },
1166
- { tone: "warning", label: t("themeShowcase.legend.review") },
1167
- { tone: "success", label: t("themeShowcase.legend.shipped") },
1168
- ]}
1169
- />
1170
- </CardAction>
1171
- </CardHeader>
1172
- <CardContent>
1173
- <Flex direction="col" gap="md">
1174
- <Progress
1175
- segments={[
1176
- { value: 2, tone: "destructive", label: t("themeShowcase.legend.failed") },
1177
- { value: 3, tone: "warning", label: t("themeShowcase.legend.review") },
1178
- { value: 12, tone: "success", label: t("themeShowcase.legend.shipped") },
1179
- ]}
1180
- />
1181
- <Separator />
1182
- <Descriptions
1183
- columns={{ sm: 1, md: 2 }}
1184
- items={[
1185
- {
1186
- key: "env",
1187
- label: t("themeShowcase.dashboard.environment"),
1188
- children: "ops.example.jp",
1189
- },
1190
- /* Deliberately empty: a value with nothing in it, beside one with everything. */
1191
- { key: "owner", label: t("themeShowcase.dashboard.owner"), children: "" },
1192
- {
1193
- key: "ledger",
1194
- label: t("themeShowcase.dashboard.ledger"),
1195
- children: UNBREAKABLE,
1196
- mono: true,
1197
- span: "filled",
1198
- },
1199
- ]}
1200
- />
1201
- </Flex>
1202
- </CardContent>
1203
- </Card>
1204
-
1205
- <Card>
1206
- <CardHeader>
1207
- <CardTitle level={3}>{t("themeShowcase.dashboard.activity")}</CardTitle>
1208
- </CardHeader>
1209
- <CardContent>
1210
- <Timeline variant="status" items={timelineItems} />
1211
- </CardContent>
1212
- </Card>
1213
- </ResponsiveGrid>
1214
-
1215
- <Card>
1216
- <CardHeader>
1217
- <CardTitle level={3}>{t("themeShowcase.dashboard.table")}</CardTitle>
1218
- <CardDescription>{t("themeShowcase.dashboard.tableHint")}</CardDescription>
1219
- </CardHeader>
1220
- <CardContent flush>
1221
- <Table>
1222
- <TableHeader>
1223
- <TableRow>
1224
- <TableHead>{t("themeShowcase.table.id")}</TableHead>
1225
- <TableHead>{t("themeShowcase.table.owner")}</TableHead>
1226
- <TableHead>{t("themeShowcase.table.region")}</TableHead>
1227
- <TableHead>{t("themeShowcase.table.ref")}</TableHead>
1228
- <TableHead>{t("themeShowcase.table.status")}</TableHead>
1229
- <TableHead className="text-end">{t("themeShowcase.table.amount")}</TableHead>
1230
- </TableRow>
1231
- </TableHeader>
1232
- <TableBody>
1233
- {RELEASE_ROWS.map((row) => (
1234
- <TableRow key={row.id}>
1235
- <TableCell>
1236
- <Text size="xs" mono tone="muted">
1237
- {row.id}
1238
- </Text>
1239
- </TableCell>
1240
- <TableCell>
1241
- <Flex align="center" gap="xs">
1242
- <Avatar size="xs">
1243
- <AvatarFallback>{row.initials}</AvatarFallback>
1244
- </Avatar>
1245
- <Text size="sm">{row.owner}</Text>
1246
- </Flex>
1247
- </TableCell>
1248
- <TableCell>
1249
- <Flex align="center" gap="xs">
1250
- <Icon as={MapPin} size="xs" tone="muted" />
1251
- <Text size="sm">{regionName(row.region)}</Text>
1252
- </Flex>
1253
- </TableCell>
1254
- <TableCell>
1255
- {row.ref ? (
1256
- <Text size="xs" mono truncate>
1257
- {row.ref}
1258
- </Text>
1259
- ) : (
1260
- <Text size="xs" tone="muted">
1261
- {t("themeShowcase.table.noRef")}
1262
- </Text>
1263
- )}
1264
- </TableCell>
1265
- <TableCell>
1266
- <Badge tone={row.tone} variant="outline">
1267
- {t(`themeShowcase.releaseStatus.${row.statusKey}`)}
1268
- </Badge>
1269
- </TableCell>
1270
- <TableCell className="text-end tabular-nums">
1271
- {money(row.amount, row.currency)}
1272
- </TableCell>
1273
- </TableRow>
1274
- ))}
1275
- </TableBody>
1276
- </Table>
1277
- </CardContent>
1278
- <CardFooter>
1279
- <Flex align="center" gap="sm" wrap justify="between" fill>
1280
- <Text size="xs" tone="muted">
1281
- {t("themeShowcase.dashboard.updated", { date: shortDate("2026-09-21T00:00:00Z") })}
1282
- </Text>
1283
- <Button size="xs" variant="outline">
1284
- <KeyRound aria-hidden="true" />
1285
- {t("themeShowcase.dashboard.rotate")}
1286
- </Button>
1287
- </Flex>
1288
- </CardFooter>
1289
- </Card>
1290
- </Flex>
1291
- );
1292
- }