@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

package/src/core/primitives/box/box.tsx

@@ -4,7 +4,7 @@ import type {
   InsetStyleProps,
   PositionStyleProps,
 } from '@sanity/ui/css'
-import {_composeClassNames, box} from '@sanity/ui/css'
+import {box} from '@sanity/ui/css'
 
 import type {ComponentType, Props} from '../../types'
 
@@ -57,7 +57,7 @@ export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnPr
  */
 export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>) {
   const {
-    align,
+    alignItems,
     as: Element = DEFAULT_BOX_ELEMENT,
     autoCols,
     autoFlow,
@@ -73,19 +73,31 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     columnStart,
     columnEnd,
     columns,
-    direction,
     display = 'block',
     flex,
+    flexDirection,
+    flexWrap,
     gap,
     gapX,
     gapY,
+    gridAutoColumns,
+    gridAutoFlow,
+    gridAutoRows,
+    gridColumn,
+    gridColumnEnd,
+    gridColumnStart,
+    gridRow,
+    gridRowEnd,
+    gridRowStart,
+    gridTemplateColumns,
+    gridTemplateRows,
     height,
     inset,
     insetBottom,
     insetLeft,
     insetRight,
     insetTop,
-    justify,
+    justifyContent,
     margin = 0,
     marginX,
     marginY,
@@ -115,10 +127,10 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     rows,
     rowStart,
     rowEnd,
+    shadow,
     sizing = 'border',
     textAlign,
     width,
-    wrap,
     ...rest
   } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
 
@@ -126,74 +138,82 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     <Element
       data-ui="Box"
       {...rest}
-      className={_composeClassNames(
+      className={box({
         className,
-        box({
-          align,
-          autoCols,
-          autoFlow,
-          autoRows,
-          border,
-          borderTop,
-          borderRight,
-          borderBottom,
-          borderLeft,
-          column,
-          columnStart,
-          columnEnd,
-          columns,
-          direction,
-          display,
-          flex,
-          gap,
-          gapX,
-          gapY,
-          height,
-          inset,
-          insetBottom,
-          insetLeft,
-          insetRight,
-          insetTop,
-          justify,
-          margin,
-          marginX,
-          marginY,
-          marginTop,
-          marginRight,
-          marginBottom,
-          marginLeft,
-          maxWidth,
-          minHeight,
-          minWidth,
-          muted,
-          outline,
-          overflow,
-          overflowX,
-          overflowY,
-          padding,
-          paddingX,
-          paddingY,
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft,
-          pointerEvents,
-          position,
-          radius,
-          row,
-          rows,
-          rowStart,
-          rowEnd,
-          sizing,
-          textAlign,
-          width,
-          wrap,
-        }),
-      )}
+        alignItems,
+        autoCols,
+        autoFlow,
+        autoRows,
+        border,
+        borderTop,
+        borderRight,
+        borderBottom,
+        borderLeft,
+        column,
+        columnStart,
+        columnEnd,
+        columns,
+        display,
+        flex,
+        flexDirection,
+        flexWrap,
+        gap,
+        gapX,
+        gapY,
+        gridAutoColumns,
+        gridAutoFlow,
+        gridAutoRows,
+        gridColumn,
+        gridColumnEnd,
+        gridColumnStart,
+        gridRow,
+        gridRowEnd,
+        gridRowStart,
+        gridTemplateColumns,
+        gridTemplateRows,
+        height,
+        inset,
+        insetBottom,
+        insetLeft,
+        insetRight,
+        insetTop,
+        justifyContent,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
+        minHeight,
+        minWidth,
+        muted,
+        outline,
+        overflow,
+        overflowX,
+        overflowY,
+        padding,
+        paddingX,
+        paddingY,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        pointerEvents,
+        position,
+        radius,
+        row,
+        rows,
+        rowStart,
+        rowEnd,
+        shadow,
+        sizing,
+        textAlign,
+        width,
+      })}
     >
       {children}
     </Element>
   )
 }
-
-Box.displayName = 'Box'

package/src/core/primitives/button/button.tsx

