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

package/src/core/index.ts

@@ -1,30 +1,30 @@
 // components
-export * from './components/autocomplete/autocomplete'
+export * from './components/autocomplete/Autocomplete'
 export * from './components/autocomplete/types'
-export * from './components/breadcrumbs/breadcrumbs'
-export * from './components/dialog/dialog'
-export * from './components/dialog/dialogContext'
-export * from './components/dialog/dialogProvider'
+export * from './components/breadcrumbs/Breadcrumbs'
+export * from './components/dialog/Dialog'
+export * from './components/dialog/DialogContext'
+export * from './components/dialog/DialogProvider'
 export * from './components/dialog/types'
 export * from './components/dialog/useDialog'
-export * from './components/hotkeys/hotkeys'
-export * from './components/menu/menu'
-export * from './components/menu/menuButton'
-export * from './components/menu/menuDivider'
-export * from './components/menu/menuGroup'
-export * from './components/menu/menuItem'
-export * from './components/tab/tab'
-export * from './components/tab/tabList'
-export * from './components/tab/tabPanel'
-export * from './components/toast/toast'
-export * from './components/toast/toastProvider'
+export * from './components/hotkeys/Hotkeys'
+export * from './components/menu/Menu'
+export * from './components/menu/MenuButton'
+export * from './components/menu/MenuDivider'
+export * from './components/menu/MenuGroup'
+export * from './components/menu/MenuItem'
+export * from './components/tab/Tab'
+export * from './components/tab/TabList'
+export * from './components/tab/TabPanel'
+export * from './components/toast/Toast'
+export * from './components/toast/ToastProvider'
 export * from './components/toast/types'
 export * from './components/toast/useToast'
-export * from './components/tree/tree'
-export * from './components/tree/treeItem'
+export * from './components/tree/Tree'
+export * from './components/tree/TreeItem'
 export * from './components/tree/types'
 export * from './components/tree/useTree'
-export * from './components/virtualList/virtualList'
+export * from './components/virtualList/VirtualList'
 
 // helpers
 export * from './helpers/animation'
@@ -42,70 +42,72 @@ export * from './hooks/useMatchMedia'
 export * from './hooks/useMediaIndex/useMediaIndex'
 export * from './hooks/usePrefersDark'
 export * from './hooks/usePrefersReducedMotion'
-export * from './hooks/useResponsiveProp'
 
 // observers
 export * from './observers/elementSize'
 export * from './observers/resize'
 
 // primitives
-export * from './primitives/arrow/arrow'
-export * from './primitives/avatar/avatar'
-export * from './primitives/avatar/avatarCounter'
-export * from './primitives/avatar/avatarStack'
+export * from './primitives/arrow/Arrow'
+export * from './primitives/avatar/Avatar'
+export * from './primitives/avatar/AvatarCounter'
+export * from './primitives/avatar/AvatarStack'
 export * from './primitives/avatar/types'
-export * from './primitives/badge/badge'
-export * from './primitives/box/box'
-export * from './primitives/button/button'
+export * from './primitives/badge/Badge'
+export * from './primitives/box/Box'
+export * from './primitives/button/Button'
 export * from './primitives/button/types'
-export * from './primitives/card/card'
-export * from './primitives/card/cardProvider'
+export * from './primitives/card/Card'
+export * from './primitives/card/CardProvider'
 export * from './primitives/card/types'
-export * from './primitives/card/useCard'
-export * from './primitives/checkbox/checkbox'
-export * from './primitives/code/code'
-export * from './primitives/container/container'
+export {useCard} from './primitives/card/useCard'
+export * from './primitives/checkbox/Checkbox'
+export * from './primitives/code/Code'
+export * from './primitives/container/Container'
 export * from './primitives/container/types'
-export * from './primitives/flex/flex'
-export * from './primitives/grid/grid'
-export * from './primitives/heading/heading'
-export * from './primitives/inline/inline'
-export * from './primitives/kbd/kbd'
-export * from './primitives/label/label'
-export * from './primitives/layer/layer'
-export * from './primitives/layer/layerProvider'
+export * from './primitives/flex/Flex'
+export * from './primitives/grid/Grid'
+export * from './primitives/heading/Heading'
+export * from './primitives/inline/Inline'
+export * from './primitives/kbd/Kbd'
+export * from './primitives/label/Label'
+export * from './primitives/layer/Layer'
+export * from './primitives/layer/LayerProvider'
 export * from './primitives/layer/types'
 export * from './primitives/layer/useLayer'
-export * from './primitives/popover/popover'
+export * from './primitives/popover/Popover'
 export * from './primitives/popover/types'
