@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/components/menu/menuButton.tsx

@@ -1,16 +1,22 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   cloneElement,
+  FocusEvent,
+  ForwardedRef,
   forwardRef,
+  KeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  ReactElement,
   useCallback,
-  useMemo,
-  useState,
   useEffect,
-  useRef,
   useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
 } from 'react'
-import {Popover, PopoverProps} from '../../primitives'
-import {Placement, Radius} from '../../types'
+
+import {ButtonProps, Popover, PopoverProps} from '../../primitives'
+import {Placement, Props, Radius} from '../../types'
 import {MenuProps} from './menu'
 
 /**
@@ -25,9 +31,9 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement
+  button: ReactElement<Props<ButtonProps, 'button'>>
   id: string
-  menu?: React.ReactElement
+  menu?: ReactElement
   onClose?: () => void
   onOpen?: () => void
   /**
@@ -61,7 +67,7 @@ export interface MenuButtonProps {
  */
 export const MenuButton = forwardRef(function MenuButton(
   props: MenuButtonProps,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement | null>,
+  forwardedRef: ForwardedRef<HTMLButtonElement | null>,
 ) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
@@ -111,13 +117,13 @@ export const MenuButton = forwardRef(function MenuButton(
   // This is to ensure that `handleBlur` isn't triggered when clicking the menu button whilst open,
   // which can lead to `setOpen` being triggered multiple times (once by `handleBlur`, and again by `handleButtonClick`).
   const handleMouseDown = useCallback(
-    (event: PointerEvent) => {
+    (event: ReactMouseEvent<HTMLElement>) => {
       if (open) event.preventDefault()
     },
     [open],
   )
 
-  const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
+  const handleButtonKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {
     // On `ArrowDown`, `Enter` and `Space`
     // - Opens menu and moves focus to first menuitem
     if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
@@ -169,7 +175,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [buttonElement, disableRestoreFocusOnClose])
 
   const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
+    (event: FocusEvent<HTMLDivElement>) => {
       const target = event.relatedTarget
 
       if (!(target instanceof Node)) {
@@ -199,65 +205,44 @@ export const MenuButton = forwardRef(function MenuButton(
     return () => setChildMenuElements((els) => els.filter((_el) => _el !== el))
   }, [])
 
-  const menuProps: MenuProps = useMemo(
-    () => ({
-      'aria-labelledby': id,
-      'onBlurCapture': handleBlur,
-      'onClickOutside': handleMenuClickOutside,
-      'onEscape': handleMenuEscape,
-      'onItemClick': handleItemClick,
-      'originElement': buttonElement,
-      registerElement,
-      shouldFocus,
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus,
-    ],
-  )
+  const menuProps: Props<MenuProps, 'div'> = {
+    'aria-labelledby': id,
+    'onBlurCapture': handleBlur,
+    'onClickOutside': handleMenuClickOutside,
+    'onEscape': handleMenuEscape,
+    'onItemClick': handleItemClick,
+    'originElement': buttonElement,
+    registerElement,
+    shouldFocus,
+  }
 
   const menu = menuProp && cloneElement(menuProp, menuProps)
 
-  const ref = useRef<HTMLButtonElement | null>(null)
-  const button = useMemo(
-    () =>
-      buttonProp &&
-      cloneElement(buttonProp, {
-        'data-ui': 'MenuButton',
-        id,
-        'onClick': handleButtonClick,
-        'onKeyDown': handleButtonKeyDown,
-        'onMouseDown': handleMouseDown,
-        'aria-haspopup': true,
-        'aria-expanded': open,
-        'ref': ref,
-        'selected': buttonProp.props.selected ?? open,
-      }),
-    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
-  )
+  const button = useMemo(() => {
+    if (!buttonProp) return null
+
+    const buttonProps = {
+      'data-ui': 'MenuButton',
+      id,
+      'onClick': handleButtonClick,
+      'onKeyDown': handleButtonKeyDown,
+      'onMouseDown': handleMouseDown,
+      'aria-haspopup': true,
+      'aria-expanded': open,
+      'ref': setButtonElement,
+      'selected': buttonProp.props.selected ?? open,
+    } satisfies Props<ButtonProps, 'button'> & {ref: ForwardedRef<HTMLButtonElement>}
+
+    return cloneElement(buttonProp, buttonProps)
+  }, [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open])
 
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
     forwardedRef,
-    () => ref.current,
+    () => buttonElement,
+    [buttonElement],
   )
 
-  // If there's a button then we need to set the reference element to the cloned button ref
-  // and if button changes we make sure to update or remove the reference element.
-  useEffect(() => {
-    if (!button) return undefined
-
-    setButtonElement(ref.current)
-
-    return () => setButtonElement(null)
-  }, [button])
-
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -286,4 +271,5 @@ export const MenuButton = forwardRef(function MenuButton(
     </Popover>
   )
 })
+
 MenuButton.displayName = 'ForwardRef(MenuButton)'

package/src/core/components/menu/menuContext.ts

@@ -1,3 +1,5 @@
+import {MouseEvent as ReactMouseEvent} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
 export interface MenuContextValue {
@@ -8,19 +10,19 @@ export interface MenuContextValue {
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
-  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
-  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseEnter?: (event: ReactMouseEvent<HTMLElement>) => void
+  onItemMouseLeave?: (event: ReactMouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
 
   /**
    * @deprecated Use `onItemMouseEnter` instead
    */
-  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  onMouseEnter: (event: ReactMouseEvent<HTMLElement>) => void
 
   /**
    * @deprecated Use `onItemMouseLeave` instead
    */
-  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
+  onMouseLeave: (event: ReactMouseEvent<HTMLElement>) => void
 }
 
 export const MenuContext = createGlobalScopedContext<MenuContextValue | null>(

package/src/core/components/menu/menuDivider.tsx

@@ -1,12 +1,18 @@
 import {composeClassNames, menuDivider} from '@sanity/ui/css'
-import {forwardRef, HTMLProps} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
+
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MenuDividerProps {}
 
 /**
  * @public
  */
 export const MenuDivider = forwardRef(function MenuDivider(
-  props: HTMLProps<HTMLHRElement>,
-  ref: React.ForwardedRef<HTMLHRElement>,
+  props: Props<MenuDividerProps, 'div'>,
+  ref: ForwardedRef<HTMLHRElement>,
 ) {
   const {className, ...restProps} = props
 

package/src/core/components/menu/menuGroup.tsx

@@ -1,44 +1,65 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {isValidElement, useCallback, useEffect, useState} from 'react'
+import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
+import {
+  ElementType,
+  isValidElement,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import {isValidElementType} from 'react-is'
+
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {Radius, SelectableTone} from '../../types'
-import {Menu} from './menu'
+import {Props, Radius, SelectableTone} from '../../types'
+import {Menu, MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
 /**
  * @public
  */
-export interface MenuGroupProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  padding?: number | number[]
+export interface MenuGroupProps extends GapStyleProps {
+  disabled?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType | ReactNode
+  menu?: Omit<
+    MenuProps,
+    | 'onClickOutside'
+    | 'onEscape'
+    | 'onItemClick'
+    | 'onKeyDown'
+    | 'onMouseEnter'
+    | 'registerElement'
+    | 'shouldFocus'
+    | 'onBlurCapture'
+  >
+  padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  text: React.ReactNode
+  text: ReactNode
   tone?: SelectableTone
 }
 
 /**
  * @public
  */
-export function MenuGroup(
-  props: Omit<
-    React.HTMLProps<HTMLDivElement>,
-    'as' | 'height' | 'popover' | 'ref' | 'rows' | 'tabIndex' | 'width' | 'wrap'
-  > &
-    MenuGroupProps,
-): React.ReactElement {
+export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
   const {
     as = 'button',
     children,
     fontSize = 1,
+    gap,
+    gapX,
+    gapY,
     icon: IconComponent,
+    menu: menuProps,
     onClick,
     padding = 3,
     popover,
@@ -56,9 +77,10 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
@@ -66,7 +88,7 @@ export function MenuGroup(
   const [withinMenu, setWithinMenu] = useState(false)
 
   const handleMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
+    (event: MouseEvent<HTMLElement>) => {
       setWithinMenu(false)
       onItemMouseEnter(event)
       setOpen(true)
@@ -75,7 +97,7 @@ export function MenuGroup(
   )
 
   const handleMenuKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {
         event.stopPropagation()
 
@@ -90,7 +112,7 @@ export function MenuGroup(
   )
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLDivElement>) => {
       onClick?.(event)
 
       setShouldFocus('first')
@@ -131,6 +153,7 @@ export function MenuGroup(
 
   const childMenu = (
     <Menu
+      {...menuProps}
       onClickOutside={onClickOutside}
       onEscape={onEscape}
       onItemClick={handleChildItemClick}
@@ -143,7 +166,7 @@ export function MenuGroup(
     </Menu>
   )
 
-  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
     const target = event.currentTarget
 
     if (document.activeElement !== target) {
@@ -162,11 +185,12 @@ export function MenuGroup(
   return (
     <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
       <Selectable
-        data-as={as}
+        // data-as={as}
         data-ui="MenuGroup"
-        forwardedAs={as}
+        // forwardedAs={as}
         {...restProps}
         aria-pressed={as === 'button' ? withinMenu : undefined}
+        as={as}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
         onClick={handleClick}
@@ -178,7 +202,7 @@ export function MenuGroup(
         tone={tone}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Flex gap={space} padding={padding}>
+        <Flex gap={gap ?? space} gapX={gapX} gapY={gapY} padding={padding}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}

package/src/core/components/menu/menuItem.tsx

@@ -1,8 +1,12 @@
-import {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {GapStyleProps, PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {
+  ElementType,
+  ForwardedRef,
   forwardRef,
   isValidElement,
+  MouseEvent,
+  ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -11,28 +15,27 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-// import {useArrayProp} from '../../hooks'
+
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-// import {useRootTheme} from '../../theme'
-import {SelectableTone} from '../../types/selectable'
+import {Props, SelectableTone} from '../../types'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
 
 /**
  * @public
  */
-export interface MenuItemProps extends PaddingStyleProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
+  disabled?: boolean
   fontSize?: number | number[]
   hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
   pressed?: boolean
   selected?: boolean
-  // space?: number | number[]
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  text?: React.ReactNode
+  text?: ReactNode
   tone?: SelectableTone
 }
 
@@ -40,18 +43,17 @@ export interface MenuItemProps extends PaddingStyleProps, RadiusStyleProps {
  * @public
  */
 export const MenuItem = forwardRef(function MenuItem(
-  props: MenuItemProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'rows' | 'selected' | 'tabIndex' | 'width' | 'wrap'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  props: Props<MenuItemProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     as = 'button',
     children,
     disabled,
     fontSize = 1,
+    gap,
+    gapX,
+    gapY,
     hotkeys,
     icon: IconComponent,
     iconRight: IconRightComponent,
@@ -71,15 +73,17 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  // const {scheme} = useRootTheme()
+
   const menu = useMenu()
   const {
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave,
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)
@@ -89,7 +93,7 @@ export const MenuItem = forwardRef(function MenuItem(
   useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLDivElement>) => {
       if (disabled) return
       if (onClick) onClick(event)
       if (onItemClick) onItemClick()
@@ -110,8 +114,6 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  // const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
-
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
     setRootElement(el)
@@ -120,32 +122,26 @@ export const MenuItem = forwardRef(function MenuItem(
   return (
     <Selectable
       data-ui="MenuItem"
+      role="menuitem"
       {...restProps}
-      aria-pressed={as === 'button' && pressed}
       as={as}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
+      data-pressed={pressed ? '' : undefined}
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      // forwardedAs={as}
       radius={radius}
-      // $radius={useArrayProp(radius)}
-      // $padding={useArrayProp(0)}
-      // $tone={disabled ? 'default' : tone}
-      // $scheme={scheme}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
-      role="menuitem"
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={space} align="center" {...paddingProps}>
+        <Flex as="span" gap={gap ?? space} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
           {IconComponent && (
-            <Text size={fontSize}>
+            <Text muted size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}
               {isValidElementType(IconComponent) && <IconComponent />}
             </Text>
@@ -160,21 +156,18 @@ export const MenuItem = forwardRef(function MenuItem(
           )}
 
           {hotkeys && (
-            <Hotkeys
-              // fontSize={hotkeysFontSize}
-              keys={hotkeys}
-              style={{marginTop: -4, marginBottom: -4}}
-            />
+            <Hotkeys gap={0.5} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
           )}
 
           {IconRightComponent && (
-            <Text size={fontSize}>
+            <Text muted size={fontSize}>
               {isValidElement(IconRightComponent) && IconRightComponent}
               {isValidElementType(IconRightComponent) && <IconRightComponent />}
             </Text>
           )}
         </Flex>
       )}
+
       {children && (
         <Box as="span" {...paddingProps}>
           {children}

package/src/core/components/menu/useMenu.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {isRecord} from '../../lib/isRecord'
 import {MenuContext, MenuContextValue} from './menuContext'
 

package/src/core/components/menu/useMenuController.ts

@@ -1,4 +1,15 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {
+  KeyboardEvent,
+  KeyboardEventHandler,
+  MouseEvent,
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
 import {_getFocusableElements, _sortElements} from './helpers'
 
 /**
@@ -7,9 +18,9 @@ import {_getFocusableElements, _sortElements} from './helpers'
 export interface MenuController {
   activeElement: HTMLElement | null
   activeIndex: number
-  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  handleItemMouseEnter: (event: MouseEvent<HTMLElement>) => void
   handleItemMouseLeave: () => void
-  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
 }
 
@@ -19,10 +30,10 @@ export interface MenuController {
  * @internal
  */
 export function useMenuController(props: {
-  onKeyDown?: React.KeyboardEventHandler
+  onKeyDown?: KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
-  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
+  rootElementRef: MutableRefObject<HTMLDivElement | null>
 }): MenuController {
   const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
   const elementsRef = useRef<HTMLElement[]>([])
@@ -63,7 +74,7 @@ export function useMenuController(props: {
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       // Move focus to the element that opened the menu before handling the `Tab` press
       if (event.key === 'Tab') {
         if (originElement) {
@@ -161,7 +172,7 @@ export function useMenuController(props: {
   )
 
   const handleItemMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
+    (event: MouseEvent<HTMLElement>) => {
       const element = event.currentTarget
       const currentIndex = elementsRef.current.indexOf(element)
 

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -12,7 +12,8 @@ import {
   TextSkeleton,
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function SkeletonDelayStory() {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'

package/src/core/components/skeleton/__workshop__/skeleton.tsx

@@ -12,7 +12,8 @@ import {
   TextSkeleton,
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function SkeletonStory() {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'

package/src/core/components/skeleton/skeleton.tsx

@@ -1,6 +1,8 @@
 import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, HTMLProps, useEffect, useState} from 'react'
+import {ForwardedRef, forwardRef, useEffect, useState} from 'react'
+
 import {Box, BoxProps} from '../../primitives'
+import {Props} from '../../types'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -16,8 +18,7 @@ export interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'child
  * @beta
  */
 export const Skeleton = forwardRef(function Skeleton(
-  props: SkeletonProps &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
+  props: Props<SkeletonProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {animated = false, className, delay, radius, ...restProps} = props