@godxjp/ui 19.1.0 → 19.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +20 -14
- package/dist/components/data-display/badge.js +18 -4
- 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 +55 -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 +36 -1
- package/dist/props/registry.js +45 -1
- 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 +19 -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 +12 -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 +283 -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 +160 -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 +188 -0
- package/docs/data-display/popover-touch.tsx +27 -0
- package/docs/data-display/popover.tsx +246 -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 +303 -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 +175 -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 +330 -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 +102 -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 +420 -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 +204 -0
- package/docs/foundation/density.tsx +232 -0
- package/docs/foundation/email-tokens.tsx +323 -0
- package/docs/foundation/radius-shadow.tsx +154 -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 +135 -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 +266 -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 +954 -0
- package/docs/layout/resizable-panel.tsx +419 -0
- package/docs/layout/responsive-grid.tsx +243 -0
- package/docs/layout/separator.tsx +327 -0
- package/docs/layout/service-role-panel.tsx +144 -0
- package/docs/layout/sidebar.tsx +609 -0
- package/docs/layout/split-pane.tsx +468 -0
- package/docs/layout/topbar.tsx +349 -0
- package/docs/navigation/app-setting-picker.tsx +142 -0
- package/docs/navigation/breadcrumb.tsx +135 -0
- package/docs/navigation/context-menu.tsx +123 -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 +158 -0
- package/docs/navigation/pagination.tsx +241 -0
- package/docs/navigation/steps.tsx +265 -0
- package/docs/navigation/tabs-rtl.tsx +28 -0
- package/docs/navigation/tabs.tsx +314 -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 +455 -0
- package/docs/showcase/acme-website.tsx +461 -0
- package/docs/showcase/case1-warehouse-dashboard.tsx +359 -0
- package/docs/showcase/case2-employee-me.tsx +444 -0
- package/docs/showcase/case3-approval-workflow.tsx +529 -0
- package/docs/showcase/case4-login.tsx +313 -0
- package/docs/showcase/case5-shift-calendar.tsx +795 -0
- package/docs/showcase/case6-agency-handy.tsx +1113 -0
- package/docs/showcase/futurelastic-web.tsx +392 -0
- package/docs/showcase/org-switcher.tsx +313 -0
- package/docs/showcase/permission-matrix.tsx +346 -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 +347 -0
- package/docs/showcase/table-expandable-rows.tsx +480 -0
- package/docs/showcase/table-filter-chips.tsx +456 -0
- package/docs/showcase/table-footer-totals.tsx +314 -0
- package/docs/showcase/table-grouped-subtotals.tsx +391 -0
- package/docs/showcase/table-master-detail.tsx +484 -0
- package/docs/showcase/table-pagination.tsx +327 -0
- package/docs/showcase/table-states.tsx +366 -0
- package/docs/showcase/table-sticky-columns.tsx +376 -0
- package/docs/showcase/table-tree-rows.tsx +444 -0
- package/docs/showcase/table-view-tabs.tsx +488 -0
- package/package.json +9 -12
- 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
|
@@ -27,8 +27,7 @@ export declare const CarouselNext: React.ForwardRefExoticComponent<Omit<React.De
|
|
|
27
27
|
/**
|
|
28
28
|
* Dot indicators — one round dot per scroll snap, the active one widened + filled. Reads the Embla
|
|
29
29
|
* api from context (no `setApi` plumbing needed); each dot is a real `<button>` with an i18n
|
|
30
|
-
* accessible name and `aria-current` on the active slide, calling `scrollTo(i)`.
|
|
31
|
-
* `<Carousel>` after the track: `<CarouselContent/> … <CarouselDots/>`.
|
|
30
|
+
* accessible name and `aria-current` on the active slide, calling `scrollTo(i)`.
|
|
32
31
|
*/
|
|
33
32
|
export declare const CarouselDots: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
34
33
|
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { CodeBlockProp } from "../../props/components/data-display.prop.js";
|
|
3
|
+
export type { CodeBlockProp, CodeBlockProp as CodeBlockProps };
|
|
4
|
+
export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProp & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>, "ref">, keyof CodeBlockProp> & React.RefAttributes<HTMLPreElement>>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, ...rest }, ref) {
|
|
5
|
+
const scrolls = maxHeight !== "none" || !wrap;
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
"pre",
|
|
8
|
+
{
|
|
9
|
+
ref,
|
|
10
|
+
"data-slot": "code-block",
|
|
11
|
+
"data-wrap": wrap ? void 0 : "false",
|
|
12
|
+
"data-max-height": maxHeight === "none" ? void 0 : maxHeight,
|
|
13
|
+
"data-size": size === "sm" ? void 0 : size,
|
|
14
|
+
"data-language": language,
|
|
15
|
+
tabIndex: scrolls ? 0 : void 0,
|
|
16
|
+
className: cn("ui-code-block", className),
|
|
17
|
+
...rest,
|
|
18
|
+
children: /* @__PURE__ */ jsx("code", { children })
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
});
|
|
22
|
+
export {
|
|
23
|
+
CodeBlock
|
|
24
|
+
};
|
|
@@ -3,10 +3,9 @@ import { flexRender, type ColumnVisibilityState, type OnChangeFn, type Paginatio
|
|
|
3
3
|
import type { BreakpointProp, ColumnDefProp, DensityProp, SortStateProp, TablePresetProp } from "../../props/vocabulary/index.js";
|
|
4
4
|
export type Density = DensityProp;
|
|
5
5
|
/**
|
|
6
|
-
* Lean column definition — the simple, common-case column API. `render` shapes
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* lists the column in DataTable.ViewOptions. Adapted to a TanStack column internally.
|
|
6
|
+
* Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
|
|
7
|
+
* opts the column into the sort cycle; `align` / `width` / `pin` / `hiddenOnMobile` / `priority`
|
|
8
|
+
* tune layout; `enableHiding` (default true) lists the column in DataTable.ViewOptions.
|
|
10
9
|
*/
|
|
11
10
|
export type ColumnDef<T> = ColumnDefProp<T>;
|
|
12
11
|
interface DataTableProps<T> {
|
|
@@ -35,13 +34,8 @@ interface DataTableProps<T> {
|
|
|
35
34
|
columnVisibility?: ColumnVisibilityState;
|
|
36
35
|
onColumnVisibilityChange?: OnChangeFn<ColumnVisibilityState>;
|
|
37
36
|
/**
|
|
38
|
-
* Manual (server) flags. Default `false` so the simple `data`+`columns` case
|
|
39
|
-
*
|
|
40
|
-
* rows ONLY when engaged — a numbered `<DataTable.Pagination>` child is
|
|
41
|
-
* composed, or `pagination`/`onPaginationChange` is supplied; a plain table
|
|
42
|
-
* with neither renders every row (no silent 10-row cap, gh#270). Set the
|
|
43
|
-
* relevant flag `true` and drive the matching state from your query for
|
|
44
|
-
* server-side sort / filter / pagination.
|
|
37
|
+
* Manual (server) flags. Default `false` so the simple `data`+`columns` case sorts / filters
|
|
38
|
+
* in-browser with no extra wiring.
|
|
45
39
|
*/
|
|
46
40
|
manualSorting?: boolean;
|
|
47
41
|
manualFiltering?: boolean;
|
|
@@ -51,16 +45,14 @@ interface DataTableProps<T> {
|
|
|
51
45
|
/** Custom empty content when `data` is empty; defaults to a built-in EmptyState. */
|
|
52
46
|
empty?: React.ReactNode;
|
|
53
47
|
/**
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* Announced via `role="alert"`; precedence is loading → denied → error → empty → rows.
|
|
48
|
+
* `true` renders the built-in localized error message; any other node REPLACES it (e.g. an
|
|
49
|
+
* `Alert` carrying an error code + request id). Pass `undefined`/`false` when the read
|
|
50
|
+
* succeeded.
|
|
58
51
|
*/
|
|
59
52
|
error?: React.ReactNode;
|
|
60
53
|
/**
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
* so a 403 never offers a pointless retry.
|
|
54
|
+
* `true` renders the built-in localized "no access" message; any other node replaces it.
|
|
55
|
+
* Distinct from `error` so a 403 never offers a pointless retry.
|
|
64
56
|
*/
|
|
65
57
|
denied?: React.ReactNode;
|
|
66
58
|
/** Retry handler for the built-in `error` state; omit to hide the retry action. */
|
|
@@ -72,30 +64,16 @@ interface DataTableProps<T> {
|
|
|
72
64
|
/** Pin the header to the top while the body scrolls. Default true. */
|
|
73
65
|
stickyHeader?: boolean;
|
|
74
66
|
/**
|
|
75
|
-
* Named collection contract (gh#253) — the SAME preset the `Table` primitive owns, forwarded to
|
|
76
|
-
* the table DataTable renders, so a TanStack-driven queue gets the identical responsive contract.
|
|
77
67
|
* `"default"` (the default) emits no attribute and matches no selector: an existing DataTable is
|
|
78
|
-
* byte-identical. `
|
|
79
|
-
*
|
|
80
|
-
* measures (`--table-action-collection-*`) under `table-layout: fixed`, cells wrap, and the
|
|
81
|
-
* bordered surface drops its `--table-surface-min-inline-size` floor — so requester · target ·
|
|
82
|
-
* reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll.
|
|
83
|
-
* Mark each column with `priority` on its `ColumnDef`; DataTable stamps it on the `<th>` AND the
|
|
84
|
-
* `<td>` for you. The table stays a REAL table: no `display` change, no role rewriting, no card
|
|
85
|
-
* swap, so header association, `aria-sort` and screen-reader navigation are identical at 1440.
|
|
68
|
+
* byte-identical. Mark each column with `priority` on its `ColumnDef`; DataTable stamps it on
|
|
69
|
+
* the `<th>` AND the `<td>` for you.
|
|
86
70
|
*/
|
|
87
71
|
preset?: TablePresetProp;
|
|
88
|
-
/**
|
|
89
|
-
* Step at which `preset="action-collection"` switches to the compact priority measures, measured
|
|
90
|
-
* against the TABLE's own container (a container query), not the viewport — a table inside a
|
|
91
|
-
* master rail collapses before the page does. Default `"sm"`. Ignored while `preset` is
|
|
92
|
-
* `"default"`.
|
|
93
|
-
*/
|
|
72
|
+
/** Default `"sm"`. Ignored while `preset` is `"default"`. */
|
|
94
73
|
collapseBelow?: BreakpointProp;
|
|
95
74
|
/**
|
|
96
|
-
* Per-row className for state-based row tinting (e.g. flag an invalid or
|
|
97
|
-
*
|
|
98
|
-
* built-in hover/selected fills. Return `undefined` to leave a row unstyled.
|
|
75
|
+
* Per-row className for state-based row tinting (e.g. flag an invalid or empty record). Returned
|
|
76
|
+
* classes are appended last, so they win over the built-in hover/selected fills.
|
|
99
77
|
*/
|
|
100
78
|
rowClassName?: (row: T) => string | undefined;
|
|
101
79
|
className?: string;
|
|
@@ -212,7 +212,6 @@ function DataTable({
|
|
|
212
212
|
getRowId,
|
|
213
213
|
manualSorting,
|
|
214
214
|
manualFiltering,
|
|
215
|
-
// v8 disengaged pagination by withholding the row model; v9 has one static feature set, so
|
|
216
215
|
// "no pager on this table" is expressed the same way as "the server paginates" — leave the
|
|
217
216
|
// rows unsliced. Page count still derives from `rowCount`/the pre-paginated model either way.
|
|
218
217
|
manualPagination: manualPagination || !paginationEngaged,
|
|
@@ -610,7 +609,6 @@ DataTable.Content = function DataTableContent() {
|
|
|
610
609
|
))
|
|
611
610
|
] }, `skeleton-${i}`))
|
|
612
611
|
) : isDenied ? (
|
|
613
|
-
// DENIED (#216): the read was REFUSED, not failed — no retry is offered, because
|
|
614
612
|
// repeating a 403 cannot succeed. `warning` (not destructive) keeps it a policy
|
|
615
613
|
// statement rather than a system fault. Announced politely: a permission boundary
|
|
616
614
|
// is expected information, not an interruption.
|
|
@@ -633,7 +631,7 @@ DataTable.Content = function DataTableContent() {
|
|
|
633
631
|
}
|
|
634
632
|
) })
|
|
635
633
|
) : isError ? (
|
|
636
|
-
//
|
|
634
|
+
// Announced assertively (`role="alert"`) because the
|
|
637
635
|
// user's request did not complete — unlike empty/denied, which are states of the data
|
|
638
636
|
// itself. The role sits on an inner wrapper, never on the <td>: overriding a cell's
|
|
639
637
|
// role would strip it out of the table's grid semantics for AT.
|
|
@@ -6,12 +6,8 @@ export interface DescriptionsProps {
|
|
|
6
6
|
/** Label placement within each item. Default `vertical` (label over value). */
|
|
7
7
|
layout?: DescriptionsLayoutProp;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* name/email block above an editable role field, for example) can be told to match it. Applies
|
|
12
|
-
* only in `layout="horizontal"` — a vertical label sits above the value and end-aligning it
|
|
13
|
-
* there would read as a mistake, exactly like `Form`'s own contract. Default `"start"`, matching
|
|
14
|
-
* this component's historical unconditional start-align — no existing consumer's render changes.
|
|
9
|
+
* Applies only in `layout="horizontal"` — a vertical label sits above the value and end-aligning
|
|
10
|
+
* it there would read as a mistake, exactly like `Form`'s own contract.
|
|
15
11
|
*/
|
|
16
12
|
labelAlign?: "start" | "end";
|
|
17
13
|
className?: string;
|
|
@@ -47,7 +47,6 @@ Descriptions.Item = function DescriptionsItem({
|
|
|
47
47
|
layout === "horizontal" ? (
|
|
48
48
|
// Label beside value — a token-aligned label column so the values line up. The
|
|
49
49
|
// `--descriptions-label-width` / `--descriptions-label-gap` knobs align labels and set
|
|
50
|
-
// the label→value gap (rule #44/#45); a service that narrows the column usually wants
|
|
51
50
|
// to close the gap in the same step.
|
|
52
51
|
"grid grid-cols-[var(--descriptions-label-width)_minmax(0,1fr)] items-baseline gap-x-[var(--descriptions-label-gap)]"
|
|
53
52
|
) : (
|
|
@@ -67,7 +66,6 @@ Descriptions.Item = function DescriptionsItem({
|
|
|
67
66
|
className: cn(
|
|
68
67
|
"text-muted-foreground text-xs",
|
|
69
68
|
// `end`-align only ever applies in horizontal layout — same guard `Form` uses, so a
|
|
70
|
-
// vertical label (already above its value) never mistakenly end-aligns (gh#294).
|
|
71
69
|
endAlignedLabel && "text-end"
|
|
72
70
|
),
|
|
73
71
|
children: label
|
|
@@ -19,6 +19,10 @@ export type { ColumnDef, Density as TableDensity } from "./data-table.js";
|
|
|
19
19
|
export type { SortStateProp } from "../../props/vocabulary/index.js";
|
|
20
20
|
export { EmptyState } from "./empty-state.js";
|
|
21
21
|
export { Progress } from "./progress.js";
|
|
22
|
+
export { CodeBlock } from "./code-block.js";
|
|
23
|
+
export type { CodeBlockProp, CodeBlockProps } from "./code-block.js";
|
|
24
|
+
export { Prose } from "./prose.js";
|
|
25
|
+
export type { ProseProp, ProseProps } from "./prose.js";
|
|
22
26
|
export type { ProgressProps, ProgressTone } from "./progress.js";
|
|
23
27
|
export { TreeList } from "./tree-list.js";
|
|
24
28
|
export type { TreeListItem, TreeListProps } from "./tree-list.js";
|
|
@@ -25,6 +25,8 @@ import { Descriptions } from "./descriptions.js";
|
|
|
25
25
|
import { DataTable, flexRender } from "./data-table.js";
|
|
26
26
|
import { EmptyState } from "./empty-state.js";
|
|
27
27
|
import { Progress } from "./progress.js";
|
|
28
|
+
import { CodeBlock } from "./code-block.js";
|
|
29
|
+
import { Prose } from "./prose.js";
|
|
28
30
|
import { TreeList } from "./tree-list.js";
|
|
29
31
|
import { Timeline } from "./timeline.js";
|
|
30
32
|
import {
|
|
@@ -74,6 +76,7 @@ export {
|
|
|
74
76
|
CarouselItem,
|
|
75
77
|
CarouselNext,
|
|
76
78
|
CarouselPrevious,
|
|
79
|
+
CodeBlock,
|
|
77
80
|
Collapsible,
|
|
78
81
|
CollapsibleContent,
|
|
79
82
|
CollapsibleTrigger,
|
|
@@ -94,6 +97,7 @@ export {
|
|
|
94
97
|
PopoverTitle,
|
|
95
98
|
PopoverTrigger,
|
|
96
99
|
Progress,
|
|
100
|
+
Prose,
|
|
97
101
|
QrCode,
|
|
98
102
|
ScrollArea,
|
|
99
103
|
ScrollBar,
|
|
@@ -9,22 +9,8 @@ export type ListRowDensity = ListRowDensityProp;
|
|
|
9
9
|
/**
|
|
10
10
|
* ListRow — a single-line entity row (indicator · leading · title/description · trailing) for
|
|
11
11
|
* SHORT lists inside a Card: active sessions, API tokens, linked accounts, passkeys, MFA factors,
|
|
12
|
-
* invitations, notifications.
|
|
13
|
-
*
|
|
14
|
-
* DataTable is too heavy for a 2–4 item list, and nesting a Card per row would be card-in-card —
|
|
15
|
-
* ListRow is the in-between surface. Drop rows into a `<Card><CardContent flush>…` and they stack
|
|
16
|
-
* with a quiet divider; the trailing slot holds the row's action (Button / DropdownMenu / Switch).
|
|
17
|
-
*
|
|
18
|
-
* Overflow (#224): the content column always shrinks below its intrinsic width
|
|
19
|
-
* (`min-inline-size: min(--list-row-body-min-width, 100%)`) and the trailing actions wrap onto
|
|
20
|
-
* their own line at narrow container widths — a long title plus two Buttons never widens the page
|
|
21
|
-
* root. `overflow` picks how the long content resolves: `truncate` (default, one line + ellipsis)
|
|
22
|
-
* or `wrap` (multi-line, `overflow-wrap: anywhere`).
|
|
23
|
-
*
|
|
24
|
-
* Density (#246): `density="compact"` is the compact inline-actions geometry — tighter block
|
|
25
|
-
* padding/gap and a LOWER body threshold (`--list-row-compact-*`), so an avatar, the title and one
|
|
26
|
-
* or two small trailing Buttons stay on one line inside a ~326px card column at 390px. It only
|
|
27
|
-
* lowers thresholds, so the #224 wrap contract still holds.
|
|
12
|
+
* invitations, notifications. Use it INSTEAD of a hand-rolled `<div className="flex items-center
|
|
13
|
+
* justify-between border-b …">`.
|
|
28
14
|
*/
|
|
29
15
|
export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
30
16
|
/** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
|
|
@@ -44,12 +30,7 @@ export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
44
30
|
* with an ellipsis) or `wrap` (multi-line; long unbroken tokens break so the row never widens).
|
|
45
31
|
*/
|
|
46
32
|
overflow?: "truncate" | "wrap";
|
|
47
|
-
/**
|
|
48
|
-
* Row geometry — `default` (roomy entity row) or `compact` (#246): tighter block padding and
|
|
49
|
-
* column gap plus a lower body threshold, so a leading Avatar, the title/description and one or
|
|
50
|
-
* two small trailing Buttons stay INLINE inside a narrow card (≈326px content) at 390px, and a
|
|
51
|
-
* history Badge + date stays on the title's line. Retune per theme with `--list-row-compact-*`.
|
|
52
|
-
*/
|
|
33
|
+
/** Retune per theme with `--list-row-compact-*`. */
|
|
53
34
|
density?: ListRowDensity;
|
|
54
35
|
/**
|
|
55
36
|
* Read/unread state — renders the indicator dot (with localized `sr-only` text, never colour
|
|
@@ -2,25 +2,12 @@ import * as React from "react";
|
|
|
2
2
|
import type { PermissionMatrixProp } from "../../props/components/data-display.prop.js";
|
|
3
3
|
export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProp as PermissionMatrixProps, PermissionMatrixRoleProp, } from "../../props/components/data-display.prop.js";
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* the DataTable #216 vocabulary (`loading` → `denied` → `error` → `empty`, same precedence).
|
|
13
|
-
*
|
|
14
|
-
* - **Read-only by default.** Without `onGrantChange` (or with `readOnly`) cells are shape-encoded
|
|
15
|
-
* ✓/— (icon + `sr-only` text, never colour alone). With `onGrantChange` the cells become real
|
|
16
|
-
* `Checkbox` controls — except for roles marked `locked`, which keep the read-only cell and a
|
|
17
|
-
* lock badge.
|
|
18
|
-
* - **Compare mode** (`compare` + `diffOnly`) reuses `lib/permission-grid` verbatim: compared
|
|
19
|
-
* columns are tinted, differing rows carry a localized 差分 badge.
|
|
20
|
-
* - **Domain-neutral**: roles, permissions and grants all arrive via props; nothing about the
|
|
21
|
-
* consuming platform is encoded.
|
|
22
|
-
* - **Responsive**: the grid scrolls horizontally inside its own container below its natural
|
|
23
|
-
* measure (390px shows the sticky permission column + scrollable role columns); 1024/1440 render
|
|
24
|
-
* the full grid.
|
|
5
|
+
* With `onGrantChange` the cells become real `Checkbox` controls — except for roles marked
|
|
6
|
+
* `locked`, which keep the read-only cell and a lock badge. - **Compare mode** (`compare` +
|
|
7
|
+
* `diffOnly`) reuses `lib/permission-grid` verbatim: compared columns are tinted, differing rows
|
|
8
|
+
* carry a localized 差分 badge. - **Domain-neutral**: roles, permissions and grants all arrive via
|
|
9
|
+
* props; nothing about the consuming platform is encoded. - **Responsive**: the grid scrolls
|
|
10
|
+
* horizontally inside its own container below its natural measure (390px shows the sticky
|
|
11
|
+
* permission column + scrollable role columns); 1024/1440 render the full grid.
|
|
25
12
|
*/
|
|
26
13
|
export declare const PermissionMatrix: React.ForwardRefExoticComponent<PermissionMatrixProp & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -8,7 +8,7 @@ export type ProgressProps = {
|
|
|
8
8
|
* Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but
|
|
9
9
|
* gets a diagonal striped overlay + destructive tone, so an over-limit meter (e.g. 252% of a
|
|
10
10
|
* booked weight) is unmistakably different from a full (100%) one. `aria-valuetext` reports the
|
|
11
|
-
* real ratio.
|
|
11
|
+
* real ratio.
|
|
12
12
|
*/
|
|
13
13
|
over?: boolean;
|
|
14
14
|
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ProseProp } from "../../props/components/data-display.prop.js";
|
|
3
|
+
export type { ProseProp, ProseProp as ProseProps };
|
|
4
|
+
export declare const Prose: React.ForwardRefExoticComponent<ProseProp & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ProseProp> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
const Prose = React.forwardRef(function Prose2({ size = "md", imageSize = "fit", className, children, ...rest }, ref) {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
"div",
|
|
7
|
+
{
|
|
8
|
+
ref,
|
|
9
|
+
"data-slot": "prose",
|
|
10
|
+
"data-size": size === "md" ? void 0 : size,
|
|
11
|
+
"data-image-size": imageSize === "fit" ? void 0 : imageSize,
|
|
12
|
+
className: cn("ui-prose", className),
|
|
13
|
+
...rest,
|
|
14
|
+
children
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
});
|
|
18
|
+
export {
|
|
19
|
+
Prose
|
|
20
|
+
};
|
|
@@ -14,16 +14,9 @@ export interface ServiceLauncherCardProps extends Omit<React.HTMLAttributes<HTML
|
|
|
14
14
|
disabledReason?: React.ReactNode;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
|
-
* Token-owned launcher surface for an organization-scoped downstream service.
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* derives no entitlement, no launch URL and no disabled state of its own. `statusLabel`/
|
|
21
|
-
* `statusTone` are rendered verbatim, and the action's `disabled` state is the consumer's Button
|
|
22
|
-
* prop. The only thing derived from a prop is presentational: supplying `disabledReason` marks
|
|
23
|
-
* the tile `data-unavailable` so the token layer can drop the medallion's brand wash.
|
|
24
|
-
*
|
|
25
|
-
* Layout is NOT owned here: place tiles in `ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}` for
|
|
26
|
-
* the canonical 3 → 2 → 1 launcher grid (the grid queries its own container, never the viewport).
|
|
17
|
+
* Token-owned launcher surface for an organization-scoped downstream service. Consumers supply
|
|
18
|
+
* real status, metadata and actions; access is NEVER inferred — the component derives no
|
|
19
|
+
* entitlement, no launch URL and no disabled state of its own.
|
|
27
20
|
*/
|
|
28
21
|
export declare const ServiceLauncherCard: React.ForwardRefExoticComponent<ServiceLauncherCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
22
|
export interface ServiceCatalogCtaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
@@ -2,100 +2,44 @@ import * as React from "react";
|
|
|
2
2
|
import type { BreakpointProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
|
|
3
3
|
export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
|
|
4
4
|
/**
|
|
5
|
-
* Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a
|
|
6
|
-
*
|
|
7
|
-
* `scrollable-region-focusable`).
|
|
8
|
-
* region (e.g. `DataTable`, whose `.ui-data-table-scroll` owns the overflow + tab stop) — this
|
|
9
|
-
* avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
|
|
5
|
+
* Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
|
|
6
|
+
* wider than its container scrolls inside a keyboard-reachable wrapper (WCAG 2.1.1 / axe
|
|
7
|
+
* `scrollable-region-focusable`).
|
|
10
8
|
*/
|
|
11
9
|
scrollable?: boolean;
|
|
12
10
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* unreadable. Colour comes from the `--table-border-color` token (default `--border`).
|
|
17
|
-
* Default `false` emits nothing, keeping the plain table byte-identical.
|
|
11
|
+
* Reach for this whenever the table carries rowSpan/colSpan merged cells — without column rules
|
|
12
|
+
* the merge relationships are unreadable. Colour comes from the `--table-border-color` token
|
|
13
|
+
* (default `--border`).
|
|
18
14
|
*/
|
|
19
15
|
bordered?: boolean;
|
|
20
16
|
/**
|
|
21
17
|
* Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
|
|
22
|
-
* table exactly as it is.
|
|
23
|
-
* (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
|
|
24
|
-
* the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
|
|
25
|
-
* measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
|
|
26
|
-
* of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
|
|
27
|
-
* The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
|
|
28
|
-
* header association, `aria-sort` and screen-reader table navigation are identical at every width.
|
|
29
|
-
*
|
|
30
|
-
* Column-count ceiling (gh#262): the wrap-instead-of-scroll contract holds up to SIX columns.
|
|
31
|
-
* From seven, the priority shares cannot fit a phone frame, so below the step each column takes
|
|
32
|
-
* its rem floor (`--table-action-collection-*-width-floor`, ~5 CJK glyphs per line) and the
|
|
33
|
-
* table intentionally scrolls inside this wrapper — SC 1.4.10 permits one-dimensional scrolling
|
|
34
|
-
* of a data table; compressing further would shred CJK headers one character per line.
|
|
35
|
-
*
|
|
36
|
-
* `"stacked-record-collection"` (gh#293 restore — SCR-215) is for a wide, heterogeneous record
|
|
37
|
-
* table that CANNOT be squeezed into any fixed narrow-frame measure — an admin detail row with
|
|
38
|
-
* many disparate fields, not a dense queue. Below `collapseBelow` the `<thead>` hides and every
|
|
39
|
-
* `<tr>` becomes a bordered key-value card: each `TableCell`'s own `label` prop (its column's
|
|
40
|
-
* header text, repeated per cell since `<thead>` is gone) renders inline above the value. Above
|
|
41
|
-
* the step it renders as a byte-for-byte ordinary table — mark `label` on every `TableCell`.
|
|
18
|
+
* table exactly as it is.
|
|
42
19
|
*/
|
|
43
20
|
preset?: TablePresetProp;
|
|
44
|
-
/**
|
|
45
|
-
* Step at which `preset="action-collection"`/`"stacked-record-collection"` switch away from the
|
|
46
|
-
* ordinary table, measured against the TABLE's own container (not the viewport), so a table
|
|
47
|
-
* inside a rail collapses before the page does. Defaults to `"sm"` (40rem). Ignored while
|
|
48
|
-
* `preset` is `"default"`.
|
|
49
|
-
*/
|
|
21
|
+
/** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
|
|
50
22
|
collapseBelow?: BreakpointProp;
|
|
51
23
|
};
|
|
52
24
|
export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
|
|
53
25
|
/**
|
|
54
|
-
* Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a
|
|
55
|
-
*
|
|
56
|
-
* `scrollable-region-focusable`).
|
|
57
|
-
* region (e.g. `DataTable`, whose `.ui-data-table-scroll` owns the overflow + tab stop) — this
|
|
58
|
-
* avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
|
|
26
|
+
* Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
|
|
27
|
+
* wider than its container scrolls inside a keyboard-reachable wrapper (WCAG 2.1.1 / axe
|
|
28
|
+
* `scrollable-region-focusable`).
|
|
59
29
|
*/
|
|
60
30
|
scrollable?: boolean;
|
|
61
31
|
/**
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
* unreadable. Colour comes from the `--table-border-color` token (default `--border`).
|
|
66
|
-
* Default `false` emits nothing, keeping the plain table byte-identical.
|
|
32
|
+
* Reach for this whenever the table carries rowSpan/colSpan merged cells — without column rules
|
|
33
|
+
* the merge relationships are unreadable. Colour comes from the `--table-border-color` token
|
|
34
|
+
* (default `--border`).
|
|
67
35
|
*/
|
|
68
36
|
bordered?: boolean;
|
|
69
37
|
/**
|
|
70
38
|
* Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
|
|
71
|
-
* table exactly as it is.
|
|
72
|
-
* (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
|
|
73
|
-
* the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
|
|
74
|
-
* measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
|
|
75
|
-
* of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
|
|
76
|
-
* The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
|
|
77
|
-
* header association, `aria-sort` and screen-reader table navigation are identical at every width.
|
|
78
|
-
*
|
|
79
|
-
* Column-count ceiling (gh#262): the wrap-instead-of-scroll contract holds up to SIX columns.
|
|
80
|
-
* From seven, the priority shares cannot fit a phone frame, so below the step each column takes
|
|
81
|
-
* its rem floor (`--table-action-collection-*-width-floor`, ~5 CJK glyphs per line) and the
|
|
82
|
-
* table intentionally scrolls inside this wrapper — SC 1.4.10 permits one-dimensional scrolling
|
|
83
|
-
* of a data table; compressing further would shred CJK headers one character per line.
|
|
84
|
-
*
|
|
85
|
-
* `"stacked-record-collection"` (gh#293 restore — SCR-215) is for a wide, heterogeneous record
|
|
86
|
-
* table that CANNOT be squeezed into any fixed narrow-frame measure — an admin detail row with
|
|
87
|
-
* many disparate fields, not a dense queue. Below `collapseBelow` the `<thead>` hides and every
|
|
88
|
-
* `<tr>` becomes a bordered key-value card: each `TableCell`'s own `label` prop (its column's
|
|
89
|
-
* header text, repeated per cell since `<thead>` is gone) renders inline above the value. Above
|
|
90
|
-
* the step it renders as a byte-for-byte ordinary table — mark `label` on every `TableCell`.
|
|
39
|
+
* table exactly as it is.
|
|
91
40
|
*/
|
|
92
41
|
preset?: TablePresetProp;
|
|
93
|
-
/**
|
|
94
|
-
* Step at which `preset="action-collection"`/`"stacked-record-collection"` switch away from the
|
|
95
|
-
* ordinary table, measured against the TABLE's own container (not the viewport), so a table
|
|
96
|
-
* inside a rail collapses before the page does. Defaults to `"sm"` (40rem). Ignored while
|
|
97
|
-
* `preset` is `"default"`.
|
|
98
|
-
*/
|
|
42
|
+
/** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
|
|
99
43
|
collapseBelow?: BreakpointProp;
|
|
100
44
|
} & React.RefAttributes<HTMLTableElement>>;
|
|
101
45
|
export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
@@ -104,19 +48,15 @@ export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttribu
|
|
|
104
48
|
/**
|
|
105
49
|
* Column priority carried by BOTH the header cell and the body cells of a column. Read only by
|
|
106
50
|
* `Table preset="action-collection"` below its collapse step, where it selects the column's
|
|
107
|
-
* token-owned measure; unset columns take the remaining space.
|
|
108
|
-
* when supplied, so an ordinary table gains no attribute.
|
|
51
|
+
* token-owned measure; unset columns take the remaining space.
|
|
109
52
|
*/
|
|
110
53
|
type TableCellPriority = {
|
|
111
54
|
priority?: TableColumnPriorityProp;
|
|
112
55
|
};
|
|
113
56
|
/**
|
|
114
|
-
*
|
|
115
|
-
*
|
|
116
|
-
*
|
|
117
|
-
* visually present. Rendered into the DOM unconditionally (so it exists for the preset's CSS to
|
|
118
|
-
* reveal) but visually hidden above the collapse step, where the real `<th>` already carries the
|
|
119
|
-
* label — an ordinary table with no `label` prop supplied gains no extra markup.
|
|
57
|
+
* Rendered into the DOM unconditionally (so it exists for the preset's CSS to reveal) but visually
|
|
58
|
+
* hidden above the collapse step, where the real `<th>` already carries the label — an ordinary
|
|
59
|
+
* table with no `label` prop supplied gains no extra markup.
|
|
120
60
|
*/
|
|
121
61
|
type TableCellLabel = {
|
|
122
62
|
label?: React.ReactNode;
|
|
@@ -16,7 +16,6 @@ const Table = React.forwardRef(
|
|
|
16
16
|
// scrollable-region-focusable). No landmark role — avoids landmark-unique collisions.
|
|
17
17
|
// When `scrollable` is false an ancestor owns the scroll region, so this is a bare
|
|
18
18
|
// positioning box (no `overflow`, no tab stop) to avoid a redundant nested scroller.
|
|
19
|
-
// The preset adds ONE class (the container the collapse step is measured against) and the
|
|
20
19
|
// step attribute; with `preset="default"` neither is emitted, so the box is byte-identical.
|
|
21
20
|
/* @__PURE__ */ jsx(
|
|
22
21
|
"div",
|
|
@@ -49,7 +48,6 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => (
|
|
|
49
48
|
// "The last row draws no rule" is an idiom, not a service-tunable constant, so it is a CSS
|
|
50
49
|
// rule (`[data-slot="table-body"] .ui-table-row:last-child`) rather than a utility. That only
|
|
51
50
|
// works because TableRow's own bottom rule moved to `.ui-table-row` in the same layer: while
|
|
52
|
-
// the row carried a `border-b` UTILITY, no `components` rule could ever zero it (gh#412).
|
|
53
51
|
/* @__PURE__ */ jsx("tbody", { ref, "data-slot": "table-body", className: cn(className), ...props })
|
|
54
52
|
));
|
|
55
53
|
TableBody.displayName = "TableBody";
|
|
@@ -60,7 +58,6 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
60
58
|
className: cn(
|
|
61
59
|
// The row rule itself is `.ui-table-row` in table-layout.css (--table-row-border-width),
|
|
62
60
|
// NOT a `border-b` utility — a utility sits in `@layer utilities` and would outrank the
|
|
63
|
-
// `components` rule that has to zero it on the last row (gh#319).
|
|
64
61
|
"ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] transition-colors",
|
|
65
62
|
className
|
|
66
63
|
),
|
|
@@ -9,7 +9,7 @@ export type TimelineItem = {
|
|
|
9
9
|
note?: ReactNode;
|
|
10
10
|
/** Shorthand for `status: "current"`. `status` wins when both are set. */
|
|
11
11
|
current?: boolean;
|
|
12
|
-
/** Explicit 3-state. Resolves as `status ??
|
|
12
|
+
/** Explicit 3-state. Resolves as `status ?? */
|
|
13
13
|
status?: TimelineStatus;
|
|
14
14
|
/** Per-item glyph override; wins over the variant/status auto-glyph. */
|
|
15
15
|
icon?: LucideIcon;
|
|
@@ -17,10 +17,8 @@ export type TimelineItem = {
|
|
|
17
17
|
export type TimelineProps = {
|
|
18
18
|
items: TimelineItem[];
|
|
19
19
|
/**
|
|
20
|
-
* Rail glyph strategy. `icon` (default) keeps the legacy look (Plane for the
|
|
21
|
-
*
|
|
22
|
-
* (1,2,3…) and lets status drive colour only. `status` picks the glyph by
|
|
23
|
-
* status: done → check, current → filled dot, pending → the step number.
|
|
20
|
+
* Rail glyph strategy. `icon` (default) keeps the legacy look (Plane for the current step,
|
|
21
|
+
* CheckCircle2 otherwise).
|
|
24
22
|
*/
|
|
25
23
|
variant?: TimelineVariant;
|
|
26
24
|
};
|
|
@@ -2,25 +2,8 @@ import * as React from "react";
|
|
|
2
2
|
import type { BranchScopeValueProp } from "../../props/components/data-entry.prop.js";
|
|
3
3
|
export type { BranchScopeModeProp, BranchScopeOptionProp, BranchScopePickerProp, BranchScopePickerProp as BranchScopePickerProps, BranchScopeValueProp, } from "../../props/components/data-entry.prop.js";
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* A THIN formalized composition (the gh#251 lesson: a consumer cannot import a docs page): the
|
|
9
|
-
* mode switch is the real `RadioGroup`, the subset is the real `CheckboxGroup`, search is the real
|
|
10
|
-
* `SearchInput` — so keyboard behaviour (roving radios, Space on checkboxes) and the field-a11y
|
|
11
|
-
* contract (`aria-labelledby`/`aria-errormessage` via `FormField`) come from the primitives, not
|
|
12
|
-
* from new machinery. Domain data (the branches) is 100% consumer-supplied.
|
|
13
|
-
*
|
|
14
|
-
* - **Value** is a single controlled/uncontrolled object `{ mode, branchIds }`, so a form treats
|
|
15
|
-
* scope as ONE field. Switching back to `all` PRESERVES `branchIds` — an accidental mode flip
|
|
16
|
-
* must not destroy a curated subset.
|
|
17
|
-
* - **Validation** (`error`) renders the message and wires `aria-invalid`/`aria-errormessage` onto
|
|
18
|
-
* the radiogroup widget; collection READ failures are `listError`/`denied`, mirroring the
|
|
19
|
-
* DataTable #216 vocabulary (precedence `loading` → `denied` → `listError` → `empty`).
|
|
20
|
-
* - **`readOnly`** renders the current scope as a static summary (mode + branch badges) with no
|
|
21
|
-
* editable affordance; `disabled` keeps the controls visible but inert.
|
|
22
|
-
* - **Responsive**: a single-column stack; the branch list scrolls inside its own bounded box, so
|
|
23
|
-
* the control keeps one measure at 1440/1024/390.
|
|
5
|
+
* Domain data (the branches) is 100% consumer-supplied. - **Value** is a single
|
|
6
|
+
* controlled/uncontrolled object `{ mode, branchIds }`, so a form treats scope as ONE field.
|
|
24
7
|
*/
|
|
25
8
|
export declare const BranchScopePicker: React.ForwardRefExoticComponent<import("../../lib/field-a11y.js").FieldA11yProps & {
|
|
26
9
|
branches: readonly import("./branch-scope-picker.js").BranchScopeOptionProp[];
|
|
@@ -162,7 +162,6 @@ const BranchScopePicker = React.forwardRef(
|
|
|
162
162
|
// `disabled`) — WCAG 2.1.1 / axe `scrollable-region-focusable`; same contract as
|
|
163
163
|
// MasterDetail's bounded master region. It is an ordinary tab stop (no trap), and
|
|
164
164
|
// it carries the group's accessible name so the stop is announced meaningfully —
|
|
165
|
-
// the inner CheckboxGroup deliberately no longer duplicates that label.
|
|
166
165
|
/* @__PURE__ */ jsx(
|
|
167
166
|
"div",
|
|
168
167
|
{
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import type { CalendarProp } from "../../props/components/data-entry.prop.js";
|
|
2
|
-
export type { CalendarProp, CalendarProp as CalendarProps, } from "../../props/components/data-entry.prop.js";
|
|
3
|
-
export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, ...props }: CalendarProp):
|
|
3
|
+
export type { CalendarProp, CalendarProp as CalendarProps, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
|
|
4
|
+
export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;
|