@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -1,5 +1,6 @@
 import {icons, IconSymbol} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} 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 {fireEvent} from '@testing-library/dom'
@@ -79,7 +80,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       border={border}
       customValidity={customValidity}
       disabled={disabled}
-      fontSize={fontSize}
+      fontSize={fontSize as FontTextSize}
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
@@ -87,7 +88,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}
-      radius={radius}
+      radius={radius as Radius}
       readOnly={readOnly}
       ref={ref}
       space={space}

package/src/core/primitives/textInput/textInput.tsx

@@ -1,23 +1,17 @@
 import {CloseIcon} from '@sanity/icons'
-import {composeClassNames, RadiusStyleProps, ResponsiveProp, textInput} from '@sanity/ui/css'
+import {
+  composeClassNames,
+  RadiusStyleProps,
+  ResponsiveProp,
+  textInput,
+  textInputElement,
+} from '@sanity/ui/css'
 import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useCustomValidity} from '../../hooks'
 import {styled} from '../../lib/styled'
-// import {
-//   // responsiveRadiusStyle,
-//   // ResponsiveRadiusStyleProps,
-//   responsiveInputPaddingStyle,
-//   TextInputInputStyleProps,
-//   // TextInputRepresentationStyleProps,
-//   TextInputResponsivePaddingStyleProps,
-//   textInputBaseStyle,
-//   textInputFontSizeStyle,
-//   // textInputRepresentationStyle,
-//   // textInputRootStyle,
-// } from '../../styles/internal'
 import {useRootTheme} from '../../theme'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
