@godxjp/ui 19.0.0 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (445) hide show
  1. package/README.md +25 -128
  2. package/dist/app/app-provider.d.ts +1 -1
  3. package/dist/app/app-provider.js +3 -0
  4. package/dist/app/theme-axes.d.ts +4 -15
  5. package/dist/app/timezones.d.ts +1 -4
  6. package/dist/components/charts/area-chart.d.ts +2 -3
  7. package/dist/components/charts/bar-chart.d.ts +2 -3
  8. package/dist/components/charts/chart-frame.d.ts +7 -16
  9. package/dist/components/charts/chart-summary.d.ts +2 -2
  10. package/dist/components/charts/compact-bar-trend.d.ts +9 -24
  11. package/dist/components/charts/index.d.ts +1 -6
  12. package/dist/components/data-display/badge.d.ts +2 -12
  13. package/dist/components/data-display/card.d.ts +21 -41
  14. package/dist/components/data-display/carousel.d.ts +1 -2
  15. package/dist/components/data-display/code-block.d.ts +4 -0
  16. package/dist/components/data-display/code-block.js +24 -0
  17. package/dist/components/data-display/data-table.d.ts +15 -37
  18. package/dist/components/data-display/data-table.js +1 -3
  19. package/dist/components/data-display/descriptions.d.ts +2 -6
  20. package/dist/components/data-display/descriptions.js +0 -2
  21. package/dist/components/data-display/index.d.ts +4 -0
  22. package/dist/components/data-display/index.js +4 -0
  23. package/dist/components/data-display/list-row.d.ts +3 -22
  24. package/dist/components/data-display/permission-matrix.d.ts +7 -20
  25. package/dist/components/data-display/progress.d.ts +1 -1
  26. package/dist/components/data-display/prose.d.ts +4 -0
  27. package/dist/components/data-display/prose.js +20 -0
  28. package/dist/components/data-display/service-launcher-card.d.ts +3 -10
  29. package/dist/components/data-display/table.d.ts +20 -80
  30. package/dist/components/data-display/table.js +0 -3
  31. package/dist/components/data-display/timeline.d.ts +3 -5
  32. package/dist/components/data-entry/branch-scope-picker.d.ts +2 -19
  33. package/dist/components/data-entry/branch-scope-picker.js +0 -1
  34. package/dist/components/data-entry/calendar.d.ts +3 -2
  35. package/dist/components/data-entry/calendar.js +58 -3
  36. package/dist/components/data-entry/cascader.js +3 -1
  37. package/dist/components/data-entry/checkbox-group.js +12 -5
  38. package/dist/components/data-entry/checkbox.js +30 -21
  39. package/dist/components/data-entry/command-palette.d.ts +8 -22
  40. package/dist/components/data-entry/date-picker.d.ts +4 -5
  41. package/dist/components/data-entry/date-picker.js +12 -3
  42. package/dist/components/data-entry/date-range-picker.d.ts +1 -1
  43. package/dist/components/data-entry/date-range-picker.js +17 -6
  44. package/dist/components/data-entry/form-errors.d.ts +7 -18
  45. package/dist/components/data-entry/form-field.d.ts +1 -1
  46. package/dist/components/data-entry/form-field.js +15 -6
  47. package/dist/components/data-entry/form.d.ts +1 -9
  48. package/dist/components/data-entry/input.d.ts +16 -14
  49. package/dist/components/data-entry/input.js +13 -3
  50. package/dist/components/data-entry/month-picker.js +6 -4
  51. package/dist/components/data-entry/month-range-picker.d.ts +4 -6
  52. package/dist/components/data-entry/month-range-picker.js +11 -5
  53. package/dist/components/data-entry/number-input.d.ts +1 -5
  54. package/dist/components/data-entry/number-input.js +1 -0
  55. package/dist/components/data-entry/radio.js +19 -6
  56. package/dist/components/data-entry/search-select.d.ts +3 -5
  57. package/dist/components/data-entry/search-select.js +8 -2
  58. package/dist/components/data-entry/select.d.ts +15 -2
  59. package/dist/components/data-entry/select.js +57 -10
  60. package/dist/components/data-entry/switch.js +9 -2
  61. package/dist/components/data-entry/textarea.d.ts +10 -16
  62. package/dist/components/data-entry/textarea.js +8 -1
  63. package/dist/components/data-entry/time-picker.d.ts +3 -5
  64. package/dist/components/data-entry/tree-select.js +3 -1
  65. package/dist/components/data-entry/upload-types.d.ts +1 -5
  66. package/dist/components/data-entry/use-upload-draft.d.ts +0 -4
  67. package/dist/components/feedback/dialog.d.ts +6 -15
  68. package/dist/components/feedback/overlay-header-tone.d.ts +1 -1
  69. package/dist/components/feedback/sheet.d.ts +3 -10
  70. package/dist/components/feedback/sheet.js +1 -1
  71. package/dist/components/feedback/sonner.js +2 -3
  72. package/dist/components/general/activity.d.ts +4 -30
  73. package/dist/components/general/button.js +1 -10
  74. package/dist/components/general/logo.d.ts +6 -28
  75. package/dist/components/general/reveal.d.ts +3 -9
  76. package/dist/components/general/typography.d.ts +1 -3
  77. package/dist/components/layout/account-chip.d.ts +8 -0
  78. package/dist/components/layout/account-chip.js +45 -0
  79. package/dist/components/layout/auth-divider.d.ts +2 -9
  80. package/dist/components/layout/auth-shell.d.ts +1 -14
  81. package/dist/components/layout/breadcrumb.d.ts +1 -5
  82. package/dist/components/layout/centered-shell.d.ts +4 -18
  83. package/dist/components/layout/error-surface.d.ts +11 -28
  84. package/dist/components/layout/error-surface.js +4 -1
  85. package/dist/components/layout/index.d.ts +2 -0
  86. package/dist/components/layout/index.js +2 -0
  87. package/dist/components/layout/legal-document-shell.d.ts +5 -28
  88. package/dist/components/layout/master-detail.d.ts +2 -18
  89. package/dist/components/layout/page-container.js +0 -1
  90. package/dist/components/layout/responsive-grid.d.ts +6 -1
  91. package/dist/components/layout/responsive-grid.js +9 -2
  92. package/dist/components/layout/service-role-panel.d.ts +7 -19
  93. package/dist/components/layout/sidebar.d.ts +5 -27
  94. package/dist/components/layout/sidebar.js +0 -1
  95. package/dist/components/layout/split-pane.d.ts +0 -7
  96. package/dist/components/layout/topbar.d.ts +1 -14
  97. package/dist/components/navigation/app-setting-picker.js +1 -3
  98. package/dist/components/navigation/filter-bar.d.ts +1 -6
  99. package/dist/components/navigation/pagination-utils.d.ts +2 -12
  100. package/dist/components/navigation/tabs-scroll.d.ts +2 -36
  101. package/dist/components/navigation/tabs.js +4 -8
  102. package/dist/components/query/data-state.d.ts +2 -2
  103. package/dist/components/ui/credential-reveal.d.ts +1 -4
  104. package/dist/components/ui/hover-card.d.ts +1 -2
  105. package/dist/components/ui/separator.d.ts +2 -15
  106. package/dist/components/ui/toggle-group.d.ts +1 -5
  107. package/dist/components/ui/toggle.d.ts +6 -31
  108. package/dist/email/brand-mark.d.ts +6 -34
  109. package/dist/email/color.d.ts +7 -17
  110. package/dist/email/geometry.d.ts +4 -8
  111. package/dist/email/index.d.ts +4 -48
  112. package/dist/email/inline-style.d.ts +3 -9
  113. package/dist/email/urgency.d.ts +2 -7
  114. package/dist/form/form-context.d.ts +2 -5
  115. package/dist/form/form-root.d.ts +1 -2
  116. package/dist/i18n/messages/en.json +4 -0
  117. package/dist/i18n/messages/ja.json +4 -0
  118. package/dist/i18n/messages/vi.json +4 -0
  119. package/dist/inertia/index.d.ts +2 -10
  120. package/dist/lib/control-styles.d.ts +10 -21
  121. package/dist/lib/control-styles.js +4 -6
  122. package/dist/lib/datetime/format-date.d.ts +1 -4
  123. package/dist/lib/field-a11y.d.ts +31 -36
  124. package/dist/lib/field-a11y.js +16 -2
  125. package/dist/lib/format.d.ts +4 -8
  126. package/dist/lib/hooks.d.ts +6 -12
  127. package/dist/lib/permission-grid.d.ts +3 -18
  128. package/dist/lib/query-error.d.ts +3 -3
  129. package/dist/props/components/app.prop.d.ts +19 -27
  130. package/dist/props/components/charts.prop.d.ts +2 -3
  131. package/dist/props/components/data-display.prop.d.ts +48 -72
  132. package/dist/props/components/data-entry.prop.d.ts +41 -30
  133. package/dist/props/components/form.prop.d.ts +2 -6
  134. package/dist/props/components/general.prop.d.ts +11 -27
  135. package/dist/props/components/layout.prop.d.ts +89 -260
  136. package/dist/props/components/navigation.prop.d.ts +27 -42
  137. package/dist/props/registry.d.ts +31 -0
  138. package/dist/props/registry.js +33 -0
  139. package/dist/props/vocabulary/data.prop.d.ts +18 -49
  140. package/dist/props/vocabulary/index.d.ts +1 -1
  141. package/dist/props/vocabulary/interaction.prop.d.ts +10 -12
  142. package/dist/props/vocabulary/layout.prop.d.ts +8 -30
  143. package/dist/props/vocabulary/shared.prop.d.ts +3 -2
  144. package/dist/styles/alert-layout.css +1 -32
  145. package/dist/styles/badge-layout.css +4 -18
  146. package/dist/styles/base.css +14 -113
  147. package/dist/styles/card-layout.css +6 -128
  148. package/dist/styles/chart-layout.css +2 -17
  149. package/dist/styles/control.css +380 -458
  150. package/dist/styles/core.css +21 -0
  151. package/dist/styles/data-display-layout.css +175 -94
  152. package/dist/styles/data-entry-layout.css +0 -45
  153. package/dist/styles/density.css +1 -30
  154. package/dist/styles/dialog-layout.css +5 -69
  155. package/dist/styles/focus-ring.css +13 -87
  156. package/dist/styles/fonts.css +1 -31
  157. package/dist/styles/form-layout.css +7 -91
  158. package/dist/styles/index.css +2 -20
  159. package/dist/styles/layout.css +38 -456
  160. package/dist/styles/logo-layout.css +1 -35
  161. package/dist/styles/motion.css +3 -42
  162. package/dist/styles/navigation-layout.css +3 -50
  163. package/dist/styles/shell-layout.css +37 -403
  164. package/dist/styles/table-layout.css +16 -274
  165. package/dist/styles/text-layout.css +7 -21
  166. package/dist/styles/toggle.css +1 -23
  167. package/dist/theme/dxs.canonical.css +1 -55
  168. package/dist/theme/example.service.css +1 -26
  169. package/dist/theme/famgia.service.css +5 -15
  170. package/dist/tokens/axes.css +3 -40
  171. package/dist/tokens/base.css +1 -4
  172. package/dist/tokens/components/activity.css +6 -42
  173. package/dist/tokens/components/badge.css +4 -13
  174. package/dist/tokens/components/banner.css +4 -9
  175. package/dist/tokens/components/card.css +32 -88
  176. package/dist/tokens/components/chart.css +9 -26
  177. package/dist/tokens/components/control.css +37 -222
  178. package/dist/tokens/components/data-display.css +28 -79
  179. package/dist/tokens/components/data-entry.css +5 -19
  180. package/dist/tokens/components/descriptions.css +7 -27
  181. package/dist/tokens/components/email.css +38 -84
  182. package/dist/tokens/components/error-surface.css +2 -18
  183. package/dist/tokens/components/feedback.css +27 -124
  184. package/dist/tokens/components/form.css +13 -45
  185. package/dist/tokens/components/legal-document.css +16 -41
  186. package/dist/tokens/components/list-row.css +11 -36
  187. package/dist/tokens/components/logo.css +2 -57
  188. package/dist/tokens/components/navigation.css +16 -94
  189. package/dist/tokens/components/scroll-area.css +2 -18
  190. package/dist/tokens/components/separator.css +8 -30
  191. package/dist/tokens/components/sheet.css +3 -14
  192. package/dist/tokens/components/shell.css +53 -307
  193. package/dist/tokens/components/sidebar.css +5 -22
  194. package/dist/tokens/components/table.css +19 -140
  195. package/dist/tokens/components/toggle.css +3 -65
  196. package/dist/tokens/components/upload.css +7 -43
  197. package/dist/tokens/foundation.css +108 -383
  198. package/dist/tokens/semantic/layout.css +33 -207
  199. package/docs/CANONICAL-CONTRACTS.md +206 -0
  200. package/docs/COMPONENTS.md +157 -0
  201. package/docs/COMPOSITION-VS-COMPONENT.md +105 -0
  202. package/docs/CONSUMER-RULES.md +14 -0
  203. package/docs/CUSTOMER-THEMING.md +162 -0
  204. package/docs/DATETIME.md +69 -0
  205. package/docs/DEVELOPMENT.md +173 -0
  206. package/docs/FORMS.md +143 -0
  207. package/docs/FRAME-A11Y-CI.md +267 -0
  208. package/docs/FRAME-COVERAGE-LEDGER.md +123 -0
  209. package/docs/FRAME-COVERAGE-REPORT.md +140 -0
  210. package/docs/FRAME-COVERAGE-STANDARD.md +65 -0
  211. package/docs/FRAME-COVERAGE.md +29 -0
  212. package/docs/PROPS-REGISTRY.md +61 -0
  213. package/docs/PROPS-VOCABULARY.md +100 -0
  214. package/docs/README.md +60 -0
  215. package/docs/REGISTRY.md +70 -0
  216. package/docs/SPACING.md +56 -0
  217. package/docs/STANDARDS-vocabulary-tokens.md +48 -0
  218. package/docs/TESTING.md +98 -0
  219. package/docs/TOKENS.md +347 -0
  220. package/docs/asset-modules.d.ts +46 -0
  221. package/docs/assets/cover-terrain.svg +6 -0
  222. package/docs/assets/portrait-amber.svg +5 -0
  223. package/docs/assets/portrait-clay.svg +5 -0
  224. package/docs/assets/portrait-indigo.svg +5 -0
  225. package/docs/assets/portrait-iris.svg +5 -0
  226. package/docs/assets/portrait-moss.svg +5 -0
  227. package/docs/assets/portrait-plum.svg +5 -0
  228. package/docs/assets/portrait-slate.svg +5 -0
  229. package/docs/charts/compact-bar-trend.tsx +328 -0
  230. package/docs/charts/size-tiers.tsx +192 -0
  231. package/docs/data-display/accordion.tsx +99 -0
  232. package/docs/data-display/avatar.tsx +355 -0
  233. package/docs/data-display/badge.tsx +247 -0
  234. package/docs/data-display/card/examples/detail-panel.tsx +106 -0
  235. package/docs/data-display/card/index.md +3 -0
  236. package/docs/data-display/card/index.tsx +285 -0
  237. package/docs/data-display/carousel.tsx +156 -0
  238. package/docs/data-display/charts.tsx +198 -0
  239. package/docs/data-display/code-block.tsx +90 -0
  240. package/docs/data-display/collapsible.tsx +162 -0
  241. package/docs/data-display/credential-reveal.tsx +145 -0
  242. package/docs/data-display/data-table/examples/approval-queue.tsx +212 -0
  243. package/docs/data-display/data-table/examples/grid-features.tsx +158 -0
  244. package/docs/data-display/data-table/examples/list-page.tsx +175 -0
  245. package/docs/data-display/data-table/index.md +5 -0
  246. package/docs/data-display/data-table/index.tsx +295 -0
  247. package/docs/data-display/descriptions.tsx +143 -0
  248. package/docs/data-display/empty-state.tsx +164 -0
  249. package/docs/data-display/hover-card.tsx +181 -0
  250. package/docs/data-display/list-row.tsx +420 -0
  251. package/docs/data-display/permission-matrix.tsx +184 -0
  252. package/docs/data-display/popover-touch.tsx +27 -0
  253. package/docs/data-display/popover.tsx +245 -0
  254. package/docs/data-display/progress.tsx +84 -0
  255. package/docs/data-display/prose.tsx +105 -0
  256. package/docs/data-display/qr-code.tsx +68 -0
  257. package/docs/data-display/scroll-area.tsx +271 -0
  258. package/docs/data-display/service-launcher-card.tsx +145 -0
  259. package/docs/data-display/stat-card.tsx +99 -0
  260. package/docs/data-display/table.tsx +251 -0
  261. package/docs/data-display/timeline.tsx +112 -0
  262. package/docs/data-display/touch-actions.tsx +36 -0
  263. package/docs/data-display/tree-list.tsx +107 -0
  264. package/docs/data-entry/branch-scope-picker.tsx +123 -0
  265. package/docs/data-entry/calendar.tsx +180 -0
  266. package/docs/data-entry/cascader.tsx +378 -0
  267. package/docs/data-entry/checkbox.tsx +256 -0
  268. package/docs/data-entry/color-picker.tsx +117 -0
  269. package/docs/data-entry/command-palette.tsx +179 -0
  270. package/docs/data-entry/command.tsx +262 -0
  271. package/docs/data-entry/country-picker-recipe.tsx +170 -0
  272. package/docs/data-entry/date-picker.tsx +191 -0
  273. package/docs/data-entry/date-range-picker.tsx +149 -0
  274. package/docs/data-entry/form/examples/employee-settings.tsx +267 -0
  275. package/docs/data-entry/form/examples/invoice-form.tsx +387 -0
  276. package/docs/data-entry/form-field/examples/a11y-contract.tsx +240 -0
  277. package/docs/data-entry/form-field/examples/create-form.tsx +105 -0
  278. package/docs/data-entry/form-field/index.md +8 -0
  279. package/docs/data-entry/form-field/index.tsx +326 -0
  280. package/docs/data-entry/form-inertia.tsx +80 -0
  281. package/docs/data-entry/form-root.tsx +102 -0
  282. package/docs/data-entry/form.tsx +724 -0
  283. package/docs/data-entry/input-otp.tsx +231 -0
  284. package/docs/data-entry/input.tsx +114 -0
  285. package/docs/data-entry/label.tsx +100 -0
  286. package/docs/data-entry/month-picker.tsx +101 -0
  287. package/docs/data-entry/month-range-picker.tsx +115 -0
  288. package/docs/data-entry/number-input.tsx +240 -0
  289. package/docs/data-entry/password-input.tsx +106 -0
  290. package/docs/data-entry/password-strength.tsx +97 -0
  291. package/docs/data-entry/radio-group.tsx +95 -0
  292. package/docs/data-entry/rating.tsx +87 -0
  293. package/docs/data-entry/search-input.tsx +120 -0
  294. package/docs/data-entry/select-async-contracts.tsx +108 -0
  295. package/docs/data-entry/select-matrix.tsx +204 -0
  296. package/docs/data-entry/select.tsx +369 -0
  297. package/docs/data-entry/slider.tsx +130 -0
  298. package/docs/data-entry/switch.tsx +67 -0
  299. package/docs/data-entry/tag-input.tsx +108 -0
  300. package/docs/data-entry/textarea.tsx +209 -0
  301. package/docs/data-entry/time-picker.tsx +99 -0
  302. package/docs/data-entry/toggle-count.tsx +293 -0
  303. package/docs/data-entry/toggle-group.tsx +225 -0
  304. package/docs/data-entry/toggle.tsx +127 -0
  305. package/docs/data-entry/transfer.tsx +97 -0
  306. package/docs/data-entry/tree-select.tsx +204 -0
  307. package/docs/data-entry/upload.tsx +184 -0
  308. package/docs/feedback/alert-dialog.tsx +270 -0
  309. package/docs/feedback/alert.tsx +248 -0
  310. package/docs/feedback/banner.tsx +183 -0
  311. package/docs/feedback/danger-confirm.tsx +88 -0
  312. package/docs/feedback/dialog-touch.tsx +24 -0
  313. package/docs/feedback/dialog.tsx +193 -0
  314. package/docs/feedback/sheet.tsx +410 -0
  315. package/docs/feedback/skeleton.tsx +111 -0
  316. package/docs/feedback/toast.tsx +135 -0
  317. package/docs/feedback/tooltip.tsx +171 -0
  318. package/docs/feedback/two-factor-setup.tsx +68 -0
  319. package/docs/foundation/_email-specimen.ts +274 -0
  320. package/docs/foundation/colors.tsx +202 -0
  321. package/docs/foundation/density.tsx +232 -0
  322. package/docs/foundation/email-tokens.tsx +306 -0
  323. package/docs/foundation/radius-shadow.tsx +152 -0
  324. package/docs/foundation/spacing.tsx +211 -0
  325. package/docs/foundation/typography.tsx +147 -0
  326. package/docs/general/activity.tsx +224 -0
  327. package/docs/general/button/examples/destructive-confirm.tsx +90 -0
  328. package/docs/general/button/examples/form-actions.tsx +85 -0
  329. package/docs/general/button/examples/toolbar.tsx +160 -0
  330. package/docs/general/button/index.md +12 -0
  331. package/docs/general/button/index.tsx +211 -0
  332. package/docs/general/logo.tsx +131 -0
  333. package/docs/general/reveal.tsx +41 -0
  334. package/docs/general/typography.tsx +152 -0
  335. package/docs/layout/account-chip.tsx +72 -0
  336. package/docs/layout/admin-collection.tsx +122 -0
  337. package/docs/layout/app-shell.tsx +374 -0
  338. package/docs/layout/aspect-ratio.tsx +119 -0
  339. package/docs/layout/auth-account-summary.tsx +103 -0
  340. package/docs/layout/auth-divider.tsx +28 -0
  341. package/docs/layout/auth-footer.tsx +37 -0
  342. package/docs/layout/auth-identity.tsx +36 -0
  343. package/docs/layout/auth-recovery/examples/mfa-challenge.md +41 -0
  344. package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +254 -0
  345. package/docs/layout/auth-recovery/examples/mobile-390.md +25 -0
  346. package/docs/layout/auth-recovery/examples/mobile-390.tsx +82 -0
  347. package/docs/layout/auth-recovery/examples/password-recovery.md +24 -0
  348. package/docs/layout/auth-recovery/examples/password-recovery.tsx +197 -0
  349. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +27 -0
  350. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +156 -0
  351. package/docs/layout/auth-recovery/index.md +140 -0
  352. package/docs/layout/auth-recovery/index.tsx +96 -0
  353. package/docs/layout/auth-shell-context.tsx +103 -0
  354. package/docs/layout/auth-shell-device.tsx +112 -0
  355. package/docs/layout/auth-shell-registration.tsx +335 -0
  356. package/docs/layout/auth-shell-variants.tsx +139 -0
  357. package/docs/layout/auth-shell.tsx +59 -0
  358. package/docs/layout/auth-stack.tsx +40 -0
  359. package/docs/layout/centered-shell.tsx +102 -0
  360. package/docs/layout/error-surface/examples/application-403.tsx +84 -0
  361. package/docs/layout/error-surface/examples/application-404.tsx +77 -0
  362. package/docs/layout/error-surface/examples/system-500.tsx +47 -0
  363. package/docs/layout/error-surface/examples/system-503.tsx +48 -0
  364. package/docs/layout/error-surface/index.md +153 -0
  365. package/docs/layout/error-surface/index.tsx +239 -0
  366. package/docs/layout/flex.tsx +262 -0
  367. package/docs/layout/legal-document-shell/_data.ts +110 -0
  368. package/docs/layout/legal-document-shell/examples/desktop-1440.md +12 -0
  369. package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +83 -0
  370. package/docs/layout/legal-document-shell/examples/mobile-390.md +22 -0
  371. package/docs/layout/legal-document-shell/examples/mobile-390.tsx +70 -0
  372. package/docs/layout/legal-document-shell/examples/tablet-1024.md +3 -0
  373. package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +84 -0
  374. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +18 -0
  375. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +61 -0
  376. package/docs/layout/legal-document-shell/index.md +51 -0
  377. package/docs/layout/legal-document-shell/index.tsx +101 -0
  378. package/docs/layout/master-detail.tsx +387 -0
  379. package/docs/layout/org-switcher.tsx +131 -0
  380. package/docs/layout/page-container.tsx +946 -0
  381. package/docs/layout/resizable-panel.tsx +419 -0
  382. package/docs/layout/responsive-grid.tsx +235 -0
  383. package/docs/layout/separator.tsx +327 -0
  384. package/docs/layout/service-role-panel.tsx +144 -0
  385. package/docs/layout/sidebar.tsx +586 -0
  386. package/docs/layout/split-pane.tsx +451 -0
  387. package/docs/layout/topbar.tsx +347 -0
  388. package/docs/navigation/app-setting-picker.tsx +141 -0
  389. package/docs/navigation/breadcrumb.tsx +128 -0
  390. package/docs/navigation/context-menu.tsx +117 -0
  391. package/docs/navigation/dropdown-menu.tsx +213 -0
  392. package/docs/navigation/filter-bar.tsx +227 -0
  393. package/docs/navigation/menubar.tsx +141 -0
  394. package/docs/navigation/navigation-menu.tsx +165 -0
  395. package/docs/navigation/pagination.tsx +241 -0
  396. package/docs/navigation/steps.tsx +263 -0
  397. package/docs/navigation/tabs-rtl.tsx +28 -0
  398. package/docs/navigation/tabs.tsx +308 -0
  399. package/docs/navigation/toolbar.tsx +339 -0
  400. package/docs/providers/app-provider.tsx +191 -0
  401. package/docs/providers/format-date.tsx +230 -0
  402. package/docs/query/button-refetch.tsx +160 -0
  403. package/docs/query/data-state.tsx +192 -0
  404. package/docs/query/infinite-query-state.tsx +93 -0
  405. package/docs/query/mutation-feedback.tsx +70 -0
  406. package/docs/query/prefetch-link.tsx +262 -0
  407. package/docs/query/touch-actions.tsx +68 -0
  408. package/docs/showcase/acme-portal.tsx +441 -0
  409. package/docs/showcase/acme-website.tsx +455 -0
  410. package/docs/showcase/case1-warehouse-dashboard.tsx +343 -0
  411. package/docs/showcase/case2-employee-me.tsx +441 -0
  412. package/docs/showcase/case3-approval-workflow.tsx +527 -0
  413. package/docs/showcase/case4-login.tsx +307 -0
  414. package/docs/showcase/case5-shift-calendar.tsx +795 -0
  415. package/docs/showcase/case6-agency-handy.tsx +1072 -0
  416. package/docs/showcase/futurelastic-web.tsx +390 -0
  417. package/docs/showcase/org-switcher.tsx +313 -0
  418. package/docs/showcase/permission-matrix.tsx +343 -0
  419. package/docs/showcase/public-landing.tsx +210 -0
  420. package/docs/showcase/settings-account-sections.tsx +559 -0
  421. package/docs/showcase/settings-security-mfa.tsx +145 -0
  422. package/docs/showcase/table-approval-queue.tsx +199 -0
  423. package/docs/showcase/table-bulk-actions.tsx +460 -0
  424. package/docs/showcase/table-compact-kintone.tsx +438 -0
  425. package/docs/showcase/table-conditional-format.tsx +367 -0
  426. package/docs/showcase/table-crud-list.tsx +544 -0
  427. package/docs/showcase/table-density.tsx +340 -0
  428. package/docs/showcase/table-expandable-rows.tsx +471 -0
  429. package/docs/showcase/table-filter-chips.tsx +461 -0
  430. package/docs/showcase/table-footer-totals.tsx +311 -0
  431. package/docs/showcase/table-grouped-subtotals.tsx +388 -0
  432. package/docs/showcase/table-master-detail.tsx +479 -0
  433. package/docs/showcase/table-pagination.tsx +320 -0
  434. package/docs/showcase/table-states.tsx +363 -0
  435. package/docs/showcase/table-sticky-columns.tsx +373 -0
  436. package/docs/showcase/table-tree-rows.tsx +444 -0
  437. package/docs/showcase/table-view-tabs.tsx +488 -0
  438. package/package.json +10 -11
  439. package/scripts/_agent-setup.mjs +16 -2
  440. package/scripts/audit-hook.mjs +3 -13
  441. package/scripts/init-agent-kit.mjs +1 -14
  442. package/scripts/postinstall.mjs +12 -12
  443. package/scripts/ui-audit.mjs +93 -31
  444. package/scripts/visual-audit-rules.mjs +51 -7
  445. package/scripts/visual-audit.mjs +118 -47
