@sanity/ui 4.0.0-static.3 → 4.0.0-static.30

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

@@ -9,17 +9,31 @@ import {
 } from '$workshop'
 
 export default function PlainStory(): 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_LABEL_FONT_SIZE_OPTIONS)
   const textChild = useText('Text', 'Label text')
+  // @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_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+        <Label
+          // @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}
+        >
           {textChild}
         </Label>
       </Container>

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/layer/{layer.test.tsx → Layer.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 import {useLayer} from './useLayer'
 

package/src/core/primitives/layer/{layer.tsx → Layer.tsx}

@@ -1,9 +1,9 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 
-import type {CardElementType, CardOwnProps} from '../../primitives/card/card'
+import type {CardElementType, CardOwnProps} from '../../primitives/card/Card'
 import type {Props} from '../../types'
-import {LayerCard} from './layerCard'
-import {LayerProvider} from './layerProvider'
+import {LayerCard} from './LayerCard'
+import {LayerProvider} from './LayerProvider'
 
 /** @public */
 export const DEFAULT_LAYER_ELEMENT = 'div'

package/src/core/primitives/layer/{layerCard.tsx → LayerCard.tsx}

@@ -2,9 +2,9 @@ import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} fr
 
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
-import {Card, type CardElementType} from '../../primitives/card/card'
+import {Card, type CardElementType} from '../../primitives/card/Card'
 import type {Props} from '../../types'
-import type {LayerElementType, LayerOwnProps} from './layer'
+import type {LayerElementType, LayerOwnProps} from './Layer'
 import {useLayer} from './useLayer'
 
 /** @internal */

package/src/core/primitives/layer/{layerProvider.tsx → LayerProvider.tsx}

@@ -1,10 +1,10 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {type ReactNode, use, useCallback, useEffect, useMemo, useState} from 'react'
 
 import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 
 /** @public */
@@ -18,7 +18,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values
-  const parentContextValue = useContext(LayerContext)
+  const parentContextValue = use(LayerContext)
   const parent = parentContextValue && getLayerContext(parentContextValue)
   const parentRegisterChild = parent?.registerChild
   const parentLevel = parent?.level ?? 0

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

@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
     {
       name: 'nested',
       title: 'Nested',
-      component: lazy(() => import('./nested')),
+      component: lazy(() => import('./Nested')),
     },
     {
       name: 'multiple-roots',
       title: 'Multiple roots',
-      component: lazy(() => import('./multipleRoots')),
+      component: lazy(() => import('./MultipleRoots')),
     },
     {
       name: 'responsive-z-offset',
       title: 'Responsive z-offset',
-      component: lazy(() => import('./responsiveZOffset')),
+      component: lazy(() => import('./ResponsiveZOffset')),
     },
   ],
 }

