prime-ui-kit 0.14.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 +79 -71
- package/dist/chunks/{chunk-WXKRUVSE.js → chunk-4PSQ64S4.js} +3145 -1800
- package/dist/chunks/{chunk-SYEX7OVT.js → chunk-6TPHKCUJ.js} +9424 -9244
- package/dist/chunks/{chunk-6TI4DSM5.js → chunk-A7OQWH6R.js} +1 -1
- package/dist/chunks/{chunk-P6ZO37JM.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 +153 -42
- 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 +71 -8
- 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 +63 -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 +34 -44
- 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 +3 -3
- package/dist/layout/sidebar/Sidebar.d.ts +232 -101
- package/dist/skill/SKILL.md +17 -15
- package/dist/skill/anti-slop.md +105 -24
- package/dist/skill/api-contract.md +117 -37
- package/dist/skill/cheatsheet.md +45 -38
- package/dist/skill/checklist.md +57 -85
- package/dist/skill/choosing.md +24 -28
- package/dist/skill/components.md +52 -57
- package/dist/skill/composition.md +321 -84
- package/dist/skill/foundations.md +32 -25
- package/dist/skill/layouts.md +104 -73
- 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 +6 -6
- 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/applied-filters.tsx +13 -19
- package/dist/skill/reference/components/badge/examples/controlled.tsx +32 -0
- package/dist/skill/reference/components/badge/examples/examples.module.css +3 -10
- 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/server-tags.tsx +2 -6
- 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/examples.module.css +1 -5
- package/dist/skill/reference/components/banner/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/banner/examples/page-strip.tsx +16 -22
- package/dist/skill/reference/components/breadcrumb/COMPONENT.md +21 -14
- package/dist/skill/reference/components/breadcrumb/examples/ellipsis.tsx +2 -2
- 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 +23 -17
- package/dist/skill/reference/components/button-group/examples/controlled.tsx +1 -1
- package/dist/skill/reference/components/button-group/examples/in-form.tsx +22 -2
- package/dist/skill/reference/components/button-group/examples/states.tsx +10 -1
- package/dist/skill/reference/components/card/COMPONENT.md +18 -6
- 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 +363 -0
- package/dist/skill/reference/components/card/examples/variants.tsx +75 -34
- package/dist/skill/reference/components/chart-frame/COMPONENT.md +25 -28
- package/dist/skill/reference/components/chart-frame/examples/controlled.tsx +9 -7
- package/dist/skill/reference/components/chart-frame/examples/fill-height.tsx +117 -0
- 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 -62
- package/dist/skill/reference/components/chart-frame/examples/tooltip.tsx +27 -26
- package/dist/skill/reference/components/chat/COMPONENT.md +37 -22
- package/dist/skill/reference/components/chat/examples/group-chat.tsx +16 -3
- package/dist/skill/reference/components/chat/examples/overview.tsx +119 -130
- package/dist/skill/reference/components/chat/examples/reactions.tsx +116 -0
- package/dist/skill/reference/components/chat/examples/screen.module.css +9 -0
- package/dist/skill/reference/components/chat/examples/screen.tsx +695 -0
- package/dist/skill/reference/components/chat/examples/states.tsx +23 -22
- package/dist/skill/reference/components/chat-list/COMPONENT.md +11 -5
- package/dist/skill/reference/components/chat-list/examples/examples.module.css +0 -8
- package/dist/skill/reference/components/chat-list/examples/links.tsx +72 -0
- 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 -52
- package/dist/skill/reference/components/checkbox/examples/in-form.tsx +16 -16
- package/dist/skill/reference/components/checkbox/examples/indicator.tsx +17 -56
- package/dist/skill/reference/components/checkbox/examples/overview.tsx +1 -1
- package/dist/skill/reference/components/checkbox/examples/states.tsx +6 -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 +16 -10
- 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 +58 -21
- package/dist/skill/reference/components/color-picker/examples/controlled-open.tsx +37 -0
- 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/presets.tsx +2 -2
- package/dist/skill/reference/components/color-picker/examples/sizes.tsx +9 -11
- package/dist/skill/reference/components/color-picker/examples/states.tsx +30 -16
- 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 +44 -25
- package/dist/skill/reference/components/composer/examples/attach-menu.tsx +78 -0
- package/dist/skill/reference/components/composer/examples/attachments.tsx +2 -2
- 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 +12 -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/{patterns/screen-states.module.css → reference/components/crossfade/examples/screen.module.css} +1 -24
- package/dist/skill/reference/components/crossfade/examples/screen.tsx +186 -0
- package/dist/skill/reference/components/data-table/COMPONENT.md +34 -23
- package/dist/skill/reference/components/data-table/examples/controlled.tsx +14 -2
- package/dist/skill/reference/components/data-table/examples/detail-panel.tsx +36 -37
- package/dist/skill/reference/components/data-table/examples/examples.module.css +1 -21
- package/dist/skill/reference/components/data-table/examples/narrow.tsx +5 -1
- package/dist/skill/reference/components/data-table/examples/numeric.tsx +36 -4
- package/dist/skill/reference/components/data-table/examples/overview.tsx +1 -0
- package/dist/skill/reference/components/data-table/examples/row-link.tsx +2 -1
- package/dist/skill/reference/components/data-table/examples/row-open.tsx +7 -36
- package/dist/skill/reference/components/data-table/examples/screen.module.css +13 -0
- package/dist/skill/{patterns/list-page.tsx → reference/components/data-table/examples/screen.tsx} +95 -74
- 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 +57 -25
- package/dist/skill/reference/components/datepicker/examples/dismiss.tsx +15 -0
- package/dist/skill/reference/components/datepicker/examples/examples.module.css +4 -7
- package/dist/skill/reference/components/datepicker/examples/in-form.tsx +29 -29
- package/dist/skill/reference/components/datepicker/examples/locale.tsx +35 -0
- package/dist/skill/reference/components/datepicker/examples/range-presets.tsx +11 -2
- package/dist/skill/reference/components/datepicker/examples/sizes.tsx +2 -2
- package/dist/skill/reference/components/datepicker/examples/states.tsx +11 -3
- package/dist/skill/reference/components/datepicker/examples/validation.tsx +3 -3
- package/dist/skill/reference/components/description-list/COMPONENT.md +24 -8
- 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/{patterns/detail-page.module.css → reference/components/description-list/examples/screen.module.css} +2 -27
- package/dist/skill/reference/components/description-list/examples/screen.tsx +206 -0
- package/dist/skill/reference/components/description-list/examples/sizes.tsx +2 -4
- package/dist/skill/reference/components/description-list/examples/structure.tsx +7 -8
- package/dist/skill/reference/components/description-list/examples/totals.tsx +40 -0
- package/dist/skill/reference/components/digit-input/COMPONENT.md +15 -7
- 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 +15 -5
- package/dist/skill/reference/components/digit-input/examples/without-focus-ring.tsx +13 -0
- 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 +3 -3
- package/dist/skill/reference/components/dnd/COMPONENT.md +56 -36
- package/dist/skill/reference/components/dnd/examples/drop-zones.tsx +82 -49
- package/dist/skill/reference/components/dnd/examples/examples.module.css +54 -6
- package/dist/skill/reference/components/dnd/examples/states.tsx +60 -0
- package/dist/skill/reference/components/dnd/examples/table.tsx +113 -0
- package/dist/skill/reference/components/drawer/COMPONENT.md +38 -14
- package/dist/skill/reference/components/drawer/examples/dismiss.tsx +5 -3
- package/dist/skill/reference/components/drawer/examples/guard.tsx +1 -3
- package/dist/skill/reference/components/drawer/examples/header-actions.tsx +6 -10
- package/dist/skill/reference/components/drawer/examples/in-form.tsx +31 -31
- package/dist/skill/reference/components/drawer/examples/overview.tsx +6 -18
- package/dist/skill/reference/components/drawer/examples/placement.tsx +31 -26
- package/dist/skill/reference/components/drawer/examples/screen.tsx +298 -0
- 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 +2 -6
- 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 +21 -10
- 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 +14 -13
- package/dist/skill/reference/components/empty-page/examples/sizes.tsx +13 -13
- package/dist/skill/reference/components/empty-page/examples/variants.tsx +34 -30
- package/dist/skill/reference/components/example-frame/COMPONENT.md +23 -10
- package/dist/skill/reference/components/example-frame/examples/controlled.tsx +3 -3
- package/dist/skill/reference/components/example-frame/examples/initial-view.tsx +44 -0
- package/dist/skill/reference/components/field-list/COMPONENT.md +16 -9
- package/dist/skill/reference/components/field-list/examples/errors.tsx +5 -2
- package/dist/skill/{patterns/record-editor.tsx → reference/components/field-list/examples/screen.tsx} +3 -43
- 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 +73 -34
- package/dist/skill/reference/components/file-upload/examples/avatar-upload.tsx +5 -5
- package/dist/skill/reference/components/file-upload/examples/custom-body.tsx +13 -7
- package/dist/skill/reference/components/file-upload/examples/examples.module.css +5 -11
- package/dist/skill/reference/components/file-upload/examples/file-cards.tsx +10 -1
- package/dist/skill/reference/components/file-upload/examples/gallery.tsx +2 -2
- package/dist/skill/reference/components/file-upload/examples/in-form.tsx +4 -9
- package/dist/skill/reference/components/file-upload/examples/narrow.tsx +1 -1
- package/dist/skill/reference/components/file-upload/examples/overview.tsx +5 -1
- package/dist/skill/reference/components/file-upload/examples/row-parts.tsx +27 -4
- package/dist/skill/{patterns/media-library.module.css → reference/components/file-upload/examples/screen.module.css} +4 -3
- package/dist/skill/reference/components/file-upload/examples/screen.tsx +648 -0
- package/dist/skill/reference/components/file-upload/examples/sizes.tsx +1 -3
- package/dist/skill/reference/components/file-upload/examples/states.tsx +6 -4
- package/dist/skill/reference/components/file-upload/examples/validation.tsx +11 -2
- package/dist/skill/reference/components/file-upload/examples/variants.tsx +15 -26
- 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 +22 -15
- package/dist/skill/reference/components/gantt/examples/examples.module.css +0 -16
- package/dist/skill/reference/components/gantt/examples/occupancy.tsx +2 -2
- package/dist/skill/reference/components/gantt/examples/screen.module.css +14 -0
- package/dist/skill/{patterns/schedule.tsx → reference/components/gantt/examples/screen.tsx} +175 -171
- package/dist/skill/reference/components/gantt/examples/sizes.tsx +16 -16
- package/dist/skill/reference/components/gantt/examples/states.tsx +38 -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 +12 -8
- package/dist/skill/reference/components/input/examples/affixes.tsx +2 -2
- package/dist/skill/reference/components/input/examples/examples.module.css +1 -7
- package/dist/skill/reference/components/input/examples/in-form.tsx +1 -9
- package/dist/skill/reference/components/input/examples/password-strength.tsx +34 -8
- package/dist/skill/reference/components/input/examples/sizes.tsx +9 -5
- package/dist/skill/reference/components/input/examples/states.tsx +40 -19
- package/dist/skill/reference/components/input/examples/with-icon.tsx +24 -16
- package/dist/skill/reference/components/kanban/COMPONENT.md +31 -24
- package/dist/skill/reference/components/kanban/examples/columns.tsx +22 -24
- 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 +15 -0
- package/dist/skill/{patterns/kanban-board.tsx → reference/components/kanban/examples/screen.tsx} +133 -173
- package/dist/skill/reference/components/kanban/examples/states.tsx +46 -56
- 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 +74 -20
- package/dist/skill/reference/components/login-form/examples/examples.module.css +2 -21
- package/dist/skill/reference/components/login-form/examples/forgot-password.tsx +28 -32
- package/dist/skill/reference/components/login-form/examples/narrow.tsx +2 -2
- package/dist/skill/reference/components/login-form/examples/overview.tsx +45 -47
- package/dist/skill/reference/components/login-form/examples/register.tsx +65 -69
- package/dist/skill/reference/components/login-form/examples/reset-password.tsx +50 -47
- package/dist/skill/reference/components/login-form/examples/sizes.tsx +4 -6
- package/dist/skill/reference/components/login-form/examples/states.tsx +53 -57
- package/dist/skill/reference/components/login-form/examples/structure.tsx +18 -22
- package/dist/skill/reference/components/login-form/examples/verification-code.tsx +41 -45
- package/dist/skill/reference/components/media-viewer/COMPONENT.md +13 -9
- package/dist/skill/reference/components/media-viewer/examples/dismiss.tsx +5 -1
- 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 +106 -49
- package/dist/skill/reference/components/message/examples/file.tsx +5 -1
- package/dist/skill/reference/components/message/examples/media-open.tsx +48 -0
- package/dist/skill/reference/components/message/examples/status.tsx +21 -3
- package/dist/skill/reference/components/message/examples/text-formatting.tsx +7 -1
- package/dist/skill/reference/components/message/examples/typing.tsx +5 -5
- package/dist/skill/reference/components/modal/COMPONENT.md +71 -36
- package/dist/skill/reference/components/modal/examples/custom-container.tsx +20 -20
- package/dist/skill/reference/components/modal/examples/dismiss.tsx +38 -28
- package/dist/skill/reference/components/modal/examples/enter-key.tsx +113 -0
- package/dist/skill/reference/components/modal/examples/examples.module.css +4 -17
- 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 +5 -2
- package/dist/skill/reference/components/native-select/COMPONENT.md +8 -4
- 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 +7 -3
- package/dist/skill/reference/components/notification/COMPONENT.md +37 -32
- package/dist/skill/reference/components/notification/examples/dismiss.tsx +2 -2
- 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 +22 -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 -52
- 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/{patterns/settings-page.tsx → reference/components/page-content/examples/screen.tsx} +3 -3
- package/dist/skill/reference/components/page-content/examples/variants.tsx +10 -17
- package/dist/skill/reference/components/page-toolbar/COMPONENT.md +27 -21
- package/dist/skill/reference/components/page-toolbar/examples/narrow.tsx +6 -3
- 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/controlled.tsx +29 -29
- package/dist/skill/reference/components/pagination/examples/examples.module.css +0 -2
- 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 +22 -30
- package/dist/skill/reference/components/progress-bar/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/progress-bar/examples/segments.tsx +2 -2
- package/dist/skill/reference/components/progress-circle/COMPONENT.md +22 -30
- 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/segments.tsx +8 -3
- package/dist/skill/reference/components/progress-circle/examples/variants.tsx +1 -0
- package/dist/skill/reference/components/radio/COMPONENT.md +14 -4
- package/dist/skill/reference/components/radio/examples/examples.module.css +14 -0
- package/dist/skill/reference/components/radio/examples/in-form.tsx +45 -0
- package/dist/skill/reference/components/scroll-container/COMPONENT.md +19 -12
- package/dist/skill/reference/components/scroll-container/examples/auto-scroll.tsx +11 -7
- package/dist/skill/reference/components/scroll-container/examples/edges.tsx +10 -7
- package/dist/skill/reference/components/scroll-container/examples/examples.module.css +10 -67
- package/dist/skill/reference/components/scroll-container/examples/load-more.tsx +51 -0
- package/dist/skill/reference/components/scroll-container/examples/lock.tsx +7 -9
- package/dist/skill/reference/components/scroll-container/examples/log.tsx +97 -0
- package/dist/skill/reference/components/scroll-container/examples/overscroll.tsx +7 -7
- package/dist/skill/reference/components/scroll-container/examples/overview.tsx +8 -8
- package/dist/skill/reference/components/scroll-container/examples/scrollbar.tsx +17 -11
- package/dist/skill/reference/components/scroll-container/examples/snap.tsx +2 -2
- package/dist/skill/reference/components/scroll-container/examples/variants.tsx +14 -7
- package/dist/skill/reference/components/segmented-control/COMPONENT.md +26 -14
- 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/in-form.tsx +5 -1
- package/dist/skill/reference/components/segmented-control/examples/scroll.tsx +1 -1
- package/dist/skill/reference/components/segmented-control/examples/states.tsx +10 -1
- package/dist/skill/reference/components/select/COMPONENT.md +34 -10
- package/dist/skill/reference/components/select/examples/dismiss.tsx +26 -0
- package/dist/skill/reference/components/select/examples/examples.module.css +3 -8
- 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 +15 -3
- package/dist/skill/reference/components/select/examples/with-icon.tsx +20 -18
- package/dist/skill/reference/components/sheet/COMPONENT.md +46 -21
- package/dist/skill/reference/components/sheet/examples/guard.tsx +72 -0
- package/dist/skill/reference/components/sheet/examples/header-actions.tsx +75 -0
- 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 +12 -6
- package/dist/skill/reference/components/slider/examples/examples.module.css +14 -7
- package/dist/skill/reference/components/slider/examples/hint-and-error.tsx +3 -5
- package/dist/skill/reference/components/slider/examples/in-form.tsx +49 -0
- package/dist/skill/reference/components/slider/examples/states.tsx +4 -1
- package/dist/skill/reference/components/smart-filter/COMPONENT.md +33 -13
- package/dist/skill/reference/components/smart-filter/examples/controlled.tsx +3 -3
- package/dist/skill/reference/components/smart-filter/examples/examples.module.css +0 -21
- package/dist/skill/reference/components/smart-filter/examples/ranges.tsx +45 -10
- package/dist/skill/reference/components/smart-filter/examples/sizes.tsx +2 -4
- package/dist/skill/reference/components/sparkline/COMPONENT.md +8 -4
- package/dist/skill/reference/components/sparkline/examples/examples.module.css +1 -1
- package/dist/skill/reference/components/sparkline/examples/reference.tsx +2 -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 +22 -17
- package/dist/skill/reference/components/tabs/examples/in-drawer.tsx +1 -1
- package/dist/skill/reference/components/tabs/examples/sizes.tsx +6 -11
- package/dist/skill/reference/components/tabs/examples/variants.tsx +19 -23
- package/dist/skill/reference/components/tag-select/COMPONENT.md +20 -7
- 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 +10 -3
- package/dist/skill/reference/components/textarea/COMPONENT.md +11 -7
- package/dist/skill/reference/components/textarea/examples/examples.module.css +3 -16
- package/dist/skill/reference/components/textarea/examples/in-form.tsx +3 -11
- package/dist/skill/reference/components/textarea/examples/sizes.tsx +10 -7
- package/dist/skill/reference/components/textarea/examples/states.tsx +30 -13
- package/dist/skill/reference/components/textarea/examples/validation.tsx +45 -36
- package/dist/skill/reference/components/thumbnail/COMPONENT.md +19 -14
- package/dist/skill/reference/components/thumbnail/examples/examples.module.css +2 -2
- package/dist/skill/reference/components/thumbnail/examples/fit.tsx +24 -0
- 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/thumbnail/examples/video.tsx +20 -1
- package/dist/skill/reference/components/timeline/COMPONENT.md +52 -36
- package/dist/skill/reference/components/timeline/examples/links.tsx +57 -16
- 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 +11 -7
- 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/tooltip/examples/toolbar.tsx +2 -2
- 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/typography/examples/weights.tsx +3 -0
- package/dist/skill/reference/components/video-note/COMPONENT.md +13 -9
- package/dist/skill/reference/components/video-note/examples/controlled.tsx +19 -2
- package/dist/skill/reference/components/video-note/examples/in-message.tsx +5 -2
- package/dist/skill/reference/components/visually-hidden/COMPONENT.md +10 -5
- package/dist/skill/reference/components/visually-hidden/examples/assertive.tsx +39 -0
- package/dist/skill/reference/components/visually-hidden/examples/overview.tsx +17 -7
- package/dist/skill/reference/components/voice-player/COMPONENT.md +17 -9
- package/dist/skill/reference/components/voice-player/examples/call-recording.tsx +19 -9
- package/dist/skill/reference/components/voice-player/examples/controlled.tsx +20 -3
- package/dist/skill/reference/foundation.md +564 -0
- package/dist/skill/reference/layout/app-header/COMPONENT.md +65 -81
- package/dist/skill/reference/layout/app-header/examples/breadcrumbs.tsx +10 -9
- 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 -6
- package/dist/skill/reference/layout/app-header/examples/narrow.tsx +58 -21
- package/dist/skill/reference/layout/app-header/examples/overview.tsx +8 -10
- package/dist/skill/reference/layout/app-header/examples/page-title.tsx +3 -10
- package/dist/skill/reference/layout/app-shell/COMPONENT.md +41 -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 +18 -35
- package/dist/skill/reference/layout/app-shell/examples/screen.tsx +268 -0
- package/dist/skill/reference/layout/app-shell/examples/template.tsx +32 -12
- 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 +55 -42
- package/dist/skill/reference/layout/sidebar/examples/account.tsx +3 -5
- package/dist/skill/reference/layout/sidebar/examples/brand-header.tsx +1 -3
- package/dist/skill/reference/layout/sidebar/examples/collapsible-groups.tsx +13 -7
- 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 +51 -0
- package/dist/skill/reference/layout/sidebar/examples/dismiss.tsx +47 -0
- package/dist/skill/reference/layout/sidebar/examples/examples.module.css +10 -30
- package/dist/skill/reference/layout/sidebar/examples/narrow.tsx +55 -0
- 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 +55 -0
- package/dist/skill/reference/layout/sidebar/examples/router.tsx +20 -9
- package/dist/skill/reference/layout/sidebar/examples/sizes.tsx +6 -6
- package/dist/skill/reference/layout/sidebar/examples/structure.tsx +7 -2
- package/dist/skill/responsive.md +49 -52
- 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 +6 -6
- package/src/components/avatar/examples/team-group.tsx +2 -2
- package/src/components/badge/COMPONENT.md +66 -34
- package/src/components/badge/examples/applied-filters.tsx +13 -19
- package/src/components/badge/examples/controlled.tsx +32 -0
- package/src/components/badge/examples/examples.module.css +3 -10
- 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/server-tags.tsx +2 -6
- 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/examples.module.css +1 -5
- package/src/components/banner/examples/overview.tsx +1 -1
- package/src/components/banner/examples/page-strip.tsx +16 -22
- package/src/components/breadcrumb/COMPONENT.md +21 -14
- package/src/components/breadcrumb/examples/ellipsis.tsx +2 -2
- 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 +23 -17
- package/src/components/button-group/examples/controlled.tsx +1 -1
- package/src/components/button-group/examples/in-form.tsx +22 -2
- package/src/components/button-group/examples/states.tsx +10 -1
- package/src/components/card/COMPONENT.md +18 -6
- package/src/components/card/examples/content-templates.tsx +8 -2
- package/src/components/card/examples/examples.module.css +4 -16
- package/src/components/card/examples/overview.tsx +11 -11
- package/src/components/card/examples/screen.module.css +14 -0
- package/src/components/card/examples/screen.tsx +363 -0
- package/src/components/card/examples/variants.tsx +75 -34
- package/src/components/chart-frame/COMPONENT.md +25 -28
- package/src/components/chart-frame/examples/controlled.tsx +9 -7
- package/src/components/chart-frame/examples/fill-height.tsx +117 -0
- 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 -62
- package/src/components/chart-frame/examples/tooltip.tsx +27 -26
- package/src/components/chat/COMPONENT.md +37 -22
- package/src/components/chat/examples/group-chat.tsx +16 -3
- package/src/components/chat/examples/overview.tsx +119 -130
- package/src/components/chat/examples/reactions.tsx +116 -0
- package/src/components/chat/examples/screen.module.css +9 -0
- package/src/components/chat/examples/screen.tsx +695 -0
- package/src/components/chat/examples/states.tsx +23 -22
- package/src/components/chat-list/COMPONENT.md +11 -5
- package/src/components/chat-list/examples/examples.module.css +0 -8
- package/src/components/chat-list/examples/links.tsx +72 -0
- 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 -52
- package/src/components/checkbox/examples/in-form.tsx +16 -16
- package/src/components/checkbox/examples/indicator.tsx +17 -56
- package/src/components/checkbox/examples/overview.tsx +1 -1
- package/src/components/checkbox/examples/states.tsx +6 -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 +16 -10
- 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 +58 -21
- package/src/components/color-picker/examples/controlled-open.tsx +37 -0
- 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/presets.tsx +2 -2
- package/src/components/color-picker/examples/sizes.tsx +9 -11
- package/src/components/color-picker/examples/states.tsx +30 -16
- 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 +44 -25
- package/src/components/composer/examples/attach-menu.tsx +78 -0
- package/src/components/composer/examples/attachments.tsx +2 -2
- 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 +12 -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 +17 -0
- package/src/components/crossfade/examples/screen.tsx +186 -0
- package/src/components/data-table/COMPONENT.md +34 -23
- package/src/components/data-table/examples/controlled.tsx +14 -2
- package/src/components/data-table/examples/detail-panel.tsx +36 -37
- package/src/components/data-table/examples/examples.module.css +1 -21
- package/src/components/data-table/examples/narrow.tsx +5 -1
- package/src/components/data-table/examples/numeric.tsx +36 -4
- package/src/components/data-table/examples/overview.tsx +1 -0
- package/src/components/data-table/examples/row-link.tsx +2 -1
- package/src/components/data-table/examples/row-open.tsx +7 -36
- package/src/components/data-table/examples/screen.module.css +13 -0
- package/src/components/data-table/examples/screen.tsx +355 -0
- 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 +57 -25
- package/src/components/datepicker/examples/dismiss.tsx +15 -0
- package/src/components/datepicker/examples/examples.module.css +4 -7
- package/src/components/datepicker/examples/in-form.tsx +29 -29
- package/src/components/datepicker/examples/locale.tsx +35 -0
- package/src/components/datepicker/examples/range-presets.tsx +11 -2
- package/src/components/datepicker/examples/sizes.tsx +2 -2
- package/src/components/datepicker/examples/states.tsx +11 -3
- package/src/components/datepicker/examples/validation.tsx +3 -3
- package/src/components/description-list/COMPONENT.md +24 -8
- 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 +46 -0
- package/src/components/description-list/examples/screen.tsx +206 -0
- package/src/components/description-list/examples/sizes.tsx +2 -4
- package/src/components/description-list/examples/structure.tsx +7 -8
- package/src/components/description-list/examples/totals.tsx +40 -0
- package/src/components/digit-input/COMPONENT.md +15 -7
- 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 +15 -5
- package/src/components/digit-input/examples/without-focus-ring.tsx +13 -0
- 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 +3 -3
- package/src/components/dnd/COMPONENT.md +56 -36
- package/src/components/dnd/examples/drop-zones.tsx +82 -49
- package/src/components/dnd/examples/examples.module.css +54 -6
- package/src/components/dnd/examples/states.tsx +60 -0
- package/src/components/dnd/examples/table.tsx +113 -0
- package/src/components/drawer/COMPONENT.md +38 -14
- package/src/components/drawer/examples/dismiss.tsx +5 -3
- package/src/components/drawer/examples/guard.tsx +1 -3
- package/src/components/drawer/examples/header-actions.tsx +6 -10
- package/src/components/drawer/examples/in-form.tsx +31 -31
- package/src/components/drawer/examples/overview.tsx +6 -18
- package/src/components/drawer/examples/placement.tsx +31 -26
- package/src/components/drawer/examples/screen.module.css +14 -0
- package/src/components/drawer/examples/screen.tsx +298 -0
- 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 +2 -6
- 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 +21 -10
- 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 +14 -13
- package/src/components/empty-page/examples/sizes.tsx +13 -13
- package/src/components/empty-page/examples/variants.tsx +34 -30
- package/src/components/example-frame/COMPONENT.md +23 -10
- package/src/components/example-frame/examples/controlled.tsx +3 -3
- package/src/components/example-frame/examples/initial-view.tsx +44 -0
- package/src/components/field-list/COMPONENT.md +16 -9
- package/src/components/field-list/examples/errors.tsx +5 -2
- package/src/components/field-list/examples/screen.module.css +18 -0
- package/src/components/field-list/examples/screen.tsx +316 -0
- 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 +73 -34
- package/src/components/file-upload/examples/avatar-upload.tsx +5 -5
- package/src/components/file-upload/examples/custom-body.tsx +13 -7
- package/src/components/file-upload/examples/examples.module.css +5 -11
- package/src/components/file-upload/examples/file-cards.tsx +10 -1
- package/src/components/file-upload/examples/gallery.tsx +2 -2
- package/src/components/file-upload/examples/in-form.tsx +4 -9
- package/src/components/file-upload/examples/narrow.tsx +1 -1
- package/src/components/file-upload/examples/overview.tsx +5 -1
- package/src/components/file-upload/examples/row-parts.tsx +27 -4
- package/src/components/file-upload/examples/screen.module.css +45 -0
- package/src/components/file-upload/examples/screen.tsx +648 -0
- package/src/components/file-upload/examples/sizes.tsx +1 -3
- package/src/components/file-upload/examples/states.tsx +6 -4
- package/src/components/file-upload/examples/validation.tsx +11 -2
- package/src/components/file-upload/examples/variants.tsx +15 -26
- 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 +22 -15
- package/src/components/gantt/examples/examples.module.css +0 -16
- package/src/components/gantt/examples/occupancy.tsx +2 -2
- package/src/components/gantt/examples/screen.module.css +14 -0
- package/src/components/gantt/examples/screen.tsx +726 -0
- package/src/components/gantt/examples/sizes.tsx +16 -16
- package/src/components/gantt/examples/states.tsx +38 -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 +12 -8
- package/src/components/input/examples/affixes.tsx +2 -2
- package/src/components/input/examples/examples.module.css +1 -7
- package/src/components/input/examples/in-form.tsx +1 -9
- package/src/components/input/examples/password-strength.tsx +34 -8
- package/src/components/input/examples/sizes.tsx +9 -5
- package/src/components/input/examples/states.tsx +40 -19
- package/src/components/input/examples/with-icon.tsx +24 -16
- package/src/components/kanban/COMPONENT.md +31 -24
- package/src/components/kanban/examples/columns.tsx +22 -24
- 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 +15 -0
- package/src/components/kanban/examples/screen.tsx +574 -0
- package/src/components/kanban/examples/states.tsx +46 -56
- 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 +74 -20
- package/src/components/login-form/examples/examples.module.css +2 -21
- package/src/components/login-form/examples/forgot-password.tsx +28 -32
- package/src/components/login-form/examples/narrow.tsx +2 -2
- package/src/components/login-form/examples/overview.tsx +45 -47
- package/src/components/login-form/examples/register.tsx +65 -69
- package/src/components/login-form/examples/reset-password.tsx +50 -47
- package/src/components/login-form/examples/sizes.tsx +4 -6
- package/src/components/login-form/examples/states.tsx +53 -57
- package/src/components/login-form/examples/structure.tsx +18 -22
- package/src/components/login-form/examples/verification-code.tsx +41 -45
- package/src/components/media-viewer/COMPONENT.md +13 -9
- package/src/components/media-viewer/examples/dismiss.tsx +5 -1
- 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 +106 -49
- package/src/components/message/examples/file.tsx +5 -1
- package/src/components/message/examples/media-open.tsx +48 -0
- package/src/components/message/examples/status.tsx +21 -3
- package/src/components/message/examples/text-formatting.tsx +7 -1
- package/src/components/message/examples/typing.tsx +5 -5
- package/src/components/modal/COMPONENT.md +71 -36
- package/src/components/modal/examples/custom-container.tsx +20 -20
- package/src/components/modal/examples/dismiss.tsx +38 -28
- package/src/components/modal/examples/enter-key.tsx +113 -0
- package/src/components/modal/examples/examples.module.css +4 -17
- 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 +5 -2
- package/src/components/native-select/COMPONENT.md +8 -4
- 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 +7 -3
- package/src/components/notification/COMPONENT.md +37 -32
- package/src/components/notification/examples/dismiss.tsx +2 -2
- 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 +22 -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 -52
- 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/screen.module.css +27 -0
- package/src/components/page-content/examples/screen.tsx +196 -0
- package/src/components/page-content/examples/variants.tsx +10 -17
- package/src/components/page-toolbar/COMPONENT.md +27 -21
- package/src/components/page-toolbar/examples/narrow.tsx +6 -3
- 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/controlled.tsx +29 -29
- package/src/components/pagination/examples/examples.module.css +0 -2
- 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 +22 -30
- package/src/components/progress-bar/examples/examples.module.css +1 -1
- package/src/components/progress-bar/examples/segments.tsx +2 -2
- package/src/components/progress-circle/COMPONENT.md +22 -30
- 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/segments.tsx +8 -3
- package/src/components/progress-circle/examples/variants.tsx +1 -0
- package/src/components/radio/COMPONENT.md +14 -4
- package/src/components/radio/examples/examples.module.css +14 -0
- package/src/components/radio/examples/in-form.tsx +45 -0
- package/src/components/scroll-container/COMPONENT.md +19 -12
- package/src/components/scroll-container/examples/auto-scroll.tsx +11 -7
- package/src/components/scroll-container/examples/edges.tsx +10 -7
- package/src/components/scroll-container/examples/examples.module.css +10 -67
- package/src/components/scroll-container/examples/load-more.tsx +51 -0
- package/src/components/scroll-container/examples/lock.tsx +7 -9
- package/src/components/scroll-container/examples/log.tsx +97 -0
- package/src/components/scroll-container/examples/overscroll.tsx +7 -7
- package/src/components/scroll-container/examples/overview.tsx +8 -8
- package/src/components/scroll-container/examples/scrollbar.tsx +17 -11
- package/src/components/scroll-container/examples/snap.tsx +2 -2
- package/src/components/scroll-container/examples/variants.tsx +14 -7
- package/src/components/segmented-control/COMPONENT.md +26 -14
- 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/in-form.tsx +5 -1
- package/src/components/segmented-control/examples/scroll.tsx +1 -1
- package/src/components/segmented-control/examples/states.tsx +10 -1
- package/src/components/select/COMPONENT.md +34 -10
- package/src/components/select/examples/dismiss.tsx +26 -0
- package/src/components/select/examples/examples.module.css +3 -8
- 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 +15 -3
- package/src/components/select/examples/with-icon.tsx +20 -18
- package/src/components/sheet/COMPONENT.md +46 -21
- package/src/components/sheet/examples/guard.tsx +72 -0
- package/src/components/sheet/examples/header-actions.tsx +75 -0
- 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 +12 -6
- package/src/components/slider/examples/examples.module.css +14 -7
- package/src/components/slider/examples/hint-and-error.tsx +3 -5
- package/src/components/slider/examples/in-form.tsx +49 -0
- package/src/components/slider/examples/states.tsx +4 -1
- package/src/components/smart-filter/COMPONENT.md +33 -13
- package/src/components/smart-filter/examples/controlled.tsx +3 -3
- package/src/components/smart-filter/examples/examples.module.css +0 -21
- package/src/components/smart-filter/examples/ranges.tsx +45 -10
- package/src/components/smart-filter/examples/sizes.tsx +2 -4
- package/src/components/sparkline/COMPONENT.md +8 -4
- package/src/components/sparkline/examples/examples.module.css +1 -1
- package/src/components/sparkline/examples/reference.tsx +2 -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 +22 -17
- package/src/components/tabs/examples/in-drawer.tsx +1 -1
- package/src/components/tabs/examples/sizes.tsx +6 -11
- package/src/components/tabs/examples/variants.tsx +19 -23
- package/src/components/tag-select/COMPONENT.md +20 -7
- 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 +10 -3
- package/src/components/textarea/COMPONENT.md +11 -7
- package/src/components/textarea/examples/examples.module.css +3 -16
- package/src/components/textarea/examples/in-form.tsx +3 -11
- package/src/components/textarea/examples/sizes.tsx +10 -7
- package/src/components/textarea/examples/states.tsx +30 -13
- package/src/components/textarea/examples/validation.tsx +45 -36
- package/src/components/thumbnail/COMPONENT.md +19 -14
- package/src/components/thumbnail/examples/examples.module.css +2 -2
- package/src/components/thumbnail/examples/fit.tsx +24 -0
- package/src/components/thumbnail/examples/states.tsx +1 -1
- package/src/components/thumbnail/examples/variants.tsx +12 -1
- package/src/components/thumbnail/examples/video.tsx +20 -1
- package/src/components/timeline/COMPONENT.md +52 -36
- package/src/components/timeline/examples/links.tsx +57 -16
- 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 +11 -7
- 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/tooltip/examples/toolbar.tsx +2 -2
- 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/typography/examples/weights.tsx +3 -0
- package/src/components/video-note/COMPONENT.md +13 -9
- package/src/components/video-note/examples/controlled.tsx +19 -2
- package/src/components/video-note/examples/in-message.tsx +5 -2
- package/src/components/visually-hidden/COMPONENT.md +10 -5
- package/src/components/visually-hidden/examples/assertive.tsx +39 -0
- package/src/components/visually-hidden/examples/overview.tsx +17 -7
- package/src/components/voice-player/COMPONENT.md +17 -9
- package/src/components/voice-player/examples/call-recording.tsx +19 -9
- package/src/components/voice-player/examples/controlled.tsx +20 -3
- package/src/layout/app-header/COMPONENT.md +65 -81
- package/src/layout/app-header/examples/breadcrumbs.tsx +10 -9
- package/src/layout/app-header/examples/examples.module.css +4 -23
- package/src/layout/app-header/examples/in-app-shell.tsx +3 -6
- package/src/layout/app-header/examples/narrow.tsx +58 -21
- package/src/layout/app-header/examples/overview.tsx +8 -10
- package/src/layout/app-header/examples/page-title.tsx +3 -10
- package/src/layout/app-shell/COMPONENT.md +41 -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 +18 -35
- package/src/layout/app-shell/examples/screen.module.css +11 -0
- package/src/layout/app-shell/examples/screen.tsx +268 -0
- package/src/layout/app-shell/examples/template.tsx +32 -12
- 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 +55 -42
- package/src/layout/sidebar/examples/account.tsx +3 -5
- package/src/layout/sidebar/examples/brand-header.tsx +1 -3
- package/src/layout/sidebar/examples/collapsible-groups.tsx +13 -7
- 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 +51 -0
- package/src/layout/sidebar/examples/dismiss.tsx +47 -0
- package/src/layout/sidebar/examples/examples.module.css +10 -30
- package/src/layout/sidebar/examples/narrow.tsx +55 -0
- 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 +55 -0
- package/src/layout/sidebar/examples/router.tsx +20 -9
- package/src/layout/sidebar/examples/sizes.tsx +6 -6
- package/src/layout/sidebar/examples/structure.tsx +7 -2
- 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/patterns/app-shell.tsx +0 -303
- package/dist/skill/patterns/chat.module.css +0 -8
- package/dist/skill/patterns/chat.tsx +0 -899
- package/dist/skill/patterns/dashboard.tsx +0 -340
- package/dist/skill/patterns/detail-page.tsx +0 -206
- package/dist/skill/patterns/form-drawer.tsx +0 -240
- package/dist/skill/patterns/kanban-board.module.css +0 -28
- package/dist/skill/patterns/list-page.module.css +0 -19
- package/dist/skill/patterns/media-library.tsx +0 -637
- package/dist/skill/patterns/schedule.module.css +0 -22
- package/dist/skill/patterns/screen-states.tsx +0 -187
- package/dist/skill/reference/components/drawer/examples/examples.module.css +0 -21
- 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 -21
- package/src/components/popover/examples/match-trigger-width.tsx +0 -23
- package/src/components/scroll-container/examples/chat.tsx +0 -101
- package/src/components/spinner/examples/loading-region.tsx +0 -22
- /package/dist/skill/{patterns/dashboard.module.css → reference/components/card/examples/screen.module.css} +0 -0
- /package/dist/skill/{patterns/form-drawer.module.css → reference/components/drawer/examples/screen.module.css} +0 -0
- /package/dist/skill/{patterns/record-editor.module.css → reference/components/field-list/examples/screen.module.css} +0 -0
- /package/dist/skill/{patterns/settings-page.module.css → reference/components/page-content/examples/screen.module.css} +0 -0
- /package/dist/skill/{patterns/app-shell.module.css → reference/layout/app-shell/examples/screen.module.css} +0 -0
|
@@ -9,29 +9,43 @@ export type { ChatPinnedItem, ChatPinnedLabels, ChatPinnedProps } from "./ChatPi
|
|
|
9
9
|
export type { ChatSeparatorProps, ChatServiceProps, ChatUnreadLabels, ChatUnreadProps, } from "./ChatRows";
|
|
10
10
|
export type { ChatLabels } from "./chatContext";
|
|
11
11
|
export type { ChatSelectionBarProps } from "./MessageList";
|
|
12
|
+
export declare const CHAT_LABELS: ChatLabels;
|
|
12
13
|
export type ChatRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
|
|
13
14
|
/**
|
|
14
|
-
* Selection mode (controlled): the `value`s of the selected messages, `null` while not selecting.
|
|
15
|
-
* Any of the triad lets a message's menu start selection («Выбрать»).
|
|
15
|
+
* Selection mode (controlled): the `value`s of the selected messages, `null` while not selecting. Any of the triad adds «Выбрать» to every `Message.Menu`; without it the chat has no selection.
|
|
16
16
|
*/
|
|
17
17
|
selected?: Selection;
|
|
18
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* Initial selection (uncontrolled).
|
|
20
|
+
*/
|
|
19
21
|
defaultSelected?: Selection;
|
|
20
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* The selection changed: a message toggled, selection started from the menu (`[value]`) or ended (`null`).
|
|
24
|
+
*/
|
|
21
25
|
onSelectedChange?: (selected: Selection) => void;
|
|
22
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* The search query (controlled); `null` — the search bar is closed. Matches in the messages' text and transcripts are marked; the newest is current.
|
|
28
|
+
*/
|
|
23
29
|
search?: string | null;
|
|
24
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* The initial search (uncontrolled).
|
|
32
|
+
*/
|
|
25
33
|
defaultSearch?: string | null;
|
|
26
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* The search opened (`""`), changed its query or closed (`null`).
|
|
36
|
+
*/
|
|
27
37
|
onSearchChange?: (search: string | null) => void;
|
|
28
38
|
/**
|
|
29
|
-
* A message to
|
|
30
|
-
|
|
39
|
+
* A message to jump to (a link, a notification): on change the chat brings it to the middle and the message itself blinks. The focus stays where it is; while the search is open its current match takes this place.
|
|
40
|
+
*/
|
|
41
|
+
jumpTo?: string | null;
|
|
42
|
+
/**
|
|
43
|
+
* The other side is typing: `Chat.Description` cross-fades into «печатает…» and the list ends with the typing bubble (`Message.Typing`), which gives way at once to the reply that ends it.
|
|
31
44
|
*/
|
|
32
|
-
current?: string | null;
|
|
33
|
-
/** The other side is typing: the header's status turns into «печатает…» and the list ends with the typing bubble. */
|
|
34
45
|
typing?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Built-in strings, see Labels.
|
|
48
|
+
*/
|
|
35
49
|
labels?: Partial<ChatLabels>;
|
|
36
50
|
ref?: React.Ref<HTMLDivElement>;
|
|
37
51
|
};
|
|
@@ -42,7 +56,7 @@ export type ChatRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultV
|
|
|
42
56
|
* scrolling in the middle, the footer with the Composer at the bottom. Every part is optional but
|
|
43
57
|
* `Chat.Messages`: a list without the rest is `Chat.Root` with `Chat.Messages` alone.
|
|
44
58
|
*/
|
|
45
|
-
declare function ChatRoot({ selected: selectedProp, defaultSelected, onSelectedChange, search: searchProp, defaultSearch, onSearchChange,
|
|
59
|
+
declare function ChatRoot({ selected: selectedProp, defaultSelected, onSelectedChange, search: searchProp, defaultSearch, onSearchChange, jumpTo: jumpToProp, typing, labels: labelsProp, className, children, ref, ...rest }: ChatRootProps): import("react/jsx-runtime").JSX.Element;
|
|
46
60
|
declare namespace ChatRoot {
|
|
47
61
|
var displayName: string;
|
|
48
62
|
}
|
|
@@ -60,7 +74,9 @@ declare namespace ChatHeader {
|
|
|
60
74
|
var displayName: string;
|
|
61
75
|
}
|
|
62
76
|
export type ChatTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
|
|
63
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* Heading level that fits the page outline (the look does not change).
|
|
79
|
+
*/
|
|
64
80
|
as?: "h2" | "h3" | "h4";
|
|
65
81
|
ref?: React.Ref<HTMLHeadingElement>;
|
|
66
82
|
};
|
|
@@ -110,56 +126,79 @@ declare namespace ChatSearch {
|
|
|
110
126
|
var displayName: string;
|
|
111
127
|
}
|
|
112
128
|
/** Where a message of `Chat.Messages items` stands, handed to `renderMessage`. */
|
|
113
|
-
export type ChatMessageEntry = {
|
|
129
|
+
export type ChatMessageEntry<T = unknown> = {
|
|
114
130
|
/** The place in its author's run; set on the rendered `Message.Root` for you. */
|
|
115
131
|
position: MessagePosition;
|
|
116
132
|
/** The first of a run: the author's header shows here in a group chat. */
|
|
117
133
|
showAuthor: boolean;
|
|
118
134
|
/** The last of a run: the avatar shows here in a group chat. */
|
|
119
135
|
showAvatar: boolean;
|
|
136
|
+
/** Another item of the list by its key (a reply's original), as the list holds it now. */
|
|
137
|
+
find: (key: string) => T | undefined;
|
|
120
138
|
};
|
|
121
|
-
export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "
|
|
139
|
+
export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "selected" | "defaultSelected" | "onSelectedChange" | "jumpTo" | "highlight" | "onMatchesChange" | "revealRef" | "labels"> & {
|
|
122
140
|
/**
|
|
123
|
-
* `
|
|
124
|
-
* shows the author's header (`Message.Author`), the last one the avatar (`Message.Avatar`), and
|
|
125
|
-
* incoming messages keep the avatar's gutter. Default `direct`.
|
|
141
|
+
* The first load: bubble-shaped `Skeleton`s on both sides stand in the list's place (`aria-busy`, `labels.loading` announced), then cross-fade into the messages; none of them counts as new.
|
|
126
142
|
*/
|
|
127
|
-
|
|
143
|
+
loading?: boolean;
|
|
128
144
|
/**
|
|
129
|
-
*
|
|
130
|
-
* (`aria-busy`, `labels.loading` announced), then cross-fade into the messages.
|
|
145
|
+
* Older history exists: a bubble-shaped placeholder stands above the first message and `onLoadOlder` runs when the reader reaches the top.
|
|
131
146
|
*/
|
|
132
|
-
loading?: boolean;
|
|
133
|
-
/** Older history exists: a placeholder stands above the first message and `onLoadOlder` runs at the top. */
|
|
134
147
|
hasOlder?: boolean;
|
|
135
|
-
/**
|
|
148
|
+
/**
|
|
149
|
+
* Load older messages and prepend them (while `hasOlder`); the reader's place is kept.
|
|
150
|
+
*/
|
|
136
151
|
onLoadOlder?: () => void | Promise<void>;
|
|
137
|
-
/**
|
|
152
|
+
/**
|
|
153
|
+
* Messages as application data, in time order: the list adds the dates, the runs and the unread band and sets each message's `value` and `position`. Without it, children are the rows.
|
|
154
|
+
*/
|
|
138
155
|
items?: readonly T[];
|
|
139
|
-
/**
|
|
156
|
+
/**
|
|
157
|
+
* A stable key of an item (with `items`): also its message's `value`. Keep it when the server confirms a sent message.
|
|
158
|
+
*/
|
|
140
159
|
getKey?: (item: T) => string;
|
|
141
|
-
/**
|
|
160
|
+
/**
|
|
161
|
+
* Who wrote an item (an id, with `items`): a change of author starts a new run.
|
|
162
|
+
*/
|
|
142
163
|
getAuthor?: (item: T) => string;
|
|
143
|
-
/**
|
|
164
|
+
/**
|
|
165
|
+
* When an item was sent (with `items`): a new day gets a date.
|
|
166
|
+
*/
|
|
144
167
|
getDate?: (item: T) => Date;
|
|
145
|
-
/**
|
|
168
|
+
/**
|
|
169
|
+
* An event of the chat, not a message: it stands alone and breaks the runs around it.
|
|
170
|
+
*/
|
|
146
171
|
isService?: (item: T) => boolean;
|
|
147
172
|
/**
|
|
148
|
-
* Renders an item
|
|
149
|
-
|
|
150
|
-
|
|
173
|
+
* Renders an item: a `Message.Root` or a `Chat.Service`; `entry` — `{ position, showAuthor, showAvatar, find }`, `find(key)` gives another item (a reply's original). Runs again only for an item whose data or place changed.
|
|
174
|
+
*/
|
|
175
|
+
renderMessage?: (item: T, entry: ChatMessageEntry<T>) => React.ReactElement;
|
|
176
|
+
/**
|
|
177
|
+
* The key of the first unread item: the «Непрочитанные сообщения» band stands above it.
|
|
151
178
|
*/
|
|
152
|
-
renderMessage?: (item: T, entry: ChatMessageEntry) => React.ReactElement;
|
|
153
|
-
/** The key of the first unread item: the «Непрочитанные» band stands above it. */
|
|
154
179
|
unread?: string;
|
|
155
|
-
/**
|
|
180
|
+
/**
|
|
181
|
+
* Messages of one author further apart than this many minutes start a new run.
|
|
182
|
+
*/
|
|
156
183
|
groupWindow?: number;
|
|
157
|
-
/**
|
|
184
|
+
/**
|
|
185
|
+
* «Today» for the dates.
|
|
186
|
+
*/
|
|
158
187
|
now?: Date;
|
|
159
|
-
/**
|
|
188
|
+
/**
|
|
189
|
+
* The label of a date.
|
|
190
|
+
*/
|
|
160
191
|
formatDate?: (date: Date, now: Date) => string;
|
|
161
192
|
};
|
|
162
|
-
|
|
193
|
+
/**
|
|
194
|
+
* The conversation: the one message list of the kit, in its own scroller. A `role="log"` of rows
|
|
195
|
+
* (new messages are announced politely) with one tab stop — arrows, Home and End move between
|
|
196
|
+
* messages. Rows come from `items` (dates, runs and the unread band added for you) or from
|
|
197
|
+
* children (`Message.Root`, `Chat.Separator`, `Chat.Service`, `Chat.Unread`; `Chat.SelectionBar`
|
|
198
|
+
* and `Message.Typing` close the list). Only the rows around the view render; the list opens at
|
|
199
|
+
* the end and keeps the reader's place.
|
|
200
|
+
*/
|
|
201
|
+
declare function ChatMessages<T>({ group, loading, hasOlder, onLoadOlder, items, getKey, getAuthor, getDate, isService, renderMessage, unread, groupWindow, now, formatDate, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ChatMessagesProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
163
202
|
declare namespace ChatMessages {
|
|
164
203
|
var displayName: string;
|
|
165
204
|
}
|
|
@@ -13,23 +13,35 @@ export type ChatPinnedLabels = {
|
|
|
13
13
|
/** Name of the unpin button. */
|
|
14
14
|
unpin: string;
|
|
15
15
|
};
|
|
16
|
+
export declare const CHAT_PINNED_LABELS: ChatPinnedLabels;
|
|
16
17
|
export type ChatPinnedProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onSelect"> & {
|
|
17
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* The pinned messages, oldest first: the `value` of each `Message.Root` and one line of it («Фото», «Голосовое сообщение» for media).
|
|
20
|
+
*/
|
|
18
21
|
items: readonly ChatPinnedItem[];
|
|
19
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* The pinned message shown (controlled).
|
|
24
|
+
*/
|
|
20
25
|
value?: string;
|
|
21
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* The one shown first (uncontrolled): the newest.
|
|
28
|
+
*/
|
|
22
29
|
defaultValue?: string;
|
|
23
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* The shown message changed: a press stepped to the next older one (the oldest wraps to the newest).
|
|
32
|
+
*/
|
|
24
33
|
onValueChange?: (value: string) => void;
|
|
25
34
|
/**
|
|
26
|
-
* A press on the bar, after the chat has
|
|
27
|
-
* load it when it is not in the list yet. The bar then moves on to the next older
|
|
28
|
-
* pinned message, the oldest wraps to the newest.
|
|
35
|
+
* A press on the bar, after the chat has jumped to the message: load it when it is not in the list yet.
|
|
29
36
|
*/
|
|
30
37
|
onSelect?: (value: string) => void;
|
|
31
|
-
/**
|
|
38
|
+
/**
|
|
39
|
+
* Unpin the shown message: a ghost close button at the end. Without it no button.
|
|
40
|
+
*/
|
|
32
41
|
onRemove?: (value: string) => void;
|
|
42
|
+
/**
|
|
43
|
+
* Built-in strings, see Labels.
|
|
44
|
+
*/
|
|
33
45
|
labels?: Partial<ChatPinnedLabels>;
|
|
34
46
|
ref?: React.Ref<HTMLDivElement>;
|
|
35
47
|
};
|
|
@@ -20,6 +20,9 @@ export type ChatUnreadLabels = {
|
|
|
20
20
|
unread: string;
|
|
21
21
|
};
|
|
22
22
|
export type ChatUnreadProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
23
|
+
/**
|
|
24
|
+
* `unread` — the text of the band.
|
|
25
|
+
*/
|
|
23
26
|
labels?: Partial<ChatUnreadLabels>;
|
|
24
27
|
ref?: React.Ref<HTMLDivElement>;
|
|
25
28
|
};
|
|
@@ -14,8 +14,7 @@ export type MessageListLabels = {
|
|
|
14
14
|
export declare const MESSAGE_LIST_LABELS: MessageListLabels;
|
|
15
15
|
export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
16
16
|
/**
|
|
17
|
-
* A group chat:
|
|
18
|
-
* run shows its author's header, the last one the avatar. Default `false`.
|
|
17
|
+
* A group chat of many authors: the first message of a run shows the author's header, the last one the avatar, and incoming messages keep the avatar's gutter. Without it a conversation of two.
|
|
19
18
|
*/
|
|
20
19
|
group?: boolean;
|
|
21
20
|
/**
|
|
@@ -27,39 +26,35 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
27
26
|
defaultSelected?: Selection;
|
|
28
27
|
/** The selection changed: a message toggled, selection started (`[value]`) or ended (`null`). */
|
|
29
28
|
onSelectedChange?: (selected: Selection) => void;
|
|
30
|
-
/**
|
|
29
|
+
/**
|
|
30
|
+
* The reaction of a double tap (and `L`) on a message: puts it or takes it back through `onReactionToggle`. `false` — off.
|
|
31
|
+
*/
|
|
31
32
|
quickReaction?: string | false;
|
|
32
33
|
/**
|
|
33
|
-
* The reactions of the
|
|
34
|
-
* the rest behind «⌄». `label` names each for assistive tech.
|
|
34
|
+
* The reactions of the bar above a message (long press, long hover or `R`): the first seven in a row, «⌄» opens the rest. `label` names each toggle button.
|
|
35
35
|
*/
|
|
36
36
|
reactionOptions?: readonly MessageReactionOption[];
|
|
37
37
|
/**
|
|
38
|
-
* The reader (`{ id, name:
|
|
39
|
-
* `MessageReaction.users` at once, before the data comes back.
|
|
38
|
+
* The reader (`{ id, name: «Вы», src?, color? }`): a reaction they put shows them among the chip's avatars at once, before the data comes back; matched by `id`.
|
|
40
39
|
*/
|
|
41
40
|
reader?: MessageUser;
|
|
42
41
|
/**
|
|
43
|
-
* A message was added at the end after the
|
|
44
|
-
* render, history loaded above or a message put back in the middle. For a sound, a counter,
|
|
45
|
-
* a title badge. The message enters on its own either way.
|
|
42
|
+
* A message was added at the end after mount, sent or received: for a sound, a counter, a title badge. Not called for the first render, history or a message put back in the middle.
|
|
46
43
|
*/
|
|
47
44
|
onNewMessage?: (value: string, details: {
|
|
48
45
|
direction: MessageDirection;
|
|
49
46
|
}) => void;
|
|
50
47
|
/**
|
|
51
|
-
* Incoming messages the reader has seen
|
|
52
|
-
* while the page is visible. Batched per frame, each `value` once per mount. Send read receipts
|
|
53
|
-
* from here and set `status="read"` on the other side.
|
|
48
|
+
* Incoming messages the reader has seen (at least half on screen while the page is visible); batched per frame, each `value` once per mount. Send read receipts from here.
|
|
54
49
|
*/
|
|
55
50
|
onRead?: (values: string[]) => void;
|
|
56
51
|
/**
|
|
57
|
-
* The
|
|
58
|
-
* its scroller and points at it: the other messages step back and forth around
|
|
59
|
-
* search `highlight` is on, stay back while it is current. Focus stays where it
|
|
60
|
-
* field).
|
|
52
|
+
* The message to jump to — a search's current match or a jump: when it changes the list brings
|
|
53
|
+
* it into view in its scroller and points at it: the other messages step back and forth around
|
|
54
|
+
* it, or, while a search `highlight` is on, stay back while it is current. Focus stays where it
|
|
55
|
+
* is (the search field).
|
|
61
56
|
*/
|
|
62
|
-
|
|
57
|
+
jumpTo?: string | null;
|
|
63
58
|
/** A search query: every match in `Message.Text` and transcripts is marked. */
|
|
64
59
|
highlight?: string;
|
|
65
60
|
/** The messages whose text holds `highlight`, in list order (oldest first), as they change. */
|
|
@@ -81,7 +76,7 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
81
76
|
* `anchor="end"`); jumps, search, selection ranges, the keyboard and playing media reach or keep
|
|
82
77
|
* rows that are not rendered.
|
|
83
78
|
*/
|
|
84
|
-
export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, onNewMessage, onRead,
|
|
79
|
+
export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, onNewMessage, onRead, jumpTo, highlight, onMatchesChange, revealRef, labels: labelsProp, className, children, onKeyDown, onFocus, ref, ...rest }: MessageListProps): import("react/jsx-runtime").JSX.Element;
|
|
85
80
|
export type ChatSelectionBarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
86
81
|
ref?: React.Ref<HTMLDivElement>;
|
|
87
82
|
};
|
|
@@ -37,8 +37,8 @@ export type ChatContextValue = {
|
|
|
37
37
|
/** The current match, counted from the newest (`0` — the newest). */
|
|
38
38
|
matchIndex: number;
|
|
39
39
|
setMatchIndex: (index: number) => void;
|
|
40
|
-
/** The message the list
|
|
41
|
-
|
|
40
|
+
/** The message the list jumps to: the current match while searching, else `jumpTo`. */
|
|
41
|
+
jumpTo: string | null;
|
|
42
42
|
/** The other side types. */
|
|
43
43
|
typing: boolean;
|
|
44
44
|
/** Brings a message into view and blinks it (a pinned message's press). */
|
|
@@ -53,4 +53,4 @@ export type ChatContextValue = {
|
|
|
53
53
|
setHasTitle: (has: boolean) => void;
|
|
54
54
|
labels: ChatLabels;
|
|
55
55
|
};
|
|
56
|
-
export declare const ChatProvider: React.Provider<ChatContextValue | null>, useChat: () => ChatContextValue;
|
|
56
|
+
export declare const ChatProvider: React.Provider<ChatContextValue | null>, useChat: (part?: string) => ChatContextValue;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { MessageDirection } from "../message/types";
|
|
2
|
-
import type { ScrollRegion } from "
|
|
2
|
+
import type { ScrollRegion } from "../../hooks/useScrollRegion";
|
|
3
3
|
/** A message of the conversation in data order: its value and side. */
|
|
4
4
|
export type FlowEntry = {
|
|
5
5
|
value: string;
|
|
@@ -48,11 +48,12 @@ export type ChatListLabels = {
|
|
|
48
48
|
file: string;
|
|
49
49
|
location: string;
|
|
50
50
|
contact: string;
|
|
51
|
-
/** `aria-label` of the point the row menu opens from. */
|
|
52
|
-
menu: string;
|
|
53
51
|
};
|
|
52
|
+
export declare const CHAT_LIST_LABELS: ChatListLabels;
|
|
54
53
|
export type ChatListItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
|
|
55
|
-
/**
|
|
54
|
+
/**
|
|
55
|
+
* An `Avatar.Root` (with `Avatar.Status`), or after the name an `Icon` with a `label`.
|
|
56
|
+
*/
|
|
56
57
|
children: React.ReactNode;
|
|
57
58
|
ref?: React.Ref<HTMLSpanElement>;
|
|
58
59
|
};
|
|
@@ -73,11 +74,17 @@ declare namespace ChatListItemText {
|
|
|
73
74
|
var displayName: string;
|
|
74
75
|
}
|
|
75
76
|
export type ChatListItemDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
76
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* Who wrote it: «Вы» for the reader, a member's name in a group.
|
|
79
|
+
*/
|
|
77
80
|
author?: string;
|
|
78
|
-
/**
|
|
81
|
+
/**
|
|
82
|
+
* The message is not text: its word («Фото», «Голосовое сообщение») leads the preview in the accent.
|
|
83
|
+
*/
|
|
79
84
|
kind?: ChatListMediaKind;
|
|
80
|
-
/**
|
|
85
|
+
/**
|
|
86
|
+
* Length of a voice or video message in seconds: «Голосовое сообщение 0:42».
|
|
87
|
+
*/
|
|
81
88
|
duration?: number;
|
|
82
89
|
ref?: React.Ref<HTMLSpanElement>;
|
|
83
90
|
};
|
|
@@ -100,28 +107,40 @@ declare namespace ChatListItemMenu {
|
|
|
100
107
|
var displayName: string;
|
|
101
108
|
}
|
|
102
109
|
type ChatListItemOwnProps = {
|
|
103
|
-
/**
|
|
110
|
+
/**
|
|
111
|
+
* When the last message was sent: a `Date` shown with the root's `formatTime`, or the text to show.
|
|
112
|
+
*/
|
|
104
113
|
time?: Date | string;
|
|
105
|
-
/**
|
|
114
|
+
/**
|
|
115
|
+
* Delivery of the reader's own last message: the clock, ✓, ✓✓ in the accent, or the failure mark — cross-fading.
|
|
116
|
+
*/
|
|
106
117
|
status?: MessageStatus;
|
|
107
|
-
/**
|
|
118
|
+
/**
|
|
119
|
+
* Unread messages: a solid count under the time (gray while `muted`); the number rolls.
|
|
120
|
+
*/
|
|
108
121
|
unread?: number;
|
|
109
|
-
/**
|
|
122
|
+
/**
|
|
123
|
+
* The reader is mentioned among the unread: an «@» beside the count.
|
|
124
|
+
*/
|
|
110
125
|
mention?: boolean;
|
|
111
|
-
/**
|
|
126
|
+
/**
|
|
127
|
+
* Notifications are off: a muted glyph beside the name and a gray count.
|
|
128
|
+
*/
|
|
112
129
|
muted?: boolean;
|
|
113
|
-
/**
|
|
130
|
+
/**
|
|
131
|
+
* Pinned: a pin under the time while nothing is unread. Put pinned dialogs first in `items`.
|
|
132
|
+
*/
|
|
114
133
|
pinned?: boolean;
|
|
115
134
|
/**
|
|
116
|
-
* The other side types: the preview
|
|
117
|
-
* («Анна») for a group: «Анна печатает…».
|
|
135
|
+
* The other side types: the preview cross-fades into «печатает…» in the accent; a name for a group («Анна печатает…»).
|
|
118
136
|
*/
|
|
119
137
|
typing?: boolean | string;
|
|
120
|
-
/**
|
|
138
|
+
/**
|
|
139
|
+
* The reader's unsent text: the preview shows «Черновик:» in danger and the text.
|
|
140
|
+
*/
|
|
121
141
|
draft?: string;
|
|
122
142
|
/**
|
|
123
|
-
* `ChatList.ItemIcon`
|
|
124
|
-
* `ChatList.ItemDescription`, `ChatList.ItemMenu`.
|
|
143
|
+
* `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu`.
|
|
125
144
|
*/
|
|
126
145
|
children?: React.ReactNode;
|
|
127
146
|
};
|
|
@@ -136,38 +155,73 @@ declare namespace ChatListItem {
|
|
|
136
155
|
var displayName: string;
|
|
137
156
|
}
|
|
138
157
|
export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "children"> & {
|
|
139
|
-
/**
|
|
158
|
+
/**
|
|
159
|
+
* Dialogs in the order to show: pinned first, then by the last message. Rows glide when it changes.
|
|
160
|
+
*/
|
|
140
161
|
items: readonly T[];
|
|
141
|
-
/**
|
|
162
|
+
/**
|
|
163
|
+
* A stable key of a dialog: the `value` of its row.
|
|
164
|
+
*/
|
|
142
165
|
getKey: (item: T) => string;
|
|
143
|
-
/**
|
|
166
|
+
/**
|
|
167
|
+
* Renders a dialog as a `ChatList.Item` with its parts.
|
|
168
|
+
*/
|
|
144
169
|
renderItem: (item: T) => React.ReactElement;
|
|
145
|
-
/**
|
|
170
|
+
/**
|
|
171
|
+
* The open dialog (controlled): the current fill and `aria-current`; `null` — none.
|
|
172
|
+
*/
|
|
146
173
|
value?: string | null;
|
|
147
|
-
/**
|
|
174
|
+
/**
|
|
175
|
+
* The dialog open at first (uncontrolled).
|
|
176
|
+
*/
|
|
148
177
|
defaultValue?: string | null;
|
|
149
|
-
/**
|
|
178
|
+
/**
|
|
179
|
+
* The reader opened a dialog: a click, a tap, Enter or Space on its row.
|
|
180
|
+
*/
|
|
150
181
|
onValueChange?: (value: string) => void;
|
|
151
|
-
/**
|
|
182
|
+
/**
|
|
183
|
+
* The search query (controlled). Any of the triad shows the search field.
|
|
184
|
+
*/
|
|
152
185
|
search?: string;
|
|
153
|
-
/**
|
|
186
|
+
/**
|
|
187
|
+
* The initial query (uncontrolled).
|
|
188
|
+
*/
|
|
154
189
|
defaultSearch?: string;
|
|
155
|
-
/**
|
|
190
|
+
/**
|
|
191
|
+
* The query changed: filter `items` by it; the rows mark the match in the name and the preview.
|
|
192
|
+
*/
|
|
156
193
|
onSearchChange?: (search: string) => void;
|
|
157
|
-
/**
|
|
194
|
+
/**
|
|
195
|
+
* The first load: placeholder rows in the rows' geometry (`aria-busy`), then a cross-fade into the dialogs.
|
|
196
|
+
*/
|
|
158
197
|
loading?: boolean;
|
|
159
|
-
/**
|
|
198
|
+
/**
|
|
199
|
+
* More dialogs exist: a placeholder row ends the list and `onLoadMore` runs near the end.
|
|
200
|
+
*/
|
|
160
201
|
hasMore?: boolean;
|
|
161
|
-
/**
|
|
202
|
+
/**
|
|
203
|
+
* The reader came near the end while `hasMore`: append the next dialogs. A promise is awaited before the next call.
|
|
204
|
+
*/
|
|
162
205
|
onLoadMore?: () => void | Promise<void>;
|
|
163
|
-
/**
|
|
206
|
+
/**
|
|
207
|
+
* The empty state without a search (an `EmptyPage` with an action). Default: «Нет диалогов».
|
|
208
|
+
*/
|
|
164
209
|
empty?: React.ReactNode;
|
|
165
|
-
/**
|
|
210
|
+
/**
|
|
211
|
+
* Row tier: height, text, avatar, glyphs and the search field. Without it the tier of the host.
|
|
212
|
+
*/
|
|
166
213
|
size?: ControlSize;
|
|
167
|
-
/**
|
|
214
|
+
/**
|
|
215
|
+
* «Now» for the times of the rows. Default: the moment of the render.
|
|
216
|
+
*/
|
|
168
217
|
now?: Date;
|
|
169
|
-
/**
|
|
218
|
+
/**
|
|
219
|
+
* Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025».
|
|
220
|
+
*/
|
|
170
221
|
formatTime?: (date: Date, now: Date) => string;
|
|
222
|
+
/**
|
|
223
|
+
* Built-in strings, see Labels.
|
|
224
|
+
*/
|
|
171
225
|
labels?: Partial<ChatListLabels>;
|
|
172
226
|
ref?: React.Ref<HTMLDivElement>;
|
|
173
227
|
};
|
|
@@ -177,7 +231,7 @@ export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivEl
|
|
|
177
231
|
* new places when the order changes, a long list rendered only around the view, placeholder rows
|
|
178
232
|
* while loading and more dialogs loaded near the end. Draws no surface: put it in a pane.
|
|
179
233
|
*/
|
|
180
|
-
declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>):
|
|
234
|
+
declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size: sizeProp, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
181
235
|
declare namespace ChatListRoot {
|
|
182
236
|
var displayName: string;
|
|
183
237
|
}
|
|
@@ -2,28 +2,64 @@ import * as React from "react";
|
|
|
2
2
|
import { type ChoiceLabelProps } from "../../internal/ChoiceField";
|
|
3
3
|
import type { ControlSize } from "../../internal/states";
|
|
4
4
|
export type CheckboxShape = "square" | "circle";
|
|
5
|
+
export type CheckboxLabels = {
|
|
6
|
+
/** Muted marker after the label text when `optional`. */
|
|
7
|
+
optional: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const CHECKBOX_LABELS: CheckboxLabels;
|
|
5
10
|
export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange"> & {
|
|
11
|
+
/**
|
|
12
|
+
* Controlled checked state.
|
|
13
|
+
*/
|
|
6
14
|
checked?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Initial state when uncontrolled.
|
|
17
|
+
*/
|
|
7
18
|
defaultChecked?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Called with the new state on every toggle (not while `readOnly`).
|
|
21
|
+
*/
|
|
8
22
|
onCheckedChange?: (checked: boolean) => void;
|
|
9
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* Mixed state (a partial «select all»): a bar instead of the check; wins over `checked` visually and sets the native `indeterminate`.
|
|
25
|
+
*/
|
|
10
26
|
indeterminate?: boolean;
|
|
11
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* Danger ring on the unchecked box and `aria-invalid`. A non-empty `error` implies it.
|
|
29
|
+
*/
|
|
12
30
|
invalid?: boolean;
|
|
13
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Help text under the label text. Hidden while `error` is shown.
|
|
33
|
+
*/
|
|
14
34
|
hint?: React.ReactNode;
|
|
15
|
-
/**
|
|
35
|
+
/**
|
|
36
|
+
* Error message in the hint slot; implies `invalid`.
|
|
37
|
+
*/
|
|
16
38
|
error?: React.ReactNode;
|
|
17
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Tier of the box, the text and the gap. Without it the tier of its host (a form, a panel, a table), else `m`.
|
|
41
|
+
*/
|
|
18
42
|
size?: ControlSize;
|
|
19
|
-
/**
|
|
43
|
+
/**
|
|
44
|
+
* Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). Size, the check draw-in, the indeterminate bar and states are the same.
|
|
45
|
+
*/
|
|
20
46
|
shape?: CheckboxShape;
|
|
21
|
-
/**
|
|
47
|
+
/**
|
|
48
|
+
* Muted `labels.optional` after the label text; the field may stay off.
|
|
49
|
+
*/
|
|
50
|
+
optional?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Built-in strings, see Labels.
|
|
53
|
+
*/
|
|
54
|
+
labels?: Partial<CheckboxLabels>;
|
|
55
|
+
/**
|
|
56
|
+
* `Checkbox.Label`. Without it only the box renders — give the root an `aria-label`.
|
|
57
|
+
*/
|
|
22
58
|
children?: React.ReactNode;
|
|
23
59
|
/** The native checkbox input. */
|
|
24
60
|
ref?: React.Ref<HTMLInputElement>;
|
|
25
61
|
};
|
|
26
|
-
declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
|
|
27
63
|
declare namespace CheckboxRoot {
|
|
28
64
|
var displayName: string;
|
|
29
65
|
}
|
|
@@ -33,19 +69,32 @@ declare namespace CheckboxLabel {
|
|
|
33
69
|
var displayName: string;
|
|
34
70
|
}
|
|
35
71
|
export type CheckboxIndicatorProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
|
|
72
|
+
/**
|
|
73
|
+
* Shows the check.
|
|
74
|
+
*/
|
|
36
75
|
checked?: boolean;
|
|
37
|
-
/**
|
|
76
|
+
/**
|
|
77
|
+
* Shows the bar; wins over `checked`.
|
|
78
|
+
*/
|
|
38
79
|
indeterminate?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Disabled fill.
|
|
82
|
+
*/
|
|
39
83
|
disabled?: boolean;
|
|
40
|
-
/**
|
|
84
|
+
/**
|
|
85
|
+
* Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). The rest is the same.
|
|
86
|
+
*/
|
|
41
87
|
shape?: CheckboxShape;
|
|
42
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* Box tier; without it the nearest control size (the Select or menu it sits in), else `m`.
|
|
90
|
+
*/
|
|
43
91
|
size?: ControlSize;
|
|
44
92
|
ref?: React.Ref<HTMLSpanElement>;
|
|
45
93
|
};
|
|
46
94
|
/**
|
|
47
95
|
* The checkbox box alone, without an input: a decorative mark for rows whose own element carries
|
|
48
|
-
* the state (`role="option"` with `aria-selected`, `role="menuitemcheckbox"` with `aria-checked
|
|
96
|
+
* the state (`role="option"` with `aria-selected`, `role="menuitemcheckbox"` with `aria-checked`,
|
|
97
|
+
* a toggle `<button>` with `aria-pressed`).
|
|
49
98
|
* Used outside `Checkbox.Root`; it is `aria-hidden` and takes no focus or clicks.
|
|
50
99
|
*/
|
|
51
100
|
declare function CheckboxIndicator({ checked, indeterminate, disabled, size: sizeProp, shape, className, ...rest }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
|