@sanity/ui 4.0.0-static.4 → 4.0.0-static.40

package/src/core/primitives/select/{select.tsx → Select.tsx}

@@ -4,8 +4,8 @@ import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks/useCustomValidity'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Text} from '../text/text'
+import {Box} from '../box/Box'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_SELECT_ELEMENT = 'select'
@@ -36,12 +36,14 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
     children,
     customValidity,
     disabled,
+    flex,
     fontSize = 2,
     gap = 2,
     padding = 3,
     radius = 1,
     readOnly,
     ref: forwardedRef,
+    width = 'fill',
     ...rest
   } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
 
@@ -55,9 +57,9 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
   useCustomValidity(ref, customValidity)
 
   return (
-    <div
+    <span
       data-ui="Select"
-      className={select({border, fontSize, gap, padding, radius})}
+      className={select({border, fontSize, flex, gap, padding, radius, width})}
       data-icon-right=""
     >
       <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
@@ -70,6 +72,6 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
           </Text>
         </Box>
       </span>
-    </div>
+    </span>
   )
 }

package/src/core/primitives/select/__workshop__/{plain.tsx → Plain.tsx}

@@ -6,7 +6,9 @@ import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$worksho
 export default function PlainStory(): React.JSX.Element {
   const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS)
   const readOnly = useBoolean('Read only', false)
 
@@ -21,8 +23,10 @@ export default function PlainStory(): React.JSX.Element {
           <Select
             border={border}
             disabled={disabled}
+            // @ts-expect-error - TODO: fix this
             fontSize={fontSize}
             id="select-example"
+            // @ts-expect-error - TODO: fix this
             radius={radius}
             readOnly={readOnly}
           >

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/select',
   title: 'Select',
   stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
   ],
 }
 

package/src/core/primitives/selectable/{selectable.tsx → Selectable.tsx}

@@ -2,7 +2,7 @@ import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
 import type {ElementTone} from '@sanity/ui/theme'
 
 import type {ComponentType, Props} from '../../types'
-import {Box, type BoxOwnProps} from '../box/box'
+import {Box, type BoxOwnProps} from '../box/Box'
 
 /** @internal */
 export const DEFAULT_SELECTABLE_ELEMENT = 'button'
@@ -44,7 +44,7 @@ export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELE
       {...rest}
       as={as}
       className={_selectable({className, radius, tone})}
-      data-selected={selected ? '' : undefined}
+      data-selected={selected ? '' : props['data-selected']}
     />
   )
 }

package/src/core/primitives/selectable/__workshop__/DataProps.tsx

@@ -0,0 +1,27 @@
+import {Selectable, Stack, Text} from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default') as ElementTone | undefined
+
+  return (
+    <Stack gap={4} padding={4}>
+      <Selectable data-enabled="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+      <Selectable data-hovered="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+      <Selectable data-pressed="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+      <Selectable data-selected="" padding={3} tone={tone}>
+        <Text>Selectable</Text>
+      </Selectable>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/selectable',
+  title: 'Selectable',
+  stories: [
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
+    },
+  ],
+})

package/src/core/primitives/skeleton/{codeSkeleton.tsx → CodeSkeleton.tsx}

@@ -2,7 +2,7 @@ import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
 
 /** @beta */
 export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'

package/src/core/primitives/skeleton/{headingSkeleton.tsx → HeadingSkeleton.tsx}

@@ -2,7 +2,7 @@ import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontHeadingSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
 
 /** @beta */
 export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'

package/src/core/primitives/skeleton/{labelSkeleton.tsx → LabelSkeleton.tsx}

@@ -2,7 +2,7 @@ import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontLabelSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
 
 /** @beta */
 export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'

package/src/core/primitives/skeleton/{skeleton.tsx → Skeleton.tsx}

@@ -43,7 +43,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
 
   useEffect(() => {
     if (!delay) {
-      return setVisible(true)
+      return undefined
     }
 
     const timeout = setTimeout(() => {
@@ -64,7 +64,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
         ...rest,
       })}
       data-animated={animated ? '' : undefined}
-      data-visible={visible ? '' : undefined}
+      data-visible={(delay ? visible : true) ? '' : undefined}
     />
   )
 }

package/src/core/primitives/skeleton/{textSkeleton.tsx → TextSkeleton.tsx}

@@ -2,7 +2,7 @@ import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
 
 /** @beta */
 export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'

package/src/core/primitives/skeleton/__workshop__/{delay.tsx → Delay.tsx}

