@sanity/ui 2.10.0-corel.0 → 3.0.0-static.0

package/exports/css.ts

@@ -0,0 +1 @@
+export * from '../src/css'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.0-corel.0",
+  "version": "3.0.0-static.0",
   "keywords": [
     "sanity",
     "ui",
@@ -27,12 +27,24 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./css": {
+      "source": "./exports/css.ts",
+      "import": "./dist/css.mjs",
+      "require": "./dist/css.js",
+      "default": "./dist/css.js"
+    },
+    "./system.css": {
+      "default": "./dist/system.css"
+    },
     "./theme": {
       "source": "./exports/theme.ts",
       "import": "./dist/theme.mjs",
       "require": "./dist/theme.js",
       "default": "./dist/theme.js"
     },
+    "./sanity-theme.css": {
+      "default": "./dist/sanity-theme.css"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -45,6 +57,9 @@
       ]
     }
   },
+  "bin": {
+    "ui": "./bin/ui.js"
+  },
   "files": [
     "dist",
     "exports",
@@ -82,7 +97,10 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.4.0",
+    "@sanity/ui": "^2.8.10",
+    "cac": "^6.7.14",
     "csstype": "^3.1.3",
+    "dotenv-flow": "^4.1.0",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -96,7 +114,7 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^6.11.7",
-    "@sanity/prettier-config": "^1.0.2",
+    "@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",
@@ -132,6 +150,7 @@
     "cypress": "^13.13.2",
     "cypress-real-events": "^1.13.0",
     "cz-conventional-changelog": "^3.3.0",
+    "esbuild-register": "^3.6.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-boundaries": "^4.2.2",
@@ -149,6 +168,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
+    "npm-run-all": "^4.1.5",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -162,7 +182,7 @@
     "storybook": "^8.3.6",
     "styled-components": "^6.1.13",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.5.3",
+    "typescript": "^5.6.3",
     "vite": "^5.4.2",
     "vite-tsconfig-paths": "^5.0.1"
   },
@@ -182,7 +202,8 @@
     "bundle": false
   },
   "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "bin:build": "./bin/ui.js build",
+    "build": "run-s clean pkg:build bin:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",

package/src/core/__workshop__/constants.ts

@@ -14,11 +14,11 @@ import {
   TextAlign,
   TextInputType,
 } from '@sanity/ui'
-import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {Space, ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0': 0,
-  '1': 1,
+  '1 (default)': 1,
   '2': 2,
   '3': 3,
 }
@@ -60,12 +60,12 @@ export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
 export const WORKSHOP_CARD_AS_OPTIONS: {
   [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
 } = {
-  DIV: 'div',
-  BUTTON: 'button',
-  SPAN: 'span',
-  OL: 'ol',
-  PRE: 'pre',
-  UL: 'ul',
+  'DIV (default)': 'div',
+  'BUTTON': 'button',
+  'SPAN': 'span',
+  'OL': 'ol',
+  'PRE': 'pre',
+  'UL': 'ul',
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
@@ -132,7 +132,7 @@ export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} =
 export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2': 2,
+  '2 (default)': 2,
   '3': 3,
   '4': 4,
 }
@@ -190,7 +190,7 @@ export const WORKSHOP_SHADOW_OPTIONS = {
   '5': 5,
 }
 
-export const WORKSHOP_SPACE_OPTIONS = {
+export const WORKSHOP_SPACE_OPTIONS: Record<string, Space> = {
   '0': 0,
   '1': 1,
   '2': 2,
@@ -254,16 +254,16 @@ export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} =
 export const WORKSHOP_TEXT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2': 2,
+  '2 (default)': 2,
   '3': 3,
   '4': 4,
 }
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  Regular: 'regular',
-  Medium: 'medium',
-  Semibold: 'semibold',
-  Bold: 'bold',
+  'Regular (default)': '',
+  'Medium': 'medium',
+  'Semibold': 'semibold',
+  'Bold': 'bold',
 }
 
 export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {

package/src/core/__workshop__/fontsPlugin.tsx

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

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

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

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

@@ -1,4 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
 import {
   ChangeEvent,
   ElementType,
@@ -50,7 +52,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   border?: boolean
   customValidity?: string
   filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   icon?: ElementType | ReactNode
   id: string
   /** @beta */
@@ -65,7 +67,8 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   openOnFocus?: boolean
   /** The options to render. */
   options?: Option[]
-  padding?: number | number[]
+  padding?: ResponsiveProp<Space>
+  // padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
     Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: ReactNode
@@ -466,11 +469,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         if (v === 1) return 1
         if (v === 2) return 1
 
-        return v - 2
+        return (v as Space) - 2
       }),
     [padding],
   )
