@sanity/ui 4.0.0-static.23 → 4.0.0-static.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks-es/{refractor.js → Refractor.js} +1 -1
- package/dist/_chunks-es/{refractor.js.map → Refractor.js.map} +1 -1
- package/dist/css/index.css +1 -1
- package/dist/css/index.css.map +1 -1
- package/dist/css/index.d.ts +22 -6
- package/dist/css/index.js +29 -20
- package/dist/css/index.js.map +1 -1
- package/dist/index.d.ts +8 -13
- package/dist/index.js +541 -555
- package/dist/index.js.map +1 -1
- package/exports/css/index.css +1 -0
- package/package.json +4 -4
- package/src/core/Root.tsx +1 -1
- package/src/core/RootProvider.tsx +5 -5
- package/src/core/__workshop__/index.ts +1 -1
- package/src/core/components/autocomplete/{autocomplete.tsx → Autocomplete.tsx} +9 -9
- package/src/core/components/autocomplete/__workshop__/index.ts +6 -6
- package/src/core/components/autocomplete/types.ts +1 -1
- package/src/core/components/breadcrumbs/{breadcrumbs.tsx → Breadcrumbs.tsx} +6 -6
- package/src/core/components/breadcrumbs/__workshop__/index.ts +1 -1
- package/src/core/components/dialog/{dialog.tsx → Dialog.tsx} +4 -4
- package/src/core/components/dialog/{dialogCard.tsx → DialogCard.tsx} +5 -5
- package/src/core/components/dialog/{dialogProvider.tsx → DialogProvider.tsx} +1 -1
- package/src/core/components/dialog/__workshop__/{panes.tsx → Panes.tsx} +4 -0
- package/src/core/components/dialog/__workshop__/index.ts +10 -10
- package/src/core/components/dialog/useDialog.ts +3 -3
- package/src/core/components/hotkeys/{hotkeys.tsx → Hotkeys.tsx} +2 -2
- package/src/core/components/hotkeys/__workshop__/index.ts +1 -1
- package/src/core/components/menu/{menu.test.tsx → Menu.test.tsx} +1 -1
- package/src/core/components/menu/{menu.tsx → Menu.tsx} +3 -7
- package/src/core/components/menu/{menuButton.tsx → MenuButton.tsx} +3 -3
- package/src/core/components/menu/{menuGroup.tsx → MenuGroup.tsx} +6 -6
- package/src/core/components/menu/{menuItem.tsx → MenuItem.tsx} +6 -6
- package/src/core/components/menu/__workshop__/index.ts +16 -16
- package/src/core/components/menu/useMenu.ts +3 -3
- package/src/core/components/tab/{tab.tsx → Tab.tsx} +1 -1
- package/src/core/components/tab/{tabList.tsx → TabList.tsx} +2 -2
- package/src/core/components/tab/{tabPanel.tsx → TabPanel.tsx} +1 -1
- package/src/core/components/tab/__workshop__/index.ts +1 -1
- package/src/core/components/toast/{toast.test.tsx → Toast.test.tsx} +1 -1
- package/src/core/components/toast/{toast.tsx → Toast.tsx} +6 -6
- package/src/core/components/toast/{toastLayer.tsx → ToastLayer.tsx} +1 -1
- package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx} +4 -4
- package/src/core/components/toast/__workshop__/index.ts +2 -2
- package/src/core/components/toast/useToast.ts +3 -3
- package/src/core/components/tree/{tree.tsx → Tree.tsx} +2 -2
- package/src/core/components/tree/{treeGroup.tsx → TreeGroup.tsx} +1 -1
- package/src/core/components/tree/{treeItem.tsx → TreeItem.tsx} +7 -7
- package/src/core/components/tree/__workshop__/index.ts +4 -4
- package/src/core/components/tree/useTree.ts +3 -3
- package/src/core/components/virtualList/{virtualList.tsx → VirtualList.tsx} +1 -1
- package/src/core/components/virtualList/__workshop__/index.ts +4 -4
- package/src/core/hooks/useMediaIndex/__workshop__/index.ts +1 -1
- package/src/core/index.ts +65 -62
- package/src/core/primitives/avatar/{avatar.tsx → Avatar.tsx} +4 -4
- package/src/core/primitives/avatar/{avatarCounter.tsx → AvatarCounter.tsx} +2 -2
- package/src/core/primitives/avatar/{avatarStack.tsx → AvatarStack.tsx} +3 -3
- package/src/core/primitives/avatar/__workshop__/PropsStory.tsx +22 -0
- package/src/core/primitives/avatar/__workshop__/index.ts +9 -4
- package/src/core/primitives/badge/{badge.test.tsx → Badge.test.tsx} +1 -1
- package/src/core/primitives/badge/{badge.tsx → Badge.tsx} +2 -2
- package/src/core/primitives/badge/__workshop__/index.ts +2 -2
- package/src/core/primitives/box/__workshop__/index.ts +2 -2
- package/src/core/primitives/button/{button.test.tsx → Button.test.tsx} +1 -1
- package/src/core/primitives/button/{button.tsx → Button.tsx} +8 -8
- package/src/core/primitives/button/__workshop__/index.ts +11 -11
- package/src/core/primitives/card/{card.tsx → Card.tsx} +5 -5
- package/src/core/primitives/card/{cardProvider.tsx → CardProvider.tsx} +1 -1
- package/src/core/primitives/card/__workshop__/index.ts +9 -9
- package/src/core/primitives/card/useCard.ts +3 -3
- package/src/core/primitives/checkbox/__workshop__/index.ts +4 -4
- package/src/core/primitives/code/{code.tsx → Code.tsx} +26 -2
- package/src/core/primitives/code/__workshop__/index.ts +2 -2
- package/src/core/primitives/container/{container.tsx → Container.tsx} +1 -1
- package/src/core/primitives/container/__workshop__/index.ts +1 -1
- package/src/core/primitives/flex/{flex.tsx → Flex.tsx} +1 -1
- package/src/core/primitives/flex/__workshop__/index.ts +2 -2
- package/src/core/primitives/grid/{grid.tsx → Grid.tsx} +1 -1
- package/src/core/primitives/grid/__workshop__/index.ts +1 -1
- package/src/core/primitives/heading/{heading.tsx → Heading.tsx} +16 -0
- package/src/core/primitives/heading/__workshop__/index.ts +2 -2
- package/src/core/primitives/inline/{inline.tsx → Inline.tsx} +1 -1
- package/src/core/primitives/inline/__workshop__/index.ts +1 -1
- package/src/core/primitives/kbd/{kbd.tsx → Kbd.tsx} +2 -2
- package/src/core/primitives/kbd/__workshop__/index.ts +1 -1
- package/src/core/primitives/label/{label.tsx → Label.tsx} +16 -0
- package/src/core/primitives/label/__workshop__/index.ts +2 -2
- package/src/core/primitives/layer/{layer.test.tsx → Layer.test.tsx} +1 -1
- package/src/core/primitives/layer/{layer.tsx → Layer.tsx} +3 -3
- package/src/core/primitives/layer/{layerCard.tsx → LayerCard.tsx} +2 -2
- package/src/core/primitives/layer/{layerProvider.tsx → LayerProvider.tsx} +3 -3
- package/src/core/primitives/layer/__workshop__/index.ts +3 -3
- package/src/core/primitives/layer/useLayer.ts +3 -3
- package/src/core/primitives/popover/{popover.tsx → Popover.tsx} +4 -4
- package/src/core/primitives/popover/{popoverLayer.tsx → PopoverLayer.tsx} +3 -3
- package/src/core/primitives/radio/{radio.tsx → Radio.tsx} +2 -2
- package/src/core/primitives/radio/__workshop__/index.ts +2 -2
- package/src/core/primitives/select/{select.tsx → Select.tsx} +7 -5
- package/src/core/primitives/select/__workshop__/index.ts +2 -2
- package/src/core/primitives/selectable/{selectable.tsx → Selectable.tsx} +1 -1
- package/src/core/primitives/skeleton/{codeSkeleton.tsx → CodeSkeleton.tsx} +1 -1
- package/src/core/primitives/skeleton/{headingSkeleton.tsx → HeadingSkeleton.tsx} +1 -1
- package/src/core/primitives/skeleton/{labelSkeleton.tsx → LabelSkeleton.tsx} +1 -1
- package/src/core/primitives/skeleton/{textSkeleton.tsx → TextSkeleton.tsx} +1 -1
- package/src/core/primitives/skeleton/__workshop__/index.ts +2 -2
- package/src/core/primitives/spinner/{spinner.tsx → Spinner.tsx} +2 -2
- package/src/core/primitives/stack/{stack.tsx → Stack.tsx} +1 -1
- package/src/core/primitives/stack/__workshop__/index.ts +1 -1
- package/src/core/primitives/switch/{switch.tsx → Switch.tsx} +2 -10
- package/src/core/primitives/switch/__workshop__/index.ts +2 -2
- package/src/core/primitives/text/{text.tsx → Text.tsx} +14 -0
- package/src/core/primitives/text/__workshop__/index.ts +3 -3
- package/src/core/primitives/textArea/{textArea.tsx → TextArea.tsx} +7 -1
- package/src/core/primitives/textArea/__workshop__/index.ts +1 -1
- package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx} +21 -20
- package/src/core/primitives/textInput/__workshop__/index.ts +7 -7
- package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx} +4 -4
- package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx} +6 -5
- package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx} +2 -2
- package/src/core/primitives/tooltip/__workshop__/index.ts +4 -4
- package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupProvider.tsx → TooltipDelayGroupProvider.tsx} +1 -1
- package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +3 -3
- package/src/core/types.ts +6 -5
- package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx} +1 -1
- package/src/core/utils/boundaryElement/{boundaryElement.test.tsx → BoundaryElement.test.tsx} +1 -1
- package/src/core/utils/boundaryElement/{boundaryElementProvider.tsx → BoundaryElementProvider.tsx} +1 -1
- package/src/core/utils/boundaryElement/__workshop__/index.ts +1 -1
- package/src/core/utils/boundaryElement/useBoundaryElement.ts +3 -3
- package/src/core/utils/elementQuery/__workshop__/index.ts +1 -1
- package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx} +1 -1
- package/src/core/utils/portal/{portal.tsx → Portal.tsx} +1 -1
- package/src/core/utils/portal/{portalProvider.tsx → PortalProvider.tsx} +3 -3
- package/src/core/utils/portal/__workshop__/index.ts +1 -1
- package/src/core/utils/portal/usePortal.ts +3 -3
- package/src/css/_responsiveStyle.css.ts +2 -2
- package/src/css/primitives/_input/_input.css.ts +2 -3
- package/src/css/primitives/_input/input.ts +2 -0
- package/src/css/primitives/_input/types.ts +2 -1
- package/src/css/primitives/avatar/avatar.css.ts +8 -0
- package/src/css/primitives/box/box.css.ts +21 -1
- package/src/css/primitives/button/button.css.ts +1 -0
- package/src/css/primitives/card/__workshop__/index.ts +1 -1
- package/src/css/primitives/card/card.css.ts +0 -60
- package/src/css/primitives/checkbox/checkbox.css.ts +1 -0
- package/src/css/primitives/code/code.ts +4 -0
- package/src/css/primitives/code/types.ts +7 -1
- package/src/css/primitives/heading/heading.ts +4 -0
- package/src/css/primitives/heading/types.ts +7 -1
- package/src/css/primitives/label/label.ts +4 -0
- package/src/css/primitives/label/types.ts +7 -1
- package/src/css/primitives/radio/radio.css.ts +1 -1
- package/src/css/primitives/root/root.css.ts +1 -1
- package/src/css/primitives/select/select.css.ts +7 -1
- package/src/css/primitives/selectable/selectable.css.ts +5 -31
- package/src/css/primitives/switch/switch.css.ts +10 -1
- package/src/css/primitives/text/text.ts +2 -0
- package/src/css/primitives/text/types.ts +6 -1
- package/src/css/primitives/textInput/textInput.css.ts +15 -3
- package/src/css/props/width/types.ts +1 -1
- package/src/css/props/width/width.css.ts +5 -2
- package/src/core/primitives/popover/helpers.ts +0 -32
- package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts +0 -4
- /package/src/core/__workshop__/{boundary.tsx → Boundary.tsx} +0 -0
- /package/src/core/components/autocomplete/{autocompleteOption.tsx → AutocompleteOption.tsx} +0 -0
- /package/src/core/components/autocomplete/__workshop__/{async.tsx → Async.tsx} +0 -0
- /package/src/core/components/autocomplete/__workshop__/{constrainedHeight.tsx → ConstrainedHeight.tsx} +0 -0
- /package/src/core/components/autocomplete/__workshop__/{custom.tsx → Custom.tsx} +0 -0
- /package/src/core/components/autocomplete/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/components/autocomplete/__workshop__/{focusAndBlur.tsx → FocusAndBlur.tsx} +0 -0
- /package/src/core/components/autocomplete/__workshop__/{fullscreen.tsx → Fullscreen.tsx} +0 -0
- /package/src/core/components/breadcrumbs/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/components/dialog/{dialogContext.ts → DialogContext.ts} +0 -0
- /package/src/core/components/dialog/__workshop__/{activate.tsx → Activate.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{autoFocus.tsx → AutoFocus.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{layering.tsx → Layering.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{nested.tsx → Nested.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{onScroll.tsx → OnScroll.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{position.tsx → Position.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{provider.tsx → Provider.tsx} +0 -0
- /package/src/core/components/dialog/__workshop__/{wrapped.tsx → Wrapped.tsx} +0 -0
- /package/src/core/components/hotkeys/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/components/menu/{menuContext.ts → MenuContext.ts} +0 -0
- /package/src/core/components/menu/{menuDivider.tsx → MenuDivider.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{asComponent.tsx → AsComponent.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{avatarMenu.tsx → AvatarMenu.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{closableMenuButton.tsx → ClosableMenuButton.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{constrainedInBoundary.tsx → ConstrainedInBoundary.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{customMenuItem.tsx → CustomMenuItem.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{customSelectedState.tsx → CustomSelectedState.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{disableFocusOnClose.tsx → DisableFocusOnClose.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{groups.tsx → Groups.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{menuButton.tsx → MenuButton.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{menuGroupRight.tsx → MenuGroupRight.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{nestedMenu.tsx → NestedMenu.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{onCloseMenuButton.tsx → OnCloseMenuButton.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{selectedItem.tsx → SelectedItem.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{shouldFocus.tsx → ShouldFocus.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{tones.tsx → Tones.tsx} +0 -0
- /package/src/core/components/menu/__workshop__/{withoutArrow.tsx → WithoutArrow.tsx} +0 -0
- /package/src/core/components/tab/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/components/toast/{toastContext.ts → ToastContext.ts} +0 -0
- /package/src/core/components/toast/__workshop__/{hook.tsx → Hook.tsx} +0 -0
- /package/src/core/components/toast/__workshop__/{toast.tsx → Toast.tsx} +0 -0
- /package/src/core/components/tree/{treeContext.ts → TreeContext.ts} +0 -0
- /package/src/core/components/tree/__workshop__/{basic.tsx → Basic.tsx} +0 -0
- /package/src/core/components/tree/__workshop__/{tabFromElement.tsx → TabFromElement.tsx} +0 -0
- /package/src/core/components/virtualList/__workshop__/{changingProps.tsx → ChangingProps.tsx} +0 -0
- /package/src/core/components/virtualList/__workshop__/{elementScroll.tsx → ElementScroll.tsx} +0 -0
- /package/src/core/components/virtualList/__workshop__/{infiniteList.tsx → InfiniteList.tsx} +0 -0
- /package/src/core/components/virtualList/__workshop__/{windowScrolll.tsx → WindowScrolll.tsx} +0 -0
- /package/src/core/hooks/useMediaIndex/__workshop__/{test.tsx → Test.tsx} +0 -0
- /package/src/core/primitives/arrow/{arrow.tsx → Arrow.tsx} +0 -0
- /package/src/core/primitives/avatar/__workshop__/{asButton.tsx → AsButton.tsx} +0 -0
- /package/src/core/primitives/avatar/__workshop__/{stack.tsx → Stack.tsx} +0 -0
- /package/src/core/primitives/avatar/__workshop__/{withinButton.tsx → WithinButton.tsx} +0 -0
- /package/src/core/primitives/avatar/__workshop__/{withinMenuItem.tsx → WithinMenuItem.tsx} +0 -0
- /package/src/core/primitives/badge/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/badge/__workshop__/{tones.tsx → Tones.tsx} +0 -0
- /package/src/core/primitives/box/{box.tsx → Box.tsx} +0 -0
- /package/src/core/primitives/box/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/box/__workshop__/{responsive.tsx → Responsive.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{custom.tsx → Custom.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{customIcons.tsx → CustomIcons.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{disabled.tsx → Disabled.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{mixedChildren.tsx → MixedChildren.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{sanityUploadButton.tsx → SanityUploadButton.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{stacked.tsx → Stacked.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{styled1.tsx → Styled1.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{styled2.tsx → Styled2.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{textOverflow.tsx → TextOverflow.tsx} +0 -0
- /package/src/core/primitives/button/__workshop__/{uploadButton.tsx → UploadButton.tsx} +0 -0
- /package/src/core/primitives/card/{cardContext.ts → CardContext.ts} +0 -0
- /package/src/core/primitives/card/__workshop__/{asButton.tsx → AsButton.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{asComponent.tsx → AsComponent.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{checkered.tsx → Checkered.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{interactive.tsx → Interactive.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{listNavigation.tsx → ListNavigation.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{selected.tsx → Selected.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{styled.tsx → Styled.tsx} +0 -0
- /package/src/core/primitives/card/__workshop__/{tones.tsx → Tones.tsx} +0 -0
- /package/src/core/primitives/checkbox/{checkbox.tsx → Checkbox.tsx} +0 -0
- /package/src/core/primitives/checkbox/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/primitives/checkbox/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/checkbox/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
- /package/src/core/primitives/checkbox/__workshop__/{tones.tsx → Tones.tsx} +0 -0
- /package/src/core/primitives/code/{refractor.tsx → Refractor.tsx} +0 -0
- /package/src/core/primitives/code/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
- /package/src/core/primitives/code/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/container/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/primitives/flex/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/primitives/flex/__workshop__/{gap.tsx → Gap.tsx} +0 -0
- /package/src/core/primitives/grid/__workshop__/{responsive.tsx → Responsive.tsx} +0 -0
- /package/src/core/primitives/heading/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
- /package/src/core/primitives/heading/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/inline/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/kbd/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/label/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
- /package/src/core/primitives/label/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/layer/{layerContext.ts → LayerContext.ts} +0 -0
- /package/src/core/primitives/layer/__workshop__/{multipleRoots.tsx → MultipleRoots.tsx} +0 -0
- /package/src/core/primitives/layer/__workshop__/{nested.tsx → Nested.tsx} +0 -0
- /package/src/core/primitives/layer/__workshop__/{responsiveZOffset.tsx → ResponsiveZOffset.tsx} +0 -0
- /package/src/core/primitives/radio/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/primitives/radio/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/select/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/select/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
- /package/src/core/primitives/skeleton/{skeleton.tsx → Skeleton.tsx} +0 -0
- /package/src/core/primitives/skeleton/__workshop__/{delay.tsx → Delay.tsx} +0 -0
- /package/src/core/primitives/skeleton/__workshop__/{skeleton.tsx → Skeleton.tsx} +0 -0
- /package/src/core/primitives/spinner/{animatedSpinnerIcon.tsx → AnimatedSpinnerIcon.tsx} +0 -0
- /package/src/core/primitives/srOnly/{srOnly.tsx → SrOnly.tsx} +0 -0
- /package/src/core/primitives/stack/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/switch/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/primitives/switch/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/text/__workshop__/{colored.tsx → Colored.tsx} +0 -0
- /package/src/core/primitives/text/__workshop__/{example.tsx → Example.tsx} +0 -0
- /package/src/core/primitives/text/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
- /package/src/core/primitives/textArea/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{clearButton.tsx → ClearButton.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{customValidity.tsx → CustomValidity.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{states.tsx → States.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{tones.tsx → Tones.tsx} +0 -0
- /package/src/core/primitives/textInput/__workshop__/{typed.tsx → Typed.tsx} +0 -0
- /package/src/core/primitives/tooltip/__workshop__/{customPortal.tsx → CustomPortal.tsx} +0 -0
- /package/src/core/primitives/tooltip/__workshop__/{overflowingBoundary.tsx → OverflowingBoundary.tsx} +0 -0
- /package/src/core/primitives/tooltip/__workshop__/{props.tsx → Props.tsx} +0 -0
- /package/src/core/primitives/tooltip/__workshop__/{resizableBoundary.tsx → ResizableBoundary.tsx} +0 -0
- /package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupContext.tsx → TooltipDelayGroupContext.tsx} +0 -0
- /package/src/core/utils/boundaryElement/{boundaryElementContext.ts → BoundaryElementContext.ts} +0 -0
- /package/src/core/utils/boundaryElement/__workshop__/{plain.tsx → Plain.tsx} +0 -0
- /package/src/core/utils/elementQuery/{elementQuery.tsx → ElementQuery.tsx} +0 -0
- /package/src/core/utils/elementQuery/__workshop__/{customMedia.tsx → CustomMedia.tsx} +0 -0
- /package/src/core/utils/portal/{portalContext.ts → PortalContext.ts} +0 -0
- /package/src/core/utils/portal/__workshop__/{named.tsx → Named.tsx} +0 -0
- /package/src/css/primitives/card/__workshop__/{color.tsx → Color.tsx} +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {card, type CardStyleProps} from '@sanity/ui/css'
|
|
2
|
-
import {
|
|
2
|
+
import {use} from 'react'
|
|
3
3
|
|
|
4
4
|
import type {Props} from '../../types'
|
|
5
|
-
import {Box, type BoxElementType, type BoxOwnProps} from '../box/
|
|
6
|
-
import {CardContext} from './
|
|
7
|
-
import {CardProvider} from './
|
|
5
|
+
import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
|
|
6
|
+
import {CardContext} from './CardContext'
|
|
7
|
+
import {CardProvider} from './CardProvider'
|
|
8
8
|
|
|
9
9
|
/** @public */
|
|
10
10
|
export const DEFAULT_CARD_ELEMENT = 'div'
|
|
@@ -56,7 +56,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
|
|
|
56
56
|
...rest
|
|
57
57
|
} = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
|
|
58
58
|
|
|
59
|
-
const parent =
|
|
59
|
+
const parent = use(CardContext)
|
|
60
60
|
const tone = toneProp === 'inherit' ? parent?.tone : toneProp
|
|
61
61
|
const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
|
|
62
62
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type {CardTone, ColorScheme} from '@sanity/ui/theme'
|
|
2
2
|
import {type ReactNode, useMemo} from 'react'
|
|
3
3
|
|
|
4
|
-
import {CardContext} from './
|
|
4
|
+
import {CardContext} from './CardContext'
|
|
5
5
|
import type {_CardCompatProviderComponent} from './types'
|
|
6
6
|
|
|
7
7
|
/** @public */
|
|
@@ -5,15 +5,15 @@ const scope: WorkshopScope = {
|
|
|
5
5
|
name: 'primitives/card',
|
|
6
6
|
title: 'Card',
|
|
7
7
|
stories: [
|
|
8
|
-
{name: 'props', title: 'Props', component: lazy(() => import('./
|
|
9
|
-
{name: 'styled', title: 'Styled', component: lazy(() => import('./
|
|
10
|
-
{name: 'interactive', title: 'Interactive', component: lazy(() => import('./
|
|
11
|
-
{name: 'tones', title: 'Tones', component: lazy(() => import('./
|
|
12
|
-
{name: 'as-button', title: 'As button', component: lazy(() => import('./
|
|
13
|
-
{name: 'list-nav', title: 'List navigation', component: lazy(() => import('./
|
|
14
|
-
{name: 'checkered', title: 'Checkered', component: lazy(() => import('./
|
|
15
|
-
{name: 'as-component', title: 'As component', component: lazy(() => import('./
|
|
16
|
-
{name: 'selected', title: 'Selected', component: lazy(() => import('./
|
|
8
|
+
{name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
|
|
9
|
+
{name: 'styled', title: 'Styled', component: lazy(() => import('./Styled'))},
|
|
10
|
+
{name: 'interactive', title: 'Interactive', component: lazy(() => import('./Interactive'))},
|
|
11
|
+
{name: 'tones', title: 'Tones', component: lazy(() => import('./Tones'))},
|
|
12
|
+
{name: 'as-button', title: 'As button', component: lazy(() => import('./AsButton'))},
|
|
13
|
+
{name: 'list-nav', title: 'List navigation', component: lazy(() => import('./ListNavigation'))},
|
|
14
|
+
{name: 'checkered', title: 'Checkered', component: lazy(() => import('./Checkered'))},
|
|
15
|
+
{name: 'as-component', title: 'As component', component: lazy(() => import('./AsComponent'))},
|
|
16
|
+
{name: 'selected', title: 'Selected', component: lazy(() => import('./Selected'))},
|
|
17
17
|
],
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {use} from 'react'
|
|
2
2
|
|
|
3
|
-
import {CardContext} from './
|
|
3
|
+
import {CardContext} from './CardContext'
|
|
4
4
|
import type {CardContextValue} from './types'
|
|
5
5
|
|
|
6
6
|
/** @public */
|
|
7
7
|
export function useCard(): CardContextValue {
|
|
8
|
-
const card =
|
|
8
|
+
const card = use(CardContext)
|
|
9
9
|
|
|
10
10
|
if (!card) {
|
|
11
11
|
throw new Error('useCard(): missing context value')
|
|
@@ -5,10 +5,10 @@ const scope: WorkshopScope = {
|
|
|
5
5
|
name: 'primitives/checkbox',
|
|
6
6
|
title: 'Checkbox',
|
|
7
7
|
stories: [
|
|
8
|
-
{name: 'props', title: 'Props', component: lazy(() => import('./
|
|
9
|
-
{name: 'example', title: 'Example', component: lazy(() => import('./
|
|
10
|
-
{name: 'read-only', title: 'Read-only', component: lazy(() => import('./
|
|
11
|
-
{name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./
|
|
8
|
+
{name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
|
|
9
|
+
{name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
|
|
10
|
+
{name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
|
|
11
|
+
{name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./Tones'))},
|
|
12
12
|
],
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -4,7 +4,7 @@ import {lazy, Suspense} from 'react'
|
|
|
4
4
|
|
|
5
5
|
import type {ComponentType, Props} from '../../types'
|
|
6
6
|
|
|
7
|
-
const LazyRefractor = lazy(() => import('./
|
|
7
|
+
const LazyRefractor = lazy(() => import('./Refractor'))
|
|
8
8
|
|
|
9
9
|
/** @public */
|
|
10
10
|
export const DEFAULT_CODE_ELEMENT = 'pre'
|
|
@@ -31,6 +31,14 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
|
|
|
31
31
|
children,
|
|
32
32
|
className,
|
|
33
33
|
language: languageProp,
|
|
34
|
+
margin,
|
|
35
|
+
marginX,
|
|
36
|
+
marginY,
|
|
37
|
+
marginTop,
|
|
38
|
+
marginRight,
|
|
39
|
+
marginBottom,
|
|
40
|
+
marginLeft,
|
|
41
|
+
maxWidth,
|
|
34
42
|
size = 2,
|
|
35
43
|
weight = 'regular',
|
|
36
44
|
...rest
|
|
@@ -39,7 +47,23 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
|
|
|
39
47
|
const language = typeof languageProp === 'string' ? languageProp : undefined
|
|
40
48
|
|
|
41
49
|
return (
|
|
42
|
-
<Element
|
|
50
|
+
<Element
|
|
51
|
+
data-ui="Code"
|
|
52
|
+
{...rest}
|
|
53
|
+
className={code({
|
|
54
|
+
className,
|
|
55
|
+
margin,
|
|
56
|
+
marginX,
|
|
57
|
+
marginY,
|
|
58
|
+
marginTop,
|
|
59
|
+
marginRight,
|
|
60
|
+
marginBottom,
|
|
61
|
+
marginLeft,
|
|
62
|
+
maxWidth,
|
|
63
|
+
size,
|
|
64
|
+
weight,
|
|
65
|
+
})}
|
|
66
|
+
>
|
|
43
67
|
<Suspense fallback={<code>{children}</code>}>
|
|
44
68
|
<LazyRefractor language={language} value={children} />
|
|
45
69
|
</Suspense>
|
|
@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
|
|
|
8
8
|
{
|
|
9
9
|
name: 'props',
|
|
10
10
|
title: 'Props',
|
|
11
|
-
component: lazy(() => import('./
|
|
11
|
+
component: lazy(() => import('./Props')),
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
name: 'optical-alignment',
|
|
15
15
|
title: 'Optical alignment',
|
|
16
|
-
component: lazy(() => import('./
|
|
16
|
+
component: lazy(() => import('./OpticalAlignment')),
|
|
17
17
|
},
|
|
18
18
|
],
|
|
19
19
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {container, type ContainerStyleProps} from '@sanity/ui/css'
|
|
2
2
|
|
|
3
3
|
import type {Props} from '../../types'
|
|
4
|
-
import {Box, type BoxElementType, type BoxOwnProps} from '../box/
|
|
4
|
+
import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
|
|
5
5
|
|
|
6
6
|
/** @public */
|
|
7
7
|
export const DEFAULT_CONTAINER_ELEMENT = 'div'
|
|
@@ -4,7 +4,7 @@ import {lazy} from 'react'
|
|
|
4
4
|
const scope: WorkshopScope = {
|
|
5
5
|
name: 'primitives/container',
|
|
6
6
|
title: 'Container',
|
|
7
|
-
stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./
|
|
7
|
+
stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))}],
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export default scope
|
|
@@ -7,7 +7,7 @@ import type {
|
|
|
7
7
|
} from '@sanity/ui/css'
|
|
8
8
|
|
|
9
9
|
import type {Props} from '../../types'
|
|
10
|
-
import {Box, type BoxElementType, type BoxOwnProps} from '../box/
|
|
10
|
+
import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
|
|
11
11
|
|
|
12
12
|
/** @public */
|
|
13
13
|
export const DEFAULT_FLEX_ELEMENT = 'div'
|
|
@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
|
|
|
5
5
|
name: 'primitives/flex',
|
|
6
6
|
title: 'Flex',
|
|
7
7
|
stories: [
|
|
8
|
-
{name: 'plain', title: 'Plain', component: lazy(() => import('./
|
|
9
|
-
{name: 'gap', title: 'Gap', component: lazy(() => import('./
|
|
8
|
+
{name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))},
|
|
9
|
+
{name: 'gap', title: 'Gap', component: lazy(() => import('./Gap'))},
|
|
10
10
|
],
|
|
11
11
|
}
|
|
12
12
|
|
|
@@ -5,7 +5,7 @@ const scope: WorkshopScope = {
|
|
|
5
5
|
name: 'primitives/grid',
|
|
6
6
|
title: 'Grid',
|
|
7
7
|
stories: [
|
|
8
|
-
{name: 'responsive', title: 'Responsive', component: lazy(() => import('./
|
|
8
|
+
{name: 'responsive', title: 'Responsive', component: lazy(() => import('./Responsive'))},
|
|
9
9
|
],
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -46,6 +46,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
|
|
|
46
46
|
children,
|
|
47
47
|
className,
|
|
48
48
|
flex,
|
|
49
|
+
margin,
|
|
50
|
+
marginX,
|
|
51
|
+
marginY,
|
|
52
|
+
marginTop,
|
|
53
|
+
marginRight,
|
|
54
|
+
marginBottom,
|
|
55
|
+
marginLeft,
|
|
56
|
+
maxWidth,
|
|
49
57
|
muted = false,
|
|
50
58
|
size = 2,
|
|
51
59
|
textOverflow: textOverflowProp,
|
|
@@ -61,6 +69,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
|
|
|
61
69
|
className,
|
|
62
70
|
align,
|
|
63
71
|
flex,
|
|
72
|
+
margin,
|
|
73
|
+
marginX,
|
|
74
|
+
marginY,
|
|
75
|
+
marginTop,
|
|
76
|
+
marginRight,
|
|
77
|
+
marginBottom,
|
|
78
|
+
marginLeft,
|
|
79
|
+
maxWidth,
|
|
64
80
|
muted,
|
|
65
81
|
size,
|
|
66
82
|
weight,
|
|
@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
|
|
|
8
8
|
{
|
|
9
9
|
name: 'plain',
|
|
10
10
|
title: 'Plain',
|
|
11
|
-
component: lazy(() => import('./
|
|
11
|
+
component: lazy(() => import('./Plain')),
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
name: 'optical-alignment',
|
|
15
15
|
title: 'Optical alignment',
|
|
16
|
-
component: lazy(() => import('./
|
|
16
|
+
component: lazy(() => import('./OpticalAlignment')),
|
|
17
17
|
},
|
|
18
18
|
],
|
|
19
19
|
}
|
|
@@ -4,7 +4,7 @@ import {lazy} from 'react'
|
|
|
4
4
|
const scope: WorkshopScope = {
|
|
5
5
|
name: 'primitives/inline',
|
|
6
6
|
title: 'Inline',
|
|
7
|
-
stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./
|
|
7
|
+
stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export default scope
|
|
@@ -2,8 +2,8 @@ import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
|
|
|
2
2
|
import type {FontTextSize} from '@sanity/ui/theme'
|
|
3
3
|
|
|
4
4
|
import type {ComponentType, Props} from '../../types'
|
|
5
|
-
import {Box, type BoxElementType, type BoxOwnProps} from '../box/
|
|
6
|
-
import {Text} from '../text/
|
|
5
|
+
import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
|
|
6
|
+
import {Text} from '../text/Text'
|
|
7
7
|
|
|
8
8
|
/** @public */
|
|
9
9
|
export const DEFAULT_KBD_ELEMENT = 'kbd'
|
|
@@ -4,7 +4,7 @@ import {lazy} from 'react'
|
|
|
4
4
|
const scope: WorkshopScope = {
|
|
5
5
|
name: 'primitives/kbd',
|
|
6
6
|
title: 'KBD',
|
|
7
|
-
stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./
|
|
7
|
+
stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export default scope
|
|
@@ -44,6 +44,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
|
|
|
44
44
|
as: Element = DEFAULT_LABEL_ELEMENT,
|
|
45
45
|
children,
|
|
46
46
|
className,
|
|
47
|
+
margin,
|
|
48
|
+
marginX,
|
|
49
|
+
marginY,
|
|
50
|
+
marginTop,
|
|
51
|
+
marginRight,
|
|
52
|
+
marginBottom,
|
|
53
|
+
marginLeft,
|
|
54
|
+
maxWidth,
|
|
47
55
|
muted = false,
|
|
48
56
|
size = 1,
|
|
49
57
|
textOverflow: textOverflowProp,
|
|
@@ -58,6 +66,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
|
|
|
58
66
|
className={label({
|
|
59
67
|
className,
|
|
60
68
|
align,
|
|
69
|
+
margin,
|
|
70
|
+
marginX,
|
|
71
|
+
marginY,
|
|
72
|
+
marginTop,
|
|
73
|
+
marginRight,
|
|
74
|
+
marginBottom,
|
|
75
|
+
marginLeft,
|
|
76
|
+
maxWidth,
|
|
61
77
|
muted,
|
|
62
78
|
size,
|
|
63
79
|
weight,
|
|
@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
|
|
|
8
8
|
{
|
|
9
9
|
name: 'plain',
|
|
10
10
|
title: 'Plain',
|
|
11
|
-
component: lazy(() => import('./
|
|
11
|
+
component: lazy(() => import('./Plain')),
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
name: 'optical-alignment',
|
|
15
15
|
title: 'Optical alignment',
|
|
16
|
-
component: lazy(() => import('./
|
|
16
|
+
component: lazy(() => import('./OpticalAlignment')),
|
|
17
17
|
},
|
|
18
18
|
],
|
|
19
19
|
}
|
|
@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
|
|
|
2
2
|
|
|
3
3
|
import {render} from '$test/utils'
|
|
4
4
|
|
|
5
|
-
import {LayerContext} from './
|
|
5
|
+
import {LayerContext} from './LayerContext'
|
|
6
6
|
import type {LayerContextValue} from './types'
|
|
7
7
|
import {useLayer} from './useLayer'
|
|
8
8
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type {ResponsiveProp} from '@sanity/ui/css'
|
|
2
2
|
|
|
3
|
-
import type {CardElementType, CardOwnProps} from '../../primitives/card/
|
|
3
|
+
import type {CardElementType, CardOwnProps} from '../../primitives/card/Card'
|
|
4
4
|
import type {Props} from '../../types'
|
|
5
|
-
import {LayerCard} from './
|
|
6
|
-
import {LayerProvider} from './
|
|
5
|
+
import {LayerCard} from './LayerCard'
|
|
6
|
+
import {LayerProvider} from './LayerProvider'
|
|
7
7
|
|
|
8
8
|
/** @public */
|
|
9
9
|
export const DEFAULT_LAYER_ELEMENT = 'div'
|
|
@@ -2,9 +2,9 @@ import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} fr
|
|
|
2
2
|
|
|
3
3
|
import {EMPTY_RECORD} from '../../constants'
|
|
4
4
|
import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
|
|
5
|
-
import {Card, type CardElementType} from '../../primitives/card/
|
|
5
|
+
import {Card, type CardElementType} from '../../primitives/card/Card'
|
|
6
6
|
import type {Props} from '../../types'
|
|
7
|
-
import type {LayerElementType, LayerOwnProps} from './
|
|
7
|
+
import type {LayerElementType, LayerOwnProps} from './Layer'
|
|
8
8
|
import {useLayer} from './useLayer'
|
|
9
9
|
|
|
10
10
|
/** @internal */
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
|
|
2
|
-
import {type ReactNode,
|
|
2
|
+
import {type ReactNode, use, useCallback, useEffect, useMemo, useState} from 'react'
|
|
3
3
|
|
|
4
4
|
import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
|
|
5
5
|
import {useResponsiveProp} from '../../hooks/useResponsiveProp'
|
|
6
6
|
import {getLayerContext} from './getLayerContext'
|
|
7
|
-
import {LayerContext} from './
|
|
7
|
+
import {LayerContext} from './LayerContext'
|
|
8
8
|
import type {LayerContextValue} from './types'
|
|
9
9
|
|
|
10
10
|
/** @public */
|
|
@@ -18,7 +18,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
|
|
|
18
18
|
const {children, zOffset: zOffsetProp = 0} = props
|
|
19
19
|
|
|
20
20
|
// Get parent context values
|
|
21
|
-
const parentContextValue =
|
|
21
|
+
const parentContextValue = use(LayerContext)
|
|
22
22
|
const parent = parentContextValue && getLayerContext(parentContextValue)
|
|
23
23
|
const parentRegisterChild = parent?.registerChild
|
|
24
24
|
const parentLevel = parent?.level ?? 0
|
|
@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
|
|
|
8
8
|
{
|
|
9
9
|
name: 'nested',
|
|
10
10
|
title: 'Nested',
|
|
11
|
-
component: lazy(() => import('./
|
|
11
|
+
component: lazy(() => import('./Nested')),
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
name: 'multiple-roots',
|
|
15
15
|
title: 'Multiple roots',
|
|
16
|
-
component: lazy(() => import('./
|
|
16
|
+
component: lazy(() => import('./MultipleRoots')),
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
name: 'responsive-z-offset',
|
|
20
20
|
title: 'Responsive z-offset',
|
|
21
|
-
component: lazy(() => import('./
|
|
21
|
+
component: lazy(() => import('./ResponsiveZOffset')),
|
|
22
22
|
},
|
|
23
23
|
],
|
|
24
24
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {use} from 'react'
|
|
2
2
|
|
|
3
3
|
import {getLayerContext} from './getLayerContext'
|
|
4
|
-
import {LayerContext} from './
|
|
4
|
+
import {LayerContext} from './LayerContext'
|
|
5
5
|
import type {LayerContextValue} from './types'
|
|
6
6
|
|
|
7
7
|
/** @public */
|
|
8
8
|
export function useLayer(): LayerContextValue {
|
|
9
|
-
const value =
|
|
9
|
+
const value = use(LayerContext)
|
|
10
10
|
|
|
11
11
|
if (!value) {
|
|
12
12
|
throw new Error('useLayer(): missing context value')
|
|
@@ -32,10 +32,10 @@ import {origin} from '../../middleware/origin'
|
|
|
32
32
|
import type {ComponentType, Placement, Props} from '../../types'
|
|
33
33
|
import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
|
|
34
34
|
import {getElementRef} from '../../utils/getElementRef'
|
|
35
|
-
import {Portal} from '../../utils/portal/
|
|
36
|
-
import {CardProvider} from '../card/
|
|
35
|
+
import {Portal} from '../../utils/portal/Portal'
|
|
36
|
+
import {CardProvider} from '../card/CardProvider'
|
|
37
37
|
import {useCard} from '../card/useCard'
|
|
38
|
-
import {type LayerOwnProps} from '../layer/
|
|
38
|
+
import {type LayerOwnProps} from '../layer/Layer'
|
|
39
39
|
import {useLayer} from '../layer/useLayer'
|
|
40
40
|
import {
|
|
41
41
|
DEFAULT_FALLBACK_PLACEMENTS,
|
|
@@ -44,7 +44,7 @@ import {
|
|
|
44
44
|
DEFAULT_POPOVER_PADDING,
|
|
45
45
|
} from './constants'
|
|
46
46
|
import {size} from './floating-ui/size'
|
|
47
|
-
import {PopoverLayer} from './
|
|
47
|
+
import {PopoverLayer} from './PopoverLayer'
|
|
48
48
|
import type {PopoverMargins, PopoverUpdateCallback} from './types'
|
|
49
49
|
|
|
50
50
|
/** @public */
|
|
@@ -5,9 +5,9 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
|
|
|
5
5
|
|
|
6
6
|
import {POPOVER_MOTION_PROPS} from '../../constants'
|
|
7
7
|
import type {Placement} from '../../types'
|
|
8
|
-
import {Arrow} from '../arrow/
|
|
9
|
-
import {Flex} from '../flex/
|
|
10
|
-
import {Layer, type LayerOwnProps, type LayerProps} from '../layer/
|
|
8
|
+
import {Arrow} from '../arrow/Arrow'
|
|
9
|
+
import {Flex} from '../flex/Flex'
|
|
10
|
+
import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
|
|
11
11
|
import {
|
|
12
12
|
DEFAULT_POPOVER_ARROW_HEIGHT,
|
|
13
13
|
DEFAULT_POPOVER_ARROW_RADIUS,
|
|
@@ -47,7 +47,7 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
|
|
|
47
47
|
useCustomValidity(ref, customValidity)
|
|
48
48
|
|
|
49
49
|
return (
|
|
50
|
-
<
|
|
50
|
+
<span className={radio({className})} data-ui="Radio" style={style}>
|
|
51
51
|
<Element
|
|
52
52
|
{...rest}
|
|
53
53
|
className={radioInput()}
|
|
@@ -59,6 +59,6 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
|
|
|
59
59
|
type="radio"
|
|
60
60
|
/>
|
|
61
61
|
<span className={radioPresentation()} />
|
|
62
|
-
</
|
|
62
|
+
</span>
|
|
63
63
|
)
|
|
64
64
|
}
|
|
@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
|
|
|
5
5
|
name: 'primitives/radio',
|
|
6
6
|
title: 'Radio',
|
|
7
7
|
stories: [
|
|
8
|
-
{name: 'plain', title: 'Plain', component: lazy(() => import('./
|
|
9
|
-
{name: 'example', title: 'Example', component: lazy(() => import('./
|
|
8
|
+
{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
|
|
9
|
+
{name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
|
|
10
10
|
],
|
|
11
11
|
}
|
|
12
12
|
|
|
@@ -4,8 +4,8 @@ import {useImperativeHandle, useRef} from 'react'
|
|
|
4
4
|
|
|
5
5
|
import {useCustomValidity} from '../../hooks/useCustomValidity'
|
|
6
6
|
import type {ComponentType, Props} from '../../types'
|
|
7
|
-
import {Box} from '../box/
|
|
8
|
-
import {Text} from '../text/
|
|
7
|
+
import {Box} from '../box/Box'
|
|
8
|
+
import {Text} from '../text/Text'
|
|
9
9
|
|
|
10
10
|
/** @public */
|
|
11
11
|
export const DEFAULT_SELECT_ELEMENT = 'select'
|
|
@@ -36,12 +36,14 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
|
|
|
36
36
|
children,
|
|
37
37
|
customValidity,
|
|
38
38
|
disabled,
|
|
39
|
+
flex,
|
|
39
40
|
fontSize = 2,
|
|
40
41
|
gap = 2,
|
|
41
42
|
padding = 3,
|
|
42
43
|
radius = 1,
|
|
43
44
|
readOnly,
|
|
44
45
|
ref: forwardedRef,
|
|
46
|
+
width = 'fill',
|
|
45
47
|
...rest
|
|
46
48
|
} = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
|
|
47
49
|
|
|
@@ -55,9 +57,9 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
|
|
|
55
57
|
useCustomValidity(ref, customValidity)
|
|
56
58
|
|
|
57
59
|
return (
|
|
58
|
-
<
|
|
60
|
+
<span
|
|
59
61
|
data-ui="Select"
|
|
60
|
-
className={select({border, fontSize, gap, padding, radius})}
|
|
62
|
+
className={select({border, fontSize, flex, gap, padding, radius, width})}
|
|
61
63
|
data-icon-right=""
|
|
62
64
|
>
|
|
63
65
|
<Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
|
|
@@ -70,6 +72,6 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
|
|
|
70
72
|
</Text>
|
|
71
73
|
</Box>
|
|
72
74
|
</span>
|
|
73
|
-
</
|
|
75
|
+
</span>
|
|
74
76
|
)
|
|
75
77
|
}
|
|
@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
|
|
|
5
5
|
name: 'primitives/select',
|
|
6
6
|
title: 'Select',
|
|
7
7
|
stories: [
|
|
8
|
-
{name: 'plain', title: 'Plain', component: lazy(() => import('./
|
|
9
|
-
{name: 'read-only', title: 'Read-only', component: lazy(() => import('./
|
|
8
|
+
{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
|
|
9
|
+
{name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
|
|
10
10
|
],
|
|
11
11
|
}
|
|
12
12
|
|
|
@@ -2,7 +2,7 @@ import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
|
|
|
2
2
|
import type {ElementTone} from '@sanity/ui/theme'
|
|
3
3
|
|
|
4
4
|
import type {ComponentType, Props} from '../../types'
|
|
5
|
-
import {Box, type BoxOwnProps} from '../box/
|
|
5
|
+
import {Box, type BoxOwnProps} from '../box/Box'
|
|
6
6
|
|
|
7
7
|
/** @internal */
|
|
8
8
|
export const DEFAULT_SELECTABLE_ELEMENT = 'button'
|
|
@@ -2,7 +2,7 @@ import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
|
|
|
2
2
|
import type {FontCodeSize} from '@sanity/ui/theme'
|
|
3
3
|
|
|
4
4
|
import type {Props} from '../../types'
|
|
5
|
-
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './
|
|
5
|
+
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
|
|
6
6
|
|
|
7
7
|
/** @beta */
|
|
8
8
|
export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
|
|
@@ -2,7 +2,7 @@ import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
|
|
|
2
2
|
import type {FontHeadingSize} from '@sanity/ui/theme'
|
|
3
3
|
|
|
4
4
|
import type {Props} from '../../types'
|
|
5
|
-
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './
|
|
5
|
+
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
|
|
6
6
|
|
|
7
7
|
/** @beta */
|
|
8
8
|
export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
|
|
@@ -2,7 +2,7 @@ import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
|
|
|
2
2
|
import type {FontLabelSize} from '@sanity/ui/theme'
|
|
3
3
|
|
|
4
4
|
import type {Props} from '../../types'
|
|
5
|
-
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './
|
|
5
|
+
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
|
|
6
6
|
|
|
7
7
|
/** @beta */
|
|
8
8
|
export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
|
|
@@ -2,7 +2,7 @@ import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
|
|
|
2
2
|
import type {FontTextSize} from '@sanity/ui/theme'
|
|
3
3
|
|
|
4
4
|
import type {Props} from '../../types'
|
|
5
|
-
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './
|
|
5
|
+
import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
|
|
6
6
|
|
|
7
7
|
/** @beta */
|
|
8
8
|
export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
|