@@ -72,9 +72,8 @@ export type CompactBarTrendProp = {
72
72
  /** Plot-height tier — `xs|sm|md|lg`. Defaults to `xs` (dashboard summary-card density). */
73
73
  size?: SizeProp;
74
74
  /**
75
- * Index of the emphasized ("current") bar. Negative counts from the end
76
- * (`-1` = the latest datum); out of range = no emphasis. Never colour-only —
77
- * the emphasized row is annotated in the screen-reader text alternative.
75
+ * Index of the emphasized ("current") bar. Negative counts from the end (`-1` = the latest
76
+ * datum); out of range = no emphasis.
78
77
  */
79
78
  emphasizedIndex?: number;
80
79
  /** Render the category tick labels under the plot. */
@@ -1,5 +1,31 @@
1
1
  /** Data Display component prop types — @see docs/COMPONENTS.md#data-display */
2
2
  import type * as React from "react";
3
+ /** @see CodeBlock — a block of preformatted text (request bodies, logs, snippets). */
4
+ export type CodeBlockProp = {
5
+ /** The text. Pass a string; a highlighter's spans also work. */
6
+ children?: ChildrenProp;
7
+ /** Soft-wrap long lines (default true). `false` scrolls horizontally instead. */
8
+ wrap?: boolean;
9
+ /** Scroll inside the block past this height. Default `none` (grows with the content). */
10
+ maxHeight?: "sm" | "md" | "lg" | "none";
11
+ /** Type size. Default `sm`. */
12
+ size?: Extract<SizeProp, "xs" | "sm">;
13
+ /** Cosmetic: lands on `data-language`; no highlighter is bundled. */
14
+ language?: string;
15
+ className?: ClassNameProp;
16
+ };
17
+ /**
18
+ * @see Prose — typography for rendered content (Markdown, CMS bodies). Styles descendant semantic
19
+ * HTML from the tokens; it has no opinion about where the HTML comes from.
20
+ */
21
+ export type ProseProp = {
22
+ /** Body size. `md` is the page body size; `sm` is the compact step. Default `md`. */
23
+ size?: Extract<SizeProp, "sm" | "md">;
24
+ /** `fit` scales images to the column (default); `original` shows them at their authored size. */
25
+ imageSize?: "fit" | "original";
26
+ className?: ClassNameProp;
27
+ children?: ChildrenProp;
28
+ };
3
29
  import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp } from "../vocabulary/index.js";
