@sanity/ui 4.0.0-v4.1 → 4.0.0

package/src/css/index.ts

@@ -1,146 +0,0 @@
-// NOTE: Order is important, as it affects the order of compiled CSS.
-
-// API
-export * from './constants'
-export * from './getVarName'
-export * from './theme/buildCSSTheme'
-export * from './types'
-
-// CSS: variables
-export * from './layers.css'
-export * from './vars.css'
-
-// CSS: theme
-export * from './theme/defaultTheme.css'
-
-// CSS: props
-export * from './props/alignItems/alignItems'
-export * from './props/alignItems/types'
-export * from './props/border/border'
-export * from './props/border/types'
-export * from './props/boxSizing/boxSizing'
-export * from './props/boxSizing/types'
-export * from './props/display/display'
-export * from './props/display/types'
-export * from './props/flex/flex'
-export * from './props/flex/types'
-export * from './props/flexDirection/flexDirection'
-export * from './props/flexDirection/types'
-export * from './props/flexWrap/flexWrap'
-export * from './props/flexWrap/types'
-export * from './props/font/font'
-export * from './props/font/types'
-export * from './props/gap/gap'
-export * from './props/gap/types'
-export * from './props/gridAutoColumns/gridAutoColumns'
-export * from './props/gridAutoColumns/types'
-export * from './props/gridAutoFlow/gridAutoFlow'
-export * from './props/gridAutoFlow/types'
-export * from './props/gridAutoRows/gridAutoRows'
-export * from './props/gridAutoRows/types'
-export * from './props/gridColumn/gridColumn'
-export * from './props/gridColumn/types'
-export * from './props/gridColumnEnd/gridColumnEnd'
-export * from './props/gridColumnEnd/types'
-export * from './props/gridColumnStart/gridColumnStart'
-export * from './props/gridColumnStart/types'
-export * from './props/gridRow/gridRow'
-export * from './props/gridRow/types'
-export * from './props/gridRowEnd/gridRowEnd'
-export * from './props/gridRowEnd/types'
-export * from './props/gridRowStart/gridRowStart'
-export * from './props/gridRowStart/types'
-export * from './props/gridTemplateColumns/gridTemplateColumns'
-export * from './props/gridTemplateColumns/types'
-export * from './props/gridTemplateRows/gridTemplateRows'
-export * from './props/gridTemplateRows/types'
-export * from './props/height/height'
-export * from './props/height/types'
-export * from './props/inset/inset'
-export * from './props/inset/types'
-export * from './props/justifyContent/justifyContent'
-export * from './props/justifyContent/types'
-export * from './props/margin/margin'
-export * from './props/margin/types'
-export * from './props/maxWidth/maxWidth'
-export * from './props/maxWidth/types'
-export * from './props/minHeight/minHeight'
-export * from './props/minHeight/types'
-export * from './props/minWidth/minWidth'
-export * from './props/minWidth/types'
-export * from './props/outline/outline'
-export * from './props/outline/types'
-export * from './props/overflow/overflow'
-export * from './props/overflow/types'
-export * from './props/padding/padding'
-export * from './props/padding/types'
-export * from './props/pointerEvents/pointerEvents'
-export * from './props/pointerEvents/types'
-export * from './props/position/position'
-export * from './props/position/types'
-export * from './props/radius/radius'
-export * from './props/radius/types'
-export * from './props/shadow/shadow'
-export * from './props/shadow/types'
-export * from './props/textAlign/textAlign'
-export * from './props/textAlign/types'
-export * from './props/textOverflow/textOverflow'
-export * from './props/textOverflow/types'
-export * from './props/width/types'
-export * from './props/width/width'
-
-// CSS:primitives
-export * from './primitives/_arrow/_arrow'
-export * from './primitives/_input/input'
-export * from './primitives/_input/types'
-export * from './primitives/avatar/avatar'
-export * from './primitives/avatar/types'
-export * from './primitives/badge/badge'
-export * from './primitives/badge/types'
-export * from './primitives/box/box'
-export * from './primitives/box/types'
-export * from './primitives/button/button'
-export * from './primitives/button/types'
-export * from './primitives/card/card'
-export * from './primitives/card/types'
-export * from './primitives/checkbox/checkbox'
-export * from './primitives/code/code'
-export * from './primitives/code/types'
-export * from './primitives/container/container'
-export * from './primitives/container/types'
-export * from './primitives/heading/heading'
-export * from './primitives/heading/types'
-export * from './primitives/kbd/kbd'
-export * from './primitives/kbd/types'
-export * from './primitives/label/label'
-export * from './primitives/label/types'
-export * from './primitives/popover/popover'
-export * from './primitives/radio/radio'
-export * from './primitives/root/root'
-export * from './primitives/root/types'
-export * from './primitives/select/select'
-export * from './primitives/select/types'
-export * from './primitives/selectable/selectable'
-export * from './primitives/selectable/types'
-export * from './primitives/spinner/spinner'
-export * from './primitives/spinner/types'
-export * from './primitives/srOnly/srOnly'
-export * from './primitives/stack/stack'
-export * from './primitives/switch/switch'
-export * from './primitives/text/text'
-export * from './primitives/text/types'
-export * from './primitives/textArea/textArea'
-export * from './primitives/textArea/types'
-export * from './primitives/textInput/textInput'
-export * from './primitives/textInput/types'
-export * from './primitives/tooltip/tooltip'
-export * from './primitives/tooltip/types'
-
-// CSS: components
-export * from './components/breadcrumbs/breadcrumbs'
-export * from './components/dialog/dialog'
-export * from './components/menu/menu'
-export * from './components/skeleton/skeleton'
-export * from './components/skeleton/types'
-export * from './components/toast/toast'
-export * from './components/tree/tree'