@@ -68,11 +62,8 @@ export interface TextInputProps extends RadiusStyleProps {
    * @beta
    */
   onClear?: () => void
-  padding: ResponsiveProp<Space>
-  // padding?: number | number[]
+  padding?: ResponsiveProp<Space>
   prefix?: React.ReactNode
-  // radius?: Radius | Radius[]
-  // space?: number | number[]
   space?: ResponsiveProp<Space>
   suffix?: React.ReactNode
   type?: TextInputType
@@ -86,65 +77,6 @@ const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {
   zIndex: 2,
 }
 
-// const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
-
-// const InputRoot = styled.span`
-//   flex: 1;
-//   min-width: 0;
-//   display: block;
-//   position: relative;
-// `
-
-// const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
-//   border-top-right-radius: 0;
-//   border-bottom-right-radius: 0;
-
-//   & > span {
-//     display: block;
-//     margin: -1px;
-//   }
-// `
-
-// const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
-//   border-top-left-radius: 0;
-//   border-bottom-left-radius: 0;
-
-//   & > span {
-//     display: block;
-//     margin: -1px;
-//   }
-// `
-
-// const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-//   responsiveInputPaddingStyle,
-//   textInputBaseStyle,
-//   textInputFontSizeStyle,
-// )
-
-// const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-//   responsiveRadiusStyle,
-//   textInputRepresentationStyle,
-// )
-
-// const LeftBox = styled(Box)`
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-// `
-
-// const RightBox = styled(Box)`
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-// `
-
-// const RightCard = styled(Card)`
-//   background-color: transparent;
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-// `
-
 const TextInputClearButton = styled(Button)({
   '&:not([hidden])': {
     display: 'block',
@@ -174,11 +106,11 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 2,
     readOnly,
-    space: _space = 3,
+    space: _space = 3, // eslint-disable-line @typescript-eslint/no-unused-vars
     suffix,
     customValidity,
     type = 'text',
-    weight: _width,
+    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
     ...restProps
   } = props
   const ref = useRef<HTMLInputElement | null>(null)
@@ -254,7 +186,7 @@ export const TextInput = forwardRef(function TextInput(
         // $radius={radius}
         // $scheme={rootTheme.scheme}
         // $tone={rootTheme.tone}
-        border={border}
+        // border={border}
         className="text-input-presentation"
         data-border={border ? '' : undefined}
         data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
@@ -394,7 +326,7 @@ export const TextInput = forwardRef(function TextInput(
     <Card
       align="center"
       as="span"
-      className={composeClassNames(className, textInput({size: fontSizeProp}))}
+      className={composeClassNames(className, textInput({padding, size: fontSizeProp}))}
       data-ui="TextInput"
       display="flex"
       tone={rootTheme.tone}
@@ -403,7 +335,7 @@ export const TextInput = forwardRef(function TextInput(
 
       <Box
         as="span"
-        className="text-input-wrapper"
+        // className="text-input-wrapper"
         flex={1}
         // todo
         // minWidth={0}
@@ -411,9 +343,10 @@ export const TextInput = forwardRef(function TextInput(
       >
         <input
           data-as="input"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          // data-scheme={rootTheme.scheme}
+          // data-tone={rootTheme.tone}
           {...restProps}
+          className={textInputElement()}
           // $fontSize={fontSize}
           // $iconLeft={$hasIcon}
           // $iconRight={$hasIconRight || $hasClearButton}

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -8,14 +8,14 @@ import {
 } from '../../constants'
 import {Placement} from '../../types'
 import {Arrow} from '../../utils'
-import {Card, CardProps} from '../card'
+import {Card} from '../card'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = motion(Card)
+const MotionCard = motion(Card) as typeof Card
 
 /**
  * @internal
@@ -35,7 +35,7 @@ export const TooltipCard = memo(
       scheme?: ThemeColorSchemeKey
       shadow?: number | number[]
     } & RadiusStyleProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     const {
@@ -79,7 +79,7 @@ export const TooltipCard = memo(
     return (
       <MotionCard
         data-ui="Tooltip__card"
-        {...(restProps as CardProps)}
+        {...restProps}
         data-animate={animate ? '' : undefined}
         className={tooltipCard()}
         data-placement={placement}
@@ -89,7 +89,7 @@ export const TooltipCard = memo(
         scheme={scheme}
         shadow={shadow}
         style={rootStyle}
-        {...((animate ? POPOVER_MOTION_PROPS : {}) as CardProps)}
+        {...(animate ? POPOVER_MOTION_PROPS : {})}
       >
         {children}
 

package/src/core/primitives/types.ts

@@ -74,6 +74,7 @@ export interface ResponsiveFlexItemProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]

package/src/core/theme/__workshop__/build/Root.tsx

@@ -1,4 +1,4 @@
-import {css, styled} from '../../../lib/styled'
+import {css, styled} from 'styled-components'
 import {getTheme_v2} from '../../../../theme'
 
 export const Root = styled.div((props) => {

package/src/core/theme/__workshop__/build/story.tsx

@@ -5,18 +5,16 @@ import {
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
   ThemeColorState_v2,
-} from '@sanity/ui/theme'
-import {
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
   ThemeColorCardToneKey,
   ThemeColorInputModeKey,
+  buildTheme,
 } from '@sanity/ui/theme'
-import {buildTheme} from '@sanity/ui/theme'
 import {ReactElement} from 'react'
-import {rem} from '../../../styles'
+import {rem} from '../../../_compat'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'

package/src/core/theme/themeProvider.tsx

@@ -6,7 +6,7 @@ import {
   getScopedTheme,
 } from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from '../lib/styled'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 

package/src/core/types/box.ts

@@ -1,19 +1,25 @@
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
+export {
+  /**
+   * @public
+   * @deprecated use `Display` from `@sanity/ui/css` instead.
+   */
+  type Display as BoxDisplay,
 
-/**
- * @public
- */
-export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+  /**
+   * @public
+   * @deprecated use `BoxHeight` from `@sanity/ui/css` instead.
+   */
+  type BoxHeight,
 
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
+  /**
+   * @public
+   * @deprecated use `Overflow` from `@sanity/ui/css` instead.
+   */
+  type BoxOverflow,
 
-/**
- * @public
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'
+  /**
+   * @public
+   * @deprecated use `BoxSizing` from `@sanity/ui/css` instead.
+   */
+  type BoxSizing,
+} from '@sanity/ui/css'

package/src/core/types/grid.ts

@@ -1,14 +1,19 @@
-/**
- * @public
- */
-export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+export {
+  /**
+   * @public
+   * @deprecated Use `GridAutoRows` from `@sanity/ui/css` instead.
+   */
+  type GridAutoRows,
 
-/**
- * @public
- */
-export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+  /**
+   * @public
+   * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
+   */
+  type GridAutoCols,
 
-/**
- * @public
- */
-export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+  /**
+   * @public
+   * @deprecated Use `GridAutoFlow` from `@sanity/ui/css` instead.
+   */
+  type GridAutoFlow,
+} from '@sanity/ui/css'

package/src/core/types/text.ts

@@ -1,4 +1,7 @@
-/**
- * @public
- */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+export {
+  /**
+   * @public
+   * @deprecated Use `TextAlign` from `@sanity/ui/css` instead
+   */
+  type TextAlign,
+} from '@sanity/ui/css'

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
+import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
   --card-fg-color: orange;

package/src/core/utils/layer/layer.tsx

@@ -25,7 +25,7 @@ interface LayerChildrenProps extends BoxProps {
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
   forwardedRef: React.Ref<HTMLDivElement>,
 ) {
   const {
@@ -91,7 +91,7 @@ const LayerChildren = forwardRef(function LayerChildren(
  * @public
  */
 export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'width' | 'wrap'>,
+  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'rows' | 'width' | 'wrap'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {children, zOffset = 1, ...restProps} = props

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {styled} from '../../lib/styled'
 import {_isScrollable} from '../../helpers'
+import {styled} from '../../lib/styled'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
 import {useTheme_v2} from '../../theme'

package/src/css/compile/{comileRules.ts → compileRules.ts}

@@ -39,18 +39,15 @@ export function compileRules(rules: Rules): string {
     let keyframesCss = `@keyframes ${name} {\n`
 
     for (const [key, props] of Object.entries(value)) {
-      keyframesCss += `  ${key} {\n`
+      keyframesCss += `  ${key}`
       keyframesCss += compileRule('', props).replace(/\n/g, '\n    ') + '\n'
-      keyframesCss += `  }\n`
     }
 
-    keyframesCss += `}\n`
+    keyframesCss += `\n}\n`
 
     css += keyframesCss
   }
 
-  // console.log('keyframes', keyframes)
-
   for (const [query, queryRules] of Object.entries(mediaQueries)) {
     css += compileMediaQueryRule(query, queryRules) + '\n'
   }

package/src/css/compile/compileSystem.ts

@@ -1,5 +1,5 @@
 import {rules} from '../rules'
-import {compileRules} from './comileRules'
+import {compileRules} from './compileRules'
 
 /** @public */
 export function compileSystem(): string {

package/src/css/compile/compileTheme.ts

@@ -70,7 +70,7 @@ export function compileTheme(theme: RootTheme_v2): string {
   }
 
   return [
-    compileRule(`.root`, {
+    compileRule(`:root`, {
       [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
       [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
       // [varNames.avatar.size[0].distance]: px(theme.avatar.size[0].distance),
@@ -282,7 +282,9 @@ export function compileTheme(theme: RootTheme_v2): string {
       '--radius-4': px(theme.radius[4]),
       '--radius-5': px(theme.radius[5]),
       '--radius-6': px(theme.radius[6]),
+
       [varNames.space[0]]: rem(theme.space[0]),
+      [varNames.space[0.5]]: `calc(${rem(theme.space[1])} / 2)`,
       [varNames.space[1]]: rem(theme.space[1]),
       [varNames.space[2]]: rem(theme.space[2]),
       [varNames.space[3]]: rem(theme.space[3]),
@@ -292,6 +294,7 @@ export function compileTheme(theme: RootTheme_v2): string {
       [varNames.space[7]]: rem(theme.space[7]),
       [varNames.space[8]]: rem(theme.space[8]),
       [varNames.space[9]]: rem(theme.space[9]),
+
       '--shadow-0-umbra': toBoxShadow(theme.shadow[0]?.umbra), //`${theme.shadow[0]?.umbra || 'none'}`,
       '--shadow-0-penumbra': toBoxShadow(theme.shadow[0]?.penumbra),
       '--shadow-0-ambient': toBoxShadow(theme.shadow[0]?.ambient),

package/src/css/components/breadcrumbs/rules.ts

@@ -5,3 +5,21 @@ export const breadcrumbsRules: Rules = {
     lineHeight: 0,
   },
 }
+
+// import {styled} from '../../lib/styled'
+// import {Button} from '../../primitives'
+
+// 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/css/components/menu/index.ts

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

package/src/css/components/menu/menu.ts

@@ -0,0 +1,5 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function menuDivider(): string {
+  return composeClassNames('menu-divider')
+}

package/src/css/components/menu/rules.ts

@@ -0,0 +1,10 @@
+import {Rules} from '../../types'
+
+export const menuRules: Rules = {
+  'menu-divider': {
+    height: `1px`,
+    border: 0,
+    backgroundColor: 'var(--card-border-color)',
+    margin: 0,
+  },
+}

package/src/css/components/skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './skeleton'
+export * from './types'

package/src/css/components/skeleton/rules.ts

@@ -0,0 +1,106 @@
+import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const skeletonRules: Rules = {
+  'skeleton': {
+    'backgroundColor': 'var(--card-skeleton-from-color)',
+    'backgroundPosition': '100%',
+    'backgroundSize': '200% 100%',
+    'backgroundAttachment': 'fixed',
+    'opacity': 0,
+    'transition': 'opacity 200ms ease-in',
+
+    '@keyframes': {
+      'skeleton-pulse': {
+        '0%': {
+          backgroundPosition: '100%',
+        },
+        '100%': {
+          backgroundPosition: '-100%',
+        },
+      },
+    },
+
+    '@nest': {
+      '&[data-animated]': {
+        backgroundImage: `linear-gradient(
+          to right,
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-to-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color)
+        )`,
+        animationName: 'skeleton-pulse',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        animationDuration: '2000ms',
+      },
+
+      '&[data-visible]': {
+        opacity: 1,
+      },
+    },
+
+    '@media': {
+      'screen and (prefers-reduced-motion: no-preference)': {
+        backgroundColor: 'var(--card-skeleton-from-color)',
+      },
+    },
+  },
+
+  'font-skeleton': {
+    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
+  },
+
+  // ...responsiveRules('text-skeleton-0', {
+  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
+  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
+  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
+  // }),
+
+  ...FONT_CODE_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`code-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-code-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-code-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-code-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+
+  ...FONT_HEADING_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`heading-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-heading-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-heading-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-heading-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+
+  ...FONT_LABEL_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`label-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-label-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-label-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-label-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+
+  ...FONT_TEXT_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-text-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-text-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-text-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+}

package/src/css/components/skeleton/skeleton.ts

@@ -0,0 +1,31 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles/radius'
+import {
+  CodeSkeletonStyleProps,
+  HeadingSkeletonStyleProps,
+  LabelSkeletonStyleProps,
+  SkeletonStyleProps,
+  TextSkeletonStyleProps,
+} from './types'
+
+/** @beta */
+export function skeleton(props: SkeletonStyleProps): string {
+  return composeClassNames('skeleton', radius(props))
+}
+
+export function codeSkeleton(props: CodeSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('code-skeleton', props.size))
+}
+
+export function headingSkeleton(props: HeadingSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('heading-skeleton', props.size))
+}
+
+export function labelSkeleton(props: LabelSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('label-skeleton', props.size))
+}
+
+export function textSkeleton(props: TextSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('text-skeleton', props.size))
+}