@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/css/primitives/avatar/avatar.css.ts

@@ -0,0 +1,197 @@
+import {AVATAR_COLORS, AVATAR_SIZE, type AvatarColor, type AvatarSize} from '@sanity/ui/theme'
+import {globalStyle} from '@vanilla-extract/css'
+
+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 stack: string = _style(layers.primitives, {})
+
+globalStyle(`${stack} > * + *`, {
+  '@layer': {
+    [layers.primitives]: {
+      marginLeft: vars.avatar.distance,
+    },
+  },
+})
+
+export const root: string = _style(layers.primitives, {
+  backgroundColor: vars.color.avatar.bg,
+  position: 'relative',
+  boxSizing: 'border-box',
+  userSelect: 'none',
+  boxShadow: `0 0 0 1px ${vars.color.bg}`,
+  lineHeight: 0,
+  width: vars.avatar.size,
+  height: vars.avatar.size,
+  borderRadius: vars.avatar.size,
+
+  vars: {
+    [vars.color.fg]: vars.color.avatar.fg,
+  },
+
+  selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+
+    'button.&': {
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      margin: 0,
+      padding: 0,
+      border: 0,
+      font: 'inherit',
+      color: 'inherit',
+      outline: 'none',
+    },
+
+    'button.&:focus': {
+      outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.avatar.focusRing.offset,
+    },
+
+    'button.&:focus:not(:focus-visible)': {
+      boxShadow: 'none',
+    },
+
+    ':disabled &, [data-disabled] &': {
+      vars: {
+        [vars.color.avatar.bg]: vars.color.border,
+        [vars.color.avatar.fg]: vars.color.bg,
+      },
+    },
+  },
+})
+
+export const colors: Record<AvatarColor, string> = {
+  ..._fromEntries(
+    AVATAR_COLORS.map((c) => [
+      c,
+      _style(layers.primitives, {
+        vars: {
+          [vars.color.avatar.bg]: vars.color.avatar[c].bg,
+          [vars.color.avatar.fg]: vars.color.avatar[c].fg,
+        },
+      }),
+    ]),
+  ),
+}
+
+export const arrow: string = _style(layers.primitives, {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  zIndex: 0,
+  opacity: 0,
+  transition: 'all 0.2s linear',
+  transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+
+  selectors: {
+    '[data-arrow-position="inside"] > &': {
+      transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+      opacity: 0,
+    },
+
+    '[data-arrow-position="top"] > &': {
+      opacity: 1,
+      transform: 'rotate(0deg)',
+    },
+
+    '[data-arrow-position="bottom"] > &': {
+      opacity: 1,
+      transform: 'rotate(-180deg)',
+    },
+  },
+})
+
+export const arrowSvg: string = _style(layers.primitives, {
+  display: 'block',
+  width: '11px',
+  height: '7px',
+  position: 'absolute',
+  top: '-5px',
+  left: '50%',
+  transform: 'translateX(-6px)',
+})
+
+export const image: string = _style(layers.primitives, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: vars.avatar.size,
+  height: vars.avatar.size,
+  borderRadius: 'inherit',
+
+  selectors: {
+    '[data-image-error] &': {
+      display: 'none',
+    },
+  },
+})
+
+globalStyle(`${image} img`, {
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'inherit',
+})
+
+export const imageOutline: string = _style(layers.primitives, {
+  display: 'block',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: vars.avatar.size,
+  height: vars.avatar.size,
+  borderRadius: 'inherit',
+  boxShadow: [
+    `inset 0 0 0 1px ${vars.color.avatar.bg}`,
+    `inset 0 0 0 1.75px ${vars.color.bg}`,
+  ].join(', '),
+})
+
+export const initials: string = _style(layers.primitives, {
+  color: vars.color.avatar.fg,
+  borderRadius: 'inherit',
+})
+
+export const counter: string = _style(layers.primitives, {
+  color: vars.color.fg,
+  backgroundColor: vars.color.bg,
+  boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
+  userSelect: 'none',
+  borderRadius: vars.avatar.size,
+  height: vars.avatar.size,
+
+  selectors: {
+    '&&': {
+      minWidth: vars.avatar.size,
+    },
+
+    '[data-hide-inner-stroke] &': {
+      boxShadow: `0 0 0 1px ${vars.color.bg}`,
+    },
+  },
+})
+
+export const scale: ResponsiveRuleOptions<AvatarSize> = {
+  ..._fromEntries(
+    AVATAR_SIZE.map((s) => [
+      s,
+      _responsiveStyle(layers.primitives, {
+        vars: {
+          [vars.avatar.distance]: vars.avatar.scale[s].distance,
+          [vars.avatar.size]: vars.avatar.scale[s].size,
+        },
+      }),
+    ]),
+  ),
+}

