@godxjp/ui 19.1.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 (436) hide show
  1. package/README.md +25 -128
  2. package/dist/app/theme-axes.d.ts +4 -15
  3. package/dist/app/timezones.d.ts +1 -4
  4. package/dist/components/charts/area-chart.d.ts +2 -3
  5. package/dist/components/charts/bar-chart.d.ts +2 -3
  6. package/dist/components/charts/chart-frame.d.ts +7 -16
  7. package/dist/components/charts/chart-summary.d.ts +2 -2
  8. package/dist/components/charts/compact-bar-trend.d.ts +9 -24
  9. package/dist/components/charts/index.d.ts +1 -6
  10. package/dist/components/data-display/badge.d.ts +2 -12
  11. package/dist/components/data-display/card.d.ts +21 -41
  12. package/dist/components/data-display/carousel.d.ts +1 -2
  13. package/dist/components/data-display/code-block.d.ts +4 -0
  14. package/dist/components/data-display/code-block.js +24 -0
  15. package/dist/components/data-display/data-table.d.ts +15 -37
  16. package/dist/components/data-display/data-table.js +1 -3
  17. package/dist/components/data-display/descriptions.d.ts +2 -6
  18. package/dist/components/data-display/descriptions.js +0 -2
  19. package/dist/components/data-display/index.d.ts +4 -0
  20. package/dist/components/data-display/index.js +4 -0
  21. package/dist/components/data-display/list-row.d.ts +3 -22
  22. package/dist/components/data-display/permission-matrix.d.ts +7 -20
  23. package/dist/components/data-display/progress.d.ts +1 -1
  24. package/dist/components/data-display/prose.d.ts +4 -0
  25. package/dist/components/data-display/prose.js +20 -0
  26. package/dist/components/data-display/service-launcher-card.d.ts +3 -10
  27. package/dist/components/data-display/table.d.ts +20 -80
  28. package/dist/components/data-display/table.js +0 -3
  29. package/dist/components/data-display/timeline.d.ts +3 -5
  30. package/dist/components/data-entry/branch-scope-picker.d.ts +2 -19
  31. package/dist/components/data-entry/branch-scope-picker.js +0 -1
  32. package/dist/components/data-entry/calendar.d.ts +3 -2
  33. package/dist/components/data-entry/calendar.js +58 -3
  34. package/dist/components/data-entry/command-palette.d.ts +8 -22
  35. package/dist/components/data-entry/date-picker.d.ts +4 -5
  36. package/dist/components/data-entry/date-picker.js +6 -1
  37. package/dist/components/data-entry/date-range-picker.d.ts +1 -1
  38. package/dist/components/data-entry/date-range-picker.js +8 -3
  39. package/dist/components/data-entry/form-errors.d.ts +7 -18
  40. package/dist/components/data-entry/form-field.js +1 -5
  41. package/dist/components/data-entry/form.d.ts +1 -9
  42. package/dist/components/data-entry/input.d.ts +16 -14
  43. package/dist/components/data-entry/input.js +3 -0
  44. package/dist/components/data-entry/month-picker.js +2 -2
  45. package/dist/components/data-entry/month-range-picker.d.ts +4 -6
  46. package/dist/components/data-entry/month-range-picker.js +2 -2
  47. package/dist/components/data-entry/number-input.d.ts +1 -5
  48. package/dist/components/data-entry/number-input.js +1 -0
  49. package/dist/components/data-entry/radio.js +0 -1
  50. package/dist/components/data-entry/search-select.d.ts +2 -4
  51. package/dist/components/data-entry/select.d.ts +11 -6
  52. package/dist/components/data-entry/select.js +4 -2
  53. package/dist/components/data-entry/switch.js +0 -1
  54. package/dist/components/data-entry/textarea.d.ts +10 -16
  55. package/dist/components/data-entry/time-picker.d.ts +3 -5
  56. package/dist/components/data-entry/upload-types.d.ts +1 -5
  57. package/dist/components/data-entry/use-upload-draft.d.ts +0 -4
  58. package/dist/components/feedback/dialog.d.ts +6 -15
  59. package/dist/components/feedback/overlay-header-tone.d.ts +1 -1
  60. package/dist/components/feedback/sheet.d.ts +3 -10
  61. package/dist/components/feedback/sheet.js +1 -1
  62. package/dist/components/feedback/sonner.js +2 -3
  63. package/dist/components/general/activity.d.ts +4 -30
  64. package/dist/components/general/button.js +1 -10
  65. package/dist/components/general/logo.d.ts +6 -28
  66. package/dist/components/general/reveal.d.ts +3 -9
  67. package/dist/components/general/typography.d.ts +1 -3
  68. package/dist/components/layout/account-chip.d.ts +8 -0
  69. package/dist/components/layout/account-chip.js +45 -0
  70. package/dist/components/layout/auth-divider.d.ts +2 -9
  71. package/dist/components/layout/auth-shell.d.ts +1 -14
  72. package/dist/components/layout/breadcrumb.d.ts +1 -5
  73. package/dist/components/layout/centered-shell.d.ts +4 -18
  74. package/dist/components/layout/error-surface.d.ts +11 -28
  75. package/dist/components/layout/error-surface.js +4 -1
  76. package/dist/components/layout/index.d.ts +2 -0
  77. package/dist/components/layout/index.js +2 -0
  78. package/dist/components/layout/legal-document-shell.d.ts +5 -28
  79. package/dist/components/layout/master-detail.d.ts +2 -18
  80. package/dist/components/layout/page-container.js +0 -1
  81. package/dist/components/layout/responsive-grid.d.ts +6 -1
  82. package/dist/components/layout/responsive-grid.js +9 -2
  83. package/dist/components/layout/service-role-panel.d.ts +7 -19
  84. package/dist/components/layout/sidebar.d.ts +5 -27
  85. package/dist/components/layout/sidebar.js +0 -1
  86. package/dist/components/layout/split-pane.d.ts +0 -7
  87. package/dist/components/layout/topbar.d.ts +1 -14
  88. package/dist/components/navigation/app-setting-picker.js +1 -3
  89. package/dist/components/navigation/filter-bar.d.ts +1 -6
  90. package/dist/components/navigation/pagination-utils.d.ts +2 -12
  91. package/dist/components/navigation/tabs-scroll.d.ts +2 -36
  92. package/dist/components/navigation/tabs.js +4 -8
  93. package/dist/components/query/data-state.d.ts +2 -2
  94. package/dist/components/ui/credential-reveal.d.ts +1 -4
  95. package/dist/components/ui/hover-card.d.ts +1 -2
  96. package/dist/components/ui/separator.d.ts +2 -15
  97. package/dist/components/ui/toggle-group.d.ts +1 -5
  98. package/dist/components/ui/toggle.d.ts +6 -31
  99. package/dist/email/brand-mark.d.ts +6 -34
  100. package/dist/email/color.d.ts +7 -17
  101. package/dist/email/geometry.d.ts +4 -8
  102. package/dist/email/index.d.ts +4 -48
  103. package/dist/email/inline-style.d.ts +3 -9
  104. package/dist/email/urgency.d.ts +2 -7
  105. package/dist/form/form-context.d.ts +2 -5
  106. package/dist/form/form-root.d.ts +1 -2
  107. package/dist/i18n/messages/en.json +4 -0
  108. package/dist/i18n/messages/ja.json +4 -0
  109. package/dist/i18n/messages/vi.json +4 -0
  110. package/dist/inertia/index.d.ts +2 -10
  111. package/dist/lib/control-styles.d.ts +10 -21
  112. package/dist/lib/control-styles.js +4 -6
  113. package/dist/lib/datetime/format-date.d.ts +1 -4
  114. package/dist/lib/field-a11y.d.ts +11 -68
  115. package/dist/lib/field-a11y.js +0 -1
  116. package/dist/lib/format.d.ts +4 -8
  117. package/dist/lib/hooks.d.ts +6 -12
  118. package/dist/lib/permission-grid.d.ts +3 -18
  119. package/dist/lib/query-error.d.ts +3 -3
  120. package/dist/props/components/app.prop.d.ts +15 -38
  121. package/dist/props/components/charts.prop.d.ts +2 -3
  122. package/dist/props/components/data-display.prop.d.ts +48 -72
  123. package/dist/props/components/data-entry.prop.d.ts +35 -40
  124. package/dist/props/components/form.prop.d.ts +2 -6
  125. package/dist/props/components/general.prop.d.ts +11 -27
  126. package/dist/props/components/layout.prop.d.ts +89 -260
  127. package/dist/props/components/navigation.prop.d.ts +27 -42
  128. package/dist/props/registry.d.ts +31 -0
  129. package/dist/props/registry.js +33 -0
  130. package/dist/props/vocabulary/data.prop.d.ts +18 -49
  131. package/dist/props/vocabulary/index.d.ts +1 -1
  132. package/dist/props/vocabulary/interaction.prop.d.ts +10 -12
  133. package/dist/props/vocabulary/layout.prop.d.ts +8 -30
  134. package/dist/props/vocabulary/shared.prop.d.ts +3 -2
  135. package/dist/styles/alert-layout.css +1 -32
  136. package/dist/styles/badge-layout.css +4 -18
  137. package/dist/styles/base.css +14 -113
  138. package/dist/styles/card-layout.css +6 -128
  139. package/dist/styles/chart-layout.css +2 -17
  140. package/dist/styles/control.css +380 -458
  141. package/dist/styles/core.css +21 -0
  142. package/dist/styles/data-display-layout.css +175 -94
  143. package/dist/styles/data-entry-layout.css +0 -45
  144. package/dist/styles/density.css +1 -30
  145. package/dist/styles/dialog-layout.css +5 -69
  146. package/dist/styles/focus-ring.css +13 -87
  147. package/dist/styles/fonts.css +1 -31
  148. package/dist/styles/form-layout.css +7 -91
  149. package/dist/styles/index.css +2 -20
  150. package/dist/styles/layout.css +38 -456
  151. package/dist/styles/logo-layout.css +1 -35
  152. package/dist/styles/motion.css +3 -42
  153. package/dist/styles/navigation-layout.css +3 -50
  154. package/dist/styles/shell-layout.css +37 -403
  155. package/dist/styles/table-layout.css +16 -274
  156. package/dist/styles/text-layout.css +7 -21
  157. package/dist/styles/toggle.css +1 -23
  158. package/dist/theme/dxs.canonical.css +1 -55
  159. package/dist/theme/example.service.css +1 -26
  160. package/dist/theme/famgia.service.css +5 -15
  161. package/dist/tokens/axes.css +3 -40
  162. package/dist/tokens/base.css +1 -4
  163. package/dist/tokens/components/activity.css +6 -42
  164. package/dist/tokens/components/badge.css +4 -13
  165. package/dist/tokens/components/banner.css +4 -9
  166. package/dist/tokens/components/card.css +32 -88
  167. package/dist/tokens/components/chart.css +9 -26
  168. package/dist/tokens/components/control.css +37 -222
  169. package/dist/tokens/components/data-display.css +28 -79
  170. package/dist/tokens/components/data-entry.css +5 -19
  171. package/dist/tokens/components/descriptions.css +7 -27
  172. package/dist/tokens/components/email.css +38 -84
  173. package/dist/tokens/components/error-surface.css +2 -18
  174. package/dist/tokens/components/feedback.css +27 -124
  175. package/dist/tokens/components/form.css +13 -45
  176. package/dist/tokens/components/legal-document.css +16 -41
  177. package/dist/tokens/components/list-row.css +11 -36
  178. package/dist/tokens/components/logo.css +2 -57
  179. package/dist/tokens/components/navigation.css +16 -94
  180. package/dist/tokens/components/scroll-area.css +2 -18
  181. package/dist/tokens/components/separator.css +8 -30
  182. package/dist/tokens/components/sheet.css +3 -14
  183. package/dist/tokens/components/shell.css +53 -307
  184. package/dist/tokens/components/sidebar.css +5 -22
  185. package/dist/tokens/components/table.css +19 -140
  186. package/dist/tokens/components/toggle.css +3 -65
  187. package/dist/tokens/components/upload.css +7 -43
  188. package/dist/tokens/foundation.css +108 -383
  189. package/dist/tokens/semantic/layout.css +33 -207
  190. package/docs/CANONICAL-CONTRACTS.md +206 -0
  191. package/docs/COMPONENTS.md +157 -0
  192. package/docs/COMPOSITION-VS-COMPONENT.md +105 -0
  193. package/docs/CONSUMER-RULES.md +14 -0
  194. package/docs/CUSTOMER-THEMING.md +162 -0
  195. package/docs/DATETIME.md +69 -0
  196. package/docs/DEVELOPMENT.md +173 -0
  197. package/docs/FORMS.md +143 -0
  198. package/docs/FRAME-A11Y-CI.md +267 -0
  199. package/docs/FRAME-COVERAGE-LEDGER.md +123 -0
  200. package/docs/FRAME-COVERAGE-REPORT.md +140 -0
  201. package/docs/FRAME-COVERAGE-STANDARD.md +65 -0
  202. package/docs/FRAME-COVERAGE.md +29 -0
  203. package/docs/PROPS-REGISTRY.md +61 -0
  204. package/docs/PROPS-VOCABULARY.md +100 -0
  205. package/docs/README.md +60 -0
  206. package/docs/REGISTRY.md +70 -0
  207. package/docs/SPACING.md +56 -0
  208. package/docs/STANDARDS-vocabulary-tokens.md +48 -0
  209. package/docs/TESTING.md +98 -0
  210. package/docs/TOKENS.md +347 -0
  211. package/docs/asset-modules.d.ts +46 -0
  212. package/docs/assets/cover-terrain.svg +6 -0
  213. package/docs/assets/portrait-amber.svg +5 -0
  214. package/docs/assets/portrait-clay.svg +5 -0
  215. package/docs/assets/portrait-indigo.svg +5 -0
  216. package/docs/assets/portrait-iris.svg +5 -0
  217. package/docs/assets/portrait-moss.svg +5 -0
  218. package/docs/assets/portrait-plum.svg +5 -0
  219. package/docs/assets/portrait-slate.svg +5 -0
  220. package/docs/charts/compact-bar-trend.tsx +328 -0
  221. package/docs/charts/size-tiers.tsx +192 -0
  222. package/docs/data-display/accordion.tsx +99 -0
  223. package/docs/data-display/avatar.tsx +355 -0
  224. package/docs/data-display/badge.tsx +247 -0
  225. package/docs/data-display/card/examples/detail-panel.tsx +106 -0
  226. package/docs/data-display/card/index.md +3 -0
  227. package/docs/data-display/card/index.tsx +285 -0
  228. package/docs/data-display/carousel.tsx +156 -0
  229. package/docs/data-display/charts.tsx +198 -0
  230. package/docs/data-display/code-block.tsx +90 -0
  231. package/docs/data-display/collapsible.tsx +162 -0
  232. package/docs/data-display/credential-reveal.tsx +145 -0
  233. package/docs/data-display/data-table/examples/approval-queue.tsx +212 -0
  234. package/docs/data-display/data-table/examples/grid-features.tsx +158 -0
  235. package/docs/data-display/data-table/examples/list-page.tsx +175 -0
  236. package/docs/data-display/data-table/index.md +5 -0
  237. package/docs/data-display/data-table/index.tsx +295 -0
  238. package/docs/data-display/descriptions.tsx +143 -0
  239. package/docs/data-display/empty-state.tsx +164 -0
  240. package/docs/data-display/hover-card.tsx +181 -0
  241. package/docs/data-display/list-row.tsx +420 -0
  242. package/docs/data-display/permission-matrix.tsx +184 -0
  243. package/docs/data-display/popover-touch.tsx +27 -0
  244. package/docs/data-display/popover.tsx +245 -0
  245. package/docs/data-display/progress.tsx +84 -0
  246. package/docs/data-display/prose.tsx +105 -0
  247. package/docs/data-display/qr-code.tsx +68 -0
  248. package/docs/data-display/scroll-area.tsx +271 -0
  249. package/docs/data-display/service-launcher-card.tsx +145 -0
  250. package/docs/data-display/stat-card.tsx +99 -0
  251. package/docs/data-display/table.tsx +251 -0
  252. package/docs/data-display/timeline.tsx +112 -0
  253. package/docs/data-display/touch-actions.tsx +36 -0
  254. package/docs/data-display/tree-list.tsx +107 -0
  255. package/docs/data-entry/branch-scope-picker.tsx +123 -0
  256. package/docs/data-entry/calendar.tsx +180 -0
  257. package/docs/data-entry/cascader.tsx +378 -0
  258. package/docs/data-entry/checkbox.tsx +256 -0
  259. package/docs/data-entry/color-picker.tsx +117 -0
  260. package/docs/data-entry/command-palette.tsx +179 -0
  261. package/docs/data-entry/command.tsx +262 -0
  262. package/docs/data-entry/country-picker-recipe.tsx +170 -0
  263. package/docs/data-entry/date-picker.tsx +191 -0
  264. package/docs/data-entry/date-range-picker.tsx +149 -0
  265. package/docs/data-entry/form/examples/employee-settings.tsx +267 -0
  266. package/docs/data-entry/form/examples/invoice-form.tsx +387 -0
  267. package/docs/data-entry/form-field/examples/a11y-contract.tsx +240 -0
  268. package/docs/data-entry/form-field/examples/create-form.tsx +105 -0
  269. package/docs/data-entry/form-field/index.md +8 -0
  270. package/docs/data-entry/form-field/index.tsx +326 -0
  271. package/docs/data-entry/form-inertia.tsx +80 -0
  272. package/docs/data-entry/form-root.tsx +102 -0
  273. package/docs/data-entry/form.tsx +724 -0
  274. package/docs/data-entry/input-otp.tsx +231 -0
  275. package/docs/data-entry/input.tsx +114 -0
  276. package/docs/data-entry/label.tsx +100 -0
  277. package/docs/data-entry/month-picker.tsx +101 -0
  278. package/docs/data-entry/month-range-picker.tsx +115 -0
  279. package/docs/data-entry/number-input.tsx +240 -0
  280. package/docs/data-entry/password-input.tsx +106 -0
  281. package/docs/data-entry/password-strength.tsx +97 -0
  282. package/docs/data-entry/radio-group.tsx +95 -0
  283. package/docs/data-entry/rating.tsx +87 -0
  284. package/docs/data-entry/search-input.tsx +120 -0
  285. package/docs/data-entry/select-async-contracts.tsx +108 -0
  286. package/docs/data-entry/select-matrix.tsx +204 -0
  287. package/docs/data-entry/select.tsx +369 -0
  288. package/docs/data-entry/slider.tsx +130 -0
  289. package/docs/data-entry/switch.tsx +67 -0
  290. package/docs/data-entry/tag-input.tsx +108 -0
  291. package/docs/data-entry/textarea.tsx +209 -0
  292. package/docs/data-entry/time-picker.tsx +99 -0
  293. package/docs/data-entry/toggle-count.tsx +293 -0
  294. package/docs/data-entry/toggle-group.tsx +225 -0
  295. package/docs/data-entry/toggle.tsx +127 -0
  296. package/docs/data-entry/transfer.tsx +97 -0
  297. package/docs/data-entry/tree-select.tsx +204 -0
  298. package/docs/data-entry/upload.tsx +184 -0
  299. package/docs/feedback/alert-dialog.tsx +270 -0
  300. package/docs/feedback/alert.tsx +248 -0
  301. package/docs/feedback/banner.tsx +183 -0
  302. package/docs/feedback/danger-confirm.tsx +88 -0
  303. package/docs/feedback/dialog-touch.tsx +24 -0
  304. package/docs/feedback/dialog.tsx +193 -0
  305. package/docs/feedback/sheet.tsx +410 -0
  306. package/docs/feedback/skeleton.tsx +111 -0
  307. package/docs/feedback/toast.tsx +135 -0
  308. package/docs/feedback/tooltip.tsx +171 -0
  309. package/docs/feedback/two-factor-setup.tsx +68 -0
  310. package/docs/foundation/_email-specimen.ts +274 -0
  311. package/docs/foundation/colors.tsx +202 -0
  312. package/docs/foundation/density.tsx +232 -0
  313. package/docs/foundation/email-tokens.tsx +306 -0
  314. package/docs/foundation/radius-shadow.tsx +152 -0
  315. package/docs/foundation/spacing.tsx +211 -0
  316. package/docs/foundation/typography.tsx +147 -0
  317. package/docs/general/activity.tsx +224 -0
  318. package/docs/general/button/examples/destructive-confirm.tsx +90 -0
  319. package/docs/general/button/examples/form-actions.tsx +85 -0
  320. package/docs/general/button/examples/toolbar.tsx +160 -0
  321. package/docs/general/button/index.md +12 -0
  322. package/docs/general/button/index.tsx +211 -0
  323. package/docs/general/logo.tsx +131 -0
  324. package/docs/general/reveal.tsx +41 -0
  325. package/docs/general/typography.tsx +152 -0
  326. package/docs/layout/account-chip.tsx +72 -0
  327. package/docs/layout/admin-collection.tsx +122 -0
  328. package/docs/layout/app-shell.tsx +374 -0
  329. package/docs/layout/aspect-ratio.tsx +119 -0
  330. package/docs/layout/auth-account-summary.tsx +103 -0
  331. package/docs/layout/auth-divider.tsx +28 -0
  332. package/docs/layout/auth-footer.tsx +37 -0
  333. package/docs/layout/auth-identity.tsx +36 -0
  334. package/docs/layout/auth-recovery/examples/mfa-challenge.md +41 -0
  335. package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +254 -0
  336. package/docs/layout/auth-recovery/examples/mobile-390.md +25 -0
  337. package/docs/layout/auth-recovery/examples/mobile-390.tsx +82 -0
  338. package/docs/layout/auth-recovery/examples/password-recovery.md +24 -0
  339. package/docs/layout/auth-recovery/examples/password-recovery.tsx +197 -0
  340. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +27 -0
  341. package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +156 -0
  342. package/docs/layout/auth-recovery/index.md +140 -0
  343. package/docs/layout/auth-recovery/index.tsx +96 -0
  344. package/docs/layout/auth-shell-context.tsx +103 -0
  345. package/docs/layout/auth-shell-device.tsx +112 -0
  346. package/docs/layout/auth-shell-registration.tsx +335 -0
  347. package/docs/layout/auth-shell-variants.tsx +139 -0
  348. package/docs/layout/auth-shell.tsx +59 -0
  349. package/docs/layout/auth-stack.tsx +40 -0
  350. package/docs/layout/centered-shell.tsx +102 -0
  351. package/docs/layout/error-surface/examples/application-403.tsx +84 -0
  352. package/docs/layout/error-surface/examples/application-404.tsx +77 -0
  353. package/docs/layout/error-surface/examples/system-500.tsx +47 -0
  354. package/docs/layout/error-surface/examples/system-503.tsx +48 -0
  355. package/docs/layout/error-surface/index.md +153 -0
  356. package/docs/layout/error-surface/index.tsx +239 -0
  357. package/docs/layout/flex.tsx +262 -0
  358. package/docs/layout/legal-document-shell/_data.ts +110 -0
  359. package/docs/layout/legal-document-shell/examples/desktop-1440.md +12 -0
  360. package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +83 -0
  361. package/docs/layout/legal-document-shell/examples/mobile-390.md +22 -0
  362. package/docs/layout/legal-document-shell/examples/mobile-390.tsx +70 -0
  363. package/docs/layout/legal-document-shell/examples/tablet-1024.md +3 -0
  364. package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +84 -0
  365. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +18 -0
  366. package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +61 -0
  367. package/docs/layout/legal-document-shell/index.md +51 -0
  368. package/docs/layout/legal-document-shell/index.tsx +101 -0
  369. package/docs/layout/master-detail.tsx +387 -0
  370. package/docs/layout/org-switcher.tsx +131 -0
  371. package/docs/layout/page-container.tsx +946 -0
  372. package/docs/layout/resizable-panel.tsx +419 -0
  373. package/docs/layout/responsive-grid.tsx +235 -0
  374. package/docs/layout/separator.tsx +327 -0
  375. package/docs/layout/service-role-panel.tsx +144 -0
  376. package/docs/layout/sidebar.tsx +586 -0
  377. package/docs/layout/split-pane.tsx +451 -0
  378. package/docs/layout/topbar.tsx +347 -0
  379. package/docs/navigation/app-setting-picker.tsx +141 -0
  380. package/docs/navigation/breadcrumb.tsx +128 -0
  381. package/docs/navigation/context-menu.tsx +117 -0
  382. package/docs/navigation/dropdown-menu.tsx +213 -0
  383. package/docs/navigation/filter-bar.tsx +227 -0
  384. package/docs/navigation/menubar.tsx +141 -0
  385. package/docs/navigation/navigation-menu.tsx +165 -0
  386. package/docs/navigation/pagination.tsx +241 -0
  387. package/docs/navigation/steps.tsx +263 -0
  388. package/docs/navigation/tabs-rtl.tsx +28 -0
  389. package/docs/navigation/tabs.tsx +308 -0
  390. package/docs/navigation/toolbar.tsx +339 -0
  391. package/docs/providers/app-provider.tsx +191 -0
  392. package/docs/providers/format-date.tsx +230 -0
  393. package/docs/query/button-refetch.tsx +160 -0
  394. package/docs/query/data-state.tsx +192 -0
  395. package/docs/query/infinite-query-state.tsx +93 -0
  396. package/docs/query/mutation-feedback.tsx +70 -0
  397. package/docs/query/prefetch-link.tsx +262 -0
  398. package/docs/query/touch-actions.tsx +68 -0
  399. package/docs/showcase/acme-portal.tsx +441 -0
  400. package/docs/showcase/acme-website.tsx +455 -0
  401. package/docs/showcase/case1-warehouse-dashboard.tsx +343 -0
  402. package/docs/showcase/case2-employee-me.tsx +441 -0
  403. package/docs/showcase/case3-approval-workflow.tsx +527 -0
  404. package/docs/showcase/case4-login.tsx +307 -0
  405. package/docs/showcase/case5-shift-calendar.tsx +795 -0
  406. package/docs/showcase/case6-agency-handy.tsx +1072 -0
  407. package/docs/showcase/futurelastic-web.tsx +390 -0
  408. package/docs/showcase/org-switcher.tsx +313 -0
  409. package/docs/showcase/permission-matrix.tsx +343 -0
  410. package/docs/showcase/public-landing.tsx +210 -0
  411. package/docs/showcase/settings-account-sections.tsx +559 -0
  412. package/docs/showcase/settings-security-mfa.tsx +145 -0
  413. package/docs/showcase/table-approval-queue.tsx +199 -0
  414. package/docs/showcase/table-bulk-actions.tsx +460 -0
  415. package/docs/showcase/table-compact-kintone.tsx +438 -0
  416. package/docs/showcase/table-conditional-format.tsx +367 -0
  417. package/docs/showcase/table-crud-list.tsx +544 -0
  418. package/docs/showcase/table-density.tsx +340 -0
  419. package/docs/showcase/table-expandable-rows.tsx +471 -0
  420. package/docs/showcase/table-filter-chips.tsx +461 -0
  421. package/docs/showcase/table-footer-totals.tsx +311 -0
  422. package/docs/showcase/table-grouped-subtotals.tsx +388 -0
  423. package/docs/showcase/table-master-detail.tsx +479 -0
  424. package/docs/showcase/table-pagination.tsx +320 -0
  425. package/docs/showcase/table-states.tsx +363 -0
  426. package/docs/showcase/table-sticky-columns.tsx +373 -0
  427. package/docs/showcase/table-tree-rows.tsx +444 -0
  428. package/docs/showcase/table-view-tabs.tsx +488 -0
  429. package/package.json +9 -11
  430. package/scripts/_agent-setup.mjs +16 -2
  431. package/scripts/audit-hook.mjs +3 -13
  432. package/scripts/init-agent-kit.mjs +1 -14
  433. package/scripts/postinstall.mjs +12 -12
  434. package/scripts/ui-audit.mjs +93 -31
  435. package/scripts/visual-audit-rules.mjs +51 -7
  436. package/scripts/visual-audit.mjs +118 -47