@@ -1,19 +1,14 @@
 import type {
+  BoxStyleProps,
   ButtonStyleProps,
   DisplayStyleProps,
-  FlexStyleProps,
   GapStyleProps,
   PaddingStyleProps,
   ResponsiveProp,
   Width,
 } from '@sanity/ui/css'
-import {_composeClassNames, button, buttonLoadingBox} from '@sanity/ui/css'
-import type {
-  FontTextSize,
-  Space,
-  ThemeColorButtonModeKey,
-  ThemeColorStateToneKey,
-} from '@sanity/ui/theme'
+import {button, buttonLoadingBox} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
 import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
@@ -31,14 +26,13 @@ export type ButtonOwnProps = ButtonStyleProps &
   DisplayStyleProps &
   GapStyleProps &
   PaddingStyleProps & {
-    'align'?: FlexStyleProps['align']
+    'align'?: BoxStyleProps['alignItems']
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'mode'?: ThemeColorButtonModeKey
     'icon'?: ReactElementType | ReactNode
     'iconRight'?: ReactElementType | ReactNode
-    'justify'?: FlexStyleProps['justify']
+    'justify'?: BoxStyleProps['justifyContent']
     /** @beta Do not use in production, as this might change.*/
     'loading'?: boolean
     'selected'?: boolean
@@ -50,7 +44,6 @@ export type ButtonOwnProps = ButtonStyleProps &
     'text'?: ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
-    'tone'?: ThemeColorStateToneKey
     'width'?: ResponsiveProp<Width>
   }
 
@@ -113,10 +106,8 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     <Element
       data-ui="Button"
       {...rest}
-      className={_composeClassNames(className, button({display, flex, radius, width}))}
+      className={button({className, display, flex, mode, radius, tone, width})}
       data-disabled={loading || disabled ? '' : undefined}
-      data-mode={mode}
-      data-tone={tone}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
       // @ts-expect-error - TODO: fix this