4
30
  /** @see EmptyState */
5
31
  /**
@@ -15,26 +41,14 @@ export type EmptyStateProp = {
15
41
  action?: ActionProp;
16
42
  /** Visual weight appropriate to the empty condition. Default `page`. */
17
43
  variant?: "page" | "section" | "compact";
18
- /**
19
- * Medallion colour intent. Default `muted` (the neutral placeholder look). Set `success` for a
20
- * confirmation zero-state (e.g. device approved), or `warning`/`destructive`/`info` to match the
21
- * condition — tints the icon foreground + medallion fill from the matching role token, so a
22
- * consumer never hand-rolls a `.ui-success-state` class to recolour it.
23
- */
44
+ /** Medallion colour intent. Default `muted` (the neutral placeholder look). */
24
45
  tone?: EmptyStateToneProp;
25
- /**
26
- * Semantic heading level (`h1`–`h4`) for the title. Default `3`. Choose it to
27
- * keep the page outline valid (`h1 → h2 → h3`, no skipped levels), NOT for
28
- * visual size — the title size is fixed by `--empty-state` styles regardless
29
- * of level. A page/onboarding empty state directly under a page `h1` uses
30
- * `titleLevel={2}`; an empty state nested in an already-`h2` section uses `3`.
31
- */
46
+ /** Semantic heading level (`h1`–`h4`) for the title. Default `3`. */
32
47
  titleLevel?: HeadingLevelProp;
