prime-ui-kit 0.15.0 → 0.16.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 +72 -63
- package/dist/chunks/{chunk-XJAVS6FH.js → chunk-4PSQ64S4.js} +3094 -1750
- package/dist/chunks/{chunk-THFZIHKU.js → chunk-6TPHKCUJ.js} +9392 -9225
- package/dist/chunks/{chunk-6TI4DSM5.js → chunk-A7OQWH6R.js} +1 -1
- package/dist/chunks/{chunk-2IKH55MI.js → chunk-HDBQICPW.js} +170 -138
- package/dist/chunks/{chunk-Q3BFRQHZ.js → chunk-U3Q2I3MY.js} +169 -10
- 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 +3 -0
- 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 +64 -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 +19 -18
- 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/page-content/PageContent.d.ts +56 -37
- package/dist/components/page-toolbar/PageToolbar.d.ts +7 -6
- package/dist/components/pagination/Pagination.d.ts +25 -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 -12
- 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 +13 -3
- 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/{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 +29 -5
- 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 +53 -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-header/AppHeader.d.ts +29 -20
- package/dist/layout/app-shell/AppShell.d.ts +72 -8
- package/dist/layout/bottom-nav/BottomNav.d.ts +58 -22
- package/dist/layout/index.d.ts +2 -2
- package/dist/layout/sidebar/Sidebar.d.ts +232 -101
- package/dist/skill/SKILL.md +10 -10
- package/dist/skill/anti-slop.md +105 -24
- package/dist/skill/api-contract.md +115 -35
- package/dist/skill/cheatsheet.md +37 -37
- package/dist/skill/checklist.md +57 -89
- package/dist/skill/choosing.md +23 -25
- package/dist/skill/components.md +50 -48
- package/dist/skill/composition.md +68 -58
- package/dist/skill/foundations.md +31 -24
- package/dist/skill/layouts.md +81 -83
- 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 +23 -16
- 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 +2 -2
- 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 +9 -5
- package/dist/skill/reference/components/banner/examples/dismissible.tsx +3 -19
- package/dist/skill/reference/components/banner/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/breadcrumb/COMPONENT.md +17 -11
- 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 +66 -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/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 +16 -5
- 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.tsx +9 -8
- 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 +4 -6
- 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 +35 -22
- 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.tsx +108 -131
- package/dist/skill/reference/components/chat/examples/states.tsx +23 -22
- package/dist/skill/reference/components/chat-list/COMPONENT.md +10 -5
- package/dist/skill/reference/components/chat-list/examples/examples.module.css +0 -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 +14 -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/examples.module.css +5 -2
- 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 +55 -19
- package/dist/skill/reference/components/color-picker/examples/controlled.tsx +16 -5
- package/dist/skill/reference/components/color-picker/examples/examples.module.css +6 -7
- package/dist/skill/reference/components/color-picker/examples/in-form.tsx +24 -22
- package/dist/skill/reference/components/color-picker/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/color-picker/examples/panel.tsx +1 -1
- package/dist/skill/reference/components/color-picker/examples/sizes.tsx +9 -11
- 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 +11 -5
- 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 +14 -25
- package/dist/skill/reference/components/data-table/COMPONENT.md +31 -21
- package/dist/skill/reference/components/data-table/examples/controlled.tsx +14 -2
- package/dist/skill/reference/components/data-table/examples/examples.module.css +1 -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 +11 -10
- 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 +3 -2
- package/dist/skill/reference/components/datepicker/examples/in-form.tsx +33 -25
- 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 +19 -27
- 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/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/divider/COMPONENT.md +26 -12
- package/dist/skill/reference/components/divider/examples/align.tsx +2 -4
- package/dist/skill/reference/components/divider/examples/examples.module.css +13 -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 +5 -1
- 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 +4 -6
- package/dist/skill/reference/components/dnd/examples/states.tsx +41 -35
- package/dist/skill/reference/components/drawer/COMPONENT.md +37 -14
- 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 +31 -26
- package/dist/skill/reference/components/drawer/examples/sizes.tsx +32 -27
- package/dist/skill/reference/components/dropdown/COMPONENT.md +58 -23
- 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 +21 -9
- 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/sizes.tsx +32 -26
- package/dist/skill/reference/components/field-list/examples/states.tsx +37 -31
- package/dist/skill/reference/components/fieldset/COMPONENT.md +10 -5
- package/dist/skill/reference/components/fieldset/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/file-upload/COMPONENT.md +67 -29
- 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 +2 -2
- package/dist/skill/reference/components/file-upload/examples/screen.tsx +6 -4
- 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 +16 -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.tsx +2 -2
- 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 +1 -1
- package/dist/skill/reference/components/hint/examples/hint-or-error.tsx +2 -2
- package/dist/skill/reference/components/hint/examples/overview.tsx +9 -10
- 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 +1 -3
- package/dist/skill/reference/components/kanban/examples/screen.tsx +6 -4
- 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 +10 -6
- 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 +3 -11
- package/dist/skill/reference/components/label/examples/overview.tsx +5 -9
- 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/examples.module.css +2 -2
- 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/page-content/COMPONENT.md +21 -29
- package/dist/skill/reference/components/page-content/examples/examples.module.css +3 -16
- package/dist/skill/reference/components/page-content/examples/grid.tsx +3 -1
- package/dist/skill/reference/components/page-content/examples/list-detail.tsx +55 -49
- package/dist/skill/reference/components/page-content/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/page-content/examples/overview.tsx +2 -2
- package/dist/skill/reference/components/page-content/examples/variants.tsx +7 -7
- package/dist/skill/reference/components/page-toolbar/COMPONENT.md +10 -6
- package/dist/skill/reference/components/page-toolbar/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/page-toolbar/examples/save-changes.tsx +25 -22
- package/dist/skill/reference/components/pagination/COMPONENT.md +20 -17
- package/dist/skill/reference/components/pagination/examples/narrow.tsx +5 -5
- package/dist/skill/reference/components/popover/COMPONENT.md +43 -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 +45 -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 +10 -5
- 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/smart-filter/COMPONENT.md +32 -12
- package/dist/skill/reference/components/smart-filter/examples/examples.module.css +0 -21
- package/dist/skill/reference/components/smart-filter/examples/ranges.tsx +2 -1
- package/dist/skill/reference/components/smart-filter/examples/sizes.tsx +2 -4
- package/dist/skill/reference/components/sparkline/COMPONENT.md +7 -3
- 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/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 +21 -8
- 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 +17 -2
- 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 +564 -0
- package/dist/skill/reference/layout/app-header/COMPONENT.md +27 -26
- package/dist/skill/reference/layout/app-header/examples/examples.module.css +4 -23
- package/dist/skill/reference/layout/app-header/examples/in-app-shell.tsx +3 -5
- package/dist/skill/reference/layout/app-header/examples/narrow.tsx +58 -20
- package/dist/skill/reference/layout/app-shell/COMPONENT.md +40 -10
- package/dist/skill/reference/layout/app-shell/examples/examples.module.css +2 -22
- package/dist/skill/reference/layout/app-shell/examples/footer.tsx +2 -2
- package/dist/skill/reference/layout/app-shell/examples/overview.tsx +3 -5
- package/dist/skill/reference/layout/app-shell/examples/screen.tsx +27 -21
- package/dist/skill/reference/layout/app-shell/examples/template.tsx +3 -3
- package/dist/skill/reference/layout/bottom-nav/COMPONENT.md +27 -17
- package/dist/skill/reference/layout/bottom-nav/examples/examples.module.css +2 -7
- package/dist/skill/reference/layout/bottom-nav/examples/floating-action.tsx +2 -2
- package/dist/skill/reference/layout/bottom-nav/examples/floating.tsx +2 -2
- package/dist/skill/reference/layout/bottom-nav/examples/in-app-shell.tsx +2 -2
- package/dist/skill/reference/layout/bottom-nav/examples/router.tsx +6 -5
- package/dist/skill/reference/layout/sidebar/COMPONENT.md +50 -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 +47 -0
- package/dist/skill/reference/layout/sidebar/examples/examples.module.css +7 -32
- package/dist/skill/reference/layout/sidebar/examples/narrow.tsx +44 -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 +48 -51
- 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 +3 -16
- package/dist/tokens/offGrid.d.ts +7 -0
- package/dist/tokens/primitives.d.ts +22 -7
- package/dist/tokens/semantic.d.ts +201 -51
- package/dist/tokens/themes/dark.d.ts +32 -31
- 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 +23 -16
- 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 +2 -2
- 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 +9 -5
- package/src/components/banner/examples/dismissible.tsx +3 -19
- package/src/components/banner/examples/overview.tsx +1 -1
- package/src/components/breadcrumb/COMPONENT.md +17 -11
- 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 +66 -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/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 +16 -5
- 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.tsx +9 -8
- 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 +4 -6
- 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 +35 -22
- 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.tsx +108 -131
- package/src/components/chat/examples/states.tsx +23 -22
- package/src/components/chat-list/COMPONENT.md +10 -5
- package/src/components/chat-list/examples/examples.module.css +0 -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 +14 -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/examples.module.css +5 -2
- 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 +55 -19
- package/src/components/color-picker/examples/controlled.tsx +16 -5
- package/src/components/color-picker/examples/examples.module.css +6 -7
- package/src/components/color-picker/examples/in-form.tsx +24 -22
- package/src/components/color-picker/examples/overview.tsx +1 -1
- package/src/components/color-picker/examples/panel.tsx +1 -1
- package/src/components/color-picker/examples/sizes.tsx +9 -11
- 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 +11 -5
- 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 +14 -25
- package/src/components/data-table/COMPONENT.md +31 -21
- package/src/components/data-table/examples/controlled.tsx +14 -2
- package/src/components/data-table/examples/examples.module.css +1 -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 +11 -10
- 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 +3 -2
- package/src/components/datepicker/examples/in-form.tsx +33 -25
- 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 +19 -27
- 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/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/divider/COMPONENT.md +26 -12
- package/src/components/divider/examples/align.tsx +2 -4
- package/src/components/divider/examples/examples.module.css +13 -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 +5 -1
- 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 +4 -6
- package/src/components/dnd/examples/states.tsx +41 -35
- package/src/components/drawer/COMPONENT.md +37 -14
- 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 +31 -26
- package/src/components/drawer/examples/sizes.tsx +32 -27
- package/src/components/dropdown/COMPONENT.md +58 -23
- 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 +21 -9
- 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/sizes.tsx +32 -26
- package/src/components/field-list/examples/states.tsx +37 -31
- package/src/components/fieldset/COMPONENT.md +10 -5
- package/src/components/fieldset/examples/examples.module.css +1 -1
- package/src/components/file-upload/COMPONENT.md +67 -29
- 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 +2 -2
- package/src/components/file-upload/examples/screen.tsx +6 -4
- 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 +16 -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.tsx +2 -2
- 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 +1 -1
- package/src/components/hint/examples/hint-or-error.tsx +2 -2
- package/src/components/hint/examples/overview.tsx +9 -10
- 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 +1 -3
- package/src/components/kanban/examples/screen.tsx +6 -4
- package/src/components/kanban/examples/states.tsx +37 -58
- package/src/components/kanban/examples/variants.tsx +0 -3
- package/src/components/kbd/COMPONENT.md +10 -6
- 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 +3 -11
- package/src/components/label/examples/overview.tsx +5 -9
- 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/examples.module.css +2 -2
- 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/page-content/COMPONENT.md +21 -29
- package/src/components/page-content/examples/examples.module.css +3 -16
- package/src/components/page-content/examples/grid.tsx +3 -1
- package/src/components/page-content/examples/list-detail.tsx +55 -49
- package/src/components/page-content/examples/narrow.tsx +1 -1
- package/src/components/page-content/examples/overview.tsx +2 -2
- package/src/components/page-content/examples/variants.tsx +7 -7
- package/src/components/page-toolbar/COMPONENT.md +10 -6
- package/src/components/page-toolbar/examples/overview.tsx +1 -1
- package/src/components/page-toolbar/examples/save-changes.tsx +25 -22
- package/src/components/pagination/COMPONENT.md +20 -17
- package/src/components/pagination/examples/narrow.tsx +5 -5
- package/src/components/popover/COMPONENT.md +43 -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 +45 -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 +10 -5
- 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/smart-filter/COMPONENT.md +32 -12
- package/src/components/smart-filter/examples/examples.module.css +0 -21
- package/src/components/smart-filter/examples/ranges.tsx +2 -1
- package/src/components/smart-filter/examples/sizes.tsx +2 -4
- package/src/components/sparkline/COMPONENT.md +7 -3
- package/src/components/sparkline/examples/examples.module.css +1 -1
- package/src/components/sparkline/examples/signed-bars.tsx +2 -2
- 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 +21 -8
- 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 +17 -2
- 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-header/COMPONENT.md +27 -26
- package/src/layout/app-header/examples/examples.module.css +4 -23
- package/src/layout/app-header/examples/in-app-shell.tsx +3 -5
- package/src/layout/app-header/examples/narrow.tsx +58 -20
- package/src/layout/app-shell/COMPONENT.md +40 -10
- package/src/layout/app-shell/examples/examples.module.css +2 -22
- package/src/layout/app-shell/examples/footer.tsx +2 -2
- package/src/layout/app-shell/examples/overview.tsx +3 -5
- package/src/layout/app-shell/examples/screen.tsx +27 -21
- package/src/layout/app-shell/examples/template.tsx +3 -3
- package/src/layout/bottom-nav/COMPONENT.md +27 -17
- package/src/layout/bottom-nav/examples/examples.module.css +2 -7
- package/src/layout/bottom-nav/examples/floating-action.tsx +2 -2
- package/src/layout/bottom-nav/examples/floating.tsx +2 -2
- package/src/layout/bottom-nav/examples/in-app-shell.tsx +2 -2
- package/src/layout/bottom-nav/examples/router.tsx +6 -5
- package/src/layout/sidebar/COMPONENT.md +50 -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 +47 -0
- package/src/layout/sidebar/examples/examples.module.css +7 -32
- package/src/layout/sidebar/examples/narrow.tsx +44 -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 +13 -14
- package/src/styles/theme-light.css +67 -23
- package/src/styles/tokens.css +14 -4
- 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/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/skill/reference/components/drawer/examples/examples.module.css +0 -8
- 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/src/components/drawer/examples/examples.module.css +0 -8
- 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
|
@@ -1,82 +1,127 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import type { AsyncHandler } from "../../internal/usePendingChanges";
|
|
2
3
|
import { type DragItem, type DragOutcome } from "./dragSession";
|
|
3
4
|
import { type Point, type Rect } from "./geometry";
|
|
4
5
|
import { type DndLabels } from "./labels";
|
|
5
6
|
export type { DragItem, DragOutcome } from "./dragSession";
|
|
6
7
|
export type { DndLabels } from "./labels";
|
|
8
|
+
/** Applies a reorder to an array; hosts of `Dnd.Sortable` (FieldList) take it from this module. */
|
|
9
|
+
export { moveBefore } from "./useSortableList";
|
|
10
|
+
/**
|
|
11
|
+
* Set on a `Dnd.Sortable` while an item of its kind is carried: the list may take it. A host scopes
|
|
12
|
+
* its drag-time look to it (no hover-only actions, no snapping in the scroller around the list).
|
|
13
|
+
*/
|
|
14
|
+
export declare const DND_CARRYING_ATTRIBUTE = "data-dnd-carrying";
|
|
7
15
|
export type DndRootProps = {
|
|
8
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Built-in strings, see Labels.
|
|
18
|
+
*/
|
|
9
19
|
labels?: Partial<DndLabels>;
|
|
20
|
+
/**
|
|
21
|
+
* The app or the screen that drags.
|
|
22
|
+
*/
|
|
10
23
|
children?: React.ReactNode;
|
|
11
24
|
};
|
|
12
25
|
/**
|
|
13
26
|
* Owns the one drag session the app shares, the overlay that follows the pointer and the live
|
|
14
|
-
* region. Mount once above every screen that drags: a drag crosses component boundaries.
|
|
27
|
+
* region. Mount once above every screen that drags: a drag crosses component boundaries. A root
|
|
28
|
+
* inside another one is its children: the outer session stays the one session.
|
|
15
29
|
*/
|
|
16
|
-
declare function DndRoot(
|
|
30
|
+
declare function DndRoot(props: DndRootProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
17
31
|
declare namespace DndRoot {
|
|
18
32
|
var displayName: string;
|
|
19
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* The live region of the drag session above, for a host that announces its own changes of the same
|
|
36
|
+
* items (a FileUpload set of tiles): one region speaks them in order. `null` without a `Dnd.Root`.
|
|
37
|
+
*/
|
|
38
|
+
export declare function useDragAnnouncer(): ((message: string) => void) | null;
|
|
20
39
|
export type DndHandleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
|
|
21
|
-
ref?: React.Ref<
|
|
40
|
+
ref?: React.Ref<HTMLElement>;
|
|
22
41
|
};
|
|
42
|
+
/**
|
|
43
|
+
* Whether the owner is still saving the move of the `Dnd.SortableItem` around (its `onReorder`
|
|
44
|
+
* promise): for a host that draws the busy state inside the item itself (a card's spinner).
|
|
45
|
+
*/
|
|
46
|
+
export declare function useSortableItemBusy(): boolean;
|
|
47
|
+
export type DndLockProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "role"> & {
|
|
48
|
+
ref?: React.Ref<HTMLSpanElement>;
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* The mark of a thing that holds its place (a pinned row, a system column): the lock a `Dnd.Handle`
|
|
52
|
+
* turns into in a `locked` item, and the same mark where a host shows a fixed row without a grip
|
|
53
|
+
* (FieldList). Named `labels.locked` unless the host names it.
|
|
54
|
+
*/
|
|
55
|
+
export declare function DndLock({ className, "aria-label": ariaLabel, ...rest }: DndLockProps): import("react/jsx-runtime").JSX.Element;
|
|
23
56
|
/**
|
|
24
57
|
* The grip of a `handle` item: a ghost icon-only Button (`xs`), so it is reachable by keyboard
|
|
25
|
-
* (Alt+arrows reorder)
|
|
58
|
+
* (Alt+arrows reorder) and carries the item's key shortcuts and role description. In a `locked`
|
|
59
|
+
* item it is a `Dnd.Lock` instead; while the owner saves the item's move it is busy.
|
|
26
60
|
*/
|
|
27
61
|
declare function DndHandle({ className, "aria-label": ariaLabel, ref, ...rest }: DndHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
28
62
|
declare namespace DndHandle {
|
|
29
63
|
var displayName: string;
|
|
30
64
|
}
|
|
31
65
|
export type DndSortableProps<T> = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
32
|
-
/**
|
|
66
|
+
/**
|
|
67
|
+
* Items in their current order.
|
|
68
|
+
*/
|
|
33
69
|
items: readonly T[];
|
|
34
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Stable unique id; must match `Dnd.SortableItem id`.
|
|
72
|
+
*/
|
|
35
73
|
getId: (item: T) => string;
|
|
36
|
-
/**
|
|
74
|
+
/**
|
|
75
|
+
* Spoken by the live region.
|
|
76
|
+
*/
|
|
37
77
|
getLabel?: (item: T) => string;
|
|
38
78
|
/**
|
|
39
|
-
*
|
|
40
|
-
* item drawn in its new place until it settles; a rejection glides it back.
|
|
79
|
+
* Item `id` lands in front of `beforeId` (`null` = last), maybe from a linked list. Apply it with `moveBefore`; a returned promise keeps the item still and busy until it settles, a rejection moves it back.
|
|
41
80
|
*/
|
|
42
|
-
onReorder:
|
|
81
|
+
onReorder: AsyncHandler<[id: string, beforeId: string | null]>;
|
|
43
82
|
/**
|
|
44
|
-
*
|
|
45
|
-
* have on release. Parts marked `data-dnd-mirror` stay in step on the carried copy.
|
|
83
|
+
* Returns a `Dnd.SortableItem`. During a drag `index` is the place the item will have on release, so a shown position follows the gap; parts marked `data-dnd-mirror` stay in step on the carried copy.
|
|
46
84
|
*/
|
|
47
85
|
renderItem: (item: T, index: number) => React.ReactNode;
|
|
48
|
-
/**
|
|
86
|
+
/**
|
|
87
|
+
* A column, a single row, or a wrapping grid (`display: grid`; the host sets the tracks and the cells' size, the gap takes a cell). Keyboard: Alt + ↑ / ↓ in a column, Alt + ← / → in a row and a grid.
|
|
88
|
+
*/
|
|
49
89
|
axis?: "x" | "y" | "grid";
|
|
50
|
-
/**
|
|
90
|
+
/**
|
|
91
|
+
* Only `Dnd.Handle` starts a drag; the rest of the item stays free for clicks and text selection.
|
|
92
|
+
*/
|
|
51
93
|
handle?: boolean;
|
|
94
|
+
/**
|
|
95
|
+
* No drag, no keyboard reorder.
|
|
96
|
+
*/
|
|
52
97
|
disabled?: boolean;
|
|
53
98
|
/**
|
|
54
|
-
*
|
|
55
|
-
* `onReorder` with an `id` that is not in `items` (move it into this list), and Alt + the arrows
|
|
56
|
-
* across the axis move an item to the neighbouring list of the kind (document order). Defaults to
|
|
57
|
-
* a unique value per list, so lists stay separate.
|
|
99
|
+
* Lists sharing a `kind` exchange items (a board): an item from another list arrives in `onReorder` with an `id` not in `items`. Alt + the arrows across the axis move it by keyboard. Name each list: it is spoken.
|
|
58
100
|
*/
|
|
59
101
|
kind?: string;
|
|
60
102
|
/**
|
|
61
|
-
* Refuses an item
|
|
62
|
-
* is spoken and shown under the carried copy. The list turns `danger` before the release.
|
|
103
|
+
* Refuses an item by id: `false`, or a string that says why (spoken and shown under the carried copy). The list turns `danger` before the release.
|
|
63
104
|
*/
|
|
64
105
|
canDrop?: (id: string) => boolean | string;
|
|
65
|
-
/**
|
|
106
|
+
/**
|
|
107
|
+
* Shown while the list has no items, inside a dashed drop slot while the list takes drops; fades out when a gap opens in the list, so the gap takes its place.
|
|
108
|
+
*/
|
|
66
109
|
empty?: React.ReactNode;
|
|
67
110
|
/**
|
|
68
|
-
* Root element
|
|
69
|
-
* gap into a row across every column, and the carried copy keeps every cell's width.
|
|
111
|
+
* Root element; `ul` / `ol` render items as `li`, `tbody` as table rows `tr` (the gap is a row across every column, the carried copy keeps every cell's width).
|
|
70
112
|
*/
|
|
71
113
|
as?: "div" | "ul" | "ol" | "tbody";
|
|
72
|
-
/**
|
|
114
|
+
/**
|
|
115
|
+
* Accessible name of the list.
|
|
116
|
+
*/
|
|
73
117
|
"aria-label"?: string;
|
|
74
118
|
/**
|
|
75
|
-
* Content in front of the items that never moves and takes no drop position
|
|
76
|
-
* a group of table rows).
|
|
119
|
+
* Content in front of the items that never moves and takes no drop position: the heading row of a group in a `tbody`.
|
|
77
120
|
*/
|
|
78
121
|
header?: React.ReactNode;
|
|
79
|
-
/**
|
|
122
|
+
/**
|
|
123
|
+
* Content after the items that never moves and takes no drop position: an add tile at the end of a grid. Inside `ul` / `ol` it must be `li`.
|
|
124
|
+
*/
|
|
80
125
|
children?: React.ReactNode;
|
|
81
126
|
ref?: React.Ref<HTMLElement>;
|
|
82
127
|
};
|
|
@@ -89,38 +134,80 @@ declare namespace DndSortable {
|
|
|
89
134
|
var displayName: string;
|
|
90
135
|
}
|
|
91
136
|
export type DndSortableItemProps = {
|
|
92
|
-
/**
|
|
137
|
+
/**
|
|
138
|
+
* The item id (same as `getId`).
|
|
139
|
+
*/
|
|
93
140
|
id: string;
|
|
141
|
+
/**
|
|
142
|
+
* This item cannot be dragged or moved (others may still move past it).
|
|
143
|
+
*/
|
|
94
144
|
disabled?: boolean;
|
|
95
145
|
/**
|
|
96
|
-
* Holds its place: it does not
|
|
97
|
-
* pinned first row, a system column). Its `Dnd.Handle` shows a lock.
|
|
146
|
+
* Holds its place: it does not move and nothing is put where it would shift it. Its `Dnd.Handle` turns into a lock. A pinned first row, a system column.
|
|
98
147
|
*/
|
|
99
148
|
locked?: boolean;
|
|
149
|
+
/**
|
|
150
|
+
* The row look: fill, radius, padding.
|
|
151
|
+
*/
|
|
100
152
|
className?: string;
|
|
153
|
+
/**
|
|
154
|
+
* The row content.
|
|
155
|
+
*/
|
|
101
156
|
children?: React.ReactNode;
|
|
102
157
|
ref?: React.Ref<HTMLElement>;
|
|
103
158
|
} & Omit<React.HTMLAttributes<HTMLElement>, "id">;
|
|
104
|
-
/**
|
|
159
|
+
/**
|
|
160
|
+
* One item of a `Dnd.Sortable`. Renders `li` inside `ul` / `ol`, `tr` inside `tbody`, `div` otherwise.
|
|
161
|
+
* The item is the keyboard target (a `div` one is a named `button`), or with `handle` its grip is.
|
|
162
|
+
*/
|
|
105
163
|
declare function DndSortableItem({ id, disabled: itemDisabled, locked, className, children, onPointerDown, onKeyDown, onDragStart, ref, ...rest }: DndSortableItemProps): import("react/jsx-runtime").JSX.Element;
|
|
106
164
|
declare namespace DndSortableItem {
|
|
107
165
|
var displayName: string;
|
|
108
166
|
}
|
|
109
167
|
export type DndDraggableProps<TData = unknown> = {
|
|
110
|
-
/**
|
|
168
|
+
/**
|
|
169
|
+
* What it is; zones accept by kind.
|
|
170
|
+
*/
|
|
111
171
|
kind: string;
|
|
172
|
+
/**
|
|
173
|
+
* Unique within its kind.
|
|
174
|
+
*/
|
|
112
175
|
id: string;
|
|
113
|
-
/**
|
|
176
|
+
/**
|
|
177
|
+
* Payload handed to the zone's `onDrop`.
|
|
178
|
+
*/
|
|
114
179
|
data?: TData;
|
|
115
|
-
/**
|
|
180
|
+
/**
|
|
181
|
+
* Spoken by the live region.
|
|
182
|
+
*/
|
|
116
183
|
label?: string;
|
|
184
|
+
/**
|
|
185
|
+
* Not draggable.
|
|
186
|
+
*/
|
|
117
187
|
disabled?: boolean;
|
|
118
|
-
/**
|
|
188
|
+
/**
|
|
189
|
+
* Only a `Dnd.Handle` inside starts the drag.
|
|
190
|
+
*/
|
|
119
191
|
handle?: boolean;
|
|
192
|
+
/**
|
|
193
|
+
* Element.
|
|
194
|
+
*/
|
|
120
195
|
as?: "div" | "li" | "span" | "article" | "section";
|
|
196
|
+
/**
|
|
197
|
+
* Fired once the press became a drag.
|
|
198
|
+
*/
|
|
121
199
|
onDragStart?: (item: DragItem<TData>, point: Point, origin: Rect) => void;
|
|
200
|
+
/**
|
|
201
|
+
* Always fired at the end.
|
|
202
|
+
*/
|
|
122
203
|
onDragEnd?: (item: DragItem<TData>, outcome: DragOutcome) => void;
|
|
204
|
+
/**
|
|
205
|
+
* Class on the item.
|
|
206
|
+
*/
|
|
123
207
|
className?: string;
|
|
208
|
+
/**
|
|
209
|
+
* The item content.
|
|
210
|
+
*/
|
|
124
211
|
children?: React.ReactNode;
|
|
125
212
|
ref?: React.Ref<HTMLElement>;
|
|
126
213
|
} & Omit<React.HTMLAttributes<HTMLElement>, "id" | "onDragStart" | "onDragEnd">;
|
|
@@ -130,26 +217,50 @@ declare namespace DndDraggable {
|
|
|
130
217
|
var displayName: string;
|
|
131
218
|
}
|
|
132
219
|
export type DndDropZoneProps<TData = unknown> = {
|
|
133
|
-
/**
|
|
220
|
+
/**
|
|
221
|
+
* Kinds it takes, or a predicate.
|
|
222
|
+
*/
|
|
134
223
|
accepts: string | readonly string[] | ((item: DragItem) => boolean);
|
|
224
|
+
/**
|
|
225
|
+
* An accepted item landed.
|
|
226
|
+
*/
|
|
135
227
|
onDrop: (item: DragItem<TData>) => void;
|
|
136
228
|
/**
|
|
137
|
-
* Refuses an item
|
|
138
|
-
* shown under the carried copy). The zone turns `danger` before the release.
|
|
229
|
+
* Refuses an item: `false`, or a string that says why (spoken, and shown under the carried copy); the zone turns `danger` before the release.
|
|
139
230
|
*/
|
|
140
231
|
canDrop?: (item: DragItem<TData>) => boolean | string;
|
|
232
|
+
/**
|
|
233
|
+
* An accepted item came over / left.
|
|
234
|
+
*/
|
|
141
235
|
onEnter?: (item: DragItem<TData>) => void;
|
|
236
|
+
/**
|
|
237
|
+
* An accepted item came over / left.
|
|
238
|
+
*/
|
|
142
239
|
onLeave?: () => void;
|
|
143
|
-
/**
|
|
240
|
+
/**
|
|
241
|
+
* Flashes the zone after a drop, so the eye can follow where the item went.
|
|
242
|
+
*/
|
|
144
243
|
flashOnDrop?: boolean;
|
|
244
|
+
/**
|
|
245
|
+
* Not a target.
|
|
246
|
+
*/
|
|
145
247
|
disabled?: boolean;
|
|
248
|
+
/**
|
|
249
|
+
* Element.
|
|
250
|
+
*/
|
|
146
251
|
as?: "div" | "section" | "li" | "ul" | "ol" | "span";
|
|
252
|
+
/**
|
|
253
|
+
* The zone look.
|
|
254
|
+
*/
|
|
147
255
|
className?: string;
|
|
256
|
+
/**
|
|
257
|
+
* The zone content.
|
|
258
|
+
*/
|
|
148
259
|
children?: React.ReactNode;
|
|
149
260
|
ref?: React.Ref<HTMLElement>;
|
|
150
261
|
} & Omit<React.HTMLAttributes<HTMLElement>, "onDrop">;
|
|
151
262
|
/** A box that takes dropped items. `data-dnd-over` / `data-dnd-reject` / `data-dnd-flash` mirror its state. */
|
|
152
|
-
declare function DndDropZone<TData = unknown>({ accepts, onDrop, canDrop, onEnter, onLeave, flashOnDrop, disabled, as: Tag, className, children,
|
|
263
|
+
declare function DndDropZone<TData = unknown>({ accepts, onDrop, canDrop, onEnter, onLeave, flashOnDrop, disabled, as: Tag, className, children, ref: forwardedRef, ...rest }: DndDropZoneProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
153
264
|
declare namespace DndDropZone {
|
|
154
265
|
var displayName: string;
|
|
155
266
|
}
|
|
@@ -13,14 +13,6 @@ export type Rect = {
|
|
|
13
13
|
/** `grid`: items wrap into rows (reading order: row by row, start to end inside a row). */
|
|
14
14
|
export type Axis = "x" | "y" | "grid";
|
|
15
15
|
export declare function rectOf(element: Element): Rect;
|
|
16
|
-
/**
|
|
17
|
-
* Where an element sits in the layout with any animation transform taken back out — its glide and
|
|
18
|
-
* its growth (a tile growing into the cover cell is drawn smaller until it gets there). Every drop
|
|
19
|
-
* decision is measured against this: reading the drawn box makes each answer depend on the
|
|
20
|
-
* animation the previous answer started, and the gap swings between cells under a pointer that
|
|
21
|
-
* barely moves.
|
|
22
|
-
*/
|
|
23
|
-
export declare function layoutRect(element: Element): Rect;
|
|
24
16
|
export declare function rectContains(rect: Rect, point: Point): boolean;
|
|
25
17
|
export declare function distanceBetween(a: Point, b: Point): number;
|
|
26
18
|
/** Marks the gap a sortable list opens where the dragged item will land. */
|
|
@@ -28,8 +28,6 @@ export type DropTargetProps = {
|
|
|
28
28
|
"data-dnd-over"?: true | undefined;
|
|
29
29
|
"data-dnd-reject"?: true | undefined;
|
|
30
30
|
"data-dnd-flash"?: true | undefined;
|
|
31
|
-
/** Ends the drop flash when its animation finishes. */
|
|
32
|
-
onAnimationEnd: (event: React.AnimationEvent<HTMLElement>) => void;
|
|
33
31
|
};
|
|
34
32
|
export type DropTargetHandle = {
|
|
35
33
|
/** The id the target registered under; `DragSnapshot.overId` names it while the pointer is over. */
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { type AsyncHandler } from "../../internal/usePendingChanges";
|
|
2
3
|
import type { DropVerdict } from "./dragSession";
|
|
3
4
|
import { type Axis } from "./geometry";
|
|
4
5
|
import { type DragSourceProps } from "./useDragSource";
|
|
@@ -23,7 +24,7 @@ export type SortableListOptions = {
|
|
|
23
24
|
items: readonly string[];
|
|
24
25
|
labelOf: (id: string) => string;
|
|
25
26
|
/** A returned promise keeps the move drawn until it settles; a rejection glides it back. */
|
|
26
|
-
onReorder:
|
|
27
|
+
onReorder: AsyncHandler<[id: string, beforeId: string | null]>;
|
|
27
28
|
axis?: Axis | undefined;
|
|
28
29
|
disabled?: boolean | undefined;
|
|
29
30
|
/** Refuses an item of this kind (typically one from another list); a string says why. */
|
|
@@ -48,6 +49,10 @@ export type SortableListHandle = {
|
|
|
48
49
|
radius: string | null;
|
|
49
50
|
} | null;
|
|
50
51
|
isOver: boolean;
|
|
52
|
+
/** A drag of the list's kind is in flight: the list may take the item. */
|
|
53
|
+
carrying: boolean;
|
|
54
|
+
/** Items whose move the owner is still saving (a promise from `onReorder`). */
|
|
55
|
+
pending: ReadonlySet<string>;
|
|
51
56
|
/**
|
|
52
57
|
* The order to DRAW: `items`, except right after a drop, when the owner answers a beat later and
|
|
53
58
|
* drawing the old order until then would snap the item back and then jump again.
|
|
@@ -1,40 +1,61 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { DialogGuard } from "
|
|
3
|
-
import { DialogActions, DialogBody, DialogClose, DialogDescription,
|
|
4
|
-
import type
|
|
5
|
-
export type { DialogGuardProps as DrawerGuardProps } from "
|
|
6
|
-
export type { DialogActionsProps as DrawerActionsProps, DialogBodyProps as DrawerBodyProps, DialogCloseProps as DrawerCloseProps, DialogDescriptionProps as DrawerDescriptionProps, DialogFooterProps as DrawerFooterProps, DialogHeaderProps as DrawerHeaderProps, DialogIconProps as DrawerIconProps, DialogMetaProps as DrawerMetaProps, DialogTitleProps as DrawerTitleProps, DialogTriggerProps as DrawerTriggerProps, } from "
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
import { DialogGuard } from "../../internal/overlay/DialogGuard";
|
|
3
|
+
import { DialogActions, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogIcon, type DialogLabels, DialogMeta, DialogTitle, DialogTrigger } from "../../internal/overlay/DialogParts";
|
|
4
|
+
import { type ControlSize } from "../../internal/states";
|
|
5
|
+
export type { DialogGuardProps as DrawerGuardProps } from "../../internal/overlay/DialogGuard";
|
|
6
|
+
export type { DialogActionsProps as DrawerActionsProps, DialogBodyProps as DrawerBodyProps, DialogCloseProps as DrawerCloseProps, DialogDescriptionProps as DrawerDescriptionProps, DialogFooterProps as DrawerFooterProps, DialogHeaderProps as DrawerHeaderProps, DialogIconProps as DrawerIconProps, DialogMetaProps as DrawerMetaProps, DialogTitleProps as DrawerTitleProps, DialogTriggerProps as DrawerTriggerProps, } from "../../internal/overlay/DialogParts";
|
|
7
7
|
export type DrawerSide = "left" | "right";
|
|
8
|
-
export type DrawerLabels =
|
|
9
|
-
/** `aria-label` of the header close button. */
|
|
10
|
-
close: string;
|
|
11
|
-
};
|
|
8
|
+
export type DrawerLabels = DialogLabels;
|
|
12
9
|
export type DrawerRootProps = {
|
|
10
|
+
/**
|
|
11
|
+
* Controlled visibility; together with `onOpenChange`.
|
|
12
|
+
*/
|
|
13
13
|
open?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Initial visibility, uncontrolled.
|
|
16
|
+
*/
|
|
14
17
|
defaultOpen?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Called on every open and close: trigger, close button, `Close`, Escape, scrim click, code. A `Guard` holds the dismisses (not code).
|
|
20
|
+
*/
|
|
15
21
|
onOpenChange?: (open: boolean) => void;
|
|
16
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* Escape closes the dialog.
|
|
24
|
+
*/
|
|
17
25
|
closeOnEscape?: boolean;
|
|
18
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* A click on the scrim closes the dialog. A destructive action is confirmed in a ConfirmDialog; unsaved changes are held by `Guard`.
|
|
28
|
+
*/
|
|
19
29
|
closeOnOutsideClick?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Built-in strings, see Labels.
|
|
32
|
+
*/
|
|
20
33
|
labels?: Partial<DrawerLabels>;
|
|
34
|
+
/**
|
|
35
|
+
* Trigger and Content.
|
|
36
|
+
*/
|
|
21
37
|
children?: React.ReactNode;
|
|
22
38
|
};
|
|
23
|
-
declare function DrawerRoot({
|
|
39
|
+
declare function DrawerRoot({ children, ...options }: DrawerRootProps): import("react/jsx-runtime").JSX.Element;
|
|
24
40
|
declare namespace DrawerRoot {
|
|
25
41
|
var displayName: string;
|
|
26
42
|
}
|
|
27
43
|
export type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
28
|
-
/**
|
|
44
|
+
/**
|
|
45
|
+
* Edge the panel slides from; rounded only on the edge facing the page. No swipe: the drawer closes by its buttons, Escape and the scrim. A panel from the bottom edge is a Sheet.
|
|
46
|
+
*/
|
|
29
47
|
side?: DrawerSide;
|
|
30
|
-
/**
|
|
48
|
+
/**
|
|
49
|
+
* Width: 360 · 480 · 640 · 800. Below 640 px of viewport — full width, without corners.
|
|
50
|
+
*/
|
|
31
51
|
size?: Exclude<ControlSize, "xs">;
|
|
32
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* Class on the scrim.
|
|
54
|
+
*/
|
|
33
55
|
overlayClassName?: string;
|
|
34
|
-
/** The `role="dialog"` panel. */
|
|
35
56
|
ref?: React.Ref<HTMLDivElement>;
|
|
36
57
|
};
|
|
37
|
-
declare function DrawerContent({
|
|
58
|
+
declare function DrawerContent({ side, size, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
|
|
38
59
|
declare namespace DrawerContent {
|
|
39
60
|
var displayName: string;
|
|
40
61
|
}
|
|
@@ -1,37 +1,78 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { type PositionAlign, type PositionSide } from "../../hooks/usePosition";
|
|
2
|
+
import { type AnchorPoint, type PositionAlign, type PositionSide } from "../../hooks/usePosition";
|
|
3
3
|
import { type MenuGroupProps } from "../../internal/MenuGroup";
|
|
4
|
-
import
|
|
4
|
+
import { type SlotPartProps } from "../../internal/slot";
|
|
5
|
+
import { type ControlSize, type Tone } from "../../internal/states";
|
|
5
6
|
export type DropdownRootProps = {
|
|
7
|
+
/**
|
|
8
|
+
* Controlled visibility; together with `onOpenChange`.
|
|
9
|
+
*/
|
|
6
10
|
open?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Initial visibility, uncontrolled.
|
|
13
|
+
*/
|
|
7
14
|
defaultOpen?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Called on every open and close: trigger, item pick, Escape, outside press, code.
|
|
17
|
+
*/
|
|
8
18
|
onOpenChange?: (open: boolean) => void;
|
|
9
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* A pointerdown outside the menu and its trigger closes it; focus follows the pointer.
|
|
21
|
+
*/
|
|
10
22
|
closeOnOutsideClick?: boolean;
|
|
11
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* Escape closes the menu and returns focus to the trigger.
|
|
25
|
+
*/
|
|
12
26
|
closeOnEscape?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* A point inside the trigger or `Dropdown.Anchor` (px from its top-left corner) the menu opens at: a context menu at the pointer. It moves with the element on scroll.
|
|
29
|
+
*/
|
|
30
|
+
anchorPoint?: AnchorPoint | null;
|
|
31
|
+
/**
|
|
32
|
+
* Trigger (or Anchor) and Content.
|
|
33
|
+
*/
|
|
13
34
|
children: React.ReactNode;
|
|
14
35
|
};
|
|
15
|
-
declare function DropdownRoot({ open, defaultOpen, onOpenChange, closeOnOutsideClick, closeOnEscape, children, }: DropdownRootProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
declare function DropdownRoot({ open, defaultOpen, onOpenChange, closeOnOutsideClick, closeOnEscape, anchorPoint, children, }: DropdownRootProps): import("react/jsx-runtime").JSX.Element;
|
|
16
37
|
declare namespace DropdownRoot {
|
|
17
38
|
var displayName: string;
|
|
18
39
|
}
|
|
19
|
-
export type DropdownTriggerProps =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
declare function DropdownTrigger(
|
|
40
|
+
export type DropdownTriggerProps = SlotPartProps;
|
|
41
|
+
/**
|
|
42
|
+
* Wraps the element that opens the menu (usually a Button): it receives the ref, the ARIA, the
|
|
43
|
+
* click and the arrow keys (WAI-ARIA menu button). Props a wrapping trigger adds
|
|
44
|
+
* (`Tooltip.Trigger`) pass on to the child.
|
|
45
|
+
*/
|
|
46
|
+
declare function DropdownTrigger(props: DropdownTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
26
47
|
declare namespace DropdownTrigger {
|
|
27
48
|
var displayName: string;
|
|
28
49
|
}
|
|
50
|
+
export type DropdownAnchorProps = SlotPartProps;
|
|
51
|
+
/**
|
|
52
|
+
* An anchor that is not a trigger: the element a context menu opens against (a row, a list) with
|
|
53
|
+
* `Dropdown.Root anchorPoint`, the open state driven by `Dropdown.Root open`. It adds no click
|
|
54
|
+
* handler and no ARIA; presses on it do not close the menu, and focus returns to it on close.
|
|
55
|
+
*/
|
|
56
|
+
declare function DropdownAnchor({ children }: DropdownAnchorProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
declare namespace DropdownAnchor {
|
|
58
|
+
var displayName: string;
|
|
59
|
+
}
|
|
29
60
|
export type DropdownContentProps = Omit<React.HTMLAttributes<HTMLElement>, "role"> & {
|
|
61
|
+
/**
|
|
62
|
+
* Preferred side; flips to the opposite side when there is no room.
|
|
63
|
+
*/
|
|
30
64
|
side?: PositionSide;
|
|
65
|
+
/**
|
|
66
|
+
* Alignment along the trigger. `auto` lines the menu up with the trigger edge that has more room beyond it; `start`, `center` or `end` fix the edge.
|
|
67
|
+
*/
|
|
31
68
|
align?: PositionAlign;
|
|
32
|
-
/**
|
|
69
|
+
/**
|
|
70
|
+
* Row tier of the menu.
|
|
71
|
+
*/
|
|
33
72
|
size?: ControlSize;
|
|
34
|
-
/**
|
|
73
|
+
/**
|
|
74
|
+
* The menu is at least as wide as the trigger.
|
|
75
|
+
*/
|
|
35
76
|
matchTriggerWidth?: boolean;
|
|
36
77
|
ref?: React.Ref<HTMLDivElement>;
|
|
37
78
|
};
|
|
@@ -40,27 +81,50 @@ declare namespace DropdownContent {
|
|
|
40
81
|
var displayName: string;
|
|
41
82
|
}
|
|
42
83
|
export type DropdownItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "onSelect"> & {
|
|
43
|
-
/**
|
|
84
|
+
/**
|
|
85
|
+
* The action of the item.
|
|
86
|
+
*/
|
|
44
87
|
onSelect?: () => void;
|
|
88
|
+
/**
|
|
89
|
+
* Muted and `disabled` (a link item: `aria-disabled`), skipped by the arrow keys; no handler runs, the item's own `onClick` included.
|
|
90
|
+
*/
|
|
45
91
|
disabled?: boolean;
|
|
46
|
-
/**
|
|
92
|
+
/**
|
|
93
|
+
* `danger`: destructive action — danger text, icon and hover fill.
|
|
94
|
+
*/
|
|
47
95
|
tone?: Extract<Tone, "neutral" | "danger">;
|
|
48
96
|
/**
|
|
49
|
-
* The item is its single child
|
|
50
|
-
* it, so Cmd / Ctrl-click and «open in a new tab» work. Its children are the item content.
|
|
97
|
+
* The item is its single child link (`<a href>`, a router `Link`), so Cmd / Ctrl-click and «open in a new tab» work; the pick still closes the menu.
|
|
51
98
|
*/
|
|
52
99
|
asChild?: boolean;
|
|
53
100
|
/** The item element: `<button>`, or the `asChild` element. */
|
|
54
101
|
ref?: React.Ref<HTMLButtonElement>;
|
|
55
102
|
};
|
|
103
|
+
/**
|
|
104
|
+
* An item is no tab stop (`tabIndex -1`): the menu moves focus between items with the arrow keys
|
|
105
|
+
* (roving focus), and Tab leaves the menu. A disabled item runs no handler at all, the consumer's
|
|
106
|
+
* `onClick` included (`InteractiveElement`).
|
|
107
|
+
*/
|
|
56
108
|
declare function DropdownItem({ onSelect, disabled, tone, asChild, className, onClick, children, ref, ...rest }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
|
|
57
109
|
declare namespace DropdownItem {
|
|
58
110
|
var displayName: string;
|
|
59
111
|
}
|
|
60
112
|
export type DropdownCheckboxItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "onSelect" | "onChange" | "defaultChecked"> & {
|
|
113
|
+
/**
|
|
114
|
+
* Checked state (controlled).
|
|
115
|
+
*/
|
|
61
116
|
checked?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* Initial state (uncontrolled).
|
|
119
|
+
*/
|
|
62
120
|
defaultChecked?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* Called with the new state.
|
|
123
|
+
*/
|
|
63
124
|
onCheckedChange?: (checked: boolean) => void;
|
|
125
|
+
/**
|
|
126
|
+
* Muted and `disabled`, skipped by the arrow keys; no handler runs, the item's own `onClick` included.
|
|
127
|
+
*/
|
|
64
128
|
disabled?: boolean;
|
|
65
129
|
ref?: React.Ref<HTMLButtonElement>;
|
|
66
130
|
};
|
|
@@ -69,7 +133,7 @@ export type DropdownCheckboxItemProps = Omit<React.ButtonHTMLAttributes<HTMLButt
|
|
|
69
133
|
* has it and a check mark at the end while checked, `role="menuitemcheckbox"`. Toggling keeps the
|
|
70
134
|
* menu open, so several can be set in a row.
|
|
71
135
|
*/
|
|
72
|
-
declare function DropdownCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, className, onClick, children, ...rest }: DropdownCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
136
|
+
declare function DropdownCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, className, onClick, children, ref, ...rest }: DropdownCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
73
137
|
declare namespace DropdownCheckboxItem {
|
|
74
138
|
var displayName: string;
|
|
75
139
|
}
|
|
@@ -85,6 +149,9 @@ declare namespace DropdownItemIcon {
|
|
|
85
149
|
var displayName: string;
|
|
86
150
|
}
|
|
87
151
|
export type DropdownItemShortcutProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
152
|
+
/**
|
|
153
|
+
* The keys («⌘D»).
|
|
154
|
+
*/
|
|
88
155
|
children: React.ReactNode;
|
|
89
156
|
ref?: React.Ref<HTMLElement>;
|
|
90
157
|
};
|
|
@@ -94,6 +161,9 @@ declare namespace DropdownItemShortcut {
|
|
|
94
161
|
var displayName: string;
|
|
95
162
|
}
|
|
96
163
|
export type DropdownItemDescriptionProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "id"> & {
|
|
164
|
+
/**
|
|
165
|
+
* The sentence; it wraps inside the menu's width.
|
|
166
|
+
*/
|
|
97
167
|
children: React.ReactNode;
|
|
98
168
|
ref?: React.Ref<HTMLSpanElement>;
|
|
99
169
|
};
|
|
@@ -141,6 +211,7 @@ declare namespace DropdownHeader {
|
|
|
141
211
|
export declare const Dropdown: {
|
|
142
212
|
Root: typeof DropdownRoot;
|
|
143
213
|
Trigger: typeof DropdownTrigger;
|
|
214
|
+
Anchor: typeof DropdownAnchor;
|
|
144
215
|
Content: typeof DropdownContent;
|
|
145
216
|
Header: typeof DropdownHeader;
|
|
146
217
|
Title: typeof DropdownTitle;
|