-  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
+
+  const openButtonPadding = useMemo(
+    () => padding.map((v) => Math.max((v as Space) - 1, 0)),
+    [padding],
+  )
+
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
     [openButton],

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

@@ -19,15 +19,13 @@ export default function Example() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Breadcrumbs
-        gapX={1}
-        gapY={3}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        // space={2}
+        space={2}
       >
         <Text size={1}>
           <a href="#">Root</a>

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

@@ -10,10 +10,5 @@ export default defineScope({
       title: 'Example',
       component: lazy(() => import('./example')),
     },
-    {
-      name: 'buttons',
-      title: 'Buttons',
-      component: lazy(() => import('./buttons')),
-    },
   ],
 })

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

@@ -1,5 +1,17 @@
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
+import {Button} from '../../primitives'
 
-export const Root = styled.nav`
+export const Root = styled.ol`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  white-space: nowrap;
   line-height: 0;
 `
+
+export const ExpandButton = styled(Button)`
+  appearance: none;
+  margin: -4px;
+`

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,16 +1,14 @@
+import {breadcrumbs, composeClassNames, GapStyleProps} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {Children, forwardRef, isValidElement, useCallback, useMemo, useRef, useState} from 'react'
 import {useClickOutsideEvent} from '../../hooks'
 import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
-import {Root} from './breadcrumbs.styles'
 
 /**
  * @beta
  */
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends GapStyleProps {
   expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
   maxLength?: number
   separator?: React.ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
@@ -26,11 +24,12 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 ) {
   const {
     children,
+    className,
     expandButton: expandButtonProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     gap: _gapProp,
-    gapX = props.gap ?? props.space ?? 2,
-    gapY = props.gap ?? props.space ?? 2,
+    gapX = props.gap ?? (props.space as Space | undefined) ?? 2,
+    gapY = props.gap ?? (props.space as Space | undefined) ?? 2,
     maxLength,
     separator,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -91,7 +90,12 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   const len = items.length
 
   return (
-    <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
+    <nav
+      data-ui="Breadcrumbs"
+      {...restProps}
+      className={composeClassNames(className, breadcrumbs())}
+      ref={ref}
+    >
       <Flex align="flex-start" as="ol" gapX={gapX} gapY={gapY} wrap="wrap">
         {items.map((item, itemIndex) => (
           <Flex align="flex-start" as="li" gapX={gapX} gapY={gapY} key={itemIndex}>
@@ -100,7 +104,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
           </Flex>
         ))}
       </Flex>
-    </Root>
+    </nav>
   )
 })
+
 Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

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

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

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

@@ -1,7 +1,18 @@
 import {CloseIcon} from '@sanity/icons'
+import {
+  composeClassNames,
+  ContainerStyleProps,
+  dialog,
+  dialogCardRoot,
+  dialogContainer,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogLayout,
+  PaddingStyleProps,
+} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -15,24 +26,15 @@ import {
   usePrefersReducedMotion,
 } from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
-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 {
-  animationDialogStyle,
-  AnimationDialogStyleProps,
-  dialogStyle,
-  responsiveDialogPositionStyle,
-  ResponsiveDialogPositionStyleProps,
-} from './styles'
 import {useDialog} from './useDialog'
 
 /**
  * @public
  */
-export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+export interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
   /**
    * @beta
    */
@@ -41,6 +43,13 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
    * @beta
    */
   __unstable_hideCloseButton?: boolean
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
   cardRadius?: Radius | Radius[]
   cardShadow?: number | number[]
   contentRef?: React.ForwardedRef<HTMLDivElement>
@@ -55,16 +64,9 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey
   zOffset?: number | number[]
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
 }
 
-interface DialogCardProps extends ResponsiveWidthProps {
+interface DialogCardProps extends ContainerStyleProps {
   /**
    * @beta
    */
@@ -99,55 +101,6 @@ function isTargetWithinScope(
   )
 }
 
-const Root = styled(Layer)<
-  ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
->(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
-
-const DialogContainer = styled(Container)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-const DialogCardRoot = styled(Card)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  min-height: 0;
-  max-height: 100%;
-  overflow: hidden;
-  overflow: clip;
-`
-
-const DialogLayout = styled(Flex)`
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-`
-
-const DialogHeader = styled(Box)`
-  position: relative;
-  z-index: 2;
-`
-
-const DialogContent = styled(Box)`
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  outline: none;
-`
-
-const DialogFooter = styled(Box)`
-  position: relative;
-  z-index: 3;
-`
-
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
@@ -236,11 +189,26 @@ const DialogCard = forwardRef(function DialogCard(
   )
 
   return (
-    <DialogContainer data-ui="DialogCard" width={width}>
-      <DialogCardRoot radius={radius} ref={ref} scheme={scheme} shadow={shadow}>
-        <DialogLayout direction="column">
+    <Container
+      align="center"
+      className={dialogContainer()}
+      data-ui="DialogCard"
+      direction="column"
+      display="flex"
+      justify="center"
+      width={width}
+    >
+      <Card
+        className={dialogCardRoot()}
+        display="flex"
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+      >
+        <Flex className={dialogLayout()} direction="column" flex={1}>
           {showHeader && (
-            <DialogHeader>
+            <Box className={dialogHeader()} position="relative">
               <Flex align="flex-start" padding={3}>
                 <Box flex={1} padding={2}>
                   {header && (
@@ -262,17 +230,26 @@ const DialogCard = forwardRef(function DialogCard(
                   </Box>
                 )}
               </Flex>
-            </DialogHeader>
+            </Box>
           )}
-
-          <DialogContent flex={1} ref={contentRef} tabIndex={-1}>
+          <Box
+            className={dialogContent()}
+            flex={1}
+            overflow="auto"
+            position="relative"
+            ref={contentRef}
+            tabIndex={-1}
+          >
             {children}
-          </DialogContent>
-
-          {footer && <DialogFooter>{footer}</DialogFooter>}
-        </DialogLayout>
-      </DialogCardRoot>
-    </DialogContainer>
+          </Box>
+          {footer && (
+            <Box className={dialogFooter()} position="relative">
+              {footer}
+            </Box>
+          )}
+        </Flex>
+      </Card>
+    </Container>
   )
 })
 
@@ -284,10 +261,11 @@ DialogCard.displayName = 'ForwardRef(DialogCard)'
  * @public
  */
 export const Dialog = forwardRef(function Dialog(
-  props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>,
+  props: DialogProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'id' | 'width' | 'wrap'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const dialog = useDialog()
+  const context = useDialog()
   const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
@@ -295,6 +273,7 @@ export const Dialog = forwardRef(function Dialog(
     cardRadius: cardRadiusProp = 4,
     cardShadow = 3,
     children,
+    className,
     contentRef,
     footer,
     header,
@@ -303,12 +282,12 @@ export const Dialog = forwardRef(function Dialog(
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 3,
+    padding = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || 'fixed',
+    position: positionProp = context.position || 'fixed',
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: zOffsetProp = context.zOffset || layer.dialog.zOffset,
     animate: _animate = false,
     ...restProps
   } = props
@@ -318,7 +297,6 @@ export const Dialog = forwardRef(function Dialog(
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
   const cardRadius = useArrayProp(cardRadiusProp)
-  const padding = useArrayProp(paddingProp)
   const position = useArrayProp(positionProp)
   const width = useArrayProp(widthProp)
   const zOffset = useArrayProp(zOffsetProp)
@@ -386,18 +364,24 @@ export const Dialog = forwardRef(function Dialog(
 
   return (
     <Portal __unstable_name={portalProp}>
-      <Root
+      <Layer
         {...restProps}
-        $animate={animate}
-        $padding={padding}
-        $position={position}
+        // $animate={animate}
+        // $padding={padding}
+        // $position={position}
         aria-labelledby={labelId}
         aria-modal
+        // className="root"
+        className={composeClassNames(className, dialog())}
+        data-animate={animate ? '' : undefined}
         data-ui="Dialog"
+        display="flex"
         id={id}
         onActivate={onActivate}
         onClick={handleRootClick}
         onFocus={handleFocus}
+        padding={padding}
+        position={position}
         ref={ref}
         role="dialog"
         zOffset={zOffset}
@@ -422,8 +406,9 @@ export const Dialog = forwardRef(function Dialog(
           {children}
         </DialogCard>
         <div ref={postDivRef} tabIndex={0} />
-      </Root>
+      </Layer>
     </Portal>
   )
 })
+
 Dialog.displayName = 'ForwardRef(Dialog)'