@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/core/_compat/types.ts

@@ -2,7 +2,6 @@
 
 import {
   type BaseTheme as _BaseTheme,
-  buildTheme,
   type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
   type RGB as _RGB,
@@ -190,75 +189,3 @@ export {
   type ThemeColorToneKey,
   type ThemeInput,
 }
-
-import {
-  createColorTheme as _createColorTheme,
-  hexToRgb as _hexToRgb,
-  hslToRgb as _hslToRgb,
-  multiply as _multiply,
-  parseColor as _parseColor,
-  rgba as _rgba,
-  rgbToHex as _rgbToHex,
-  rgbToHsl as _rgbToHsl,
-  screen as _screen,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export const createColorTheme = _createColorTheme
-
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export const hexToRgb = _hexToRgb
-
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export const hslToRgb = _hslToRgb
-
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export const multiply = _multiply
-
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export const parseColor = _parseColor
-
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export const rgbToHex = _rgbToHex
-
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export const rgbToHsl = _rgbToHsl
-
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export const rgba = _rgba
-
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-export const screen = _screen
-
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export const studioTheme = buildTheme()

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

@@ -1,7 +1,7 @@
 import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
-  BaseAutocompleteOption,
+  type BaseAutocompleteOption,
   Box,
   Card,
   Code,
@@ -12,7 +12,7 @@ import {
 } from '@sanity/ui'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
-import {countriesStore} from '../__mocks__/apiStore'
+import {countriesStore} from './mock/apiStore'
 
 export default function AsyncStory() {
   const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
@@ -81,7 +81,7 @@ export default function AsyncStory() {
 
   return (
     <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-      <Stack space={[3, 3, 4]}>
+      <Stack gap={[3, 3, 4]}>
         <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
           Country
         </Text>
@@ -103,11 +103,11 @@ export default function AsyncStory() {
           />
         </LayerProvider>
 
-        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+        <Box muted overflow="auto" padding={3} radius={2}>
           <Code language="json" size={1}>
             {JSON.stringify({loading, options, query, value}, null, 2)}
           </Code>
-        </Card>
+        </Box>
       </Stack>
     </Box>
   )
@@ -131,7 +131,7 @@ function AsyncOption(props: {
 
   return (
     <Card
-      data-as="button"
+      as="button"
       disabled={disabled}
       padding={3}
       radius={1}

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

@@ -11,9 +11,9 @@ import {
 import {useCallback, useState} from 'react'
 
 import {Popover} from '../../../primitives'
-import countries from '../__mocks__/countries'
-import {AutocompleteProps} from '../autocomplete'
-import {ExampleOption} from './types'
+import type {AutocompleteProps} from '../autocomplete'
+import countries from './mock/countries'
+import type {ExampleOption} from './types'
 
 export default function ConstrainedHeightStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
@@ -21,17 +21,9 @@ export default function ConstrainedHeightStory() {
   return (
     <Card height="fill" tone="transparent">
       <Container height="fill" padding={3} sizing="border" width={1}>
-        <Card
-          height="fill"
-          ref={setBoundaryElement}
-          radius={3}
-          shadow={3}
-          style={{position: 'relative'}}
-          tone="default"
-          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
-        >
+        <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
           <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
-            <Stack space={5}>
+            <Stack gap={5}>
               <BoundaryElementProvider element={boundaryElement}>
                 <ConstrainedHeightExampleField id="example-1" label="Example 1" />
                 <ConstrainedHeightExampleField id="example-2" label="Example 2" />
@@ -91,20 +83,21 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
       },
       popoverRef: React.Ref<HTMLDivElement>,
     ) => {
-      const {hidden, inputElement, ...restProps} = popoverProps
+      const {hidden, inputElement, ...rest} = popoverProps
 
       if (hidden) return null
 
       return (
         <Popover
-          {...restProps}
+          {...rest}
           arrow={false}
           constrainSize
           matchReferenceWidth
           open
           overflow="auto"
           placement="bottom-start"
-          radius={1}
+          portal
+          radius={3}
           ref={popoverRef}
           referenceElement={inputElement}
         />
@@ -114,7 +107,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   )
 
   return (
-    <Stack space={3}>
+    <Stack gap={3}>
       <Text size={1} weight="medium">
         {label}
       </Text>
@@ -126,7 +119,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
-          radius={1}
+          radius={2}
           renderOption={renderOption}
           renderPopover={renderPopover}
           renderValue={renderValue}

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

@@ -1,25 +1,26 @@
-import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
+import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
+import type {Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
 import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
-import countries from '../__mocks__/countries'
-import {ExampleOption} from './types'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
+
+import countries from './mock/countries'
+import type {ExampleOption} from './types'
 
 export default function CustomStory() {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
-  const border = useBoolean('Border', true, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
-  const openButton = useBoolean('Open button', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const border = useBoolean('Border', true)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const openButton = useBoolean('Open button', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
 
   const renderOption = useCallback(
@@ -31,7 +32,7 @@ export default function CustomStory() {
         key={option.value}
         onClick={(event) => event.preventDefault()}
         padding={padding}
-        radius={(radius - 1) as Radius}
+        radius={Math.max((radius ?? 0) - 1, 0) as Radius}
       >
         <Text size={fontSize}>{option.title}</Text>
       </Card>
@@ -52,8 +53,8 @@ export default function CustomStory() {
   return (
     <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
       <Container width={0}>
-        <Stack space={5}>
-          <Stack space={3}>
+        <Stack gap={5}>
+          <Stack gap={3}>
             <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
               Country
             </Text>
@@ -62,14 +63,14 @@ export default function CustomStory() {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
-              fontSize={fontSize as FontTextSize}
+              fontSize={fontSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
               padding={padding}
               placeholder="Search"
-              radius={radius as Radius}
+              radius={radius}
               readOnly={readOnly}
               renderOption={renderOption}
               renderValue={renderValue}
@@ -77,9 +78,9 @@ export default function CustomStory() {
             />
           </Stack>
 
-          <Card padding={3} radius={2} tone="transparent">
+          <Box muted padding={3} radius={2}>
             <Code size={1}>{JSON.stringify(value)}</Code>
-          </Card>
+          </Box>
           <Box>
             <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
           </Box>

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

@@ -1,7 +1,6 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
-import {FontTextSize, Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useMemo, useState} from 'react'
 
@@ -9,9 +8,10 @@ import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
-import countries from '../__mocks__/countries'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
+
+import countries from './mock/countries'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -32,16 +32,16 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function ExampleStory() {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
-  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Layout')
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
   const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
-  const openButton = useBoolean('Open button', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const openButton = useBoolean('Open button', false)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
 
   const handleChange = useCallback((value: string) => setValue(value), [])
@@ -50,7 +50,7 @@ export default function ExampleStory() {
     <Card height="fill" tone={layoutTone}>
       <Container width={1}>
         <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text as="label" htmlFor="default" size={1} weight="medium">
               Country code
             </Text>
@@ -59,14 +59,14 @@ export default function ExampleStory() {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
-                fontSize={fontSize as FontTextSize}
+                fontSize={fontSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
                 padding={padding}
                 placeholder="Search"
-                radius={radius as Radius}
+                radius={radius}
                 readOnly={readOnly}
                 ref={ref}
                 value={value}

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

@@ -1,4 +1,4 @@
-import {Autocomplete, Box, Button, Card, Code, Stack} from '@sanity/ui'
+import {Autocomplete, Box, Button, Code, Stack} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
 export default function FocusAndBlurStory() {
@@ -10,7 +10,7 @@ export default function FocusAndBlurStory() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
+      <Stack gap={3}>
         <Autocomplete
           id="focus-and-blur"
           onBlur={handleBlur}
@@ -21,12 +21,12 @@ export default function FocusAndBlurStory() {
           placeholder="Search"
           value={value}
         />
-        <Stack space={3}>
-          <Card overflow="auto" padding={3} radius={2} tone="transparent">
+        <Stack gap={3}>
+          <Box muted overflow="auto" padding={3} radius={2}>
             <Code id="focus-and-blur-log" language="json" size={1}>
               {JSON.stringify(log)}
             </Code>
-          </Card>
+          </Box>
 
           <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
         </Stack>

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

@@ -1,7 +1,7 @@
 import {CloseIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
-  BaseAutocompleteOption,
+  type BaseAutocompleteOption,
   Box,
   Button,
   Card,
@@ -11,7 +11,6 @@ import {
   Layer,
   Portal,
   PortalProvider,
-  Skeleton,
   Stack,
   Text,
   TextSkeleton,
@@ -20,10 +19,10 @@ import {
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
-import {countriesStore} from '../__mocks__/apiStore'
+import {countriesStore} from './mock/apiStore'
 
 export default function Fullscreen() {
-  const error = useBoolean('Error', false, 'Props')
+  const error = useBoolean('Error', false)
 
   const {push: pushToast} = useToast()
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
@@ -175,60 +174,59 @@ export default function Fullscreen() {
   }, [value])
 
   return (
-    <Card style={{display: 'flex', flexDirection: 'column', minHeight: '100%'}} tone="transparent">
+    <Card display="flex" direction="column" minHeight="full" tone="transparent">
       <PortalProvider element={portalElement}>
-        <Flex direction="column" flex={1} height="fill">
-          <Card hidden={open} padding={2}>
-            <Flex align="center">
-              <Box flex={1} />
-              <Button
-                aria-label="Open search"
-                icon={SearchIcon}
-                mode="ghost"
-                onClick={handleOpen}
-                ref={openSearchButtonElementRef}
-              />
-            </Flex>
+        <Card hidden={open} padding={2}>
+          <Flex align="center">
+            <Box flex={1} />
+            <Button
+              aria-label="Open search"
+              icon={SearchIcon}
+              mode="bleed"
+              onClick={handleOpen}
+              ref={openSearchButtonElementRef}
+            />
+          </Flex>
+        </Card>
+        <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
+          <Card padding={2} shadow={1}>
+            <Autocomplete
+              filterOption={filterOption}
+              fontSize={1}
+              icon={SearchIcon}
+              id="fullsceen-example"
+              listBox={{padding: 2}}
+              loading={loading}
+              onQueryChange={handleQueryChange}
+              onSelect={handleSelect}
+              options={options}
+              placeholder="Search"
+              radius={2}
+              ref={inputRef}
+              relatedElements={relatedElements}
+              renderOption={renderOption}
+              renderPopover={renderPopover}
+              renderValue={renderValue}
+              suffix={
+                <Box padding={1}>
+                  <Button
+                    aria-label="Close search"
+                    icon={CloseIcon}
+                    onClick={handleClose}
+                    padding={2}
+                    mode="bleed"
+                    ref={setCloseSearchButtonElement}
+                  />
+                </Box>
+              }
+              value={value}
+            />
           </Card>
-          <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
-            <Card padding={2} shadow={1}>
-              <Autocomplete
-                filterOption={filterOption}
-                icon={SearchIcon}
-                id="fullsceen-example"
-                listBox={{padding: 2}}
-                loading={loading}
-                onQueryChange={handleQueryChange}
-                onSelect={handleSelect}
-                options={options}
-                placeholder="Search"
-                radius={2}
-                ref={inputRef}
-                relatedElements={relatedElements}
-                renderOption={renderOption}
-                renderPopover={renderPopover}
-                renderValue={renderValue}
-                suffix={
-                  <Box padding={1}>
-                    <Button
-                      aria-label="Close search"
-                      icon={CloseIcon}
-                      onClick={handleClose}
-                      padding={2}
-                      mode="bleed"
-                      ref={setCloseSearchButtonElement}
-                    />
-                  </Box>
-                }
-                value={value}
-              />
-            </Card>
-          </Layer>
-          <Card flex={1} hidden={!open} ref={setPortalElement} style={{position: 'relative'}} />
-          <Box flex={1} hidden={open} padding={4}>
-            <Heading>Welcome to this app</Heading>
-          </Box>
-        </Flex>
+        </Layer>
+        <Card flex={1} hidden={!open} position="relative" ref={setPortalElement} />
+        <Box flex={1} hidden={open} padding={4}>
+          <Heading>Welcome to this app</Heading>
+        </Box>
       </PortalProvider>
     </Card>
   )
@@ -253,7 +251,7 @@ function AsyncOption(props: {
   return (
     <Card
       aria-label={data?.title}
-      data-as="a"
+      as="button"
       disabled={disabled}
       padding={2}
       radius={2}
@@ -262,9 +260,9 @@ function AsyncOption(props: {
       tabIndex={tabIndex}
     >
       <Flex align="center">
-        <Skeleton radius={2} style={{width: 35, height: 35}} />
+        <Box muted radius={2} style={{width: 35, height: 35}} />
         <Box flex={1} marginLeft={3}>
-          <Stack space={2}>
+          <Stack gap={2}>
             {loading && (
               <>
                 <TextSkeleton style={{maxWidth: 200}} />