package/src/css/layers.css.ts

@@ -1,12 +0,0 @@
-import {layer} from '@vanilla-extract/css'
-
-/** @public */
-export type CSSLayer = 'theme' | 'props' | 'primitives' | 'components'
-
-/** @public */
-export const layers: Record<CSSLayer, string> = {
-  theme: layer('theme'),
-  props: layer('props'),
-  primitives: layer('primitives'),
-  components: layer('components'),
-}

package/src/css/primitives/_arrow/_arrow.css.ts

@@ -1,68 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  position: 'absolute',
-  width: vars.arrow.size,
-  height: vars.arrow.size,
-
-  selectors: {
-    ':empty + &': {
-      display: 'none',
-    },
-
-    '[data-placement^="top"] &': {
-      bottom: `calc(0px - ${vars.arrow.size})`,
-    },
-
-    '[data-placement^="right"] &': {
-      left: `calc(0px - ${vars.arrow.size})`,
-    },
-
-    '[data-placement^="left"] &': {
-      right: `calc(0px - ${vars.arrow.size})`,
-    },
-
-    '[data-placement^="bottom"] &': {
-      top: `calc(0px - ${vars.arrow.size})`,
-    },
-  },
-})
-
-export const svg: string = _style(layers.primitives, {
-  display: 'block',
-  transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`,
-
-  selectors: {
-    '[data-placement^="top"] &': {
-      transform: 'rotate(0deg)',
-    },
-
-    '[data-placement^="right"] &': {
-      transform: 'rotate(90deg)',
-    },
-
-    '[data-placement^="left"] &': {
-      transform: 'rotate(-90deg)',
-    },
-
-    '[data-placement^="bottom"] &': {
-      transform: 'rotate(180deg)',
-    },
-  },
-})
-
-export const strokeMask: string = _style(layers.primitives, {
-  // @ts-expect-error `y` is not a valid property in 'csstype'
-  y: vars.shadow.outline,
-})
-
-export const stroke: string = _style(layers.primitives, {
-  stroke: vars.color.shadow.outline,
-  strokeWidth: `calc(${vars.card.shadow.outline} * 2)`,
-})
-
-export const fill: string = _style(layers.primitives, {
-  fill: vars.color.bg,
-})

package/src/css/primitives/_arrow/_arrow.ts

@@ -1,26 +0,0 @@
-import {fill, root, stroke, strokeMask, svg} from './_arrow.css'
-
-/** @internal */
-export function _arrow(): string | undefined {
-  return root
-}
-
-/** @internal */
-export function _arrowSvg(): string | undefined {
-  return svg
-}
-
-/** @internal */
-export function _arrowStroke(): string | undefined {
-  return stroke
-}
-
-/** @internal */
-export function _arrowStrokeMask(): string | undefined {
-  return strokeMask
-}
-
-/** @internal */
-export function _arrowShape(): string | undefined {
-  return fill
-}

package/src/css/primitives/_input/_input.css.ts

@@ -1,261 +0,0 @@
-import {FONT_TEXT_SIZE, type FontTextSize, SPACE, type Space} from '@sanity/ui/theme'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  position: 'relative',
-})
-
-export const border: string = _style(layers.primitives, {})
-
-export const element: string = _style(layers.primitives, {
-  WebkitFontSmoothing: 'inherit',
-  appearance: 'none',
-  border: 0,
-  outline: 'none',
-  margin: 0,
-  fontFamily: vars.font.text.family,
-  fontSize: vars.input.text.fontSize,
-  lineHeight: vars.input.text.lineHeight,
-  letterSpacing: vars.input.text.letterSpacing,
-  backgroundColor: 'transparent',
-  color: vars.color.input.text.fg,
-  padding: [
-    `calc(${vars.input.text.padding} - ${vars.input.text.ascenderHeight})`,
-    vars.input.text.padding,
-    `calc(${vars.input.text.padding} - ${vars.input.text.descenderHeight})`,
-    vars.input.text.padding,
-  ].join(' '),
-  borderRadius: 'inherit',
-  position: 'relative',
-  zIndex: 1,
-  display: 'block',
-  boxSizing: 'border-box',
-  resize: 'none',
-  // See https://caniuse.com/?search=width%3A%20stretch
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-
-  selectors: {
-    '&::placeholder': {
-      color: vars.color.input.text.placeholder,
-      opacity: 1,
-    },
-
-    [`${root}[data-icon-left] &`]: {
-      paddingLeft: `calc(${vars.input.text.padding} + calc(${vars.input.text.lineHeight} - ${vars.input.text.ascenderHeight} - ${vars.input.text.descenderHeight}) + ${vars.input.text.gap})`,
-    },
-
-    [`${root}[data-icon-right] &`]: {
-      paddingRight: `calc(${vars.input.text.padding} + calc(${vars.input.text.lineHeight} - ${vars.input.text.ascenderHeight} - ${vars.input.text.descenderHeight}) + ${vars.input.text.gap})`,
-    },
-
-    [`${root}:not([data-invalid]) &`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[2],
-        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[4],
-      },
-    },
-
-    [`${root}:not([data-invalid]) &:hover`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[0],
-      },
-    },
-
-    [`${root}:not([data-invalid]) &:focus`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[0],
-      },
-    },
-
-    [`${root}:not([data-invalid]) &:disabled`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.border[4],
-        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[1],
-      },
-    },
-
-    [`${root}[data-invalid] &`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[2],
-        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
-      },
-    },
-
-    [`${root}[data-invalid] &:hover`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[1],
-      },
-    },
-
-    [`${root}[data-invalid] &:focus`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[1],
-      },
-    },
-
-    [`${root}[data-invalid] &:disabled`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.border[4],
-        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
-      },
-    },
-  },
-})
-
-export const presentation: string = _style(layers.primitives, {
-  backgroundColor: vars.color.input.text.bg,
-  borderRadius: 'inherit',
-  boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: 'block',
-  pointerEvents: 'none',
-  zIndex: 0,
-
-  selectors: {
-    [`${root}[data-prefix] &`]: {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    },
-
-    [`${root}[data-suffix] &`]: {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-
-    // focus ring
-    [`${element}:not([data-no-focus-ring]):focus + &`]: {
-      outlineWidth: vars.input.text.focusRing.width,
-      outlineStyle: 'solid',
-      outlineColor: vars.color.focusRing,
-      outlineOffset: vars.input.text.focusRing.offset,
-    },
-
-    // valid
-
-    [`${root}:not([data-invalid]) &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.default.bg[0],
-        [vars.color.input.text.border]: vars.color.tinted.default.border[1],
-      },
-    },
-
-    [`${root}:not([data-invalid])[data-read-only] ${element} + &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.default.bg[1],
-      },
-    },
-
-    [`${root}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
-      },
-    },
-
-    [`${root}:not([data-invalid]) ${element}:focus + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[1],
-      },
-    },
-
-    [`${root}:not([data-invalid]) ${element}:disabled + &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.default.bg[1],
-        [vars.color.input.text.border]: vars.color.tinted.default.border[0],
-        [vars.color.muted.fg]: vars.color.tinted.default.border[4],
-      },
-    },
-
-    // invalid
-
-    [`${root}[data-invalid] &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.critical.bg[1],
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[1],
-        [vars.color.muted.fg]: vars.color.tinted.critical.fg[4],
-      },
-    },
-
-    [`${root}[data-invalid] ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
-      },
-    },
-
-    [`${root}[data-invalid] ${element}:focus + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
-      },
-    },
-
-    [`${root}[data-invalid] ${element}:disabled + &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.critical.bg[1],
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[0],
-      },
-    },
-
-    [`${root}:not(${border}) &`]: {
-      vars: {
-        [vars.color.input.text.border]: 'transparent',
-      },
-    },
-  },
-})
-
-export const fontSize: ResponsiveRuleOptions<FontTextSize> = {
-  ..._fromEntries(
-    FONT_TEXT_SIZE.map((s) => {
-      const source = vars.font.text.scale[s]
-
-      return [
-        s,
-        _responsiveStyle(layers.primitives, {
-          vars: {
-            [vars.input.text.fontSize]: source.fontSize,
-            [vars.input.text.lineHeight]: source.lineHeight,
-            [vars.input.text.letterSpacing]: source.letterSpacing,
-            [vars.input.text.ascenderHeight]: source.ascenderHeight,
-            [vars.input.text.descenderHeight]: source.descenderHeight,
-          },
-        }),
-      ]
-    }),
-  ),
-}
-
-export const padding: ResponsiveRuleOptions<Space> = {
-  ..._fromEntries(
-    SPACE.map((s) => [
-      s,
-      _responsiveStyle(layers.primitives, {
-        vars: {
-          [vars.input.text.padding]: vars.space[s],
-        },
-      }),
-    ]),
-  ),
-}
-
-export const gap: ResponsiveRuleOptions<Space> = {
-  ..._fromEntries(
-    SPACE.map((s) => [
-      s,
-      _responsiveStyle(layers.primitives, {
-        vars: {
-          [vars.input.text.gap]: vars.space[s],
-        },
-      }),
-    ]),
-  ),
-}

package/src/css/primitives/_input/input.ts

@@ -1,29 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {radius} from '../../props/radius/radius'
-import {width} from '../../props/width/width'
-import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
-import type {InputStyleProps} from './types'
-
-/** @internal */
-export function _input(props: InputStyleProps): string | undefined {
-  return _composeClassNames(
-    root,
-    props.border && border,
-    _responsiveClassName(fontSize, props.fontSize ?? 2),
-    _responsiveClassName(padding, props.padding ?? 3),
-    _responsiveClassName(gap, props.gap ?? 3),
-    radius(props),
-    width(props),
-  )
-}
-
-/** @internal */
-export function _inputElement(): string | undefined {
-  return element
-}
-
-/** @internal */
-export function _inputPresentation(): string | undefined {
-  return presentation
-}

package/src/css/primitives/_input/types.ts

@@ -1,13 +0,0 @@
-import type {FontTextSize, Space} from '@sanity/ui/theme'
-
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {WidthStyleProps} from '../../props/width/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
-  border?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  gap?: ResponsiveProp<Space>
-  padding?: ResponsiveProp<Space>
-}