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

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

@@ -1,30 +1,35 @@
-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)'
+Grid.displayName = '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,47 +1,65 @@
 import {
-  composeClassNames,
+  _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={_composeClassNames(
         className,
         heading({
           accent,
@@ -52,11 +70,16 @@ export const Heading = forwardRef(function Heading(
           weight,
         }),
       )}
-      ref={ref}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
+}
 
-Heading.displayName = 'ForwardRef(Heading)'
+Heading.displayName = '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,53 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {Children, ForwardedRef, forwardRef, useMemo} from 'react'
+import type {FlexStyleProps, GridStyleProps, 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, keyof FlexStyleProps | keyof GridStyleProps> & {
   /** @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}
+      {...rest}
       align="center"
       as={as}
       display="flex"
       gap={gap ?? space}
-      gapX={gapX}
-      gapY={gapY}
-      ref={ref}
       wrap="wrap"
     >
       {children}
     </Box>
   )
-})
+}
 
-Inline.displayName = 'ForwardRef(Inline)'
+Inline.displayName = '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,57 @@
-import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
+import {_composeClassNames, 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={_composeClassNames(className, kbd({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)'
+KBD.displayName = '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>

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

@@ -1,53 +1,63 @@
 import {
-  composeClassNames,
-  FontStyleProps,
+  _composeClassNames,
   label,
-  LabelSize,
-  ResponsiveProp,
+  type LabelStyleProps,
   textOverflow,
-  TextOverflowStyleProps,
+  type TextOverflowStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
-  accent?: boolean
-  htmlFor?: string
-  muted?: boolean
-  size?: ResponsiveProp<LabelSize>
-}
+/** @public */
+export const DEFAULT_LABEL_ELEMENT = 'div'
+
+/** @public */
+export type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type LabelElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>
 
 /**
  * Typographic labels.
  *
  * @public
  */
-export const Label = forwardRef(function Label(
-  props: Props<LabelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
+  props: LabelProps<E>,
 ) {
   const {
     accent,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_LABEL_ELEMENT,
     children,
     className,
     muted = false,
     size = 1,
     textOverflow: textOverflowProp,
-    weight = 'medium',
-    ...restProps
+    weight = 'regular',
+    ...rest
   } = props
 
   return (
-    <As
+    <Element
       data-ui="Label"
-      {...restProps}
-      className={composeClassNames(
+      {...rest}
+      className={_composeClassNames(
         className,
         label({
           accent,
@@ -57,11 +67,16 @@ export const Label = forwardRef(function Label(
           weight,
         }),
       )}
-      ref={ref}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
+}
 
-Label.displayName = 'ForwardRef(Label)'
+Label.displayName = 'Label'

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -4,20 +4,20 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
 import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_WIDTH_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function AlignedStory() {
   const constrainSize = useBoolean('Constrain size', false)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
-  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
-  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
+  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -1,11 +1,11 @@
 import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function MatchReferenceWidthStory() {
-  const arrow = useBoolean('Arrow', true, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+  const arrow = useBoolean('Arrow', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3} tone="default">
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -1,4 +1,4 @@
-import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
+import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
@@ -7,7 +7,7 @@ import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
   const arrow = useBoolean('Arrow', true)
@@ -57,7 +57,7 @@ export default function PlainStory() {
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
-              radius={radius as Radius}
+              radius={radius}
               width={width}
             >
               <Button text="This button is the popover reference" />

package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx

@@ -1,5 +1,5 @@
-import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@sanity/ui'
-import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {Button, Flex, LayerProvider, type Placement, Popover, useLayer} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {
@@ -13,7 +13,6 @@ export default function RecursiveStory() {
 }
 
 const placements: Placement[] = ['top', 'right', 'bottom', 'left']
-const tones: ThemeColorToneKey[] = ['primary', 'positive', 'caution', 'critical']
 
 function RecursiveExample({onClose}: {onClose?: () => void}) {
   const [open, setOpen] = useState(false)
@@ -56,7 +55,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       padding={1}
       placement={fallbackPlacements[3]}
       portal
-      tone={tones[seed]}
+      tone={THEME_COLOR_CARD_TONES[seed]}
     >
       <Button
         mode="bleed"