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

package/src/core/primitives/badge/badge.tsx

@@ -1,64 +1,58 @@
-import {badge, composeClassNames, RadiusStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import type {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {badge} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {BadgeMode, BadgeTone, Props} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Text, TextProps} from '../text'
+import type {BadgeTone, ComponentType, Props} from '../../types'
+import {Box} from '../box'
+import {Text} from '../text'
 
-/**
- * @public
- */
-export interface BadgeProps extends BoxProps, RadiusStyleProps {
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  textAlign?: TextProps['align']
-  tone?: BadgeTone
-}
+/** @public */
+export const DEFAULT_BADGE_ELEMENT = 'span'
+
+/** @public */
+export type BadgeOwnProps = PaddingStyleProps &
+  RadiusStyleProps & {
+    fontSize?: ResponsiveProp<FontTextSize>
+    tone?: BadgeTone
+  }
+
+/** @public */
+export type BadgeElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>
 
 /**
  * Badges are used to tag resources.
  *
  * @public
  */
-export const Badge = forwardRef(function Badge(
-  props: Props<BadgeProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
+  props: BadgeProps<E>,
 ) {
   const {
+    as = DEFAULT_BADGE_ELEMENT,
     children,
     className,
-    display = 'inline-block',
     fontSize = 1,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    mode: _deprecated_mode,
     padding = 1,
     radius = 2,
-    textAlign,
     tone = 'default',
-    ...restProps
-  } = props
+    ...rest
+  } = props as BadgeProps<typeof DEFAULT_BADGE_ELEMENT>
 
   return (
     <Box
       data-ui="Badge"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        badge({
-          radius,
-          tone,
-        }),
-      )}
-      display={display}
+      {...rest}
+      as={as}
+      className={badge({className, tone})}
+      display="inline-flex"
+      maxWidth="fill"
       padding={padding}
-      ref={ref}
+      radius={radius}
     >
-      <Text align={textAlign} size={fontSize}>
-        {children}
-      </Text>
+      <Text size={fontSize}>{children}</Text>
     </Box>
   )
-})
-
-Badge.displayName = 'ForwardRef(Badge)'
+}

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