33
48
  /**
34
- * Render the title as a non-heading element (`p` / `div`) instead of a
35
- * heading. Use for a `compact`/`section` empty state placed inside a section
36
- * that already owns its heading, so the zero-state message is not announced as
37
- * a heading and cannot skip an outline level. Overrides `titleLevel`.
49
+ * Render the title as a non-heading element (`p` / `div`) instead of a heading. Use for a
50
+ * `compact`/`section` empty state placed inside a section that already owns its heading, so the
51
+ * zero-state message is not announced as a heading and cannot skip an outline level.
38
52
  */
39
53
  titleAs?: "h1" | "h2" | "h3" | "h4" | "p" | "div";
40
54
  className?: ClassNameProp;
@@ -75,13 +89,8 @@ export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
75
89
  /**
76
90
  * Presence — WHO is reachable right now, drawn as an indicator at the block-end/inline-end
77
91
  * corner of the mark with a localized `sr-only` label folded into the avatar's accessible text.
78
- * Never colour alone (WCAG 1.4.1): each value also has its own silhouette (filled · half-filled ·
79
- * barred · hollow).
80
- *
81
- * OMIT the prop entirely for an entity that has no presence concept (an organization mark, a
82
- * capability medallion) — an absent prop emits no node and no attribute, so the DOM stays
83
- * byte-identical to today's. Pass `"offline"` for a person KNOWN to be unreachable; that is a
84
- * different statement, exactly as `ListRow`'s omitted vs `false` `unread` is.
92
+ * Never colour alone (WCAG 1.4.1): each value also has its own silhouette (filled · half-filled
93
+ * · barred · hollow).
85
94
  */