@@ -125,12 +116,12 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     >
       {Boolean(loading) && (
         <Box
-          align="center"
+          alignItems="center"
           as="span"
           className={buttonLoadingBox()}
           display="flex"
           flex={1}
-          justify="center"
+          justifyContent="center"
           width="fill"
         >
           <Spinner size={fontSize} />
@@ -139,14 +130,14 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
-          align={align}
+          alignItems={align}
           as="span"
           display="flex"
           flex={1}
           gap={gap}
           gapX={gapX}
           gapY={gapY}
-          justify={justify}
+          justifyContent={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -203,5 +194,3 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     </Element>
   )
 }
-
-Button.displayName = 'Button'

package/src/core/primitives/card/card.tsx

@@ -1,4 +1,4 @@
-import {_composeClassNames, card, type CardStyleProps} from '@sanity/ui/css'
+import {card, type CardStyleProps} from '@sanity/ui/css'
 
 import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
@@ -49,7 +49,6 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     radius = 0,
     scheme: schemeProp,
     selected,
-    shadow,
     style,
     tone: toneProp = 'default',
     ...rest
@@ -64,14 +63,11 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
       data-ui="Card"
       {...rest}
       as={as}
-      className={_composeClassNames(
+      className={card({
         className,
-        card({
-          scheme: scheme === parent?.scheme ? undefined : scheme,
-          shadow,
-          tone,
-        }),
-      )}
+        scheme: scheme === parent?.scheme ? undefined : scheme,
+        tone,
+      })}
       data-checkered={checkered ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
@@ -108,5 +104,3 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
 
   return node
 }
-
-Card.displayName = 'Card'

package/src/core/primitives/card/cardProvider.tsx

@@ -4,10 +4,12 @@ import {type ReactNode, useMemo} from 'react'
 import {CardContext} from './cardContext'
 import type {_CardCompatProviderComponent} from './types'
 
+/** @public */
 export function CardProvider(props: {
   children?: ReactNode
   tone: ThemeColorCardToneKey
   scheme: ThemeColorSchemeKey
+  /** @internal */
   unstable_CompatProvider?: _CardCompatProviderComponent
 }) {
   const {children, tone, scheme, unstable_CompatProvider} = props
@@ -23,5 +25,3 @@ export function CardProvider(props: {
     </CardContext.Provider>
   )
 }
-
-CardProvider.displayName = 'CardProvider'

package/src/core/primitives/card/useCard.ts

@@ -3,6 +3,7 @@ import {useContext} from 'react'
 import {CardContext} from './cardContext'
 import type {CardContextValue} from './types'
 
+/** @public */
 export function useCard(): CardContextValue | null {
   return useContext(CardContext)
 }

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {_composeClassNames, checkbox, checkboxInput} from '@sanity/ui/css'
+import {checkbox, checkboxInput, checkboxPresentation} from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
@@ -61,23 +61,21 @@ export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX
   useCustomValidity(ref, customValidity)
 
   return (
-    <span className={_composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
+    <span className={checkbox({className})} data-ui="Checkbox" style={style}>
       <Element
         {...rest}
         checked={checked}
-        className={_composeClassNames(className, checkboxInput())}
+        className={checkboxInput()}
         data-invalid={customValidity ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}
         ref={ref}
       />
-      <span>
+      <span className={checkboxPresentation()}>
         <CheckmarkIcon />
         <RemoveIcon />
       </span>
     </span>
   )
 }
-
-Checkbox.displayName = 'Checkbox'

package/src/core/primitives/code/code.tsx

@@ -1,4 +1,5 @@
-import {_composeClassNames, code, type FontStyleProps} from '@sanity/ui/css'
+import {code, type CodeStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
 import {lazy, Suspense} from 'react'
 
 import type {ComponentType, Props} from '../../types'
@@ -9,10 +10,10 @@ const LazyRefractor = lazy(() => import('./refractor'))
 export const DEFAULT_CODE_ELEMENT = 'pre'
 
 /** @public */
-export type CodeOwnProps = Omit<FontStyleProps, 'align'> & {
+export type CodeOwnProps = CodeStyleProps & {
   /** Define the language to use for syntax highlighting. */
   language?: string
-  size?: number | number[]
+  size?: ResponsiveProp<FontCodeSize>
 }
 
 /** @public */
@@ -36,16 +37,10 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(pr
   const language = typeof languageProp === 'string' ? languageProp : undefined
 
   return (
-    <Element
-      data-ui="Code"
-      {...rest}
-      className={_composeClassNames(className, code({size, weight}))}
-    >
+    <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>
     </Element>
   )
 }
-
-Code.displayName = 'Code'

package/src/core/primitives/code/refractor.tsx

@@ -16,5 +16,3 @@ export default function LazyRefractor(
     </>
   )
 }
-
-LazyRefractor.displayName = 'LazyRefractor'

package/src/core/primitives/container/container.tsx

@@ -1,4 +1,4 @@
-import {_composeClassNames, container, type ContainerStyleProps} from '@sanity/ui/css'
+import {container, type ContainerStyleProps} from '@sanity/ui/css'
 
 import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
@@ -33,14 +33,5 @@ export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAI
     ...rest
   } = props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>
 
-  return (
-    <Box
-      data-ui="Container"
-      {...rest}
-      as={as}
-      className={_composeClassNames(className, container({width}))}
-    />
-  )
+  return <Box data-ui="Container" {...rest} as={as} className={container({className, width})} />
 }
-
-Container.displayName = 'Container'

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

@@ -1,3 +1,11 @@
+import type {
+  AlignItems,
+  FlexDirection,
+  FlexWrap,
+  JustifyContent,
+  ResponsiveProp,
+} from '@sanity/ui/css'
+
 import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
@@ -5,7 +13,12 @@ import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 export const DEFAULT_FLEX_ELEMENT = 'div'
 
 /** @public */
-export type FlexOwnProps = Omit<BoxOwnProps, 'display'>
+export type FlexOwnProps = Omit<BoxOwnProps, 'align' | 'display' | 'flexDirection' | 'flexWrap'> & {
+  align?: ResponsiveProp<AlignItems>
+  direction?: ResponsiveProp<FlexDirection>
+  justify?: ResponsiveProp<JustifyContent>
+  wrap?: ResponsiveProp<FlexWrap>
+}
 
 /** @public */
 export type FlexElementType = BoxElementType
@@ -20,12 +33,24 @@ export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexO
  */
 export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(props: FlexProps<E>) {
   const {
+    align,
     as = DEFAULT_FLEX_ELEMENT,
     direction = 'row',
+    justify,
+    wrap,
     ...rest
   } = props as FlexProps<typeof DEFAULT_FLEX_ELEMENT>
 
-  return <Box data-ui="Flex" {...rest} as={as} direction={direction} display="flex" />
+  return (
+    <Box
+      data-ui="Flex"
+      {...rest}
+      alignItems={align}
+      as={as}
+      display="flex"
+      flexDirection={direction}
+      flexWrap={wrap}
+      justifyContent={justify}
+    />
+  )
 }
-
-Flex.displayName = 'Flex'

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

@@ -31,5 +31,3 @@ export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(pr
     </Box>
   )
 }
