@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/primitives/avatar/styles.ts

@@ -77,7 +77,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 
     /* &:is(button) */
     '&[data-as="button"]': {
-      WebkitFontSmoothing: 'inherit',
+      '-webkit-font-smoothing': 'inherit',
       appearance: 'none',
       margin: 0,
       padding: 0,

package/src/primitives/badge/__workshop__/index.ts

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/badge', 'Badge', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-])
+export default defineScope({
+  name: 'primitives/badge',
+  title: 'Badge',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+  ],
+})

package/src/primitives/badge/__workshop__/tones.tsx

@@ -6,7 +6,7 @@ export default function Tones() {
   const mode = useSelect('Mode', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Inline space={2}>
         <Badge mode={mode}>Default</Badge>
         <Badge mode={mode} tone="primary">

package/src/primitives/badge/badge.tsx

@@ -1,6 +1,6 @@
-import {ForwardedRef, forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
@@ -19,8 +19,9 @@ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   tone?: BadgeTone
 }
 
-const Root = memo(
-  compose<ResponsiveRadiusStyleProps & BadgeStyleProps>(Box, [responsiveRadiusStyle, badgeStyle])
+const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  badgeStyle
 )
 
 /**
@@ -28,7 +29,7 @@ const Root = memo(
  */
 export const Badge = forwardRef(function Badge(
   props: BadgeProps & React.HTMLProps<HTMLDivElement>,
-  ref: ForwardedRef<HTMLDivElement>
+  ref
 ) {
   const {
     children,

package/src/primitives/box/__workshop__/index.ts

@@ -1,7 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/box', 'Box', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
-])
+export default defineScope({
+  name: 'primitives/box',
+  title: 'Box',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'responsive',
+      title: 'Responsive',
+      component: lazy(() => import('./responsive')),
+    },
+  ],
+})

package/src/primitives/box/box.tsx

@@ -1,30 +1,18 @@
-import {forwardRef, memo} from 'react'
-// import styled from 'styled-components'
+import {forwardRef} from 'react'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {
+  boxStyle,
+  flexItemStyle,
   FlexItemStyleProps,
+  responsiveBoxStyle,
   ResponsiveBoxStyleProps,
+  responsiveGridItemStyle,
   ResponsiveGridItemStyleProps,
-  ResponsiveMarginStyleProps,
+  responsivePaddingStyle,
   ResponsivePaddingStyleProps,
-  __tmp_flexItemStyle,
-  boxStyle,
-  // responsiveBoxStyle,
-  responsiveFlexItemStyle,
-  // responsiveGridItemStyle,
   responsiveMarginStyle,
-  responsivePaddingStyle,
-  responsiveBoxSizingStyle,
-  responsiveBoxHeightStyle,
-  responsiveBoxOverflowStyle,
-  responsiveBoxDisplayStyle,
-  responsiveGridItemRowStyle,
-  responsiveGridItemRowStartStyle,
-  responsiveGridItemRowEndStyle,
-  responsiveGridItemColumnStyle,
-  responsiveGridItemColumnStartStyle,
-  responsiveGridItemColumnEndStyle,
+  ResponsiveMarginStyleProps,
 } from '../../styles/internal'
 import {
   ResponsiveBoxProps,
@@ -46,35 +34,19 @@ export interface BoxProps
   as?: React.ElementType | keyof JSX.IntrinsicElements
 }
 
-const Root = memo(
-  compose<
-    FlexItemStyleProps &
-      ResponsiveBoxStyleProps &
-      ResponsiveGridItemStyleProps &
-      ResponsiveMarginStyleProps &
-      ResponsivePaddingStyleProps
-  >('div', [
-    // box
-    boxStyle,
-    responsiveBoxSizingStyle,
-    responsiveBoxHeightStyle,
-    responsiveBoxOverflowStyle,
-    responsiveBoxDisplayStyle,
-    // flexItem
-    __tmp_flexItemStyle,
-    responsiveFlexItemStyle,
-    // gridItem
-    responsiveGridItemRowStyle,
-    responsiveGridItemRowStartStyle,
-    responsiveGridItemRowEndStyle,
-    responsiveGridItemColumnStyle,
-    responsiveGridItemColumnStartStyle,
-    responsiveGridItemColumnEndStyle,
-    // margin
-    responsiveMarginStyle,
-    // padding
-    responsivePaddingStyle,
-  ])
+const Root = styled.div<
+  FlexItemStyleProps &
+    ResponsiveBoxStyleProps &
+    ResponsiveGridItemStyleProps &
+    ResponsiveMarginStyleProps &
+    ResponsivePaddingStyleProps
+>(
+  boxStyle,
+  flexItemStyle,
+  responsiveBoxStyle,
+  responsiveGridItemStyle,
+  responsiveMarginStyle,
+  responsivePaddingStyle
 )
 
 /**

package/src/primitives/button/__workshop__/index.ts

@@ -1,50 +1,54 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/button', 'Button', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-  {
-    name: 'styled-1',
-    title: 'Styled #1',
-    component: lazy(() => import('./styled1')),
-  },
-  {
-    name: 'styled-2',
-    title: 'Styled #2',
-    component: lazy(() => import('./styled2')),
-  },
-  {
-    name: 'stacked',
-    title: 'Stacked',
-    component: lazy(() => import('./stacked')),
-  },
-  {
-    name: 'custom',
-    title: 'Custom',
-    component: lazy(() => import('./custom')),
-  },
-  {
-    name: 'mixed-children',
-    title: 'Mixed children',
-    component: lazy(() => import('./mixedChildren')),
-  },
-  {
-    name: 'upload-button',
-    title: 'Upload button',
-    component: lazy(() => import('./uploadButton')),
-  },
-  {
-    name: 'sanity-upload-button-workaround',
-    title: 'SanityUploadButtonWorkaroundStory',
-    component: lazy(() => import('./sanityUploadButton')),
-  },
-  {
-    name: 'custom-icons',
-    title: 'Custom icons',
-    component: lazy(() => import('./customIcons')),
-  },
-])
+export default defineScope({
+  name: 'primitives/button',
+  title: 'Button',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'styled-1',
+      title: 'Styled #1',
+      component: lazy(() => import('./styled1')),
+    },
+    {
+      name: 'styled-2',
+      title: 'Styled #2',
+      component: lazy(() => import('./styled2')),
+    },
+    {
+      name: 'stacked',
+      title: 'Stacked',
+      component: lazy(() => import('./stacked')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./custom')),
+    },
+    {
+      name: 'mixed-children',
+      title: 'Mixed children',
+      component: lazy(() => import('./mixedChildren')),
+    },
+    {
+      name: 'upload-button',
+      title: 'Upload button',
+      component: lazy(() => import('./uploadButton')),
+    },
+    {
+      name: 'sanity-upload-button-workaround',
+      title: 'SanityUploadButtonWorkaroundStory',
+      component: lazy(() => import('./sanityUploadButton')),
+    },
+    {
+      name: 'custom-icons',
+      title: 'Custom icons',
+      component: lazy(() => import('./customIcons')),
+    },
+  ],
+})

package/src/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -2,27 +2,26 @@ import {UploadIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
 import styled from 'styled-components'
 
-const SanityUploadButton = styled(Button)['attrs']({forwardedAs: 'label'})({
-  '& input': {
-    appearance: 'none',
-    overflow: 'hidden',
-    top: 0,
-    left: 0,
-    height: '100%',
-    opacity: 0,
-    position: 'absolute',
-    maxWidth: 0,
+const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
+  & input {
+    -webkit-appearance: none;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    max-width: 0;
+    width: stretch;
+  }
 
-    // width: '100%',
-    width: 'stretch',
-  },
-
-  '& span:nth-child(2)': {
-    width: 0,
-    flex: 'none',
-    padding: 0,
-  },
-})
+  & span:nth-child(2) {
+    width: 0;
+    flex: none;
+    padding: 0;
+  }
+`
 
 export default function SanityUploadButtonWorkaroundStory() {
   return (

package/src/primitives/button/__workshop__/styled1.tsx

@@ -1,12 +1,12 @@
 import {Button, Flex} from '@sanity/ui'
 import styled from 'styled-components'
 
-const StyledButton1 = styled.a({
-  '&:hover': {
-    backgroundColor: 'red',
-    boxShadow: 'none',
-  },
-})
+const StyledButton1 = styled.a`
+  &:hover {
+    background-color: red;
+    box-shadow: none;
+  }
+`
 
 export default function StyledButton1Story() {
   return (

package/src/primitives/button/button.tsx

@@ -1,7 +1,8 @@
-import {createElement, forwardRef, isValidElement, memo, useMemo} from 'react'
+import {createElement, forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose, ThemeProps} from '../../styles'
+import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
@@ -34,31 +35,24 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   type?: 'button' | 'reset' | 'submit'
 }
 
-const Root = memo(
-  compose<{$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps>(
-    'button',
-    [responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles]
-  )
-)
+const Root = styled.button<
+  {$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps
+>(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
 
-const LoadingBox = memo(
-  compose('div', [
-    {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: 'var(--card-bg-color)',
-      borderRadius: 'inherit',
-      zIndex: 1,
-      boxShadow: 'inherit',
-    },
-  ])
-)
+const LoadingBox = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--card-bg-color);
+  border-radius: inherit;
+  z-index: 1;
+  box-shadow: inherit;
+`
 
 /**
  * @public

package/src/primitives/button/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
@@ -7,36 +7,37 @@ import {ButtonMode, ButtonTone} from '../../types'
 /**
  * @internal
  */
-export function buttonBaseStyles(): CSSObject {
-  return {
-    WebkitFontSmoothing: 'inherit',
-    appearance: 'none',
-    display: 'inline-flex',
-    alignItems: 'center',
-    font: 'inherit',
-    border: 0,
-    outline: 'none',
-    userSelect: 'none',
-    textDecoration: 'none',
-    boxSizing: 'border-box',
-    padding: 0,
-    margin: 0,
-    whiteSpace: 'nowrap',
-    textAlign: 'left',
-    position: 'relative',
+export function buttonBaseStyles(): FlattenSimpleInterpolation {
+  return css`
+    -webkit-font-smoothing: inherit;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    border: 0;
+    outline: none;
+    user-select: none;
+    text-decoration: none;
+    border: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
 
-    '& > span': {
-      display: 'block',
-      flex: 1,
-      minWidth: 0,
-      borderRadius: 'inherit',
-    },
+    & > span {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      border-radius: inherit;
+    }
 
-    '&::-moz-focus-inner': {
-      border: 0,
-      padding: 0,
-    },
-  }
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  `
 }
 
 const buttonTheme = {border: {width: 1}}

package/src/primitives/card/__workshop__/index.ts

@@ -1,14 +1,18 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/card', 'Card', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-  {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-  {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
-  {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-  {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-  {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-  {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-  {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
-])
+export default defineScope({
+  name: 'primitives/card',
+  title: 'Card',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
+    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
+    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
+    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
+    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
+    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
+    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+  ],
+})

package/src/primitives/card/card.tsx

@@ -1,14 +1,10 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {
-  responsiveBorderBottomStyle,
-  responsiveBorderLeftStyle,
-  responsiveBorderRightStyle,
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
-  responsiveBorderTopStyle,
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
   responsiveShadowStyle,
@@ -18,7 +14,7 @@ import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {cardBaseStyle, cardColorStyle} from './styles'
+import {cardStyle} from './styles'
 import {CardStyleProps} from './types'
 
 /**
@@ -44,24 +40,12 @@ export interface CardProps
   tone?: CardTone
 }
 
-const Root = memo(
-  compose<
-    CardStyleProps &
-      ResponsiveRadiusStyleProps &
-      ResponsiveBorderStyleProps &
-      ResponsiveShadowStyleProps
-  >(Box, [
-    responsiveBorderStyle,
-    responsiveBorderTopStyle,
-    responsiveBorderRightStyle,
-    responsiveBorderBottomStyle,
-    responsiveBorderLeftStyle,
-    responsiveRadiusStyle,
-    responsiveShadowStyle,
-    cardBaseStyle,
-    cardColorStyle,
-  ])
-)
+const Root = styled(Box)<
+  CardStyleProps &
+    ResponsiveRadiusStyleProps &
+    ResponsiveBorderStyleProps &
+    ResponsiveShadowStyleProps
+>(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
 /**
  * @public