86
95
  presence?: AvatarPresenceProp;
87
96
  /**
@@ -149,15 +158,9 @@ export type CredentialRevealTone = Extract<ToneProp, "warning" | "destructive" |
149
158
  export type CredentialRevealProp = {
150
159
  /** The one-time secret value shown masked by default and copied verbatim. */
151
160
  secret: string;
152
- /**
153
- * Accessible name / caption for the secret (e.g. "API key", "デバイス資格情報"). When set it labels
154
- * the secret region; when omitted a generic localized label is used.
155
- */
161
+ /** Accessible name / caption for the secret (e.g. "API key", "デバイス資格情報"). */
156
162
  label?: LabelProp;
157
- /**
158
- * Caution banner copy. Defaults to the localized "shown only once" warning. Pass `null` to
159
- * suppress the banner entirely (e.g. when the surrounding Dialog already carries the caution).
160
- */
163
+ /** Caution banner copy. Defaults to the localized "shown only once" warning. */
161
164
  warning?: React.ReactNode | null;
162
165
  /** Controlled reveal state (masked ↔ shown). */
163
166
  revealed?: boolean;
@@ -213,43 +216,31 @@ export type DataTableProp<T> = {
213
216
  loading?: boolean;
214
217
  empty?: React.ReactNode;
215
218
  /**
216
- * Failure state (#216). `true` = built-in localized message (with a retry when `onRetry` is
217
- * given); any other node replaces it. `false`/`undefined` = the read succeeded.
219
+ * `true` = built-in localized message (with a retry when `onRetry` is given); any other node
220
+ * replaces it. `false`/`undefined` = the read succeeded.
218
221
  */
219
222
  error?: React.ReactNode;
220
- /**
221
- * Permission-denied state (#216) — refused, not failed. `true` = built-in localized message
222
- * with NO retry. Takes precedence over `error`.
223
- */
223
+ /** `true` = built-in localized message with NO retry. Takes precedence over `error`. */
224
224
  denied?: React.ReactNode;
225
225
  /** Retry handler surfaced by the built-in `error` state. */
226
226
  onRetry?: HandlerProp;
227
227
  /**
228
- * Named collection contract (gh#253) the SAME preset the `Table` primitive owns, forwarded to
229
- * the table DataTable renders. `"default"` (the default) emits no attribute and matches no
230
- * selector. `"action-collection"` is the canonical dense approval / action queue: below
231
- * `collapseBelow` the desktop intrinsic column widths give way to the token-owned column-PRIORITY
232
- * measures (`--table-action-collection-*`) under `table-layout: fixed`, cells wrap, and the
233
- * surface drops its `--table-surface-min-inline-size` floor — so every column, row actions
234
- * included, stays inside a 390px frame with no horizontal scroll. Mark each column with
228
+ * `"default"` (the default) emits no attribute and matches no selector. Mark each column with
235
229
  * `priority` on its `ColumnDef`.
236
230
  */
237
231
  preset?: TablePresetProp;
238
232
  /**
239
- * Container step at which `preset="action-collection"` switches to the compact priority measures.
240
- * Measured against the TABLE's own container (a container query), not the viewport, so a table in
241
- * a master rail collapses before the page does. Default `"sm"`. Ignored while `preset` is
242
- * `"default"`.
233
+ * Container step at which `preset="action-collection"` switches to the compact priority
234
+ * measures. Default `"sm"`.
243
235
  */
244
236
  collapseBelow?: BreakpointProp;
245
237
  className?: ClassNameProp;
246
238
  children?: ChildrenProp;
247
239
  };
