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

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

@@ -1,35 +1,37 @@
-import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {container, type ContainerStyleProps} from '@sanity/ui/css'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
+/** @public */
+export const DEFAULT_CONTAINER_ELEMENT = 'div'
+
+/** @public */
+export type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
+
+/** @public */
+export type ContainerElementType = BoxElementType
+
+/** @public */
+export type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
+  ContainerOwnProps,
+  E
+>
 
 /**
  * The `Container` component wraps content layout in a defined set of widths.
  *
  * @public
  */
-export const Container = forwardRef(function Container(
-  props: Props<ContainerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
+  props: ContainerProps<E>,
 ) {
-  const {as, className, sizing = 'border', width = 2, ...restProps} = props
-
-  return (
-    <Box
-      data-ui="Container"
-      {...restProps}
-      as={as}
-      className={composeClassNames(className, container({width}))}
-      ref={ref}
-      sizing={sizing}
-    />
-  )
-})
+  const {
+    as = DEFAULT_CONTAINER_ELEMENT,
+    className,
+    width = 2,
+    ...rest
+  } = props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>
 
-Container.displayName = 'ForwardRef(Container)'
+  return <Box data-ui="Container" {...rest} as={as} className={container({className, width})} />
+}

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

@@ -2,7 +2,7 @@ import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
 
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '$workshop'
 
 const DebugCard = styled(Card)`
   outline: 1px solid red;
@@ -14,7 +14,7 @@ const DebugCard = styled(Card)`
 `
 
 export default function ExampleStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
 
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>

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

@@ -1,29 +1,56 @@
-import {ForwardedRef, forwardRef} from 'react'
+import type {
+  AlignItems,
+  FlexDirection,
+  FlexWrap,
+  JustifyContent,
+  ResponsiveProp,
+} from '@sanity/ui/css'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
+/** @public */
+export const DEFAULT_FLEX_ELEMENT = 'div'
+
+/** @public */
+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
+
+/** @public */
+export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
+
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
-export const Flex = forwardRef(function Flex(
-  props: Props<FlexProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, direction = 'row', ...restProps} = props
+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" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
+    <Box
+      data-ui="Flex"
+      {...rest}
+      alignItems={align}
+      as={as}
+      display="flex"
+      flexDirection={direction}
+      flexWrap={wrap}
+      justifyContent={justify}
+    />
   )
-})
-
-Flex.displayName = 'ForwardRef(Flex)'
+}

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

@@ -1,30 +1,33 @@
-import {ForwardedRef, forwardRef} from 'react'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+/** @public */
+export const DEFAULT_GRID_ELEMENT = 'div'
 
-/**
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface GridProps extends Omit<BoxProps, 'display'> {}
+/** @public */
+export type GridOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export type GridElementType = BoxElementType
+
+/** @public */
+export type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
  *
  * @public
  */
-export const Grid = forwardRef(function Grid(
-  props: Props<GridProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, children, ...restProps} = props
+export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(props: GridProps<E>) {
+  const {
+    as = DEFAULT_GRID_ELEMENT,
+    children,
+    ...rest
+  } = props as GridProps<typeof DEFAULT_GRID_ELEMENT>
 
   return (
-    <Box data-ui="Grid" {...restProps} as={as} display="grid" ref={ref}>
+    <Box data-ui="Grid" {...rest} as={as} display="grid">
       {children}
     </Box>
   )
-})
-
-Grid.displayName = 'ForwardRef(Grid)'
+}

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

@@ -4,7 +4,7 @@ import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
 export default function OpticalAlignment() {
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
+      <Stack gap={1}>
         <Flex>
           <Card padding={0} tone="neutral">
             <Heading size={5}>Hamburgefonstiv M</Heading>
@@ -43,7 +43,7 @@ export default function OpticalAlignment() {
 
         <Flex>
           <Card padding={2} tone="neutral">
-            <Heading accent>
+            <Heading>
               <AddCircleIcon />
             </Heading>
           </Card>

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

@@ -5,26 +5,23 @@ import {
   WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
-  const textChild = useText('Text', 'Hello, world', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2)
+  const textChild = useText('Text', 'Hello, world')
+  const textOverflow = useSelect(
+    'Text overflow',
+    WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+    undefined,
+    'Props',
+  )
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading
-        accent={accent}
-        muted={muted}
-        size={size}
-        textOverflow={textOverflow}
-        weight={weight}
-      >
+      <Heading muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
         {textChild}
       </Heading>
     </Flex>

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

@@ -1,62 +1,80 @@
 import {
-  composeClassNames,
   heading,
   type HeadingStyleProps,
   textOverflow,
   type TextOverflowStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
+/** @public */
+export const DEFAULT_HEADING_ELEMENT = 'div'
+
+/** @public */
+export type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type HeadingElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
+  HeadingOwnProps,
+  E
+>
 
 /**
  * Typographic headings.
  *
  * @public
  */
-export const Heading = forwardRef(function Heading(
-  props: Props<HeadingProps, 'div'>,
-  ref: ForwardedRef<HTMLElement>,
+export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
+  props: HeadingProps<E>,
 ) {
   const {
     accent = false,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_HEADING_ELEMENT,
     children,
     className,
     flex,
     muted = false,
-    size = 1,
+    size = 2,
     textOverflow: textOverflowProp,
-    weight,
-    ...restProps
-  } = props
+    weight = 'regular',
+    ...rest
+  } = props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Heading"
-      {...restProps}
-      className={composeClassNames(
+      {...rest}
+      className={heading({
         className,
-        heading({
-          accent,
-          align,
-          flex,
-          muted,
-          size,
-          weight,
-        }),
-      )}
-      ref={ref}
+        accent,
+        align,
+        flex,
+        muted,
+        size,
+        weight,
+      })}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
-
-Heading.displayName = 'ForwardRef(Heading)'
+}

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

@@ -1,15 +1,12 @@
 import {Card, Flex, Inline, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Inline
-        onClick={useAction('onClick')}
-        space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
-      >
+      <Inline 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/inline.tsx

@@ -1,50 +1,69 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {Children, ForwardedRef, forwardRef, useMemo} from 'react'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+/** @public */
+export const DEFAULT_INLINE_ELEMENT = 'div'
+
+/** @public */
+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>
 }
 
+/** @public */
+export type InlineElementType = BoxElementType
+
+/** @public */
+export type InlineProps<E extends InlineElementType = InlineElementType> = Props<InlineOwnProps, E>
+
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
  *
  * @public
  */
-export const Inline = forwardRef(function Inline(
-  props: Props<InlineProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
+  props: InlineProps<E>,
 ) {
-  const {as, children: childrenProp, gap, gapX, gapY, space, ...restProps} = props
-
-  const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <Box maxWidth="fill">{child}</Box>),
-    [childrenProp],
-  )
+  const {
+    as = DEFAULT_INLINE_ELEMENT,
+    children,
+    gap,
+    space,
+    ...rest
+  } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
 
   return (
     <Box
       data-ui="Inline"
-      {...restProps}
-      align="center"
+      {...rest}
+      alignItems="center"
       as={as}
       display="flex"
       gap={gap ?? space}
-      gapX={gapX}
-      gapY={gapY}
-      ref={ref}
-      wrap="wrap"
+      flexWrap="wrap"
     >
       {children}
     </Box>
   )
-})
-
-Inline.displayName = 'ForwardRef(Inline)'
+}

package/src/core/primitives/inline/types.ts

@@ -1,5 +1,6 @@
 /**
  * @internal
+ * @deprecated Use `GapStyleProps` from `@sanity/ui/css` instead.
  */
 export interface ResponsiveInlineSpaceStyleProps {
   $space: number[]

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

@@ -1,55 +1,55 @@
-import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
+import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 import {Text} from '../text'
 
-/**
- * @public
- */
-export interface KBDProps extends BoxProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-}
+/** @public */
+export const DEFAULT_KBD_ELEMENT = 'kbd'
+
+/** @public */
+export type KBDOwnProps = BoxOwnProps &
+  RadiusStyleProps & {
+    fontSize?: ResponsiveProp<FontTextSize>
+  }
+
+/** @public */
+export type KBDElementType = 'kbd' | ComponentType
+
+/** @public */
+export type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
 
 /**
  * Used to define some text as keyboard input.
  *
  * @public
  */
-export const KBD = forwardRef(function KBD(
-  props: Props<KBDProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props: KBDProps<E>) {
   const {
-    as = 'kbd',
+    as = DEFAULT_KBD_ELEMENT,
     children,
     className,
     display = 'inline-block',
-    fontSize = 1,
+    fontSize = 0,
     padding = 1,
     radius = 2,
-    ...restProps
-  } = props
+    ...rest
+  } = props as KBDProps<typeof DEFAULT_KBD_ELEMENT>
 
   return (
     <Box
       data-ui="KBD"
-      {...restProps}
-      as={as}
-      className={composeClassNames(className, kbd({radius}))}
+      {...rest}
+      as={as as BoxElementType}
+      className={kbd({className, radius})}
       display={display}
       muted
       padding={padding}
-      ref={ref}
     >
-      <Text as="span" muted size={fontSize}>
+      <Text as="span" muted size={fontSize} weight="semibold">
         {children}
       </Text>
     </Box>
   )
-})
-
-KBD.displayName = 'ForwardRef(KBD)'
+}

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

@@ -6,29 +6,20 @@ import {
   WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
-  const textChild = useText('Text', 'Label text', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
+  const textChild = useText('Text', 'Label text')
+  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  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
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
+        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
           {textChild}
         </Label>
       </Container>