@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

package/src/css/primitives/label/label.css.ts

@@ -1,13 +1,14 @@
-import {FONT_LABEL_SIZE} from '@sanity/ui/theme'
+import {FONT_LABEL_SIZE, type FontLabelSize} 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 root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   vars: {
     [vars.font.family]: vars.font.label.family,
     [vars.font.featureSettings]: vars.font.label.featureSettings,
@@ -58,11 +59,11 @@ globalStyle(`${root} svg`, {
   },
 })
 
-export const muted = _style(layers.primitives, {
+export const muted: string = _style(layers.primitives, {
   color: vars.color.muted.fg,
 })
 
-export const sizes = {
+export const sizes: ResponsiveRuleOptions<FontLabelSize> = {
   ..._fromEntries(
     FONT_LABEL_SIZE.map((s) => {
       const v = vars.font.label.scale[s]

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

@@ -5,16 +5,8 @@ import type {FontStyleProps} from '../../props/font/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
 
-/**
- * @public
- * @deprecated Use `FontLabelSize` from `@sanity/ui/theme` instead
- */
-export type LabelSize = number
-
 /** @public */
 export interface LabelStyleProps extends FlexStyleProps, FontStyleProps {
-  /** @deprecated No longer in use */
-  accent?: boolean
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean

package/src/css/primitives/popover/popover.css.ts

@@ -1,6 +1,6 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})
 
-export const card = _style(layers.primitives, {})
+export const card: string = _style(layers.primitives, {})

package/src/css/primitives/popover/popover.ts

@@ -2,11 +2,11 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {card, root} from './popover.css'
 
 /** @public */
-export function popover(props: {className?: string}) {
+export function popover(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, root)
 }
 
 /** @public */
-export function popoverCard() {
+export function popoverCard(): string | undefined {
   return _composeClassNames(card)
 }

package/src/css/primitives/radio/radio.css.ts

@@ -2,7 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   position: 'relative',
 
   selectors: {
@@ -12,7 +12,7 @@ export const root = _style(layers.primitives, {
   },
 })
 
-export const input = _style(layers.primitives, {
+export const input: string = _style(layers.primitives, {
   appearance: 'none',
   position: 'absolute',
   top: '0',
@@ -28,7 +28,7 @@ export const input = _style(layers.primitives, {
   border: 'none',
 })
 
-export const presentation = _style(layers.primitives, {
+export const presentation: string = _style(layers.primitives, {
   'display': 'block',
   'position': 'relative',
   'width': vars.input.radio.size,

package/src/css/primitives/radio/radio.ts

@@ -2,16 +2,16 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {input, presentation, root} from './radio.css'
 
 /** @public */
-export function radio(props: {className?: string}) {
+export function radio(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, root)
 }
 
 /** @public */
-export function radioInput() {
+export function radioInput(): string | undefined {
   return input
 }
 
 /** @public */
-export function radioPresentation() {
+export function radioPresentation(): string | undefined {
   return presentation
 }

package/src/css/primitives/root/root.css.ts

@@ -1,7 +1,8 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const _root = _style(layers.primitives, {
+export const _root: string = _style(layers.primitives, {
+  WebkitFontSmoothing: 'antialiased',
   // minWidth: `${320 / 16}rem`, // 320px
 
   selectors: {
@@ -9,7 +10,6 @@ export const _root = _style(layers.primitives, {
       MozTextSizeAdjust: 'none',
       WebkitTextSizeAdjust: 'none',
       textSizeAdjust: 'none',
-      WebkitFontSmoothing: 'antialiased',
     },
 
     'div.&': {

package/src/css/primitives/root/root.ts

@@ -6,12 +6,12 @@ import {_root} from './root.css'
 import type {RootStyleProps} from './types'
 
 /** @public */
-export function root(props: RootStyleProps) {
+export function root(props: RootStyleProps): string | undefined {
   return _composeClassNames(
     props.className,
     themeClassName,
     _root,
-    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'transparent'}),
+    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'default'}),
     height(props),
   )
 }

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

@@ -1,10 +1,10 @@
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 
 import type {HeightStyleProps} from '../../props/height/types'
 
 /** @public */
 export interface RootStyleProps extends HeightStyleProps {
   className?: string
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey
+  scheme?: ColorScheme
+  tone?: CardTone
 }

package/src/css/primitives/select/select.css.ts

@@ -3,15 +3,15 @@ import {globalStyle} from '@vanilla-extract/css'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})
 
-export const input = _style(layers.primitives, {
+export const input: string = _style(layers.primitives, {
   ':disabled': {
     opacity: 1,
   },
 })
 
-export const presentation = _style(layers.primitives, {})
+export const presentation: string = _style(layers.primitives, {})
 
 globalStyle(`${presentation} > span`, {
   '@layer': {

package/src/css/primitives/spinner/spinner.css.ts

@@ -4,20 +4,16 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 const spin = keyframes({
-  // '@layer': {
-  //   [layers.primitives]: {
   from: {
     transform: 'rotate(0deg)',
   },
   to: {
     transform: 'rotate(360deg)',
   },
-  //   },
-  // },
 })
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})
 
-export const spinnerIcon = _style(layers.primitives, {
+export const spinnerIcon: string = _style(layers.primitives, {
   animation: `${spin} 500ms linear infinite`,
 })

package/src/css/primitives/spinner/spinner.ts

@@ -3,11 +3,11 @@ import {root, spinnerIcon} from './spinner.css'
 import type {SpinnerStyleProps} from './types'
 
 /** @public */
-export function spinner(props: SpinnerStyleProps) {
+export function spinner(props: SpinnerStyleProps): string | undefined {
   return _composeClassNames(props.className, root)
 }
 
 /** @public */
-export function animatedSpinnerIcon() {
+export function animatedSpinnerIcon(): string {
   return spinnerIcon
 }

package/src/css/primitives/srOnly/srOnly.css.ts

@@ -1,7 +1,7 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   display: 'block',
   width: 0,
   height: 0,

package/src/css/primitives/srOnly/srOnly.ts

@@ -2,6 +2,6 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {root} from './srOnly.css'
 
 /** @public */
-export function srOnly(props: {className?: string}) {
+export function srOnly(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, root)
 }

package/src/css/primitives/stack/stack.css.ts

@@ -1,6 +1,6 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   gridTemplateColumns: 'minmax(0, 1fr)',
 })

package/src/css/primitives/stack/stack.ts

@@ -2,6 +2,6 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {root} from './stack.css'
 
 /** @public */
-export function stack(props: {className?: string}) {
+export function stack(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, root)
 }

package/src/css/primitives/switch/switch.css.ts

@@ -2,9 +2,9 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})
 
-export const input = _style(layers.primitives, {
+export const input: string = _style(layers.primitives, {
   position: 'absolute',
   top: 0,
   right: 0,
@@ -21,7 +21,7 @@ export const input = _style(layers.primitives, {
   zIndex: 1,
 })
 
-export const presentation = _style(layers.primitives, {
+export const presentation: string = _style(layers.primitives, {
   vars: {
     [vars.color.input.switch.bg]: vars.color.tinted.default.border[2],
     [vars.color.input.switch.fg]: vars.color.tinted.default.bg[0],
@@ -72,7 +72,7 @@ export const presentation = _style(layers.primitives, {
   },
 })
 
-export const track = _style(layers.primitives, {
+export const track: string = _style(layers.primitives, {
   display: 'block',
   backgroundColor: vars.color.input.switch.bg,
   position: 'absolute',
@@ -84,7 +84,7 @@ export const track = _style(layers.primitives, {
   transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
 })
 
-export const thumb = _style(layers.primitives, {
+export const thumb: string = _style(layers.primitives, {
   display: 'block',
   position: 'absolute',
   left: vars.input.switch.padding,

package/src/css/primitives/text/text.css.ts

@@ -1,13 +1,14 @@
-import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
+import {FONT_TEXT_SIZE, type FontTextSize} 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 root = _style(layers.primitives, {
+export const root: string = _style(layers.primitives, {
   vars: {
     [vars.font.family]: vars.font.text.family,
     [vars.font.featureSettings]: vars.font.text.featureSettings,
@@ -57,11 +58,11 @@ globalStyle(`${root} svg`, {
   },
 })
 
-export const muted = _style(layers.primitives, {
+export const muted: string = _style(layers.primitives, {
   color: vars.color.muted.fg,
 })
 
-export const sizes = {
+export const sizes: ResponsiveRuleOptions<FontTextSize> = {
   ..._fromEntries(
     FONT_TEXT_SIZE.map((s) => {
       const v = vars.font.text.scale[s]

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

@@ -1,3 +1,5 @@
+import type {FontTextSize} from '@sanity/ui/theme'
+
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
 import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
@@ -9,12 +11,8 @@ export type TextSize = number
 
 /** @public */
 export interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
-  /**
-   * @deprecated Will be removed in next major version
-   */
-  accent?: boolean
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean
-  size?: ResponsiveProp<TextSize>
+  size?: ResponsiveProp<FontTextSize>
 }

package/src/css/primitives/textArea/textArea.css.ts

@@ -1,4 +1,4 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})

package/src/css/primitives/textInput/textInput.css.ts

@@ -4,9 +4,9 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})
 
-export const prefix = _style(layers.primitives, {
+export const prefix: string = _style(layers.primitives, {
   borderTop: `1px solid ${vars.color.border}`,
   borderLeft: `1px solid ${vars.color.border}`,
   borderBottom: `1px solid ${vars.color.border}`,
@@ -21,11 +21,11 @@ globalStyle(`${prefix} > span`, {
   },
 })
 
-export const element = _style(layers.primitives, {
+export const element: string = _style(layers.primitives, {
   borderRadius: 'inherit',
 })
 
-export const suffix = _style(layers.primitives, {
+export const suffix: string = _style(layers.primitives, {
   borderTop: `1px solid ${vars.color.border}`,
   borderRight: `1px solid ${vars.color.border}`,
   borderBottom: `1px solid ${vars.color.border}`,

package/src/css/primitives/tooltip/tooltip.css.ts

@@ -1,4 +1,4 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {})

package/src/css/props/alignItems/alignItems.ts

@@ -3,6 +3,6 @@ import {options} from './alignItems.css'
 import type {AlignItemsStyleProps} from './types'
 
 /** @public */
-export function alignItems(props: AlignItemsStyleProps) {
+export function alignItems(props: AlignItemsStyleProps): string | undefined {
   return _responsiveClassName(options, props.alignItems)
 }

package/src/css/props/border/border.ts

@@ -1,18 +1,3 @@
-// import {_resp} from '../../_resp'
-// import {_scopeClassNames} from '../../_scopeClassNames'
-// import type {BorderStyleProps} from './types'
-
-// /** @public */
-// export function border(props: BorderStyleProps): string | undefined {
-//   return _scopeClassNames(
-//     _resp('border', props.border),
-//     _resp('border-t', props.borderTop),
-//     _resp('border-r', props.borderRight),
-//     _resp('border-b', props.borderBottom),
-//     _resp('border-l', props.borderLeft),
-//   )
-// }
-
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
 import {
@@ -25,7 +10,7 @@ import {
 import type {BorderStyleProps} from './types'
 
 /** @public */
-export function border(props: BorderStyleProps) {
+export function border(props: BorderStyleProps): string | undefined {
   return _composeClassNames(
     _responsiveClassName(borderOptions, props.border, {valueWhenTrue: 'solid'}),
     _responsiveClassName(borderTopOptions, props.borderTop, {valueWhenTrue: 'solid'}),

package/src/css/props/boxSizing/boxSizing.css.ts

@@ -1,7 +1,8 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
+import type {BoxSizing} from './types'
 
-export const options = {
+export const options: Record<BoxSizing, string> = {
   border: _style(layers.props, {
     boxSizing: 'border-box',
   }),

package/src/css/props/boxSizing/boxSizing.ts

@@ -1,10 +1,7 @@
-// import {_resp} from '../../_resp'
-// import {_scopeClassNames} from '../../_scopeClassNames'
 import {options} from './boxSizing.css'
 import type {BoxSizingStyleProps} from './types'
 
 /** @internal */
 export function boxSizing(props: BoxSizingStyleProps): string | undefined {
-  // return _scopeClassNames(_resp('box', props.boxSizing))
   return props.boxSizing && options[props.boxSizing]
 }

package/src/css/props/display/display.ts

@@ -1,17 +1,8 @@
-// import {_resp} from '../../_resp'
-// import {_scopeClassNames} from '../../_scopeClassNames'
-// import type {DisplayStyleProps} from './types'
-
-// /** @internal */
-// export function display(props: DisplayStyleProps): string | undefined {
-//   return _scopeClassNames(_resp(undefined, props.display))
-// }
-
 import {_responsiveClassName} from '../../_responsiveClassName'
 import {options} from './display.css'
 import type {DisplayStyleProps} from './types'
 
 /** @public */
-export function display(props: DisplayStyleProps) {
+export function display(props: DisplayStyleProps): string | undefined {
   return _responsiveClassName(options, props.display)
 }

package/src/css/props/flex/flex.ts

@@ -3,6 +3,6 @@ import {options} from './flex.css'
 import type {FlexStyleProps} from './types'
 
 /** @public */
-export function flex(props: FlexStyleProps) {
+export function flex(props: FlexStyleProps): string | undefined {
   return _responsiveClassName(options, props.flex)
 }

package/src/css/props/flexDirection/flexDirection.ts

@@ -3,6 +3,6 @@ import {options} from './flexDirection.css'
 import type {FlexDirectionStyleProps} from './types'
 
 /** @public */
-export function flexDirection(props: FlexDirectionStyleProps) {
+export function flexDirection(props: FlexDirectionStyleProps): string | undefined {
   return _responsiveClassName(options, props.flexDirection)
 }

package/src/css/props/flexWrap/flexWrap.ts

@@ -3,6 +3,6 @@ import {options} from './flexWrap.css'
 import type {FlexWrapStyleProps} from './types'
 
 /** @public */
-export function flexWrap(props: FlexWrapStyleProps) {
+export function flexWrap(props: FlexWrapStyleProps): string | undefined {
   return _responsiveClassName(options, props.flexWrap)
 }

package/src/css/props/font/font.css.ts

@@ -1,10 +1,11 @@
+import type {FontWeight} from '@sanity/ui/theme'
 import {globalStyle} from '@vanilla-extract/css'
 
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.props, {
+export const root: string = _style(layers.props, {
   'fontFamily': vars.font.family,
   'fontFeatureSettings': vars.font.featureSettings,
   'fontSize': vars.font.fontSize,
@@ -66,7 +67,7 @@ globalStyle(`${root} [data-sanity-icon]`, {
   },
 })
 
-export const weights = {
+export const weights: Record<FontWeight, string> = {
   regular: _style(layers.props, {
     vars: {
       [vars.font.fontWeight]: vars.font.weight.regular,

package/src/css/props/font/font.ts

@@ -3,6 +3,6 @@ import {root, weights} from './font.css'
 import type {FontStyleProps} from './types'
 
 /** @public */
-export function font(props: FontStyleProps) {
+export function font(props: FontStyleProps): string | undefined {
   return _composeClassNames(root, weights[props.weight ?? 'regular'])
 }

package/src/css/props/gap/gap.ts

@@ -4,7 +4,7 @@ import {gapOptions, gapXOptions, gapYOptions} from './gap.css'
 import type {GapStyleProps} from './types'
 
 /** @public */
-export function gap(props: GapStyleProps) {
+export function gap(props: GapStyleProps): string | undefined {
   return _composeClassNames(
     _responsiveClassName(gapOptions, props.gap),
     _responsiveClassName(gapXOptions, props.gapX),

package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts

@@ -1,9 +1,9 @@
 import {_responsiveStyle} from '../../_responsiveStyle.css'
 import {layers} from '../../layers.css'
 import type {ResponsiveRuleOptions} from '../../types'
-import type {GridAutoCols} from './types'
+import type {GridAutoColumns} from './types'
 
-export const options: ResponsiveRuleOptions<GridAutoCols> = {
+export const options: ResponsiveRuleOptions<GridAutoColumns> = {
   auto: _responsiveStyle(layers.props, {
     gridAutoColumns: 'auto',
   }),

package/src/css/props/gridAutoColumns/gridAutoColumns.ts

@@ -3,6 +3,6 @@ import {options} from './gridAutoColumns.css'
 import type {GridAutoColumnsStyleProps} from './types'
 
 /** @public */
-export function gridAutoColumns(props: GridAutoColumnsStyleProps) {
-  return _responsiveClassName(options, props.gridAutoColumns ?? props.autoCols)
+export function gridAutoColumns(props: GridAutoColumnsStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridAutoColumns)
 }

package/src/css/props/gridAutoColumns/types.ts

@@ -3,17 +3,7 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type GridAutoColumns = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- * @deprecated Use `GridAutoColumns` instead
- * */
-export type GridAutoCols = GridAutoColumns
-
 /** @public */
 export interface GridAutoColumnsStyleProps {
-  /**
-   * @deprecated Use `gridAutoColumns` instead
-   */
-  autoCols?: ResponsiveProp<GridAutoCols>
   gridAutoColumns?: ResponsiveProp<GridAutoColumns>
 }

package/src/css/props/gridAutoFlow/gridAutoFlow.ts

@@ -3,6 +3,6 @@ import {options} from './gridAutoFlow.css'
 import type {GridAutoFlowStyleProps} from './types'
 
 /** @public */
-export function gridAutoFlow(props: GridAutoFlowStyleProps) {
-  return _responsiveClassName(options, props.gridAutoFlow ?? props.autoFlow)
+export function gridAutoFlow(props: GridAutoFlowStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridAutoFlow)
 }

package/src/css/props/gridAutoFlow/types.ts

@@ -5,9 +5,5 @@ export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
 /** @public */
 export interface GridAutoFlowStyleProps {
-  /**
-   * @deprecated Use `gridAutoFlow` instead
-   */
-  autoFlow?: ResponsiveProp<GridAutoFlow>
   gridAutoFlow?: ResponsiveProp<GridAutoFlow>
 }

package/src/css/props/gridAutoRows/gridAutoRows.ts

@@ -3,6 +3,6 @@ import {options} from './gridAutoRows.css'
 import type {GridAutoRowsStyleProps} from './types'
 
 /** @public */
-export function gridAutoRows(props: GridAutoRowsStyleProps) {
-  return _responsiveClassName(options, props.gridAutoRows ?? props.autoRows)
+export function gridAutoRows(props: GridAutoRowsStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridAutoRows)
 }

package/src/css/props/gridAutoRows/types.ts

@@ -5,9 +5,5 @@ export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
 /** @public */
 export interface GridAutoRowsStyleProps {
-  /**
-   * @deprecated Use `gridAutoRows` instead
-   */
-  autoRows?: ResponsiveProp<GridAutoRows>
   gridAutoRows?: ResponsiveProp<GridAutoRows>
 }