248
240
  /**
249
- * ListRow geometry `default` (the roomy entity row) or `compact` (#246: the inline-actions row —
250
- * Avatar + title/description + one or two small trailing Buttons on ONE line inside a narrow card).
251
- * A ListRow-LOCAL subset of the shared density vocabulary: the row has no `comfortable` step, so it
252
- * is deliberately narrower than `DensityProp` (and unrelated to `PageDensityProp`/`TableDensityProp`).
241
+ * A ListRow-LOCAL subset of the shared density vocabulary: the row has no `comfortable` step, so
242
+ * it is deliberately narrower than `DensityProp` (and unrelated to
243
+ * `PageDensityProp`/`TableDensityProp`).
253
244
  */
254
245
  export type ListRowDensityProp = Exclude<DensityProp, "comfortable">;
255
246
  /** @see ListRow */
@@ -266,11 +257,8 @@ export type ListRowProp = {
266
257
  trailing?: React.ReactNode;
267
258
  /** Cross-axis alignment of the columns — `center` (default) or `start` for multi-line content. */
268
259
  align?: "center" | "start";
269
- /** How over-long title/description resolve — `truncate` (default) or `wrap` (#224). */
270
260
  overflow?: "truncate" | "wrap";
271
- /** Row geometry — `default` or the compact inline-actions preset (#246). */
272
261
  density?: ListRowDensityProp;
273
- /** Read/unread state — indicator dot + localized `sr-only` text, never colour alone (#225). */
274
262
  unread?: boolean;
275
263
  className?: ClassNameProp;
276
264
  };
