@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,48 +1,35 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
-import {useArrayProp} from '../../hooks'
-import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
-import {ResponsiveGridProps} from '../types'
+/** @public */
+export const DEFAULT_GRID_ELEMENT = 'div'
 
-/**
- * @public
- */
-export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+/** @public */
+export type GridOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export type GridElementType = BoxElementType
 
-const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+/** @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: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
-    props
+export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
+  props: GridProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_GRID_ELEMENT,
+    children,
+    ...rest
+  } = props as GridProps<typeof DEFAULT_GRID_ELEMENT>
 
   return (
-    <StyledGrid
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Grid"
-      {...restProps}
-      $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}
-    >
+    <Box data-ui="Grid" {...rest} as={as} display="grid">
       {children}
-    </StyledGrid>
+    </Box>
   )
-})
-Grid.displayName = 'ForwardRef(Grid)'
+}

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/heading',
   title: 'Heading',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./opticalAlignment')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,10 +1,10 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
 
-export default function OpticalAlignment() {
+export default function OpticalAlignment(): React.JSX.Element {
   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
+export default function PlainStory(): React.JSX.Element {
+  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,80 +1,78 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useArrayProp} from '../../hooks'
 import {
-  ResponsiveFontStyleProps,
-  responsiveHeadingFont,
-  responsiveTextAlignStyle,
-  ResponsiveTextAlignStyleProps,
-} from '../../styles/internal'
-import {TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {headingBaseStyle} from './styles'
-import {HeadingStyleProps} from './types'
+  heading,
+  type HeadingStyleProps,
+  textOverflow,
+  type TextOverflowStyleProps,
+} from '@sanity/ui/css'
 
-/**
- * @public
- */
-export interface HeadingProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
-}
+import type {ComponentType, Props} from '../../types'
+
+/** @public */
+export const DEFAULT_HEADING_ELEMENT = 'div'
 
-const StyledHeading = styled.div<
-  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
->(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
+/** @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: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
+export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
+  props: HeadingProps<E>,
+): React.JSX.Element {
   const {
-    accent = false,
     align,
-    children: childrenProp,
+    as: Element = DEFAULT_HEADING_ELEMENT,
+    children,
+    className,
+    flex,
     muted = false,
     size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
+    textOverflow: textOverflowProp,
+    weight = 'regular',
+    ...rest
+  } = props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>
 
   return (
-    <StyledHeading
+    <Element
       data-ui="Heading"
-      {...restProps}
-      $accent={accent}
-      $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
-      $weight={weight}
-      ref={ref}
+      {...rest}
+      className={heading({
+        className,
+        align,
+        flex,
+        muted,
+        size,
+        weight,
+      })}
     >
-      <span>{children}</span>
-    </StyledHeading>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
-Heading.displayName = 'ForwardRef(Heading)'
+}

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

@@ -1,8 +1,10 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/inline',
   title: 'Inline',
   stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-})
+}
+
+export default scope

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() {
+export default function PlainStory(): React.JSX.Element {
   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,47 +1,62 @@
-import {Children, forwardRef, useMemo} from 'react'
-import {styled} from 'styled-components'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
-import {inlineBaseStyle, inlineSpaceStyle} from './styles'
-import {ResponsiveInlineSpaceStyleProps} from './types'
+/** @public */
+export const DEFAULT_INLINE_ELEMENT = 'div'
 
-/**
- * @public
- */
-export interface InlineProps extends Omit<BoxProps, 'display'> {
-  /** The spacing between children. */
-  space?: number | number[]
-}
+/** @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
+>
 
-const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+/** @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: InlineProps & React.HTMLProps<HTMLDivElement>,
-  ref,
-) {
-  const {as, children: childrenProp, space, ...restProps} = props
-
-  const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
-    [childrenProp],
-  )
+export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
+  props: InlineProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_INLINE_ELEMENT,
+    children,
+    gap,
+    ...rest
+  } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
 
   return (
-    <StyledInline
+    <Box
       data-ui="Inline"
-      {...restProps}
-      $space={useArrayProp(space)}
-      forwardedAs={as}
-      ref={ref as any}
+      {...rest}
+      alignItems="center"
+      as={as}
+      display="flex"
+      gap={gap}
+      flexWrap="wrap"
     >
       {children}
-    </StyledInline>
+    </Box>
   )
-})
-Inline.displayName = 'ForwardRef(Inline)'
+}

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

@@ -1,8 +1,10 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/kbd',
   title: 'KBD',
   stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-})
+}
+
+export default scope

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

@@ -1,6 +1,6 @@
 import {Flex, KBD} from '@sanity/ui'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>

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

@@ -1,61 +1,57 @@
-import {forwardRef} from 'react'
-import {css, styled} from 'styled-components'
+import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {useArrayProp} from '../../hooks'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {Text} from '../text/text'
 
-/**
- * @public
- */
-export interface KBDProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-}
+/** @public */
+export const DEFAULT_KBD_ELEMENT = 'kbd'
 
-function kbdStyle() {
-  return css`
-    --card-bg-color: var(--card-kbd-bg-color);
-    --card-border-color: var(--card-kbd-border-color);
-    --card-fg-color: var(--card-kbd-fg-color);
+/** @public */
+export type KBDOwnProps = BoxOwnProps &
+  RadiusStyleProps & {
+    fontSize?: ResponsiveProp<FontTextSize>
+  }
 
-    box-shadow: inset 0 0 0 1px var(--card-border-color);
-    background: var(--card-bg-color);
-    font: inherit;
+/** @public */
+export type KBDElementType = 'kbd' | ComponentType
 
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
+/** @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: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
+export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
+  props: KBDProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_KBD_ELEMENT,
+    children,
+    className,
+    display = 'inline-block',
+    fontSize = 1,
+    padding = 1,
+    radius = 2,
+    ...rest
+  } = props as KBDProps<typeof DEFAULT_KBD_ELEMENT>
 
   return (
-    <StyledKBD data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
-      <Box as="span" padding={padding}>
-        <Text as="span" size={fontSize} weight="semibold">
-          {children}
-        </Text>
-      </Box>
-    </StyledKBD>
+    <Box
+      data-ui="KBD"
+      {...rest}
+      as={as as BoxElementType}
+      className={kbd({className, radius})}
+      display={display}
+      muted
+      padding={padding}
+    >
+      <Text as="span" muted size={fontSize} weight="medium">
+        {children}
+      </Text>
+    </Box>
   )
-})
-KBD.displayName = 'ForwardRef(KBD)'
+}

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/label',
   title: 'Label',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./opticalAlignment')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,42 +1,48 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
 
-export default function OpticalAlignment() {
+export default function OpticalAlignment(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
+      <Stack gap={1}>
         <Flex>
-          <Card padding={0} tone="suggest">
+          <Card padding={0} shadow={1} tone="suggest">
+            <Label size={5}>Hamburgefonstiv M</Label>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={4}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} tone="suggest">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={3}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} tone="suggest">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={2}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} tone="suggest">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={1}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} tone="suggest">
+          <Card padding={0} shadow={1} tone="suggest">
             <Label size={0}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} tone="suggest">
+          <Card padding={2} shadow={1} tone="suggest">
             <Label>
               <AddCircleIcon />
             </Label>