-export * from './primitives/radio/radio'
-export * from './primitives/select/select'
-export * from './primitives/selectable/selectable'
-export * from './primitives/skeleton/codeSkeleton'
-export * from './primitives/skeleton/headingSkeleton'
-export * from './primitives/skeleton/labelSkeleton'
-export * from './primitives/skeleton/skeleton'
-export * from './primitives/skeleton/textSkeleton'
-export * from './primitives/spinner/spinner'
-export * from './primitives/srOnly/srOnly'
-export * from './primitives/stack/stack'
-export * from './primitives/switch/switch'
-export * from './primitives/text/text'
-export * from './primitives/textArea/textArea'
-export * from './primitives/textInput/textInput'
-export * from './primitives/tooltip/tooltip'
-export * from './primitives/tooltip/tooltipDelayGroup'
+export * from './primitives/radio/Radio'
+export * from './primitives/select/Select'
+export * from './primitives/selectable/Selectable'
+export * from './primitives/skeleton/CodeSkeleton'
+export * from './primitives/skeleton/HeadingSkeleton'
+export * from './primitives/skeleton/LabelSkeleton'
+export * from './primitives/skeleton/Skeleton'
+export * from './primitives/skeleton/TextSkeleton'
+export * from './primitives/spinner/Spinner'
+export * from './primitives/srOnly/SrOnly'
+export * from './primitives/stack/Stack'
+export * from './primitives/switch/Switch'
+export * from './primitives/text/Text'
+export * from './primitives/textArea/TextArea'
+export * from './primitives/textInput/TextInput'
+export * from './primitives/tooltip/Tooltip'
+export * from './primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupContext'
+export * from './primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupProvider'
+export * from './primitives/tooltip/tooltipDelayGroup/types'
+export {useTooltipDelayGroup} from './primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup'
 
 // utils
-export * from './utils/boundaryElement/boundaryElementProvider'
+export * from './utils/boundaryElement/BoundaryElementProvider'
 export * from './utils/boundaryElement/types'
-export * from './utils/boundaryElement/useBoundaryElement'
-export * from './utils/elementQuery/elementQuery'
-export * from './utils/errorBoundary'
-export * from './utils/portal/portal'
-export * from './utils/portal/portalProvider'
+export {useBoundaryElement} from './utils/boundaryElement/useBoundaryElement'
+export * from './utils/elementQuery/ElementQuery'
+export * from './utils/ErrorBoundary'
+export * from './utils/portal/Portal'
+export * from './utils/portal/PortalProvider'
 export * from './utils/portal/types'
-export * from './utils/portal/usePortal'
+export {usePortal} from './utils/portal/usePortal'
 
 // root
 export * from './Root'

package/src/core/lib/createGlobalScopedContext.ts

@@ -1,7 +1,7 @@
 /**
  * As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
  * it's critical that vital react contexts are shared even when there is a duplicate.
- * If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
+ * If we used a model similar to `sanity` itself this would be unnecessary as
  * those libraries enforce single instances.
  * Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
  * read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
@@ -16,7 +16,7 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
   /**
    * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
    */
-  key: `@sanity/ui/v3/${string}`,
+  key: `@sanity/ui/v4/${string}`,
   defaultValue: T,
 ): Context<ContextType> {
   const symbol = Symbol.for(key)
@@ -25,7 +25,9 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
    * Prevent errors about re-renders on React SSR on Next.js App Router
    */
   if (typeof document === 'undefined') {
-    return createContext<ContextType>(defaultValue)
+    const context = createContext<ContextType>(defaultValue)
+    context.displayName = key
+    return context
   }
 
   // Use the global scope as a map of symbols to contexts

package/src/core/primitives/avatar/{avatar.tsx → Avatar.tsx}

@@ -9,10 +9,10 @@ import {
 import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {_getResponsiveProp} from '../../helpers/props'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Label} from '../label/label'
+import {Box} from '../box/Box'
+import {Label} from '../label/Label'
 import type {AvatarPosition} from './types'
 
 /** @public */
@@ -47,7 +47,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
   props: AvatarProps<E>,
 ): React.JSX.Element {
   const {
-    __unstable_hideInnerStroke,
+    __unstable_hideInnerStroke: hideInnerStroke,
     as: Element = DEFAULT_AVATAR_ELEMENT,
     className,
     color = 'magenta',
@@ -61,7 +61,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
     ...rest
   } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
 
-  const size = useResponsiveProp(sizeProp)
+  const size = useMemo(() => _getResponsiveProp(sizeProp), [sizeProp])
 
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
     animateArrowFrom || arrowPositionProp || 'inside',
@@ -79,6 +79,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
   }, [arrowPosition, arrowPositionProp])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (src) setImageError(false)
   }, [src])
 