@@ -315,8 +303,7 @@ export type PermissionMatrixProp = {
315
303
  grants: PermissionMatrixGrantsProp;
316
304
  /**
317
305
  * Grant toggle handler. Its PRESENCE makes the matrix editable (checkbox cells); omitted, the
318
- * matrix is the canonical read-only ✓/— grid. Locked roles and `readOnly` stay read-only
319
- * regardless.
306
+ * matrix is the canonical read-only ✓/— grid.
320
307
  */
321
308
  onGrantChange?: (roleId: string, permissionId: string, granted: boolean) => void;
322
309
  /** Force the read-only grid even when `onGrantChange` is present (e.g. viewer permission). */
@@ -331,7 +318,6 @@ export type PermissionMatrixProp = {
331
318
  loading?: boolean;
332
319
  /** Custom empty content when `permissions` is empty; defaults to a localized EmptyState. */
333
320
  empty?: React.ReactNode;
334
- /** Failure state (mirrors DataTable #216): `true` = built-in localized message, node = replace. */
335
321
  error?: React.ReactNode;
336
322
  /** Permission-denied state — refused, not failed. Takes precedence over `error`. */
337
323
  denied?: React.ReactNode;
@@ -341,25 +327,15 @@ export type PermissionMatrixProp = {
341
327
  id?: IdProp;
342
328
  };
343
329
  /**
344
- * Edge the ScrollArea viewport sticks to as its content grows (gh#311).
345
- *
346
- * - `none` — the scroll offset is left entirely alone. This is the default and is exactly the
347
- * behaviour a ScrollArea has always had.
348
- * - `bottom` — a live stream (chat, log tail, streaming response, activity feed). While the reader
349
- * is within `anchorOffset` of the bottom, arriving content keeps the newest item in view; once
350
- * they scroll away to read history, growth NEVER moves them, and content inserted ABOVE the
351
- * read position is compensated so the item under their eyes stays put.
330
+ * This is the default and is exactly the behaviour a ScrollArea has always had. - `bottom` — a
331
+ * live stream (chat, log tail, streaming response, activity feed).
352
332
  */
353
333
  export type ScrollAreaAnchorProp = "none" | "bottom";
354
334
  /** @see ScrollArea */
355
335
  export type ScrollAreaProp = {
356
336
  /**
357
337
  * Ref to the element that actually SCROLLS — the Radix viewport — not the root. The root is
358
- * `overflow: hidden` and never scrolls, so the component's own `ref` cannot serve. Use this to
359
- * read `scrollTop`/`scrollHeight`, call `scrollTo()`, restore a saved position, or drive a
360
- * "jump to newest" button. It is the typed, supported alternative to querying the Radix-internal
361
- * `[data-radix-scroll-area-viewport]` attribute, which is not a public contract and is ambiguous
362
- * the moment two ScrollAreas nest.
338
+ * `overflow: hidden` and never scrolls, so the component's own `ref` cannot serve.
363
339
  */
364
340
  viewportRef?: React.Ref<HTMLDivElement>;
365
341
  /** Edge the viewport sticks to as content grows. Default `none` (inert). */
@@ -42,7 +42,6 @@ export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
42
42
  onClear?: () => void;
43
43
  /** `ghost` drops the field's own border/background/ring for a textarea inside a surface that already draws the box. */
44
44
  variant?: "default" | "ghost";
45
- /** Grow the box with its content between `minRows` and `maxRows` instead of a fixed `rows` height (default false). */
46
45
  autoGrow?: boolean;
47
46
  /** Floor in text rows while `autoGrow`; never undercuts the `--control-height` tier. */
48
47
  minRows?: number;
@@ -72,9 +71,9 @@ export type NumberInputProp = FieldA11yProps & {
72
71
  readOnly?: boolean;
73
72
  size?: SizeProp;
74
73
  placeholder?: PlaceholderProp;
75
- /** Leading affix inside the field (e.g. `¥`). Decorative — `aria-hidden`. */
74
+ /** Leading affix inside the field (e.g. `¥`). */
76
75
  prefix?: React.ReactNode;
77
- /** Trailing affix inside the field (e.g. `%`). Decorative — `aria-hidden`. */
76
+ /** Trailing affix inside the field (e.g. `%`). */
78
77
  suffix?: React.ReactNode;
79
78
  /** Form field name — the visible input submits its value natively. */
80
79
  name?: NameProp;
@@ -96,19 +95,12 @@ export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
96
95
  collapseBelow?: BreakpointProp | false;
97
96
  columns?: ResponsiveGridColumnsProp;
98
97
  density?: DensityProp;
99
- /**
100
- * Server validation error bag (e.g. Inertia's `form.errors`). Each `FormField name="…"` inside
101
- * resolves its own message from the bag automatically and CLAIMS its key; `<FormErrors />`
102
- * renders the remaining, unclaimed entries — errors attached to hidden/derived fields that no
103
- * visible field displays. Works in both the `<form>` and `asChild` modes. A Form WITHOUT this
104
- * prop joins a surrounding `FormErrorsProvider` instead (sibling Card+Form sections sharing one
105
- * bag); a Form WITH it starts its own (shadowing) registry.
106
- */
98
+ /** Server validation error bag (e.g. Inertia's `form.errors`). */
107
99
  errors?: ErrorBagProp;
108
100
  /**
109
- * Render the caller's own element instead of a `<form>`, keeping only the layout context.
110
- * For routing libraries that own the form element (Inertia, TanStack Form) — two `<form>`
111
- * elements cannot nest. `columns` does not apply in this mode; wrap fields in ResponsiveGrid.
101
+ * Render the caller's own element instead of a `<form>`, keeping only the layout context. For
102
+ * routing libraries that own the form element (Inertia, TanStack Form) — two `<form>` elements
103
+ * cannot nest.
112
104
  */
113
105
  asChild?: boolean;
114
106
  className?: ClassNameProp;
@@ -129,11 +121,17 @@ export type FormFieldProp = {
129
121
  id?: IdProp;
130
122
  /**
131
123
  * Error-bag key of this field. When the surrounding `Form` carries `errors`, the field
132
- * resolves its message from `errors[name]` automatically (an explicit `error` prop wins)
133
- * and CLAIMS the key so `<FormErrors />` does not repeat it. Not injected into the child —
134
- * pass `name` on the control itself for native form submission.
124
+ * resolves its message from `errors[name]` automatically (an explicit `error` prop wins) and
125
+ * CLAIMS the key so `<FormErrors />` does not repeat it.
135
126
  */
136
127
  name?: NameProp;
128
+ /**
129
+ * Rendered on the control as `data-field`, and as a native `name` when the app opted in via
130
+ * `<AppProvider emitFieldNames>`. Defaults to `name`, then `id` — which is why an app whose
131
+ * fields already carry a column-named `id` gets the attribute on every control without
132
+ * editing a single screen.
133
+ */
134
+ field?: NameProp;
137
135
  label: LabelProp;
138
136
  required?: RequiredProp;
139
137
  helper?: HelperProp;
@@ -160,6 +158,8 @@ export type FormFieldProp = {
160
158
  * and CLAIMS the key so `<FormErrors />` does not repeat it.
161
159
  */
162
160
  name?: NameProp;
161
+ /** Stable machine key — see the `children` variant above. Unused on a read-only row. */
162
+ field?: NameProp;
163
163
  label: LabelProp;
164
164
  required?: RequiredProp;
165
165
  helper?: HelperProp;
@@ -274,8 +274,23 @@ export type FieldProp = {
274
274
  };
275
275
  /** @see Slider — numeric range (Radix Slider). */
276
276
  export type SliderProp = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
277
- /** @see Calendar — react-day-picker DayPicker. */
278
- export type CalendarProp = DayPickerProps;
277
+ /** @see Calendar — react-day-picker DayPicker plus an opt-in footer. */
278
+ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
279
+ /** Replaces the built-in footer actions. */
280
+ footer?: React.ReactNode;
281
+ };
282
+ /** Footer actions shared by Calendar and the pickers that embed it. Both default to off. */
283
+ export type CalendarFooterProp = {
284
+ /**
285
+ * Show a Today action: jumps to the current month and selects today (single), fills the open
286
+ * end of the range (range) or adds today (multiple). Disabled when today is outside
287
+ * `startMonth` / `endMonth` or matches `disabled`.
288
+ */
289
+ showToday?: boolean;
290
+ /** Show a Close action that calls `onClose`. */
291
+ showClose?: boolean;
292
+ onClose?: () => void;
293
+ };
279
294
  /** @see DatePicker */
280
295
  export type DatePickerProp = FieldA11yProps & {
281
296
  value?: ValueProp<Date>;
@@ -292,7 +307,7 @@ export type DatePickerProp = FieldA11yProps & {
292
307
  toDate?: Date;
293
308
  /** Show an inline ✕ to clear the value when one is set (default true). */
294
309
  allowClear?: boolean;
295
- };
310
+ } & Pick<CalendarFooterProp, "showToday" | "showClose">;
296
311
  /** @see MonthPicker */
297
312
  export type MonthPickerProp = FieldA11yProps & {
298
313
  value?: ValueProp<Date>;
@@ -346,7 +361,7 @@ export type DateRangePickerProp = FieldA11yProps & {
346
361
  toDate?: Date;
347
362
  /** Show an inline ✕ to clear the range when one is set (default true). */
348
363
  allowClear?: boolean;
349
- };
364
+ } & Pick<CalendarFooterProp, "showToday" | "showClose">;
350
365
  /** @see TimePicker — popover HH:mm picker (canonical 24h storage). */
351
366
  export type TimePickerProp = FieldA11yProps & {
352
367
  value?: ValueProp;
@@ -415,8 +430,7 @@ export type SearchSelectProp = {
415
430
  /**
416
431
  * Custom renderer for the SELECTED value shown on the trigger (Ant Design `labelRender`).
417
432
  * Receives the value, the resolved label, and the full option when it is loaded (undefined for
418
- * an async preset whose page hasn't arrived). Only used while a value is selected; the
419
- * placeholder still shows when empty. Overrides the default icon + label trigger content.
433
+ * an async preset whose page hasn't arrived).
420
434
  */
421
435
  labelRender?: (selected: {
422
436
  value: string;
@@ -444,7 +458,7 @@ export type SearchSelectProp = {
444
458
  /**
445
459
  * Read-only: the current value is shown (and the clear affordance hidden) but the popover cannot
446
460
  * be opened — no new pick, no search. Mirrors the Input/NumberInput readOnly contract (stays
447
- * focusable + submits its value, unlike `disabled`). Default false.
461
+ * focusable + submits its value, unlike `disabled`).
448
462
  */
449
463
  readOnly?: boolean;
450
464
  /** Trigger height tier — forwarded to the underlying Button. Default matches Button's own default. */
@@ -458,7 +472,7 @@ export type SearchSelectProp = {
458
472
  /**
459
473
  * Override the default client-side filter (`options` mode only — ignored with `loadOptions`,
460
474
  * which is responsible for its own server-side filtering). Receives the option and the trimmed
461
- * query; return true to keep the row. Only consulted while the query is non-empty.
475
+ * query; return true to keep the row.
462
476
  */
463
477
  filterOption?: (option: SearchSelectOptionProp, query: string) => boolean;
464
478
  /**
@@ -490,16 +504,13 @@ export type SearchSelectProp = {
490
504
  "aria-invalid"?: boolean | "true" | "false";
491
505
  "aria-required"?: boolean | "true" | "false";
492
506
  "data-testid"?: string;
507
+ /** Normally injected by `FormField`. */
508
+ "data-field"?: string;
493
509
  };
494
510
  /**
495
511
  * Data-driven (Ant-style) form of {@link Select} — one component covering static `options` or
496
512
  * async `loadOptions`, with `showSearch` toggling the searchable combobox vs a plain listbox.
497
513
  * Passing `options`/`loadOptions` to `<Select>` switches it from the compound API to this one.
498
- *
499
- * `readOnly`/`size`/`open`/`onOpenChange`/`search`/`onSearchChange`/`filterOption`/`renderError`/
500
- * `renderLoadMore` (inherited from {@link SearchSelectProp}) take effect ONLY in searchable mode
501
- * (`showSearch` or `loadOptions`) — they configure the `SearchSelect` engine that mode delegates
502
- * to. The plain listbox (no search) is a native Radix listbox and ignores them.
503
514
  */
504
515
  export type SelectDataProp = SearchSelectProp & {
505
516
  /** Show the search box (combobox). Defaults to true when `loadOptions` is set, otherwise false. */
@@ -13,8 +13,7 @@ export type UseZodFormReturnProp<TFieldValues extends FieldValues> = UseFormRetu
13
13
  * Framework-agnostic form-state adapter — decouples `FormRoot`/`FormFieldControl` from any single
14
14
  * form library. The DS ships the built-in react-hook-form path (`form`), and an adapter lets a
15
15
  * SERVER-driven form library plug into the same auto-binding: Inertia's `useForm`
16
- * (`@godxjp/ui/inertia`), formik, or TanStack Form. The core has ZERO dependency on any of them —
17
- * a consumer wraps its own form object in an adapter and passes it to `FormRoot`.
16
+ * (`@godxjp/ui/inertia`), formik, or TanStack Form.
18
17
  */
19
18
  export interface FormStateAdapter {
20
19
  /** Current value of the field `name` (dotted paths allowed if the underlying store supports them). */
@@ -27,7 +26,6 @@ export interface FormStateAdapter {
27
26
  isSubmitting: boolean;
28
27
  /** Optional blur handler (e.g. touch-tracking); called with the field name. */
29
28
  onBlur?(name: string): void;
30
- /** Optional snapshot of all values, passed to `onSubmit`; defaults to `{}` when absent. */
31
29
  getValues?(): unknown;
32
30
  }
33
31
  /** @see FormRoot */
@@ -39,11 +37,9 @@ export type FormRootProp<TFieldValues extends FieldValues> = {
39
37
  form?: UseZodFormReturnProp<TFieldValues>;
40
38
  /**
41
39
  * Framework-agnostic form-state adapter (e.g. `inertiaAdapter(form)` from `@godxjp/ui/inertia`).
42
- * Provide EITHER `form` OR `adapter`. With an adapter, `FormFieldControl` auto-binds each field by
43
- * `name` (value/onChange/error/aria) and `useFormSubmitting()` reads `isSubmitting`.
44
40
  */
45
41
  adapter?: FormStateAdapter;
46
- /** Submit handler. RHF path receives validated `values`; the adapter path calls it with a snapshot (`getValues()`), typically ignored in favour of the form library's own submit (`form.post(url)`). */
42
+ /** Submit handler. */
47
43
  onSubmit: (values: TFieldValues) => void | Promise<void>;
48
44
  children: React.ReactNode;
49
45
  className?: string;
@@ -3,7 +3,7 @@ import type * as React from "react";
3
3
  import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DisabledProp, FontWeightProp, HeadingLevelProp, LabelProp, OnClickProp, PendingProp, RevealDelayProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp } from "../vocabulary/index.js";
4
4
  /** @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`. */
5
5
  export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
6
- /** Render element. Default `span`. Covers inline/block text + description-list + code/caption. */
6
+ /** Render element. Default `span`. */
7
7
  as?: "span" | "p" | "div" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
8
8
  /** Size from the type scale — never an arbitrary px. Default `sm` (base). */
9
9
  size?: TextSizeProp;
@@ -15,10 +15,8 @@ export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
15
15
  /** Single-line ellipsis. Mutually exclusive with `clamp` — when both are set, `clamp` wins. */
16
16
  truncate?: boolean;
17
17
  /**
18
- * Multi-line clamp — max rendered lines (integer ≥ 1); overflow ends in an ellipsis.
19
- * Token-owned line-clamp styling (never write the `line-clamp-N` utility page-side).
20
- * Visual-only: the full text stays in the DOM / accessible name. Mutually exclusive with
21
- * `truncate` — when both are set, `clamp` wins (dev builds warn).
18
+ * Multi-line clamp — max rendered lines (integer ≥ 1); overflow ends in an ellipsis. Token-owned
19
+ * line-clamp styling (never write the `line-clamp-N` utility page-side).
22
20
  */
23
21
  clamp?: number;
24
22
  /** Tabular figures for aligned numbers. */
@@ -44,10 +42,6 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
44
42
  size?: ButtonSizeProp;
45
43
  /** Corner shape — `default` (control radius) · `pill` (fully rounded) · `sharp` (square). */
46
44
  shape?: ShapeProp;
47
- /**
48
- * Span the full width of the container (`width:100%`) instead of sizing to content —
49
- * the prop form of `className="w-full"` for stacked/auth/dialog-footer actions (rule #42).
50
- */
51
45
  fullWidth?: boolean;
52
46
  asChild?: AsChildProp;
53
47
  onClick?: OnClickProp;
@@ -60,16 +54,13 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
60
54
  /** Optional label to swap in while `loading` (pass the `t()`-translated string). */
61
55
  loadingText?: string;
62
56
  /**
63
- * Optional numeric count rendered as a borderless counter pill after the label
64
- * (filter tabs / segmented toggles, e.g. "Chờ bay 18"). Formatted with
65
- * `Intl.NumberFormat` in the active locale and styled to read on the button's
66
- * own variant — never nest a `Badge` inside a Button for this.
67
- * Ignored when `asChild` (Radix Slot requires a single child).
57
+ * Optional numeric count rendered as a borderless counter pill after the label (filter tabs /
58
+ * segmented toggles, e.g. "Chờ bay 18").
68
59
  */
69
60
  count?: number;
70
61
  /**
71
- * Cap for `count` (Ant Badge parity). When `count` exceeds it the pill shows
72
- * `{overflowCount}+` (e.g. `99+`). Defaults to 99.
62
+ * Cap for `count` (Ant Badge parity). When `count` exceeds it the pill shows `{overflowCount}+`
63
+ * (e.g.
73
64
  */
74
65
  overflowCount?: number;
75
66
  /**
@@ -90,7 +81,7 @@ export type RevealProp = React.HTMLAttributes<HTMLDivElement> & {
90
81
  children?: ChildrenProp;
91
82
  /**
92
83
  * Stagger ordinal — an INDEX into the motion ladder (`0..6`), never a raw ms. Each step adds one
93
- * `--reveal-stagger-step` of delay so sibling reveals cascade. Default `0` (enter immediately).
84
+ * `--reveal-stagger-step` of delay so sibling reveals cascade.
94
85
  */
95
86
  delay?: RevealDelayProp;
96
87
  /**
@@ -117,14 +108,11 @@ export type RevealProp = React.HTMLAttributes<HTMLDivElement> & {
117
108
  * own mark structure, so there is no single child to merge onto.
118
109
  */
119
110
  export type ActivityProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
120
- /**
121
- * The mark. Default `dots` — three dots rising in sequence, the ellipsis convention.
122
- * `pulse` is a single breathing mark (live / recording); `bar` an indeterminate sweep (syncing).
123
- */
111
+ /** The mark. Default `dots` — three dots rising in sequence, the ellipsis convention. */
124
112
  variant?: ActivityVariantProp;
125
113
  /**
126
114
  * Size step, the standard ladder. Default `sm` — an ambient mark is never the loudest thing on
127
- * screen. Scales the mark AND the label together (the mark is `em`-based).
115
+ * screen.
128
116
  */
129
117
  size?: SizeProp;
130
118
  /** Semantic colour intent. Default `muted` — ambient, not an alert. */
@@ -132,9 +120,7 @@ export type ActivityProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "color">
132
120
  /**
133
121
  * Localized description of WHAT is happening ("Hưng đang nhập…", "同期中…"). Rendered as visible
134
122
  * `Text` beside the mark when `children` are absent; when `children` ARE present it becomes an
135
- * `sr-only` description instead, so the indicator is never animation-only. Consumer-owned copy —
136
- * the library never invents it, and the plural form of "N people are typing" must come from the
137
- * consumer's `Intl.PluralRules`.
123
+ * `sr-only` description instead, so the indicator is never animation-only.
138
124
  */
139
125
  label?: LabelProp;
140
126
  /**
@@ -145,8 +131,6 @@ export type ActivityProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "color">
145
131
  /**
146
132
  * Announce the label to assistive technology. Default `false` — the DELIBERATE default, because
147
133
  * an ambient indicator that fires a live region on every socket event is a screen-reader flood.
148
- * With `false` NO live region is emitted at all. `"polite"` wraps ONLY the label in a single
149
- * `aria-live="polite" aria-atomic="true"` region; the mark stays outside it and `aria-hidden`.
150
134
  */
151
135
  announce?: ActivityAnnounceProp;
152
136
  className?: ClassNameProp;