@@ -16,6 +16,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function SkeletonDelayStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
@@ -23,7 +24,14 @@ export default function SkeletonDelayStory(): React.JSX.Element {
     <Box padding={[4, 5, 6]}>
       <Container width={1}>
         <Text muted>Delayed by 2000ms</Text>
-        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
+        <Card
+          // @ts-expect-error - TODO: fix this
+          tone={tone}
+          marginTop={4}
+          padding={2}
+          radius={2}
+          border
+        >
           <Flex align="center">
             <Skeleton
               style={{width: 90, height: 90}}

package/src/core/primitives/skeleton/__workshop__/{skeleton.tsx → Skeleton.tsx}

@@ -16,6 +16,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function SkeletonStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
@@ -24,7 +25,14 @@ export default function SkeletonStory(): React.JSX.Element {
       <Container width={1}>
         <Stack gap={4}>
           {[1, 2, 3].map((item) => (
-            <Card key={item} tone={tone} padding={2} radius={2} border>
+            <Card
+              key={item}
+              // @ts-expect-error - TODO: fix this
+              tone={tone}
+              padding={2}
+              radius={2}
+              border
+            >
               <Flex align="center">
                 <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/skeleton',
   title: 'Skeleton',
   stories: [
-    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
+    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./Skeleton'))},
+    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./Delay'))},
   ],
 }
 

package/src/core/primitives/spinner/{spinner.tsx → Spinner.tsx}

@@ -2,8 +2,8 @@ import {type ResponsiveProp, spinner} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {ComponentType, Props} from '../../types'
-import {Text} from '../text/text'
-import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
+import {Text} from '../text/Text'
+import {AnimatedSpinnerIcon} from './AnimatedSpinnerIcon'
 
 /** @public */
 export const DEFAULT_SPINNER_ELEMENT = 'div'

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -5,11 +5,16 @@ import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function Props(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
+      <Spinner
+        muted={muted}
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      />
     </Flex>
   )
 }

package/src/core/primitives/stack/{stack.tsx → Stack.tsx}

@@ -1,7 +1,7 @@
 import {stack} from '@sanity/ui/css'
 
 import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
 
 /** @public */
 export const DEFAULT_STACK_ELEMENT = 'div'

package/src/core/primitives/stack/__workshop__/{plain.tsx → Plain.tsx}

@@ -7,7 +7,10 @@ export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}>
+        <Stack
+          // @ts-expect-error - TODO: fix this
+          gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}
+        >
           <Card padding={[2, 3, 4]} shadow={1}>
             <Text align="center" muted>
               Stack item

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

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/primitives/switch/{switch.tsx → Switch.tsx}

@@ -8,7 +8,6 @@ import {
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
 
 /** @public */
 export const DEFAULT_SWITCH_ELEMENT = 'input'
@@ -41,7 +40,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     indeterminate,
     readOnly,
     ref: forwardedRef,
-    style,
     ...rest
   } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
 
@@ -60,13 +58,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   }, [indeterminate])
 
   return (
-    <Box
-      className={_switch({className})}
-      data-ui="Switch"
-      display="block"
-      position="relative"
-      style={style}
-    >
+    <span className={_switch({className})} data-ui="Switch">
       <Element
         {...rest}
         className={_switchElement()}
@@ -79,6 +71,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
         <span className={_switchTrack()} />
         <span className={_switchThumb()} />
       </span>
-    </Box>
+    </span>
   )
 }

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/switch',
   title: 'Switch',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
   ],
 }
 

package/src/core/primitives/text/{text.tsx → Text.tsx}

@@ -42,6 +42,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
     maxWidth = 'fill',
     muted,
     size = 2,
@@ -58,6 +65,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
         className,
         align,
         flex,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
         maxWidth,
         muted,
         size,

package/src/core/primitives/text/__workshop__/{colored.tsx → Colored.tsx}

@@ -2,22 +2,24 @@ import {Flex, Text} from '@sanity/ui'
 import {vars} from '@sanity/ui/css'
 import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
 
 import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
-const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
-`
-
 export default function ColoredTextStory(): React.JSX.Element {
-  const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
+  // @ts-expect-error - TODO: fix this
+  const color: AvatarColor = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" $color={color} size={4} weight="bold">
+      <Text
+        align="center"
+        size={4}
+        weight="bold"
+        style={assignInlineVars({[vars.color.fg]: vars.color.avatar[color].bg})}
+      >
         {color}
-      </ColoredText>
+      </Text>
     </Flex>
   )
 }

package/src/core/primitives/text/__workshop__/{example.tsx → Example.tsx}

@@ -9,17 +9,31 @@ import {
 } from '$workshop'
 
 export default function TextStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
   const text = useText('Text', 'Hello, world')
+  // @ts-expect-error - TODO: fix this
   const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container width={0}>
-        <Text align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+        <Text
+          // @ts-expect-error - TODO: fix this
+          align={align}
+          muted={muted}
+          // @ts-expect-error - TODO: fix this
+          size={size}
+          // @ts-expect-error - TODO: fix this
+          textOverflow={textOverflow}
+          // @ts-expect-error - TODO: fix this
+          weight={weight}
+        >
           {text}
         </Text>
       </Container>

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

@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
     {
       name: 'default',
       title: 'Text',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
     {
       name: 'colored',
       title: 'Colored text',
-      component: lazy(() => import('./colored')),
+      component: lazy(() => import('./Colored')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/textArea/{textArea.tsx → TextArea.tsx}

@@ -37,14 +37,17 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
+    className,
     customValidity,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     padding = 3,
     radius = 2,
     readOnly,
     ref: forwardedRef,
+    width,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -60,11 +63,14 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   return (
     <span
       className={textArea({
+        className,
         border,
+        flex,
         fontSize,
+        gap,
         padding,
         radius,
-        gap,
+        width,
       })}
       data-invalid={customValidity ? '' : undefined}
       data-read-only={!disabled && readOnly ? '' : undefined}

package/src/core/primitives/textArea/__workshop__/{plain.tsx → Plain.tsx}

@@ -10,15 +10,19 @@ import {
 } from '$workshop'
 
 export default function PlainStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
 
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
   const placeholder = useText('Placeholder', 'Placeholder')
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
 
@@ -32,6 +36,7 @@ export default function PlainStory(): React.JSX.Element {
       justifyContent="center"
       padding={[4, 5, 6]}
       sizing="border"
+      // @ts-expect-error - TODO: fix this
       tone={tone}
     >
       <Container width={0}>
@@ -44,11 +49,14 @@ export default function PlainStory(): React.JSX.Element {
             border={border}
             customValidity={customValidity}
             disabled={disabled}
+            // @ts-expect-error - TODO: fix this
             fontSize={fontSize}
             id="text-area-example"
             onChange={(e) => setValue(e.target.value)}
+            // @ts-expect-error - TODO: fix this
             padding={padding}
             placeholder={placeholder}
+            // @ts-expect-error - TODO: fix this
             radius={radius}
             readOnly={readOnly}
             rows={10}

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

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }