@sanity/ui 4.0.0-static.9 → 4.0.0

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

@@ -1,82 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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']
-}

package/src/css/primitives/button/button.css.ts

@@ -1,287 +0,0 @@
-import {AVATAR_COLORS, type ButtonMode, 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, {
-  WebkitFontSmoothing: 'inherit',
-  alignItems: 'center',
-  appearance: 'none',
-  font: 'inherit',
-  outline: 'none',
-  userSelect: 'none',
-  textDecoration: 'none',
-  border: 0,
-  boxSizing: 'border-box',
-  padding: 0,
-  overflow: 'hidden',
-  margin: 0,
-  textAlign: 'left',
-  position: 'relative',
-  verticalAlign: 'top',
-  backgroundColor: vars.color.bg,
-  color: vars.color.fg,
-
-  //
-  transition:
-    'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
-
-  selectors: {
-    '&::-moz-focus-inner': {
-      border: 0,
-      padding: 0,
-    },
-
-    '&:focus': {
-      outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
-      outlineOffset: vars.button.focusRing.offset,
-    },
-
-    '&:focus:not(:focus-visible)': {
-      outline: 'none',
-    },
-  },
-})
-
-export const modes: Record<ButtonMode, string> = {
-  default: _style(layers.primitives, {}),
-  ghost: _style(layers.primitives, {boxShadow: vars.button.boxShadow}),
-  bleed: _style(layers.primitives, {}),
-}
-
-export const loadingBox: string = _style(layers.primitives, {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: vars.color.bg,
-  borderRadius: 'inherit',
-  zIndex: 1,
-  opacity: 0.8,
-})
-
-export const tones: Record<ElementTone, string> = {
-  ..._fromEntries(
-    ELEMENT_TONES.map((t) => {
-      const solid = vars.color.solid[t]
-      const tinted = vars.color.tinted[t]
-
-      return [
-        t,
-        _style(layers.primitives, {
-          selectors: {
-            // default
-
-            [`&.${modes.default}`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[0],
-                [vars.color.border]: solid.border[1],
-                [vars.color.code.bg]: solid.bg[1],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[1],
-                [vars.color.muted.fg]: solid.fg[4],
-                [vars.button.boxShadow]: 'none',
-              },
-            },
-
-            [`&.${modes.default}:not([data-disabled]):hover`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[1],
-                [vars.color.border]: solid.border[2],
-                [vars.color.code.bg]: solid.bg[2],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[2],
-                [vars.color.muted.fg]: solid.fg[4],
-              },
-            },
-
-            [`&.${modes.default}:not([data-disabled]):active`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[2],
-                [vars.color.border]: solid.border[3],
-                [vars.color.code.bg]: solid.bg[3],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[3],
-                [vars.color.muted.fg]: solid.fg[4],
-              },
-            },
-
-            [`&.${modes.default}:not([data-disabled])[data-selected]`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[2],
-                [vars.color.border]: solid.border[3],
-                [vars.color.code.bg]: solid.bg[3],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[3],
-                [vars.color.muted.fg]: solid.fg[4],
-              },
-            },
-
-            [`&.${modes.default}[data-disabled]`]: {
-              vars: {
-                ..._fromEntries(
-                  AVATAR_COLORS.map((c) => [
-                    vars.color.avatar[c].bg,
-                    vars.color.tinted.default.bg[3],
-                  ]),
-                ),
-
-                [vars.color.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.border]: vars.color.tinted.default.border[1],
-                [vars.color.code.bg]: vars.color.tinted.default.bg[2],
-                [vars.color.code.fg]: vars.color.tinted.default.border[4],
-                [vars.color.fg]: vars.color.tinted.default.border[4],
-                [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
-                [vars.color.muted.fg]: vars.color.tinted.default.border[4],
-              },
-            },
-
-            // ghost
-
-            [`&.${modes.ghost}`]: {
-              vars: {
-                [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
-                [vars.color.border]: tinted.border[0],
-                [vars.color.fg]: tinted.fg[2],
-                [vars.color.code.bg]: tinted.bg[2],
-                [vars.color.code.fg]: tinted.fg[4],
-                [vars.color.muted.bg]: tinted.bg[2],
-                [vars.color.muted.fg]: tinted.fg[4],
-                [vars.button.boxShadow]:
-                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
-              },
-            },
-
-            [`&.${modes.ghost}:not([data-disabled]):hover`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[1],
-                [vars.color.border]: tinted.border[1],
-                [vars.color.code.bg]: tinted.bg[3],
-                [vars.color.code.fg]: tinted.fg[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[3],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.ghost}:not([data-disabled]):active`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[2],
-                [vars.color.code.bg]: tinted.bg[4],
-                [vars.color.code.fg]: tinted.fg[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[4],
-                [vars.color.muted.fg]: tinted.fg[3],
-                [vars.button.boxShadow]:
-                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
-              },
-            },
-
-            [`&.${modes.ghost}:not([data-disabled])[data-selected]`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[2],
-                [vars.color.code.bg]: tinted.bg[4],
-                [vars.color.code.fg]: tinted.fg[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[4],
-                [vars.color.muted.fg]: tinted.fg[3],
-                [vars.button.boxShadow]:
-                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
-              },
-            },
-
-            [`&.${modes.ghost}[data-disabled]`]: {
-              vars: {
-                ..._fromEntries(
-                  AVATAR_COLORS.map((c) => [
-                    vars.color.avatar[c].bg,
-                    vars.color.tinted.default.bg[2],
-                  ]),
-                ),
-
-                [vars.color.bg]: vars.color.tinted.default.bg[0],
-                [vars.color.border]: vars.color.tinted.default.border[0],
-                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.code.fg]: vars.color.tinted.default.border[3],
-                [vars.color.fg]: vars.color.tinted.default.border[4],
-                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
-              },
-            },
-
-            // bleed
-
-            [`&.${modes.bleed}`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[0],
-                [vars.color.border]: tinted.border[1],
-                [vars.color.fg]: tinted.fg[2],
-                [vars.color.muted.bg]: tinted.bg[1],
-                [vars.color.muted.fg]: tinted.fg[4],
-                [vars.button.boxShadow]: 'none',
-              },
-            },
-
-            [`&.${modes.bleed}:not([data-disabled]):hover`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[1],
-                [vars.color.border]: tinted.border[2],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[2],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.bleed}:not([data-disabled]):active`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[3],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.bleed}:not([data-disabled])[data-selected]`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[3],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.bleed}[data-disabled]`]: {
-              vars: {
-                ..._fromEntries(
-                  AVATAR_COLORS.map((c) => [
-                    vars.color.avatar[c].bg,
-                    vars.color.tinted.default.bg[2],
-                  ]),
-                ),
-
-                [vars.color.bg]: vars.color.tinted.default.bg[0],
-                [vars.color.border]: vars.color.tinted.default.border[0],
-                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.code.fg]: vars.color.tinted.default.border[3],
-                [vars.color.fg]: vars.color.tinted.default.border[4],
-                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
-              },
-            },
-          },
-        }),
-      ]
-    }),
-  ),
-}

