@sanity/ui 3.0.0-static.33 → 3.0.0-static.35

package/src/core/primitives/flex/flex.tsx

@@ -6,7 +6,7 @@ import type {
   ResponsiveProp,
 } from '@sanity/ui/css'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
 /** @public */
@@ -31,7 +31,9 @@ export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexO
  *
  * @public
  */
-export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(props: FlexProps<E>) {
+export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
+  props: FlexProps<E>,
+): React.JSX.Element {
   const {
     align,
     as = DEFAULT_FLEX_ELEMENT,

package/src/core/primitives/grid/__workshop__/index.ts

@@ -1,10 +1,12 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/grid',
   title: 'Grid',
   stories: [
     {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
   ],
-})
+}
+
+export default scope

package/src/core/primitives/grid/__workshop__/responsive.tsx

@@ -1,14 +1,14 @@
 import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
 
-export default function ResponsiveStory() {
+export default function ResponsiveStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width="auto">
         <Grid
           id="responsive-grid"
-          columns={[1, 2, 3, 4, 5, 6, 7]}
           gap={[0, 1, 2, 3, 4, 5, 6]}
-          rows={[1, 2, 3, 4, 5, 6, 7]}
+          gridTemplateColumns={[1, 2, 3, 4, 5, 6, 7]}
+          gridTemplateRows={[1, 2, 3, 4, 5, 6, 7]}
           style={{textAlign: 'center'}}
         >
           <Card padding={[1, 2, 3]} tone="neutral">

package/src/core/primitives/grid/grid.tsx

@@ -1,4 +1,4 @@
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
 /** @public */
@@ -18,7 +18,9 @@ export type GridProps<E extends GridElementType = GridElementType> = Props<GridO
  *
  * @public
  */
-export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(props: GridProps<E>) {
+export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
+  props: GridProps<E>,
+): React.JSX.Element {
   const {
     as = DEFAULT_GRID_ELEMENT,
     children,

package/src/core/primitives/heading/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/heading',
   title: 'Heading',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./opticalAlignment')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -1,7 +1,7 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
 
-export default function OpticalAlignment() {
+export default function OpticalAlignment(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Stack gap={1}>

package/src/core/primitives/heading/__workshop__/plain.tsx

@@ -7,7 +7,7 @@ import {
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
 } from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
   const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2)
   const textChild = useText('Text', 'Hello, world')

package/src/core/primitives/heading/heading.tsx

@@ -5,7 +5,7 @@ import {
   type TextOverflowStyleProps,
 } from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_HEADING_ELEMENT = 'div'
@@ -39,9 +39,8 @@ export type HeadingProps<E extends HeadingElementType = HeadingElementType> = Pr
  */
 export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
   props: HeadingProps<E>,
-) {
+): React.JSX.Element {
   const {
-    accent = false,
     align,
     as: Element = DEFAULT_HEADING_ELEMENT,
     children,
@@ -60,7 +59,6 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
       {...rest}
       className={heading({
         className,
-        accent,
         align,
         flex,
         muted,

package/src/core/primitives/inline/__workshop__/index.ts

@@ -1,8 +1,10 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/inline',
   title: 'Inline',
   stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-})
+}
+
+export default scope

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -3,7 +3,7 @@ import {useAction, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Inline gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)} onClick={useAction('onClick')}>

package/src/core/primitives/inline/inline.tsx

@@ -1,7 +1,4 @@
-import type {ResponsiveProp} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
-
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
 /** @public */
@@ -26,10 +23,7 @@ export type InlineOwnProps = Omit<
   | 'gridTemplateColumns'
   | 'gridTemplateRows'
   // todo: omit deprecated flex and grid props
-> & {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-}
+>
 
 /** @public */
 export type InlineElementType = BoxElementType
@@ -44,12 +38,11 @@ export type InlineProps<E extends InlineElementType = InlineElementType> = Props
  */
 export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
   props: InlineProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_INLINE_ELEMENT,
     children,
     gap,
-    space,
     ...rest
   } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
 
@@ -60,7 +53,7 @@ export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEME
       alignItems="center"
       as={as}
       display="flex"
-      gap={gap ?? space}
+      gap={gap}
       flexWrap="wrap"
     >
       {children}

package/src/core/primitives/kbd/__workshop__/index.ts

@@ -1,8 +1,10 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/kbd',
   title: 'KBD',
   stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-})
+}
+
+export default scope