-
-Grid.displayName = 'Grid'

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

@@ -1,5 +1,4 @@
 import {
-  _composeClassNames,
   heading,
   type HeadingStyleProps,
   textOverflow,
@@ -59,17 +58,15 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
     <Element
       data-ui="Heading"
       {...rest}
-      className={_composeClassNames(
+      className={heading({
         className,
-        heading({
-          accent,
-          align,
-          flex,
-          muted,
-          size,
-          weight,
-        }),
-      )}
+        accent,
+        align,
+        flex,
+        muted,
+        size,
+        weight,
+      })}
     >
       <span
         className={textOverflow({
@@ -81,5 +78,3 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
     </Element>
   )
 }
-
-Heading.displayName = 'Heading'

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

@@ -1,4 +1,4 @@
-import type {FlexStyleProps, GridStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {ResponsiveProp} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
@@ -8,7 +8,25 @@ import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 export const DEFAULT_INLINE_ELEMENT = 'div'
 
 /** @public */
-export type InlineOwnProps = Omit<BoxOwnProps, keyof FlexStyleProps | keyof GridStyleProps> & {
+export type InlineOwnProps = Omit<
+  BoxOwnProps,
+  | 'alignItems'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'justifyContent'
+  | 'gridAutoColumns'
+  | 'gridAutoFlow'
+  | 'gridAutoRows'
+  | 'gridColumnEnd'
+  | 'gridColumnStart'
+  | 'gridColumn'
+  | 'gridRowEnd'
+  | 'gridRowStart'
+  | 'gridRow'
+  | 'gridTemplateColumns'
+  | 'gridTemplateRows'
+  // todo: omit deprecated flex and grid props
+> & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
@@ -39,15 +57,13 @@ export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEME
     <Box
       data-ui="Inline"
       {...rest}
-      align="center"
+      alignItems="center"
       as={as}
       display="flex"
       gap={gap ?? space}
-      wrap="wrap"
+      flexWrap="wrap"
     >
       {children}
     </Box>
   )
 }
-
-Inline.displayName = 'Inline'

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

@@ -1,4 +1,4 @@
-import {_composeClassNames, kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {ComponentType, Props} from '../../types'
@@ -42,7 +42,7 @@ export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props
       data-ui="KBD"
       {...rest}
       as={as as BoxElementType}
-      className={_composeClassNames(className, kbd({radius}))}
+      className={kbd({className, radius})}
       display={display}
       muted
       padding={padding}
@@ -53,5 +53,3 @@ export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props
     </Box>
   )
 }
-
-KBD.displayName = 'KBD'

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

@@ -1,5 +1,4 @@
 import {
-  _composeClassNames,
   label,
   type LabelStyleProps,
   textOverflow,
@@ -57,16 +56,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
     <Element
       data-ui="Label"
       {...rest}
-      className={_composeClassNames(
+      className={label({
         className,
-        label({
-          accent,
-          align,
-          muted,
-          size,
-          weight,
-        }),
-      )}
+        accent,
+        align,
+        muted,
+        size,
+        weight,
+      })}
     >
       <span
         className={textOverflow({
@@ -78,5 +75,3 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
     </Element>
   )
 }
-
-Label.displayName = 'Label'