@@ -104,7 +105,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
 
   return (
     <Element
-      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
+      data-hide-inner-stroke={hideInnerStroke ? '' : undefined}
       data-ui="Avatar"
       {...rest}
       aria-label={title}

package/src/core/primitives/avatar/{avatarCounter.tsx → AvatarCounter.tsx}

@@ -4,8 +4,8 @@ import {useMemo} from 'react'
 
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Label} from '../label/label'
+import {Box} from '../box/Box'
+import {Label} from '../label/Label'
 
 /** @public */
 export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'

package/src/core/primitives/avatar/{avatarStack.tsx → AvatarStack.tsx}

@@ -4,9 +4,9 @@ import {Children, cloneElement, Fragment, isValidElement, type ReactElement} fro
 
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import type {ComponentType, Props} from '../../types'
-import {Box, type BoxOwnProps} from '../box/box'
-import type {AvatarProps} from './avatar'
-import {AvatarCounter} from './avatarCounter'
+import {Box, type BoxOwnProps} from '../box/Box'
+import type {AvatarProps} from './Avatar'
+import {AvatarCounter} from './AvatarCounter'
 
 /** @public */
 export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'

package/src/core/primitives/avatar/__workshop__/{asButton.tsx → AsButton.tsx}

@@ -4,11 +4,18 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
+      <Avatar
+        as="button"
+        color="purple"
+        initials="uq"
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      />
     </Flex>
   )
 }

package/src/core/primitives/avatar/__workshop__/PropsStory.tsx

@@ -0,0 +1,22 @@
+import {Avatar, Box} from '@sanity/ui'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_AVATAR_SIZE_OPTIONS, WORKSHOP_AVATAR_SRC} from '$workshop'
+
+export default function PropsStory() {
+  const hideInnerStroke = useBoolean('Hide inner stroke', false)
+  const src = useBoolean('With image source (src)', false)
+  // @ts-expect-error - TODO: fix this
+  const size = useSelect<AvatarSize>('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
+
+  return (
+    <Box alignItems="center" display="flex" height="fill" justifyContent="center">
+      <Avatar
+        __unstable_hideInnerStroke={hideInnerStroke}
+        size={size}
+        src={src ? WORKSHOP_AVATAR_SRC : undefined}
+      />
+    </Box>
+  )
+}

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

@@ -4,11 +4,15 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function StackStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
+      <AvatarStack
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      >
         <AvatarCounter count={2} />
         <Avatar color="magenta" initials="uq" />
         <Avatar

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

@@ -5,25 +5,30 @@ const scope: WorkshopScope = {
   name: 'primitives/avatar',
   title: 'Avatar',
   stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./PropsStory')),
+    },
     {
       name: 'as-button',
       title: 'As button',
-      component: lazy(() => import('./asButton')),
+      component: lazy(() => import('./AsButton')),
     },
     {
       name: 'avatar-stack',
       title: 'Avatar stack',
-      component: lazy(() => import('./stack')),
+      component: lazy(() => import('./Stack')),
     },
     {
       name: 'within-button',
       title: 'Within button',
-      component: lazy(() => import('./withinButton')),
+      component: lazy(() => import('./WithinButton')),
     },
     {
       name: 'within-menu-item',
       title: 'Within menu item',
-      component: lazy(() => import('./withinMenuItem')),
+      component: lazy(() => import('./WithinMenuItem')),
     },
   ],
 }

package/src/core/primitives/badge/{badge.test.tsx → Badge.test.tsx}

@@ -3,7 +3,7 @@ import {axe} from 'vitest-axe'
 
 import {render} from '$test/utils'
 
