@nadicodeai/ui 12.1.102 → 12.1.103
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/dist/components/accordion.d.ts +38 -12
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +36 -15
- package/dist/components/account-menu.js +2 -2
- package/dist/components/action-menu.d.ts +20 -19
- package/dist/components/action-menu.d.ts.map +1 -1
- package/dist/components/action-menu.js +22 -15
- package/dist/components/action-status.d.ts +14 -10
- package/dist/components/action-status.d.ts.map +1 -1
- package/dist/components/action-status.js +14 -10
- package/dist/components/activity-calendar.d.ts +3 -1
- package/dist/components/activity-calendar.d.ts.map +1 -1
- package/dist/components/activity-calendar.js +16 -2
- package/dist/components/activity-feed.d.ts +2 -2
- package/dist/components/activity-feed.d.ts.map +1 -1
- package/dist/components/activity-feed.js +14 -5
- package/dist/components/agent-card.d.ts +11 -5
- package/dist/components/agent-card.d.ts.map +1 -1
- package/dist/components/agent-card.js +13 -7
- package/dist/components/agent-list-row.js +1 -1
- package/dist/components/agent-orb-appearance.d.ts +7 -1
- package/dist/components/agent-orb-appearance.d.ts.map +1 -1
- package/dist/components/agent-orb-appearance.js +26 -0
- package/dist/components/agent-profile.d.ts +8 -7
- package/dist/components/agent-profile.d.ts.map +1 -1
- package/dist/components/agent-profile.js +6 -6
- package/dist/components/alert-dialog.d.ts +25 -16
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +30 -18
- package/dist/components/alert.d.ts +1 -1
- package/dist/components/avatar.d.ts +83 -17
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +89 -23
- package/dist/components/badge.d.ts +59 -8
- package/dist/components/badge.d.ts.map +1 -1
- package/dist/components/badge.js +57 -14
- package/dist/components/breadcrumb.d.ts +18 -7
- package/dist/components/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb.js +37 -13
- package/dist/components/button-group.d.ts +12 -15
- package/dist/components/button-group.d.ts.map +1 -1
- package/dist/components/button-group.js +13 -17
- package/dist/components/button.d.ts +126 -23
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +164 -39
- package/dist/components/calendar.d.ts +26 -15
- package/dist/components/calendar.d.ts.map +1 -1
- package/dist/components/calendar.js +60 -46
- package/dist/components/card-row.d.ts +13 -5
- package/dist/components/card-row.d.ts.map +1 -1
- package/dist/components/card-row.js +24 -10
- package/dist/components/card.d.ts +6 -12
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +11 -16
- package/dist/components/carousel.d.ts +3 -3
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +7 -7
- package/dist/components/catalog-drawer.d.ts +7 -7
- package/dist/components/catalog-drawer.d.ts.map +1 -1
- package/dist/components/catalog-drawer.js +6 -6
- package/dist/components/chart-area-stacked.d.ts +1 -1
- package/dist/components/chart-area-stacked.d.ts.map +1 -1
- package/dist/components/chart-area-stacked.js +4 -4
- package/dist/components/chart-axis.d.ts +14 -1
- package/dist/components/chart-axis.d.ts.map +1 -1
- package/dist/components/chart-axis.js +11 -1
- package/dist/components/chart-bar-horizontal.d.ts +2 -2
- package/dist/components/chart-bar-horizontal.d.ts.map +1 -1
- package/dist/components/chart-bar-horizontal.js +14 -5
- package/dist/components/chart-bar-multiple.d.ts +1 -1
- package/dist/components/chart-bar-multiple.d.ts.map +1 -1
- package/dist/components/chart-bar-multiple.js +3 -3
- package/dist/components/chart-bar-stacked.d.ts +1 -1
- package/dist/components/chart-bar-stacked.d.ts.map +1 -1
- package/dist/components/chart-bar-stacked.js +3 -3
- package/dist/components/chart-card.d.ts +17 -6
- package/dist/components/chart-card.d.ts.map +1 -1
- package/dist/components/chart-card.js +11 -4
- package/dist/components/chart-date-range-control.d.ts +18 -9
- package/dist/components/chart-date-range-control.d.ts.map +1 -1
- package/dist/components/chart-date-range-control.js +43 -47
- package/dist/components/chart-sparkline.d.ts +4 -3
- package/dist/components/chart-sparkline.d.ts.map +1 -1
- package/dist/components/chart-sparkline.js +6 -5
- package/dist/components/check-counts.d.ts +44 -0
- package/dist/components/check-counts.d.ts.map +1 -0
- package/dist/components/check-counts.js +51 -0
- package/dist/components/checkbox.d.ts +39 -11
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +38 -11
- package/dist/components/choicebox.d.ts +96 -0
- package/dist/components/choicebox.d.ts.map +1 -0
- package/dist/components/choicebox.js +113 -0
- package/dist/components/clearable-input.d.ts +57 -0
- package/dist/components/clearable-input.d.ts.map +1 -0
- package/dist/components/clearable-input.js +58 -0
- package/dist/components/code-block.d.ts +77 -17
- package/dist/components/code-block.d.ts.map +1 -1
- package/dist/components/code-block.js +85 -15
- package/dist/components/collapsible.d.ts +27 -10
- package/dist/components/collapsible.d.ts.map +1 -1
- package/dist/components/collapsible.js +24 -9
- package/dist/components/collection-filters.d.ts +3 -1
- package/dist/components/collection-filters.d.ts.map +1 -1
- package/dist/components/collection-filters.js +7 -9
- package/dist/components/collection-page.d.ts +31 -10
- package/dist/components/collection-page.d.ts.map +1 -1
- package/dist/components/collection-page.js +14 -13
- package/dist/components/collection-search.d.ts +32 -10
- package/dist/components/collection-search.d.ts.map +1 -1
- package/dist/components/collection-search.js +24 -13
- package/dist/components/collection-sort.d.ts.map +1 -1
- package/dist/components/collection-sort.js +2 -2
- package/dist/components/collection-toolbar.d.ts +5 -2
- package/dist/components/collection-toolbar.d.ts.map +1 -1
- package/dist/components/collection-toolbar.js +7 -4
- package/dist/components/combobox.d.ts +97 -22
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +80 -28
- package/dist/components/command.d.ts +34 -21
- package/dist/components/command.d.ts.map +1 -1
- package/dist/components/command.js +33 -25
- package/dist/components/confirm-dialog.d.ts +23 -6
- package/dist/components/confirm-dialog.d.ts.map +1 -1
- package/dist/components/confirm-dialog.js +32 -13
- package/dist/components/context-menu.d.ts +14 -10
- package/dist/components/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu.js +17 -12
- package/dist/components/copy-button.d.ts +5 -2
- package/dist/components/copy-button.d.ts.map +1 -1
- package/dist/components/copy-button.js +16 -8
- package/dist/components/data-table.d.ts +120 -54
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +163 -92
- package/dist/components/desktop-shell.d.ts +4 -2
- package/dist/components/desktop-shell.d.ts.map +1 -1
- package/dist/components/desktop-shell.js +3 -3
- package/dist/components/dialog.d.ts +63 -24
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +52 -31
- package/dist/components/disclosure-row.d.ts +1 -2
- package/dist/components/disclosure-row.d.ts.map +1 -1
- package/dist/components/disclosure-row.js +1 -2
- package/dist/components/disclosure.d.ts +1 -1
- package/dist/components/disclosure.js +1 -1
- package/dist/components/drawer.d.ts +33 -12
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +47 -35
- package/dist/components/dropdown-menu.d.ts +59 -14
- package/dist/components/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu.js +58 -26
- package/dist/components/empty-state.d.ts +35 -12
- package/dist/components/empty-state.d.ts.map +1 -1
- package/dist/components/empty-state.js +35 -17
- package/dist/components/entry-scene.d.ts +4 -4
- package/dist/components/entry-scene.d.ts.map +1 -1
- package/dist/components/entry-scene.js +2 -2
- package/dist/components/field.d.ts +44 -14
- package/dist/components/field.d.ts.map +1 -1
- package/dist/components/field.js +49 -20
- package/dist/components/file-diff.d.ts.map +1 -1
- package/dist/components/file-diff.js +3 -4
- package/dist/components/form-dialog.d.ts +7 -7
- package/dist/components/form-dialog.d.ts.map +1 -1
- package/dist/components/form-dialog.js +13 -11
- package/dist/components/form-drawer.d.ts +10 -7
- package/dist/components/form-drawer.d.ts.map +1 -1
- package/dist/components/form-drawer.js +11 -10
- package/dist/components/gauge.d.ts +64 -0
- package/dist/components/gauge.d.ts.map +1 -0
- package/dist/components/gauge.js +73 -0
- package/dist/components/hover-card.d.ts +72 -14
- package/dist/components/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card.js +51 -17
- package/dist/components/identity-mark.d.ts +8 -1
- package/dist/components/identity-mark.d.ts.map +1 -1
- package/dist/components/identity-mark.js +31 -5
- package/dist/components/input-group.d.ts +44 -21
- package/dist/components/input-group.d.ts.map +1 -1
- package/dist/components/input-group.js +74 -27
- package/dist/components/input.d.ts +64 -12
- package/dist/components/input.d.ts.map +1 -1
- package/dist/components/input.js +51 -15
- package/dist/components/item.d.ts +37 -15
- package/dist/components/item.d.ts.map +1 -1
- package/dist/components/item.js +41 -22
- package/dist/components/kbd.d.ts +49 -13
- package/dist/components/kbd.d.ts.map +1 -1
- package/dist/components/kbd.js +115 -16
- package/dist/components/kpi-card.d.ts +12 -4
- package/dist/components/kpi-card.d.ts.map +1 -1
- package/dist/components/kpi-card.js +13 -4
- package/dist/components/label.d.ts +17 -10
- package/dist/components/label.d.ts.map +1 -1
- package/dist/components/label.js +18 -11
- package/dist/components/library-shelf.d.ts +6 -6
- package/dist/components/library-shelf.d.ts.map +1 -1
- package/dist/components/library-shelf.js +5 -5
- package/dist/components/load-more-button.d.ts +35 -0
- package/dist/components/load-more-button.d.ts.map +1 -0
- package/dist/components/load-more-button.js +26 -0
- package/dist/components/message-notice.d.ts +8 -13
- package/dist/components/message-notice.d.ts.map +1 -1
- package/dist/components/message-notice.js +25 -22
- package/dist/components/middle-truncate.d.ts +33 -0
- package/dist/components/middle-truncate.d.ts.map +1 -0
- package/dist/components/middle-truncate.js +72 -0
- package/dist/components/multi-select.d.ts +94 -0
- package/dist/components/multi-select.d.ts.map +1 -0
- package/dist/components/multi-select.js +132 -0
- package/dist/components/native-select.d.ts +37 -13
- package/dist/components/native-select.d.ts.map +1 -1
- package/dist/components/native-select.js +27 -11
- package/dist/components/notice-banner.d.ts +17 -10
- package/dist/components/notice-banner.d.ts.map +1 -1
- package/dist/components/notice-banner.js +12 -11
- package/dist/components/numbered-steps.d.ts +10 -4
- package/dist/components/numbered-steps.d.ts.map +1 -1
- package/dist/components/numbered-steps.js +9 -7
- package/dist/components/object-page.d.ts +40 -14
- package/dist/components/object-page.d.ts.map +1 -1
- package/dist/components/object-page.js +12 -10
- package/dist/components/object-workspace.d.ts +29 -10
- package/dist/components/object-workspace.d.ts.map +1 -1
- package/dist/components/object-workspace.js +18 -8
- package/dist/components/overview-page.d.ts +2 -2
- package/dist/components/overview-page.d.ts.map +1 -1
- package/dist/components/overview-page.js +8 -7
- package/dist/components/page-actions.d.ts +28 -8
- package/dist/components/page-actions.d.ts.map +1 -1
- package/dist/components/page-actions.js +22 -25
- package/dist/components/page-header.d.ts +11 -4
- package/dist/components/page-header.d.ts.map +1 -1
- package/dist/components/page-header.js +10 -5
- package/dist/components/pending-label.d.ts +6 -5
- package/dist/components/pending-label.d.ts.map +1 -1
- package/dist/components/pending-label.js +14 -6
- package/dist/components/picture-label.d.ts +2 -2
- package/dist/components/picture-label.d.ts.map +1 -1
- package/dist/components/picture-label.js +3 -3
- package/dist/components/portal-sidebar-frame.d.ts +9 -21
- package/dist/components/portal-sidebar-frame.d.ts.map +1 -1
- package/dist/components/portal-sidebar-frame.js +13 -27
- package/dist/components/progress-checklist.d.ts +46 -0
- package/dist/components/progress-checklist.d.ts.map +1 -0
- package/dist/components/progress-checklist.js +46 -0
- package/dist/components/progress.d.ts +48 -8
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +92 -16
- package/dist/components/prose.d.ts +19 -0
- package/dist/components/prose.d.ts.map +1 -0
- package/dist/components/prose.js +29 -0
- package/dist/components/radio-group.d.ts +51 -12
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +42 -12
- package/dist/components/reading-column.js +1 -1
- package/dist/components/record-identity.d.ts +6 -5
- package/dist/components/record-identity.d.ts.map +1 -1
- package/dist/components/record-identity.js +12 -3
- package/dist/components/record-list.d.ts +117 -27
- package/dist/components/record-list.d.ts.map +1 -1
- package/dist/components/record-list.js +185 -55
- package/dist/components/record-time.d.ts +20 -7
- package/dist/components/record-time.d.ts.map +1 -1
- package/dist/components/record-time.js +38 -19
- package/dist/components/resizable.d.ts +7 -5
- package/dist/components/resizable.d.ts.map +1 -1
- package/dist/components/resizable.js +6 -6
- package/dist/components/scope-switcher.d.ts +2 -0
- package/dist/components/scope-switcher.d.ts.map +1 -1
- package/dist/components/scope-switcher.js +2 -2
- package/dist/components/scroll-area.d.ts +47 -11
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +72 -14
- package/dist/components/segmented-control.d.ts +82 -0
- package/dist/components/segmented-control.d.ts.map +1 -0
- package/dist/components/segmented-control.js +90 -0
- package/dist/components/select.d.ts +55 -15
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +62 -19
- package/dist/components/separator.d.ts +12 -5
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +11 -6
- package/dist/components/settings-facts.d.ts +34 -14
- package/dist/components/settings-facts.d.ts.map +1 -1
- package/dist/components/settings-facts.js +21 -12
- package/dist/components/settings-page.d.ts +4 -4
- package/dist/components/settings-page.js +5 -5
- package/dist/components/settings-section.d.ts +160 -34
- package/dist/components/settings-section.d.ts.map +1 -1
- package/dist/components/settings-section.js +92 -39
- package/dist/components/sheet.d.ts +47 -16
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +40 -19
- package/dist/components/sidebar-sections.d.ts +16 -12
- package/dist/components/sidebar-sections.d.ts.map +1 -1
- package/dist/components/sidebar-sections.js +30 -15
- package/dist/components/sidebar.d.ts +117 -21
- package/dist/components/sidebar.d.ts.map +1 -1
- package/dist/components/sidebar.js +180 -55
- package/dist/components/skeleton.d.ts +54 -8
- package/dist/components/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton.js +44 -9
- package/dist/components/slider.d.ts +53 -11
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +71 -17
- package/dist/components/snippet.d.ts +57 -0
- package/dist/components/snippet.d.ts.map +1 -0
- package/dist/components/snippet.js +60 -0
- package/dist/components/sonner.d.ts +13 -14
- package/dist/components/sonner.d.ts.map +1 -1
- package/dist/components/sonner.js +25 -22
- package/dist/components/status-badge.d.ts +37 -11
- package/dist/components/status-badge.d.ts.map +1 -1
- package/dist/components/status-badge.js +63 -15
- package/dist/components/status-dot.d.ts +42 -11
- package/dist/components/status-dot.d.ts.map +1 -1
- package/dist/components/status-dot.js +40 -11
- package/dist/components/switch.d.ts +43 -12
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +42 -12
- package/dist/components/table-card.d.ts +21 -12
- package/dist/components/table-card.d.ts.map +1 -1
- package/dist/components/table-card.js +17 -9
- package/dist/components/table-layouts.d.ts +40 -8
- package/dist/components/table-layouts.d.ts.map +1 -1
- package/dist/components/table-layouts.js +52 -8
- package/dist/components/table-value.d.ts +4 -3
- package/dist/components/table-value.d.ts.map +1 -1
- package/dist/components/table-value.js +6 -5
- package/dist/components/table.d.ts +62 -25
- package/dist/components/table.d.ts.map +1 -1
- package/dist/components/table.js +62 -26
- package/dist/components/tabs.d.ts +86 -17
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +93 -22
- package/dist/components/text-link.d.ts +4 -1
- package/dist/components/text-link.d.ts.map +1 -1
- package/dist/components/text-link.js +4 -1
- package/dist/components/text-with-copy-button.d.ts +30 -0
- package/dist/components/text-with-copy-button.d.ts.map +1 -0
- package/dist/components/text-with-copy-button.js +32 -0
- package/dist/components/textarea.d.ts +40 -10
- package/dist/components/textarea.d.ts.map +1 -1
- package/dist/components/textarea.js +50 -11
- package/dist/components/theme-mode-switcher.d.ts +18 -1
- package/dist/components/theme-mode-switcher.d.ts.map +1 -1
- package/dist/components/theme-mode-switcher.js +20 -2
- package/dist/components/toggle-group.d.ts +28 -8
- package/dist/components/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group.js +12 -6
- package/dist/components/toggle.d.ts +6 -3
- package/dist/components/toggle.d.ts.map +1 -1
- package/dist/components/toggle.js +10 -7
- package/dist/components/tooltip.d.ts +43 -12
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +45 -16
- package/dist/components/trend-badge.js +1 -1
- package/dist/components/update-card.js +1 -1
- package/dist/eslint/index.js +82 -0
- package/dist/eslint/rules/badge-is-static-label.js +93 -0
- package/dist/eslint/rules/button-icon-slot.js +102 -0
- package/dist/eslint/rules/button-link-for-navigation.js +146 -0
- package/dist/eslint/rules/button-no-aria-label-with-text.js +75 -0
- package/dist/eslint/rules/button-type-roles-only-in-buttons.js +83 -0
- package/dist/eslint/rules/choice-control-has-a-name.js +98 -0
- package/dist/eslint/rules/choice-group-in-fieldset.js +86 -0
- package/dist/eslint/rules/command-shortcut-single-owner.js +118 -0
- package/dist/eslint/rules/confirm-dialog-words.js +63 -0
- package/dist/eslint/rules/data-table-one-unsized-column.js +96 -0
- package/dist/eslint/rules/destructive-action-placement.js +69 -0
- package/dist/eslint/rules/disabled-choice-says-why.js +71 -0
- package/dist/eslint/rules/ellipsis-opens-a-dialog.js +110 -0
- package/dist/eslint/rules/input-group-owners.js +155 -0
- package/dist/eslint/rules/kbd-children-no-modifier-text.js +128 -0
- package/dist/eslint/rules/literal-text.js +41 -0
- package/dist/eslint/rules/middle-truncate-placement.js +69 -0
- package/dist/eslint/rules/no-bare-button-label.js +55 -0
- package/dist/eslint/rules/no-control-in-read-only-surface.js +106 -0
- package/dist/eslint/rules/no-hand-built-busy.js +104 -0
- package/dist/eslint/rules/no-hand-built-theme-picker.js +144 -0
- package/dist/eslint/rules/no-hand-built-tile.js +41 -0
- package/dist/eslint/rules/no-hand-formatted-date.js +87 -0
- package/dist/eslint/rules/no-hand-stacked-avatars.js +67 -0
- package/dist/eslint/rules/no-nested-collapse.js +60 -0
- package/dist/eslint/rules/no-search-in-form.js +47 -0
- package/dist/eslint/rules/no-shadcn-appearance-override.js +2 -16
- package/dist/eslint/rules/no-shell-prompt-in-snippet.js +74 -0
- package/dist/eslint/rules/no-stock-error-words.js +56 -0
- package/dist/eslint/rules/no-tooltip-around-labelled-field.js +72 -0
- package/dist/eslint/rules/no-weight-class-on-strong-in-type-role.js +57 -0
- package/dist/eslint/rules/one-submenu-level.js +43 -0
- package/dist/eslint/rules/one-toast-per-flow.js +91 -0
- package/dist/eslint/rules/option-count.js +167 -0
- package/dist/eslint/rules/page-command-link-not-render.js +43 -0
- package/dist/eslint/rules/progress-needs-name.js +57 -0
- package/dist/eslint/rules/settings-limit-in-footer.js +94 -0
- package/dist/eslint/rules/skeleton-in-region.js +80 -0
- package/dist/eslint/rules/sortable-heading-uses-sort.js +79 -0
- package/dist/eslint/rules/table-cell-inset-owner.js +107 -0
- package/dist/eslint/rules/tabs-selection-is-controlled.js +47 -0
- package/dist/eslint/rules/tooltip-only-arrow.js +38 -0
- package/dist/eslint/rules/tooltip-trigger-accessible-name.js +114 -0
- package/dist/eslint/strict-design-system.js +21 -7
- package/dist/index.d.ts +13 -13
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -13
- package/dist/internal/assistant-ui/attachment.d.ts.map +1 -1
- package/dist/internal/assistant-ui/attachment.js +2 -2
- package/dist/internal/assistant-ui/reasoning.d.ts +1 -1
- package/dist/internal/assistant-ui/reasoning.d.ts.map +1 -1
- package/dist/internal/assistant-ui/tool-fallback.js +1 -1
- package/dist/internal/assistant-ui/tool-group.d.ts +1 -1
- package/dist/internal/assistant-ui/tool-group.d.ts.map +1 -1
- package/dist/internal/assistant-ui/tooltip-icon-button.d.ts +2 -3
- package/dist/internal/assistant-ui/tooltip-icon-button.d.ts.map +1 -1
- package/dist/internal/assistant-ui/tooltip-icon-button.js +1 -1
- package/dist/internal/catalog-list.js +2 -2
- package/dist/internal/collection-note.d.ts +23 -0
- package/dist/internal/collection-note.d.ts.map +1 -0
- package/dist/internal/collection-note.js +17 -0
- package/dist/internal/collection-rail.d.ts +57 -0
- package/dist/internal/collection-rail.d.ts.map +1 -0
- package/dist/internal/collection-rail.js +33 -0
- package/dist/internal/company-logo.d.ts +18 -0
- package/dist/internal/company-logo.d.ts.map +1 -0
- package/dist/internal/company-logo.js +14 -0
- package/dist/internal/control-name.d.ts +12 -0
- package/dist/internal/control-name.d.ts.map +1 -0
- package/dist/internal/control-name.js +1 -0
- package/dist/internal/diff-line.d.ts +9 -0
- package/dist/internal/diff-line.d.ts.map +1 -0
- package/dist/internal/diff-line.js +8 -0
- package/dist/internal/empty.d.ts +8 -4
- package/dist/internal/empty.d.ts.map +1 -1
- package/dist/internal/empty.js +14 -8
- package/dist/internal/field-frame.d.ts +33 -0
- package/dist/internal/field-frame.d.ts.map +1 -0
- package/dist/internal/field-frame.js +20 -0
- package/dist/internal/final-focus.d.ts +8 -0
- package/dist/internal/final-focus.d.ts.map +1 -0
- package/dist/internal/final-focus.js +10 -0
- package/dist/internal/footer-strip.d.ts.map +1 -1
- package/dist/internal/footer-strip.js +3 -1
- package/dist/internal/form-submit.d.ts +9 -5
- package/dist/internal/form-submit.d.ts.map +1 -1
- package/dist/internal/form-submit.js +31 -2
- package/dist/internal/input-box.d.ts +26 -0
- package/dist/internal/input-box.d.ts.map +1 -0
- package/dist/internal/input-box.js +59 -0
- package/dist/internal/menu-surface.d.ts +10 -3
- package/dist/internal/menu-surface.d.ts.map +1 -1
- package/dist/internal/menu-surface.js +10 -3
- package/dist/internal/notice.d.ts +25 -0
- package/dist/internal/notice.d.ts.map +1 -0
- package/dist/internal/notice.js +33 -0
- package/dist/internal/overlay-stem.d.ts +5 -0
- package/dist/internal/overlay-stem.d.ts.map +1 -0
- package/dist/internal/overlay-stem.js +7 -0
- package/dist/internal/phone-sheet.d.ts +4 -0
- package/dist/internal/phone-sheet.d.ts.map +1 -0
- package/dist/internal/phone-sheet.js +2 -0
- package/dist/internal/present-content.d.ts +3 -0
- package/dist/internal/present-content.d.ts.map +1 -0
- package/dist/internal/present-content.js +1 -0
- package/dist/internal/record-menu-items.d.ts +4 -3
- package/dist/internal/record-menu-items.d.ts.map +1 -1
- package/dist/internal/record-menu-items.js +21 -6
- package/dist/internal/settings-save.d.ts +9 -2
- package/dist/internal/settings-save.d.ts.map +1 -1
- package/dist/internal/settings-save.js +9 -6
- package/dist/internal/table-compact-line.d.ts +38 -0
- package/dist/internal/table-compact-line.d.ts.map +1 -0
- package/dist/internal/table-compact-line.js +35 -0
- package/dist/internal/title-when-cut.d.ts +8 -0
- package/dist/internal/title-when-cut.d.ts.map +1 -0
- package/dist/internal/title-when-cut.js +22 -0
- package/dist/internal/unsaved-guard.d.ts +18 -0
- package/dist/internal/unsaved-guard.d.ts.map +1 -0
- package/dist/internal/unsaved-guard.js +31 -0
- package/dist/lib/merge-tokens.generated.js +2 -2
- package/dist/showcase/foundations.d.ts.map +1 -1
- package/dist/showcase/foundations.js +10 -2
- package/dist/showcase/specimens/actions.d.ts +2 -0
- package/dist/showcase/specimens/actions.d.ts.map +1 -1
- package/dist/showcase/specimens/actions.js +30 -5
- package/dist/showcase/specimens/charts.d.ts.map +1 -1
- package/dist/showcase/specimens/charts.js +22 -13
- package/dist/showcase/specimens/choices.d.ts +14 -3
- package/dist/showcase/specimens/choices.d.ts.map +1 -1
- package/dist/showcase/specimens/choices.js +93 -13
- package/dist/showcase/specimens/compositions.d.ts.map +1 -1
- package/dist/showcase/specimens/compositions.js +136 -23
- package/dist/showcase/specimens/data.d.ts +12 -7
- package/dist/showcase/specimens/data.d.ts.map +1 -1
- package/dist/showcase/specimens/data.js +139 -35
- package/dist/showcase/specimens/feedback.d.ts +2 -0
- package/dist/showcase/specimens/feedback.d.ts.map +1 -1
- package/dist/showcase/specimens/feedback.js +39 -15
- package/dist/showcase/specimens/index.d.ts +20 -12
- package/dist/showcase/specimens/index.d.ts.map +1 -1
- package/dist/showcase/specimens/inputs.d.ts +4 -2
- package/dist/showcase/specimens/inputs.d.ts.map +1 -1
- package/dist/showcase/specimens/inputs.js +62 -19
- package/dist/showcase/specimens/menus.d.ts +0 -1
- package/dist/showcase/specimens/menus.d.ts.map +1 -1
- package/dist/showcase/specimens/menus.js +47 -17
- package/dist/showcase/specimens/navigation.d.ts +6 -4
- package/dist/showcase/specimens/navigation.d.ts.map +1 -1
- package/dist/showcase/specimens/navigation.js +61 -32
- package/dist/showcase/specimens/other.d.ts +1 -3
- package/dist/showcase/specimens/other.d.ts.map +1 -1
- package/dist/showcase/specimens/other.js +17 -13
- package/dist/showcase/specimens/status.d.ts +4 -1
- package/dist/showcase/specimens/status.d.ts.map +1 -1
- package/dist/showcase/specimens/status.js +64 -11
- package/dist/showcase/usage.generated.d.ts +1 -1
- package/dist/showcase/usage.generated.d.ts.map +1 -1
- package/dist/showcase/usage.generated.js +632 -544
- package/dist/standalone/index.js +1 -1
- package/dist/styles/components.css +13 -13
- package/dist/styles/globals.css +25 -0
- package/package.json +2 -3
- package/dist/components/approval-row.d.ts +0 -34
- package/dist/components/approval-row.d.ts.map +0 -1
- package/dist/components/approval-row.js +0 -27
- package/dist/components/channel-view.d.ts +0 -112
- package/dist/components/channel-view.d.ts.map +0 -1
- package/dist/components/channel-view.js +0 -84
- package/dist/components/dashboard-shell.d.ts +0 -51
- package/dist/components/dashboard-shell.d.ts.map +0 -1
- package/dist/components/dashboard-shell.js +0 -89
- package/dist/components/direction.d.ts +0 -2
- package/dist/components/direction.d.ts.map +0 -1
- package/dist/components/direction.js +0 -1
- package/dist/components/expandable-block.d.ts +0 -20
- package/dist/components/expandable-block.d.ts.map +0 -1
- package/dist/components/expandable-block.js +0 -32
- package/dist/components/form.d.ts +0 -42
- package/dist/components/form.d.ts.map +0 -1
- package/dist/components/form.js +0 -91
- package/dist/components/label-system.d.ts +0 -17
- package/dist/components/label-system.d.ts.map +0 -1
- package/dist/components/label-system.js +0 -21
- package/dist/components/memory-item.d.ts +0 -21
- package/dist/components/memory-item.d.ts.map +0 -1
- package/dist/components/memory-item.js +0 -18
- package/dist/components/menubar.d.ts +0 -43
- package/dist/components/menubar.d.ts.map +0 -1
- package/dist/components/menubar.js +0 -69
- package/dist/components/navigation-menu.d.ts +0 -26
- package/dist/components/navigation-menu.d.ts.map +0 -1
- package/dist/components/navigation-menu.js +0 -45
- package/dist/components/pagination.d.ts +0 -33
- package/dist/components/pagination.d.ts.map +0 -1
- package/dist/components/pagination.js +0 -41
- package/dist/components/plugin-slot-boundary.d.ts +0 -42
- package/dist/components/plugin-slot-boundary.d.ts.map +0 -1
- package/dist/components/plugin-slot-boundary.js +0 -41
- package/dist/components/status-row.d.ts +0 -32
- package/dist/components/status-row.d.ts.map +0 -1
- package/dist/components/status-row.js +0 -35
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Alert, AlertDescription, AlertTitle } from "./alert.js";
|
|
3
|
+
import { NOTICE_EDGE, NoticeLink, NoticeMark } from "../internal/notice.js";
|
|
4
|
+
import { cn } from "../lib/utils.js";
|
|
5
|
+
// eslint-disable-next-line no-warning-comments -- the block quotes Geist's banner rule word for word (https://vercel.com/geist/banner); "temporary" there is prose, not a marker
|
|
4
6
|
/**
|
|
5
7
|
* A condition of the whole page, the account or the service, with its fix.
|
|
6
8
|
*
|
|
7
9
|
* @family Feedback
|
|
8
|
-
* @when A condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner.
|
|
9
|
-
* @instead
|
|
10
|
-
* @behaviour
|
|
11
|
-
* @words Title names the condition, description what
|
|
12
|
-
* @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark is hidden.
|
|
10
|
+
* @when "A prominent message that spans the full width of its container to announce important information." (https://vercel.com/geist/banner) "Used for temporary, project-wide notifications that require resolution" (https://vercel.com/geist/project-banner) "Use Project Banner for project-wide states that need resolution: overdue billing, an active rollback, attack mitigation, an expiring trial blocking deploys." (https://vercel.com/geist/project-banner) "Match `variant` to severity: `error` for critical downtime or payment-blocking states, `warning` for an exceptional state with non-immediate action, `success` for a positive temporary mitigation, `gray` for routine project-wide notices." (https://vercel.com/geist/project-banner) Ours: a condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` and `neutral` is `gray`. One sits above the page's content, under its title.
|
|
11
|
+
* @instead "Pick `Note` for inline contextual messages tied to a single field or card, `Toast` for transient acknowledgments, `Modal` for confirmations." (https://vercel.com/geist/project-banner) Ours: `Note` is `MessageNotice` (`placement="section"`), `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
|
|
12
|
+
* @behaviour "Project Banner is non-dismissible by design. If the message can be dismissed without resolving the underlying state, it isn’t banner-worthy; move it to a `Note`." (https://vercel.com/geist/project-banner) "Show one Project Banner at a time. Stacking competing banners drowns the most urgent state." (https://vercel.com/geist/project-banner) "Always pass a `callToAction` that resolves the state. A banner with no route is a dead end." (https://vercel.com/geist/project-banner) Ours: a strip as wide as its container: a filled ground with a line on its top and bottom edge only, no corners, 40 px high and centred, with the mark, the sentence and the fix on one row; under 768 px the fix drops under the sentence, aligned with its text. Colour sits on the whole strip (ground, both lines, mark and text); the fix is an underlined link in the darkest step of the same hue (neutral: `text-foreground`) and returns to the strip's text on hover. Neutral and info take the Info mark, warning and destructive the TriangleAlert. `action` is the `callToAction`: one command, never two, never a ready-made button, and there is no close button. Required: `action`, `title`, `tone` and `liveRegion`; the mark is always drawn.
|
|
13
|
+
* @words "`label` is one sentence in sentence case that names the impact: `Your Pro trial expires in 3 days.` Don’t open with `Heads up` or apologetic preambles." (https://vercel.com/geist/project-banner) "`callToAction.label` is Title Case `Verb + Noun` and points at the resolver: `Update Payment Method`, `Reactivate Project`, `Review Tokens`." (https://vercel.com/geist/project-banner) "Name the affected entity when the project context isn’t obvious from the surrounding chrome (`Production deployments are paused on my-project`)." (https://vercel.com/geist/project-banner) "Don’t encode severity in the copy with emoji or interjections; the variant carries that signal." (https://vercel.com/geist/project-banner) "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) Ours: the `title` is the `label`: the one sentence, naming the condition, its impact and the object. A `description` only adds what the title leaves out, in one more sentence. Our `label` is the `NoteLabel` topic prefix. The action is sentence case, verb and noun, pointing at the resolver: "Open Slack settings", "Update card". No "Please". The words come from the product's catalogue code.
|
|
14
|
+
* @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark, given or not, is hidden.
|
|
13
15
|
*/
|
|
14
|
-
export function NoticeBanner({ action, className, description, detail, liveRegion, title, tone, ...props }) {
|
|
15
|
-
const Icon = tone === "warning" || tone === "destructive" ? TriangleAlert : Info;
|
|
16
|
+
export function NoticeBanner({ action, className, description, detail, icon, label, liveRegion, title, tone, ...props }) {
|
|
16
17
|
const isLive = liveRegion === "polite";
|
|
17
|
-
return (_jsxs(Alert, { "aria-atomic": isLive ? "true" : undefined, "aria-live": isLive ? "polite" : undefined, className: className, "data-live-region": liveRegion, "data-notice-banner": true, "data-tone": tone, role: isLive ? "status" : "note", variant: tone === "neutral" ? "default" : tone, ...props, children: [
|
|
18
|
+
return (_jsxs(Alert, { "aria-atomic": isLive ? "true" : undefined, "aria-live": isLive ? "polite" : undefined, className: cn("flex min-h-10 flex-col items-start gap-2 rounded-none border-x-0 px-6 py-2 md:flex-row md:items-center md:justify-center", tone === "neutral" && "bg-muted text-muted-foreground", NOTICE_EDGE[tone], className), "data-live-region": liveRegion, "data-notice-banner": true, "data-tone": tone, role: isLive ? "status" : "note", variant: tone === "neutral" ? "default" : tone, ...props, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("span", { className: "flex h-5 shrink-0 items-center [&_svg]:size-4", children: _jsx(NoticeMark, { icon: icon, tone: tone }) }), _jsxs("div", { className: "grid min-w-0 text-body-sm", children: [_jsxs(AlertTitle, { className: "font-normal", children: [label ? (_jsxs(_Fragment, { children: [_jsx("strong", { "data-notice-label": true, children: label }), " "] })) : null, title] }), description || detail ? (_jsxs(AlertDescription, { className: "flex min-w-0 flex-col gap-2 text-current", children: [description ? _jsx("div", { "data-notice-description": true, children: description }) : null, detail ? _jsx("div", { "data-notice-detail": true, children: detail }) : null] })) : null] })] }), _jsx(NoticeLink, { className: "pl-6 md:pl-0", command: action, place: "strip", tone: tone })] }));
|
|
18
19
|
}
|
|
@@ -16,18 +16,24 @@ export type NumberedStepsProps = {
|
|
|
16
16
|
id: string;
|
|
17
17
|
label: string;
|
|
18
18
|
};
|
|
19
|
+
} & ({
|
|
19
20
|
/** One bordered list with a seam between steps. */
|
|
20
21
|
framed?: boolean;
|
|
21
|
-
|
|
22
|
+
columns?: never;
|
|
23
|
+
} | {
|
|
24
|
+
/** The steps side by side from 640 px, two across then three, each number above its words: a short sequence a page explains. */
|
|
25
|
+
columns: true;
|
|
26
|
+
framed?: never;
|
|
27
|
+
});
|
|
22
28
|
/**
|
|
23
29
|
* Steps a person follows, each with its number, its words and its own action.
|
|
24
30
|
*
|
|
25
31
|
* @family Other
|
|
26
|
-
* @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check.
|
|
32
|
+
* @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check; and, as `columns`, the few steps a page explains, such as the website's how it works. Vercel draws its Speed Insights *Get Started* the same way: three numbered steps, each with its words and its own action.
|
|
27
33
|
* @instead Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent's run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.
|
|
28
|
-
* @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps. It is the one owner of a drawn step number.
|
|
34
|
+
* @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side from 640 px, two across then three, each number above its words, and is never framed. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.
|
|
29
35
|
* @words The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step's word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").
|
|
30
36
|
* @access An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page's heading order.
|
|
31
37
|
*/
|
|
32
|
-
export declare function NumberedSteps({ label, steps, current, framed }: NumberedStepsProps): import("react").JSX.Element;
|
|
38
|
+
export declare function NumberedSteps({ label, steps, current, framed, columns, }: NumberedStepsProps): import("react").JSX.Element;
|
|
33
39
|
//# sourceMappingURL=numbered-steps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numbered-steps.d.ts","sourceRoot":"","sources":["../../src/components/numbered-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,gHAAgH;IAChH,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"numbered-steps.d.ts","sourceRoot":"","sources":["../../src/components/numbered-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,gHAAgH;IAChH,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC,GAAG,CACA;IACE,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACE,gIAAgI;IAChI,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CACJ,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAc,EACd,OAAO,GACR,EAAE,kBAAkB,+BAgEpB"}
|
|
@@ -4,20 +4,22 @@ import { cn } from "../lib/utils.js";
|
|
|
4
4
|
* Steps a person follows, each with its number, its words and its own action.
|
|
5
5
|
*
|
|
6
6
|
* @family Other
|
|
7
|
-
* @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check.
|
|
7
|
+
* @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check; and, as `columns`, the few steps a page explains, such as the website's how it works. Vercel draws its Speed Insights *Get Started* the same way: three numbered steps, each with its words and its own action.
|
|
8
8
|
* @instead Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent's run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.
|
|
9
|
-
* @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps. It is the one owner of a drawn step number.
|
|
9
|
+
* @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side from 640 px, two across then three, each number above its words, and is never framed. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.
|
|
10
10
|
* @words The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step's word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").
|
|
11
11
|
* @access An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page's heading order.
|
|
12
12
|
*/
|
|
13
|
-
export function NumberedSteps({ label, steps, current, framed = false }) {
|
|
14
|
-
return (_jsx("ol", { "aria-label": label, className: framed
|
|
13
|
+
export function NumberedSteps({ label, steps, current, framed = false, columns, }) {
|
|
14
|
+
return (_jsx("ol", { "aria-label": label, className: cn(framed
|
|
15
15
|
? "grid divide-y divide-border rounded-md border border-border bg-card"
|
|
16
|
-
: "grid gap-6", "data-slot": "numbered-steps", children: steps.map((step, index) => {
|
|
16
|
+
: "grid gap-6", columns && "gap-8 sm:grid-cols-2 lg:grid-cols-3"), "data-slot": "numbered-steps", children: steps.map((step, index) => {
|
|
17
17
|
const word = current && step.id === current.id ? current.label : undefined;
|
|
18
18
|
const isCurrent = word !== undefined;
|
|
19
|
-
return (_jsxs("li", { "aria-current": isCurrent ? "step" : undefined, className: cn(
|
|
19
|
+
return (_jsxs("li", { "aria-current": isCurrent ? "step" : undefined, className: cn(columns
|
|
20
|
+
? "grid content-start gap-y-3"
|
|
21
|
+
: "grid grid-cols-[1.75rem_minmax(0,1fr)] gap-x-3 gap-y-1", framed && "p-4"), children: [_jsx("span", { "aria-hidden": "true", className: isCurrent
|
|
20
22
|
? "flex size-7 items-center justify-center rounded-md bg-foreground font-label-mono text-label-mono tabular-nums text-background"
|
|
21
|
-
: "flex size-7 items-center justify-center rounded-md bg-muted font-label-mono text-label-mono tabular-nums text-muted-foreground", children: index + 1 }), _jsxs("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-body-sm font-medium text-foreground", children: step.title }), isCurrent ? (_jsx("span", { className: "font-label-mono text-label-mono uppercase text-muted-foreground", children: word })) : null] }), step.description ? (_jsx("div", { className: "
|
|
23
|
+
: "flex size-7 items-center justify-center rounded-md bg-muted font-label-mono text-label-mono tabular-nums text-muted-foreground", children: index + 1 }), _jsxs("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-body-sm font-medium text-foreground", children: step.title }), isCurrent ? (_jsx("span", { className: "font-label-mono text-label-mono uppercase text-muted-foreground", children: word })) : null] }), step.description ? (_jsx("div", { className: cn("text-body-sm text-muted-foreground", !columns && "col-start-2"), children: step.description })) : null, step.action ? (_jsx("div", { className: cn("grid justify-items-start gap-1.5", columns ? "pt-1" : "col-start-2 pt-3"), children: step.action })) : null] }, step.id));
|
|
22
24
|
}) }));
|
|
23
25
|
}
|
|
@@ -1,37 +1,63 @@
|
|
|
1
1
|
import type { ComponentProps, ReactElement, ReactNode } from "react";
|
|
2
2
|
import { type IdentityMarkProps } from "./identity-mark.js";
|
|
3
3
|
import { type PageCommand, type PageMenu } from "./page-actions.js";
|
|
4
|
+
type ObjectPageFact = {
|
|
5
|
+
label: string;
|
|
6
|
+
value: ReactNode;
|
|
7
|
+
};
|
|
8
|
+
export type ObjectPageEntry = {
|
|
9
|
+
/** The row's noun phrase: "Deployment settings", "Build logs". */
|
|
10
|
+
title: string;
|
|
11
|
+
/** What the row counts or states, at its trailing edge before the chevron: a Badge or a count. */
|
|
12
|
+
summary?: ReactNode;
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
};
|
|
15
|
+
export type ObjectPageLink = {
|
|
16
|
+
label: string;
|
|
17
|
+
/** The product's router link, such as `<Link href="/deployments" />`. */
|
|
18
|
+
link: ReactElement;
|
|
19
|
+
/** Opens outside the product: the arrow after the label. */
|
|
20
|
+
external?: boolean | undefined;
|
|
21
|
+
};
|
|
22
|
+
export type ObjectPageFooter = {
|
|
23
|
+
/** One muted line saying where the object changes or what governs it: "To update it, push to the main branch." */
|
|
24
|
+
hint: string;
|
|
25
|
+
/** The one way on, elsewhere. A link only: nothing in this footer saves or changes the object. */
|
|
26
|
+
link: ObjectPageLink;
|
|
27
|
+
};
|
|
4
28
|
export type ObjectPageProps = {
|
|
5
|
-
/** The object's mark, drawn at 64. */
|
|
29
|
+
/** The object's mark, drawn at 64 beside its facts. */
|
|
6
30
|
mark: IdentityMarkProps;
|
|
7
31
|
name: string;
|
|
8
32
|
/** Given where the name is the page's h1 (the product's chrome draws no title row here). */
|
|
9
33
|
headingProps?: Omit<ComponentProps<"h1">, "children">;
|
|
10
34
|
/** One line saying what it is: "Customer of Partner Alpha · since 3 August 2026". */
|
|
11
35
|
description?: ReactNode;
|
|
12
|
-
/** Key facts as labelled values in one row. */
|
|
13
|
-
facts
|
|
14
|
-
|
|
15
|
-
value: ReactNode;
|
|
16
|
-
}[];
|
|
17
|
-
/** On the name's row: one secondary action, then the three dots. */
|
|
36
|
+
/** Key facts as labelled values in one row; an object always has at least one. */
|
|
37
|
+
facts: readonly [ObjectPageFact, ...ObjectPageFact[]];
|
|
38
|
+
/** The object's commands on its header bar: one secondary action, then the three dots. */
|
|
18
39
|
actions?: {
|
|
19
40
|
secondary?: PageCommand;
|
|
20
41
|
menu?: PageMenu;
|
|
21
42
|
};
|
|
43
|
+
/** Rows that open under the facts, each one part of the object: settings, logs, checks. */
|
|
44
|
+
entries?: readonly ObjectPageEntry[];
|
|
45
|
+
/** The footer: a hint and one link elsewhere. Left out when the object has no such line. */
|
|
46
|
+
footer?: ObjectPageFooter;
|
|
22
47
|
/** The sections, each a card that owns a decision: ObjectSection, RecordList with a heading, SettingsSection, ActivityFeed. */
|
|
23
48
|
children: ReactNode;
|
|
24
49
|
};
|
|
25
50
|
/**
|
|
26
|
-
* One object's page:
|
|
27
|
-
* its sections as cards.
|
|
51
|
+
* One object's page: the object card with its name, commands, facts, rows that open and one link
|
|
52
|
+
* elsewhere, then its sections as cards.
|
|
28
53
|
*
|
|
29
54
|
* @family Compositions
|
|
30
55
|
* @when One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.
|
|
31
|
-
* @instead A list of records is a CollectionPage; a page of settings only is a SettingsPage; an Agent opens on its AgentProfileCard, the documented exception.
|
|
32
|
-
* @behaviour
|
|
33
|
-
* @words The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; the menu's trigger reads "More for {name}".
|
|
34
|
-
* @access
|
|
56
|
+
* @instead "Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key." (https://vercel.com/geist/context-card) Ours: that hover is a `HoverCard`, never this page. A list of records is a CollectionPage; a page of settings only is a SettingsPage, whose cards are SettingsSections; an Agent opens on its AgentProfileCard, the documented exception. A card of values a person saves is a setting card, never this one.
|
|
57
|
+
* @behaviour "For a static key/value metadata block on a detail page, use `Description`." (https://vercel.com/geist/entity) "The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`." (https://vercel.com/geist/entity) "Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`)." (https://vercel.com/geist/entity) "Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`)." (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (one secondary action, then the three dots, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise), then a body of the mark at 64 centred in a tile on the muted ground (300 px wide at 16:10 from `md`, 128 px high and full width below) beside the optional line and the facts in a grid of four columns from `lg` and two below (at least one fact is required: an object is never shown without what it is), each a muted label over its value in body text, then an optional footer with a hint at the start and one link at the end. Optional `entries` follow in a card of their own 12 px under it: rows that open one by one, each with its chevron first (it turns down when open), its title, and its summary at the trailing edge, as Vercel's Build Logs and Deployment Checks rows. The footer takes a link only, so no Save or other command of the object fits in it; the object's changes live in its sections, each a setting card with its own footer. The sections follow, 24 apart, each drawing its own states. The card is neutral: colour sits in a fact's value or an entry's summary (a status), never in the header, the footer or the card.
|
|
58
|
+
* @words "Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen." (https://vercel.com/geist/entity) "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: sentence case throughout. The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; an entry's title is a noun phrase; the hint is one sentence ("To update it, push to the main branch."); the link names where it goes ("Deployments"); the menu's trigger reads "More for {name}".
|
|
59
|
+
* @access "Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page's h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the facts. Each entry is a button with `aria-expanded` that controls its panel.
|
|
35
60
|
*/
|
|
36
|
-
export declare function ObjectPage({ mark, name, headingProps, description, facts, actions, children, }: ObjectPageProps): ReactElement;
|
|
61
|
+
export declare function ObjectPage({ mark, name, headingProps, description, facts, actions, entries, footer, children, }: ObjectPageProps): ReactElement;
|
|
62
|
+
export {};
|
|
37
63
|
//# sourceMappingURL=object-page.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"object-page.d.ts","sourceRoot":"","sources":["../../src/components/object-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"object-page.d.ts","sourceRoot":"","sources":["../../src/components/object-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrE,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAqC,MAAM,gBAAgB,CAAC;AAEpG,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,EAAE,YAAY,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kHAAkH;IAClH,IAAI,EAAE,MAAM,CAAC;IACb,kGAAkG;IAClG,IAAI,EAAE,cAAc,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,uDAAuD;IACvD,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACtD,qFAAqF;IACrF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC,CAAC;IACtD,0FAA0F;IAC1F,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,WAAW,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IACvD,2FAA2F;IAC3F,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,+HAA+H;IAC/H,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,eAAe,GAAG,YAAY,CAsEhC"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { FooterStrip } from "../internal/footer-strip.js";
|
|
2
3
|
import { cn } from "../lib/utils.js";
|
|
4
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";
|
|
5
|
+
import { Card, CardContent, CardHeader, CardTitle } from "./card.js";
|
|
3
6
|
import { IdentityMark } from "./identity-mark.js";
|
|
4
|
-
import { PageActionsRow } from "./page-actions.js";
|
|
7
|
+
import { PageActionsRow, PageCommandButton } from "./page-actions.js";
|
|
5
8
|
/**
|
|
6
|
-
* One object's page:
|
|
7
|
-
* its sections as cards.
|
|
9
|
+
* One object's page: the object card with its name, commands, facts, rows that open and one link
|
|
10
|
+
* elsewhere, then its sections as cards.
|
|
8
11
|
*
|
|
9
12
|
* @family Compositions
|
|
10
13
|
* @when One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.
|
|
11
|
-
* @instead A list of records is a CollectionPage; a page of settings only is a SettingsPage; an Agent opens on its AgentProfileCard, the documented exception.
|
|
12
|
-
* @behaviour
|
|
13
|
-
* @words The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; the menu's trigger reads "More for {name}".
|
|
14
|
-
* @access
|
|
14
|
+
* @instead "Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key." (https://vercel.com/geist/context-card) Ours: that hover is a `HoverCard`, never this page. A list of records is a CollectionPage; a page of settings only is a SettingsPage, whose cards are SettingsSections; an Agent opens on its AgentProfileCard, the documented exception. A card of values a person saves is a setting card, never this one.
|
|
15
|
+
* @behaviour "For a static key/value metadata block on a detail page, use `Description`." (https://vercel.com/geist/entity) "The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`." (https://vercel.com/geist/entity) "Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`)." (https://vercel.com/geist/entity) "Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`)." (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (one secondary action, then the three dots, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise), then a body of the mark at 64 centred in a tile on the muted ground (300 px wide at 16:10 from `md`, 128 px high and full width below) beside the optional line and the facts in a grid of four columns from `lg` and two below (at least one fact is required: an object is never shown without what it is), each a muted label over its value in body text, then an optional footer with a hint at the start and one link at the end. Optional `entries` follow in a card of their own 12 px under it: rows that open one by one, each with its chevron first (it turns down when open), its title, and its summary at the trailing edge, as Vercel's Build Logs and Deployment Checks rows. The footer takes a link only, so no Save or other command of the object fits in it; the object's changes live in its sections, each a setting card with its own footer. The sections follow, 24 apart, each drawing its own states. The card is neutral: colour sits in a fact's value or an entry's summary (a status), never in the header, the footer or the card.
|
|
16
|
+
* @words "Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen." (https://vercel.com/geist/entity) "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: sentence case throughout. The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; an entry's title is a noun phrase; the hint is one sentence ("To update it, push to the main branch."); the link names where it goes ("Deployments"); the menu's trigger reads "More for {name}".
|
|
17
|
+
* @access "Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page's h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the facts. Each entry is a button with `aria-expanded` that controls its panel.
|
|
15
18
|
*/
|
|
16
|
-
export function ObjectPage({ mark, name, headingProps, description, facts, actions, children, }) {
|
|
17
|
-
|
|
18
|
-
return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "object-page", children: [_jsxs("header", { className: "flex min-w-0 flex-wrap items-start gap-x-5 gap-y-4", "data-slot": "object-page-header", children: [_jsx(IdentityMark, { ...mark, size: 64 }), _jsxs("div", { className: "grid min-w-0 flex-1 basis-60 gap-1", children: [headingProps ? (_jsx("h1", { ...headingProps, className: cn(nameClass, "outline-none", headingProps.className), children: name })) : (_jsx("p", { className: nameClass, children: name })), description ? (_jsx("div", { className: "min-w-0 text-body-sm text-muted-foreground", children: description })) : null, facts && facts.length > 0 ? (_jsx("dl", { className: "mt-3 flex min-w-0 flex-wrap gap-x-8 gap-y-2", "data-slot": "object-page-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("dt", { className: "text-label-sm text-muted-foreground", children: fact.label }), _jsx("dd", { className: "min-w-0 text-label font-medium break-words text-foreground", children: fact.value })] }, fact.label))) })) : null] }), actions?.secondary || actions?.menu ? (_jsx("div", { className: "flex basis-full md:basis-auto md:justify-end", children: _jsx(PageActionsRow, { ...actions }) })) : null] }), children] }));
|
|
19
|
+
export function ObjectPage({ mark, name, headingProps, description, facts, actions, entries, footer, children, }) {
|
|
20
|
+
return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "object-page", children: [_jsxs("div", { className: "grid min-w-0 gap-3", children: [_jsxs(Card, { className: "min-w-0", render: _jsx("div", { "data-slot": "object-card" }), size: "sm", children: [_jsxs(CardHeader, { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b", children: [_jsx(CardTitle, { className: "min-w-0 flex-1 basis-32 break-words", children: headingProps ? (_jsx("h1", { ...headingProps, className: cn("outline-none", headingProps.className), children: name })) : (name) }), actions?.secondary || actions?.menu ? _jsx(PageActionsRow, { ...actions }) : null] }), _jsxs(CardContent, { className: "grid min-w-0 gap-x-6 gap-y-5 md:grid-cols-[minmax(0,18.75rem)_minmax(0,1fr)]", children: [_jsx("div", { className: "flex h-32 min-w-0 items-center md:h-auto md:aspect-[16/10] justify-center rounded-sm border border-border bg-muted", "data-slot": "object-page-tile", children: _jsx(IdentityMark, { ...mark, size: 64 }) }), _jsxs("div", { className: "grid min-w-0 content-start gap-4", children: [description ? (_jsx("div", { className: "min-w-0 text-body-sm text-muted-foreground", children: description })) : null, _jsx("dl", { className: "grid min-w-0 grid-cols-2 gap-x-6 gap-y-4 lg:grid-cols-4", "data-slot": "object-page-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 content-start gap-1", children: [_jsx("dt", { className: "text-label-sm text-muted-foreground", children: fact.label }), _jsx("dd", { className: "min-w-0 text-body-sm break-words text-foreground", children: fact.value })] }, fact.label))) })] })] }), footer ? (_jsx(FooterStrip, { hint: footer.hint, hintSlot: "object-page-hint", children: _jsx(PageCommandButton, { command: footer.link, variant: "outline" }) })) : null] }), entries && entries.length > 0 ? (_jsx(Card, { className: "min-w-0 py-0", render: _jsx("div", { "data-slot": "object-page-entries" }), size: "sm", children: _jsx(Accordion, { className: "[&>:last-child]:border-b-0", multiple: true, size: "small", children: entries.map((entry) => (_jsxs(AccordionItem, { value: entry.title, children: [_jsxs(AccordionTrigger, { className: "justify-start gap-3 px-(--card-spacing) group-data-[size=small]/accordion:text-body-sm focus-visible:-outline-offset-2 [&>[data-slot=accordion-trigger-icon]]:order-first [&>[data-slot=accordion-trigger-icon]]:text-muted-foreground", children: [_jsx("span", { className: "min-w-0 flex-1", children: entry.title }), entry.summary] }), _jsx(AccordionContent, { className: "ps-[calc(var(--card-spacing)+1.75rem)] pe-(--card-spacing)", children: entry.children })] }, entry.title))) }) })) : null] }), children] }));
|
|
19
21
|
}
|
|
@@ -1,27 +1,39 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
import { type PageCommand } from "./page-actions.js";
|
|
3
|
-
|
|
3
|
+
type ObjectFactShape = {
|
|
4
4
|
label: string;
|
|
5
5
|
value: ReactNode;
|
|
6
|
+
/** One sentence that defines a label that is ambiguous on its own; it ends with a full stop. */
|
|
7
|
+
tooltip?: string;
|
|
8
|
+
/** The label and the value align to the trailing edge. */
|
|
9
|
+
right?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export type ObjectFact = ObjectFactShape & ({
|
|
6
12
|
/**
|
|
7
13
|
* A value long enough to be a paragraph rather than a figure, such as a note
|
|
8
14
|
* or a pasted reference. It takes the full measure with its label above it.
|
|
9
15
|
*/
|
|
10
|
-
block
|
|
11
|
-
|
|
16
|
+
block: true;
|
|
17
|
+
ellipsis?: never;
|
|
18
|
+
} | {
|
|
19
|
+
block?: false;
|
|
20
|
+
/** A value that ends in an ellipsis on one line, whole in its title, instead of wrapping. */
|
|
21
|
+
ellipsis?: boolean;
|
|
22
|
+
});
|
|
12
23
|
/**
|
|
13
24
|
* A section of an object's page: a card that owns one decision about the object.
|
|
14
25
|
*
|
|
15
26
|
* @family Compositions
|
|
16
27
|
* @when A part of an ObjectPage a person reads or changes on its own: a customer's Company details, an Agent's Instructions, a Library entry's source.
|
|
17
28
|
* @instead Values a person edits and saves together are a SettingsSection; a list of the object's records is a RecordList with its heading; a passing condition is a MessageNotice.
|
|
18
|
-
* @behaviour A resting card: its title and
|
|
19
|
-
* @words The title names what the section holds ("Company", "Instructions"); the action is a verb on it ("Edit"); `meta` is a short count or time ("2 of 5 Agents").
|
|
29
|
+
* @behaviour A resting card: its title and the one-sentence description directly under it, both always given, at the trailing edge `meta` (muted) then `action` as an outline button, then its body. No icon in the header. Neutral throughout.
|
|
30
|
+
* @words The title names what the section holds ("Company", "Instructions"); the description says in one sentence what it holds or lets a person change; the action is a verb on it ("Edit"); `meta` is a short count or time ("2 of 5 Agents").
|
|
20
31
|
* @access The title is a heading one level under the page (h2), deeper only under another heading through `headingLevel`.
|
|
21
32
|
*/
|
|
22
33
|
export declare function ObjectSection({ title, description, action, meta, children, headingLevel, }: {
|
|
23
34
|
title: string;
|
|
24
|
-
|
|
35
|
+
/** The one sentence under the title that says what the section holds or changes. */
|
|
36
|
+
description: NonNullable<ReactNode>;
|
|
25
37
|
/** The section's one command, an outline button in its header. */
|
|
26
38
|
action?: PageCommand;
|
|
27
39
|
/** A muted note at the header's trailing edge, before the action: "2 of 5 Agents". */
|
|
@@ -34,14 +46,21 @@ export declare function ObjectSection({ title, description, action, meta, childr
|
|
|
34
46
|
* An object's facts as labelled values in a grid, inside one of its sections.
|
|
35
47
|
*
|
|
36
48
|
* @family Data
|
|
37
|
-
* @when
|
|
49
|
+
* @when “Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`). For inline help under a form field, use the input’s helper-text slot instead.” (https://vercel.com/geist/description)
|
|
50
|
+
* Ours: read-only values that describe an object, inside an ObjectSection: a company's legal name, VAT number and address. One fact alone is a description: a short label over its value.
|
|
38
51
|
* @instead Facts under the object's name belong to ObjectPage's `facts`; values a person changes are SettingsFields in a SettingsSection; figures compared across records are a DataTable.
|
|
39
|
-
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks.
|
|
40
|
-
*
|
|
41
|
-
*
|
|
52
|
+
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks. A fact is its label (14/14 px, muted) over its value (14/16 px, medium, ink) 8 px apart in a 16 px label line, 40 px in all; every fact has both. `right` aligns a fact to the trailing edge, and `ellipsis` cuts the label and the value to one line, the value whole in its title. Neutral throughout.
|
|
53
|
+
* “Pass `tooltip` only when the title alone is ambiguous and a one-sentence definition resolves it. The tooltip text is sentence case and ends with a period.” (https://vercel.com/geist/description)
|
|
54
|
+
* Ours: the `tooltip` stands behind an info icon after the label that a keyboard reaches; the value never carries it.
|
|
55
|
+
* @words “Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim.” (https://vercel.com/geist/description)
|
|
56
|
+
* Ours: a label is a short sentence case noun ("Billing email"), not Geist's Title Case; a value carries no unit the label already says.
|
|
57
|
+
* @access “Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition. Don’t wrap the component in extra paragraphs that break the list semantics.” (https://vercel.com/geist/description)
|
|
58
|
+
* “Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`).” (https://vercel.com/geist/description)
|
|
59
|
+
* Ours: each label is its value's term and names it; only the tooltip's own trigger sits in a label.
|
|
42
60
|
*/
|
|
43
61
|
export declare function ObjectFacts({ facts, density, }: {
|
|
44
62
|
facts: readonly ObjectFact[];
|
|
45
63
|
density?: "compact" | "default";
|
|
46
64
|
}): import("react").JSX.Element;
|
|
65
|
+
export {};
|
|
47
66
|
//# sourceMappingURL=object-workspace.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAI9C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,eAAe,GACtC,CACI;IACE;;;OAGG;IACH,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CACJ,CAAC;AAEJ;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1B,+BAsBA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAmB,GACpB,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,+BAwDA"}
|
|
@@ -1,34 +1,44 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Info } from "lucide-react";
|
|
2
3
|
import { useId } from "react";
|
|
3
4
|
import { cn } from "../lib/utils.js";
|
|
4
5
|
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "./card.js";
|
|
5
6
|
import { PageCommandButton } from "./page-actions.js";
|
|
7
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
|
|
6
8
|
/**
|
|
7
9
|
* A section of an object's page: a card that owns one decision about the object.
|
|
8
10
|
*
|
|
9
11
|
* @family Compositions
|
|
10
12
|
* @when A part of an ObjectPage a person reads or changes on its own: a customer's Company details, an Agent's Instructions, a Library entry's source.
|
|
11
13
|
* @instead Values a person edits and saves together are a SettingsSection; a list of the object's records is a RecordList with its heading; a passing condition is a MessageNotice.
|
|
12
|
-
* @behaviour A resting card: its title and
|
|
13
|
-
* @words The title names what the section holds ("Company", "Instructions"); the action is a verb on it ("Edit"); `meta` is a short count or time ("2 of 5 Agents").
|
|
14
|
+
* @behaviour A resting card: its title and the one-sentence description directly under it, both always given, at the trailing edge `meta` (muted) then `action` as an outline button, then its body. No icon in the header. Neutral throughout.
|
|
15
|
+
* @words The title names what the section holds ("Company", "Instructions"); the description says in one sentence what it holds or lets a person change; the action is a verb on it ("Edit"); `meta` is a short count or time ("2 of 5 Agents").
|
|
14
16
|
* @access The title is a heading one level under the page (h2), deeper only under another heading through `headingLevel`.
|
|
15
17
|
*/
|
|
16
18
|
export function ObjectSection({ title, description, action, meta, children, headingLevel = 2, }) {
|
|
17
|
-
return (_jsxs(Card, { "data-slot": "object-section", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { role: "heading", "aria-level": headingLevel, children: title }),
|
|
19
|
+
return (_jsxs(Card, { "data-slot": "object-section", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { role: "heading", "aria-level": headingLevel, children: title }), _jsx(CardDescription, { children: description }), action || meta ? (_jsxs(CardAction, { className: "flex items-center gap-3", children: [meta ? (_jsx("span", { className: "text-label-sm text-muted-foreground", "data-slot": "object-section-meta", children: meta })) : null, action ? _jsx(PageCommandButton, { command: action, variant: "outline" }) : null] })) : null] }), _jsx(CardContent, { children: children })] }));
|
|
18
20
|
}
|
|
19
21
|
/**
|
|
20
22
|
* An object's facts as labelled values in a grid, inside one of its sections.
|
|
21
23
|
*
|
|
22
24
|
* @family Data
|
|
23
|
-
* @when
|
|
25
|
+
* @when “Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`). For inline help under a form field, use the input’s helper-text slot instead.” (https://vercel.com/geist/description)
|
|
26
|
+
* Ours: read-only values that describe an object, inside an ObjectSection: a company's legal name, VAT number and address. One fact alone is a description: a short label over its value.
|
|
24
27
|
* @instead Facts under the object's name belong to ObjectPage's `facts`; values a person changes are SettingsFields in a SettingsSection; figures compared across records are a DataTable.
|
|
25
|
-
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks.
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
+
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks. A fact is its label (14/14 px, muted) over its value (14/16 px, medium, ink) 8 px apart in a 16 px label line, 40 px in all; every fact has both. `right` aligns a fact to the trailing edge, and `ellipsis` cuts the label and the value to one line, the value whole in its title. Neutral throughout.
|
|
29
|
+
* “Pass `tooltip` only when the title alone is ambiguous and a one-sentence definition resolves it. The tooltip text is sentence case and ends with a period.” (https://vercel.com/geist/description)
|
|
30
|
+
* Ours: the `tooltip` stands behind an info icon after the label that a keyboard reaches; the value never carries it.
|
|
31
|
+
* @words “Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim.” (https://vercel.com/geist/description)
|
|
32
|
+
* Ours: a label is a short sentence case noun ("Billing email"), not Geist's Title Case; a value carries no unit the label already says.
|
|
33
|
+
* @access “Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition. Don’t wrap the component in extra paragraphs that break the list semantics.” (https://vercel.com/geist/description)
|
|
34
|
+
* “Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`).” (https://vercel.com/geist/description)
|
|
35
|
+
* Ours: each label is its value's term and names it; only the tooltip's own trigger sits in a label.
|
|
28
36
|
*/
|
|
29
37
|
export function ObjectFacts({ facts, density = "default", }) {
|
|
30
38
|
const termId = useId();
|
|
31
39
|
return (_jsx("dl", { "data-density": density, "data-slot": "object-facts", className: density === "compact"
|
|
32
40
|
? "grid min-w-0 grid-cols-2 gap-x-6 gap-y-2"
|
|
33
|
-
: "grid min-w-0 gap-x-6 gap-y-5 sm:grid-cols-2", children: facts.map((fact, index) => (_jsxs("div", { className: cn(density === "compact" ? "grid min-w-0 gap-0.5" : "grid min-w-0 gap-
|
|
41
|
+
: "grid min-w-0 gap-x-6 gap-y-5 sm:grid-cols-2", children: facts.map((fact, index) => (_jsxs("div", { className: cn(density === "compact" ? "grid min-w-0 gap-0.5" : "grid min-w-0 gap-2", fact.block && "col-span-full", fact.right && "text-right"), children: [_jsxs("dt", { className: cn("min-h-4 text-sm leading-3.5 text-muted-foreground", fact.ellipsis && "truncate"), children: [_jsx("span", { id: `${termId}-${index}`, children: fact.label }), fact.tooltip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { "aria-label": fact.label, className: "ml-1 inline-flex size-3.5 cursor-help align-text-bottom", children: _jsx(Info, { "aria-hidden": "true", className: "size-3.5" }) }), _jsx(TooltipContent, { children: fact.tooltip })] })) : null] }), _jsx("dd", { "aria-labelledby": `${termId}-${index}`, className: cn("min-w-0 text-sm", fact.block ? "font-normal leading-5 whitespace-pre-wrap" : "font-medium leading-4", fact.ellipsis ? "truncate" : "break-words"),
|
|
42
|
+
// oxlint-disable-next-line anti-slop/no-runtime-typeof -- a value is a ReactNode; only a string can be a title attribute.
|
|
43
|
+
title: fact.ellipsis && typeof fact.value === "string" ? fact.value : undefined, children: fact.value })] }, fact.label))) }));
|
|
34
44
|
}
|
|
@@ -14,9 +14,9 @@ export type OverviewPageProps = {
|
|
|
14
14
|
* The page that answers "what needs attention?": is anything wrong, and where.
|
|
15
15
|
*
|
|
16
16
|
* @family Compositions
|
|
17
|
-
* @when
|
|
17
|
+
* @when "For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: the landing page of an area a person checks: the Portal's Dashboard, Analytics, Statements, System health, an Agent's Usage.
|
|
18
18
|
* @instead A list of records a person finds one of is a `CollectionPage`; one record is an `ObjectPage`. Never a stack of previews of every section: each exception links to its owner instead.
|
|
19
|
-
* @behaviour
|
|
19
|
+
* @behaviour "Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars." (https://vercel.com/geist/skeleton) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the reading period on the title row, then the figures in one row of equal `KpiCard`s (as many columns as figures up to five, five reading two by two from md, three over two from lg and one row from xl at 1280 px; six as three over three, more in rows of four; one column below md), then the chart cards, then the exceptions. Cards stand 24 px apart with no heading between them (the figures 16 px apart in their row), and the title row has no title: the path names the page. Its cards are dashboard cards: a figure or a chart that reads, drills into its owner and holds no setting; neither an object card nor a setting card appears here. Colour sits in a figure's change and tone, never in the page. It has no states of its own: each card and the exceptions' `RecordList` draw theirs.
|
|
20
20
|
* @words The product words every figure, chart and exception. A figure's label names its measure ("Active Agents", "Spend"), the chart's title names its reading ("Usage"), and the exceptions' heading says what they are ("Needs attention").
|
|
21
21
|
* @access Each chart card is a named section at the page's heading level, and the exceptions carry their own heading; figures are text, never colour alone.
|
|
22
22
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overview-page.d.ts","sourceRoot":"","sources":["../../src/components/overview-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGnE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE,CAAC;IACxD,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gGAAgG;IAChG,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;
|
|
1
|
+
{"version":3,"file":"overview-page.d.ts","sourceRoot":"","sources":["../../src/components/overview-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGnE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE,CAAC;IACxD,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gGAAgG;IAChG,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AASF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,OAAY,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,iBAAiB,+BAe3F"}
|
|
@@ -3,24 +3,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { CardRow } from "./card-row.js";
|
|
4
4
|
import { KpiCard } from "./kpi-card.js";
|
|
5
5
|
import { PageActions } from "./page-actions.js";
|
|
6
|
-
const MAX_FIGURE_COLUMNS = 4;
|
|
7
6
|
function figureColumns(count) {
|
|
8
|
-
if (count
|
|
9
|
-
return MAX_FIGURE_COLUMNS;
|
|
10
|
-
if (count === 3 || count === 2)
|
|
7
|
+
if (count === 2 || count === 3 || count === 4 || count === 5)
|
|
11
8
|
return count;
|
|
9
|
+
if (count === 6)
|
|
10
|
+
return 3;
|
|
11
|
+
if (count > 6)
|
|
12
|
+
return 4;
|
|
12
13
|
return "auto";
|
|
13
14
|
}
|
|
14
15
|
/**
|
|
15
16
|
* The page that answers "what needs attention?": is anything wrong, and where.
|
|
16
17
|
*
|
|
17
18
|
* @family Compositions
|
|
18
|
-
* @when
|
|
19
|
+
* @when "For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: the landing page of an area a person checks: the Portal's Dashboard, Analytics, Statements, System health, an Agent's Usage.
|
|
19
20
|
* @instead A list of records a person finds one of is a `CollectionPage`; one record is an `ObjectPage`. Never a stack of previews of every section: each exception links to its owner instead.
|
|
20
|
-
* @behaviour
|
|
21
|
+
* @behaviour "Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars." (https://vercel.com/geist/skeleton) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the reading period on the title row, then the figures in one row of equal `KpiCard`s (as many columns as figures up to five, five reading two by two from md, three over two from lg and one row from xl at 1280 px; six as three over three, more in rows of four; one column below md), then the chart cards, then the exceptions. Cards stand 24 px apart with no heading between them (the figures 16 px apart in their row), and the title row has no title: the path names the page. Its cards are dashboard cards: a figure or a chart that reads, drills into its owner and holds no setting; neither an object card nor a setting card appears here. Colour sits in a figure's change and tone, never in the page. It has no states of its own: each card and the exceptions' `RecordList` draw theirs.
|
|
21
22
|
* @words The product words every figure, chart and exception. A figure's label names its measure ("Active Agents", "Spend"), the chart's title names its reading ("Usage"), and the exceptions' heading says what they are ("Needs attention").
|
|
22
23
|
* @access Each chart card is a named section at the page's heading level, and the exceptions carry their own heading; figures are text, never colour alone.
|
|
23
24
|
*/
|
|
24
25
|
export function OverviewPage({ period, figures = [], charts, exceptions }) {
|
|
25
|
-
return (_jsxs("div", { "data-slot": "overview-page", className: "grid min-w-0 gap-
|
|
26
|
+
return (_jsxs("div", { "data-slot": "overview-page", className: "grid min-w-0 gap-6", children: [_jsx(PageActions, { period: period }), figures.length > 0 ? (_jsx(CardRow, { columns: figureColumns(figures.length), from: "md", children: figures.map((figure) => (_jsx(KpiCard, { ...figure }, figure.label))) })) : null, charts, exceptions] }));
|
|
26
27
|
}
|
|
@@ -1,19 +1,40 @@
|
|
|
1
1
|
import { type MouseEvent, type ReactElement, type ReactNode } from "react";
|
|
2
2
|
import { type MenuCommand, type RecordMenu } from "./action-menu.js";
|
|
3
|
+
import { type TextButtonProps } from "./button.js";
|
|
3
4
|
export type PageCommandAction = {
|
|
4
5
|
onClick: (event: MouseEvent<HTMLElement>) => void;
|
|
6
|
+
link?: never;
|
|
5
7
|
render?: never;
|
|
6
8
|
}
|
|
7
9
|
/**
|
|
8
|
-
* The
|
|
9
|
-
*
|
|
10
|
+
* The product's router link, such as `<Link href="/agents" />`: it keeps its
|
|
11
|
+
* own behaviour and is drawn as a link with the button's look.
|
|
12
|
+
*/
|
|
13
|
+
| {
|
|
14
|
+
link: ReactElement;
|
|
15
|
+
onClick?: never;
|
|
16
|
+
render?: never;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* An element that is itself a command, such as a component that renders a
|
|
20
|
+
* `Button` and opens a dialog: it takes the button's look and props.
|
|
10
21
|
*/
|
|
11
22
|
| {
|
|
12
23
|
render: ReactElement;
|
|
13
24
|
onClick?: never;
|
|
25
|
+
link?: never;
|
|
26
|
+
};
|
|
27
|
+
/** Running: the pair travels together, so a command that can be pending always has the word to say. */
|
|
28
|
+
export type PendingWord = {
|
|
29
|
+
/** Running: the button keeps its place, size and icon and says `pendingLabel`, with aria-busy. */
|
|
30
|
+
pending?: boolean | undefined;
|
|
31
|
+
pendingLabel: string;
|
|
32
|
+
} | {
|
|
33
|
+
pending?: false | undefined;
|
|
34
|
+
pendingLabel?: string | undefined;
|
|
14
35
|
};
|
|
15
36
|
/** A command drawn as a button: on the title row, in an empty state, in a row. Its icon leads the label. */
|
|
16
|
-
export type PageCommand = PageCommandAction & {
|
|
37
|
+
export type PageCommand = PageCommandAction & PendingWord & {
|
|
17
38
|
label: string;
|
|
18
39
|
icon?: ReactElement | undefined;
|
|
19
40
|
/** Read instead of the label when the label alone does not name the target: "Sign in to Notion". */
|
|
@@ -21,9 +42,6 @@ export type PageCommand = PageCommandAction & {
|
|
|
21
42
|
/** Opens outside the product: the arrow after the label. */
|
|
22
43
|
external?: boolean | undefined;
|
|
23
44
|
disabled?: boolean | undefined;
|
|
24
|
-
/** Running: the button keeps its place, size and icon and says `pendingLabel`, with aria-busy. */
|
|
25
|
-
pending?: boolean | undefined;
|
|
26
|
-
pendingLabel?: string | undefined;
|
|
27
45
|
};
|
|
28
46
|
/** The page's three dots, which open only for two commands or more. */
|
|
29
47
|
export type PageMenu = Omit<RecordMenu, "commands"> & {
|
|
@@ -37,8 +55,10 @@ export type PageActionsProps = {
|
|
|
37
55
|
menu?: PageMenu | undefined;
|
|
38
56
|
};
|
|
39
57
|
type CommandVariant = "default" | "outline" | "ghost" | "link";
|
|
40
|
-
export declare function PageCommandButton({ command, variant, }: {
|
|
58
|
+
export declare function PageCommandButton({ command, shape, size, variant, }: {
|
|
41
59
|
command: PageCommand;
|
|
60
|
+
shape?: TextButtonProps["shape"];
|
|
61
|
+
size?: TextButtonProps["size"];
|
|
42
62
|
variant: CommandVariant;
|
|
43
63
|
}): import("react").JSX.Element;
|
|
44
64
|
/** The row of a page's actions where it stands, for a page whose header is its own card. */
|
|
@@ -61,7 +81,7 @@ export declare function PageActionsSlot(): import("react").JSX.Element;
|
|
|
61
81
|
* @family Actions
|
|
62
82
|
* @when The actions of a collection, an object or an overview page, on the title's row at its trailing edge. A Configuration page has none: each section saves from its footer.
|
|
63
83
|
* @instead A row's actions are the row's one button and its `ActionMenu`. A collection toolbar holds search and filters, never a page action.
|
|
64
|
-
* @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command keeps its place and icon, says its pending word and holds.
|
|
84
|
+
* @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command (`pending`) keeps its place and icon, says its pending word and holds, and the type requires `pendingLabel` whenever `pending` is set. A command here is never destructive or warning: those sit in the danger zone of the page, in a card.
|
|
65
85
|
* @words The primary is the page's main job as verb and noun: "Invite member", "New Agent". The pending word is its -ing form: "Inviting member". The menu names the page's record at its top and keeps the destructive command last, after a divider.
|
|
66
86
|
* @access DOM order is visual order. A command whose label does not name its target carries `accessibleName`. A running command is `aria-busy` and keeps focus. The three dots carry "More for {record}"; the menu returns focus to them when it closes.
|
|
67
87
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"page-actions.d.ts","sourceRoot":"","sources":["../../src/components/page-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GACzB;IAAE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE;AACrF;;;GAGG;GACD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE;AACzD;;;GAGG;GACD;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE5D,uGAAuG;AACvG,MAAM,MAAM,WAAW,GACnB;IACE,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,GACD;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAEvE,4GAA4G;AAC5G,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,WAAW,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,oGAAoG;IACpG,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAEJ,uEAAuE;AACvE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACpD,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qGAAqG;IACrG,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/D,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,cAAc,CAAC;CACzB,+BA+BA;AAED,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,gBAAgB,sCAUpF;AAYD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAa5E;AAED,yFAAyF;AACzF,wBAAgB,eAAe,gCAS9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,sCAuBlD"}
|