prime-ui-kit 0.15.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -74
- package/dist/chunks/{chunk-Q3BFRQHZ.js → chunk-2ODXLPW3.js} +169 -10
- package/dist/chunks/{chunk-XJAVS6FH.js → chunk-7WWZYGRC.js} +5482 -4179
- package/dist/chunks/{chunk-THFZIHKU.js → chunk-A4WE3UNC.js} +28219 -27605
- package/dist/chunks/{chunk-6TI4DSM5.js → chunk-PRP4B6OG.js} +1 -1
- package/dist/chunks/{chunk-2IKH55MI.js → chunk-SVFWPLNW.js} +215 -154
- package/dist/color-picker.d.ts +1 -1
- package/dist/color-picker.js +3 -3
- package/dist/components/accordion/Accordion.d.ts +52 -5
- package/dist/components/avatar/Avatar.d.ts +31 -8
- package/dist/components/badge/Badge.d.ts +93 -25
- package/dist/components/banner/Banner.d.ts +17 -10
- package/dist/components/breadcrumb/Breadcrumb.d.ts +18 -5
- package/dist/components/button/Button.d.ts +102 -43
- package/dist/components/button-group/ButtonGroup.d.ts +32 -8
- package/dist/components/card/Card.d.ts +15 -9
- package/dist/components/chart-frame/ChartFrame.d.ts +58 -51
- package/dist/components/chat/Chat.d.ts +77 -38
- package/dist/components/chat/ChatPinned.d.ts +20 -8
- package/dist/components/chat/ChatRows.d.ts +8 -1
- package/dist/components/chat/MessageList.d.ts +14 -19
- package/dist/components/chat/chatContext.d.ts +3 -3
- package/dist/components/chat/messageFlow.d.ts +1 -1
- package/dist/components/chat-list/ChatList.d.ts +88 -34
- package/dist/components/checkbox/Checkbox.d.ts +61 -12
- package/dist/components/code-block/CodeBlock.d.ts +11 -5
- package/dist/components/color-field/ColorField.d.ts +54 -14
- package/dist/components/color-picker/ColorPicker.d.ts +81 -30
- package/dist/components/color-picker/ColorPresets.d.ts +68 -13
- package/dist/components/color-swatches/ColorSwatches.d.ts +90 -18
- package/dist/components/command-menu/CommandMenu.d.ts +86 -27
- package/dist/components/composer/Composer.d.ts +82 -41
- package/dist/components/composer/useRecorder.d.ts +0 -2
- package/dist/components/confirm-dialog/ConfirmDialog.d.ts +40 -16
- package/dist/components/crossfade/Crossfade.d.ts +5 -8
- package/dist/components/data-table/ColumnsMenu.d.ts +6 -2
- package/dist/components/data-table/DataTable.d.ts +157 -58
- package/dist/components/data-table/Footer.d.ts +2 -4
- package/dist/components/data-table/Row.d.ts +1 -1
- package/dist/components/data-table/StateRows.d.ts +2 -2
- package/dist/components/data-table/reorder.d.ts +10 -10
- package/dist/components/data-table/types.d.ts +5 -0
- package/dist/components/data-table/useInfiniteRows.d.ts +3 -3
- package/dist/components/datepicker/Datepicker.d.ts +61 -12
- package/dist/components/datepicker/DatepickerPanel.d.ts +76 -16
- package/dist/components/datepicker/panelLayout.d.ts +6 -11
- package/dist/components/description-list/DescriptionList.d.ts +40 -11
- package/dist/components/digit-input/DigitInput.d.ts +50 -19
- package/dist/components/divider/Divider.d.ts +15 -5
- package/dist/components/dnd/Dnd.d.ts +152 -41
- package/dist/components/dnd/geometry.d.ts +0 -8
- package/dist/components/dnd/labels.d.ts +1 -1
- package/dist/components/dnd/useDropTarget.d.ts +0 -2
- package/dist/components/dnd/useSortableList.d.ts +6 -1
- package/dist/components/drawer/Drawer.d.ts +39 -18
- package/dist/components/dropdown/Dropdown.d.ts +90 -19
- package/dist/components/empty-page/EmptyPage.d.ts +14 -15
- package/dist/components/example-frame/ExampleFrame.d.ts +38 -8
- package/dist/components/field-list/FieldList.d.ts +57 -19
- package/dist/components/fieldset/Fieldset.d.ts +12 -7
- package/dist/components/file-upload/FileUpload.d.ts +119 -42
- package/dist/components/gallery/Gallery.d.ts +44 -16
- package/dist/components/gallery/layout.d.ts +4 -1
- package/dist/components/gantt/Gantt.d.ts +69 -34
- package/dist/components/gantt/GanttRow.d.ts +2 -2
- package/dist/components/hint/Hint.d.ts +10 -4
- package/dist/components/index.d.ts +18 -21
- package/dist/components/input/Input.d.ts +78 -25
- package/dist/components/kanban/Kanban.d.ts +64 -36
- package/dist/components/kbd/Kbd.d.ts +3 -1
- package/dist/components/label/Label.d.ts +33 -4
- package/dist/components/link-button/LinkButton.d.ts +40 -10
- package/dist/components/list/List.d.ts +48 -26
- package/dist/components/login-form/LoginForm.d.ts +66 -7
- package/dist/components/media-viewer/MediaViewer.d.ts +46 -18
- package/dist/components/media-viewer/physics.d.ts +0 -2
- package/dist/components/media-viewer/viewerEngine.d.ts +0 -1
- package/dist/components/message/Message.d.ts +27 -16
- package/dist/components/message/MessageCards.d.ts +49 -10
- package/dist/components/message/MessageFile.d.ts +19 -5
- package/dist/components/message/MessageParts.d.ts +44 -18
- package/dist/components/message/MessageReactionBar.d.ts +3 -1
- package/dist/components/message/MessageTyping.d.ts +10 -6
- package/dist/components/message/bubbleMorph.d.ts +2 -0
- package/dist/components/modal/Modal.d.ts +6 -6
- package/dist/components/native-select/NativeSelect.d.ts +22 -7
- package/dist/components/notification/Notification.d.ts +35 -11
- package/dist/components/notification/NotificationStore.d.ts +12 -3
- package/dist/components/pagination/Pagination.d.ts +29 -6
- package/dist/components/popover/Popover.d.ts +54 -31
- package/dist/components/progress-bar/ProgressBar.d.ts +37 -12
- package/dist/components/progress-circle/ProgressCircle.d.ts +32 -13
- package/dist/components/radio/Radio.d.ts +58 -15
- package/dist/components/scroll-container/ScrollContainer.d.ts +28 -14
- package/dist/components/scroll-container/useScrollEdges.d.ts +1 -24
- package/dist/components/segmented-control/SegmentedControl.d.ts +73 -15
- package/dist/components/select/Select.d.ts +104 -30
- package/dist/components/select/SelectItem.d.ts +35 -8
- package/dist/components/select/selectContext.d.ts +7 -19
- package/dist/components/sheet/Sheet.d.ts +32 -15
- package/dist/components/skeleton/Skeleton.d.ts +9 -3
- package/dist/components/slider/Slider.d.ts +55 -15
- package/dist/components/smart-filter/SmartFilter.d.ts +39 -13
- package/dist/components/sparkline/Sparkline.d.ts +42 -19
- package/dist/components/spinner/Spinner.d.ts +11 -5
- package/dist/components/stepper/Stepper.d.ts +41 -19
- package/dist/components/switch/Switch.d.ts +37 -12
- package/dist/components/tabs/Tabs.d.ts +61 -18
- package/dist/components/tag-select/TagSelect.d.ts +74 -20
- package/dist/components/textarea/Textarea.d.ts +52 -25
- package/dist/components/thumbnail/Thumbnail.d.ts +50 -20
- package/dist/components/timeline/Timeline.d.ts +85 -66
- package/dist/components/tooltip/Tooltip.d.ts +47 -17
- package/dist/components/typography/Typography.d.ts +32 -6
- package/dist/components/video-note/VideoNote.d.ts +7 -1
- package/dist/{internal → components/visually-hidden}/VisuallyHidden.d.ts +5 -5
- package/dist/components/voice-player/VoicePlayer.d.ts +16 -3
- package/dist/hooks/breakpoints.d.ts +10 -0
- package/dist/hooks/floatingPosition.d.ts +42 -0
- package/dist/hooks/useDraft.d.ts +12 -0
- package/dist/hooks/useEdgeOverflow.d.ts +5 -3
- package/dist/hooks/useElementSize.d.ts +31 -0
- package/dist/hooks/useEnterConfirm.d.ts +2 -1
- package/dist/hooks/useImageStatus.d.ts +12 -5
- package/dist/hooks/useLoadMore.d.ts +28 -0
- package/dist/hooks/useMediaQuery.d.ts +1 -3
- package/dist/hooks/useMergedRefs.d.ts +10 -4
- package/dist/hooks/useModalLayer.d.ts +13 -7
- package/dist/hooks/usePosition.d.ts +4 -42
- package/dist/hooks/usePresence.d.ts +4 -7
- package/dist/hooks/useScrollRegion.d.ts +28 -0
- package/dist/hooks/useStableValue.d.ts +6 -0
- package/dist/hooks/useSwipeDismiss.d.ts +38 -17
- package/dist/hooks/useVirtualRows.d.ts +9 -3
- package/dist/icon-set.js +2 -2
- package/dist/icons/Icon.d.ts +1 -1
- package/dist/icons/glyph.d.ts +9 -2
- package/dist/index.css +1 -1
- package/dist/index.js +15 -9
- package/dist/internal/AnchorRectContext.d.ts +2 -1
- package/dist/internal/ChartTooltip.d.ts +1 -1
- package/dist/internal/CheckMark.d.ts +2 -2
- package/dist/internal/ChoiceField.d.ts +29 -10
- package/dist/internal/ControlSizeContext.d.ts +16 -0
- package/dist/internal/Disclosure.d.ts +38 -9
- package/dist/internal/FieldAction.d.ts +20 -12
- package/dist/internal/FieldCommit.d.ts +8 -11
- package/dist/internal/FieldFrame.d.ts +100 -21
- package/dist/internal/MenuGroup.d.ts +3 -1
- package/dist/internal/MorphText.d.ts +2 -1
- package/dist/internal/ProgressLegend.d.ts +3 -2
- package/dist/internal/RegionSwap.d.ts +41 -0
- package/dist/internal/RollingNumber.d.ts +10 -1
- package/dist/internal/RowAction.d.ts +26 -0
- package/dist/internal/SwitcherScroller.d.ts +11 -0
- package/dist/internal/attachmentTile.d.ts +1 -1
- package/dist/internal/audio.d.ts +13 -0
- package/dist/internal/barPlan.d.ts +44 -0
- package/dist/{components/badge/tier.d.ts → internal/chipTier.d.ts} +7 -5
- package/dist/internal/context.d.ts +10 -1
- package/dist/internal/controlValue.d.ts +7 -0
- package/dist/internal/edgeAutoScroll.d.ts +43 -25
- package/dist/internal/fieldCell.d.ts +4 -3
- package/dist/internal/fieldClasses.d.ts +15 -2
- package/dist/internal/fileSize.d.ts +5 -1
- package/dist/internal/formatClock.d.ts +2 -0
- package/dist/internal/formatNumber.d.ts +6 -0
- package/dist/internal/glyphSwap.d.ts +5 -9
- package/dist/internal/hasContent.d.ts +6 -0
- package/dist/internal/highlightTsx.d.ts +12 -0
- package/dist/internal/iconBox.d.ts +6 -0
- package/dist/internal/iconLayout.d.ts +2 -1
- package/dist/internal/imageSlot.d.ts +6 -1
- package/dist/internal/interactiveElement.d.ts +41 -0
- package/dist/internal/labels.d.ts +6 -0
- package/dist/internal/leaveInPlace.d.ts +6 -5
- package/dist/internal/listPresence.d.ts +32 -0
- package/dist/internal/listbox.d.ts +71 -31
- package/dist/internal/longPress.d.ts +42 -0
- package/dist/internal/mediaDisk.d.ts +7 -4
- package/dist/internal/mediaPlayer.d.ts +91 -27
- package/dist/internal/mediaSession.d.ts +0 -6
- package/dist/internal/messageList.d.ts +4 -3
- package/dist/internal/motionTiming.d.ts +34 -0
- package/dist/internal/namedRole.d.ts +13 -0
- package/dist/internal/nodeText.d.ts +6 -0
- package/dist/{components/modal → internal/overlay}/DialogGuard.d.ts +3 -5
- package/dist/{components/modal → internal/overlay}/DialogParts.d.ts +86 -89
- package/dist/internal/overlay/FloatingPanel.d.ts +27 -5
- package/dist/internal/overlay/ModalDialog.d.ts +59 -0
- package/dist/internal/overlay/focus.d.ts +31 -6
- package/dist/internal/overlay/layerStack.d.ts +8 -5
- package/dist/internal/overlay/useAnchorName.d.ts +14 -0
- package/dist/internal/overlay/useContainScroll.d.ts +7 -0
- package/dist/internal/overlay/useFloatingLayer.d.ts +43 -14
- package/dist/internal/overlay/useOpenState.d.ts +22 -0
- package/dist/internal/partPresence.d.ts +31 -0
- package/dist/internal/parts.d.ts +39 -0
- package/dist/internal/progressSegments.d.ts +52 -12
- package/dist/internal/richText.d.ts +6 -34
- package/dist/internal/ring.d.ts +18 -8
- package/dist/internal/rovingFocus.d.ts +10 -5
- package/dist/{components/data-table/rowEvents.d.ts → internal/rowLink.d.ts} +0 -5
- package/dist/internal/scrollAncestors.d.ts +14 -0
- package/dist/internal/selectionIndicator.d.ts +27 -0
- package/dist/internal/slot.d.ts +23 -5
- package/dist/internal/states.d.ts +61 -0
- package/dist/internal/sticky.d.ts +5 -1
- package/dist/internal/swallowNextClick.d.ts +9 -0
- package/dist/internal/swatch.d.ts +59 -15
- package/dist/internal/textFormatting.d.ts +2 -1
- package/dist/internal/textFormattingToolbar.d.ts +3 -2
- package/dist/internal/tokenDefaults.d.ts +21 -0
- package/dist/internal/touchTarget.d.ts +5 -0
- package/dist/internal/transcript.d.ts +19 -18
- package/dist/internal/transfer.d.ts +22 -8
- package/dist/internal/transferDisk.d.ts +2 -3
- package/dist/internal/useFlipList.d.ts +44 -0
- package/dist/internal/useNearView.d.ts +4 -3
- package/dist/internal/usePendingChanges.d.ts +23 -0
- package/dist/internal/useRangeSelection.d.ts +2 -1
- package/dist/layout/app-shell/AppShell.d.ts +63 -18
- package/dist/layout/bottom-nav/BottomNav.d.ts +58 -22
- package/dist/layout/index.d.ts +4 -4
- package/dist/layout/page/Page.d.ts +263 -0
- package/dist/layout/sidebar/Sidebar.d.ts +232 -101
- package/dist/skill/SKILL.md +16 -16
- package/dist/skill/anti-slop.md +204 -27
- package/dist/skill/api-contract.md +115 -35
- package/dist/skill/cheatsheet.md +60 -55
- package/dist/skill/checklist.md +61 -89
- package/dist/skill/choosing.md +26 -27
- package/dist/skill/components.md +50 -50
- package/dist/skill/composition.md +220 -185
- package/dist/skill/foundations.md +39 -32
- package/dist/skill/layouts.md +82 -143
- package/dist/skill/motion.md +26 -31
- package/dist/skill/reference/components/accordion/COMPONENT.md +16 -9
- package/dist/skill/reference/components/accordion/examples/overview.tsx +2 -2
- package/dist/skill/reference/components/accordion/examples/sizes.tsx +6 -8
- package/dist/skill/reference/components/accordion/examples/states.tsx +27 -24
- package/dist/skill/reference/components/accordion/examples/variants.tsx +6 -8
- package/dist/skill/reference/components/accordion/examples/with-icon.tsx +22 -19
- package/dist/skill/reference/components/avatar/COMPONENT.md +24 -17
- package/dist/skill/reference/components/avatar/examples/examples.module.css +1 -4
- package/dist/skill/reference/components/avatar/examples/overview.tsx +3 -3
- package/dist/skill/reference/components/avatar/examples/presence.tsx +4 -4
- package/dist/skill/reference/components/avatar/examples/src-from-state.tsx +3 -3
- package/dist/skill/reference/components/avatar/examples/states.tsx +4 -4
- package/dist/skill/reference/components/avatar/examples/team-group.tsx +3 -3
- package/dist/skill/reference/components/badge/COMPONENT.md +66 -34
- package/dist/skill/reference/components/badge/examples/controlled.tsx +32 -0
- package/dist/skill/reference/components/badge/examples/examples.module.css +2 -2
- package/dist/skill/reference/components/badge/examples/filter-values.tsx +4 -6
- package/dist/skill/reference/components/badge/examples/in-controls.tsx +1 -1
- package/dist/skill/reference/components/badge/examples/overview.tsx +6 -5
- package/dist/skill/reference/components/badge/examples/square.tsx +21 -0
- package/dist/skill/reference/components/badge/examples/states.tsx +4 -4
- package/dist/skill/reference/components/badge/examples/with-icon.tsx +10 -1
- package/dist/skill/reference/components/banner/COMPONENT.md +13 -9
- package/dist/skill/reference/components/banner/examples/dismissible.tsx +3 -19
- package/dist/skill/reference/components/banner/examples/examples.module.css +6 -1
- package/dist/skill/reference/components/banner/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/banner/examples/page-strip.tsx +24 -22
- package/dist/skill/reference/components/breadcrumb/COMPONENT.md +23 -16
- package/dist/skill/reference/components/breadcrumb/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/breadcrumb/examples/overflow.tsx +1 -1
- package/dist/skill/reference/components/breadcrumb/examples/sizes.tsx +6 -8
- package/dist/skill/reference/components/breadcrumb/examples/with-icon.tsx +15 -8
- package/dist/skill/reference/components/button/COMPONENT.md +67 -30
- package/dist/skill/reference/components/button/examples/align.tsx +25 -0
- package/dist/skill/reference/components/button/examples/controlled.tsx +21 -0
- package/dist/skill/reference/components/button/examples/density.tsx +45 -0
- package/dist/skill/reference/components/button/examples/examples.module.css +14 -25
- package/dist/skill/reference/components/button/examples/hold-to-confirm.tsx +1 -1
- package/dist/skill/reference/components/button/examples/label-morph.tsx +1 -1
- package/dist/skill/reference/components/button/examples/on-colored-host.tsx +19 -19
- package/dist/skill/reference/components/button/examples/over-media.tsx +7 -1
- package/dist/skill/reference/components/button/examples/toggle.tsx +2 -10
- package/dist/skill/reference/components/button-group/COMPONENT.md +21 -15
- package/dist/skill/reference/components/button-group/examples/controlled.tsx +1 -1
- package/dist/skill/reference/components/card/COMPONENT.md +21 -10
- package/dist/skill/reference/components/card/examples/content-templates.tsx +8 -2
- package/dist/skill/reference/components/card/examples/examples.module.css +4 -16
- package/dist/skill/reference/components/card/examples/overview.tsx +11 -11
- package/dist/skill/reference/components/card/examples/screen.module.css +1 -1
- package/dist/skill/reference/components/card/examples/screen.tsx +185 -198
- package/dist/skill/reference/components/card/examples/variants.tsx +74 -47
- package/dist/skill/reference/components/chart-frame/COMPONENT.md +24 -28
- package/dist/skill/reference/components/chart-frame/examples/controlled.tsx +9 -7
- package/dist/skill/reference/components/chart-frame/examples/fill-height.tsx +13 -15
- package/dist/skill/reference/components/chart-frame/examples/narrow.tsx +24 -5
- package/dist/skill/reference/components/chart-frame/examples/overview.tsx +5 -2
- package/dist/skill/reference/components/chart-frame/examples/states.tsx +72 -64
- package/dist/skill/reference/components/chart-frame/examples/tooltip.tsx +27 -26
- package/dist/skill/reference/components/chat/COMPONENT.md +39 -26
- package/dist/skill/reference/components/chat/examples/group-chat.tsx +2 -2
- package/dist/skill/reference/components/chat/examples/overview.tsx +119 -130
- package/dist/skill/reference/components/chat/examples/reactions.tsx +18 -23
- package/dist/skill/reference/components/chat/examples/screen.module.css +1 -1
- package/dist/skill/reference/components/chat/examples/screen.tsx +212 -242
- package/dist/skill/reference/components/chat/examples/states.tsx +23 -22
- package/dist/skill/reference/components/chat-list/COMPONENT.md +11 -6
- package/dist/skill/reference/components/chat-list/examples/controlled.tsx +2 -2
- package/dist/skill/reference/components/chat-list/examples/examples.module.css +8 -8
- package/dist/skill/reference/components/chat-list/examples/live.tsx +29 -22
- package/dist/skill/reference/components/chat-list/examples/sizes.tsx +6 -8
- package/dist/skill/reference/components/chat-list/examples/states.tsx +42 -38
- package/dist/skill/reference/components/checkbox/COMPONENT.md +27 -14
- package/dist/skill/reference/components/checkbox/examples/controlled.tsx +18 -16
- package/dist/skill/reference/components/checkbox/examples/examples.module.css +15 -56
- package/dist/skill/reference/components/checkbox/examples/in-form.tsx +16 -16
- package/dist/skill/reference/components/checkbox/examples/indicator.tsx +19 -64
- package/dist/skill/reference/components/checkbox/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/checkbox/examples/states.tsx +1 -1
- package/dist/skill/reference/components/checkbox/examples/without-label.tsx +1 -1
- package/dist/skill/reference/components/code-block/COMPONENT.md +16 -12
- package/dist/skill/reference/components/code-block/examples/color-scheme.tsx +2 -4
- package/dist/skill/reference/components/code-block/examples/examples.module.css +1 -9
- package/dist/skill/reference/components/code-block/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/color-field/COMPONENT.md +15 -9
- package/dist/skill/reference/components/color-field/examples/examples.module.css +4 -5
- package/dist/skill/reference/components/color-field/examples/in-form.tsx +15 -13
- package/dist/skill/reference/components/color-field/examples/sizes.tsx +5 -1
- package/dist/skill/reference/components/color-field/examples/states.tsx +15 -3
- package/dist/skill/reference/components/color-picker/COMPONENT.md +69 -22
- package/dist/skill/reference/components/color-picker/examples/controlled.tsx +16 -5
- package/dist/skill/reference/components/color-picker/examples/examples.module.css +8 -12
- package/dist/skill/reference/components/color-picker/examples/in-form.tsx +24 -22
- package/dist/skill/reference/components/color-picker/examples/overview.tsx +6 -11
- package/dist/skill/reference/components/color-picker/examples/panel.tsx +1 -1
- package/dist/skill/reference/components/color-picker/examples/sizes.tsx +10 -16
- package/dist/skill/reference/components/color-picker/examples/states.tsx +28 -23
- package/dist/skill/reference/components/color-swatches/COMPONENT.md +22 -8
- package/dist/skill/reference/components/color-swatches/examples/examples.module.css +3 -4
- package/dist/skill/reference/components/color-swatches/examples/in-form.tsx +19 -17
- package/dist/skill/reference/components/color-swatches/examples/palette.tsx +24 -0
- package/dist/skill/reference/components/color-swatches/examples/wrapping.tsx +17 -2
- package/dist/skill/reference/components/command-menu/COMPONENT.md +60 -20
- package/dist/skill/reference/components/command-menu/examples/sizes.tsx +20 -15
- package/dist/skill/reference/components/command-menu/examples/states.tsx +46 -24
- package/dist/skill/reference/components/composer/COMPONENT.md +42 -24
- package/dist/skill/reference/components/composer/examples/examples.module.css +0 -9
- package/dist/skill/reference/components/composer/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/composer/examples/reply-edit.tsx +3 -3
- package/dist/skill/reference/components/composer/examples/sizes.tsx +3 -5
- package/dist/skill/reference/components/composer/examples/states.tsx +4 -6
- package/dist/skill/reference/components/confirm-dialog/COMPONENT.md +26 -13
- package/dist/skill/reference/components/confirm-dialog/examples/dismiss.tsx +27 -0
- package/dist/skill/reference/components/confirm-dialog/examples/failure.tsx +9 -16
- package/dist/skill/reference/components/crossfade/COMPONENT.md +13 -7
- package/dist/skill/reference/components/crossfade/examples/examples.module.css +1 -40
- package/dist/skill/reference/components/crossfade/examples/fill.tsx +16 -19
- package/dist/skill/reference/components/crossfade/examples/overview.tsx +14 -16
- package/dist/skill/reference/components/crossfade/examples/record-switch.tsx +6 -11
- package/dist/skill/reference/components/crossfade/examples/screen.module.css +1 -24
- package/dist/skill/reference/components/crossfade/examples/screen.tsx +108 -124
- package/dist/skill/reference/components/data-table/COMPONENT.md +36 -26
- package/dist/skill/reference/components/data-table/examples/controlled.tsx +14 -2
- package/dist/skill/reference/components/data-table/examples/examples.module.css +10 -9
- package/dist/skill/reference/components/data-table/examples/narrow.tsx +5 -1
- package/dist/skill/reference/components/data-table/examples/row-link.tsx +2 -1
- package/dist/skill/reference/components/data-table/examples/screen.module.css +2 -2
- package/dist/skill/reference/components/data-table/examples/screen.tsx +53 -62
- package/dist/skill/reference/components/data-table/examples/server.tsx +6 -2
- package/dist/skill/reference/components/data-table/examples/sizes.tsx +17 -17
- package/dist/skill/reference/components/data-table/examples/states.tsx +37 -29
- package/dist/skill/reference/components/datepicker/COMPONENT.md +53 -22
- package/dist/skill/reference/components/datepicker/examples/dismiss.tsx +15 -0
- package/dist/skill/reference/components/datepicker/examples/examples.module.css +9 -2
- package/dist/skill/reference/components/datepicker/examples/in-form.tsx +33 -25
- package/dist/skill/reference/components/datepicker/examples/inline-panel.tsx +3 -1
- package/dist/skill/reference/components/datepicker/examples/sizes.tsx +2 -2
- package/dist/skill/reference/components/datepicker/examples/states.tsx +2 -2
- package/dist/skill/reference/components/datepicker/examples/validation.tsx +3 -3
- package/dist/skill/reference/components/description-list/COMPONENT.md +24 -9
- package/dist/skill/reference/components/description-list/examples/examples.module.css +4 -24
- package/dist/skill/reference/components/description-list/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/description-list/examples/screen.module.css +0 -18
- package/dist/skill/reference/components/description-list/examples/screen.tsx +119 -134
- package/dist/skill/reference/components/description-list/examples/sizes.tsx +2 -4
- package/dist/skill/reference/components/description-list/examples/structure.tsx +6 -7
- package/dist/skill/reference/components/description-list/examples/totals.tsx +40 -0
- package/dist/skill/reference/components/digit-input/COMPONENT.md +12 -6
- package/dist/skill/reference/components/digit-input/examples/examples.module.css +2 -2
- package/dist/skill/reference/components/digit-input/examples/grouped.tsx +4 -4
- package/dist/skill/reference/components/digit-input/examples/in-form.tsx +1 -1
- package/dist/skill/reference/components/digit-input/examples/sizes.tsx +5 -3
- package/dist/skill/reference/components/digit-input/examples/states.tsx +14 -6
- package/dist/skill/reference/components/digit-input/examples/validation.tsx +1 -1
- package/dist/skill/reference/components/divider/COMPONENT.md +28 -14
- package/dist/skill/reference/components/divider/examples/align.tsx +2 -4
- package/dist/skill/reference/components/divider/examples/examples.module.css +16 -17
- package/dist/skill/reference/components/divider/examples/or-separator.tsx +3 -5
- package/dist/skill/reference/components/divider/examples/overview.tsx +18 -16
- package/dist/skill/reference/components/divider/examples/vertical.tsx +25 -8
- package/dist/skill/reference/components/divider/examples/with-icon.tsx +1 -1
- package/dist/skill/reference/components/dnd/COMPONENT.md +52 -34
- package/dist/skill/reference/components/dnd/examples/drop-zones.tsx +1 -1
- package/dist/skill/reference/components/dnd/examples/examples.module.css +7 -7
- package/dist/skill/reference/components/dnd/examples/states.tsx +41 -35
- package/dist/skill/reference/components/drawer/COMPONENT.md +38 -15
- package/dist/skill/reference/components/drawer/examples/guard.tsx +1 -3
- package/dist/skill/reference/components/drawer/examples/header-actions.tsx +1 -1
- package/dist/skill/reference/components/drawer/examples/in-form.tsx +31 -31
- package/dist/skill/reference/components/drawer/examples/placement.tsx +1 -1
- package/dist/skill/reference/components/drawer/examples/screen.tsx +137 -160
- package/dist/skill/reference/components/drawer/examples/sizes.tsx +32 -27
- package/dist/skill/reference/components/dropdown/COMPONENT.md +59 -24
- package/dist/skill/reference/components/dropdown/examples/context-menu.tsx +75 -0
- package/dist/skill/reference/components/dropdown/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/dropdown/examples/sizes.tsx +39 -34
- package/dist/skill/reference/components/dropdown/examples/states.tsx +37 -29
- package/dist/skill/reference/components/empty-page/COMPONENT.md +20 -9
- package/dist/skill/reference/components/empty-page/examples/compact.tsx +28 -18
- package/dist/skill/reference/components/empty-page/examples/examples.module.css +0 -43
- package/dist/skill/reference/components/empty-page/examples/narrow.tsx +3 -3
- package/dist/skill/reference/components/empty-page/examples/region-error.tsx +6 -11
- package/dist/skill/reference/components/empty-page/examples/sizes.tsx +13 -13
- package/dist/skill/reference/components/empty-page/examples/variants.tsx +34 -30
- package/dist/skill/reference/components/example-frame/COMPONENT.md +23 -11
- package/dist/skill/reference/components/example-frame/examples/controlled.tsx +3 -3
- package/dist/skill/reference/components/field-list/COMPONENT.md +14 -8
- package/dist/skill/reference/components/field-list/examples/screen.module.css +1 -1
- package/dist/skill/reference/components/field-list/examples/screen.tsx +19 -19
- package/dist/skill/reference/components/field-list/examples/sizes.tsx +32 -26
- package/dist/skill/reference/components/field-list/examples/states.tsx +37 -31
- package/dist/skill/reference/components/fieldset/COMPONENT.md +11 -6
- package/dist/skill/reference/components/fieldset/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/fieldset/examples/states.tsx +1 -1
- package/dist/skill/reference/components/file-upload/COMPONENT.md +68 -30
- package/dist/skill/reference/components/file-upload/examples/avatar-upload.tsx +5 -5
- package/dist/skill/reference/components/file-upload/examples/custom-body.tsx +12 -7
- package/dist/skill/reference/components/file-upload/examples/examples.module.css +4 -4
- package/dist/skill/reference/components/file-upload/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/file-upload/examples/row-parts.tsx +4 -4
- package/dist/skill/reference/components/file-upload/examples/screen.module.css +4 -4
- package/dist/skill/reference/components/file-upload/examples/screen.tsx +70 -84
- package/dist/skill/reference/components/file-upload/examples/sizes.tsx +1 -3
- package/dist/skill/reference/components/file-upload/examples/states.tsx +1 -3
- package/dist/skill/reference/components/file-upload/examples/variants.tsx +13 -7
- package/dist/skill/reference/components/gallery/COMPONENT.md +17 -7
- package/dist/skill/reference/components/gallery/examples/album-sizes.tsx +52 -0
- package/dist/skill/reference/components/gallery/examples/controlled.tsx +40 -0
- package/dist/skill/reference/components/gallery/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/gallery/examples/overview.tsx +15 -43
- package/dist/skill/reference/components/gallery/examples/transfer.tsx +22 -13
- package/dist/skill/reference/components/gantt/COMPONENT.md +21 -15
- package/dist/skill/reference/components/gantt/examples/examples.module.css +0 -16
- package/dist/skill/reference/components/gantt/examples/occupancy.tsx +2 -2
- package/dist/skill/reference/components/gantt/examples/screen.module.css +1 -1
- package/dist/skill/reference/components/gantt/examples/screen.tsx +56 -74
- package/dist/skill/reference/components/gantt/examples/sizes.tsx +16 -16
- package/dist/skill/reference/components/gantt/examples/states.tsx +34 -30
- package/dist/skill/reference/components/gantt/examples/variants.tsx +27 -25
- package/dist/skill/reference/components/hint/COMPONENT.md +24 -14
- package/dist/skill/reference/components/hint/examples/examples.module.css +10 -1
- package/dist/skill/reference/components/hint/examples/hint-or-error.tsx +2 -2
- package/dist/skill/reference/components/hint/examples/overview.tsx +10 -11
- package/dist/skill/reference/components/hint/examples/sizes.tsx +1 -1
- package/dist/skill/reference/components/input/COMPONENT.md +10 -6
- package/dist/skill/reference/components/input/examples/affixes.tsx +2 -2
- package/dist/skill/reference/components/input/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/input/examples/sizes.tsx +9 -5
- package/dist/skill/reference/components/input/examples/states.tsx +39 -23
- package/dist/skill/reference/components/input/examples/with-icon.tsx +24 -16
- package/dist/skill/reference/components/kanban/COMPONENT.md +30 -24
- package/dist/skill/reference/components/kanban/examples/columns.tsx +14 -19
- package/dist/skill/reference/components/kanban/examples/item-link.tsx +2 -2
- package/dist/skill/reference/components/kanban/examples/limits.tsx +1 -1
- package/dist/skill/reference/components/kanban/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/kanban/examples/screen.module.css +2 -4
- package/dist/skill/reference/components/kanban/examples/screen.tsx +55 -68
- package/dist/skill/reference/components/kanban/examples/states.tsx +37 -58
- package/dist/skill/reference/components/kanban/examples/variants.tsx +0 -3
- package/dist/skill/reference/components/kbd/COMPONENT.md +11 -7
- package/dist/skill/reference/components/kbd/examples/examples.module.css +1 -20
- package/dist/skill/reference/components/kbd/examples/in-controls.tsx +2 -2
- package/dist/skill/reference/components/kbd/examples/shortcut-list.tsx +14 -26
- package/dist/skill/reference/components/label/COMPONENT.md +26 -11
- package/dist/skill/reference/components/label/examples/examples.module.css +12 -9
- package/dist/skill/reference/components/label/examples/overview.tsx +6 -10
- package/dist/skill/reference/components/label/examples/structure.tsx +2 -2
- package/dist/skill/reference/components/link-button/COMPONENT.md +33 -20
- package/dist/skill/reference/components/link-button/examples/as-child.tsx +1 -1
- package/dist/skill/reference/components/link-button/examples/external-link.tsx +1 -1
- package/dist/skill/reference/components/link-button/examples/overview.tsx +4 -2
- package/dist/skill/reference/components/link-button/examples/variants.tsx +2 -2
- package/dist/skill/reference/components/list/COMPONENT.md +24 -16
- package/dist/skill/reference/components/list/examples/examples.module.css +0 -8
- package/dist/skill/reference/components/list/examples/overflow.tsx +1 -1
- package/dist/skill/reference/components/list/examples/overview.tsx +31 -30
- package/dist/skill/reference/components/list/examples/sizes.tsx +23 -23
- package/dist/skill/reference/components/list/examples/states.tsx +38 -21
- package/dist/skill/reference/components/list/examples/with-icon.tsx +16 -14
- package/dist/skill/reference/components/login-form/COMPONENT.md +69 -16
- package/dist/skill/reference/components/login-form/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/login-form/examples/register.tsx +1 -1
- package/dist/skill/reference/components/media-viewer/COMPONENT.md +12 -8
- package/dist/skill/reference/components/media-viewer/examples/controlled.tsx +16 -16
- package/dist/skill/reference/components/media-viewer/examples/examples.module.css +3 -5
- package/dist/skill/reference/components/media-viewer/examples/video.tsx +1 -1
- package/dist/skill/reference/components/message/COMPONENT.md +102 -46
- package/dist/skill/reference/components/message/examples/typing.tsx +5 -5
- package/dist/skill/reference/components/modal/COMPONENT.md +71 -37
- package/dist/skill/reference/components/modal/examples/dismiss.tsx +35 -27
- package/dist/skill/reference/components/modal/examples/enter-key.tsx +22 -25
- package/dist/skill/reference/components/modal/examples/examples.module.css +0 -7
- package/dist/skill/reference/components/modal/examples/guard.tsx +2 -4
- package/dist/skill/reference/components/modal/examples/in-form.tsx +28 -28
- package/dist/skill/reference/components/modal/examples/long-content.tsx +6 -4
- package/dist/skill/reference/components/modal/examples/sizes.tsx +36 -31
- package/dist/skill/reference/components/modal/examples/structure.tsx +1 -1
- package/dist/skill/reference/components/native-select/COMPONENT.md +7 -3
- package/dist/skill/reference/components/native-select/examples/examples.module.css +3 -3
- package/dist/skill/reference/components/native-select/examples/in-form.tsx +28 -29
- package/dist/skill/reference/components/native-select/examples/sizes.tsx +2 -2
- package/dist/skill/reference/components/native-select/examples/states.tsx +2 -2
- package/dist/skill/reference/components/notification/COMPONENT.md +36 -31
- package/dist/skill/reference/components/notification/examples/examples.module.css +1 -2
- package/dist/skill/reference/components/notification/examples/in-form.tsx +28 -20
- package/dist/skill/reference/components/notification/examples/sizes.tsx +16 -12
- package/dist/skill/reference/components/notification/examples/undo.tsx +7 -15
- package/dist/skill/reference/components/pagination/COMPONENT.md +29 -18
- package/dist/skill/reference/components/pagination/examples/controlled.tsx +2 -1
- package/dist/skill/reference/components/pagination/examples/narrow.tsx +5 -5
- package/dist/skill/reference/components/popover/COMPONENT.md +44 -20
- package/dist/skill/reference/components/popover/examples/controlled-open.tsx +6 -4
- package/dist/skill/reference/components/popover/examples/dismiss.tsx +37 -28
- package/dist/skill/reference/components/popover/examples/examples.module.css +2 -2
- package/dist/skill/reference/components/popover/examples/sizes.tsx +32 -27
- package/dist/skill/reference/components/popover/examples/width.tsx +57 -0
- package/dist/skill/reference/components/progress-bar/COMPONENT.md +21 -29
- package/dist/skill/reference/components/progress-bar/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/progress-circle/COMPONENT.md +21 -29
- package/dist/skill/reference/components/progress-circle/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/progress-circle/examples/on-color.tsx +16 -0
- package/dist/skill/reference/components/progress-circle/examples/variants.tsx +1 -0
- package/dist/skill/reference/components/radio/COMPONENT.md +13 -4
- package/dist/skill/reference/components/radio/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/scroll-container/COMPONENT.md +18 -12
- package/dist/skill/reference/components/scroll-container/examples/auto-scroll.tsx +8 -4
- package/dist/skill/reference/components/scroll-container/examples/edges.tsx +4 -4
- package/dist/skill/reference/components/scroll-container/examples/examples.module.css +7 -51
- package/dist/skill/reference/components/scroll-container/examples/load-more.tsx +4 -4
- package/dist/skill/reference/components/scroll-container/examples/lock.tsx +4 -4
- package/dist/skill/reference/components/scroll-container/examples/log.tsx +97 -0
- package/dist/skill/reference/components/scroll-container/examples/overscroll.tsx +4 -4
- package/dist/skill/reference/components/scroll-container/examples/overview.tsx +5 -5
- package/dist/skill/reference/components/scroll-container/examples/scrollbar.tsx +4 -4
- package/dist/skill/reference/components/scroll-container/examples/snap.tsx +2 -2
- package/dist/skill/reference/components/scroll-container/examples/variants.tsx +1 -0
- package/dist/skill/reference/components/segmented-control/COMPONENT.md +24 -12
- package/dist/skill/reference/components/segmented-control/examples/controlled.tsx +2 -4
- package/dist/skill/reference/components/segmented-control/examples/examples.module.css +0 -8
- package/dist/skill/reference/components/segmented-control/examples/scroll.tsx +1 -1
- package/dist/skill/reference/components/select/COMPONENT.md +33 -9
- package/dist/skill/reference/components/select/examples/dismiss.tsx +26 -0
- package/dist/skill/reference/components/select/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/select/examples/server-search.tsx +6 -2
- package/dist/skill/reference/components/select/examples/sizes.tsx +2 -2
- package/dist/skill/reference/components/select/examples/states.tsx +2 -2
- package/dist/skill/reference/components/select/examples/with-icon.tsx +20 -18
- package/dist/skill/reference/components/sheet/COMPONENT.md +44 -21
- package/dist/skill/reference/components/sheet/examples/header-actions.tsx +23 -4
- package/dist/skill/reference/components/sheet/examples/overview.tsx +25 -10
- package/dist/skill/reference/components/skeleton/COMPONENT.md +8 -4
- package/dist/skill/reference/components/skeleton/examples/examples.module.css +1 -13
- package/dist/skill/reference/components/skeleton/examples/with-crossfade.tsx +7 -7
- package/dist/skill/reference/components/slider/COMPONENT.md +13 -8
- package/dist/skill/reference/components/slider/examples/examples.module.css +6 -7
- package/dist/skill/reference/components/slider/examples/hint-and-error.tsx +3 -5
- package/dist/skill/reference/components/slider/examples/in-form.tsx +21 -19
- package/dist/skill/reference/components/slider/examples/states.tsx +14 -10
- package/dist/skill/reference/components/smart-filter/COMPONENT.md +42 -22
- package/dist/skill/reference/components/smart-filter/examples/examples.module.css +3 -21
- package/dist/skill/reference/components/smart-filter/examples/many-values.tsx +12 -8
- package/dist/skill/reference/components/smart-filter/examples/ranges.tsx +2 -1
- package/dist/skill/reference/components/smart-filter/examples/sizes.tsx +9 -7
- package/dist/skill/reference/components/sparkline/COMPONENT.md +8 -3
- package/dist/skill/reference/components/sparkline/examples/curve.tsx +16 -11
- package/dist/skill/reference/components/sparkline/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/sparkline/examples/signed-bars.tsx +2 -2
- package/dist/skill/reference/components/sparkline/examples/states.tsx +14 -10
- package/dist/skill/reference/components/spinner/COMPONENT.md +15 -9
- package/dist/skill/reference/components/spinner/examples/examples.module.css +2 -14
- package/dist/skill/reference/components/spinner/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/stepper/COMPONENT.md +50 -41
- package/dist/skill/reference/components/stepper/examples/examples.module.css +1 -6
- package/dist/skill/reference/components/stepper/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/stepper/examples/sizes.tsx +6 -8
- package/dist/skill/reference/components/stepper/examples/states.tsx +44 -43
- package/dist/skill/reference/components/stepper/examples/with-icon.tsx +19 -17
- package/dist/skill/reference/components/switch/COMPONENT.md +22 -9
- package/dist/skill/reference/components/switch/examples/examples.module.css +2 -2
- package/dist/skill/reference/components/switch/examples/states.tsx +3 -3
- package/dist/skill/reference/components/tabs/COMPONENT.md +21 -16
- package/dist/skill/reference/components/tabs/examples/in-drawer.tsx +1 -1
- package/dist/skill/reference/components/tabs/examples/sizes.tsx +5 -10
- package/dist/skill/reference/components/tabs/examples/variants.tsx +19 -23
- package/dist/skill/reference/components/tag-select/COMPONENT.md +19 -6
- package/dist/skill/reference/components/tag-select/examples/creatable.tsx +2 -2
- package/dist/skill/reference/components/tag-select/examples/dismiss.tsx +23 -0
- package/dist/skill/reference/components/tag-select/examples/examples.module.css +3 -3
- package/dist/skill/reference/components/tag-select/examples/in-form.tsx +31 -32
- package/dist/skill/reference/components/tag-select/examples/sizes.tsx +2 -2
- package/dist/skill/reference/components/tag-select/examples/states.tsx +2 -2
- package/dist/skill/reference/components/textarea/COMPONENT.md +10 -6
- package/dist/skill/reference/components/textarea/examples/examples.module.css +3 -10
- package/dist/skill/reference/components/textarea/examples/in-form.tsx +3 -3
- package/dist/skill/reference/components/textarea/examples/sizes.tsx +10 -7
- package/dist/skill/reference/components/textarea/examples/states.tsx +29 -13
- package/dist/skill/reference/components/textarea/examples/validation.tsx +45 -36
- package/dist/skill/reference/components/thumbnail/COMPONENT.md +17 -13
- package/dist/skill/reference/components/thumbnail/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/thumbnail/examples/states.tsx +1 -1
- package/dist/skill/reference/components/thumbnail/examples/variants.tsx +12 -1
- package/dist/skill/reference/components/timeline/COMPONENT.md +51 -35
- package/dist/skill/reference/components/timeline/examples/links.tsx +14 -14
- package/dist/skill/reference/components/timeline/examples/narrow.tsx +6 -6
- package/dist/skill/reference/components/timeline/examples/overview.tsx +6 -6
- package/dist/skill/reference/components/timeline/examples/sizes.tsx +28 -23
- package/dist/skill/reference/components/timeline/examples/structure.tsx +30 -30
- package/dist/skill/reference/components/timeline/examples/variants.tsx +40 -28
- package/dist/skill/reference/components/tooltip/COMPONENT.md +10 -6
- package/dist/skill/reference/components/tooltip/examples/examples.module.css +1 -5
- package/dist/skill/reference/components/tooltip/examples/non-interactive-trigger.tsx +1 -1
- package/dist/skill/reference/components/tooltip/examples/sizes.tsx +17 -10
- package/dist/skill/reference/components/typography/COMPONENT.md +18 -3
- package/dist/skill/reference/components/typography/examples/examples.module.css +3 -6
- package/dist/skill/reference/components/typography/examples/numeric.tsx +16 -0
- package/dist/skill/reference/components/video-note/COMPONENT.md +11 -7
- package/dist/skill/reference/components/visually-hidden/COMPONENT.md +8 -4
- package/dist/skill/reference/components/visually-hidden/examples/assertive.tsx +1 -1
- package/dist/skill/reference/components/visually-hidden/examples/overview.tsx +17 -7
- package/dist/skill/reference/components/voice-player/COMPONENT.md +15 -7
- package/dist/skill/reference/foundation.md +568 -0
- package/dist/skill/reference/layout/app-shell/COMPONENT.md +53 -36
- package/dist/skill/reference/layout/app-shell/examples/examples.module.css +2 -22
- package/dist/skill/reference/layout/app-shell/examples/footer.tsx +10 -10
- package/dist/skill/reference/layout/app-shell/examples/overview.tsx +21 -25
- package/dist/skill/reference/layout/app-shell/examples/screen.module.css +2 -2
- package/dist/skill/reference/layout/app-shell/examples/screen.tsx +48 -47
- package/dist/skill/reference/layout/app-shell/examples/template.tsx +13 -17
- package/dist/skill/reference/layout/bottom-nav/COMPONENT.md +30 -20
- package/dist/skill/reference/layout/bottom-nav/examples/examples.module.css +2 -7
- package/dist/skill/reference/layout/bottom-nav/examples/floating-action.tsx +10 -19
- package/dist/skill/reference/layout/bottom-nav/examples/floating.tsx +10 -19
- package/dist/skill/reference/layout/bottom-nav/examples/in-app-shell.tsx +11 -19
- package/dist/skill/reference/layout/bottom-nav/examples/router.tsx +6 -5
- package/dist/skill/reference/layout/page/COMPONENT.md +353 -0
- package/dist/skill/reference/layout/page/examples/actions-collapse.tsx +45 -0
- package/dist/skill/reference/layout/page/examples/collapse.tsx +68 -0
- package/dist/skill/reference/{components/page-content → layout/page}/examples/examples.module.css +32 -16
- package/{src/components/page-content → dist/skill/reference/layout/page}/examples/grid.tsx +18 -16
- package/dist/skill/reference/layout/page/examples/list-detail.tsx +112 -0
- package/dist/skill/reference/layout/page/examples/narrow.tsx +75 -0
- package/dist/skill/reference/layout/page/examples/overview.tsx +57 -0
- package/{src/components/page-content → dist/skill/reference/layout/page}/examples/screen.module.css +1 -1
- package/{src/components/page-content → dist/skill/reference/layout/page}/examples/screen.tsx +29 -19
- package/{src/components/page-content → dist/skill/reference/layout/page}/examples/sections.tsx +17 -24
- package/dist/skill/reference/layout/page/examples/structure.tsx +41 -0
- package/dist/skill/reference/{components/page-toolbar/examples/narrow.tsx → layout/page/examples/tools.tsx} +38 -35
- package/dist/skill/reference/layout/page/examples/top-bar.tsx +85 -0
- package/dist/skill/reference/{components/page-content → layout/page}/examples/variants.tsx +13 -13
- package/dist/skill/reference/layout/sidebar/COMPONENT.md +51 -40
- package/dist/skill/reference/layout/sidebar/examples/account.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/brand-header.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/collapsible-groups.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/controlled-open.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/controlled.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/custom-part.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/dismiss.tsx +50 -0
- package/dist/skill/reference/layout/sidebar/examples/examples.module.css +7 -32
- package/dist/skill/reference/layout/sidebar/examples/narrow.tsx +47 -42
- package/dist/skill/reference/layout/sidebar/examples/nested-items.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/overview.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/persist.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/router.tsx +12 -13
- package/dist/skill/reference/layout/sidebar/examples/sizes.tsx +6 -6
- package/dist/skill/responsive.md +116 -105
- package/dist/skill/ux.md +21 -9
- package/dist/theme/applyTheme.d.ts +7 -6
- package/dist/tokens/hues.d.ts +8 -0
- package/dist/tokens/layers.d.ts +5 -16
- package/dist/tokens/offGrid.d.ts +7 -0
- package/dist/tokens/primitives.d.ts +34 -9
- package/dist/tokens/semantic.d.ts +208 -51
- package/dist/tokens/themes/dark.d.ts +39 -33
- package/package.json +5 -3
- package/src/components/accordion/COMPONENT.md +16 -9
- package/src/components/accordion/examples/overview.tsx +2 -2
- package/src/components/accordion/examples/sizes.tsx +6 -8
- package/src/components/accordion/examples/states.tsx +27 -24
- package/src/components/accordion/examples/variants.tsx +6 -8
- package/src/components/accordion/examples/with-icon.tsx +22 -19
- package/src/components/avatar/COMPONENT.md +24 -17
- package/src/components/avatar/examples/examples.module.css +1 -4
- package/src/components/avatar/examples/overview.tsx +3 -3
- package/src/components/avatar/examples/presence.tsx +4 -4
- package/src/components/avatar/examples/src-from-state.tsx +3 -3
- package/src/components/avatar/examples/states.tsx +4 -4
- package/src/components/avatar/examples/team-group.tsx +3 -3
- package/src/components/badge/COMPONENT.md +66 -34
- package/src/components/badge/examples/controlled.tsx +32 -0
- package/src/components/badge/examples/examples.module.css +2 -2
- package/src/components/badge/examples/filter-values.tsx +4 -6
- package/src/components/badge/examples/in-controls.tsx +1 -1
- package/src/components/badge/examples/overview.tsx +6 -5
- package/src/components/badge/examples/square.tsx +21 -0
- package/src/components/badge/examples/states.tsx +4 -4
- package/src/components/badge/examples/with-icon.tsx +10 -1
- package/src/components/banner/COMPONENT.md +13 -9
- package/src/components/banner/examples/dismissible.tsx +3 -19
- package/src/components/banner/examples/examples.module.css +6 -1
- package/src/components/banner/examples/overview.tsx +1 -1
- package/src/components/banner/examples/page-strip.tsx +24 -22
- package/src/components/breadcrumb/COMPONENT.md +23 -16
- package/src/components/breadcrumb/examples/examples.module.css +1 -1
- package/src/components/breadcrumb/examples/overflow.tsx +1 -1
- package/src/components/breadcrumb/examples/sizes.tsx +6 -8
- package/src/components/breadcrumb/examples/with-icon.tsx +15 -8
- package/src/components/button/COMPONENT.md +67 -30
- package/src/components/button/examples/align.tsx +25 -0
- package/src/components/button/examples/controlled.tsx +21 -0
- package/src/components/button/examples/density.tsx +45 -0
- package/src/components/button/examples/examples.module.css +14 -25
- package/src/components/button/examples/hold-to-confirm.tsx +1 -1
- package/src/components/button/examples/label-morph.tsx +1 -1
- package/src/components/button/examples/on-colored-host.tsx +19 -19
- package/src/components/button/examples/over-media.tsx +7 -1
- package/src/components/button/examples/toggle.tsx +2 -10
- package/src/components/button-group/COMPONENT.md +21 -15
- package/src/components/button-group/examples/controlled.tsx +1 -1
- package/src/components/card/COMPONENT.md +21 -10
- package/src/components/card/examples/content-templates.tsx +8 -2
- package/src/components/card/examples/examples.module.css +4 -16
- package/src/components/card/examples/overview.tsx +11 -11
- package/src/components/card/examples/screen.module.css +1 -1
- package/src/components/card/examples/screen.tsx +185 -198
- package/src/components/card/examples/variants.tsx +74 -47
- package/src/components/chart-frame/COMPONENT.md +24 -28
- package/src/components/chart-frame/examples/controlled.tsx +9 -7
- package/src/components/chart-frame/examples/fill-height.tsx +13 -15
- package/src/components/chart-frame/examples/narrow.tsx +24 -5
- package/src/components/chart-frame/examples/overview.tsx +5 -2
- package/src/components/chart-frame/examples/states.tsx +72 -64
- package/src/components/chart-frame/examples/tooltip.tsx +27 -26
- package/src/components/chat/COMPONENT.md +39 -26
- package/src/components/chat/examples/group-chat.tsx +2 -2
- package/src/components/chat/examples/overview.tsx +119 -130
- package/src/components/chat/examples/reactions.tsx +18 -23
- package/src/components/chat/examples/screen.module.css +1 -1
- package/src/components/chat/examples/screen.tsx +212 -242
- package/src/components/chat/examples/states.tsx +23 -22
- package/src/components/chat-list/COMPONENT.md +11 -6
- package/src/components/chat-list/examples/controlled.tsx +2 -2
- package/src/components/chat-list/examples/examples.module.css +8 -8
- package/src/components/chat-list/examples/live.tsx +29 -22
- package/src/components/chat-list/examples/sizes.tsx +6 -8
- package/src/components/chat-list/examples/states.tsx +42 -38
- package/src/components/checkbox/COMPONENT.md +27 -14
- package/src/components/checkbox/examples/controlled.tsx +18 -16
- package/src/components/checkbox/examples/examples.module.css +15 -56
- package/src/components/checkbox/examples/in-form.tsx +16 -16
- package/src/components/checkbox/examples/indicator.tsx +19 -64
- package/src/components/checkbox/examples/overview.tsx +1 -1
- package/src/components/checkbox/examples/states.tsx +1 -1
- package/src/components/checkbox/examples/without-label.tsx +1 -1
- package/src/components/code-block/COMPONENT.md +16 -12
- package/src/components/code-block/examples/color-scheme.tsx +2 -4
- package/src/components/code-block/examples/examples.module.css +1 -9
- package/src/components/code-block/examples/narrow.tsx +1 -1
- package/src/components/color-field/COMPONENT.md +15 -9
- package/src/components/color-field/examples/examples.module.css +4 -5
- package/src/components/color-field/examples/in-form.tsx +15 -13
- package/src/components/color-field/examples/sizes.tsx +5 -1
- package/src/components/color-field/examples/states.tsx +15 -3
- package/src/components/color-picker/COMPONENT.md +69 -22
- package/src/components/color-picker/examples/controlled.tsx +16 -5
- package/src/components/color-picker/examples/examples.module.css +8 -12
- package/src/components/color-picker/examples/in-form.tsx +24 -22
- package/src/components/color-picker/examples/overview.tsx +6 -11
- package/src/components/color-picker/examples/panel.tsx +1 -1
- package/src/components/color-picker/examples/sizes.tsx +10 -16
- package/src/components/color-picker/examples/states.tsx +28 -23
- package/src/components/color-swatches/COMPONENT.md +22 -8
- package/src/components/color-swatches/examples/examples.module.css +3 -4
- package/src/components/color-swatches/examples/in-form.tsx +19 -17
- package/src/components/color-swatches/examples/palette.tsx +24 -0
- package/src/components/color-swatches/examples/wrapping.tsx +17 -2
- package/src/components/command-menu/COMPONENT.md +60 -20
- package/src/components/command-menu/examples/sizes.tsx +20 -15
- package/src/components/command-menu/examples/states.tsx +46 -24
- package/src/components/composer/COMPONENT.md +42 -24
- package/src/components/composer/examples/examples.module.css +0 -9
- package/src/components/composer/examples/narrow.tsx +1 -1
- package/src/components/composer/examples/reply-edit.tsx +3 -3
- package/src/components/composer/examples/sizes.tsx +3 -5
- package/src/components/composer/examples/states.tsx +4 -6
- package/src/components/confirm-dialog/COMPONENT.md +26 -13
- package/src/components/confirm-dialog/examples/dismiss.tsx +27 -0
- package/src/components/confirm-dialog/examples/failure.tsx +9 -16
- package/src/components/crossfade/COMPONENT.md +13 -7
- package/src/components/crossfade/examples/examples.module.css +1 -40
- package/src/components/crossfade/examples/fill.tsx +16 -19
- package/src/components/crossfade/examples/overview.tsx +14 -16
- package/src/components/crossfade/examples/record-switch.tsx +6 -11
- package/src/components/crossfade/examples/screen.module.css +1 -24
- package/src/components/crossfade/examples/screen.tsx +108 -124
- package/src/components/data-table/COMPONENT.md +36 -26
- package/src/components/data-table/examples/controlled.tsx +14 -2
- package/src/components/data-table/examples/examples.module.css +10 -9
- package/src/components/data-table/examples/narrow.tsx +5 -1
- package/src/components/data-table/examples/row-link.tsx +2 -1
- package/src/components/data-table/examples/screen.module.css +2 -2
- package/src/components/data-table/examples/screen.tsx +53 -62
- package/src/components/data-table/examples/server.tsx +6 -2
- package/src/components/data-table/examples/sizes.tsx +17 -17
- package/src/components/data-table/examples/states.tsx +37 -29
- package/src/components/datepicker/COMPONENT.md +53 -22
- package/src/components/datepicker/examples/dismiss.tsx +15 -0
- package/src/components/datepicker/examples/examples.module.css +9 -2
- package/src/components/datepicker/examples/in-form.tsx +33 -25
- package/src/components/datepicker/examples/inline-panel.tsx +3 -1
- package/src/components/datepicker/examples/sizes.tsx +2 -2
- package/src/components/datepicker/examples/states.tsx +2 -2
- package/src/components/datepicker/examples/validation.tsx +3 -3
- package/src/components/description-list/COMPONENT.md +24 -9
- package/src/components/description-list/examples/examples.module.css +4 -24
- package/src/components/description-list/examples/narrow.tsx +1 -1
- package/src/components/description-list/examples/screen.module.css +0 -18
- package/src/components/description-list/examples/screen.tsx +119 -134
- package/src/components/description-list/examples/sizes.tsx +2 -4
- package/src/components/description-list/examples/structure.tsx +6 -7
- package/src/components/description-list/examples/totals.tsx +40 -0
- package/src/components/digit-input/COMPONENT.md +12 -6
- package/src/components/digit-input/examples/examples.module.css +2 -2
- package/src/components/digit-input/examples/grouped.tsx +4 -4
- package/src/components/digit-input/examples/in-form.tsx +1 -1
- package/src/components/digit-input/examples/sizes.tsx +5 -3
- package/src/components/digit-input/examples/states.tsx +14 -6
- package/src/components/digit-input/examples/validation.tsx +1 -1
- package/src/components/divider/COMPONENT.md +28 -14
- package/src/components/divider/examples/align.tsx +2 -4
- package/src/components/divider/examples/examples.module.css +16 -17
- package/src/components/divider/examples/or-separator.tsx +3 -5
- package/src/components/divider/examples/overview.tsx +18 -16
- package/src/components/divider/examples/vertical.tsx +25 -8
- package/src/components/divider/examples/with-icon.tsx +1 -1
- package/src/components/dnd/COMPONENT.md +52 -34
- package/src/components/dnd/examples/drop-zones.tsx +1 -1
- package/src/components/dnd/examples/examples.module.css +7 -7
- package/src/components/dnd/examples/states.tsx +41 -35
- package/src/components/drawer/COMPONENT.md +38 -15
- package/src/components/drawer/examples/guard.tsx +1 -3
- package/src/components/drawer/examples/header-actions.tsx +1 -1
- package/src/components/drawer/examples/in-form.tsx +31 -31
- package/src/components/drawer/examples/placement.tsx +1 -1
- package/src/components/drawer/examples/screen.tsx +137 -160
- package/src/components/drawer/examples/sizes.tsx +32 -27
- package/src/components/dropdown/COMPONENT.md +59 -24
- package/src/components/dropdown/examples/context-menu.tsx +75 -0
- package/src/components/dropdown/examples/examples.module.css +1 -1
- package/src/components/dropdown/examples/sizes.tsx +39 -34
- package/src/components/dropdown/examples/states.tsx +37 -29
- package/src/components/empty-page/COMPONENT.md +20 -9
- package/src/components/empty-page/examples/compact.tsx +28 -18
- package/src/components/empty-page/examples/examples.module.css +0 -43
- package/src/components/empty-page/examples/narrow.tsx +3 -3
- package/src/components/empty-page/examples/region-error.tsx +6 -11
- package/src/components/empty-page/examples/sizes.tsx +13 -13
- package/src/components/empty-page/examples/variants.tsx +34 -30
- package/src/components/example-frame/COMPONENT.md +23 -11
- package/src/components/example-frame/examples/controlled.tsx +3 -3
- package/src/components/field-list/COMPONENT.md +14 -8
- package/src/components/field-list/examples/screen.module.css +1 -1
- package/src/components/field-list/examples/screen.tsx +19 -19
- package/src/components/field-list/examples/sizes.tsx +32 -26
- package/src/components/field-list/examples/states.tsx +37 -31
- package/src/components/fieldset/COMPONENT.md +11 -6
- package/src/components/fieldset/examples/examples.module.css +1 -1
- package/src/components/fieldset/examples/states.tsx +1 -1
- package/src/components/file-upload/COMPONENT.md +68 -30
- package/src/components/file-upload/examples/avatar-upload.tsx +5 -5
- package/src/components/file-upload/examples/custom-body.tsx +12 -7
- package/src/components/file-upload/examples/examples.module.css +4 -4
- package/src/components/file-upload/examples/narrow.tsx +1 -1
- package/src/components/file-upload/examples/row-parts.tsx +4 -4
- package/src/components/file-upload/examples/screen.module.css +4 -4
- package/src/components/file-upload/examples/screen.tsx +70 -84
- package/src/components/file-upload/examples/sizes.tsx +1 -3
- package/src/components/file-upload/examples/states.tsx +1 -3
- package/src/components/file-upload/examples/variants.tsx +13 -7
- package/src/components/gallery/COMPONENT.md +17 -7
- package/src/components/gallery/examples/album-sizes.tsx +52 -0
- package/src/components/gallery/examples/controlled.tsx +40 -0
- package/src/components/gallery/examples/examples.module.css +1 -1
- package/src/components/gallery/examples/overview.tsx +15 -43
- package/src/components/gallery/examples/transfer.tsx +22 -13
- package/src/components/gantt/COMPONENT.md +21 -15
- package/src/components/gantt/examples/examples.module.css +0 -16
- package/src/components/gantt/examples/occupancy.tsx +2 -2
- package/src/components/gantt/examples/screen.module.css +1 -1
- package/src/components/gantt/examples/screen.tsx +56 -74
- package/src/components/gantt/examples/sizes.tsx +16 -16
- package/src/components/gantt/examples/states.tsx +34 -30
- package/src/components/gantt/examples/variants.tsx +27 -25
- package/src/components/hint/COMPONENT.md +24 -14
- package/src/components/hint/examples/examples.module.css +10 -1
- package/src/components/hint/examples/hint-or-error.tsx +2 -2
- package/src/components/hint/examples/overview.tsx +10 -11
- package/src/components/hint/examples/sizes.tsx +1 -1
- package/src/components/input/COMPONENT.md +10 -6
- package/src/components/input/examples/affixes.tsx +2 -2
- package/src/components/input/examples/examples.module.css +1 -1
- package/src/components/input/examples/sizes.tsx +9 -5
- package/src/components/input/examples/states.tsx +39 -23
- package/src/components/input/examples/with-icon.tsx +24 -16
- package/src/components/kanban/COMPONENT.md +30 -24
- package/src/components/kanban/examples/columns.tsx +14 -19
- package/src/components/kanban/examples/item-link.tsx +2 -2
- package/src/components/kanban/examples/limits.tsx +1 -1
- package/src/components/kanban/examples/narrow.tsx +1 -1
- package/src/components/kanban/examples/screen.module.css +2 -4
- package/src/components/kanban/examples/screen.tsx +55 -68
- package/src/components/kanban/examples/states.tsx +37 -58
- package/src/components/kanban/examples/variants.tsx +0 -3
- package/src/components/kbd/COMPONENT.md +11 -7
- package/src/components/kbd/examples/examples.module.css +1 -20
- package/src/components/kbd/examples/in-controls.tsx +2 -2
- package/src/components/kbd/examples/shortcut-list.tsx +14 -26
- package/src/components/label/COMPONENT.md +26 -11
- package/src/components/label/examples/examples.module.css +12 -9
- package/src/components/label/examples/overview.tsx +6 -10
- package/src/components/label/examples/structure.tsx +2 -2
- package/src/components/link-button/COMPONENT.md +33 -20
- package/src/components/link-button/examples/as-child.tsx +1 -1
- package/src/components/link-button/examples/external-link.tsx +1 -1
- package/src/components/link-button/examples/overview.tsx +4 -2
- package/src/components/link-button/examples/variants.tsx +2 -2
- package/src/components/list/COMPONENT.md +24 -16
- package/src/components/list/examples/examples.module.css +0 -8
- package/src/components/list/examples/overflow.tsx +1 -1
- package/src/components/list/examples/overview.tsx +31 -30
- package/src/components/list/examples/sizes.tsx +23 -23
- package/src/components/list/examples/states.tsx +38 -21
- package/src/components/list/examples/with-icon.tsx +16 -14
- package/src/components/login-form/COMPONENT.md +69 -16
- package/src/components/login-form/examples/narrow.tsx +1 -1
- package/src/components/login-form/examples/register.tsx +1 -1
- package/src/components/media-viewer/COMPONENT.md +12 -8
- package/src/components/media-viewer/examples/controlled.tsx +16 -16
- package/src/components/media-viewer/examples/examples.module.css +3 -5
- package/src/components/media-viewer/examples/video.tsx +1 -1
- package/src/components/message/COMPONENT.md +102 -46
- package/src/components/message/examples/typing.tsx +5 -5
- package/src/components/modal/COMPONENT.md +71 -37
- package/src/components/modal/examples/dismiss.tsx +35 -27
- package/src/components/modal/examples/enter-key.tsx +22 -25
- package/src/components/modal/examples/examples.module.css +0 -7
- package/src/components/modal/examples/guard.tsx +2 -4
- package/src/components/modal/examples/in-form.tsx +28 -28
- package/src/components/modal/examples/long-content.tsx +6 -4
- package/src/components/modal/examples/sizes.tsx +36 -31
- package/src/components/modal/examples/structure.tsx +1 -1
- package/src/components/native-select/COMPONENT.md +7 -3
- package/src/components/native-select/examples/examples.module.css +3 -3
- package/src/components/native-select/examples/in-form.tsx +28 -29
- package/src/components/native-select/examples/sizes.tsx +2 -2
- package/src/components/native-select/examples/states.tsx +2 -2
- package/src/components/notification/COMPONENT.md +36 -31
- package/src/components/notification/examples/examples.module.css +1 -2
- package/src/components/notification/examples/in-form.tsx +28 -20
- package/src/components/notification/examples/sizes.tsx +16 -12
- package/src/components/notification/examples/undo.tsx +7 -15
- package/src/components/pagination/COMPONENT.md +29 -18
- package/src/components/pagination/examples/controlled.tsx +2 -1
- package/src/components/pagination/examples/narrow.tsx +5 -5
- package/src/components/popover/COMPONENT.md +44 -20
- package/src/components/popover/examples/controlled-open.tsx +6 -4
- package/src/components/popover/examples/dismiss.tsx +37 -28
- package/src/components/popover/examples/examples.module.css +2 -2
- package/src/components/popover/examples/sizes.tsx +32 -27
- package/src/components/popover/examples/width.tsx +57 -0
- package/src/components/progress-bar/COMPONENT.md +21 -29
- package/src/components/progress-bar/examples/examples.module.css +1 -1
- package/src/components/progress-circle/COMPONENT.md +21 -29
- package/src/components/progress-circle/examples/examples.module.css +1 -1
- package/src/components/progress-circle/examples/on-color.tsx +16 -0
- package/src/components/progress-circle/examples/variants.tsx +1 -0
- package/src/components/radio/COMPONENT.md +13 -4
- package/src/components/radio/examples/examples.module.css +1 -1
- package/src/components/scroll-container/COMPONENT.md +18 -12
- package/src/components/scroll-container/examples/auto-scroll.tsx +8 -4
- package/src/components/scroll-container/examples/edges.tsx +4 -4
- package/src/components/scroll-container/examples/examples.module.css +7 -51
- package/src/components/scroll-container/examples/load-more.tsx +4 -4
- package/src/components/scroll-container/examples/lock.tsx +4 -4
- package/src/components/scroll-container/examples/log.tsx +97 -0
- package/src/components/scroll-container/examples/overscroll.tsx +4 -4
- package/src/components/scroll-container/examples/overview.tsx +5 -5
- package/src/components/scroll-container/examples/scrollbar.tsx +4 -4
- package/src/components/scroll-container/examples/snap.tsx +2 -2
- package/src/components/scroll-container/examples/variants.tsx +1 -0
- package/src/components/segmented-control/COMPONENT.md +24 -12
- package/src/components/segmented-control/examples/controlled.tsx +2 -4
- package/src/components/segmented-control/examples/examples.module.css +0 -8
- package/src/components/segmented-control/examples/scroll.tsx +1 -1
- package/src/components/select/COMPONENT.md +33 -9
- package/src/components/select/examples/dismiss.tsx +26 -0
- package/src/components/select/examples/examples.module.css +1 -1
- package/src/components/select/examples/server-search.tsx +6 -2
- package/src/components/select/examples/sizes.tsx +2 -2
- package/src/components/select/examples/states.tsx +2 -2
- package/src/components/select/examples/with-icon.tsx +20 -18
- package/src/components/sheet/COMPONENT.md +44 -21
- package/src/components/sheet/examples/header-actions.tsx +23 -4
- package/src/components/sheet/examples/overview.tsx +25 -10
- package/src/components/skeleton/COMPONENT.md +8 -4
- package/src/components/skeleton/examples/examples.module.css +1 -13
- package/src/components/skeleton/examples/with-crossfade.tsx +7 -7
- package/src/components/slider/COMPONENT.md +13 -8
- package/src/components/slider/examples/examples.module.css +6 -7
- package/src/components/slider/examples/hint-and-error.tsx +3 -5
- package/src/components/slider/examples/in-form.tsx +21 -19
- package/src/components/slider/examples/states.tsx +14 -10
- package/src/components/smart-filter/COMPONENT.md +42 -22
- package/src/components/smart-filter/examples/examples.module.css +3 -21
- package/src/components/smart-filter/examples/many-values.tsx +12 -8
- package/src/components/smart-filter/examples/ranges.tsx +2 -1
- package/src/components/smart-filter/examples/sizes.tsx +9 -7
- package/src/components/sparkline/COMPONENT.md +8 -3
- package/src/components/sparkline/examples/curve.tsx +16 -11
- package/src/components/sparkline/examples/examples.module.css +1 -1
- package/src/components/sparkline/examples/signed-bars.tsx +2 -2
- package/src/components/sparkline/examples/states.tsx +14 -10
- package/src/components/spinner/COMPONENT.md +15 -9
- package/src/components/spinner/examples/examples.module.css +2 -14
- package/src/components/spinner/examples/overview.tsx +1 -1
- package/src/components/stepper/COMPONENT.md +50 -41
- package/src/components/stepper/examples/examples.module.css +1 -6
- package/src/components/stepper/examples/narrow.tsx +1 -1
- package/src/components/stepper/examples/sizes.tsx +6 -8
- package/src/components/stepper/examples/states.tsx +44 -43
- package/src/components/stepper/examples/with-icon.tsx +19 -17
- package/src/components/switch/COMPONENT.md +22 -9
- package/src/components/switch/examples/examples.module.css +2 -2
- package/src/components/switch/examples/states.tsx +3 -3
- package/src/components/tabs/COMPONENT.md +21 -16
- package/src/components/tabs/examples/in-drawer.tsx +1 -1
- package/src/components/tabs/examples/sizes.tsx +5 -10
- package/src/components/tabs/examples/variants.tsx +19 -23
- package/src/components/tag-select/COMPONENT.md +19 -6
- package/src/components/tag-select/examples/creatable.tsx +2 -2
- package/src/components/tag-select/examples/dismiss.tsx +23 -0
- package/src/components/tag-select/examples/examples.module.css +3 -3
- package/src/components/tag-select/examples/in-form.tsx +31 -32
- package/src/components/tag-select/examples/sizes.tsx +2 -2
- package/src/components/tag-select/examples/states.tsx +2 -2
- package/src/components/textarea/COMPONENT.md +10 -6
- package/src/components/textarea/examples/examples.module.css +3 -10
- package/src/components/textarea/examples/in-form.tsx +3 -3
- package/src/components/textarea/examples/sizes.tsx +10 -7
- package/src/components/textarea/examples/states.tsx +29 -13
- package/src/components/textarea/examples/validation.tsx +45 -36
- package/src/components/thumbnail/COMPONENT.md +17 -13
- package/src/components/thumbnail/examples/examples.module.css +1 -1
- package/src/components/thumbnail/examples/states.tsx +1 -1
- package/src/components/thumbnail/examples/variants.tsx +12 -1
- package/src/components/timeline/COMPONENT.md +51 -35
- package/src/components/timeline/examples/links.tsx +14 -14
- package/src/components/timeline/examples/narrow.tsx +6 -6
- package/src/components/timeline/examples/overview.tsx +6 -6
- package/src/components/timeline/examples/sizes.tsx +28 -23
- package/src/components/timeline/examples/structure.tsx +30 -30
- package/src/components/timeline/examples/variants.tsx +40 -28
- package/src/components/tooltip/COMPONENT.md +10 -6
- package/src/components/tooltip/examples/examples.module.css +1 -5
- package/src/components/tooltip/examples/non-interactive-trigger.tsx +1 -1
- package/src/components/tooltip/examples/sizes.tsx +17 -10
- package/src/components/typography/COMPONENT.md +18 -3
- package/src/components/typography/examples/examples.module.css +3 -6
- package/src/components/typography/examples/numeric.tsx +16 -0
- package/src/components/video-note/COMPONENT.md +11 -7
- package/src/components/visually-hidden/COMPONENT.md +8 -4
- package/src/components/visually-hidden/examples/assertive.tsx +1 -1
- package/src/components/visually-hidden/examples/overview.tsx +17 -7
- package/src/components/voice-player/COMPONENT.md +15 -7
- package/src/layout/app-shell/COMPONENT.md +53 -36
- package/src/layout/app-shell/examples/examples.module.css +2 -22
- package/src/layout/app-shell/examples/footer.tsx +10 -10
- package/src/layout/app-shell/examples/overview.tsx +21 -25
- package/src/layout/app-shell/examples/screen.module.css +2 -2
- package/src/layout/app-shell/examples/screen.tsx +48 -47
- package/src/layout/app-shell/examples/template.tsx +13 -17
- package/src/layout/bottom-nav/COMPONENT.md +30 -20
- package/src/layout/bottom-nav/examples/examples.module.css +2 -7
- package/src/layout/bottom-nav/examples/floating-action.tsx +10 -19
- package/src/layout/bottom-nav/examples/floating.tsx +10 -19
- package/src/layout/bottom-nav/examples/in-app-shell.tsx +11 -19
- package/src/layout/bottom-nav/examples/router.tsx +6 -5
- package/src/layout/page/COMPONENT.md +353 -0
- package/src/layout/page/examples/actions-collapse.tsx +45 -0
- package/src/layout/page/examples/collapse.tsx +68 -0
- package/src/{components/page-content → layout/page}/examples/examples.module.css +32 -16
- package/{dist/skill/reference/components/page-content → src/layout/page}/examples/grid.tsx +18 -16
- package/src/layout/page/examples/list-detail.tsx +112 -0
- package/src/layout/page/examples/narrow.tsx +75 -0
- package/src/layout/page/examples/overview.tsx +57 -0
- package/{dist/skill/reference/components/page-content → src/layout/page}/examples/screen.module.css +1 -1
- package/{dist/skill/reference/components/page-content → src/layout/page}/examples/screen.tsx +29 -19
- package/{dist/skill/reference/components/page-content → src/layout/page}/examples/sections.tsx +17 -24
- package/src/layout/page/examples/structure.tsx +41 -0
- package/src/{components/page-toolbar/examples/narrow.tsx → layout/page/examples/tools.tsx} +38 -35
- package/src/layout/page/examples/top-bar.tsx +85 -0
- package/src/{components/page-content → layout/page}/examples/variants.tsx +13 -13
- package/src/layout/sidebar/COMPONENT.md +51 -40
- package/src/layout/sidebar/examples/account.tsx +1 -3
- package/src/layout/sidebar/examples/brand-header.tsx +1 -3
- package/src/layout/sidebar/examples/collapsible-groups.tsx +1 -3
- package/src/layout/sidebar/examples/controlled-open.tsx +1 -3
- package/src/layout/sidebar/examples/controlled.tsx +1 -3
- package/src/layout/sidebar/examples/custom-part.tsx +1 -3
- package/src/layout/sidebar/examples/dismiss.tsx +50 -0
- package/src/layout/sidebar/examples/examples.module.css +7 -32
- package/src/layout/sidebar/examples/narrow.tsx +47 -42
- package/src/layout/sidebar/examples/nested-items.tsx +1 -3
- package/src/layout/sidebar/examples/overview.tsx +1 -3
- package/src/layout/sidebar/examples/persist.tsx +1 -3
- package/src/layout/sidebar/examples/router.tsx +12 -13
- package/src/layout/sidebar/examples/sizes.tsx +6 -6
- package/src/styles/controls.css +2 -2
- package/src/styles/fonts.css +22 -0
- package/src/styles/globals.css +89 -12
- package/src/styles/theme-dark.css +25 -24
- package/src/styles/theme-light.css +70 -23
- package/src/styles/tokens.css +17 -5
- package/dist/components/dnd/useFlipList.d.ts +0 -17
- package/dist/components/gantt/useEdgeAutoScroll.d.ts +0 -12
- package/dist/components/modal/ModalDialog.d.ts +0 -46
- package/dist/components/page-content/PageContent.d.ts +0 -173
- package/dist/components/page-toolbar/PageToolbar.d.ts +0 -54
- package/dist/hooks/useStateSwap.d.ts +0 -8
- package/dist/internal/highlightTsxHtml.d.ts +0 -2
- package/dist/internal/layoutPxFromPrimitives.d.ts +0 -6
- package/dist/internal/mergeRefs.d.ts +0 -6
- package/dist/layout/app-header/AppHeader.d.ts +0 -109
- package/dist/skill/reference/components/drawer/examples/examples.module.css +0 -8
- package/dist/skill/reference/components/page-content/COMPONENT.md +0 -272
- package/dist/skill/reference/components/page-content/examples/list-detail.tsx +0 -106
- package/dist/skill/reference/components/page-content/examples/narrow.tsx +0 -25
- package/dist/skill/reference/components/page-content/examples/overview.tsx +0 -41
- package/dist/skill/reference/components/page-toolbar/COMPONENT.md +0 -143
- package/dist/skill/reference/components/page-toolbar/examples/examples.module.css +0 -16
- package/dist/skill/reference/components/page-toolbar/examples/overview.tsx +0 -113
- package/dist/skill/reference/components/page-toolbar/examples/save-changes.tsx +0 -40
- package/dist/skill/reference/components/page-toolbar/examples/without-search.tsx +0 -60
- package/dist/skill/reference/components/popover/examples/match-trigger-width.tsx +0 -23
- package/dist/skill/reference/components/scroll-container/examples/chat.tsx +0 -101
- package/dist/skill/reference/components/spinner/examples/loading-region.tsx +0 -22
- package/dist/skill/reference/layout/app-header/COMPONENT.md +0 -186
- package/dist/skill/reference/layout/app-header/examples/breadcrumbs.tsx +0 -37
- package/dist/skill/reference/layout/app-header/examples/examples.module.css +0 -47
- package/dist/skill/reference/layout/app-header/examples/in-app-shell.tsx +0 -69
- package/dist/skill/reference/layout/app-header/examples/narrow.tsx +0 -28
- package/dist/skill/reference/layout/app-header/examples/overview.tsx +0 -34
- package/dist/skill/reference/layout/app-header/examples/page-title.tsx +0 -78
- package/dist/skill/reference/layout/app-shell/examples/contained.tsx +0 -30
- package/src/components/drawer/examples/examples.module.css +0 -8
- package/src/components/page-content/COMPONENT.md +0 -272
- package/src/components/page-content/examples/list-detail.tsx +0 -106
- package/src/components/page-content/examples/narrow.tsx +0 -25
- package/src/components/page-content/examples/overview.tsx +0 -41
- package/src/components/page-toolbar/COMPONENT.md +0 -143
- package/src/components/page-toolbar/examples/examples.module.css +0 -16
- package/src/components/page-toolbar/examples/overview.tsx +0 -113
- package/src/components/page-toolbar/examples/save-changes.tsx +0 -40
- package/src/components/page-toolbar/examples/without-search.tsx +0 -60
- package/src/components/popover/examples/match-trigger-width.tsx +0 -23
- package/src/components/scroll-container/examples/chat.tsx +0 -101
- package/src/components/spinner/examples/loading-region.tsx +0 -22
- package/src/layout/app-header/COMPONENT.md +0 -186
- package/src/layout/app-header/examples/breadcrumbs.tsx +0 -37
- package/src/layout/app-header/examples/examples.module.css +0 -47
- package/src/layout/app-header/examples/in-app-shell.tsx +0 -69
- package/src/layout/app-header/examples/narrow.tsx +0 -28
- package/src/layout/app-header/examples/overview.tsx +0 -34
- package/src/layout/app-header/examples/page-title.tsx +0 -78
- package/src/layout/app-shell/examples/contained.tsx +0 -30
|
@@ -13,8 +13,6 @@ export type ComposerRecording = {
|
|
|
13
13
|
export type RecorderError = "denied" | "missing" | "failed";
|
|
14
14
|
/** `starting` — the press is answered, the device is not granted yet; `recording` — media flows. */
|
|
15
15
|
export type RecorderStatus = "idle" | "starting" | "recording";
|
|
16
|
-
/** Bars in a recording's `waveform`. */
|
|
17
|
-
export declare const WAVEFORM_BARS = 48;
|
|
18
16
|
/** Recordings shorter than this are dropped, like an accidental tap. */
|
|
19
17
|
export declare const MIN_RECORDING_MS = 700;
|
|
20
18
|
/** A round video message stops and sends itself at this length. */
|
|
@@ -1,46 +1,70 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { type DialogTriggerProps } from "
|
|
2
|
+
import { type DialogTriggerProps } from "../../internal/overlay/DialogParts";
|
|
3
3
|
export type ConfirmDialogLabels = {
|
|
4
4
|
/** The cancel button. */
|
|
5
5
|
cancel: string;
|
|
6
6
|
/** `aria-label` of the header close button. */
|
|
7
7
|
close: string;
|
|
8
|
-
/** The message when `onConfirm` rejects
|
|
8
|
+
/** The message when `onConfirm` rejects without a reason of its own. */
|
|
9
9
|
error: string;
|
|
10
10
|
};
|
|
11
|
+
export declare const CONFIRM_DIALOG_LABELS: ConfirmDialogLabels;
|
|
11
12
|
export type ConfirmDialogRootProps = {
|
|
13
|
+
/**
|
|
14
|
+
* Controlled visibility; together with `onOpenChange`.
|
|
15
|
+
*/
|
|
12
16
|
open?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Initial visibility, uncontrolled.
|
|
19
|
+
*/
|
|
13
20
|
defaultOpen?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Called on open and close: the Trigger, Cancel, the close button, Escape, a resolved `onConfirm`.
|
|
23
|
+
*/
|
|
14
24
|
onOpenChange?: (open: boolean) => void;
|
|
15
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* Escape closes the dialog, like Cancel.
|
|
27
|
+
*/
|
|
28
|
+
closeOnEscape?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* A click on the scrim (and on a phone a swipe down) closes the dialog. Off by default: a question about a weighty action is answered with a button, not by a stray click beside it.
|
|
31
|
+
*/
|
|
32
|
+
closeOnOutsideClick?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* The question as a heading («Удалить проект?»); names the dialog.
|
|
35
|
+
*/
|
|
16
36
|
title: React.ReactNode;
|
|
17
|
-
/**
|
|
37
|
+
/**
|
|
38
|
+
* What happens and what cannot be undone; describes the dialog.
|
|
39
|
+
*/
|
|
18
40
|
description?: React.ReactNode;
|
|
19
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* The confirm button: the action as a verb («Удалить»), never «Да» or «ОК».
|
|
43
|
+
*/
|
|
20
44
|
confirmLabel: React.ReactNode;
|
|
21
45
|
/**
|
|
22
|
-
* `danger
|
|
23
|
-
* one (send, publish), solid accent confirm.
|
|
46
|
+
* `danger`: a destructive action, solid danger confirm. `accent`: a weighty but safe one (send, publish), solid accent confirm.
|
|
24
47
|
*/
|
|
25
48
|
tone?: "danger" | "accent";
|
|
26
49
|
/**
|
|
27
|
-
* The action.
|
|
28
|
-
* the close button and Escape are off. Resolve — the dialog closes; reject — it stays open with
|
|
29
|
-
* `error` (else `labels.error`) under the text, ready to try again.
|
|
50
|
+
* The action. A pending Promise keeps the dialog busy (`loading`, nothing closes it). Resolve closes it; reject keeps it open with the reason: the `Error.message` or string, else `labels.error`.
|
|
30
51
|
*/
|
|
31
52
|
onConfirm: () => unknown;
|
|
32
|
-
/**
|
|
33
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Built-in strings, see Labels.
|
|
55
|
+
*/
|
|
34
56
|
labels?: Partial<ConfirmDialogLabels>;
|
|
35
|
-
/**
|
|
57
|
+
/**
|
|
58
|
+
* `ConfirmDialog.Trigger`; nothing when `open` comes from code.
|
|
59
|
+
*/
|
|
36
60
|
children?: React.ReactNode;
|
|
37
61
|
};
|
|
38
62
|
/**
|
|
39
63
|
* The confirm of a destructive or weighty action in one piece: a small dialog (Modal `s`) with the
|
|
40
|
-
* question, the consequence, Cancel and the confirm; no dismiss by a press outside
|
|
41
|
-
* action runs nothing closes it; a failure keeps it open with the reason.
|
|
64
|
+
* question, the consequence, Cancel and the confirm; no dismiss by a press outside unless asked;
|
|
65
|
+
* while the action runs nothing closes it; a failure keeps it open with the reason.
|
|
42
66
|
*/
|
|
43
|
-
declare function ConfirmDialogRoot({ open, defaultOpen, onOpenChange, title, description, confirmLabel, tone, onConfirm,
|
|
67
|
+
declare function ConfirmDialogRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, title, description, confirmLabel, tone, onConfirm, labels: labelsProp, children, }: ConfirmDialogRootProps): import("react/jsx-runtime").JSX.Element;
|
|
44
68
|
declare namespace ConfirmDialogRoot {
|
|
45
69
|
var displayName: string;
|
|
46
70
|
}
|
|
@@ -1,20 +1,17 @@
|
|
|
1
|
-
import * as React from "react";
|
|
1
|
+
import type * as React from "react";
|
|
2
2
|
export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
3
3
|
/**
|
|
4
|
-
* Key of what the region shows: `"loading"`, `"
|
|
5
|
-
* A new value cross-fades the old content into the new one; the same value updates in place.
|
|
4
|
+
* Key of what the region shows: `"loading"`, `"ready"`, `"empty"`, `"error"` or a record id. A new value cross-fades the old content into the new one; the same value updates in place.
|
|
6
5
|
*/
|
|
7
6
|
state: string | number;
|
|
8
7
|
/**
|
|
9
|
-
* The region takes its parent's height (a flex
|
|
10
|
-
* fills it; the height never glides.
|
|
8
|
+
* The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides.
|
|
11
9
|
*/
|
|
12
10
|
fill?: boolean;
|
|
13
11
|
ref?: React.Ref<HTMLDivElement>;
|
|
14
12
|
};
|
|
15
13
|
/**
|
|
16
14
|
* Cross-fades a region between its states (loading → data → empty → error) and glides its height,
|
|
17
|
-
* so the page below does not jump
|
|
18
|
-
* show takes no room (no gap in a grid or a flex column).
|
|
15
|
+
* so the page below does not jump: the kit's region swap (`src/internal/RegionSwap`), public.
|
|
19
16
|
*/
|
|
20
|
-
export declare function Crossfade(
|
|
17
|
+
export declare function Crossfade(props: CrossfadeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { PositionAlign, PositionSide } from "../../hooks/usePosition";
|
|
3
3
|
export type DataTableColumnsMenuProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
|
|
4
|
-
/**
|
|
4
|
+
/**
|
|
5
|
+
* Side of the trigger the menu opens on.
|
|
6
|
+
*/
|
|
5
7
|
side?: PositionSide;
|
|
6
|
-
/**
|
|
8
|
+
/**
|
|
9
|
+
* Alignment to the trigger. `auto` lines the panel up with the trigger edge that has more room beyond it; `start`, `center` or `end` fix it.
|
|
10
|
+
*/
|
|
7
11
|
align?: PositionAlign;
|
|
8
12
|
/** The trigger button. */
|
|
9
13
|
ref?: React.Ref<HTMLButtonElement>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type ControlSize } from "../../internal/states";
|
|
3
3
|
import { DataTableColumnsMenu } from "./ColumnsMenu";
|
|
4
4
|
import type { DataTableColumn, DataTableGroup, DataTableRowClickEvent, DataTableSortState } from "./types";
|
|
5
5
|
export type { DataTableColumnsMenuProps } from "./ColumnsMenu";
|
|
@@ -39,149 +39,248 @@ export type DataTableLabels = {
|
|
|
39
39
|
/** `aria-label` of the toggle of an expanded group; `{group}` is the group key. */
|
|
40
40
|
collapseGroup: string;
|
|
41
41
|
};
|
|
42
|
+
export declare const DATA_TABLE_LABELS: DataTableLabels;
|
|
42
43
|
export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
43
44
|
/** The outer card-fill `<div>`. */
|
|
44
45
|
ref?: React.Ref<HTMLDivElement>;
|
|
46
|
+
/**
|
|
47
|
+
* Column definitions, see `DataTableColumn<Row>`.
|
|
48
|
+
*/
|
|
45
49
|
columns: DataTableColumn<Row>[];
|
|
46
50
|
/**
|
|
47
|
-
* Ids of columns not rendered
|
|
48
|
-
* `hideable: false` stays. `DataTable.ColumnsMenu` in `toolbar` changes it.
|
|
51
|
+
* Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. `DataTable.ColumnsMenu` in `toolbar` changes it.
|
|
49
52
|
*/
|
|
50
53
|
hiddenColumns?: string[];
|
|
51
|
-
/**
|
|
54
|
+
/**
|
|
55
|
+
* Initially hidden column ids, uncontrolled.
|
|
56
|
+
*/
|
|
52
57
|
defaultHiddenColumns?: string[];
|
|
53
|
-
/**
|
|
58
|
+
/**
|
|
59
|
+
* The hidden ids changed (`DataTable.ColumnsMenu`). The kit stores nothing: keep the list (local storage, the user's settings) and pass it back to restore the choice.
|
|
60
|
+
*/
|
|
54
61
|
onHiddenColumnsChange?: (hiddenColumns: string[]) => void;
|
|
62
|
+
/**
|
|
63
|
+
* Data; sorted in memory when a sort is set. With `source="server"` — the page (or the loaded batches) as the server returned it.
|
|
64
|
+
*/
|
|
55
65
|
rows: Row[];
|
|
56
66
|
/**
|
|
57
|
-
* Who sorts and pages the rows. `client
|
|
58
|
-
* `server` — `rows` is the one page (or the loaded batches) the owner fetched, already sorted:
|
|
59
|
-
* the table never re-sorts or slices them, `sort` / `page` drive the request and `rowCount`
|
|
60
|
-
* the Pagination and the range line.
|
|
67
|
+
* Who sorts and pages the rows. `client`: the table sorts `rows` and slices pages. `server`: `rows` is one page, already sorted; `sort` / `page` changes are the request, `rowCount` drives Pagination.
|
|
61
68
|
*/
|
|
62
69
|
source?: "client" | "server";
|
|
63
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Total rows on the server (`source="server"`): the page count and «Показано {from}–{to} из {total}».
|
|
72
|
+
*/
|
|
64
73
|
rowCount?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Density and control tier: rows from 36 · 36 · 44 · 52 · 52 px (`--prime-table-row-height-<size>`); passed to checkboxes, toggles, Pagination and nested controls. Without it the tier of the host.
|
|
76
|
+
*/
|
|
65
77
|
size?: ControlSize;
|
|
78
|
+
/**
|
|
79
|
+
* Class on the root `<div>`.
|
|
80
|
+
*/
|
|
66
81
|
className?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Render `<thead>`.
|
|
84
|
+
*/
|
|
67
85
|
showHeader?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* The head sticks while the body scrolls (with `scrollHeight`); on screens lower than 480px it scrolls with the rows.
|
|
88
|
+
*/
|
|
68
89
|
stickyHeader?: boolean;
|
|
90
|
+
/**
|
|
91
|
+
* The first visible column (with the selection and toggle columns) sticks while scrolling sideways; the start edge shadow falls from its end edge.
|
|
92
|
+
*/
|
|
69
93
|
stickyFirstColumn?: boolean;
|
|
70
94
|
/**
|
|
71
|
-
* Stable row id (
|
|
72
|
-
* Selection and expansion are keyed by it. Without it the id is the row's position, which breaks
|
|
73
|
-
* when sorting — pass it whenever `selectable` or expansion is used.
|
|
95
|
+
* Stable row id (position by default; sub-rows too, `index` among siblings); selection, expansion and the enter animation of new rows are keyed by it. Pass it whenever sorting, selection or expansion is used.
|
|
74
96
|
*/
|
|
75
97
|
getRowKey?: (row: Row, index: number) => React.Key;
|
|
76
|
-
/**
|
|
98
|
+
/**
|
|
99
|
+
* Human row name for the checkbox and toggle names (`{label}` in `labels`).
|
|
100
|
+
*/
|
|
77
101
|
getRowLabel?: (row: Row) => string;
|
|
78
102
|
/**
|
|
79
|
-
* The row is a link: the key cell (first visible column)
|
|
80
|
-
* covers every other cell, so a click, ⌘/Ctrl-click, a middle click and «open in new tab» work
|
|
81
|
-
* anywhere on the row; Tab stops on the link.
|
|
103
|
+
* The row is a link: a real `<a>` in the key cell (first visible column), and the same link covers the whole row. Keep controls out of the key cell.
|
|
82
104
|
*/
|
|
83
105
|
getRowHref?: (row: Row) => string;
|
|
84
106
|
/**
|
|
85
|
-
* Opens a row in place
|
|
86
|
-
* or Enter / Space on the focused row. With `getRowHref` it gets the plain clicks only — call
|
|
87
|
-
* `event.preventDefault()` there to route in the app instead of loading the page.
|
|
107
|
+
* Opens a row in place (a drawer, a panel) on a click, Enter or Space; never from a control inside the row. With `getRowHref` it gets plain clicks: `event.preventDefault()` routes in the app.
|
|
88
108
|
*/
|
|
89
109
|
onRowClick?: (row: Row, index: number, event: DataTableRowClickEvent) => void;
|
|
90
|
-
/**
|
|
110
|
+
/**
|
|
111
|
+
* Which rows open (`getRowHref` and `onRowClick` alike); `false` for a total or a service row — no link, no focus, no cursor.
|
|
112
|
+
*/
|
|
91
113
|
isRowClickable?: (row: Row) => boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Skeleton rows while there are no rows; with rows on screen (a refetch, another server page) they stay and the table gets `aria-busy`.
|
|
116
|
+
*/
|
|
92
117
|
loading?: boolean;
|
|
93
|
-
/**
|
|
118
|
+
/**
|
|
119
|
+
* Empty-state content: a string goes into a compact EmptyPage, a node (e.g. a full `EmptyPage`) is rendered as is.
|
|
120
|
+
*/
|
|
94
121
|
empty?: React.ReactNode;
|
|
122
|
+
/**
|
|
123
|
+
* Built-in strings, see Labels.
|
|
124
|
+
*/
|
|
95
125
|
labels?: Partial<DataTableLabels>;
|
|
96
|
-
/**
|
|
126
|
+
/**
|
|
127
|
+
* Hairlines between rows.
|
|
128
|
+
*/
|
|
97
129
|
rowDividers?: boolean;
|
|
98
|
-
/**
|
|
130
|
+
/**
|
|
131
|
+
* Hairlines between content columns.
|
|
132
|
+
*/
|
|
99
133
|
columnDividers?: boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Current sort, controlled: `{ columnId, order: "asc" | "desc" }` or `null`.
|
|
136
|
+
*/
|
|
100
137
|
sort?: DataTableSortState;
|
|
138
|
+
/**
|
|
139
|
+
* Initial sort, uncontrolled.
|
|
140
|
+
*/
|
|
101
141
|
defaultSort?: DataTableSortState;
|
|
142
|
+
/**
|
|
143
|
+
* A head click cycles asc → desc → none.
|
|
144
|
+
*/
|
|
102
145
|
onSortChange?: (sort: DataTableSortState) => void;
|
|
103
146
|
/**
|
|
104
|
-
* `pages` — Pagination in the footer; `infinite` — rows are revealed while scrolling;
|
|
105
|
-
* `none` — every row at once.
|
|
147
|
+
* `pages` — Pagination in the footer when there is more than one page; `infinite` — rows are revealed while scrolling; `none` — every row at once.
|
|
106
148
|
*/
|
|
107
149
|
paging?: "pages" | "infinite" | "none";
|
|
150
|
+
/**
|
|
151
|
+
* Current page (1-based), controlled.
|
|
152
|
+
*/
|
|
108
153
|
page?: number;
|
|
154
|
+
/**
|
|
155
|
+
* Initial page, uncontrolled.
|
|
156
|
+
*/
|
|
109
157
|
defaultPage?: number;
|
|
158
|
+
/**
|
|
159
|
+
* Page change from the pager; a sort change also returns to page 1.
|
|
160
|
+
*/
|
|
110
161
|
onPageChange?: (page: number) => void;
|
|
111
|
-
/**
|
|
162
|
+
/**
|
|
163
|
+
* Rows per page; also the first batch with `paging="infinite"` (with `source="server"` every loaded row is shown).
|
|
164
|
+
*/
|
|
112
165
|
pageSize?: number;
|
|
166
|
+
/**
|
|
167
|
+
* Rows revealed per scroll step.
|
|
168
|
+
*/
|
|
113
169
|
infiniteBatchSize?: number;
|
|
170
|
+
/**
|
|
171
|
+
* More rows can be loaded from the server.
|
|
172
|
+
*/
|
|
114
173
|
hasMore?: boolean;
|
|
174
|
+
/**
|
|
175
|
+
* A server batch is loading: footer status, `aria-busy`.
|
|
176
|
+
*/
|
|
115
177
|
loadingMore?: boolean;
|
|
116
178
|
/**
|
|
117
|
-
*
|
|
118
|
-
* rejected one stops asking until the rows change.
|
|
179
|
+
* Called at the end when every loaded row is shown and `hasMore` is set. A returned promise shows the loading status until it settles; a rejected one stops asking until the rows change.
|
|
119
180
|
*/
|
|
120
181
|
onLoadMore?: () => void | Promise<void>;
|
|
121
182
|
/**
|
|
122
|
-
* Max height of the scroll viewport (number = px); `"fill"` — the table takes the height of
|
|
123
|
-
* its flex / grid parent and the rows scroll inside. 360 with `paging="infinite"`.
|
|
183
|
+
* Max height of the scroll viewport (number = px); `"fill"` — the table takes the height of its flex / grid parent (or a sized block), the rows scroll inside, infinite paging follows it.
|
|
124
184
|
*/
|
|
125
185
|
scrollHeight?: number | string;
|
|
126
|
-
/**
|
|
186
|
+
/**
|
|
187
|
+
* The table spans its container; `false` sizes the table and its surface by its content (up to the container's width, then it scrolls).
|
|
188
|
+
*/
|
|
127
189
|
fullWidth?: boolean;
|
|
190
|
+
/**
|
|
191
|
+
* Row wash on hover (and a pressed wash on clickable rows).
|
|
192
|
+
*/
|
|
128
193
|
highlightRowOnHover?: boolean;
|
|
194
|
+
/**
|
|
195
|
+
* Column wash under the pointer (head and cells).
|
|
196
|
+
*/
|
|
129
197
|
highlightColumnOnHover?: boolean;
|
|
198
|
+
/**
|
|
199
|
+
* Every second row one opaque step off the table fill.
|
|
200
|
+
*/
|
|
130
201
|
striped?: boolean;
|
|
131
202
|
/**
|
|
132
|
-
*
|
|
133
|
-
* partial), Shift+click range, press-and-drag across checkboxes, Space on a focused checkbox,
|
|
134
|
-
* `aria-selected` + `accent-soft` rows and a polite «Выбрано: N» announcement.
|
|
203
|
+
* Leading checkbox column with «select all», Shift range, press-and-drag and Space.
|
|
135
204
|
*/
|
|
136
205
|
selectable?: boolean;
|
|
206
|
+
/**
|
|
207
|
+
* Selected row ids, controlled.
|
|
208
|
+
*/
|
|
137
209
|
selected?: React.Key[];
|
|
210
|
+
/**
|
|
211
|
+
* Initially selected ids, uncontrolled.
|
|
212
|
+
*/
|
|
138
213
|
defaultSelected?: React.Key[];
|
|
214
|
+
/**
|
|
215
|
+
* Selection change.
|
|
216
|
+
*/
|
|
139
217
|
onSelectedChange?: (selected: React.Key[]) => void;
|
|
140
218
|
/**
|
|
141
|
-
* Rows reorder
|
|
142
|
-
* stands in front of `beforeId` (`getRowKey` values; `null` — last); on a page, a row put last
|
|
143
|
-
* stands in front of the first row of the next page. Return a promise to save on a server: the
|
|
144
|
-
* row stays in its new place with a busy handle, a rejection moves it back. Off while the table
|
|
145
|
-
* is sorted by a column; with `getRowGroup` rows move inside their group. Not combined with
|
|
146
|
-
* expandable rows (`getRowChildren`, `renderExpanded`).
|
|
219
|
+
* Rows reorder by a leading handle column. Row `id` goes in front of `beforeId` (`null` = last); apply it with `moveBefore`, return a promise to save. Off while sorted by a column.
|
|
147
220
|
*/
|
|
148
221
|
onReorder?: (id: React.Key, beforeId: React.Key | null) => void | Promise<void>;
|
|
149
|
-
/**
|
|
222
|
+
/**
|
|
223
|
+
* Sub-rows rendered under the parent with the same columns, indented by depth.
|
|
224
|
+
*/
|
|
150
225
|
getRowChildren?: (row: Row) => Row[] | undefined;
|
|
151
|
-
/**
|
|
226
|
+
/**
|
|
227
|
+
* Full-width detail row under an expanded row.
|
|
228
|
+
*/
|
|
152
229
|
renderExpanded?: (row: Row) => React.ReactNode;
|
|
153
|
-
/**
|
|
230
|
+
/**
|
|
231
|
+
* Which rows get an expand toggle; by default rows with sub-rows, or every row with `renderExpanded`.
|
|
232
|
+
*/
|
|
154
233
|
isRowExpandable?: (row: Row) => boolean;
|
|
234
|
+
/**
|
|
235
|
+
* Expanded row ids, controlled.
|
|
236
|
+
*/
|
|
155
237
|
expanded?: React.Key[];
|
|
238
|
+
/**
|
|
239
|
+
* Initially expanded ids, uncontrolled.
|
|
240
|
+
*/
|
|
156
241
|
defaultExpanded?: React.Key[];
|
|
242
|
+
/**
|
|
243
|
+
* Expansion change.
|
|
244
|
+
*/
|
|
157
245
|
onExpandedChange?: (expanded: React.Key[]) => void;
|
|
158
|
-
/**
|
|
159
|
-
|
|
160
|
-
|
|
246
|
+
/**
|
|
247
|
+
* Load error: replaces the body with the message in `role="alert"`.
|
|
248
|
+
*/
|
|
249
|
+
loadError?: React.ReactNode;
|
|
250
|
+
/**
|
|
251
|
+
* Number of skeleton rows.
|
|
252
|
+
*/
|
|
161
253
|
loadingRows?: number;
|
|
162
|
-
/**
|
|
254
|
+
/**
|
|
255
|
+
* Panel above the table (search, filters, bulk actions); stacks below 30rem of table width.
|
|
256
|
+
*/
|
|
163
257
|
toolbar?: React.ReactNode;
|
|
164
258
|
/**
|
|
165
|
-
* Group key of a row:
|
|
166
|
-
* first appear in `rows`; a sort orders the rows inside each group.
|
|
259
|
+
* Group key of a row: each group gets a header row and its own `<tbody>`. Groups keep the order in which they first appear in `rows`; a sort orders the rows inside each group; a group split by paging repeats its header.
|
|
167
260
|
*/
|
|
168
261
|
getRowGroup?: (row: Row) => string | number;
|
|
169
|
-
/**
|
|
262
|
+
/**
|
|
263
|
+
* Content of a group header; `group.rows` holds every row of the group (all pages) for totals. Children are laid out start / end in the visible width.
|
|
264
|
+
*/
|
|
170
265
|
renderGroupHeader?: (group: DataTableGroup<Row>) => React.ReactNode;
|
|
171
|
-
/**
|
|
266
|
+
/**
|
|
267
|
+
* Group headers stick under the head (or the top edge) while their rows scroll.
|
|
268
|
+
*/
|
|
172
269
|
stickyGroupHeaders?: boolean;
|
|
173
270
|
/**
|
|
174
|
-
*
|
|
175
|
-
* `defaultCollapsedGroups`, `onCollapsedGroupsChange` makes groups fold: each group header gets
|
|
176
|
-
* a disclosure toggle and its rows fold away and back.
|
|
271
|
+
* Collapsed group keys, controlled. Any prop of this triad makes groups fold: a chevron toggle leads each header, rows fold like sub-rows. «Select all» and paging still count collapsed rows.
|
|
177
272
|
*/
|
|
178
273
|
collapsedGroups?: (string | number)[];
|
|
179
|
-
/**
|
|
274
|
+
/**
|
|
275
|
+
* Initially collapsed group keys, uncontrolled; `[]` — every group open but foldable.
|
|
276
|
+
*/
|
|
180
277
|
defaultCollapsedGroups?: (string | number)[];
|
|
181
|
-
/**
|
|
278
|
+
/**
|
|
279
|
+
* The collapsed group keys changed (a group header toggle).
|
|
280
|
+
*/
|
|
182
281
|
onCollapsedGroupsChange?: (collapsedGroups: (string | number)[]) => void;
|
|
183
282
|
};
|
|
184
|
-
export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange,
|
|
283
|
+
export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
|
|
185
284
|
export declare namespace DataTable {
|
|
186
285
|
var ColumnsMenu: typeof DataTableColumnsMenu;
|
|
187
286
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import type { ControlSize } from "../../internal/states";
|
|
2
1
|
type FooterProps = {
|
|
3
|
-
size: ControlSize;
|
|
4
2
|
/** Range line («Показано 1–5 из 23»), or nothing. */
|
|
5
3
|
range: string | null;
|
|
6
4
|
pagination: {
|
|
@@ -11,6 +9,6 @@ type FooterProps = {
|
|
|
11
9
|
/** Infinite-scroll status, or nothing. */
|
|
12
10
|
status: string | null;
|
|
13
11
|
};
|
|
14
|
-
/** Range line, Pagination and the infinite-scroll status under the table. */
|
|
15
|
-
export declare function Footer({
|
|
12
|
+
/** Range line, Pagination (the table's tier from context) and the infinite-scroll status under the table. */
|
|
13
|
+
export declare function Footer({ range, pagination, status }: FooterProps): import("react/jsx-runtime").JSX.Element | null;
|
|
16
14
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type ControlSize } from "../../internal/states";
|
|
3
3
|
import type { DataTableLabels } from "./DataTable";
|
|
4
4
|
import { type RowReorderShared } from "./reorder";
|
|
5
5
|
import { type MeasureRow } from "./rows";
|
|
@@ -10,7 +10,7 @@ type StateRowsProps<Row> = {
|
|
|
10
10
|
expandEnabled: boolean;
|
|
11
11
|
/** A leading column of row handles (`onReorder`). */
|
|
12
12
|
reorderable?: boolean;
|
|
13
|
-
|
|
13
|
+
loadError: React.ReactNode;
|
|
14
14
|
empty: React.ReactNode;
|
|
15
15
|
emptyLabel: string;
|
|
16
16
|
skeletonRows: number;
|
|
@@ -20,5 +20,5 @@ type StateRowsProps<Row> = {
|
|
|
20
20
|
* in a sticky box of the visible width, so a wide table centres it in the viewport, not across
|
|
21
21
|
* every column.
|
|
22
22
|
*/
|
|
23
|
-
export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable,
|
|
23
|
+
export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
|
|
24
24
|
export {};
|
|
@@ -4,8 +4,6 @@ import type { FlatRow } from "./rows";
|
|
|
4
4
|
export type RowReorderShared = {
|
|
5
5
|
/** The table is sorted by a column: the manual order is not what is on screen. */
|
|
6
6
|
locked: boolean;
|
|
7
|
-
/** Rows whose move the owner is still saving. */
|
|
8
|
-
pending: ReadonlySet<React.Key>;
|
|
9
7
|
/** `aria-label` of a row's handle; `{label}` is `getRowLabel(row)`. */
|
|
10
8
|
handleLabel: string;
|
|
11
9
|
/** Why the handles are off while the table is sorted. */
|
|
@@ -21,6 +19,8 @@ export type RowReorderOptions<Row> = {
|
|
|
21
19
|
expandEnabled: boolean;
|
|
22
20
|
/** Sorted by a column. */
|
|
23
21
|
sorted: boolean;
|
|
22
|
+
/** The owner's `rows` as given: a move is made against this array. */
|
|
23
|
+
rows: readonly Row[];
|
|
24
24
|
/** Every row in table order (sorted, grouped), the rows on screen a run of them. */
|
|
25
25
|
orderedRows: readonly Row[];
|
|
26
26
|
/** Where the rows on screen start in `orderedRows`. */
|
|
@@ -33,14 +33,15 @@ export type RowReorderOptions<Row> = {
|
|
|
33
33
|
};
|
|
34
34
|
/**
|
|
35
35
|
* Row reordering of a DataTable on Dnd's sortable list: the move goes to the owner as
|
|
36
|
-
* `onReorder(id, beforeId)` with the row keys; a returned promise keeps the row in its new place
|
|
37
|
-
* with a busy handle until it settles, a rejection glides it back (Dnd
|
|
36
|
+
* `onReorder(id, beforeId)` with the row keys; a returned promise keeps the row in its new place,
|
|
37
|
+
* busy with a busy handle, until it settles, a rejection glides it back (Dnd tracks the promise and
|
|
38
|
+
* rolls the drawn order back).
|
|
38
39
|
*/
|
|
39
40
|
export declare function useRowReorder<Row>(options: RowReorderOptions<Row>): {
|
|
40
41
|
enabled: boolean;
|
|
41
42
|
shared: RowReorderShared | null;
|
|
42
43
|
reorderIn: (entries: readonly Entry<Row>[]) => (id: string, beforeId: string | null) => void | Promise<void>;
|
|
43
|
-
isOwnMove: (previous: readonly unknown[], next: readonly unknown[]) => boolean;
|
|
44
|
+
isOwnMove: (previousRows: readonly Row[], previous: readonly unknown[], next: readonly unknown[]) => boolean;
|
|
44
45
|
};
|
|
45
46
|
type ReorderBodyProps<Row> = {
|
|
46
47
|
entries: Entry<Row>[];
|
|
@@ -56,7 +57,7 @@ type ReorderBodyProps<Row> = {
|
|
|
56
57
|
};
|
|
57
58
|
/** A `<tbody>` whose rows reorder: Dnd's sortable list in its table-rows mode, by the handle only. */
|
|
58
59
|
export declare function ReorderBody<Row>({ entries, start, locked, onReorder, getRowLabel, renderRow, header, className, }: ReorderBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
|
|
59
|
-
/**
|
|
60
|
+
/** The drag session the rows need; it joins one the app already has above the table. */
|
|
60
61
|
export declare function ReorderRoot({ enabled, children, }: {
|
|
61
62
|
enabled: boolean;
|
|
62
63
|
children: React.ReactNode;
|
|
@@ -74,15 +75,14 @@ type RowElementProps = Omit<React.ComponentProps<"tr">, "ref"> & {
|
|
|
74
75
|
export declare function RowElement({ reorder, rowKey, rowRef, id, children, ...rest }: RowElementProps): import("react/jsx-runtime").JSX.Element;
|
|
75
76
|
type HandleCellProps = {
|
|
76
77
|
reorder: RowReorderShared;
|
|
77
|
-
rowKey: React.Key;
|
|
78
78
|
rowLabel: string | undefined;
|
|
79
79
|
className?: string | undefined;
|
|
80
80
|
/** Wraps the content like the row's other cells (the fold of a collapsible group's row). */
|
|
81
81
|
wrap?: (node: React.ReactNode) => React.ReactNode;
|
|
82
82
|
};
|
|
83
83
|
/**
|
|
84
|
-
* The leading cell of a reorderable row: the grip (Alt + ↑ / ↓ from the keyboard
|
|
85
|
-
*
|
|
84
|
+
* The leading cell of a reorderable row: the grip (Alt + ↑ / ↓ from the keyboard; busy while the
|
|
85
|
+
* owner saves this row's move) and, while the table is sorted, a disabled grip that says why.
|
|
86
86
|
*/
|
|
87
|
-
export declare function ReorderHandleCell({ reorder,
|
|
87
|
+
export declare function ReorderHandleCell({ reorder, rowLabel, className, wrap }: HandleCellProps): import("react/jsx-runtime").JSX.Element;
|
|
88
88
|
export {};
|
|
@@ -27,6 +27,11 @@ export type DataTableColumn<Row> = {
|
|
|
27
27
|
* up, with the sort indicator at the end edge.
|
|
28
28
|
*/
|
|
29
29
|
headerAlign?: DataTableCellAlign;
|
|
30
|
+
/**
|
|
31
|
+
* The header names the column for assistive tech only (an action column): the head cell looks
|
|
32
|
+
* empty, the `<th>` keeps `header` as its name.
|
|
33
|
+
*/
|
|
34
|
+
hideHeader?: boolean;
|
|
30
35
|
width?: string;
|
|
31
36
|
minWidth?: string;
|
|
32
37
|
maxWidth?: string;
|
|
@@ -13,9 +13,9 @@ type UseInfiniteRowsOptions = {
|
|
|
13
13
|
};
|
|
14
14
|
/**
|
|
15
15
|
* Infinite scroll: reveals loaded rows in batches while a sentinel under the table reaches the
|
|
16
|
-
* viewport, then asks for more data (`onLoadMore`) once every loaded row is shown.
|
|
17
|
-
* `onLoadMore` counts as loading until it settles; after a rejection the table
|
|
18
|
-
* the rows change, so a failing request is never repeated in a loop.
|
|
16
|
+
* viewport (`useLoadMore`), then asks for more data (`onLoadMore`) once every loaded row is shown.
|
|
17
|
+
* A promise from `onLoadMore` counts as loading until it settles; after a rejection the table
|
|
18
|
+
* stops asking until the rows change, so a failing request is never repeated in a loop.
|
|
19
19
|
*/
|
|
20
20
|
export declare function useInfiniteRows({ enabled, pageSize, batchSize, totalRows, hasMore, loadingMore, onLoadMore, scrollRef, }: UseInfiniteRowsOptions): {
|
|
21
21
|
visibleCount: number;
|