@sanity/ui 4.0.0-static.22 → 4.0.0-static.24

package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx}

@@ -3,10 +3,10 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives/layer/layerProvider'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
+import {LayerProvider} from '../../primitives/layer/LayerProvider'
+import {Toast} from './Toast'
+import {ToastContext} from './ToastContext'
+import {ToastLayer, type ToastLayerProps} from './ToastLayer'
 import {generateToastId} from './toastState'
 import type {ToastContextValue, ToastParams} from './types'
 

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,7 +1,7 @@
 import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 
 /** @public */

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 */

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__/index.ts

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       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}

@@ -13,9 +13,9 @@ import {type ElementType as ReactElementType, isValidElement, type ReactNode} fr
 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 */

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')),
     },
   ],
 }

package/src/core/primitives/card/{card.tsx → Card.tsx}

@@ -1,10 +1,10 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
-import {useContext} from 'react'
+import {use} from 'react'
 
 import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-import {CardContext} from './cardContext'
-import {CardProvider} from './cardProvider'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
+import {CardContext} from './CardContext'
+import {CardProvider} from './CardProvider'
 
 /** @public */
 export const DEFAULT_CARD_ELEMENT = 'div'
@@ -56,7 +56,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
     ...rest
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const parent = useContext(CardContext)
+  const parent = use(CardContext)
   const tone = toneProp === 'inherit' ? parent?.tone : toneProp
   const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 

package/src/core/primitives/card/{cardProvider.tsx → CardProvider.tsx}

@@ -1,7 +1,7 @@
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import {type ReactNode, useMemo} from 'react'
 
-import {CardContext} from './cardContext'
+import {CardContext} from './CardContext'
 import type {_CardCompatProviderComponent} from './types'
 
 /** @public */

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

@@ -5,15 +5,15 @@ const scope: WorkshopScope = {
   name: 'primitives/card',
   title: 'Card',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-    {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
-    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'styled', title: 'Styled', component: lazy(() => import('./Styled'))},
+    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./Interactive'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./Tones'))},
+    {name: 'as-button', title: 'As button', component: lazy(() => import('./AsButton'))},
+    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./ListNavigation'))},
+    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./Checkered'))},
+    {name: 'as-component', title: 'As component', component: lazy(() => import('./AsComponent'))},
+    {name: 'selected', title: 'Selected', component: lazy(() => import('./Selected'))},
   ],
 }
 

package/src/core/primitives/card/useCard.ts

@@ -1,11 +1,11 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {CardContext} from './cardContext'
+import {CardContext} from './CardContext'
 import type {CardContextValue} from './types'
 
 /** @public */
 export function useCard(): CardContextValue {
-  const card = useContext(CardContext)
+  const card = use(CardContext)
 
   if (!card) {
     throw new Error('useCard(): missing context value')