@@ -35,10 +35,7 @@ export interface EmailShellTokens {
35
35
  /** Tight rhythm (heading ↔ lede). */
36
36
  readonly gapSm: string;
37
37
  readonly gapSmPx: number;
38
- /**
39
- * Height the canonical invitation reference card measures at this geometry (480×407). A
40
- * visual-regression target, NOT a layout input — never set a fixed height on an email card.
41
- */
38
+ /** Height the canonical invitation reference card measures at this geometry (480×407). */
42
39
  readonly referenceHeight: string;
43
40
  readonly referenceHeightPx: number;
44
41
  }
@@ -47,11 +44,10 @@ export declare const EMAIL_SHELL: EmailShellTokens;
47
44
  export interface EmailTypographyTokens {
48
45
  /**
49
46
  * The canonical DXS stack, Noto Sans JP first (product override, direct instruction). Web-font
50
- * `@font-face` is unavailable in most clients, so this NAMES the face and degrades: a client with
51
- * Noto Sans JP installed (or a webmail that already loaded it) renders the canonical face;
47
+ * `@font-face` is unavailable in most clients, so this NAMES the face and degrades: a client
48
+ * with Noto Sans JP installed (or a webmail that already loaded it) renders the canonical face;
52
49
  * everything else falls to Hiragino (macOS/iOS) → Yu Gothic (Windows) → M PLUS 2 → Meiryo → the
53
- * system UI face → Arial → `sans-serif`. Family names are SINGLE-quoted so the value drops
54
- * straight into a double-quoted `style="…"` attribute.
50
+ * system UI face → Arial → `sans-serif`.
55
51
  */
56
52
  readonly fontFamily: string;
57
53
  /** Mono stack for invoice ids, masked card numbers, ISO dates and amounts. */
@@ -1,53 +1,9 @@
1
1
  /**
2
- * `@godxjp/ui/email` — the email-safe design-token contract for transactional templates (issue #227).
3
- *
4
- * ## Why this exists
5
- *
6
- * A transactional email is rendered by Blade/Twig/MJML, not React, and by clients that strip
7
- * `<style>`, ignore CSS custom properties, refuse relative units and block remote images. So the
8
- * two things a template usually reaches for — the component library and the CSS token file — are
9
- * both unavailable, and templates end up hand-copying hex and hand-drawing the logo. That is
2
+ * So the two things a template usually reaches for — the component library and the CSS token file
3
+ * — are both unavailable, and templates end up hand-copying hex and hand-drawing the logo. That is
10
4
  * exactly the drift this module removes: it is a FRAMEWORK-NEUTRAL, zero-dependency, React-free
11
- * data export of literal `#rrggbb` / `px` values plus the canonical brand-mark markup.
12
- *
13
- * ## The no-drift guarantee
14
- *
15
- * Nothing here is hand-typed. `src/tokens/foundation.css` (colour roles) and
16
- * `src/tokens/components/email.css` (geometry/typography) are read by
17
- * `scripts/gen-email-tokens.mjs` into `tokens.generated.ts`, and the HSL→hex conversion runs at
18
- * module load. There is no hex literal anywhere in `src/email/`, so an email palette that diverges
19
- * from the web palette is not something a maintainer can accidentally write.
20
- * `src/email/__tests__/email-tokens.test.ts` re-derives every value straight from the CSS and
21
- * asserts equality, and `pnpm check:email-token-sync` fails CI if the generated file goes stale.
22
- *
23
- * ## Usage
24
- *
25
- * ```ts
26
- * import { EMAIL_COLORS, EMAIL_URGENCY, EMAIL_SHELL, EMAIL_CTA, EMAIL_BRAND_MARK, emailInlineStyle } from "@godxjp/ui/email";
27
- *
28
- * const card = emailInlineStyle({
29
- * width: EMAIL_SHELL.width,
30
- * padding: EMAIL_SHELL.padding,
31
- * backgroundColor: EMAIL_COLORS.surface,
32
- * border: `${EMAIL_SHELL.borderWidth} solid ${EMAIL_COLORS.border}`,
33
- * borderTopColor: EMAIL_URGENCY.accent,
34
- * borderRadius: EMAIL_SHELL.radius,
35
- * });
36
- * ```
37
- *
38
- * A non-JS template engine (Blade, Twig, Liquid) consumes the same values through
39
- * `EMAIL_TOKENS_JSON` — dump it once in the build step and read the JSON from PHP:
40
- *
41
- * ```sh
42
- * node --input-type=module -e \
43
- * 'import("@godxjp/ui/email").then(m => process.stdout.write(m.EMAIL_TOKENS_JSON))' \
44
- * > resources/design/email-tokens.json
45
- * ```
46
- *
47
- * ## Scope
48
- *
49
- * Tokens, geometry and brand markup only. Copy, recipients, links, locale, triggers and queue
50
- * behaviour belong to the sending application — this module knows nothing about them.
5
+ * data export of literal `#rrggbb` / `px` values plus the canonical brand-mark markup. ## The
6
+ * no-drift guarantee Nothing here is hand-typed.
51
7
  */
52
8
  export { hslToHex, EMAIL_COLORS, EMAIL_COLORS_DARK, type EmailColorToken, type EmailHex, } from "./color.js";
53
9
  export { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE, type EmailTokenName, type EmailShellTokens, type EmailTypographyTokens, type EmailCtaTokens, type EmailFooterTokens, type EmailFocusTokens, type EmailMobileTokens, } from "./geometry.js";
@@ -1,13 +1,7 @@
1
1
  /**
2
- * Inline-style serialisation for HTML email.
3
- *
4
- * Email clients do not run the cascade: Gmail strips `<style>`, Outlook resolves no custom
5
- * property, and only the `style=""` attribute on the painting element is universally honoured.
6
- * `emailInlineStyle` turns a declaration map into that attribute value AND enforces the three rules
7
- * that silently break templates — no `var()` (nothing resolves it), no `calc()` (Outlook's Word
8
- * renderer drops the whole declaration) and no `"` (it closes the `style="…"` attribute mid-value,
9
- * which is how a double-quoted font family corrupts a whole tag). Failing loudly at template-build
10
- * time beats a broken layout discovered in Mailpit.
2
+ * Inline-style serialisation for HTML email. Email clients do not run the cascade: Gmail strips
3
+ * `<style>`, Outlook resolves no custom property, and only the `style=""` attribute on the
4
+ * painting element is universally honoured.
11
5
  */
12
6
  /** A declaration map. Numbers are emitted verbatim (already-unitless values like `font-weight`). */
13
7
  export type EmailStyleDeclarations = Record<string, string | number | null | undefined>;
@@ -1,12 +1,7 @@
1
1
  import { type EmailHex } from "./color.js";
2
2
  /**
3
- * Semantic action-required styling for transactional email.
4
- *
5
- * `accent` is the non-text rail/border color painted on the normal email surface. The solid pair
6
- * is safe for icons and large or bold labels that satisfy the 3:1 contrast floor; it is not a
7
- * replacement for normal body copy, which remains `EMAIL_COLORS.foreground` on
8
- * `EMAIL_COLORS.surface`. This deliberately narrow contract prevents urgency from becoming an
9
- * undocumented second CTA or a component-local palette.
3
+ * Semantic action-required styling for transactional email. `accent` is the non-text rail/border
4
+ * color painted on the normal email surface.
10
5
  */
11
6
  export interface EmailUrgencyTokens {
12
7
  /** Non-text action-required rail or border on the standard email surface. */
@@ -9,15 +9,12 @@ export declare const FormAdapterContext: import("react").Context<FormStateAdapte
9
9
  export declare function useFormAdapter(): FormStateAdapter | null;
10
10
  /**
11
11
  * Whether the surrounding `FormRoot` is currently submitting — works for BOTH paths: the adapter's
12
- * `isSubmitting` (e.g. Inertia's `processing`) or react-hook-form's `formState.isSubmitting`. Spread
13
- * onto a submit button so `processing` drives its loading state automatically:
14
- * `<Button type="submit" loading={useFormSubmitting()}>`.
12
+ * `isSubmitting` (e.g. Inertia's `processing`) or react-hook-form's `formState.isSubmitting`.
15
13
  */
16
14
  export declare function useFormSubmitting(): boolean;
17
15
  /**
18
16
  * Normalise a control's change payload to a bare value. The `FormFieldControl` render-prop spreads
19
17
  * `onChange` onto a control that may call it with a DOM `ChangeEvent` (native `<Input>`) OR a raw
20
- * value (a `Select`'s `onValueChange`). Mirror react-hook-form's own event unwrapping so the adapter
21
- * path binds identically for every control kind.
18
+ * value (a `Select`'s `onValueChange`).
22
19
  */
23
20
  export declare function extractControlValue(arg: unknown): unknown;
@@ -4,7 +4,6 @@ export type { FormRootProp } from "../props/components/form.prop.js";
4
4
  /**
5
5
  * FormRoot — the form shell. Provide EITHER `form` (built-in react-hook-form + Zod, client-side
6
6
  * validation) OR `adapter` (a framework-agnostic {@link FormStateAdapter} for a server-driven form
7
- * library — Inertia's `useForm` via `@godxjp/ui/inertia`, formik, TanStack Form). Both drive the same
8
- * `FormFieldControl` auto-binding; the core keeps ZERO dependency on any non-RHF form library.
7
+ * library — Inertia's `useForm` via `@godxjp/ui/inertia`, formik, TanStack Form).
9
8
  */
10
9
  export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, children, className, id, }: FormRootProp<TFieldValues>): import("react").JSX.Element;
