@sanity/ui 0.37.10 → 0.37.13

package/src/primitives/button/button.tsx

@@ -1,6 +1,7 @@
 import React, {createElement, forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
@@ -66,19 +67,19 @@ export const Button = forwardRef(function Button(
     fontSize,
     icon,
     iconRight,
-    justify = 'center',
+    justify: justifyProp = 'center',
     loading,
     mode = 'default',
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    radius = 2,
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
     selected,
-    space = 3,
+    space: spaceProp = 3,
     text,
     textAlign,
     tone = 'default',
@@ -86,6 +87,17 @@ export const Button = forwardRef(function Button(
     ...restProps
   } = props
 
+  const justify = useArrayProp(justifyProp)
+  const padding = useArrayProp(paddingProp)
+  const paddingX = useArrayProp(paddingXProp)
+  const paddingY = useArrayProp(paddingYProp)
+  const paddingTop = useArrayProp(paddingTopProp)
+  const paddingBottom = useArrayProp(paddingBottomProp)
+  const paddingLeft = useArrayProp(paddingLeftProp)
+  const paddingRight = useArrayProp(paddingRightProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
+
   const theme = useTheme()
 
   const boxProps = useMemo(

package/src/primitives/card/card.tsx

@@ -1,6 +1,7 @@
 import React, {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -54,7 +55,6 @@ export const Card = forwardRef(function Card(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const {
-    pressed = false,
     __unstable_checkered: checkered = false,
     __unstable_focusRing: focusRing = false,
     as: asProp,
@@ -63,6 +63,7 @@ export const Card = forwardRef(function Card(
     borderRight,
     borderBottom,
     borderLeft,
+    pressed,
     radius = 0,
     scheme,
     selected,
@@ -70,6 +71,7 @@ export const Card = forwardRef(function Card(
     tone: toneProp = 'default',
     ...restProps
   } = props
+
   const as = isValidElementType(asProp) ? asProp : 'div'
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
@@ -78,23 +80,23 @@ export const Card = forwardRef(function Card(
     <ThemeColorProvider scheme={scheme} tone={tone}>
       <Root
         data-as={typeof as === 'string' ? as : undefined}
-        data-checkered={checkered ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
         data-scheme={rootTheme.scheme}
-        data-selected={selected ? '' : undefined}
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={border}
-        $borderTop={borderTop}
-        $borderRight={borderRight}
-        $borderBottom={borderBottom}
-        $borderLeft={borderLeft}
+        $border={useArrayProp(border)}
+        $borderTop={useArrayProp(borderTop)}
+        $borderRight={useArrayProp(borderRight)}
+        $borderBottom={useArrayProp(borderBottom)}
+        $borderLeft={useArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
-        $radius={radius}
-        $shadow={shadow}
+        $radius={useArrayProp(radius)}
+        $shadow={useArrayProp(shadow)}
         $tone={tone}
+        data-checkered={checkered ? '' : undefined}
+        data-pressed={pressed ? '' : undefined}
+        data-selected={selected ? '' : undefined}
         forwardedAs={as}
         ref={ref}
         selected={selected}

package/src/primitives/checkbox/__workshop__/example.tsx

@@ -14,8 +14,10 @@ export default function ExampleStory() {
           indeterminate={indeterminate}
           onChange={handleChange}
         />
-        <Box marginLeft={3}>
-          <Text>Label</Text>
+        <Box marginLeft={2}>
+          <Text size={1} weight="semibold">
+            Toggle
+          </Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/checkbox/__workshop__/props.tsx

@@ -23,8 +23,10 @@ export default function PropsStory() {
           onBlur={onBlur}
           readOnly={readOnly}
         />
-        <Box marginLeft={3}>
-          <Text>Label</Text>
+        <Box marginLeft={2}>
+          <Text size={1} weight="semibold">
+            Toggle
+          </Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/checkbox/__workshop__/readOnly.tsx

@@ -6,8 +6,10 @@ export default function ReadOnlyStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Flex align="center" as="label">
         <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={3}>
-          <Text>Label</Text>
+        <Box marginLeft={2}>
+          <Text size={1} weight="semibold">
+            Toggle
+          </Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/code/__workshop__/props.tsx

@@ -9,7 +9,7 @@ import {
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, undefined, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/primitives/code/code.tsx

@@ -1,6 +1,7 @@
 import React, {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -28,7 +29,7 @@ export const Code = forwardRef(function Code(
   const registered = language ? Refractor.hasLanguage(language as any) : false
 
   return (
-    <Root data-ui="Code" {...restProps} $size={size} $weight={weight} ref={ref}>
+    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>

package/src/primitives/container/container.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
@@ -24,5 +25,13 @@ export const Container = forwardRef(function Container(
 ) {
   const {as, width = 2, ...restProps} = props
 
-  return <Root data-ui="Container" {...restProps} $width={width} forwardedAs={as} ref={ref} />
+  return (
+    <Root
+      data-ui="Container"
+      {...restProps}
+      $width={useArrayProp(width)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
 })

package/src/primitives/container/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {
@@ -17,7 +17,7 @@ export function responsiveContainerWidthStyle(
   const {theme} = props
   const {container, media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$width), (val) => ({
+  return _responsive(media, props.$width, (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),
   }))
 }

package/src/primitives/container/types.ts

@@ -2,5 +2,5 @@
  * @internal
  */
 export interface ResponsiveWidthStyleProps {
-  $width?: number | number[] | 'auto'
+  $width: (number | 'auto')[]
 }

package/src/primitives/flex/flex.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -37,11 +38,11 @@ export const Flex = forwardRef(function Flex(
     <Root
       data-ui="Flex"
       {...restProps}
-      $align={align}
-      $direction={direction}
-      $gap={gap}
-      $justify={justify}
-      $wrap={wrap}
+      $align={useArrayProp(align)}
+      $direction={useArrayProp(direction)}
+      $gap={useArrayProp(gap)}
+      $justify={useArrayProp(justify)}
+      $wrap={useArrayProp(wrap)}
       forwardedAs={as}
       ref={ref}
     />

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

@@ -10,41 +10,42 @@ export default function ResponsiveStory() {
           columns={[1, 2, 3, 4, 5, 6, 7]}
           gap={[0, 1, 2, 3, 4, 5, 6]}
           rows={[1, 2, 3, 4, 5, 6, 7]}
+          style={{textAlign: 'center'}}
         >
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>1</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>2</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>3</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>4</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>5</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>6</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>7</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>8</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>9</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>10</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>11</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>12</Code>
           </Card>
         </Grid>

package/src/primitives/grid/grid.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -26,14 +27,14 @@ export const Grid = forwardRef(function Grid(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={autoRows}
-      $autoCols={autoCols}
-      $autoFlow={autoFlow}
-      $columns={columns}
-      $gap={gap}
-      $gapX={gapX}
-      $gapY={gapY}
-      $rows={rows}
+      $autoRows={useArrayProp(autoRows)}
+      $autoCols={useArrayProp(autoCols)}
+      $autoFlow={useArrayProp(autoFlow)}
+      $columns={useArrayProp(columns)}
+      $gap={useArrayProp(gap)}
+      $gapX={useArrayProp(gapX)}
+      $gapY={useArrayProp(gapY)}
+      $rows={useArrayProp(rows)}
       forwardedAs={as}
       ref={ref}
     >

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

@@ -8,43 +8,55 @@ export default function OpticalAlignment() {
       <Stack space={1}>
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={5}>Hamburgefonstiv M</Heading>
+            <Heading accent size={5}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={4}>Hamburgefonstiv M</Heading>
+            <Heading accent size={4}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={3}>Hamburgefonstiv M</Heading>
+            <Heading accent size={3}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={2}>Hamburgefonstiv M</Heading>
+            <Heading accent size={2}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={1}>Hamburgefonstiv M</Heading>
+            <Heading accent size={1}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={0}>Hamburgefonstiv M</Heading>
+            <Heading accent size={0}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={2} scheme="dark">
-            <Heading>
+            <Heading accent>
               <AddCircleIcon />
             </Heading>
           </Card>

package/src/primitives/heading/heading.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -69,9 +70,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={align}
+      $align={useArrayProp(align)}
       $muted={muted}
-      $size={size}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/primitives/inline/inline.tsx

@@ -1,5 +1,6 @@
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useMemo} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {childrenToElementArray} from '../helpers'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
@@ -22,13 +23,18 @@ export const Inline = forwardRef(function Inline(
   ref
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
-  const children = childrenToElementArray(childrenProp).filter(Boolean)
+
+  const children = useMemo(
+    () =>
+      childrenToElementArray(childrenProp)
+        .filter(Boolean)
+        .map((child, idx) => <div key={idx}>{child}</div>),
+    [childrenProp]
+  )
 
   return (
-    <Root data-ui="Inline" {...restProps} $space={space} forwardedAs={as} ref={ref}>
-      {children.map((child, idx) => (
-        <div key={idx}>{child}</div>
-      ))}
+    <Root data-ui="Inline" {...restProps} $space={useArrayProp(space)} forwardedAs={as} ref={ref}>
+      {children}
     </Root>
   )
 })

package/src/primitives/inline/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
@@ -20,7 +20,7 @@ export function inlineBaseStyle(): CSSObject {
 export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
   const {theme} = props
 
-  return responsive(theme.sanity.media, getResponsiveProp(props.$space), (spaceIndex) => {
+  return _responsive(theme.sanity.media, props.$space, (spaceIndex) => {
     const space = rem(theme.sanity.space[spaceIndex])
 
     return {

package/src/primitives/inline/types.ts

@@ -2,5 +2,5 @@
  * @internal
  */
 export interface ResponsiveInlineSpaceStyleProps {
-  $space?: number | number[]
+  $space: number[]
 }

package/src/primitives/kbd/kbd.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Box} from '../box'
 import {Code} from '../code'
@@ -38,7 +39,7 @@ export const KBD = forwardRef(function KBD(
   const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={radius} ref={ref}>
+    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
         <Code as="span" muted size={fontSize}>
           {children}

package/src/primitives/label/label.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
@@ -25,7 +26,7 @@ export interface LabelProps {
 
 const Root = styled.div<{
   $accent?: boolean
-  $align?: TextAlign | TextAlign[]
+  $align: TextAlign[]
   $muted: boolean
   $size: number[]
 }>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
@@ -68,9 +69,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={align}
+      $align={useArrayProp(align)}
       $muted={muted}
-      $size={size}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/primitives/popover/__workshop__/{margins.tsx → MarginsStory.tsx}

@@ -5,7 +5,7 @@ export default function MarginsStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Popover
-        __unstable_margins={[-5, -5, -5, -5]}
+        __unstable_margins={[-8, 8, -8, 8]}
         arrow={false}
         content={
           <Box padding={2}>

package/src/primitives/popover/__workshop__/{plain.tsx → PlainStory.tsx}

@@ -1,5 +1,5 @@
 import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
@@ -9,18 +9,17 @@ import {
 } from '../../../__workshop__/constants'
 
 export default function PlainStory() {
-  const arrow = useBoolean('Arrow', true, 'Props')
-  const boundaryElementFlag = useBoolean('Boundary element', true, 'Props')
-  const content = useText('Content', 'Hello, world', 'Props')
-  const constrainSize = useBoolean('Constrain size', true, 'Props')
-  const matchReferenceWidth = useBoolean('Match reference width', false, 'Props')
-  const open = useBoolean('Open', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
-  const portal = useBoolean('Portal', true, 'Props')
-  const preventOverflow = useBoolean('Prevent overflow', true, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto', 'Props')
+  const arrow = useBoolean('Arrow', true)
+  const boundaryElementFlag = useBoolean('Boundary element', true)
+  const constrainSize = useBoolean('Constrain size', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Portal', true)
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
@@ -46,7 +45,6 @@ export default function PlainStory() {
               __unstable_margins={[1, 1, 1, 1]}
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
-              content={<Text>{content}</Text>}
               constrainSize={constrainSize}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}

package/src/primitives/popover/__workshop__/{recursive.tsx → RecursiveStory.tsx}

@@ -39,7 +39,9 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
   }, [open])
 
   useEffect(() => {
-    buttonRef.current?.focus()
+    setTimeout(() => {
+      buttonRef.current?.focus()
+    }, 0)
   }, [])
 
   const handleOpen = useCallback(() => setOpen(true), [])
@@ -58,6 +60,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       fallbackPlacements={fallbackPlacements}
       content={<RecursiveExample onClose={handleClose} />}
       open={open}
+      padding={1}
       placement={fallbackPlacements[3]}
       portal
       tone={tones[seed]}