package/src/core/primitives/layer/useLayer.ts

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 
 /** @public */
 export function useLayer(): LayerContextValue {
-  const value = useContext(LayerContext)
+  const value = use(LayerContext)
 
   if (!value) {
     throw new Error('useLayer(): missing context value')

package/src/core/primitives/popover/{popover.tsx → Popover.tsx}

@@ -32,10 +32,10 @@ import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
-import {CardProvider} from '../card/cardProvider'
+import {Portal} from '../../utils/portal/Portal'
+import {CardProvider} from '../card/CardProvider'
 import {useCard} from '../card/useCard'
-import {type LayerOwnProps} from '../layer/layer'
+import {type LayerOwnProps} from '../layer/Layer'
 import {useLayer} from '../layer/useLayer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -44,7 +44,7 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-import {PopoverLayer} from './popoverLayer'
+import {PopoverLayer} from './PopoverLayer'
 import type {PopoverMargins, PopoverUpdateCallback} from './types'
 
 /** @public */
@@ -171,7 +171,6 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     matchReferenceWidth,
     floatingBoundary = boundaryElementContext.element,
     modal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActivate,
     open,
     overflow = 'hidden',

package/src/core/primitives/popover/{popoverLayer.tsx → PopoverLayer.tsx}

@@ -5,9 +5,9 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow} from '../arrow/arrow'
-import {Flex} from '../flex/flex'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Flex} from '../flex/Flex'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
   DEFAULT_POPOVER_ARROW_RADIUS,

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -12,11 +12,15 @@ import {
 
 export default function AlignedStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', false)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
+  // @ts-expect-error - TODO: fix this
   const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
@@ -49,7 +53,13 @@ export default function AlignedStory(): React.JSX.Element {
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
       <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
-        <Flex align={flexAlign} height="fill" justify={flexJustify}>
+        <Flex
+          // @ts-expect-error - TODO: fix this
+          align={flexAlign}
+          height="fill"
+          // @ts-expect-error - TODO: fix this
+          justify={flexJustify}
+        >
           <Popover
             constrainSize={constrainSize}
             content={content}
@@ -58,8 +68,10 @@ export default function AlignedStory(): React.JSX.Element {
             overflow="auto"
             padding={3}
             portal={portal}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             ref={popoverElementRef}
+            // @ts-expect-error - TODO: fix this
             width={width}
           >
             <Button

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -5,6 +5,7 @@ import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function MatchReferenceWidthStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', true)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 
   return (
@@ -18,6 +19,7 @@ export default function MatchReferenceWidthStory(): React.JSX.Element {
         }
         matchReferenceWidth
         open
+        // @ts-expect-error - TODO: fix this
         placement={placement}
         radius={2}
       >

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -15,11 +15,15 @@ export default function PlainStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
   const portal = useBoolean('Portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
@@ -53,11 +57,15 @@ export default function PlainStory(): React.JSX.Element {
               floatingBoundary={boundaryElementFlag ? boundaryElement : undefined}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
+              // @ts-expect-error - TODO: fix this
               radius={radius}
+              // @ts-expect-error - TODO: fix this
               width={width}
             >
               <Button text="This button is the popover reference" />

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -26,6 +26,7 @@ export default function SidePanelStory(): React.JSX.Element {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
   const updateRef = useRef<PopoverUpdateCallback>(undefined)
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS) ?? 'inherit'
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
@@ -48,7 +49,12 @@ export default function SidePanelStory(): React.JSX.Element {
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject tone={tone} updateRef={updateRef} />
+                Some editor{' '}
+                <InlineObject
+                  // @ts-expect-error - TODO: fix this
+                  tone={tone}
+                  updateRef={updateRef}
+                />
               </Text>
             </Card>
           </Stack>

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -25,11 +25,14 @@ export default function TestStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
   const portal = useBoolean('Render in portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const referenceWide = useBoolean('Reference wide?', false)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
   const text = useText('Text', 'Test')
@@ -81,11 +84,14 @@ export default function TestStory(): React.JSX.Element {
                   open={open}
                   overflow="hidden"
                   padding={3}
+                  // @ts-expect-error - TODO: fix this
                   placement={placement}
                   portal={portal}
                   preventOverflow={preventOverflow}
+                  // @ts-expect-error - TODO: fix this
                   radius={radius}
                   updateRef={updateRef}
+                  // @ts-expect-error - TODO: fix this
                   width={width}
                 >
                   {button}

package/src/core/primitives/radio/{radio.tsx → Radio.tsx}

@@ -47,7 +47,7 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
   useCustomValidity(ref, customValidity)
 
   return (
-    <div className={radio({className})} data-ui="Radio" style={style}>
+    <span className={radio({className})} data-ui="Radio" style={style}>
       <Element
         {...rest}
         className={radioInput()}
@@ -59,6 +59,6 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
         type="radio"
       />
       <span className={radioPresentation()} />
-    </div>
+    </span>
   )
 }

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/radio',
   title: 'Radio',
   stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
   ],
 }
 

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/{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>
   )
 }