@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

package/exports/index.ts

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

package/exports/theme.ts

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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.31",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "source": "./src/index.ts",
+  "source": "./exports/index.ts",
   "module": "./dist/index.esm.js",
   "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "source": "./src/index.ts",
+      "source": "./exports/index.ts",
       "require": "./dist/index.js",
       "node": {
         "module": "./dist/index.esm.js",
@@ -18,41 +18,61 @@
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "source": "./exports/theme.ts",
+      "require": "./dist/theme.js",
+      "node": {
+        "module": "./dist/theme.esm.js",
+        "import": "./dist/theme.cjs.mjs"
+      },
+      "import": "./dist/theme.esm.js",
+      "default": "./dist/theme.esm.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/theme.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
+    "exports",
     "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-s clean build:pkg check:pkg",
-    "build:pkg": "pkg build --strict",
-    "check:pkg": "pkg --strict",
-    "check:types": "tsc",
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-s workshop:dev",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
     "prepare": "husky install",
     "prepublishOnly": "pnpm build",
     "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
     "watch": "pkg watch --strict",
-    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "3.0.0-beta.3",
+    "@floating-ui/react-dom": "^2.0.4",
+    "@sanity/color": "3.0.0-beta.7",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.2",
@@ -68,21 +88,21 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^1.2.11",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/addon-themes": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/manager-api": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.5",
+    "@sanity/ui-workshop": "^2.0.2",
+    "@storybook/addon-a11y": "^7.6.1",
+    "@storybook/addon-docs": "^7.6.1",
+    "@storybook/addon-essentials": "^7.6.1",
+    "@storybook/addon-interactions": "^7.6.1",
+    "@storybook/addon-links": "^7.6.1",
+    "@storybook/addon-storysource": "^7.6.1",
+    "@storybook/addon-themes": "^7.6.1",
+    "@storybook/blocks": "^7.6.1",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.6.1",
+    "@storybook/react": "^7.6.1",
+    "@storybook/react-vite": "^7.6.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.1",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -100,16 +120,15 @@
     "cypress": "^13.1.0",
     "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.19.2",
-    "esbuild-register": "^3.4.2",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-boundaries": "^3.4.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.6.4",
@@ -126,10 +145,12 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.6.1",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.0.2",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "peerDependencies": {
     "react": "^18",

package/src/{__workshop__ → core/__workshop__}/constants.ts

@@ -13,10 +13,8 @@ import {
   Placement,
   TextAlign,
   TextInputType,
-  ThemeColorSpotKey,
-  ThemeColorToneKey,
-  ThemeFontWeightKey,
 } from '@sanity/ui'
+import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0 (default)': 0,

package/src/core/_compat.ts

@@ -0,0 +1,115 @@
+// re-export for backwards compatibility
+export {
+  COLOR_CONFIG_BASE_KEYS,
+  COLOR_CONFIG_BASE_TONES,
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  buildTheme,
+  createColorTheme,
+  hexToRgb,
+  hslToRgb,
+  isColorBlendModeValue,
+  isColorButtonMode,
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+  isColorHueKey,
+  isColorOpacityValue,
+  isColorTintKey,
+  isColorTokenValue,
+  isColorValue,
+  multiply,
+  parseColor,
+  parseTokenKey,
+  parseTokenValue,
+  rgbToHex,
+  rgbToHsl,
+  rgba,
+  rgbaToRGBA,
+  screen,
+  studioTheme,
+  type BaseTheme,
+  type BoxShadow,
+  type CSSObject,
+  type ColorBlendModeTokenValue,
+  type ColorConfigBaseKey,
+  type ColorConfigBaseTone,
+  type ColorConfigBlendKey,
+  type ColorConfigOpacityValue,
+  type ColorConfigStateKey,
+  type ColorConfigStateTone,
+  type ColorConfigValue,
+  type HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB,
+  type RGBA,
+  type RootTheme,
+  type Theme,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBaseTokens,
+  type ThemeColorBaseToneKey,
+  type ThemeColorBlendModeKey,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTokens,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemeKey,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorStateKey,
+  type ThemeColorStateTokens,
+  type ThemeColorStateToneKey,
+  type ThemeColorStatesTokens,
+  type ThemeColorSyntax,
+  type ThemeColorTokenValue,
+  type ThemeColorTokens,
+  type ThemeColorToneKey,
+  type ThemeConfig,
+  type ThemeFocusRing,
+  type ThemeFont,
+  type ThemeFontKey,
+  type ThemeFontSize,
+  type ThemeFontWeight,
+  type ThemeFontWeightKey,
+  type ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer,
+  type ThemeShadow,
+  type ThemeStyles,
+  type TokenBaseKeyNode,
+  type TokenBlendModeValueNode,
+  type TokenButtonKeyNode,
+  type TokenColorValueNode,
+  type TokenHueValueNode,
+  type TokenKeyNode,
+  type TokenValueNode,
+} from '@sanity/ui/theme'

package/src/{components → core/components}/autocomplete/__workshop__/async.tsx

@@ -79,9 +79,9 @@ export default function AsyncStory() {
   }, [doSearch, optionTitle])
 
   return (
-    <Box padding={[4, 5, 6]}>
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
       <Stack space={[3, 3, 4]}>
-        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="semibold">
+        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
           Country
         </Text>
         <LayerProvider zOffset={100}>
@@ -96,15 +96,14 @@ export default function AsyncStory() {
             openButton={{onClick: handleOpenButtonClick}}
             options={options}
             placeholder="Search"
-            radius={1}
             renderOption={renderOption}
             renderValue={renderValue}
             value={value}
           />
         </LayerProvider>
 
-        <Card border overflow="auto" padding={3} radius={1}>
-          <Code language="json" size={[1, 1, 2]}>
+        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+          <Code language="json" size={1}>
             {JSON.stringify({loading, options, query, value}, null, 2)}
           </Code>
         </Card>

package/src/{components → core/components}/autocomplete/__workshop__/constrainedHeight.tsx

@@ -3,6 +3,7 @@ import {
   BoundaryElementProvider,
   Box,
   Card,
+  Container,
   LayerProvider,
   Stack,
   Text,
@@ -18,28 +19,32 @@ export default function ConstrainedHeightStory() {
 
   return (
     <Card height="fill" tone="transparent">
-      <Card
-        ref={setBoundaryElement}
-        radius={3}
-        shadow={3}
-        style={{position: 'absolute', top: 20, right: 20, bottom: 20, left: 20}}
-      >
-        <Box height="fill" overflow="auto" padding={[3, 4, 5]} sizing="border">
-          <Stack space={5}>
-            <BoundaryElementProvider element={boundaryElement}>
-              <ConstrainedHeightExampleField id="example-1" label="Example 1" />
-              <ConstrainedHeightExampleField id="example-2" label="Example 2" />
-              <ConstrainedHeightExampleField id="example-3" label="Example 3" />
-              <ConstrainedHeightExampleField id="example-4" label="Example 4" />
-              <ConstrainedHeightExampleField id="example-5" label="Example 5" />
-              <ConstrainedHeightExampleField id="example-6" label="Example 6" />
-              <ConstrainedHeightExampleField id="example-7" label="Example 7" />
-              <ConstrainedHeightExampleField id="example-8" label="Example 8" />
-              <ConstrainedHeightExampleField id="example-9" label="Example 9" />
-            </BoundaryElementProvider>
-          </Stack>
-        </Box>
-      </Card>
+      <Container height="fill" padding={3} sizing="border" width={1}>
+        <Card
+          height="fill"
+          ref={setBoundaryElement}
+          radius={3}
+          shadow={3}
+          style={{position: 'relative'}}
+          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
+        >
+          <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
+            <Stack space={5}>
+              <BoundaryElementProvider element={boundaryElement}>
+                <ConstrainedHeightExampleField id="example-1" label="Example 1" />
+                <ConstrainedHeightExampleField id="example-2" label="Example 2" />
+                <ConstrainedHeightExampleField id="example-3" label="Example 3" />
+                <ConstrainedHeightExampleField id="example-4" label="Example 4" />
+                <ConstrainedHeightExampleField id="example-5" label="Example 5" />
+                <ConstrainedHeightExampleField id="example-6" label="Example 6" />
+                <ConstrainedHeightExampleField id="example-7" label="Example 7" />
+                <ConstrainedHeightExampleField id="example-8" label="Example 8" />
+                <ConstrainedHeightExampleField id="example-9" label="Example 9" />
+              </BoundaryElementProvider>
+            </Stack>
+          </Box>
+        </Card>
+      </Container>
     </Card>
   )
 }

package/src/{components → core/components}/autocomplete/__workshop__/custom.tsx

@@ -1,4 +1,4 @@
-import {Autocomplete, Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 import {
@@ -48,36 +48,41 @@ export default function CustomStory() {
   const options = data.map((item) => ({value: item.value, title: item.title}))
 
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
-        <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="semibold">
-          Country
-        </Text>
-        <Autocomplete
-          aria-describedby="custom-label"
-          border={border}
-          disabled={disabled}
-          filterOption={filterOption}
-          fontSize={fontSize}
-          id="custom"
-          onChange={setValue}
-          openButton={openButton}
-          options={options}
-          padding={padding}
-          placeholder="Search"
-          radius={radius}
-          readOnly={readOnly}
-          renderOption={renderOption}
-          renderValue={renderValue}
-          value={value}
-        />
-        <Card padding={3} radius={1} tone="transparent">
-          <Code>{JSON.stringify(value)}</Code>
-        </Card>
-        <Box>
-          <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
-        </Box>
-      </Stack>
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
+      <Container width={0}>
+        <Stack space={5}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
+              Country
+            </Text>
+            <Autocomplete
+              aria-describedby="custom-label"
+              border={border}
+              disabled={disabled}
+              filterOption={filterOption}
+              fontSize={fontSize}
+              id="custom"
+              onChange={setValue}
+              openButton={openButton}
+              options={options}
+              padding={padding}
+              placeholder="Search"
+              radius={radius}
+              readOnly={readOnly}
+              renderOption={renderOption}
+              renderValue={renderValue}
+              value={value}
+            />
+          </Stack>
+
+          <Card padding={3} radius={2} tone="transparent">
+            <Code size={1}>{JSON.stringify(value)}</Code>
+          </Card>
+          <Box>
+            <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
+          </Box>
+        </Stack>
+      </Container>
     </Box>
   )
 }

package/src/{components → core/components}/autocomplete/__workshop__/example.tsx

@@ -47,9 +47,9 @@ export default function ExampleStory() {
   return (
     <Card height="fill" tone={layoutTone}>
       <Container width={1}>
-        <Box padding={[3, 4, 5]}>
+        <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
           <Stack space={3}>
-            <Text as="label" htmlFor="default" size={1} weight="semibold">
+            <Text as="label" htmlFor="default" size={1} weight="medium">
               Country code
             </Text>
             <Wrapper>

package/src/{components → core/components}/autocomplete/__workshop__/focusAndBlur.tsx

@@ -21,12 +21,14 @@ export default function FocusAndBlurStory() {
           placeholder="Search"
           value={value}
         />
-        <Stack space={1}>
+        <Stack space={3}>
           <Card overflow="auto" padding={3} radius={2} tone="transparent">
-            <Code id="focus-and-blur-log">{JSON.stringify(log)}</Code>
+            <Code id="focus-and-blur-log" language="json" size={1}>
+              {JSON.stringify(log)}
+            </Code>
           </Card>
 
-          <Button id="focus-and-blur-clear-btn" onClick={handleClear} text="Clear" />
+          <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
         </Stack>
       </Stack>
     </Box>

package/src/{components → core/components}/autocomplete/autocomplete.tsx

@@ -60,6 +60,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** The options to render. */
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
@@ -68,6 +69,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
   renderOption?: (option: Option) => ReactElement
   /** @beta */
   renderPopover?: (
@@ -82,6 +84,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
+  /** The current value. */
   value?: string
 }
 
@@ -138,7 +141,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
     prefix,
-    radius = 3,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
@@ -684,6 +687,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 })
 
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
 export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(

package/src/{components → core/components}/dialog/__workshop__/activate.tsx

@@ -17,7 +17,6 @@ export default function LayeringFocusStory() {
           <Button
             text="Open dialog 1"
             onClick={() => setFirstDialogOpen(true)}
-            tone="primary"
             id="open-dialog-1-button"
           />
 

package/src/{components → core/components}/dialog/__workshop__/layering.tsx

@@ -33,5 +33,9 @@ export default function LayeringStory() {
 function DebugLayer() {
   const layer = useLayer()
 
-  return <Code language="json">{JSON.stringify(layer, null, 2)}</Code>
+  return (
+    <Code language="json" size={1}>
+      {JSON.stringify(layer, null, 2)}
+    </Code>
+  )
 }

package/src/{components → core/components}/dialog/__workshop__/panes.tsx

@@ -46,12 +46,7 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
       <PortalProvider element={portalElement}>
         <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
           <Box padding={4}>
-            <Button
-              onClick={() => setDialogOpen(true)}
-              selected={dialogOpen}
-              text="Open dialog"
-              tone="primary"
-            />
+            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
           </Box>
 
           <PanePortal ref={setPortalElement} />
@@ -67,7 +62,7 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
           >
             <Box padding={4}>
               <MenuButton
-                button={<Button text="Open menu" tone="primary" />}
+                button={<Button text="Open menu" />}
                 id={`${id}-menu`}
                 menu={
                   <Menu>