-import {Badge} from './badge'
+import {Badge} from './Badge'
 
 describe('atoms/badge', () => {
   it('should have no violations (axe)', async () => {

package/src/core/primitives/badge/{badge.tsx → Badge.tsx}

@@ -7,8 +7,8 @@ import {
 } from '@sanity/ui/css'
 
 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_BADGE_ELEMENT = 'span'

package/src/core/primitives/badge/__workshop__/{props.tsx → Props.tsx}

@@ -4,14 +4,25 @@ import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+  // @ts-expect-error - TODO: fix this
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
   const textProp = useText('Text', 'Label')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Badge onClick={useAction('onClick')} paddingX={paddingX} paddingY={paddingY} tone={tone}>
+      <Badge
+        onClick={useAction('onClick')}
+        // @ts-expect-error - TODO: fix this
+        paddingX={paddingX}
+        // @ts-expect-error - TODO: fix this
+        paddingY={paddingY}
+        // @ts-expect-error - TODO: fix this
+        tone={tone}
+      >
         {textProp}
       </Badge>
     </Flex>

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
   ],
 }

package/src/core/primitives/box/__workshop__/{props.tsx → Props.tsx}

@@ -4,12 +4,17 @@ import {useAction, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
 
   return (
     <Box padding={[4, 5, 6]}>
       <Card border tone="inherit">
-        <Box onClick={useAction('onClick')} padding={padding}>
+        <Box
+          onClick={useAction('onClick')}
+          // @ts-expect-error - TODO: fix this
+          padding={padding}
+        >
           <Text>
             Box with <code>padding={padding}</code>
           </Text>

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'responsive',
       title: 'Responsive',
-      component: lazy(() => import('./responsive')),
+      component: lazy(() => import('./Responsive')),
     },
   ],
 }

package/src/core/primitives/button/{button.test.tsx → Button.test.tsx}

@@ -5,7 +5,7 @@ import {axe} from 'vitest-axe'
 
 import {render} from '$test/utils'
 
-import {Button} from './button'
+import {Button} from './Button'
 
 describe('atoms/button', () => {
   it('Axe: should have no violations', async () => {

package/src/core/primitives/button/{button.tsx → Button.tsx}

@@ -9,13 +9,13 @@ import type {
 } from '@sanity/ui/css'
 import {button, buttonLoadingBox} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
-import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
+import {isValidElement} from 'react'
 import {isValidElementType} from 'react-is'
 
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Spinner} from '../spinner/spinner'
-import {Text, type TextOwnProps} from '../text/text'
+import {Box} from '../box/Box'
+import {Spinner} from '../spinner/Spinner'
+import {Text, type TextOwnProps} from '../text/Text'
 import type {ButtonTextAlign} from './types'
 
 /** @public */
@@ -30,8 +30,8 @@ export type ButtonOwnProps = ButtonStyleProps &
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'icon'?: ReactElementType | ReactNode
-    'iconRight'?: ReactElementType | ReactNode
+    'icon'?: React.ElementType | React.ReactNode
+    'iconRight'?: React.ElementType | React.ReactNode
     'justify'?: BoxStyleProps['justifyContent']
     /** @beta Do not use in production, as this might change.*/
     'loading'?: boolean
@@ -39,7 +39,7 @@ export type ButtonOwnProps = ButtonStyleProps &
     'textAlign'?: ButtonTextAlign
     'muted'?: boolean
     'target'?: string
-    'text'?: ReactNode
+    'text'?: React.ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
     'width'?: ResponsiveProp<Width>
@@ -63,7 +63,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     disabled,
     flex,
     fontSize = 1,
-    gap = props.padding ?? 3,
+    gap: _gap,
     gapX,
     gapY,
     icon: IconComponent,
@@ -71,6 +71,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     justify = 'center',
     loading,
     mode = 'default',
+    muted = false,
     padding = 3,
     paddingX,
     paddingY,
@@ -86,10 +87,10 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     textWeight = 'medium',
     tone = 'default',
     type = 'button',
-    muted = false,
     width,
     ...rest
   } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
+  const gap = _gap ?? props.padding ?? 3
 
   let href: string | undefined = undefined
 
@@ -103,8 +104,8 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
       data-ui="Button"
       {...rest}
       className={button({className, flex, mode, radius, tone, width})}
-      data-disabled={loading || disabled ? '' : undefined}
-      data-selected={selected ? '' : undefined}
+      data-disabled={loading || disabled ? '' : props['data-disabled']}
+      data-selected={selected ? '' : props['data-selected']}
       disabled={Boolean(loading || disabled)}
       // @ts-expect-error - TODO: fix this
       href={disabled ? undefined : href}

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

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

package/src/core/primitives/button/__workshop__/{props.tsx → Props.tsx}

@@ -15,39 +15,61 @@ import {
 
 export default function ButtonStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled')
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
   const loading = useBoolean('Loading')
+  // @ts-expect-error - TODO: fix this
   const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
   const selected = useBoolean('Selected')
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
   const textProp = useText('Text', 'Label')
+  // @ts-expect-error - TODO: fix this
   const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">
       <Button
         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]}
+        // @ts-expect-error - TODO: fix this
         justify={justify}
         loading={loading}
+        // @ts-expect-error - TODO: fix this
         mode={mode}
         onClick={useAction('onClick')}
+        // @ts-expect-error - TODO: fix this
         paddingX={paddingX}
+        // @ts-expect-error - TODO: fix this
         paddingY={paddingY}
         selected={selected}
+        // @ts-expect-error - TODO: fix this
         textAlign={textAlign}
         text={textProp}
+        // @ts-expect-error - TODO: fix this
         textWeight={textWeight}
+        // @ts-expect-error - TODO: fix this
         tone={tone}
       />
     </Flex>