@sanity/ui 4.0.0-static.16 → 4.0.0-static.18

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/select/__workshop__/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/skeleton/__workshop__/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

@@ -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/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/__workshop__/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/text/__workshop__/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

@@ -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/textArea/__workshop__/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/textInput/__workshop__/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

@@ -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/tooltip/__workshop__/customPortal.tsx

@@ -25,6 +25,7 @@ export default function CustomPortalStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useSelect('Portal', PORTAL_OPTIONS)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -60,6 +61,7 @@ export default function CustomPortalStory(): React.JSX.Element {
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
                     content={content ? <Text size={1}>{content}</Text> : undefined}
                     padding={2}
+                    // @ts-expect-error - TODO: fix this
                     placement={placement}
                     portal={portal}
                   >

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -9,6 +9,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', false)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -56,6 +57,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
             <Tooltip
               content={<Text size={1}>{content}</Text>}
               padding={2}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
             >

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

@@ -11,11 +11,14 @@ import {
 export default function PropsStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
   const openDelay = useNumber('Open Delay', 200)
   const closeDelay = useNumber('Close Delay', 200)
+  // @ts-expect-error - TODO: fix this
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
@@ -41,9 +44,12 @@ export default function PropsStory(): React.JSX.Element {
             <Tooltip
               arrow={arrow}
               content={<Text size={1}>{content}</Text>}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
+              // @ts-expect-error - TODO: fix this
               shadow={shadow}
               delay={{
                 open: openDelay,
@@ -81,9 +87,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Hover me" />
@@ -96,9 +105,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Or me" />

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -9,6 +9,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
   const portal = useBoolean('Portal', true)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -38,6 +39,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -46,6 +48,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -58,6 +61,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -70,6 +74,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >

package/src/css/primitives/card/__workshop__/color.tsx

@@ -20,10 +20,18 @@ interface ColorRecordNode extends Record<string, ColorNode> {}
 type ColorNode = string | ColorRecordNode
 
 export default function ColorStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
-    <Card display="flex" flexDirection="column" gap={4} padding={4} tone={tone}>
+    <Card
+      display="flex"
+      flexDirection="column"
+      gap={4}
+      padding={4}
+      // @ts-expect-error - TODO: fix this
+      tone={tone}
+    >
       {Object.entries(vars.color).map(([key, value]) => {
         if (key === 'palette') {
           return null

package/src/css/primitives/card/card.css.ts

@@ -134,6 +134,16 @@ export const root: string = _style(layers.primitives, {
         [vars.color.muted.fg]: vars.color.tinted.default.border[2],
       },
     },
+
+    'a&[data-focus-ring]:focus, button&[data-focus-ring]:focus': {
+      outline: `${vars.card.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.card.focusRing.offset,
+    },
+
+    'a&[data-focus-ring]:focus:not(:focus-visible), button&[data-focus-ring]:focus:not(:focus-visible)':
+      {
+        outline: 'none',
+      },
   },
 })
 

package/src/css/theme/buildCSSTheme.ts

@@ -79,6 +79,10 @@ export function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens {
       border: {
         width: px(theme.card.border.width),
       },
+      focusRing: {
+        offset: px(theme.card.focusRing.offset),
+        width: px(theme.card.focusRing.width),
+      },
       shadow: {
         outline: px(theme.card.shadow.outline),
       },

package/src/css/types.ts

@@ -183,6 +183,10 @@ export type CoreThemeTokens = {
     border: {
       width: string
     }
+    focusRing: {
+      offset: string
+      width: string
+    }
     shadow: {
       outline: string
     }

package/src/css/vars.css.ts

@@ -74,6 +74,10 @@ const themeTokens: CoreThemeTokens = {
     border: {
       width: '',
     },
+    focusRing: {
+      offset: '',
+      width: '',
+    },
     shadow: {
       outline: '',
     },