@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,40 +1,48 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {checkbox, checkboxInput, checkboxPresentation} from '@sanity/ui/css'
+import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import {checkboxBaseStyles, inputElementStyles} from './styles'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface CheckboxProps {
+/** @public */
+export const DEFAULT_CHECKBOX_ELEMENT = 'input'
+
+/** @public */
+export type CheckboxOwnProps = {
   indeterminate?: boolean
   customValidity?: string
 }
 
-const StyledCheckbox = styled.div(checkboxBaseStyles)
-const Input = styled.input(inputElementStyles)
+/** @public */
+export type CheckboxElementType = 'input' | ComponentType
+
+/** @public */
+export type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
+  CheckboxOwnProps,
+  E
+>
 
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-export const Checkbox = forwardRef(function Checkbox(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
+export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
+  props: CheckboxProps<E>,
+): React.JSX.Element {
   const {
-    checked,
+    as: Element = DEFAULT_CHECKBOX_ELEMENT,
     className,
     disabled,
     indeterminate,
     customValidity,
     readOnly,
+    ref: forwardedRef,
     style,
-    ...restProps
-  } = props
+    ...rest
+  } = props as CheckboxProps<typeof DEFAULT_CHECKBOX_ELEMENT>
+
   const ref = useRef<HTMLInputElement | null>(null)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
@@ -52,22 +60,21 @@ export const Checkbox = forwardRef(function Checkbox(
   useCustomValidity(ref, customValidity)
 
   return (
-    <StyledCheckbox className={className} data-ui="Checkbox" style={style}>
-      <Input
+    <span className={checkbox({className})} data-ui="Checkbox" style={style}>
+      <Element
+        {...rest}
+        className={checkboxInput()}
+        data-invalid={customValidity ? '' : undefined}
         data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
-        {...restProps}
-        checked={checked}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}
         ref={ref}
       />
-      <span>
+      <span className={checkboxPresentation()}>
         <CheckmarkIcon />
         <RemoveIcon />
       </span>
-    </StyledCheckbox>
+    </span>
   )
-})
-Checkbox.displayName = 'ForwardRef(Checkbox)'
+}

package/src/core/primitives/code/__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/code',
   title: 'Code',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./opticalAlignment')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,48 +1,23 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
+import {CropIcon} from '@sanity/icons'
+import {Box, Code, Stack} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {FONT_CODE_SIZE} from '@sanity/ui/theme'
 
-export default function OpticalAlignment() {
+export default function OpticalAlignment(): React.JSX.Element {
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={4}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={3}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={2}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={1}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={0}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} scheme="dark">
-            <Code>
-              <AddCircleIcon />
+    <Stack gap={3} padding={[4, 5, 6]}>
+      {FONT_CODE_SIZE.map((size) => (
+        <Box display="flex" gap={2} key={size}>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Code size={size}>
+              <CropIcon />
             </Code>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
+          </div>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Code size={size}>Hamburgefonstiv M</Code>
+          </div>
+        </Box>
+      ))}
+    </Stack>
   )
 }

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

@@ -1,15 +1,12 @@
 import {Box, Code} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_CODE_LANGUAGE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
+import {WORKSHOP_CODE_LANGUAGE_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
-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, 1, 'Props')
+export default function PropsStory(): React.JSX.Element {
+  const code = useText('Code', `console.log('Hello, world')`)
+  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
 
   return (
     <Box padding={[4, 5, 6]}>

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

@@ -1,40 +1,48 @@
-import {forwardRef, lazy, Suspense} from 'react'
-import {styled} from 'styled-components'
+import {code, type CodeStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
+import {lazy, Suspense} from 'react'
 
-import {useArrayProp} from '../../hooks'
-import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {codeBaseStyle} from './styles'
+import type {ComponentType, Props} from '../../types'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 
-/**
- * @public
- */
-export interface CodeProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+/** @public */
+export const DEFAULT_CODE_ELEMENT = 'pre'
+
+/** @public */
+export type CodeOwnProps = CodeStyleProps & {
   /** Define the language to use for syntax highlighting. */
   language?: string
-  size?: number | number[]
-  weight?: string
+  size?: ResponsiveProp<FontCodeSize>
 }
 
-const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+/** @public */
+export type CodeElementType = 'div' | 'pre' | ComponentType
+
+/** @public */
+export type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
 
-/**
- * @public
- */
-export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {children, language, size = 2, weight, ...restProps} = props
+/** @public */
+export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
+  props: CodeProps<E>,
+): React.JSX.Element {
+  const {
+    as: Element = DEFAULT_CODE_ELEMENT,
+    children,
+    className,
+    language: languageProp,
+    size = 2,
+    weight = 'regular',
+    ...rest
+  } = props as CodeProps<typeof DEFAULT_CODE_ELEMENT>
+
+  const language = typeof languageProp === 'string' ? languageProp : undefined
 
   return (
-    <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>
-    </StyledCode>
+    </Element>
   )
-})
-Code.displayName = 'ForwardRef(Code)'
+}

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