@@ -1,7 +1,8 @@
-import {BadgeTone} from '../../types'
+import type {BadgeTone} from '../../types'
 
 /**
  * @internal
+ * @deprecated
  */
 export interface BadgeStyleProps {
   $tone: BadgeTone

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

@@ -1,10 +1,10 @@
 import {Box, Card, 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 PropsStory() {
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
 
   return (
     <Box padding={[4, 5, 6]}>

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

@@ -1,4 +1,5 @@
 import {Box, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 
 export default function ResponsiveStory() {
   return (
@@ -9,7 +10,7 @@ export default function ResponsiveStory() {
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
         sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: '1px solid var(--card-border-color)'}}
+        style={{outline: `1px solid ${vars.color.border}`}}
       >
         <Text align="center" muted>
           This is a box with responsive props

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

@@ -1,23 +1,53 @@
-import {
-  box,
+import type {
   BoxStyleProps,
-  composeClassNames,
   GapStyleProps,
   InsetStyleProps,
   PositionStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {box} from '@sanity/ui/css'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @public */
+export type BoxOwnProps = BoxStyleProps & GapStyleProps & InsetStyleProps & PositionStyleProps
+
+/** @public */
+export type BoxElementType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'body'
+  | 'button'
+  | 'details'
+  | 'div'
+  | 'header'
+  | 'fieldset'
+  | 'figure'
+  | 'figcaption'
+  | 'footer'
+  | 'form'
+  | 'html'
+  | 'iframe'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'summary'
+  | 'ul'
+  | ComponentType
+
+/** @public */
+export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
 
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
@@ -25,36 +55,49 @@ export interface BoxProps
  *
  * @public
  */
-export const Box = forwardRef(function Box(
-  props: Props<BoxProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>) {
   const {
-    align,
-    as: As = 'div',
-    border,
+    alignItems,
+    as: Element = DEFAULT_BOX_ELEMENT,
+    autoCols,
+    autoFlow,
+    autoRows,
+    border = false,
     borderTop,
     borderRight,
     borderBottom,
     borderLeft,
     className,
+    children,
     column,
     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,
@@ -63,7 +106,13 @@ export const Box = forwardRef(function Box(
     marginBottom,
     marginLeft,
     maxWidth,
+    minHeight = 0,
+    minWidth = 0,
+    muted,
+    outline,
     overflow,
+    overflowX,
+    overflowY,
     padding = 0,
     paddingX,
     paddingY,
@@ -73,82 +122,98 @@ export const Box = forwardRef(function Box(
     paddingLeft,
     pointerEvents,
     position,
-    muted,
     radius,
     row,
     rows,
     rowStart,
     rowEnd,
+    shadow,
     sizing = 'border',
+    textAlign,
     width,
-    wrap,
-    ...restProps
-  } = props
+    ...rest
+  } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Box"
-      {...restProps}
-      className={composeClassNames(
+      {...rest}
+      className={box({
         className,
-        box({
-          align,
-          border,
-          borderTop,
-          borderRight,
-          borderBottom,
-          borderLeft,
-          column,
-          columnStart,
-          columnEnd,
-          columns,
-          direction,
-          display,
-          flex,
-          gap,
-          gapX,
-          gapY,
-          height,
-          inset,
-          insetBottom,
-          insetLeft,
-          insetRight,
-          insetTop,
-          justify,
-          overflow,
-          margin,
-          marginX,
-          marginY,
-          marginTop,
-          marginRight,
-          marginBottom,
-          marginLeft,
-          maxWidth,
-          muted,
-          padding,
-          paddingX,
-          paddingY,
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft,
-          pointerEvents,
-          position,
-          radius,
-          row,
-          rows,
-          rowStart,
-          rowEnd,
-          sizing,
-          width,
-          wrap,
-        }),
-      )}
-      ref={ref}
+        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,
+      })}
     >
-      {props.children}
-    </As>
+      {children}
+    </Element>
   )
-})
-
-Box.displayName = 'ForwardRef(Box)'
+}

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

@@ -1,49 +1,26 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
 export default function CustomStory() {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack space={2}>
-        <Grid columns={7} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="ghost" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
-        <Grid columns={7} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="default" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
+      <Stack gap={2}>
+        {THEME_COLOR_BUTTON_MODES.map((mode) => (
+          <Grid columns={7} gap={1} key={mode}>
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <Button key={tone} mode={mode} padding={3} tone={tone}>
+                <Stack gap={2}>
+                  <Text>Text</Text>
+                  <Text muted>Muted</Text>
+                  <Text>
+                    <code>Code</code>
+                  </Text>
+                  <Hotkeys keys={['Cmd', 'C']} />
+                </Stack>
+              </Button>
+            ))}
+          </Grid>
+        ))}
       </Stack>
     </Flex>
   )

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

@@ -4,9 +4,9 @@ import {Button, Flex, Inline} from '@sanity/ui'
 export default function CustomIconsStory() {
   return (
     <Flex align="center" height="fill" justify="center">
-      <Inline space={1}>
-        <Button fontSize={1} icon={RocketIcon} padding={2} space={2} text="Rocket" />
-        <Button fontSize={1} icon={CustomIcon} padding={2} space={2} text="Heart" />
+      <Inline gap={1}>
+        <Button fontSize={1} gap={2} icon={RocketIcon} padding={2} text="Rocket" />
+        <Button fontSize={1} gap={2} icon={CustomIcon} padding={2} text="Heart" />
       </Inline>
     </Flex>
   )

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

@@ -5,20 +5,20 @@ import {Container} from '../../container/container'
 import {Grid} from '../../grid/grid'
 import {Stack} from '../../stack/stack'
 import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
+import {Button} from '../button'
 
 const GAP = 4
 const COLUMNS = 3
 
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS = {
   icon: SquareIcon,
   iconRight: SquareIcon,
-}
+} as const
 
 function Layout() {
   return (
     <Container width={2}>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Grid columns={COLUMNS} gap={GAP}>
           <Text size={1} weight="semibold">
             Default
@@ -31,21 +31,21 @@ function Layout() {
           </Text>
         </Grid>
 
-        <Stack space={2}>
+        <Stack gap={2}>
           <Grid columns={COLUMNS} gap={GAP}>
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
               <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
             </Stack>
 
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
               <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
             </Stack>
 
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
               <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
@@ -60,7 +60,7 @@ function Layout() {
 export default function DisabledButtonStory() {
   return (
     <Stack>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Card padding={5} scheme="light">
           <Layout />
         </Card>

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

@@ -1,6 +1,5 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
@@ -10,34 +9,33 @@ import {
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function ButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const loading = useBoolean('Loading', false, 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
-  const textAlign =
-    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
-  const textProp = useText('Text', 'Label', 'Props')
-  const textWeight =
-    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const disabled = useBoolean('Disabled')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
+  const loading = useBoolean('Loading')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
+  const selected = useBoolean('Selected')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
+  const textProp = useText('Text', 'Label')
+  const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">
       <Button
         disabled={disabled}
-        fontSize={fontSize as FontTextSize}
+        fontSize={fontSize}
+        gap={gap}
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}
@@ -47,7 +45,6 @@ export default function ButtonStory() {
         paddingX={paddingX}
         paddingY={paddingY}
         selected={selected}
-        space={space}
         textAlign={textAlign}
         text={textProp}
         textWeight={textWeight}