@sanity/ui 4.0.0-static.23 → 4.0.0-static.25

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/skeleton',
   title: 'Skeleton',
   stories: [
-    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
+    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./Skeleton'))},
+    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./Delay'))},
   ],
 }
 

package/src/core/primitives/spinner/{spinner.tsx → Spinner.tsx}

@@ -2,8 +2,8 @@ import {type ResponsiveProp, spinner} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {ComponentType, Props} from '../../types'
-import {Text} from '../text/text'
-import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
+import {Text} from '../text/Text'
+import {AnimatedSpinnerIcon} from './AnimatedSpinnerIcon'
 
 /** @public */
 export const DEFAULT_SPINNER_ELEMENT = 'div'

package/src/core/primitives/stack/{stack.tsx → Stack.tsx}

@@ -1,7 +1,7 @@
 import {stack} from '@sanity/ui/css'
 
 import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
 
 /** @public */
 export const DEFAULT_STACK_ELEMENT = 'div'

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

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/primitives/switch/{switch.tsx → Switch.tsx}

@@ -8,7 +8,6 @@ import {
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
 
 /** @public */
 export const DEFAULT_SWITCH_ELEMENT = 'input'
@@ -41,7 +40,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     indeterminate,
     readOnly,
     ref: forwardedRef,
-    style,
     ...rest
   } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
 
@@ -60,13 +58,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   }, [indeterminate])
 
   return (
-    <Box
-      className={_switch({className})}
-      data-ui="Switch"
-      display="block"
-      position="relative"
-      style={style}
-    >
+    <span className={_switch({className})} data-ui="Switch">
       <Element
         {...rest}
         className={_switchElement()}
@@ -79,6 +71,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
         <span className={_switchTrack()} />
         <span className={_switchThumb()} />
       </span>
-    </Box>
+    </span>
   )
 }

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/switch',
   title: 'Switch',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
   ],
 }
 

package/src/core/primitives/text/{text.tsx → Text.tsx}

@@ -42,6 +42,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
     maxWidth = 'fill',
     muted,
     size = 2,
@@ -58,6 +65,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
         className,
         align,
         flex,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
         maxWidth,
         muted,
         size,

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

@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
     {
       name: 'default',
       title: 'Text',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
     {
       name: 'colored',
       title: 'Colored text',
-      component: lazy(() => import('./colored')),
+      component: lazy(() => import('./Colored')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/textArea/{textArea.tsx → TextArea.tsx}

@@ -37,14 +37,17 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
+    className,
     customValidity,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     padding = 3,
     radius = 2,
     readOnly,
     ref: forwardedRef,
+    width,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -60,11 +63,14 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   return (
     <span
       className={textArea({
+        className,
         border,
+        flex,
         fontSize,
+        gap,
         padding,
         radius,
-        gap,
+        width,
       })}
       data-invalid={customValidity ? '' : undefined}
       data-read-only={!disabled && readOnly ? '' : undefined}

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

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx}

@@ -27,9 +27,9 @@ import {useCustomValidity} from '../../hooks/useCustomValidity'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Button, type ButtonProps} from '../button/button'
-import {Text} from '../text/text'
+import {Box} from '../box/Box'
+import {Button, type ButtonProps} from '../button/Button'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
@@ -86,6 +86,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     className,
     clearButton,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     icon: IconComponent,
@@ -166,15 +167,15 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
   )
 
   return (
-    <Box
-      alignItems="center"
+    <span
       className={textInput({
         className,
         border,
+        flex,
         fontSize,
         padding,
         radius,
-        gap: gap,
+        gap,
         width,
       })}
       data-icon-left={IconComponent ? '' : undefined}
@@ -184,15 +185,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
-      display="flex"
     >
       {prefix && (
-        <Box className={textInputPrefix()} sizing="border">
+        <span className={textInputPrefix()}>
           <span>{prefix}</span>
-        </Box>
+        </span>
       )}
 
-      <Box className={textInputElement()} flex={1} position="relative">
+      <span className={textInputElement()}>
         <Element
           {...rest}
           className={_inputElement()}
@@ -203,10 +203,10 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           type={type}
         />
 
-        <Box className={_inputPresentation()} position="absolute">
+        <span className={_inputPresentation()}>
           {IconComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetLeft={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
@@ -214,17 +214,18 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetRight={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>
             </Box>
           )}
-        </Box>
+        </span>
 
         {!disabled && !readOnly && clearButton && (
           <Box
+            as="span"
             insetTop={0}
             insetRight={0}
             padding={clearButtonBoxPadding}
@@ -246,13 +247,13 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
             />
           </Box>
         )}
-      </Box>
+      </span>
 
       {suffix && (
-        <Box className={textInputSuffix()} sizing="border">
+        <span className={textInputSuffix()}>
           <span>{suffix}</span>
-        </Box>
+        </span>
       )}
-    </Box>
+    </span>
   )
 }

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

@@ -8,37 +8,37 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'custom-validity',
       title: 'Custom validity',
-      component: lazy(() => import('./customValidity')),
+      component: lazy(() => import('./CustomValidity')),
     },
     {
       name: 'typed',
       title: 'Typed',
-      component: lazy(() => import('./typed')),
+      component: lazy(() => import('./Typed')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'clear-button',
       title: 'Clear button',
-      component: lazy(() => import('./clearButton')),
+      component: lazy(() => import('./ClearButton')),
     },
     {
       name: 'read-only',
       title: 'Read only',
-      component: lazy(() => import('./readOnly')),
+      component: lazy(() => import('./ReadOnly')),
     },
     {
       name: 'states',
       title: 'States',
-      component: lazy(() => import('./states')),
+      component: lazy(() => import('./States')),
     },
   ],
 }

