@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.
- package/README.md +25 -128
- package/dist/app/theme-axes.d.ts +4 -15
- package/dist/app/timezones.d.ts +1 -4
- package/dist/components/charts/area-chart.d.ts +2 -3
- package/dist/components/charts/bar-chart.d.ts +2 -3
- package/dist/components/charts/chart-frame.d.ts +7 -16
- package/dist/components/charts/chart-summary.d.ts +2 -2
- package/dist/components/charts/compact-bar-trend.d.ts +9 -24
- package/dist/components/charts/index.d.ts +1 -6
- package/dist/components/data-display/badge.d.ts +2 -12
- package/dist/components/data-display/card.d.ts +21 -41
- package/dist/components/data-display/carousel.d.ts +1 -2
- package/dist/components/data-display/code-block.d.ts +4 -0
- package/dist/components/data-display/code-block.js +24 -0
- package/dist/components/data-display/data-table.d.ts +15 -37
- package/dist/components/data-display/data-table.js +1 -3
- package/dist/components/data-display/descriptions.d.ts +2 -6
- package/dist/components/data-display/descriptions.js +0 -2
- package/dist/components/data-display/index.d.ts +4 -0
- package/dist/components/data-display/index.js +4 -0
- package/dist/components/data-display/list-row.d.ts +3 -22
- package/dist/components/data-display/permission-matrix.d.ts +7 -20
- package/dist/components/data-display/progress.d.ts +1 -1
- package/dist/components/data-display/prose.d.ts +4 -0
- package/dist/components/data-display/prose.js +20 -0
- package/dist/components/data-display/service-launcher-card.d.ts +3 -10
- package/dist/components/data-display/table.d.ts +20 -80
- package/dist/components/data-display/table.js +0 -3
- package/dist/components/data-display/timeline.d.ts +3 -5
- package/dist/components/data-entry/branch-scope-picker.d.ts +2 -19
- package/dist/components/data-entry/branch-scope-picker.js +0 -1
- package/dist/components/data-entry/calendar.d.ts +3 -2
- package/dist/components/data-entry/calendar.js +58 -3
- package/dist/components/data-entry/command-palette.d.ts +8 -22
- package/dist/components/data-entry/date-picker.d.ts +4 -5
- package/dist/components/data-entry/date-picker.js +6 -1
- package/dist/components/data-entry/date-range-picker.d.ts +1 -1
- package/dist/components/data-entry/date-range-picker.js +8 -3
- package/dist/components/data-entry/form-errors.d.ts +7 -18
- package/dist/components/data-entry/form-field.js +1 -5
- package/dist/components/data-entry/form.d.ts +1 -9
- package/dist/components/data-entry/input.d.ts +16 -14
- package/dist/components/data-entry/input.js +3 -0
- package/dist/components/data-entry/month-picker.js +2 -2
- package/dist/components/data-entry/month-range-picker.d.ts +4 -6
- package/dist/components/data-entry/month-range-picker.js +2 -2
- package/dist/components/data-entry/number-input.d.ts +1 -5
- package/dist/components/data-entry/number-input.js +1 -0
- package/dist/components/data-entry/radio.js +0 -1
- package/dist/components/data-entry/search-select.d.ts +2 -4
- package/dist/components/data-entry/select.d.ts +11 -6
- package/dist/components/data-entry/select.js +4 -2
- package/dist/components/data-entry/switch.js +0 -1
- package/dist/components/data-entry/textarea.d.ts +10 -16
- package/dist/components/data-entry/time-picker.d.ts +3 -5
- package/dist/components/data-entry/upload-types.d.ts +1 -5
- package/dist/components/data-entry/use-upload-draft.d.ts +0 -4
- package/dist/components/feedback/dialog.d.ts +6 -15
- package/dist/components/feedback/overlay-header-tone.d.ts +1 -1
- package/dist/components/feedback/sheet.d.ts +3 -10
- package/dist/components/feedback/sheet.js +1 -1
- package/dist/components/feedback/sonner.js +2 -3
- package/dist/components/general/activity.d.ts +4 -30
- package/dist/components/general/button.js +1 -10
- package/dist/components/general/logo.d.ts +6 -28
- package/dist/components/general/reveal.d.ts +3 -9
- package/dist/components/general/typography.d.ts +1 -3
- package/dist/components/layout/account-chip.d.ts +8 -0
- package/dist/components/layout/account-chip.js +45 -0
- package/dist/components/layout/auth-divider.d.ts +2 -9
- package/dist/components/layout/auth-shell.d.ts +1 -14
- package/dist/components/layout/breadcrumb.d.ts +1 -5
- package/dist/components/layout/centered-shell.d.ts +4 -18
- package/dist/components/layout/error-surface.d.ts +11 -28
- package/dist/components/layout/error-surface.js +4 -1
- package/dist/components/layout/index.d.ts +2 -0
- package/dist/components/layout/index.js +2 -0
- package/dist/components/layout/legal-document-shell.d.ts +5 -28
- package/dist/components/layout/master-detail.d.ts +2 -18
- package/dist/components/layout/page-container.js +0 -1
- package/dist/components/layout/responsive-grid.d.ts +6 -1
- package/dist/components/layout/responsive-grid.js +9 -2
- package/dist/components/layout/service-role-panel.d.ts +7 -19
- package/dist/components/layout/sidebar.d.ts +5 -27
- package/dist/components/layout/sidebar.js +0 -1
- package/dist/components/layout/split-pane.d.ts +0 -7
- package/dist/components/layout/topbar.d.ts +1 -14
- package/dist/components/navigation/app-setting-picker.js +1 -3
- package/dist/components/navigation/filter-bar.d.ts +1 -6
- package/dist/components/navigation/pagination-utils.d.ts +2 -12
- package/dist/components/navigation/tabs-scroll.d.ts +2 -36
- package/dist/components/navigation/tabs.js +4 -8
- package/dist/components/query/data-state.d.ts +2 -2
- package/dist/components/ui/credential-reveal.d.ts +1 -4
- package/dist/components/ui/hover-card.d.ts +1 -2
- package/dist/components/ui/separator.d.ts +2 -15
- package/dist/components/ui/toggle-group.d.ts +1 -5
- package/dist/components/ui/toggle.d.ts +6 -31
- package/dist/email/brand-mark.d.ts +6 -34
- package/dist/email/color.d.ts +7 -17
- package/dist/email/geometry.d.ts +4 -8
- package/dist/email/index.d.ts +4 -48
- package/dist/email/inline-style.d.ts +3 -9
- package/dist/email/urgency.d.ts +2 -7
- package/dist/form/form-context.d.ts +2 -5
- package/dist/form/form-root.d.ts +1 -2
- package/dist/i18n/messages/en.json +4 -0
- package/dist/i18n/messages/ja.json +4 -0
- package/dist/i18n/messages/vi.json +4 -0
- package/dist/inertia/index.d.ts +2 -10
- package/dist/lib/control-styles.d.ts +10 -21
- package/dist/lib/control-styles.js +4 -6
- package/dist/lib/datetime/format-date.d.ts +1 -4
- package/dist/lib/field-a11y.d.ts +11 -68
- package/dist/lib/field-a11y.js +0 -1
- package/dist/lib/format.d.ts +4 -8
- package/dist/lib/hooks.d.ts +6 -12
- package/dist/lib/permission-grid.d.ts +3 -18
- package/dist/lib/query-error.d.ts +3 -3
- package/dist/props/components/app.prop.d.ts +15 -38
- package/dist/props/components/charts.prop.d.ts +2 -3
- package/dist/props/components/data-display.prop.d.ts +48 -72
- package/dist/props/components/data-entry.prop.d.ts +35 -40
- package/dist/props/components/form.prop.d.ts +2 -6
- package/dist/props/components/general.prop.d.ts +11 -27
- package/dist/props/components/layout.prop.d.ts +89 -260
- package/dist/props/components/navigation.prop.d.ts +27 -42
- package/dist/props/registry.d.ts +31 -0
- package/dist/props/registry.js +33 -0
- package/dist/props/vocabulary/data.prop.d.ts +18 -49
- package/dist/props/vocabulary/index.d.ts +1 -1
- package/dist/props/vocabulary/interaction.prop.d.ts +10 -12
- package/dist/props/vocabulary/layout.prop.d.ts +8 -30
- package/dist/props/vocabulary/shared.prop.d.ts +3 -2
- package/dist/styles/alert-layout.css +1 -32
- package/dist/styles/badge-layout.css +4 -18
- package/dist/styles/base.css +14 -113
- package/dist/styles/card-layout.css +6 -128
- package/dist/styles/chart-layout.css +2 -17
- package/dist/styles/control.css +380 -458
- package/dist/styles/core.css +21 -0
- package/dist/styles/data-display-layout.css +175 -94
- package/dist/styles/data-entry-layout.css +0 -45
- package/dist/styles/density.css +1 -30
- package/dist/styles/dialog-layout.css +5 -69
- package/dist/styles/focus-ring.css +13 -87
- package/dist/styles/fonts.css +1 -31
- package/dist/styles/form-layout.css +7 -91
- package/dist/styles/index.css +2 -20
- package/dist/styles/layout.css +38 -456
- package/dist/styles/logo-layout.css +1 -35
- package/dist/styles/motion.css +3 -42
- package/dist/styles/navigation-layout.css +3 -50
- package/dist/styles/shell-layout.css +37 -403
- package/dist/styles/table-layout.css +16 -274
- package/dist/styles/text-layout.css +7 -21
- package/dist/styles/toggle.css +1 -23
- package/dist/theme/dxs.canonical.css +1 -55
- package/dist/theme/example.service.css +1 -26
- package/dist/theme/famgia.service.css +5 -15
- package/dist/tokens/axes.css +3 -40
- package/dist/tokens/base.css +1 -4
- package/dist/tokens/components/activity.css +6 -42
- package/dist/tokens/components/badge.css +4 -13
- package/dist/tokens/components/banner.css +4 -9
- package/dist/tokens/components/card.css +32 -88
- package/dist/tokens/components/chart.css +9 -26
- package/dist/tokens/components/control.css +37 -222
- package/dist/tokens/components/data-display.css +28 -79
- package/dist/tokens/components/data-entry.css +5 -19
- package/dist/tokens/components/descriptions.css +7 -27
- package/dist/tokens/components/email.css +38 -84
- package/dist/tokens/components/error-surface.css +2 -18
- package/dist/tokens/components/feedback.css +27 -124
- package/dist/tokens/components/form.css +13 -45
- package/dist/tokens/components/legal-document.css +16 -41
- package/dist/tokens/components/list-row.css +11 -36
- package/dist/tokens/components/logo.css +2 -57
- package/dist/tokens/components/navigation.css +16 -94
- package/dist/tokens/components/scroll-area.css +2 -18
- package/dist/tokens/components/separator.css +8 -30
- package/dist/tokens/components/sheet.css +3 -14
- package/dist/tokens/components/shell.css +53 -307
- package/dist/tokens/components/sidebar.css +5 -22
- package/dist/tokens/components/table.css +19 -140
- package/dist/tokens/components/toggle.css +3 -65
- package/dist/tokens/components/upload.css +7 -43
- package/dist/tokens/foundation.css +108 -383
- package/dist/tokens/semantic/layout.css +33 -207
- package/docs/CANONICAL-CONTRACTS.md +206 -0
- package/docs/COMPONENTS.md +157 -0
- package/docs/COMPOSITION-VS-COMPONENT.md +105 -0
- package/docs/CONSUMER-RULES.md +14 -0
- package/docs/CUSTOMER-THEMING.md +162 -0
- package/docs/DATETIME.md +69 -0
- package/docs/DEVELOPMENT.md +173 -0
- package/docs/FORMS.md +143 -0
- package/docs/FRAME-A11Y-CI.md +267 -0
- package/docs/FRAME-COVERAGE-LEDGER.md +123 -0
- package/docs/FRAME-COVERAGE-REPORT.md +140 -0
- package/docs/FRAME-COVERAGE-STANDARD.md +65 -0
- package/docs/FRAME-COVERAGE.md +29 -0
- package/docs/PROPS-REGISTRY.md +61 -0
- package/docs/PROPS-VOCABULARY.md +100 -0
- package/docs/README.md +60 -0
- package/docs/REGISTRY.md +70 -0
- package/docs/SPACING.md +56 -0
- package/docs/STANDARDS-vocabulary-tokens.md +48 -0
- package/docs/TESTING.md +98 -0
- package/docs/TOKENS.md +347 -0
- package/docs/asset-modules.d.ts +46 -0
- package/docs/assets/cover-terrain.svg +6 -0
- package/docs/assets/portrait-amber.svg +5 -0
- package/docs/assets/portrait-clay.svg +5 -0
- package/docs/assets/portrait-indigo.svg +5 -0
- package/docs/assets/portrait-iris.svg +5 -0
- package/docs/assets/portrait-moss.svg +5 -0
- package/docs/assets/portrait-plum.svg +5 -0
- package/docs/assets/portrait-slate.svg +5 -0
- package/docs/charts/compact-bar-trend.tsx +328 -0
- package/docs/charts/size-tiers.tsx +192 -0
- package/docs/data-display/accordion.tsx +99 -0
- package/docs/data-display/avatar.tsx +355 -0
- package/docs/data-display/badge.tsx +247 -0
- package/docs/data-display/card/examples/detail-panel.tsx +106 -0
- package/docs/data-display/card/index.md +3 -0
- package/docs/data-display/card/index.tsx +285 -0
- package/docs/data-display/carousel.tsx +156 -0
- package/docs/data-display/charts.tsx +198 -0
- package/docs/data-display/code-block.tsx +90 -0
- package/docs/data-display/collapsible.tsx +162 -0
- package/docs/data-display/credential-reveal.tsx +145 -0
- package/docs/data-display/data-table/examples/approval-queue.tsx +212 -0
- package/docs/data-display/data-table/examples/grid-features.tsx +158 -0
- package/docs/data-display/data-table/examples/list-page.tsx +175 -0
- package/docs/data-display/data-table/index.md +5 -0
- package/docs/data-display/data-table/index.tsx +295 -0
- package/docs/data-display/descriptions.tsx +143 -0
- package/docs/data-display/empty-state.tsx +164 -0
- package/docs/data-display/hover-card.tsx +181 -0
- package/docs/data-display/list-row.tsx +420 -0
- package/docs/data-display/permission-matrix.tsx +184 -0
- package/docs/data-display/popover-touch.tsx +27 -0
- package/docs/data-display/popover.tsx +245 -0
- package/docs/data-display/progress.tsx +84 -0
- package/docs/data-display/prose.tsx +105 -0
- package/docs/data-display/qr-code.tsx +68 -0
- package/docs/data-display/scroll-area.tsx +271 -0
- package/docs/data-display/service-launcher-card.tsx +145 -0
- package/docs/data-display/stat-card.tsx +99 -0
- package/docs/data-display/table.tsx +251 -0
- package/docs/data-display/timeline.tsx +112 -0
- package/docs/data-display/touch-actions.tsx +36 -0
- package/docs/data-display/tree-list.tsx +107 -0
- package/docs/data-entry/branch-scope-picker.tsx +123 -0
- package/docs/data-entry/calendar.tsx +180 -0
- package/docs/data-entry/cascader.tsx +378 -0
- package/docs/data-entry/checkbox.tsx +256 -0
- package/docs/data-entry/color-picker.tsx +117 -0
- package/docs/data-entry/command-palette.tsx +179 -0
- package/docs/data-entry/command.tsx +262 -0
- package/docs/data-entry/country-picker-recipe.tsx +170 -0
- package/docs/data-entry/date-picker.tsx +191 -0
- package/docs/data-entry/date-range-picker.tsx +149 -0
- package/docs/data-entry/form/examples/employee-settings.tsx +267 -0
- package/docs/data-entry/form/examples/invoice-form.tsx +387 -0
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +240 -0
- package/docs/data-entry/form-field/examples/create-form.tsx +105 -0
- package/docs/data-entry/form-field/index.md +8 -0
- package/docs/data-entry/form-field/index.tsx +326 -0
- package/docs/data-entry/form-inertia.tsx +80 -0
- package/docs/data-entry/form-root.tsx +102 -0
- package/docs/data-entry/form.tsx +724 -0
- package/docs/data-entry/input-otp.tsx +231 -0
- package/docs/data-entry/input.tsx +114 -0
- package/docs/data-entry/label.tsx +100 -0
- package/docs/data-entry/month-picker.tsx +101 -0
- package/docs/data-entry/month-range-picker.tsx +115 -0
- package/docs/data-entry/number-input.tsx +240 -0
- package/docs/data-entry/password-input.tsx +106 -0
- package/docs/data-entry/password-strength.tsx +97 -0
- package/docs/data-entry/radio-group.tsx +95 -0
- package/docs/data-entry/rating.tsx +87 -0
- package/docs/data-entry/search-input.tsx +120 -0
- package/docs/data-entry/select-async-contracts.tsx +108 -0
- package/docs/data-entry/select-matrix.tsx +204 -0
- package/docs/data-entry/select.tsx +369 -0
- package/docs/data-entry/slider.tsx +130 -0
- package/docs/data-entry/switch.tsx +67 -0
- package/docs/data-entry/tag-input.tsx +108 -0
- package/docs/data-entry/textarea.tsx +209 -0
- package/docs/data-entry/time-picker.tsx +99 -0
- package/docs/data-entry/toggle-count.tsx +293 -0
- package/docs/data-entry/toggle-group.tsx +225 -0
- package/docs/data-entry/toggle.tsx +127 -0
- package/docs/data-entry/transfer.tsx +97 -0
- package/docs/data-entry/tree-select.tsx +204 -0
- package/docs/data-entry/upload.tsx +184 -0
- package/docs/feedback/alert-dialog.tsx +270 -0
- package/docs/feedback/alert.tsx +248 -0
- package/docs/feedback/banner.tsx +183 -0
- package/docs/feedback/danger-confirm.tsx +88 -0
- package/docs/feedback/dialog-touch.tsx +24 -0
- package/docs/feedback/dialog.tsx +193 -0
- package/docs/feedback/sheet.tsx +410 -0
- package/docs/feedback/skeleton.tsx +111 -0
- package/docs/feedback/toast.tsx +135 -0
- package/docs/feedback/tooltip.tsx +171 -0
- package/docs/feedback/two-factor-setup.tsx +68 -0
- package/docs/foundation/_email-specimen.ts +274 -0
- package/docs/foundation/colors.tsx +202 -0
- package/docs/foundation/density.tsx +232 -0
- package/docs/foundation/email-tokens.tsx +306 -0
- package/docs/foundation/radius-shadow.tsx +152 -0
- package/docs/foundation/spacing.tsx +211 -0
- package/docs/foundation/typography.tsx +147 -0
- package/docs/general/activity.tsx +224 -0
- package/docs/general/button/examples/destructive-confirm.tsx +90 -0
- package/docs/general/button/examples/form-actions.tsx +85 -0
- package/docs/general/button/examples/toolbar.tsx +160 -0
- package/docs/general/button/index.md +12 -0
- package/docs/general/button/index.tsx +211 -0
- package/docs/general/logo.tsx +131 -0
- package/docs/general/reveal.tsx +41 -0
- package/docs/general/typography.tsx +152 -0
- package/docs/layout/account-chip.tsx +72 -0
- package/docs/layout/admin-collection.tsx +122 -0
- package/docs/layout/app-shell.tsx +374 -0
- package/docs/layout/aspect-ratio.tsx +119 -0
- package/docs/layout/auth-account-summary.tsx +103 -0
- package/docs/layout/auth-divider.tsx +28 -0
- package/docs/layout/auth-footer.tsx +37 -0
- package/docs/layout/auth-identity.tsx +36 -0
- package/docs/layout/auth-recovery/examples/mfa-challenge.md +41 -0
- package/docs/layout/auth-recovery/examples/mfa-challenge.tsx +254 -0
- package/docs/layout/auth-recovery/examples/mobile-390.md +25 -0
- package/docs/layout/auth-recovery/examples/mobile-390.tsx +82 -0
- package/docs/layout/auth-recovery/examples/password-recovery.md +24 -0
- package/docs/layout/auth-recovery/examples/password-recovery.tsx +197 -0
- package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md +27 -0
- package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx +156 -0
- package/docs/layout/auth-recovery/index.md +140 -0
- package/docs/layout/auth-recovery/index.tsx +96 -0
- package/docs/layout/auth-shell-context.tsx +103 -0
- package/docs/layout/auth-shell-device.tsx +112 -0
- package/docs/layout/auth-shell-registration.tsx +335 -0
- package/docs/layout/auth-shell-variants.tsx +139 -0
- package/docs/layout/auth-shell.tsx +59 -0
- package/docs/layout/auth-stack.tsx +40 -0
- package/docs/layout/centered-shell.tsx +102 -0
- package/docs/layout/error-surface/examples/application-403.tsx +84 -0
- package/docs/layout/error-surface/examples/application-404.tsx +77 -0
- package/docs/layout/error-surface/examples/system-500.tsx +47 -0
- package/docs/layout/error-surface/examples/system-503.tsx +48 -0
- package/docs/layout/error-surface/index.md +153 -0
- package/docs/layout/error-surface/index.tsx +239 -0
- package/docs/layout/flex.tsx +262 -0
- package/docs/layout/legal-document-shell/_data.ts +110 -0
- package/docs/layout/legal-document-shell/examples/desktop-1440.md +12 -0
- package/docs/layout/legal-document-shell/examples/desktop-1440.tsx +83 -0
- package/docs/layout/legal-document-shell/examples/mobile-390.md +22 -0
- package/docs/layout/legal-document-shell/examples/mobile-390.tsx +70 -0
- package/docs/layout/legal-document-shell/examples/tablet-1024.md +3 -0
- package/docs/layout/legal-document-shell/examples/tablet-1024.tsx +84 -0
- package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md +18 -0
- package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx +61 -0
- package/docs/layout/legal-document-shell/index.md +51 -0
- package/docs/layout/legal-document-shell/index.tsx +101 -0
- package/docs/layout/master-detail.tsx +387 -0
- package/docs/layout/org-switcher.tsx +131 -0
- package/docs/layout/page-container.tsx +946 -0
- package/docs/layout/resizable-panel.tsx +419 -0
- package/docs/layout/responsive-grid.tsx +235 -0
- package/docs/layout/separator.tsx +327 -0
- package/docs/layout/service-role-panel.tsx +144 -0
- package/docs/layout/sidebar.tsx +586 -0
- package/docs/layout/split-pane.tsx +451 -0
- package/docs/layout/topbar.tsx +347 -0
- package/docs/navigation/app-setting-picker.tsx +141 -0
- package/docs/navigation/breadcrumb.tsx +128 -0
- package/docs/navigation/context-menu.tsx +117 -0
- package/docs/navigation/dropdown-menu.tsx +213 -0
- package/docs/navigation/filter-bar.tsx +227 -0
- package/docs/navigation/menubar.tsx +141 -0
- package/docs/navigation/navigation-menu.tsx +165 -0
- package/docs/navigation/pagination.tsx +241 -0
- package/docs/navigation/steps.tsx +263 -0
- package/docs/navigation/tabs-rtl.tsx +28 -0
- package/docs/navigation/tabs.tsx +308 -0
- package/docs/navigation/toolbar.tsx +339 -0
- package/docs/providers/app-provider.tsx +191 -0
- package/docs/providers/format-date.tsx +230 -0
- package/docs/query/button-refetch.tsx +160 -0
- package/docs/query/data-state.tsx +192 -0
- package/docs/query/infinite-query-state.tsx +93 -0
- package/docs/query/mutation-feedback.tsx +70 -0
- package/docs/query/prefetch-link.tsx +262 -0
- package/docs/query/touch-actions.tsx +68 -0
- package/docs/showcase/acme-portal.tsx +441 -0
- package/docs/showcase/acme-website.tsx +455 -0
- package/docs/showcase/case1-warehouse-dashboard.tsx +343 -0
- package/docs/showcase/case2-employee-me.tsx +441 -0
- package/docs/showcase/case3-approval-workflow.tsx +527 -0
- package/docs/showcase/case4-login.tsx +307 -0
- package/docs/showcase/case5-shift-calendar.tsx +795 -0
- package/docs/showcase/case6-agency-handy.tsx +1072 -0
- package/docs/showcase/futurelastic-web.tsx +390 -0
- package/docs/showcase/org-switcher.tsx +313 -0
- package/docs/showcase/permission-matrix.tsx +343 -0
- package/docs/showcase/public-landing.tsx +210 -0
- package/docs/showcase/settings-account-sections.tsx +559 -0
- package/docs/showcase/settings-security-mfa.tsx +145 -0
- package/docs/showcase/table-approval-queue.tsx +199 -0
- package/docs/showcase/table-bulk-actions.tsx +460 -0
- package/docs/showcase/table-compact-kintone.tsx +438 -0
- package/docs/showcase/table-conditional-format.tsx +367 -0
- package/docs/showcase/table-crud-list.tsx +544 -0
- package/docs/showcase/table-density.tsx +340 -0
- package/docs/showcase/table-expandable-rows.tsx +471 -0
- package/docs/showcase/table-filter-chips.tsx +461 -0
- package/docs/showcase/table-footer-totals.tsx +311 -0
- package/docs/showcase/table-grouped-subtotals.tsx +388 -0
- package/docs/showcase/table-master-detail.tsx +479 -0
- package/docs/showcase/table-pagination.tsx +320 -0
- package/docs/showcase/table-states.tsx +363 -0
- package/docs/showcase/table-sticky-columns.tsx +373 -0
- package/docs/showcase/table-tree-rows.tsx +444 -0
- package/docs/showcase/table-view-tabs.tsx +488 -0
- package/package.json +9 -11
- package/scripts/_agent-setup.mjs +16 -2
- package/scripts/audit-hook.mjs +3 -13
- package/scripts/init-agent-kit.mjs +1 -14
- package/scripts/postinstall.mjs +12 -12
- package/scripts/ui-audit.mjs +93 -31
- package/scripts/visual-audit-rules.mjs +51 -7
- 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
|
-
*
|
|
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
|
-
*
|
|
36
|
-
*
|
|
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
|
-
*
|
|
217
|
-
*
|
|
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
|
-
*
|
|
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
|
|
240
|
-
*
|
|
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
|
|
250
|
-
*
|
|
251
|
-
*
|
|
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.
|
|
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
|
-
*
|
|
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.
|
|
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. `¥`).
|
|
74
|
+
/** Leading affix inside the field (e.g. `¥`). */
|
|
76
75
|
prefix?: React.ReactNode;
|
|
77
|
-
/** Trailing affix inside the field (e.g. `%`).
|
|
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
|
-
*
|
|
111
|
-
*
|
|
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,21 +121,15 @@ 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
|
-
*
|
|
134
|
-
* {@link FormFieldProp.field} (below), so a field that already names its error key does not
|
|
135
|
-
* repeat itself.
|
|
124
|
+
* resolves its message from `errors[name]` automatically (an explicit `error` prop wins) and
|
|
125
|
+
* CLAIMS the key so `<FormErrors />` does not repeat it.
|
|
136
126
|
*/
|
|
137
127
|
name?: NameProp;
|
|
138
128
|
/**
|
|
139
|
-
*
|
|
140
|
-
*
|
|
141
|
-
* `
|
|
142
|
-
*
|
|
143
|
-
* Defaults to `name`, then `id` — which is why an app whose fields already carry a
|
|
144
|
-
* column-named `id` gets the attribute on every control without editing a single screen.
|
|
145
|
-
* Set it explicitly only where `id` is a DOM-uniqueness artefact rather than the field key
|
|
146
|
-
* (`id="source_slip_field"` for `field="source_slip_id"`).
|
|
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.
|
|
147
133
|
*/
|
|
148
134
|
field?: NameProp;
|
|
149
135
|
label: LabelProp;
|
|
@@ -288,8 +274,23 @@ export type FieldProp = {
|
|
|
288
274
|
};
|
|
289
275
|
/** @see Slider — numeric range (Radix Slider). */
|
|
290
276
|
export type SliderProp = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
|
|
291
|
-
/** @see Calendar — react-day-picker DayPicker. */
|
|
292
|
-
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
|
+
};
|
|
293
294
|
/** @see DatePicker */
|
|
294
295
|
export type DatePickerProp = FieldA11yProps & {
|
|
295
296
|
value?: ValueProp<Date>;
|
|
@@ -306,7 +307,7 @@ export type DatePickerProp = FieldA11yProps & {
|
|
|
306
307
|
toDate?: Date;
|
|
307
308
|
/** Show an inline ✕ to clear the value when one is set (default true). */
|
|
308
309
|
allowClear?: boolean;
|
|
309
|
-
}
|
|
310
|
+
} & Pick<CalendarFooterProp, "showToday" | "showClose">;
|
|
310
311
|
/** @see MonthPicker */
|
|
311
312
|
export type MonthPickerProp = FieldA11yProps & {
|
|
312
313
|
value?: ValueProp<Date>;
|
|
@@ -360,7 +361,7 @@ export type DateRangePickerProp = FieldA11yProps & {
|
|
|
360
361
|
toDate?: Date;
|
|
361
362
|
/** Show an inline ✕ to clear the range when one is set (default true). */
|
|
362
363
|
allowClear?: boolean;
|
|
363
|
-
}
|
|
364
|
+
} & Pick<CalendarFooterProp, "showToday" | "showClose">;
|
|
364
365
|
/** @see TimePicker — popover HH:mm picker (canonical 24h storage). */
|
|
365
366
|
export type TimePickerProp = FieldA11yProps & {
|
|
366
367
|
value?: ValueProp;
|
|
@@ -429,8 +430,7 @@ export type SearchSelectProp = {
|
|
|
429
430
|
/**
|
|
430
431
|
* Custom renderer for the SELECTED value shown on the trigger (Ant Design `labelRender`).
|
|
431
432
|
* Receives the value, the resolved label, and the full option when it is loaded (undefined for
|
|
432
|
-
* an async preset whose page hasn't arrived).
|
|
433
|
-
* placeholder still shows when empty. Overrides the default icon + label trigger content.
|
|
433
|
+
* an async preset whose page hasn't arrived).
|
|
434
434
|
*/
|
|
435
435
|
labelRender?: (selected: {
|
|
436
436
|
value: string;
|
|
@@ -458,7 +458,7 @@ export type SearchSelectProp = {
|
|
|
458
458
|
/**
|
|
459
459
|
* Read-only: the current value is shown (and the clear affordance hidden) but the popover cannot
|
|
460
460
|
* be opened — no new pick, no search. Mirrors the Input/NumberInput readOnly contract (stays
|
|
461
|
-
* focusable + submits its value, unlike `disabled`).
|
|
461
|
+
* focusable + submits its value, unlike `disabled`).
|
|
462
462
|
*/
|
|
463
463
|
readOnly?: boolean;
|
|
464
464
|
/** Trigger height tier — forwarded to the underlying Button. Default matches Button's own default. */
|
|
@@ -472,7 +472,7 @@ export type SearchSelectProp = {
|
|
|
472
472
|
/**
|
|
473
473
|
* Override the default client-side filter (`options` mode only — ignored with `loadOptions`,
|
|
474
474
|
* which is responsible for its own server-side filtering). Receives the option and the trimmed
|
|
475
|
-
* query; return true to keep the row.
|
|
475
|
+
* query; return true to keep the row.
|
|
476
476
|
*/
|
|
477
477
|
filterOption?: (option: SearchSelectOptionProp, query: string) => boolean;
|
|
478
478
|
/**
|
|
@@ -504,18 +504,13 @@ export type SearchSelectProp = {
|
|
|
504
504
|
"aria-invalid"?: boolean | "true" | "false";
|
|
505
505
|
"aria-required"?: boolean | "true" | "false";
|
|
506
506
|
"data-testid"?: string;
|
|
507
|
-
/**
|
|
507
|
+
/** Normally injected by `FormField`. */
|
|
508
508
|
"data-field"?: string;
|
|
509
509
|
};
|
|
510
510
|
/**
|
|
511
511
|
* Data-driven (Ant-style) form of {@link Select} — one component covering static `options` or
|
|
512
512
|
* async `loadOptions`, with `showSearch` toggling the searchable combobox vs a plain listbox.
|
|
513
513
|
* Passing `options`/`loadOptions` to `<Select>` switches it from the compound API to this one.
|
|
514
|
-
*
|
|
515
|
-
* `readOnly`/`size`/`open`/`onOpenChange`/`search`/`onSearchChange`/`filterOption`/`renderError`/
|
|
516
|
-
* `renderLoadMore` (inherited from {@link SearchSelectProp}) take effect ONLY in searchable mode
|
|
517
|
-
* (`showSearch` or `loadOptions`) — they configure the `SearchSelect` engine that mode delegates
|
|
518
|
-
* to. The plain listbox (no search) is a native Radix listbox and ignores them.
|
|
519
514
|
*/
|
|
520
515
|
export type SelectDataProp = SearchSelectProp & {
|
|
521
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.
|
|
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.
|
|
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`.
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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.
|
|
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.
|
|
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.
|
|
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;
|