package/src/css/primitives/button/button.ts

@@ -1,26 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {radius} from '../../props/radius/radius'
-import {width} from '../../props/width/width'
-import {loadingBox, modes, root, tones} from './button.css'
-import type {ButtonStyleProps} from './types'
-
-/** @public */
-export function button(props: ButtonStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    modes[props.mode ?? 'default'],
-    tones[props.tone ?? 'default'],
-    display({display: 'flex'}),
-    flex(props),
-    radius(props),
-    width(props),
-  )
-}
-
-/** @public */
-export function buttonLoadingBox(): string {
-  return loadingBox
-}

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

@@ -1,12 +0,0 @@
-import type {ButtonMode, ElementTone} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {WidthStyleProps} from '../../props/width/types'
-
-/** @public */
-export interface ButtonStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
-  className?: string
-  mode?: ButtonMode
-  tone?: ElementTone
-}

package/src/css/primitives/card/__workshop__/color.tsx

@@ -1,75 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-
-import {Box, Card, Code} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {
-  CARD_TONES,
-  type CardTone,
-  COLOR_SCHEMES,
-  COLOR_VARIANTS,
-  type ColorScheme,
-  type ColorVariant,
-} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop'
-
-interface ColorRecordNode extends Record<string, ColorNode> {}
-
-type ColorNode = string | ColorRecordNode
-
-export default function ColorStory(): React.JSX.Element {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
-
-  return (
-    <Card display="flex" flexDirection="column" gap={4} padding={4} tone={tone}>
-      {Object.entries(vars.color).map(([key, value]) => {
-        if (key === 'palette') {
-          return null
-        }
-
-        if (COLOR_SCHEMES.includes(key as ColorScheme)) {
-          return null
-        }
-
-        if (CARD_TONES.includes(key as CardTone)) {
-          return null
-        }
-
-        if (COLOR_VARIANTS.includes(key as ColorVariant)) {
-          // return null
-        }
-
-        return <ColorBox key={key} node={{key, value}} />
-      })}
-    </Card>
-  )
-}
-
-function ColorBox({node}: {node: {key: string; value: ColorNode}}) {
-  const {key, value} = node
-  const [open, setOpen] = useState(true)
-
-  if (typeof value === 'string') {
-    return (
-      <Box radius={2} padding={3} style={{backgroundColor: value}}>
-        <Code size={1}>{key}</Code>
-      </Box>
-    )
-  }
-
-  return (
-    <Box overflow="hidden" radius={3} shadow={1}>
-      <Card as="button" onClick={() => setOpen(!open)} padding={3} tone="inherit">
-        <Code size={1}>{`${key} +`}</Code>
-      </Card>
-
-      <Box display="flex" flexDirection="column" gap={3} hidden={!open} padding={3}>
-        {Object.entries(value).map(([key, value]) => (
-          <ColorBox key={key} node={{key, value}} />
-        ))}
-      </Box>
-    </Box>
-  )
-}

package/src/css/primitives/card/__workshop__/index.ts

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'css/card',
-  title: 'Card',
-  stories: [
-    {
-      name: 'color',
-      title: 'Color',
-      component: lazy(() => import('./color')),
-    },
-  ],
-}
-
-export default scope