@sanity/ui 4.0.0-static.9 → 4.0.0

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

@@ -1,36 +0,0 @@
-import type {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {MarginStyleProps} from '../../props/margin/types'
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @beta */
-
-export interface SkeletonStyleProps extends FlexStyleProps, MarginStyleProps, RadiusStyleProps {
-  className?: string
-}
-
-/** @beta */
-export interface CodeSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/** @beta */
-export interface HeadingSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontHeadingSize>
-}
-
-/** @beta */
-export interface LabelSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/** @beta */
-export interface TextSkeletonStyleProps {
-  className?: string
-  size?: ResponsiveProp<FontTextSize>
-}

package/src/css/components/toast/toast.css.ts

@@ -1,17 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const layer: string = _style(layers.components, {
-  position: 'absolute',
-  right: 0,
-  bottom: 0,
-  pointerEvents: 'none',
-  // minWidth: `${320 / 16}rem`, // 320px
-  maxWidth: `${420 / 16}rem`, // 420px
-  width: '100%',
-})
-
-export const root: string = _style(layers.components, {
-  pointerEvents: 'all',
-  overflow: ['hidden', 'clip'],
-})

package/src/css/components/toast/toast.ts

@@ -1,11 +0,0 @@
-import {layer, root} from './toast.css'
-
-/** @public */
-export function toastLayer(): string {
-  return layer
-}
-
-/** @public */
-export function toast(): string {
-  return root
-}

package/src/css/components/tree/tree.css.ts

@@ -1,65 +0,0 @@
-import {globalStyle} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const item: string = _style(layers.components, {
-  selectors: {
-    '&[role="treeitem"]': {
-      outline: 'none',
-    },
-  },
-})
-
-globalStyle(`${item}[role="none"] > [role="treeitem"]`, {
-  '@layer': {
-    [layers.components]: {
-      outline: 'none',
-      cursor: 'default',
-      borderRadius: '3px',
-
-      backgroundColor: vars.color.bg,
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${item}[role="none"] > [role="treeitem"]:focus`, {
-  '@layer': {
-    [layers.components]: {
-      position: 'relative',
-    },
-  },
-})
-
-globalStyle(`${item}[role="treeitem"] > div`, {
-  '@layer': {
-    [layers.components]: {
-      cursor: 'default',
-      borderRadius: '3px',
-
-      backgroundColor: vars.color.bg,
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${item}[role="treeitem"] > div`, {
-  '@layer': {
-    [layers.components]: {
-      cursor: 'default',
-      borderRadius: '3px',
-      backgroundColor: vars.color.bg,
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${item}[role="treeitem"]:focus > div`, {
-  '@layer': {
-    [layers.components]: {
-      position: 'relative',
-    },
-  },
-})

package/src/css/components/tree/tree.ts

@@ -1,7 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {item} from './tree.css'
-
-/** @beta */
-export function treeItem(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, item)
-}

package/src/css/constants.ts

@@ -1,10 +0,0 @@
-/** @public */
-export const BREAKPOINTS = {
-  0: 0,
-  1: 360,
-  2: 600,
-  3: 900,
-  4: 1200,
-  5: 1800,
-  6: 2400,
-}

package/src/css/getVarName.ts

@@ -1,27 +0,0 @@
-import type {CSSVarFunction, CSSVarName} from './types'
-
-const RE_CSS_VAR = /^var\((.*)\)$/
-
-/**
- * Extract the name of a CSS variable.
- *
- * @example
- * ```ts
- * getVarName('var(--color-primary)') // '--color-primary'
- * ```
- *
- * @public
- */
-export function getVarName(variable: CSSVarFunction): CSSVarName {
-  const matches = variable.match(RE_CSS_VAR)
-
-  if (matches) {
-    return matches[1] as CSSVarName
-  }
-
-  // NOTE: This code path should not occur when using TypeScript,
-  // and is a potential source of bugs.
-
-  // If the variable is not a CSS variable, return it as is.
-  return variable as CSSVarName
-}

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
-}