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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.0",
+  "version": "3.0.0-static.1",
   "keywords": [
     "sanity",
     "ui",
@@ -102,6 +102,7 @@
     "csstype": "^3.1.3",
     "dotenv-flow": "^4.1.0",
     "framer-motion": "11.0.8",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -113,24 +114,24 @@
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.7",
+    "@sanity/pkg-utils": "^6.11.8",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.16",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-docs": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/addon-links": "^8.4.0",
+    "@storybook/addon-mdx-gfm": "^8.4.0",
+    "@storybook/addon-storysource": "^8.4.0",
+    "@storybook/addon-themes": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/manager-api": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "@storybook/theming": "^8.4.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -172,24 +173,23 @@
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
-    "react-compiler-runtime": "beta",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.5",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.0",
     "styled-components": "^6.1.13",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.6.3",
+    "typescript": "5.6.3",
     "vite": "^5.4.2",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "react-is": "^18",
+    "react": "^18 || >=19.0.0-0",
+    "react-dom": "^18 || >=19.0.0-0",
+    "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
   "engines": {

package/src/core/__workshop__/constants.ts

@@ -9,12 +9,20 @@ import {
   CardTone,
   DialogPosition,
   FlexAlign,
+  FlexDirection,
   FlexJustify,
   Placement,
   TextAlign,
   TextInputType,
 } from '@sanity/ui'
-import {Space, ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {
+  ContainerWidth,
+  FontHeadingSize,
+  Space,
+  ThemeColorSpotKey,
+  ThemeColorToneKey,
+  ThemeFontWeightKey,
+} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0': 0,
@@ -85,7 +93,7 @@ export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
   TypeScript: 'typescript',
 }
 
-export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: ContainerWidth} = {
   '0': 0,
   '1': 1,
   '2': 2,
@@ -100,7 +108,7 @@ export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} =
   Absolute: 'absolute',
 }
 
-export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'} = {
+export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: FlexDirection} = {
   Row: 'row',
   Column: 'column',
 }
@@ -129,12 +137,13 @@ export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} =
   Bold: 'bold',
 }
 
-export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
+export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS: Record<string, FontHeadingSize> = {
   '0': 0,
   '1': 1,
   '2 (default)': 2,
   '3': 3,
   '4': 4,
+  '5': 5,
 }
 
 export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
@@ -285,7 +294,7 @@ export const WORKSHOP_TOAST_STATUS_OPTIONS: {
   Error: 'error',
 }
 
