@sanity/ui 4.0.0-static.23 → 4.0.0-static.25

package/src/core/components/toast/__workshop__/index.ts

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'toast',
       title: 'Toast',
-      component: lazy(() => import('./toast')),
+      component: lazy(() => import('./Toast')),
     },
     {
       name: 'hook',
       title: 'Hook',
-      component: lazy(() => import('./hook')),
+      component: lazy(() => import('./Hook')),
     },
   ],
 }

package/src/core/components/toast/useToast.ts

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 
 /** @public */
 export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
+  const value = use(ToastContext)
 
   if (!value) {
     throw new Error('useToast(): missing context value')

package/src/core/components/tree/{tree.tsx → Tree.tsx}

@@ -11,10 +11,10 @@ import {
   useState,
 } from 'react'
 
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
-import {TreeContext} from './treeContext'
+import {TreeContext} from './TreeContext'
 import type {TreeContextValue, TreeState} from './types'
 
 /** @beta */

package/src/core/components/tree/{treeGroup.tsx → TreeGroup.tsx}

@@ -1,4 +1,4 @@
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
 import {useTree} from './useTree'
 

package/src/core/components/tree/{treeItem.tsx → TreeItem.tsx}

@@ -15,14 +15,14 @@ import {
   useRef,
 } from 'react'
 
-import {Box, type BoxProps} from '../../primitives/box/box'
-import type {CardOwnProps} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
-import {Selectable, type SelectableElementType} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box, type BoxProps} from '../../primitives/box/Box'
+import type {CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Selectable, type SelectableElementType} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {TreeContext} from './treeContext'
-import {TreeGroup} from './treeGroup'
+import {TreeContext} from './TreeContext'
+import {TreeGroup} from './TreeGroup'
 import {useTree} from './useTree'
 
 /** @beta */

package/src/core/components/tree/__workshop__/index.ts

@@ -8,14 +8,14 @@ const scope: WorkshopScope = {
     {
       name: 'basic',
       title: 'Basic',
-      component: lazy(() => import('./basic')),
-      // options: {perfTests: () => import('./basic.perf')},
+      component: lazy(() => import('./Basic')),
+      // options: {perfTests: () => import('./Basic.perf')},
     },
     {
       name: 'tab',
       title: 'Tab',
-      component: lazy(() => import('./tabFromElement')),
-      // options: {perfTests: () => import('./basic.perf')},
+      component: lazy(() => import('./TabFromElement')),
+      // options: {perfTests: () => import('./Basic.perf')},
     },
   ],
 }

package/src/core/components/tree/useTree.ts

@@ -1,13 +1,13 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {TreeContext} from './treeContext'
+import {TreeContext} from './TreeContext'
 import type {TreeContextValue} from './types'
 
 /**
  * @beta
  */
 export function useTree(): TreeContextValue {
-  const tree = useContext(TreeContext)
+  const tree = use(TreeContext)
 
   if (!tree) {
     throw new Error('Tree: missing context value')

package/src/core/components/virtualList/{virtualList.tsx → VirtualList.tsx}

@@ -12,7 +12,7 @@ import {
 
 import {_isScrollable} from '../../helpers/scroll'
 import {_ResizeObserver} from '../../observers/resize'
-import {Box} from '../../primitives/box/box'
+import {Box} from '../../primitives/box/Box'
 import type {ComponentType, Props} from '../../types'
 
 /** @beta */

package/src/core/components/virtualList/__workshop__/index.ts

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'window-scroll',
       title: 'Window scroll',
-      component: lazy(() => import('./windowScrolll')),
+      component: lazy(() => import('./WindowScrolll')),
     },
     {
       name: 'element-scroll',
       title: 'Element scroll',
-      component: lazy(() => import('./elementScroll')),
+      component: lazy(() => import('./ElementScroll')),
     },
     {
       name: 'infinite-list',
       title: 'Infinite list',
-      component: lazy(() => import('./infiniteList')),
+      component: lazy(() => import('./InfiniteList')),
     },
     {
       name: 'changing-props',
       title: 'Changing props',
-      component: lazy(() => import('./changingProps')),
+      component: lazy(() => import('./ChangingProps')),
     },
   ],
 }

package/src/core/hooks/useMediaIndex/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'test',
       title: 'Test',
-      component: lazy(() => import('./test')),
+      component: lazy(() => import('./Test')),
     },
   ],
 }

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'
@@ -49,61 +49,64 @@ 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 * 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 * 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 * 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'
 

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

@@ -11,8 +11,8 @@ import {useCallback, useEffect, useMemo, useState} 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'
 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',
@@ -104,7 +104,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__/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__/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__/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__/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>
@@ -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,7 +87,6 @@ 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>

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

@@ -8,57 +8,57 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'styled-1',
       title: 'Styled #1',
-      component: lazy(() => import('./styled1')),
+      component: lazy(() => import('./Styled1')),
     },
     {
       name: 'styled-2',
       title: 'Styled #2',
-      component: lazy(() => import('./styled2')),
+      component: lazy(() => import('./Styled2')),
     },
     {
       name: 'stacked',
       title: 'Stacked',
-      component: lazy(() => import('./stacked')),
+      component: lazy(() => import('./Stacked')),
     },
     {
       name: 'custom',
       title: 'Custom',
-      component: lazy(() => import('./custom')),
+      component: lazy(() => import('./Custom')),
     },
     {
       name: 'mixed-children',
       title: 'Mixed children',
-      component: lazy(() => import('./mixedChildren')),
+      component: lazy(() => import('./MixedChildren')),
     },
     {
       name: 'upload-button',
       title: 'Upload button',
-      component: lazy(() => import('./uploadButton')),
+      component: lazy(() => import('./UploadButton')),
     },
     {
       name: 'sanity-upload-button-workaround',
       title: 'SanityUploadButtonWorkaroundStory',
-      component: lazy(() => import('./sanityUploadButton')),
+      component: lazy(() => import('./SanityUploadButton')),
     },
     {
       name: 'custom-icons',
       title: 'Custom icons',
-      component: lazy(() => import('./customIcons')),
+      component: lazy(() => import('./CustomIcons')),
     },
     {
       name: 'disabled',
       title: 'Disabled',
-      component: lazy(() => import('./disabled')),
+      component: lazy(() => import('./Disabled')),
     },
     {
       name: 'text-overflow',
       title: 'Text overflow',
-      component: lazy(() => import('./textOverflow')),
+      component: lazy(() => import('./TextOverflow')),
     },
   ],
 }