@sanity/ui 4.0.0-static.4 → 4.0.0-static.40

package/src/core/primitives/grid/{grid.tsx → Grid.tsx}

@@ -1,5 +1,5 @@
 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_GRID_ELEMENT = 'div'

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

@@ -5,7 +5,7 @@ const scope: WorkshopScope = {
   name: 'primitives/grid',
   title: 'Grid',
   stories: [
-    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
+    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./Responsive'))},
   ],
 }
 

package/src/core/primitives/heading/{heading.tsx → Heading.tsx}

@@ -46,6 +46,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted = false,
     size = 2,
     textOverflow: textOverflowProp,
@@ -61,6 +69,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
         className,
         align,
         flex,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
         muted,
         size,
         weight,

package/src/core/primitives/heading/__workshop__/{plain.tsx → Plain.tsx}

@@ -9,19 +9,30 @@ import {
 
 export default function PlainStory(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2)
   const textChild = useText('Text', 'Hello, world')
   const textOverflow = useSelect(
     'Text overflow',
+    // @ts-expect-error - TODO: fix this
     WORKSHOP_TEXT_OVERFLOW_OPTIONS,
     undefined,
     'Props',
   )
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+      <Heading
+        muted={muted}
+        // @ts-expect-error - TODO: fix this
+        size={size}
+        // @ts-expect-error - TODO: fix this
+        textOverflow={textOverflow}
+        // @ts-expect-error - TODO: fix this
+        weight={weight}
+      >
         {textChild}
       </Heading>
     </Flex>

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/inline/{inline.tsx → Inline.tsx}

@@ -1,5 +1,5 @@
 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_INLINE_ELEMENT = 'div'
@@ -22,6 +22,7 @@ export type InlineOwnProps = Omit<
   | 'gridRow'
   | 'gridTemplateColumns'
   | 'gridTemplateRows'
+  // eslint-disable-next-line no-warning-comments
   // todo: omit deprecated flex and grid props
 >
 

package/src/core/primitives/inline/__workshop__/{plain.tsx → Plain.tsx}

@@ -6,7 +6,11 @@ import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 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')}>
+      <Inline
+        // @ts-expect-error - TODO: fix this
+        gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}
+        onClick={useAction('onClick')}
+      >
         <Card padding={1} shadow={1}>
           <Text size={1}>Inline item</Text>
         </Card>

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

@@ -4,7 +4,7 @@ import {lazy} from 'react'
 const scope: WorkshopScope = {
   name: 'primitives/inline',
   title: 'Inline',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
 }
 
 export default scope

package/src/core/primitives/kbd/{kbd.tsx → Kbd.tsx}

@@ -2,8 +2,8 @@ import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {ComponentType, Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-import {Text} from '../text/text'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_KBD_ELEMENT = 'kbd'

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

@@ -4,7 +4,7 @@ import {lazy} from 'react'
 const scope: WorkshopScope = {
   name: 'primitives/kbd',
   title: 'KBD',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
 }
 
 export default scope

package/src/core/primitives/label/{label.tsx → Label.tsx}

@@ -44,6 +44,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
     as: Element = DEFAULT_LABEL_ELEMENT,
     children,
     className,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted = false,
     size = 1,
     textOverflow: textOverflowProp,
@@ -58,6 +66,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
       className={label({
         className,
         align,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
         muted,
         size,
         weight,

package/src/core/primitives/label/__workshop__/{plain.tsx → Plain.tsx}

@@ -9,17 +9,31 @@ import {
 } from '$workshop'
 
 export default function PlainStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
   const textChild = useText('Text', 'Label text')
+  // @ts-expect-error - TODO: fix this
   const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+        <Label
+          // @ts-expect-error - TODO: fix this
+          align={align}
+          muted={muted}
+          // @ts-expect-error - TODO: fix this
+          size={size}
+          // @ts-expect-error - TODO: fix this
+          textOverflow={textOverflow}
+          // @ts-expect-error - TODO: fix this
+          weight={weight}
+        >
           {textChild}
         </Label>
       </Container>

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/layer/{layer.test.tsx → Layer.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 import {useLayer} from './useLayer'
 
@@ -30,9 +30,9 @@ describe('primitives/layer', () => {
         }
 
         return (
-          <LayerContext.Provider value={value}>
+          <LayerContext value={value}>
             <Debug />
-          </LayerContext.Provider>
+          </LayerContext>
         )
       }
 
@@ -60,12 +60,12 @@ describe('primitives/layer', () => {
 
       function Root() {
         return (
-          <LayerContext.Provider
+          <LayerContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </LayerContext.Provider>
+          </LayerContext>
         )
       }
 
@@ -91,12 +91,12 @@ describe('primitives/layer', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <LayerContext.Provider
+          <LayerContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </LayerContext.Provider>
+          </LayerContext>
         )
       }
 

package/src/core/primitives/layer/{layer.tsx → Layer.tsx}

@@ -1,9 +1,9 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 
-import type {CardElementType, CardOwnProps} from '../../primitives/card/card'
+import type {CardElementType, CardOwnProps} from '../../primitives/card/Card'
 import type {Props} from '../../types'
-import {LayerCard} from './layerCard'
-import {LayerProvider} from './layerProvider'
+import {LayerCard} from './LayerCard'
+import {LayerProvider} from './LayerProvider'
 
 /** @public */
 export const DEFAULT_LAYER_ELEMENT = 'div'

package/src/core/primitives/layer/{layerCard.tsx → LayerCard.tsx}

@@ -2,9 +2,9 @@ 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 {Card, type CardElementType} from '../../primitives/card/Card'
 import type {Props} from '../../types'
-import type {LayerElementType, LayerOwnProps} from './layer'
+import type {LayerElementType, LayerOwnProps} from './Layer'
 import {useLayer} from './useLayer'
 
 /** @internal */

package/src/core/primitives/layer/{layerContext.ts → LayerContext.ts}

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

package/src/core/primitives/layer/{layerProvider.tsx → LayerProvider.tsx}

@@ -1,10 +1,10 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {type ReactNode, use, useCallback, useEffect, useMemo, useState} from 'react'
 
+import {_getResponsiveProp} from '../../helpers/props'
 import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 
 /** @public */
@@ -18,7 +18,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values
-  const parentContextValue = useContext(LayerContext)
+  const parentContextValue = use(LayerContext)
   const parent = parentContextValue && getLayerContext(parentContextValue)
   const parentRegisterChild = parent?.registerChild
   const parentLevel = parent?.level ?? 0
@@ -27,7 +27,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])
 
   // Get responsive z-index value
   const maxMediaIndex = Object.values(zOffset).length - 1
@@ -102,5 +102,5 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
     [isTopLayer, level, registerChild, size, zIndex],
   )
 
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
+  return <LayerContext value={value}>{children}</LayerContext>
 }

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

@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
     {
       name: 'nested',
       title: 'Nested',
-      component: lazy(() => import('./nested')),
+      component: lazy(() => import('./Nested')),
     },
     {
       name: 'multiple-roots',
       title: 'Multiple roots',
-      component: lazy(() => import('./multipleRoots')),
+      component: lazy(() => import('./MultipleRoots')),
     },
     {
       name: 'responsive-z-offset',
       title: 'Responsive z-offset',
-      component: lazy(() => import('./responsiveZOffset')),
+      component: lazy(() => import('./ResponsiveZOffset')),
     },
   ],
 }

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

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 
 /** @public */
 export function useLayer(): LayerContextValue {
-  const value = useContext(LayerContext)
+  const value = use(LayerContext)
 
   if (!value) {
     throw new Error('useLayer(): missing context value')