@sanity/ui 4.0.0-static.9 → 4.0.0-v4.1

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/__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'

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'

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

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,7 @@ import {
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
+import {Box} from '../box/Box'
 
 /** @public */
 export const DEFAULT_SWITCH_ELEMENT = 'input'

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/__workshop__/{colored.tsx → Colored.tsx}

@@ -11,11 +11,18 @@ const ColoredText = styled(Text)<{$color: AvatarColor}>`
 `
 
 export default function ColoredTextStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const color = 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">
+      <ColoredText
+        align="center"
+        // @ts-expect-error - TODO: fix this
+        $color={color}
+        size={4}
+        weight="bold"
+      >
         {color}
       </ColoredText>
     </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/__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')),
     },
   ],
 }

package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx}

@@ -27,9 +27,9 @@ import {useCustomValidity} from '../../hooks/useCustomValidity'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Button, type ButtonProps} from '../button/button'
-import {Text} from '../text/text'
+import {Box} from '../box/Box'
+import {Button, type ButtonProps} from '../button/Button'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
@@ -99,7 +99,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     suffix,
     customValidity,
     type = 'text',
-    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
+    weight: _width,
     width,
     ...rest
   } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>

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

@@ -53,16 +53,23 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   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 gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
+  // @ts-expect-error - TODO: fix this
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
   const placeholder = useText('Placeholder')
   const prefix = useBoolean('Prefix', false)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const suffix = useBoolean('Suffix', false)
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   const [value, setValue] = useState('')
@@ -77,33 +84,56 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       border={border}
       customValidity={customValidity}
       disabled={disabled}
+      // @ts-expect-error - TODO: fix this
       fontSize={fontSize}
+      // @ts-expect-error - TODO: fix this
       gap={gap}
+      // @ts-expect-error - TODO: fix this
       icon={icon && icons[icon]}
+      // @ts-expect-error - TODO: fix this
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
       name="test"
       onChange={handleChange}
+      // @ts-expect-error - TODO: fix this
       padding={padding}
       placeholder={placeholder}
       prefix={
         prefix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Prefix</Text>
+          <Box
+            // @ts-expect-error - TODO: fix this
+            padding={padding}
+          >
+            <Text
+              // @ts-expect-error - TODO: fix this
+              size={fontSize}
+            >
+              Prefix
+            </Text>
           </Box>
         )
       }
+      // @ts-expect-error - TODO: fix this
       radius={radius}
       readOnly={readOnly}
       ref={ref}
       suffix={
         suffix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Suffix</Text>
+          <Box
+            // @ts-expect-error - TODO: fix this
+            padding={padding}
+          >
+            <Text
+              // @ts-expect-error - TODO: fix this
+              size={fontSize}
+            >
+              Suffix
+            </Text>
           </Box>
         )
       }
       value={value}
+      // @ts-expect-error - TODO: fix this
       weight={weight}
     />
   )

package/src/core/primitives/textInput/__workshop__/{typed.tsx → Typed.tsx}

@@ -5,6 +5,7 @@ import {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
 export default function TypedStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')
@@ -16,7 +17,12 @@ export default function TypedStory(): React.JSX.Element {
   return (
     <Box padding={4}>
       <Container width={1}>
-        <TextInput onChange={handleChange} type={type} value={value} />
+        <TextInput
+          onChange={handleChange}
+          // @ts-expect-error - TODO: fix this
+          type={type}
+          value={value}
+        />
       </Container>
     </Box>
   )

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

@@ -8,37 +8,37 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'custom-validity',
       title: 'Custom validity',
-      component: lazy(() => import('./customValidity')),
+      component: lazy(() => import('./CustomValidity')),
     },
     {
       name: 'typed',
       title: 'Typed',
-      component: lazy(() => import('./typed')),
+      component: lazy(() => import('./Typed')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'clear-button',
       title: 'Clear button',
-      component: lazy(() => import('./clearButton')),
+      component: lazy(() => import('./ClearButton')),
     },
     {
       name: 'read-only',
       title: 'Read only',
-      component: lazy(() => import('./readOnly')),
+      component: lazy(() => import('./ReadOnly')),
     },
     {
       name: 'states',
       title: 'States',
-      component: lazy(() => import('./states')),
+      component: lazy(() => import('./States')),
     },
   ],
 }

package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx}

@@ -3,10 +3,10 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {Button} from '../button/button'
-import {Text} from '../text/text'
-import {Tooltip} from './tooltip'
-import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
+import {Button} from '../button/Button'
+import {Text} from '../text/Text'
+import {Tooltip} from './Tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup/TooltipDelayGroupProvider'
 
 // Fake timers
 beforeEach(() => {