-export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: ContainerWidth} = {
   'Auto': 'auto',
   '0': 0,
   '1': 1,

package/src/core/__workshop__/fontsPlugin.tsx

@@ -1,5 +1,5 @@
 import {WorkshopPlugin} from '@sanity/ui-workshop'
-import {createGlobalStyle} from '../lib/styled'
+import {createGlobalStyle} from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   @font-face {

package/src/core/_compat/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './styles'

package/src/core/{styles → _compat/styles}/box/boxStyle.ts

@@ -18,7 +18,7 @@ const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
 const BOX_HEIGHT = {
   stretch: 'stretch',
   fill: '100%',
-}
+} as const
 
 /** @deprecated */
 export function boxStyle(): CSSObject {

package/src/core/{styles → _compat/styles}/box/types.ts

@@ -1,4 +1,4 @@
-import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
+import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/card/_cardColorStyle.ts

@@ -88,8 +88,8 @@ export function _cardColorStyle(
     '--card-muted-bg-color': color.muted.bg,
     '--card-muted-fg-color': color.muted.fg,
 
-    '--card-skeleton-color-from': color.skeleton.from,
-    '--card-skeleton-color-to': color.skeleton.to,
+    '--card-skeleton-from-color': color.skeleton.from,
+    '--card-skeleton-to-color': color.skeleton.to,
 
     // deprecated variables (kept for legacy)
 

package/src/core/{styles → _compat/styles}/flex/flexItemStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {EMPTY_ARRAY} from '../../constants'
+import {EMPTY_ARRAY} from '../../../constants'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'

package/src/core/{styles → _compat/styles}/font/types.ts

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {TextAlign} from '../../types'
+import {TextAlign} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/grid/types.ts

@@ -8,7 +8,7 @@ import {
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
-} from '../../types'
+} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/helpers.ts

@@ -1,6 +1,6 @@
 import {Theme, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {EMPTY_ARRAY} from '../constants'
+import {EMPTY_ARRAY} from '../../constants'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/input/textInputStyle.ts

@@ -1,7 +1,7 @@
 import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {css} from '../../lib/styled'
-import {CardTone} from '../../types'
+import {css} from '../../../lib/styled'
+import {CardTone} from '../../../types'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'

package/src/core/{styles → _compat/styles}/radius/types.ts

@@ -1,4 +1,4 @@
-import {Radius} from '../../types'
+import {Radius} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/shadow/shadowStyle.ts

@@ -1,6 +1,6 @@
 import {ThemeBoxShadow, ThemeShadow, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {EMPTY_RECORD} from '../../constants'
+import {EMPTY_RECORD} from '../../../constants'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveShadowStyleProps} from './types'

package/src/core/components/autocomplete/__workshop__/custom.tsx

@@ -1,4 +1,5 @@
-import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
+import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 import {
@@ -29,7 +30,7 @@ export default function CustomStory() {
         key={option.value}
         onClick={(event) => event.preventDefault()}
         padding={padding}
-        radius={radius - 1}
+        radius={(radius - 1) as Radius}
       >
         <Text size={fontSize}>{option.title}</Text>
       </Card>
@@ -60,14 +61,14 @@ export default function CustomStory() {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
-              fontSize={fontSize}
+              fontSize={fontSize as FontTextSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
               padding={padding}
               placeholder="Search"
-              radius={radius}
+              radius={radius as Radius}
               readOnly={readOnly}
               renderOption={renderOption}
               renderValue={renderValue}

package/src/core/components/autocomplete/__workshop__/example.tsx

@@ -1,4 +1,5 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
+import {FontTextSize, Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
@@ -57,14 +58,14 @@ export default function ExampleStory() {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
-                fontSize={fontSize}
+                fontSize={fontSize as FontTextSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
                 padding={padding}
                 placeholder="Search"
-                radius={radius}
+                radius={radius as Radius}
                 readOnly={readOnly}
                 ref={ref}
                 value={value}

package/src/core/components/autocomplete/autocomplete.tsx

@@ -34,8 +34,8 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import {Radius} from '../../types'
-import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -584,7 +584,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     if (filteredOptions.length === 0) return null
 
     return (
-      <ListBox
+      <Box
         data-ui="AutoComplete__results"
         onKeyDown={handleListBoxKeyDown}
         padding={1}
@@ -621,7 +621,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
             )
           })}
         </Stack>
-      </ListBox>
+      </Box>
     )
   }, [
     activeValue,
@@ -686,7 +686,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   ])
 
   return (
-    <Root
+    <div
       data-ui="Autocomplete"
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
@@ -695,7 +695,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     >
       {input}
       {results}
-    </Root>
+    </div>
   )
 })
 

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useState} from 'react'
-import {styled} from '../../../lib/styled'
+import {styled} from 'styled-components'
 import {Box, Button, Card, Flex} from '../../../primitives'
 import {BoundaryElementProvider, PortalProvider} from '../../../utils'
 import {Menu, MenuButton, MenuItem} from '../../menu'

package/src/core/components/dialog/__workshop__/props.tsx

@@ -4,6 +4,7 @@ import {useCallback, useRef, useState} from 'react'
 import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
+  const animate = useBoolean('Animate', false, 'Props')
   const header = useText('Header', 'Props example', 'Props')
   const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
   const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
@@ -29,6 +30,7 @@ export default function PropsStory() {
         {open && (
           <Dialog
             __unstable_hideCloseButton={hideCloseButton}
+            animate={animate}
             header={header}
             id="dialog"
             onClickOutside={onClickOutside ? handleClose : undefined}

package/src/core/components/dialog/dialog.tsx

@@ -262,7 +262,7 @@ DialogCard.displayName = 'ForwardRef(DialogCard)'
  */
 export const Dialog = forwardRef(function Dialog(
   props: DialogProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'id' | 'width' | 'wrap'>,
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'id' | 'rows' | 'width' | 'wrap'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const context = useDialog()
@@ -366,12 +366,8 @@ export const Dialog = forwardRef(function Dialog(
     <Portal __unstable_name={portalProp}>
       <Layer
         {...restProps}
-        // $animate={animate}
-        // $padding={padding}
-        // $position={position}
         aria-labelledby={labelId}
         aria-modal
-        // className="root"
         className={composeClassNames(className, dialog())}
         data-animate={animate ? '' : undefined}
         data-ui="Dialog"

package/src/core/components/hotkeys/hotkeys.tsx

@@ -23,7 +23,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps &
     Omit<
       React.HTMLProps<HTMLDivElement>,
-      'as' | 'display' | 'height' | 'ref' | 'size' | 'width' | 'wrap'
+      'as' | 'display' | 'height' | 'ref' | 'rows' | 'size' | 'width' | 'wrap'
     >,
   ref: React.Ref<HTMLDivElement>,
 ) {

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

@@ -2,7 +2,6 @@ import {PaddingStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {styled} from '../../lib/styled'
 import {Box, Stack} from '../../primitives'
 import {useLayer} from '../../utils'
 import {MenuContext, MenuContextValue} from './menuContext'
@@ -27,15 +26,9 @@ export interface MenuProps extends PaddingStyleProps {
   originElement?: HTMLElement | null
   registerElement?: (el: HTMLElement) => () => void
   shouldFocus?: 'first' | 'last' | null
-  // space?: number | number[]
   space?: ResponsiveProp<Space>
 }
 
-const Root = styled(Box)`
-  outline: none;
-  overflow: auto;
-`
-
 /**
  * The `Menu` component is a building block for application menus.
  *
@@ -43,7 +36,10 @@ const Root = styled(Box)`
  */
 export const Menu = forwardRef(function Menu(
   props: MenuProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex' | 'width' | 'wrap'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'role' | 'rows' | 'tabIndex' | 'width' | 'wrap'
+    >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -158,17 +154,19 @@ export const Menu = forwardRef(function Menu(
 
   return (
     <MenuContext.Provider value={value}>
-      <Root
+      <Box
         data-ui="Menu"
         {...restProps}
         onKeyDown={handleKeyDown}
+        overflow="auto"
+        outline="none"
         padding={padding}
         ref={handleRefChange}
         role="menu"
         tabIndex={-1}
       >
         <Stack space={space}>{children}</Stack>
-      </Root>
+      </Box>
     </MenuContext.Provider>
   )
 })

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

@@ -0,0 +1,16 @@
+import {composeClassNames, menuDivider} from '@sanity/ui/css'
+import {forwardRef, HTMLProps} from 'react'
+
+/**
+ * @public
+ */
+export const MenuDivider = forwardRef(function MenuDivider(
+  props: HTMLProps<HTMLHRElement>,
+  ref: React.ForwardedRef<HTMLHRElement>,
+) {
+  const {className, ...restProps} = props
+
+  return <hr {...restProps} className={composeClassNames(className, menuDivider())} ref={ref} />
+})
+
+MenuDivider.displayName = 'MenuDivider'

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

@@ -3,10 +3,8 @@ import {ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
-// import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-// import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -22,7 +20,6 @@ export interface MenuGroupProps {
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
   space?: ResponsiveProp<Space>
-  // space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
 }
@@ -33,7 +30,7 @@ export interface MenuGroupProps {
 export function MenuGroup(
   props: Omit<
     React.HTMLProps<HTMLDivElement>,
-    'as' | 'height' | 'popover' | 'ref' | 'tabIndex' | 'width' | 'wrap'
+    'as' | 'height' | 'popover' | 'ref' | 'rows' | 'tabIndex' | 'width' | 'wrap'
   > &
     MenuGroupProps,
 ): React.ReactElement {
@@ -52,7 +49,7 @@ export function MenuGroup(
     ...restProps
   } = props
   const menu = useMenu()
-  // const {scheme} = useRootTheme()
+
   const {
     activeElement,
     mount,
@@ -172,9 +169,6 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        // $radius={useArrayProp(radius)}
-        // $tone={tone}
-        // $scheme={scheme}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}

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

@@ -43,7 +43,7 @@ export const MenuItem = forwardRef(function MenuItem(
   props: MenuItemProps &
     Omit<
       React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'width' | 'wrap'
+      'as' | 'height' | 'ref' | 'rows' | 'selected' | 'tabIndex' | 'width' | 'wrap'
     >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {

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

@@ -1,21 +1,12 @@
-import {forwardRef, useEffect, useState} from 'react'
-import {styled} from '../../lib/styled'
-import {useArrayProp} from '../../hooks'
-import {Box} from '../../primitives'
-import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {skeletonStyle} from './styles'
-
-const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  skeletonStyle,
-)
+import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, HTMLProps, useEffect, useState} from 'react'
+import {Box, BoxProps} from '../../primitives'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
   animated?: boolean
   delay?: number
 }
@@ -25,10 +16,11 @@ export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'ch
  * @beta
  */
 export const Skeleton = forwardRef(function Skeleton(
-  props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
-  ref: React.Ref<HTMLDivElement>,
+  props: SkeletonProps &
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {animated = false, delay, radius, ...restProps} = props
+  const {animated = false, className, delay, radius, ...restProps} = props
   const [visible, setVisible] = useState<boolean>(delay ? false : true)
 
   useEffect(() => {
@@ -46,13 +38,15 @@ export const Skeleton = forwardRef(function Skeleton(
   }, [delay])
 
   return (
-    <Root
+    <Box
+      data-ui="Skeleton"
       {...restProps}
-      $animated={animated}
-      $radius={useArrayProp(radius)}
-      $visible={visible}
+      className={composeClassNames(className, skeleton({radius}))}
+      data-animated={animated ? '' : undefined}
+      data-visible={visible ? '' : undefined}
       ref={ref}
     />
   )
 })
+
 Skeleton.displayName = 'ForwardRef(Skeleton)'