package/src/css/primitives/avatar/avatar.ts

@@ -0,0 +1,68 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props/flex/flex'
+import {
+  arrow,
+  arrowSvg,
+  colors,
+  counter,
+  image,
+  imageOutline,
+  initials,
+  root,
+  scale,
+  stack,
+} from './avatar.css'
+import type {AvatarStyleProps} from './types'
+
+/** @public */
+export function avatar(props: AvatarStyleProps): string | undefined {
+  return _composeClassNames(
+    props.className,
+    root,
+    colors[props.color ?? 'gray'],
+    _responsiveClassName(scale, props.size ?? 1),
+    flex({flex: 'none'}),
+  )
+}
+
+/** @public */
+export function avatarArrow(): string | undefined {
+  return arrow
+}
+
+/** @public */
+export function avatarArrowSvg(): string | undefined {
+  return arrowSvg
+}
+
+/** @public */
+export function avatarInitials(): string | undefined {
+  return initials
+}
+
+/** @public */
+export function avatarImage(): string | undefined {
+  return image
+}
+
+/** @public */
+export function avatarImageOutline(): string | undefined {
+  return imageOutline
+}
+
+/** @public */
+export function avatarCounter(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined {
+  return _composeClassNames(props.className, counter, _responsiveClassName(scale, props.size ?? 1))
+}
+
+/** @public */
+export function avatarStack(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined {
+  return _composeClassNames(props.className, stack, _responsiveClassName(scale, props.size ?? 1))
+}

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

@@ -0,0 +1,10 @@
+import type {AvatarColor, AvatarSize} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface AvatarStyleProps {
+  className?: string
+  color: AvatarColor
+  size: ResponsiveProp<AvatarSize>
+}

package/src/css/primitives/badge/badge.css.ts

@@ -0,0 +1,27 @@
+import {ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root: string = _style(layers.primitives, {
+  backgroundColor: vars.color.bg,
+  color: vars.color.fg,
+  whiteSpace: 'nowrap',
+})
+
+export const tones: Record<ElementTone, string> = {
+  ..._fromEntries(
+    ELEMENT_TONES.map((t) => [
+      t,
+      _style(layers.primitives, {
+        vars: {
+          [vars.color.bg]: vars.color.tinted[t].bg[2],
+          [vars.color.border]: vars.color.tinted[t].border[2],
+          [vars.color.fg]: vars.color.tinted[t].fg[3],
+        },
+      }),
+    ]),
+  ),
+}

package/src/css/primitives/badge/badge.ts

@@ -0,0 +1,8 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {root, tones} from './badge.css'
+import type {BadgeStyleProps} from './types'
+
+/** @public */
+export function badge(props: BadgeStyleProps): string | undefined {
+  return _composeClassNames(props.className, root, tones[props.tone ?? 'default'])
+}

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

@@ -0,0 +1,13 @@
+import type {ElementTone, FontTextSize} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type BadgeTone = ElementTone
+
+/** @public */
+export interface BadgeStyleProps {
+  className?: string
+  fontSize?: ResponsiveProp<FontTextSize>
+  tone?: BadgeTone
+}

package/src/css/primitives/box/box.css.ts

@@ -0,0 +1,19 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root: string = _style(layers.primitives, {
+  selectors: {
+    'iframe.&': {
+      border: 'none',
+    },
+
+    'ul.&, ol.&': {
+      listStyle: 'none',
+    },
+  },
+})
+
+export const muted: string = _style(layers.primitives, {
+  backgroundColor: vars.color.muted.bg,
+})

package/src/css/primitives/box/box.ts

@@ -0,0 +1,82 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {alignItems} from '../../props/alignItems/alignItems'
+import {border} from '../../props/border/border'
+import {boxSizing} from '../../props/boxSizing/boxSizing'
+import {display} from '../../props/display/display'
+import {flex} from '../../props/flex/flex'
+import {flexDirection} from '../../props/flexDirection/flexDirection'
+import {flexWrap} from '../../props/flexWrap/flexWrap'
+import {gap} from '../../props/gap/gap'
+import {gridAutoColumns} from '../../props/gridAutoColumns/gridAutoColumns'
+import {gridAutoFlow} from '../../props/gridAutoFlow/gridAutoFlow'
+import {gridAutoRows} from '../../props/gridAutoRows/gridAutoRows'
+import {gridColumn} from '../../props/gridColumn/gridColumn'
+import {gridColumnEnd} from '../../props/gridColumnEnd/gridColumnEnd'
+import {gridColumnStart} from '../../props/gridColumnStart/gridColumnStart'
+import {gridRow} from '../../props/gridRow/gridRow'
+import {gridRowEnd} from '../../props/gridRowEnd/gridRowEnd'
+import {gridRowStart} from '../../props/gridRowStart/gridRowStart'
+import {gridTemplateColumns} from '../../props/gridTemplateColumns/gridTemplateColumns'
+import {gridTemplateRows} from '../../props/gridTemplateRows/gridTemplateRows'
+import {height} from '../../props/height/height'
+import {inset} from '../../props/inset/inset'
+import {justifyContent} from '../../props/justifyContent/justifyContent'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
+import {minHeight} from '../../props/minHeight/minHeight'
+import {minWidth} from '../../props/minWidth/minWidth'
+import {outline} from '../../props/outline/outline'
+import {overflow} from '../../props/overflow/overflow'
+import {padding} from '../../props/padding/padding'
+import {pointerEvents} from '../../props/pointerEvents/pointerEvents'
+import {position} from '../../props/position/position'
+import {radius} from '../../props/radius/radius'
+import {shadow} from '../../props/shadow/shadow'
+import {textAlign} from '../../props/textAlign/textAlign'
+import {width} from '../../props/width/width'
+import {muted, root} from './box.css'
+import type {BoxStyleProps} from './types'
+
+/** @public */
+export function box(props: BoxStyleProps): string | undefined {
+  return _composeClassNames(
+    props.className,
+    root,
+    props.muted && muted,
+    alignItems(props),
+    border(props),
+    boxSizing({boxSizing: props.sizing}),
+    display(props),
+    height(props),
+    flex(props),
+    flexDirection(props),
+    flexWrap(props),
+    gap(props),
+    gridAutoColumns(props),
+    gridAutoFlow(props),
+    gridAutoRows(props),
+    gridColumn(props),
+    gridColumnEnd(props),
+    gridColumnStart(props),
+    gridRow(props),
+    gridRowEnd(props),
+    gridRowStart(props),
+    gridTemplateColumns(props),
+    gridTemplateRows(props),
+    inset(props),
+    justifyContent(props),
+    margin(props),
+    maxWidth(props),
+    minHeight(props),
+    minWidth(props),
+    overflow(props),
+    padding(props),
+    pointerEvents(props),
+    position(props),
+    outline(props),
+    radius(props),
+    shadow(props),
+    textAlign(props),
+    width(props),
+  )
+}

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

@@ -0,0 +1,75 @@
+import type {AlignItemsStyleProps} from '../../props/alignItems/types'
+import type {BorderStyleProps} from '../../props/border/types'
+import type {BoxSizingStyleProps} from '../../props/boxSizing/types'
+import type {DisplayStyleProps} from '../../props/display/types'
+import type {FlexStyleProps} from '../../props/flex/types'
+import type {FlexDirectionStyleProps} from '../../props/flexDirection/types'
+import type {FlexWrapStyleProps} from '../../props/flexWrap/types'
+import type {GapStyleProps} from '../../props/gap/types'
+import type {GridAutoColumnsStyleProps} from '../../props/gridAutoColumns/types'
+import type {GridAutoFlowStyleProps} from '../../props/gridAutoFlow/types'
+import type {GridAutoRowsStyleProps} from '../../props/gridAutoRows/types'
+import type {GridColumnStyleProps} from '../../props/gridColumn/types'
+import type {GridColumnEndStyleProps} from '../../props/gridColumnEnd/types'
+import type {GridColumnStartStyleProps} from '../../props/gridColumnStart/types'
+import type {GridRowStyleProps} from '../../props/gridRow/types'
+import type {GridRowEndStyleProps} from '../../props/gridRowEnd/types'
+import type {GridRowStartStyleProps} from '../../props/gridRowStart/types'
+import type {GridTemplateColumnsStyleProps} from '../../props/gridTemplateColumns/types'
+import type {GridTemplateRowsStyleProps} from '../../props/gridTemplateRows/types'
+import type {HeightStyleProps} from '../../props/height/types'
+import type {InsetStyleProps} from '../../props/inset/types'
+import type {JustifyContentStyleProps} from '../../props/justifyContent/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
+import type {MinHeightStyleProps} from '../../props/minHeight/types'
+import type {MinWidthStyleProps} from '../../props/minWidth/types'
+import type {OverflowStyleProps} from '../../props/overflow/types'
+import type {PaddingStyleProps} from '../../props/padding/types'
+import type {PointerEventsStyleProps} from '../../props/pointerEvents/types'
+import type {PositionStyleProps} from '../../props/position/types'
+import type {RadiusStyleProps} from '../../props/radius/types'
+import type {ShadowStyleProps} from '../../props/shadow/types'
+import type {TextAlignStyleProps} from '../../props/textAlign/types'
+import type {WidthStyleProps} from '../../props/width/types'
+
+/** @public */
+export interface BoxStyleProps
+  extends AlignItemsStyleProps,
+    BorderStyleProps,
+    DisplayStyleProps,
+    FlexDirectionStyleProps,
+    FlexStyleProps,
+    FlexWrapStyleProps,
+    GapStyleProps,
+    GridAutoColumnsStyleProps,
+    GridAutoFlowStyleProps,
+    GridAutoRowsStyleProps,
+    GridColumnEndStyleProps,
+    GridColumnStartStyleProps,
+    GridColumnStyleProps,
+    GridRowEndStyleProps,
+    GridRowStartStyleProps,
+    GridRowStyleProps,
+    GridTemplateColumnsStyleProps,
+    GridTemplateRowsStyleProps,
+    HeightStyleProps,
+    InsetStyleProps,
+    JustifyContentStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps,
+    MinHeightStyleProps,
+    MinWidthStyleProps,
+    OverflowStyleProps,
+    PaddingStyleProps,
+    PointerEventsStyleProps,
+    PositionStyleProps,
+    RadiusStyleProps,
+    ShadowStyleProps,
+    TextAlignStyleProps,
+    WidthStyleProps {
+  className?: string
+  muted?: boolean
+  outline?: 'none'
+  sizing?: BoxSizingStyleProps['boxSizing']
+}