package/src/core/primitives/kbd/__workshop__/plain.tsx

@@ -1,6 +1,6 @@
 import {Flex, KBD} from '@sanity/ui'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>

package/src/core/primitives/kbd/kbd.tsx

@@ -1,7 +1,7 @@
 import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 import {Text} from '../text/text'
 
@@ -25,7 +25,9 @@ export type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnPr
  *
  * @public
  */
-export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props: KBDProps<E>) {
+export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
+  props: KBDProps<E>,
+): React.JSX.Element {
   const {
     as = DEFAULT_KBD_ELEMENT,
     children,

package/src/core/primitives/label/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/label',
   title: 'Label',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./opticalAlignment')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -1,7 +1,7 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
 
-export default function OpticalAlignment() {
+export default function OpticalAlignment(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Stack gap={1}>

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -8,7 +8,7 @@ import {
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
 } from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
   const muted = useBoolean('Muted', false)
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)

package/src/core/primitives/label/label.tsx

@@ -5,7 +5,7 @@ import {
   type TextOverflowStyleProps,
 } from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_LABEL_ELEMENT = 'div'
@@ -38,9 +38,8 @@ export type LabelProps<E extends LabelElementType = LabelElementType> = Props<La
  */
 export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
   props: LabelProps<E>,
-) {
+): React.JSX.Element {
   const {
-    accent,
     align,
     as: Element = DEFAULT_LABEL_ELEMENT,
     children,
@@ -58,7 +57,6 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
       {...rest}
       className={label({
         className,
-        accent,
         align,
         muted,
         size,

package/src/core/primitives/layer/__workshop__/_debug.tsx

@@ -1,6 +1,6 @@
 import {Code, useLayer} from '@sanity/ui'
 
-export function LayerDebugInfo(props: {id?: string}) {
+export function LayerDebugInfo(props: {id?: string}): React.JSX.Element {
   const {id} = props
   const layer = useLayer()
 

package/src/core/primitives/layer/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/layer',
   title: 'Layer',
   stories: [
@@ -21,4 +21,6 @@ export default defineScope({
       component: lazy(() => import('./responsiveZOffset')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/layer/__workshop__/multipleRoots.tsx

@@ -2,7 +2,7 @@ import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
 
 import {LayerDebugInfo} from './_debug'
 
-export default function MultipleRootsStory() {
+export default function MultipleRootsStory(): React.JSX.Element {
   return (
     <Stack gap={4}>
       <LayerProvider zOffset={100}>

package/src/core/primitives/layer/__workshop__/nested.tsx

@@ -4,7 +4,7 @@ import {useCallback, useState} from 'react'
 
 import {LayerDebugInfo} from './_debug'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Box padding={3}>
       <Root />

package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx

@@ -2,7 +2,7 @@ import {Layer} from '@sanity/ui'
 
 import {LayerDebugInfo} from './_debug'
 
-export default function ResponsiveZOffsetStory() {
+export default function ResponsiveZOffsetStory(): React.JSX.Element {
   return (
     <Layer
       id="responsive-layer"

package/src/core/primitives/layer/layer.test.tsx

@@ -1,6 +1,7 @@
 import {describe, expect, it, vi} from 'vitest'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {LayerContext} from './layerContext'
 import type {LayerContextValue} from './types'
 import {useLayer} from './useLayer'

package/src/core/primitives/layer/layer.tsx

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 
 import type {CardElementType, CardOwnProps} from '../../primitives/card/card'
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {LayerCard} from './layerCard'
 import {LayerProvider} from './layerProvider'
 
@@ -24,7 +24,7 @@ export type LayerProps<E extends LayerElementType = LayerElementType> = Props<La
 /** @public */
 export function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
   props: LayerProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_LAYER_ELEMENT,
     children,

package/src/core/primitives/layer/layerCard.tsx

@@ -3,7 +3,7 @@ import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} fr
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
 import {Card, type CardElementType} from '../../primitives/card/card'
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import type {LayerElementType, LayerOwnProps} from './layer'
 import {useLayer} from './useLayer'
 
@@ -25,7 +25,7 @@ export type LayerCardProps<E extends LayerCardElementType = LayerCardElementType
 /** @internal */
 export function LayerCard<E extends LayerCardElementType = typeof DEFAULT_LAYER_CARD_ELEMENT>(
   props: LayerCardProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_LAYER_CARD_ELEMENT,
     children,

package/src/core/primitives/layer/layerContext.ts

@@ -1,7 +1,7 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {LayerContextValue} from './types'
 
-export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(
-  '@sanity/ui/context/layer',
-  null,
-)
+export const LayerContext: Context<LayerContextValue | null> =
+  createGlobalScopedContext<LayerContextValue | null>('@sanity/ui/v3/layer', null)

package/src/core/primitives/layer/layerProvider.tsx

@@ -1,13 +1,5 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {
-  type ReactElement,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
 
 import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
@@ -22,7 +14,7 @@ export interface LayerProviderProps {
 }
 
 /** @public */
-export function LayerProvider(props: LayerProviderProps): ReactElement {
+export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -10,7 +10,7 @@ import {
   WORKSHOP_PLACEMENT_OPTIONS,
 } from '$workshop'
 
-export default function AlignedStory() {
+export default function AlignedStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', false)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
@@ -51,9 +51,9 @@ export default function AlignedStory() {
       <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
         <Flex align={flexAlign} height="fill" justify={flexJustify}>
           <Popover
-            boundaryElement={boundaryElement}
             constrainSize={constrainSize}
             content={content}
+            floatingBoundary={boundaryElement}
             open={open}
             overflow="auto"
             padding={3}

package/src/core/primitives/popover/__workshop__/MarginsStory.tsx

@@ -1,6 +1,6 @@
 import {Box, Card, Container, Flex, Popover, Text} from '@sanity/ui'
 
-export default function MarginsStory() {
+export default function MarginsStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Popover

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -3,7 +3,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
-export default function MatchReferenceWidthStory() {
+export default function MatchReferenceWidthStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', true)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 

package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -1,6 +1,6 @@
 import {Button, Card, Popover, Text} from '@sanity/ui'
 
-export default function OpenOnMountStory() {
+export default function OpenOnMountStory(): React.JSX.Element {
   return (
     <Card height="fill" padding={3} sizing="border">
       <Popover content={<Text size={1}>popover content</Text>} open padding={3} tone="default">

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -9,7 +9,7 @@ import {
   WORKSHOP_SPACE_OPTIONS,
 } from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', true)
   const boundaryElementFlag = useBoolean('Boundary element', true)
   const constrainSize = useBoolean('Constrain size', true)
@@ -47,10 +47,10 @@ export default function PlainStory() {
             <Popover
               __unstable_margins={[1, 1, 1, 1]}
               arrow={arrow}
-              boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
               constrainSize={constrainSize}
               content={<Text size={1}>popover content</Text>}
               fallbackPlacements={['top', 'bottom']}
+              floatingBoundary={boundaryElementFlag ? boundaryElement : undefined}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
               padding={padding}

package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx

@@ -1,8 +1,8 @@
 import {Button, Flex, LayerProvider, type Placement, Popover, useLayer} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+import {CARD_TONES} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
-export default function RecursiveStory() {
+export default function RecursiveStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <LayerProvider>
@@ -55,7 +55,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       padding={1}
       placement={fallbackPlacements[3]}
       portal
-      tone={THEME_COLOR_CARD_TONES[seed]}
+      tone={CARD_TONES[seed]}
     >
       <Button
         mode="bleed"

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -2,7 +2,6 @@ import {
   BoundaryElementProvider,
   Box,
   Card,
-  type CardTone,
   Flex,
   Popover,
   type PopoverProps,
@@ -10,6 +9,7 @@ import {
   Stack,
   Text,
 } from '@sanity/ui'
+import type {CardTone} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
@@ -22,7 +22,7 @@ const SIDE_PANEL_WIDTH = {
   xl: 600,
 }
 
-export default function SidePanelStory() {
+export default function SidePanelStory(): React.JSX.Element {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
   const updateRef = useRef<PopoverUpdateCallback>(undefined)
@@ -58,7 +58,7 @@ export default function SidePanelStory() {
   )
 }
 
-function InlineObject(props: {tone: CardTone; updateRef?: PopoverProps['updateRef']}) {
+function InlineObject(props: {tone: CardTone | 'inherit'; updateRef?: PopoverProps['updateRef']}) {
   const {tone, updateRef} = props
   const [open, setOpen] = useState(false)
 

package/src/core/primitives/popover/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/popover',
   title: 'Popover',
   stories: [
@@ -46,4 +46,6 @@ export default defineScope({
       component: lazy(() => import('./SidePanelStory')),
     },
   ],
-})
+}
+
+export default scope