@@ -17,6 +17,10 @@
17
17
  "typeToConfirm": "Type {phrase} to confirm"
18
18
  },
19
19
  "dataEntry": {
20
+ "calendar": {
21
+ "today": "Today",
22
+ "close": "Close"
23
+ },
20
24
  "datePicker": {
21
25
  "placeholder": "Select date",
22
26
  "openCalendar": "Open calendar"
@@ -17,6 +17,10 @@
17
17
  "typeToConfirm": "確認のため {phrase} と入力"
18
18
  },
19
19
  "dataEntry": {
20
+ "calendar": {
21
+ "today": "今日",
22
+ "close": "閉じる"
23
+ },
20
24
  "datePicker": {
21
25
  "placeholder": "日付を選択",
22
26
  "openCalendar": "カレンダーを開く"
@@ -17,6 +17,10 @@
17
17
  "typeToConfirm": "Nhập {phrase} để xác nhận"
18
18
  },
19
19
  "dataEntry": {
20
+ "calendar": {
21
+ "today": "Hôm nay",
22
+ "close": "Đóng"
23
+ },
20
24
  "datePicker": {
21
25
  "placeholder": "Chọn ngày",
22
26
  "openCalendar": "Mở lịch"
@@ -1,11 +1,7 @@
1
1
  import type { ComponentType, ReactNode } from "react";
2
2
  import type { FormStateAdapter } from "../props/components/form.prop.js";
3
3
  import type { SidebarLinkComponentProp } from "../props/components/layout.prop.js";
4
- /**
5
- * Structural shape of Inertia's `useForm` return that the adapter needs. Duck-typed on purpose —
6
- * `@godxjp/ui` keeps ZERO dependency on `@inertiajs/react`; the real `useForm()` object satisfies
7
- * this shape, so a consumer passes it directly with no import from this package.
8
- */
4
+ /** Structural shape of Inertia's `useForm` return that the adapter needs. */
9
5
  export interface InertiaFormLike<TData extends Record<string, unknown> = Record<string, unknown>> {
10
6
  /** Current form values (server-driven state). */
11
7
  data: TData;
@@ -65,11 +61,7 @@ export declare function useInertiaField<TData extends Record<string, unknown>>(f
65
61
  };
66
62
  }) => void;
67
63
  };
68
- /**
69
- * Structural shape of Inertia's `<Link>` that the Sidebar adapter needs. Duck-typed on purpose —
70
- * `@godxjp/ui` keeps ZERO dependency on `@inertiajs/react`; the real `Link` satisfies this shape,
71
- * so a consumer passes it directly with no import from this package.
72
- */
64
+ /** Structural shape of Inertia's `<Link>` that the Sidebar adapter needs. */
73
65
  export interface InertiaLinkLike {
74
66
  href: string;
75
67
  className?: string;
@@ -1,29 +1,18 @@
1
1
  /** Shared control sizing — reads `--control-height`, `--font-size-*` from density / theme. */
2
- export declare const controlFieldClass = "ui-control w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
3
- export declare const controlMultilineClass = "ui-control-multiline w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
2
+ export declare const controlMultilineClass = "ui-control-multiline aria-invalid:border-destructive w-full rounded-[var(--control-radius)] border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none";
4
3
  /**
5
- * Multiline control with its own chrome removed, for a textarea EMBEDDED in a surface that
6
- * already draws the box — a chat composer inside a Card, an inline edit cell, a comment box in
7
- * a panel. Two nested rounded borders is the tell that this was missing.
8
- *
9
- * These are utilities, not tokens, ON PURPOSE. `.ui-control-multiline` reads
10
- * `--control-border-width` / `--control-shadow` from `@layer components`, but the default class
11
- * ALSO carries Tailwind's `border` in `@layer utilities`, which wins whatever the token says —
12
- * the same structural inertness gh#260 found on Badge's font size. So the variant cannot be a
13
- * token override by a consumer; it has to drop the utilities here.
14
- *
15
- * The focus ring goes with them: the surface owns focus, via `focus-within` on the wrapper.
4
+ * Multiline control with its own chrome removed, for a textarea EMBEDDED in a surface that already
5
+ * draws the box — a chat composer inside a Card, an inline edit cell, a comment box in a panel.
6
+ * Two nested rounded borders is the tell that this was missing.
16
7
  */
17
- export declare const controlMultilineGhostClass = "ui-control-multiline w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50";
8
+ export declare const controlMultilineGhostClass = "ui-control-multiline w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0";
18
9
  /**
19
- * Open-state ring for popup-style triggers (Select / Cascader / TreeSelect / SearchSelect).
20
- * Radix moves focus INTO the popup on open, so the trigger loses `:focus-visible` and — without
21
- * this — an open popover shows only a border change (no ring), inconsistent with a focused Input.
22
- * Opacity `/50` matches the real focus ring used by Button / Input / Select. Apply alongside
23
- * `focus-visible:ring-*` on any trigger that toggles `data-state="open"`.
10
+ * Open-state ring for popup-style triggers (Select / Cascader / TreeSelect / SearchSelect). Radix
11
+ * moves focus INTO the popup on open, so the trigger loses `:focus-visible` and — without this —
12
+ * an open popover shows only a border change (no ring), inconsistent with a focused Input.
24
13
  */
25
- export declare const controlOpenRingClass = "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]";
26
- export declare const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
14
+ export declare const controlOpenRingClass = "ui-control-trigger";
15
+ export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border-input bg-background transition-[color,box-shadow] focus-visible:outline-none [&>span]:line-clamp-1";
27
16
  export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
28
17
  export declare const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
29
18
  /** Leading/affix icon inside an input row (search, command) — sized to `--control-icon-size`. */
@@ -1,8 +1,7 @@
1
- const controlFieldClass = "ui-control w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
2
- const controlMultilineClass = "ui-control-multiline w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
3
- const controlMultilineGhostClass = "ui-control-multiline w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50";
4
- const controlOpenRingClass = "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]";
5
- const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
1
+ const controlMultilineClass = "ui-control-multiline aria-invalid:border-destructive w-full rounded-[var(--control-radius)] border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none";
2
+ const controlMultilineGhostClass = "ui-control-multiline w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0";
3
+ const controlOpenRingClass = "ui-control-trigger";
4
+ const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border-input bg-background transition-[color,box-shadow] focus-visible:outline-none [&>span]:line-clamp-1";
6
5
  const controlIconClass = "size-[length:var(--control-height)] shrink-0";
7
6
  const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
8
7
  const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0";
@@ -17,7 +16,6 @@ const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error
17
16
  const toneMutedClass = "border-border bg-muted text-muted-foreground";
18
17
  const toneNeutralClass = "border-border bg-muted text-muted-foreground";
19
18
  export {
20
- controlFieldClass,
21
19
  controlIconClass,
22
20
  controlIconLeadingClass,
23
21
  controlIconSmClass,
@@ -1,10 +1,7 @@
1
1
  import { type FormatDatetimeOptions } from "./format.js";
2
2
  import { type FormatDateKind } from "./detect.js";
3
3
  export type FormatDateOptions = FormatDatetimeOptions & {
4
- /**
5
- * Output preset. Default `auto` detects ISO date / HH:mm / instant.
6
- * Locale, timezone, and 12h|24h fall back to AppProvider when omitted.
7
- */
4
+ /** Output preset. Default `auto` detects ISO date / HH:mm / instant. */
8
5
  kind?: FormatDateKind;
9
6
  /** Treat `Date` as calendar pick (react-day-picker) — not an instant. */
10
7
  calendar?: boolean;
@@ -3,22 +3,7 @@ import * as React from "react";
3
3
  * The accessible-name / description / validation contract that {@link FormField} injects onto its
4
4
  * single control child (via `cloneElement`). EVERY form-capable `@godxjp/ui` component accepts
5
5
  * these props and forwards them to its **semantic focus target** — the real `<input>` / combobox /
6
- * trigger the user tabs to, never a presentational wrapper `<div>`. Without this forwarding the
7
- * visible label / helper / error rendered by FormField is silently disconnected from the control
8
- * for assistive technology (issue #164).
9
- *
10
- * These are the standard WAI-ARIA field relationships:
11
- * - `aria-labelledby` — points at the FormField label → the control's accessible **name**.
12
- * - `aria-describedby` — points at helper text → the control's **description**.
13
- * - `aria-errormessage` + `aria-invalid` — the validation message, announced when invalid.
14
- * - `aria-required` — required-field semantics.
15
- * - `aria-label` — a name supplied directly (used when there is no visible label element).
16
- *
17
- * `data-field` travels the SAME route (gh#337) and is therefore part of this bag even though it is
18
- * not an ARIA attribute. It is the field's stable machine key — the `data-testid` role, standardised
19
- * on one attribute so a control never has to be found by a generated id or by its visible Japanese
20
- * label. It is inert (read-only metadata) and must land on the same semantic focus target the aria
21
- * relationships do; routing it through a second, parallel mechanism is how a control gets missed.
6
+ * trigger the user tabs to, never a presentational wrapper `<div>`.
22
7
  */
23
8
  export interface FieldA11yProps {
24
9
  "aria-label"?: string;
@@ -27,7 +12,6 @@ export interface FieldA11yProps {
27
12
  "aria-errormessage"?: string;
28
13
  "aria-invalid"?: React.AriaAttributes["aria-invalid"];
29
14
  "aria-required"?: React.AriaAttributes["aria-required"];
30
- /** Stable machine key of the field (gh#337) — see the interface doc above. */
31
15
  "data-field"?: string;
32
16
  }
33
17
  /**
@@ -40,18 +24,12 @@ export declare function mergeAriaIds(...values: Array<string | undefined>): stri
40
24
  * Extract ONLY the defined field-a11y attributes from a props bag, ready to spread onto a
41
25
  * component's semantic focus target. Undefined entries are dropped so a forwarded contract never
42
26
  * clobbers a control's own intrinsic `aria-label` / `aria-invalid`.
43
- *
44
- * ```tsx
45
- * const fieldA11y = pickFieldA11y(props);
46
- * return <input {...fieldA11y} />; // the real focus target owns the relationship
47
- * ```
48
27
  */
49
28
  export declare function pickFieldA11y(props: FieldA11yProps): FieldA11yProps;
50
29
  /**
51
30
  * The inverse of {@link pickFieldA11y}: everything EXCEPT the field-a11y attributes. Use it when a
52
31
  * component must route the contract somewhere other than the element the remaining props land on —
53
- * e.g. `Select`'s compound API, where the props bag belongs to `SelectPrimitive.Root` (a
54
- * context-only component that renders no DOM) while the accessible name has to reach the trigger.
32
+ * e.g.
55
33
  */
56
34
  export declare function omitFieldA11y<T extends FieldA11yProps>(props: T): Omit<T, keyof FieldA11yProps>;
57
35
  /**
@@ -62,19 +40,10 @@ export declare function omitFieldA11y<T extends FieldA11yProps>(props: T): Omit<
62
40
  */
63
41
  export declare function resolveFieldA11y(props: FieldA11yProps, intrinsicAriaLabel?: string): FieldA11yProps;
64
42
  /**
65
- * The FormField label made reachable by NESTED controls (gh#303).
66
- *
67
43
  * `cloneElement` can only wire the field-a11y contract onto FormField's single direct child. When
68
44
  * that child is a layout wrapper (a `Flex` holding a range from/to pair, a 年/月 input+select
69
45
  * combo), the naming attributes stop on the wrapper `div` and every control inside is left with no
70
46
  * accessible name at all (axe: `label` on the inputs, `button-name` on select/combobox triggers).
71
- *
72
- * FormField therefore also publishes its label through this context, and each control's semantic
73
- * focus target picks it up as a LAST-RESORT name via {@link useFieldNameFallback}: a control that
74
- * already has a name — its own `aria-label`/`aria-labelledby`, or the one FormField cloned onto it
75
- * as the direct child — keeps it untouched. Multiple nested controls then all announce the field's
76
- * label; a consumer wanting distinct names (e.g. "開始日" / "終了日") sets `aria-label` per
77
- * control, which always wins.
78
47
  */
79
48
  export interface FieldNameContextValue {
80
49
  /** DOM id of FormField's visible label element (the `aria-labelledby` target). */
@@ -90,21 +59,10 @@ export declare const FieldNameContext: React.Context<FieldNameContextValue | nul
90
59
  */
91
60
  export declare function useFieldNameFallback(name: Pick<FieldA11yProps, "aria-label" | "aria-labelledby">): Pick<FieldA11yProps, "aria-label" | "aria-labelledby">;
92
61
  /**
93
- * The enclosing `FormField`, made reachable by NESTED controls (gh#337).
94
- *
95
62
  * `cloneElement` reaches FormField's single DIRECT child only. In the real screens this library
96
- * serves, 322 of 1,410 controls (23%) sit one level deeper — the direct child is a `Flex` holding a
97
- * from/to pair, a 年/月 combo, or a value + 「不明」 checkbox — so the machine key stopped on the
98
- * wrapper `div` and the controls inside stayed anonymous. The customer's acceptance condition is
99
- * 「画面に見えている入力欄の100%に付与されていること」; 77% does not pass.
100
- *
101
- * The key for such a control is its OWN `id`, and that is a finding, not a convention invented
102
- * here: of those 322, **250 already carry a static id** and the ambiguous case the wrapper creates
103
- * — two controls under one field — is already distinguished at the call site
104
- * (`search_billing_date_from` / `..._to`, `fax` / `fax_unknown`). So a nested control names itself
105
- * and no two controls can ever end up sharing a key. The remaining 72 (48 computed ids, 24 with no
106
- * id at all) get NOTHING: a fabricated key is worse than a missing one, because automation would
107
- * bind to it and break silently on the next render.
63
+ * serves, 322 of 1,410 controls (23%) sit one level deeper — the direct child is a `Flex` holding
64
+ * a from/to pair, a 年/月 combo, or a value + 「不明」 checkbox — so the machine key stopped on the
65
+ * wrapper `div` and the controls inside stayed anonymous.
108
66
  */
109
67
  export interface FieldIdentityContextValue {
110
68
  /** Whether the app opted into a native `name` (@see AppProviderProp.emitFieldNames). */
@@ -112,17 +70,9 @@ export interface FieldIdentityContextValue {
112
70
  }
113
71
  export declare const FieldIdentityContext: React.Context<FieldIdentityContextValue | null>;
114
72
  /**
115
- * Resolve `data-field` / `name` for a control nested under a `FormField` (see
116
- * {@link FieldIdentityContext}). Returns `{}` — adding nothing — in every case but the one it
117
- * exists for, which is what keeps it safe to call from every control:
118
- *
119
- * - **outside a FormField** → `{}`. A control elsewhere on the page is untouched.
120
- * - **`data-field` already present** → `{}`. Either `FormField` cloned it onto its direct child, or
121
- * a composite (DatePicker, Select) already resolved this field and is passing it down. Whoever
122
- * owns the field owns BOTH attributes, so `name` is not second-guessed here either — that is what
123
- * keeps DatePicker's ISO mirror (`name` belongs to the hidden `yyyy-MM-dd` input, not the visible
124
- * `yyyy/MM/dd` one) and Select's native `<select>` intact.
125
- * - **no `id` of its own** → `{}`. Nothing to derive a stable key from; see the interface doc.
73
+ * Resolve `data-field` / `name` for a control nested under a `FormField` (see {@link
74
+ * FieldIdentityContext}). Returns `{}` — adding nothing — in every case but the one it exists for,
75
+ * which is what keeps it safe to call from every control: - **outside a FormField** → `{}`.
126
76
  */
127
77
  export declare function useFieldIdentity(own: {
128
78
  id?: string;
@@ -135,16 +85,9 @@ export declare function useFieldIdentity(own: {
135
85
  /**
136
86
  * The field-a11y attributes valid on a **group container** (`role="group"`), used by composite
137
87
  * controls that have no single labelable focus target — CheckboxGroup, and the two-input range
138
- * pickers / Transfer shuttle.
139
- *
140
- * Per WAI-ARIA 1.2 only `aria-labelledby` and `aria-describedby` are globally allowed on
141
- * `role="group"`; `aria-invalid` / `aria-errormessage` / `aria-required` are widget-only and would
142
- * be an invalid-ARIA violation on a group. So the validation message id (`aria-errormessage`) is
143
- * **folded into `aria-describedby`** — the error text is still announced as part of the group's
144
- * description, and FormField's `role="alert"` error node announces it live regardless.
145
- *
146
- * `role="radiogroup"` IS a widget and supports the full validation set — those groups use
147
- * {@link pickFieldA11y} directly, not this helper.
88
+ * pickers / Transfer shuttle. Per WAI-ARIA 1.2 only `aria-labelledby` and `aria-describedby` are
89
+ * globally allowed on `role="group"`; `aria-invalid` / `aria-errormessage` / `aria-required` are
90
+ * widget-only and would be an invalid-ARIA violation on a group.
148
91
  */
149
92
  export declare function pickGroupFieldA11y(props: FieldA11yProps): {
150
93
  "aria-labelledby"?: string;
@@ -63,7 +63,6 @@ function pickGroupFieldA11y(props) {
63
63
  ...props["aria-labelledby"] !== void 0 ? { "aria-labelledby": props["aria-labelledby"] } : {},
64
64
  ...describedBy !== void 0 ? { "aria-describedby": describedBy } : {},
65
65
  // Not an ARIA attribute and so not subject to the role="group" restriction above — a group
66
- // still has to be findable by its field key (gh#337).
67
66
  ...props["data-field"] !== void 0 ? { "data-field": props["data-field"] } : {}
68
67
  };
69
68
  }
@@ -1,15 +1,11 @@
1
1
  /**
2
- * Bytes → size with conventional binary units (B/KB/MB/GB) and a locale-correct number,
3
- * e.g. "2.0 KB" (en) / "2,0 KB" (vi). The numeric part is formatted via `Intl.NumberFormat`
4
- * (locale decimal/grouping separators — no hardcoded "."); an optional `locale` overrides the
5
- * module-synced active locale.
2
+ * Bytes → size with conventional binary units (B/KB/MB/GB) and a locale-correct number, e.g. "2.0
3
+ * KB" (en) / "2,0 KB" (vi).
6
4
  */
7
5
  export declare function formatBytes(n: number | null | undefined, locale?: string): string;
8
6
  /**
9
- * ISO 4217 minor units → locale-formatted currency, e.g. (1995, "USD") → "$19.95" (en) /
10
- * "19,95 $" (vi). The active locale (or an explicit `locale`) drives grouping/symbol placement;
11
- * the currency's minor-unit scale comes from CLDR via `resolvedOptions().maximumFractionDigits`
12
- * — no hand-maintained zero-decimal list.
7
+ * ISO 4217 minor units → locale-formatted currency, e.g. (1995, "USD") → "$19.95" (en) / "19,95 $"
8
+ * (vi).
13
9
  */
14
10
  export declare function formatCurrency(amountMinor: number | null | undefined, currency: string, locale?: string): string;
15
11
  /** UUIDv7 / UUIDv4 → first 8 chars + ellipsis. Pair with a Tooltip showing full. */
@@ -12,18 +12,12 @@ export declare function useDebouncedValue<T>(value: T, delay?: number): T;
12
12
  */
13
13
  export declare function useTimeoutFlag(signal: unknown, ms?: number): boolean;
14
14
  /**
15
- * Controlled-ness latch for `value`/`defaultValue`/`onValueChange` controls
16
- * whose empty state is `undefined` (pickers carrying `Date`/`DateRange`).
17
- *
18
- * A control counts as controlled once a DEFINED `value` has EVER been passed:
19
- * - mounted with a defined `value`controlled, and a later `value={undefined}`
20
- * stays controlled-EMPTY (not mistaken for uncontrolled);
21
- * - mounted with `value={undefined}` (an empty form that later restores a
22
- * saved value) → uncontrolled until the first defined value arrives, then
23
- * PROMOTES to controlled for good.
24
- *
25
- * Fixing controlled-ness at mount (the previous behaviour) silently ignored
26
- * every later controlled value in the second case.
15
+ * Controlled-ness latch for `value`/`defaultValue`/`onValueChange` controls whose empty state is
16
+ * `undefined` (pickers carrying `Date`/`DateRange`). A control counts as controlled once a DEFINED
17
+ * `value` has EVER been passed: - mounted with a defined `value` → controlled, and a later
18
+ * `value={undefined}` stays controlled-EMPTY (not mistaken for uncontrolled); - mounted with
19
+ * `value={undefined}` (an empty form that later restores a saved value)uncontrolled until the
20
+ * first defined value arrives, then PROMOTES to controlled for good.
27
21
  */
28
22
  export declare function useControlledLatch(valueIsDefined: boolean): boolean;
29
23
  export declare function useMediaQuery(query: string): boolean;
@@ -1,22 +1,7 @@
1
1
  /**
2
- * permission-grid — pure, render-neutral helpers for RBAC role × permission
3
- * matrices.
4
- *
5
- * A permission matrix maps a set of PERMISSION rows against a set of ROLE
6
- * columns; each (role, permission) pair is either granted or not. A "permission
7
- * matrix" is NOT a framework component — it is a COMPOSITION of `Table`/
8
- * `DataTable` + `Badge` + tokens (see `docs/COMPOSITION-VS-COMPONENT.md`, Gate 0:
9
- * fails C2/C3/C7). What it DOES need is a single, tested source of truth for the
10
- * non-trivial data logic every consumer would otherwise re-derive: grant lookup,
11
- * the per-permission diff between two roles (compare mode), and the row set that
12
- * survives a "differences only" (差分のみ) filter.
13
- *
14
- * These functions are framework-neutral (no React) and locale-neutral (no
15
- * strings) so the showcase — and any RBAC admin — composes UI on top of them.
16
- *
17
- * Grants are modelled as a flat `Set` of composite keys for O(1) membership,
18
- * which mirrors how an authz decision cache (`role:permission` tuples) is
19
- * typically held in memory.
2
+ * permission-grid — pure, render-neutral helpers for RBAC role × permission matrices. A permission
3
+ * matrix maps a set of PERMISSION rows against a set of ROLE columns; each (role, permission) pair
4
+ * is either granted or not.
20
5
  */
21
6
  /** Any object addressable by a stable string `id` (a role or a permission). */
22
7
  export interface GridEntity {
@@ -8,9 +8,9 @@ export type QueryErrorInfo = {
8
8
  retryable: boolean;
9
9
  };
10
10
  /**
11
- * Classify a query/API error into a recovery-relevant category. Status codes win; message
12
- * keywords are the fallback for transport layers that only surface a string (e.g. an SDK that
13
- * throws `new Error("Access token invalid")` with no status). Never exposes the raw message.
11
+ * Classify a query/API error into a recovery-relevant category. Status codes win; message keywords
12
+ * are the fallback for transport layers that only surface a string (e.g. an SDK that throws `new
13
+ * Error("Access token invalid")` with no status).
14
14
  */
15
15
  export declare function classifyQueryError(error: unknown): QueryErrorInfo;
16
16
  /** `true` when repeating the same request can plausibly resolve the error. */
@@ -15,23 +15,20 @@ export type AppProviderProp = {
15
15
  defaultTimezone?: AppTimezoneDefault;
16
16
  /** Backend/system timezone when `defaultTimezone` is `system`. */
17
17
  systemTimezone?: AppTimezone;
18
- /** Initial clock format. `"locale"` derives from `defaultLocale`. Default: `"locale"`. */
18
+ /** Initial clock format. `"locale"` derives from `defaultLocale`. */
19
19
  defaultTimeFormat?: AppTimeFormat | "locale";
20
- /** Initial date display format. `"locale"` derives from `defaultLocale`. Default: `"locale"`. */
20
+ /** Initial date display format. `"locale"` derives from `defaultLocale`. */
21
21
  defaultDateFormat?: AppDateFormat | "locale";
22
22
  /**
23
- * IANA ids offered by the timezone-picker recipe (`useAppContext().timezoneOptions`).
24
- * Omit for the full IANA list; set to restrict (e.g. `APP_TIMEZONE_PRESET`).
23
+ * IANA ids offered by the timezone-picker recipe (`useAppContext().timezoneOptions`). Omit for
24
+ * the full IANA list; set to restrict (e.g.
25
25
  */
26
26
  timezoneOptions?: readonly AppTimezone[];
27
27
  /** localStorage key. Default: `godxjp.app`. */
28
28
  storageKey?: string;
29
29
  /** Persist user choices. Default: true. */
30
30
  persist?: boolean;
31
- /**
32
- * Initial light/dark theme — written to `<html data-theme>`. Default: `"light"`.
33
- * (The legacy `.dark` class still works as an equal alias.)
34
- */
31
+ /** Initial light/dark theme — written to `<html data-theme>`. Default: `"light"`. */
35
32
  theme?: AppTheme;
36
33
  /**
37
34
  * Initial brand palette preset — written to `<html data-brand>`. OPT-IN: omit
@@ -43,23 +40,14 @@ export type AppProviderProp = {
43
40
  /** Initial base type size — written to `<html data-font-size>`. Default: `"default"`. */
44
41
  fontSize?: AppFontSize;
45
42
  /**
46
- * Continuous global size multiplier — sets inline `--scaling` on `<html>`. Every
47
- * size token (spacing, control/table/checkbox/switch heights, radius) rescales in
48
- * proportion (Radix-style). `null` (default) defers to the `density` preset; a
49
- * number (e.g. `0.95`) overrides it. Type is a separate axis — not scaled.
43
+ * Continuous global size multiplier — sets inline `--scaling` on `<html>`. Every size token
44
+ * (spacing, control/table/checkbox/switch heights, radius) rescales in proportion (Radix-style).
50
45
  */
51
46
  scaling?: number | null;
52
47
  /**
53
- * Emit a native `name` on every control a `FormField` wraps, taken from the field's key
54
- * (`field` → `name` → `id`). Default `false`, and deliberately opt-in (gh#337).
55
- *
56
- * `data-field` is inert metadata and is always emitted; `name` is NOT — it changes what a
57
- * native `<form>` submit sends. An app whose controls have never carried a `name` would start
58
- * posting extra keys to its backend the moment it upgraded the library. That is a behaviour
59
- * change no shared package may make by default, so the app that WANTS it (a screen-automation /
60
- * RPA contract, native form posts) turns it on here, once, and every FormField in it obeys.
61
- *
62
- * A `name` written on the control itself always wins over the injected one.
48
+ * Emit a native `name` on every control a `FormField` wraps, taken from the field's key (`field`
49
+ * → `name` → `id`). `data-field` is inert metadata and is always emitted; `name` is NOT — it
50
+ * changes what a native `<form>` submit sends.
63
51
  */
64
52
  emitFieldNames?: boolean;
65
53
  onLocaleChange?: (locale: AppLocale) => void;
@@ -83,24 +71,13 @@ export type AppSettingPickerProp = {
83
71
  kind: AppSettingKind;
84
72
  /**
85
73
  * Trigger presentation. `"labeled"` shows the leading icon + the selected value in a control
86
- * sized to the setting. `"icon"` renders a supported square, icon-only topbar trigger (e.g. a
87
- * globe language switcher): it structurally drops the value text and the picker's owned width —
88
- * no descendant-selector CSS overrides needed — while always keeping the localized `aria-label`,
89
- * so an icon-only trigger can never ship without an accessible name. `"inline"` renders the
90
- * selected value as a compact text trigger for legal/auth footers without a field-like box.
91
- *
92
- * Default is kind-dependent: `kind="locale"` defaults to `"icon"` (its product contract is the
93
- * compact language switcher); every other kind defaults to `"labeled"`. Override explicitly for
94
- * e.g. a labeled locale row inside a settings form (`appearance="labeled"`).
74
+ * sized to the setting.
95
75
  */
96
76
  appearance?: AppSettingPickerAppearanceProp;
97
77
  /**
98
- * Compact presentation (gh#217) re-tiers the trigger box to `--control-height-sm` and drops the
99
- * picker's owned per-kind width so a LABELLED trigger hugs its value. Use it for an auth/legal
100
- * footer locale switch (`kind="locale" appearance="labeled" compact`), where the square icon-only
101
- * default reads as a stray button and the full labelled trigger is too tall. All geometry is
102
- * tokenized (`--app-setting-picker-compact-*`). No effect on `appearance="inline"`, which is
103
- * already chrome-less. Default `false`.
78
+ * Use it for an auth/legal footer locale switch (`kind="locale" appearance="labeled" compact`),
79
+ * where the square icon-only default reads as a stray button and the full labelled trigger is
80
+ * too tall. All geometry is tokenized (`--app-setting-picker-compact-*`).
104
81
  */
105
82
  compact?: boolean;
106
83
  className?: ClassNameProp;
@@ -130,7 +107,7 @@ export type AppContextValue = {
130
107
  density: AppDensity;
131
108
  fontSize: AppFontSize;
132
109
  scaling: number | null;
133
- /** Whether `FormField` injects a native `name` onto its control (gh#337). Default `false`. */
110
+ /** Default `false`. */
134
111
  emitFieldNames: boolean;
135
112
  setLocale: (locale: AppLocale) => void;
136
113
  setTimezone: (timezone: AppTimezone) => void;