@@ -4,10 +4,10 @@ export default function LazyRefractor(
   props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
     value: React.ReactNode
   },
-) {
+): React.JSX.Element {
   const {language: languageProp, value} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
-  const registered = language ? hasLanguage(language as any) : false
+  const registered = language ? hasLanguage(language) : false
 
   return (
     <>
@@ -16,5 +16,3 @@ export default function LazyRefractor(
     </>
   )
 }
-
-LazyRefractor.displayName = 'LazyRefractor'

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

@@ -1,10 +1,10 @@
 import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
-export default function PlainStory() {
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
+export default function PlainStory(): React.JSX.Element {
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/container/__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/container',
   title: 'Container',
   stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
-})
+}
+
+export default scope

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

@@ -1,41 +1,37 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {container, type ContainerStyleProps} from '@sanity/ui/css'
 
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
-import {ResponsiveWidthProps} from '../types'
-import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
-import {ResponsiveWidthStyleProps} from './types'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
-/**
- * @public
- */
-export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+/** @public */
+export const DEFAULT_CONTAINER_ELEMENT = 'div'
+
+/** @public */
+export type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
+
+/** @public */
+export type ContainerElementType = BoxElementType
 
-const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
-  containerBaseStyle,
-  responsiveContainerWidthStyle,
-)
+/** @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: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, width = 2, ...restProps} = props
+export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
+  props: ContainerProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_CONTAINER_ELEMENT,
+    className,
+    width = 2,
+    ...rest
+  } = props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>
 
-  return (
-    <StyledContainer
-      data-ui="Container"
-      {...restProps}
-      $width={useArrayProp(width)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})
-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;
@@ -13,8 +13,8 @@ const DebugCard = styled(Card)`
   justify-content: center;
 `
 
-export default function ExampleStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+export default function ExampleStory(): React.JSX.Element {
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
 
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>

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

@@ -1,22 +1,22 @@
 import {Card, Flex, Text} from '@sanity/ui'
 
-export default function GapStory() {
+export default function GapStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
-        <Card padding={3} scheme="dark">
+      <Flex align="center" gap={[1, 2, 3, 4]} justify="center" wrap="wrap">
+        <Card padding={3} shadow={1}>
           <Text size={0}>Card 0</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={1}>Card 1</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={2}>Card 2</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={3}>Card 3</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={4}>Card 4</Text>
         </Card>
       </Flex>

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

@@ -1,11 +1,13 @@
-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/flex',
   title: 'Flex',
   stories: [
     {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
     {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,54 +1,58 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import type {
+  AlignItems,
+  FlexDirection,
+  FlexWrap,
+  JustifyContent,
+  ResponsiveProp,
+} from '@sanity/ui/css'
 
-import {useArrayProp} from '../../hooks'
-import {
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveFlexStyle,
-  ResponsiveFlexStyleProps,
-} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
-import {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
-/**
- * @public
- */
-export interface FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
+/** @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>
 }
 
-const StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
-  flexItemStyle,
-  responsiveFlexStyle,
-)
+/** @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: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
+export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
+  props: FlexProps<E>,
+): React.JSX.Element {
+  const {
+    align,
+    as = DEFAULT_FLEX_ELEMENT,
+    direction = 'row',
+    justify,
+    wrap,
+    ...rest
+  } = props as FlexProps<typeof DEFAULT_FLEX_ELEMENT>
 
   return (
-    <StyledFlex
+    <Box
       data-ui="Flex"
-      {...restProps}
-      $align={useArrayProp(align)}
-      $direction={useArrayProp(direction)}
-      $gap={useArrayProp(gap)}
-      $justify={useArrayProp(justify)}
-      $wrap={useArrayProp(wrap)}
-      forwardedAs={as}
-      ref={ref}
+      {...rest}
+      alignItems={align}
+      as={as}
+      display="flex"
+      flexDirection={direction}
+      flexWrap={wrap}
+      justifyContent={justify}
     />
   )
-})
-Flex.displayName = 'ForwardRef(Flex)'
+}

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

@@ -1,10 +1,12 @@
-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/grid',
   title: 'Grid',
   stories: [
     {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,14 +1,14 @@
 import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
 
-export default function ResponsiveStory() {
+export default function ResponsiveStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width="auto">
         <Grid
           id="responsive-grid"
-          columns={[1, 2, 3, 4, 5, 6, 7]}
           gap={[0, 1, 2, 3, 4, 5, 6]}
-          rows={[1, 2, 3, 4, 5, 6, 7]}
+          gridTemplateColumns={[1, 2, 3, 4, 5, 6, 7]}
+          gridTemplateRows={[1, 2, 3, 4, 5, 6, 7]}
           style={{textAlign: 'center'}}
         >
           <Card padding={[1, 2, 3]} tone="neutral">