package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx}

@@ -3,10 +3,10 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {Button} from '../button/button'
-import {Text} from '../text/text'
-import {Tooltip} from './tooltip'
-import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
+import {Button} from '../button/Button'
+import {Text} from '../text/Text'
+import {Tooltip} from './Tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup/TooltipDelayGroupProvider'
 
 // Fake timers
 beforeEach(() => {

package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx}

@@ -37,18 +37,19 @@ import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
+import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
-import {CardProvider} from '../card/cardProvider'
+import {CardProvider} from '../card/CardProvider'
 import {useCard} from '../card/useCard'
-import type {LayerOwnProps} from '../layer/layer'
+import type {LayerOwnProps} from '../layer/Layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {useTooltipDelayGroup} from './tooltipDelayGroup'
-import {TooltipLayer} from './tooltipLayer'
+import {useTooltipDelayGroup} from './tooltipDelayGroup/useTooltipDelayGroup'
+// import {useTooltipDelayGroup} from './TooltipDelayGroup'
+import {TooltipLayer} from './TooltipLayer'
 
 /** @public */
 export const DEFAULT_TOOLTIP_ELEMENT = 'div'

package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx}

@@ -3,8 +3,8 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow} from '../arrow/arrow'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,

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

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'resizableBoundary',
       title: 'Resizable Boundary',
-      component: lazy(() => import('./resizableBoundary')),
+      component: lazy(() => import('./ResizableBoundary')),
     },
     {
       name: 'overflowBoundary',
       title: 'Overflowing Boundary',
-      component: lazy(() => import('./overflowingBoundary')),
+      component: lazy(() => import('./OverflowingBoundary')),
     },
     {
       name: 'customPortalStory',
       title: 'Custom Portal',
-      component: lazy(() => import('./customPortal')),
+      component: lazy(() => import('./CustomPortal')),
     },
   ],
 }

package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupProvider.tsx → TooltipDelayGroupProvider.tsx}

@@ -2,7 +2,7 @@ import {type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
 import type {Delay} from '../../../types'
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,13 +1,13 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta
  */
 export function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null {
-  const value = useContext(TooltipDelayGroupContext)
+  const value = use(TooltipDelayGroupContext)
 
   return value
 }

package/src/core/types.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
-
 /**
  * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
  *
@@ -14,17 +12,20 @@ export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
 export type EmptyProps = {}
 
 /** @public */
-export type TagType = keyof JSX.IntrinsicElements
+export type TagType = keyof React.JSX.IntrinsicElements
 
 /** @public */
-export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+export type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
 
 /** @public */
 export type ElementType<P> = TagType | ComponentType<P>
 
 /** @public */
 export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
   P & {as?: E}
 >
 

package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx}

@@ -1,6 +1,6 @@
 import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
-import {Code} from '../primitives/code/code'
+import {Code} from '../primitives/code/Code'
 
 /**
  * DO NOT USE IN PRODUCTION

package/src/core/utils/boundaryElement/{boundaryElement.test.tsx → BoundaryElement.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'
 

package/src/core/utils/boundaryElement/{boundaryElementProvider.tsx → BoundaryElementProvider.tsx}

@@ -1,6 +1,6 @@
 import {type ReactNode, useMemo} from 'react'
 
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
 /** @public */

package/src/core/utils/boundaryElement/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,7 +1,7 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
 const DEFAULT_VALUE: BoundaryElementContextValue = {
@@ -11,7 +11,7 @@ const DEFAULT_VALUE: BoundaryElementContextValue = {
 
 /** @public */
 export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = useContext(BoundaryElementContext)
+  const value = use(BoundaryElementContext)
 
   // NOTE: This check is for future-compatiblity
   // - If the value is not an object, it’s not compatible with the current version

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'custom-media',
       title: 'Custom media',
-      component: lazy(() => import('./customMedia')),
+      component: lazy(() => import('./CustomMedia')),
     },
   ],
 }

package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
 

package/src/core/utils/portal/{portal.tsx → Portal.tsx}

@@ -1,7 +1,7 @@
 import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider} from '../../primitives/card/cardProvider'
+import {CardProvider} from '../../primitives/card/CardProvider'
 import {useCard} from '../../primitives/card/useCard'
 import {usePortal} from './usePortal'
 

package/src/core/utils/portal/{portalProvider.tsx → PortalProvider.tsx}

@@ -1,6 +1,6 @@
-import {type ReactNode, useContext, useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactNode, use, useMemo, useRef, useSyncExternalStore} from 'react'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */
@@ -17,7 +17,7 @@ export interface PortalProviderProps {
 export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
-  const parentPortal = useContext(PortalContext)
+  const parentPortal = use(PortalContext)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => elements?.['default'] ?? (parentPortal.element || document.body),

package/src/core/utils/portal/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'named',
       title: 'Named portals',
-      component: lazy(() => import('./named')),
+      component: lazy(() => import('./Named')),
     },
   ],
 }

package/src/core/utils/portal/usePortal.ts

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */
 export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
+  const value = use(PortalContext)
 
   if (!value) {
     throw new Error('usePortal(): missing context value')

package/src/css/_responsiveStyle.css.ts

@@ -21,8 +21,8 @@ export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRule
       rules[index] = style({
         '@layer': {
           [layer]: {
-            '@media': {
-              [`screen and (min-width: ${bp}px)`]: rule,
+            '@container': {
+              [`(min-width: ${bp}px)`]: rule,
             },
           },
         },