refactor: no more barrel files

.eslintignore

@@ -1,4 +1,3 @@
 .workshop
 dist
 storybook-static
-theme.js

.gitignore

@@ -7,5 +7,3 @@ dist
 etc
 node_modules
 storybook-static
-_visual-editing.js
-theme.js

.storybook/decorators/withSanityTheme.decorator.tsx

@@ -2,7 +2,9 @@ import {DecoratorHelpers} from '@storybook/addon-themes'
 import {StoryFn} from '@storybook/react'
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
-import {Card, ThemeProvider, studioTheme} from '../../src/core'
+import { Card } from '../../src/core/primitives/card/card'
+import { ThemeProvider } from '../../src/core/theme/themeProvider'
+import { studioTheme } from '../../src/core/_compat'
 
 const {initializeThemeState, pluckThemeFromContext, useThemeParameters} = DecoratorHelpers
 

figma/package.config.ts

@@ -1,9 +1,6 @@
 import {defineConfig} from '@sanity/pkg-utils'
 
 export default defineConfig({
-  babel: {
-    plugins: ['@babel/plugin-transform-object-rest-spread'],
-  },
   dist: './dist',
   src: './src',
   tsconfig: './tsconfig.dist.json',

figma/package.json

@@ -21,7 +21,6 @@
     "watch": "pkg watch --strict"
   },
   "devDependencies": {
-    "@babel/plugin-transform-object-rest-spread": "^7.25.9",
     "@figma/plugin-typings": "^1.109.0",
     "@sanity/color": "^3.0.6",
     "@sanity/ui": "workspace:*",

figma/tsconfig.dist.json

@@ -1,13 +1,10 @@
 {
-  "extends": "../tsconfig.settings",
+  "extends": "@sanity/pkg-utils/tsconfig/recommended.json",
   "include": ["./src"],
   "exclude": ["./src/**/*.test.ts"],
   "compilerOptions": {
     "rootDir": ".",
     "outDir": "./dist",
-    "target": "ES6",
-    "lib": ["ES2020"],
-    "typeRoots": ["./node_modules/@types", "./node_modules/@figma"],
-    "resolveJsonModule": true
+    "typeRoots": ["./node_modules/@types", "./node_modules/@figma"]
   }
 }

figma/tsconfig.json

@@ -1,12 +1,9 @@
 {
-  "extends": "../tsconfig.settings",
+  "extends": "@sanity/pkg-utils/tsconfig/recommended.json",
   "include": ["../exports", "../src", "../typings", "./src"],
   "compilerOptions": {
-    "composite": true,
     "rootDir": "..",
     "outDir": "./dist/types",
-    "target": "ES6",
-    "lib": ["ES2020"],
     "paths": {
       "@sanity/ui/*": ["../exports/*"],
       "@sanity/ui": ["../exports"]

src/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -9,7 +9,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
-import {Popover} from '../../../primitives'
+import { Popover } from '../../../primitives/popover/popover'
 import countries from '../__fixtures__/countries'
 import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'

src/core/components/autocomplete/autocomplete.styles.tsx

@@ -1,6 +1,6 @@
 import {SpinnerIcon} from '@sanity/icons'
 import {styled, keyframes} from 'styled-components'
-import {Box} from '../../primitives'
+import { Box } from '../../primitives/box/box'
 
 /**
  * @internal

src/core/components/autocomplete/autocomplete.tsx

@@ -18,20 +18,17 @@
   useRef,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
-import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
-import {
-  Box,
-  BoxProps,
-  Button,
-  Card,
-  Popover,
-  PopoverProps,
-  Stack,
-  Text,
-  TextInput,
-} from '../../primitives'
-import {Radius} from '../../types'
+import { _hasFocus, focusFirstDescendant } from '../../helpers/focus'
+import { _raf } from '../../helpers/animation'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Box, BoxProps } from '../../primitives/box/box'
+import { Button } from '../../primitives/button/button'
+import { Card } from '../../primitives/card/card'
+import { Popover, PopoverProps } from '../../primitives/popover/popover'
+import { Stack } from '../../primitives/stack/stack'
+import { Text } from '../../primitives/text/text'
+import { TextInput } from '../../primitives/textInput/textInput'
+import { Radius } from '../../types/radius'
 import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
@@ -632,14 +629,14 @@
   const results = useMemo(() => {
     if (renderPopover) {
       return renderPopover(
         {
           content,
           hidden: !expanded,
           inputElement: inputElementRef.current,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
         resultsPopoverElementRef,
       )
     }
 
@@ -662,7 +659,7 @@
         portal
         radius={radius}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
       />
     )

src/core/components/autocomplete/autocompleteOption.tsx

@@ -1,5 +1,5 @@
 import {useCallback} from 'react'
-import {_isEnterToClickElement} from '../../helpers'
+import { _isEnterToClickElement } from '../../helpers/element'
 
 export interface AutocompleteOptionProps {
   children: React.ReactNode

src/core/components/autocomplete/constants.ts

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

src/core/components/autocomplete/types.ts

@@ -1,4 +1,4 @@
-import {ButtonProps} from '../../primitives'
+import { ButtonProps } from '../../primitives/button/button'
 
 /**
  * @public

src/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,5 +1,5 @@
 import {styled} from 'styled-components'
-import {Button} from '../../primitives'
+import { Button } from '../../primitives/button/button'
 
 export const StyledBreadcrumbs = styled.ol`
   margin: 0;

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -8,8 +8,12 @@ import {
   useRef,
   useState,
 } from 'react'
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
-import {Box, Popover, Stack, Text} from '../../primitives'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useClickOutsideEvent } from '../../hooks/useClickOutsideEvent'
+import { Box } from '../../primitives/box/box'
+import { Popover } from '../../primitives/popover/popover'
+import { Stack } from '../../primitives/stack/stack'
+import { Text } from '../../primitives/text/text'
 import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 
 /**

src/core/components/dialog/__workshop__/activate.tsx

@@ -1,7 +1,13 @@
 import {useState} from 'react'
-import {Stack, Flex, Button, Text} from '../../../primitives'
-import {Layer, LayerProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
+import { Stack } from '../../../primitives/stack/stack'
+import { Flex } from '../../../primitives/flex/flex'
+import { Button } from '../../../primitives/button/button'
+import { Text } from '../../../primitives/text/text'
+import { Layer } from '../../../utils/layer/layer'
+import { LayerProvider } from '../../../utils/layer/layerProvider'
+import { Menu } from '../../menu/menu'
+import { MenuButton } from '../../menu/menuButton'
+import { MenuItem } from '../../menu/menuItem'
 import {Dialog} from '../dialog'
 
 export default function LayeringFocusStory() {

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

@@ -1,8 +1,14 @@
 import {useCallback, useState} from 'react'
 import {styled} from 'styled-components'
-import {Box, Button, Card, Flex} from '../../../primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
+import { Card } from '../../../primitives/card/card'
+import { Flex } from '../../../primitives/flex/flex'
+import { BoundaryElementProvider } from '../../../utils/boundaryElement/boundaryElementProvider'
+import { PortalProvider } from '../../../utils/portal/portalProvider'
+import { Menu } from '../../menu/menu'
+import { MenuButton } from '../../menu/menuButton'
+import { MenuItem } from '../../menu/menuItem'
 import {Dialog} from '../dialog'
 
 export default function PanesStory() {

src/core/components/dialog/__workshop__/wrapped.tsx

@@ -1,6 +1,8 @@
 import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {Box, Button} from '../../../primitives'
-import {LayerProvider, useLayer} from '../../../utils'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
+import { LayerProvider } from '../../../utils/layer/layerProvider'
+import { useLayer } from '../../../utils/layer/useLayer'
 import {Dialog, DialogProps} from '../dialog'
 
 export default function WrappedStory() {

src/core/components/dialog/dialog.tsx

@@ -2,24 +2,28 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {
-  containsOrEqualsElement,
-  focusFirstDescendant,
-  focusLastDescendant,
-  isHTMLElement,
-} from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
-import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
+import { containsOrEqualsElement, isHTMLElement } from '../../helpers/element'
+import { focusFirstDescendant, focusLastDescendant } from '../../helpers/focus'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { useClickOutsideEvent } from '../../hooks/useClickOutsideEvent'
+import { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown'
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion'
+import { Box } from '../../primitives/box/box'
+import { Button } from '../../primitives/button/button'
+import { Card } from '../../primitives/card/card'
+import { Container } from '../../primitives/container/container'
+import { Flex } from '../../primitives/flex/flex'
+import { Text } from '../../primitives/text/text'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {DialogPosition, Radius} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
+import { useTheme_v2 } from '../../theme/useTheme'
+import { DialogPosition } from '../../types/dialog'
+import { Radius } from '../../types/radius'
+import { Layer, LayerProps } from '../../utils/layer/layer'
+import { Portal } from '../../utils/portal/portal'
+import { useBoundaryElement } from '../../utils/boundaryElement/useBoundaryElement'
+import { useLayer } from '../../utils/layer/useLayer'
+import { usePortal } from '../../utils/portal/usePortal'
 import {
   animationDialogStyle,
   AnimationDialogStyleProps,

src/core/components/dialog/dialogContext.ts

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {DialogPosition} from '../../types'
+import { DialogPosition } from '../../types/dialog'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

src/core/components/dialog/dialogProvider.tsx

@@ -1,5 +1,5 @@
 import {useMemo} from 'react'
-import {DialogPosition} from '../../types'
+import { DialogPosition } from '../../types/dialog'
 import {DialogContext, DialogContextValue} from './dialogContext'
 
 /**

src/core/components/dialog/styles.ts

@@ -1,7 +1,8 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {_responsive, ThemeProps} from '../../styles'
-import {DialogPosition} from '../../types'
+import { _responsive } from '../../styles/helpers'
+import { ThemeProps } from '../../styles/types'
+import { DialogPosition } from '../../types/dialog'
 
 /**
  * @internal

src/core/components/hotkeys/hotkeys.tsx

@@ -1,8 +1,9 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Inline, KBD} from '../../primitives'
-import {Radius} from '../../types'
+import { useArrayProp } from '../../hooks/useArrayProp'
+import { Inline } from '../../primitives/inline/inline'
+import { KBD } from '../../primitives/kbd/kbd'
+import { Radius } from '../../types/radius'
 
 /**
  * @public

src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -1,6 +1,11 @@
 import {UsersIcon} from '@sanity/icons'
-import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
-import {Hotkeys} from '../../hotkeys'
+import { Avatar } from '../../../primitives/avatar/avatar'
+import { Badge } from '../../../primitives/badge/badge'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
+import { Flex } from '../../../primitives/flex/flex'
+import { Text } from '../../../primitives/text/text'
+import { Hotkeys } from '../../hotkeys/hotkeys'
 import {Menu} from '../menu'
 import {MenuButton} from '../menuButton'
 import {MenuItem} from '../menuItem'

src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -1,6 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {useSelect} from '@sanity/ui-workshop'
-import {Box, Button} from '../../../primitives'
+import { Box } from '../../../primitives/box/box'
+import { Button } from '../../../primitives/button/button'
 import {Menu} from '../menu'
 import {MenuButton} from '../menuButton'
 import {MenuItem} from '../menuItem'

src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -1,7 +1,9 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {Fragment, useCallback, useState} from 'react'
-import {Button, Flex, Popover} from '../../../primitives'
-import {LayerProvider} from '../../../utils'
+import { Button } from '../../../primitives/button/button'
+import { Flex } from '../../../primitives/flex/flex'
+import { Popover } from '../../../primitives/popover/popover'
+import { LayerProvider } from '../../../utils/layer/layerProvider'
 import {Menu} from '../menu'
 import {MenuDivider} from '../menuDivider'
 import {MenuItem} from '../menuItem'

src/core/components/menu/helpers.ts

@@ -1,4 +1,4 @@
-import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers'
+import { isHTMLAnchorElement, isHTMLButtonElement } from '../../helpers/element'
 
 /**
  * @internal

src/core/components/menu/menu.test.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
-import {render} from '../../../../test'
+import { render } from '../../../../test/utils'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 

src/core/components/menu/menu.tsx

@@ -1,9 +1,11 @@
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
+import { useClickOutsideEvent } from '../../hooks/useClickOutsideEvent'
+import { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown'
+import { Box } from '../../primitives/box/box'
+import { Stack } from '../../primitives/stack/stack'
 import {ResponsivePaddingProps} from '../../primitives/types'
-import {useLayer} from '../../utils'
+import { useLayer } from '../../utils/layer/useLayer'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 

src/core/components/menu/menuButton.tsx

@@ -9,8 +9,9 @@ import {
   useRef,
   useImperativeHandle,
 } from 'react'
-import {Popover, PopoverProps} from '../../primitives'
-import {Placement, Radius} from '../../types'
+import { Popover, PopoverProps } from '../../primitives/popover/popover'
+import { Placement } from '../../types/placement'
+import { Radius } from '../../types/radius'
 import {MenuProps} from './menu'
 
 /**

src/core/components/menu/menuGroup.tsx

@@ -1,11 +1,15 @@
 import {ChevronRightIcon} from '@sanity/icons'
 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 { useArrayProp } from '../../hooks/useArrayProp'
+import { Box } from '../../primitives/box/box'
+import { Flex } from '../../primitives/flex/flex'
+import { Popover, PopoverProps } from '../../primitives/popover/popover'
+import { Text } from '../../primitives/text/text'
+import { Selectable } from '../../primitives/_selectable/selectable'
+import { useRootTheme } from '../../theme/useRootTheme'
+import { Radius } from '../../types/radius'
+import { SelectableTone } from '../../types/selectable'
 import {Menu, MenuProps} from './menu'
 import {useMenu} from './useMenu'