@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/dist/css.d.ts

@@ -20,35 +20,47 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {Tint} from '@sanity/ui/theme'
 
+/** @public */
 export declare function animatedSpinnerIcon(): string | undefined
 
 /** @internal */
 export declare function _arrow(): string | undefined
 
+/** @internal */
 export declare function _arrowShape(): string | undefined
 
+/** @internal */
 export declare function _arrowStroke(): string | undefined
 
+/** @internal */
 export declare function _arrowStrokeMask(): string | undefined
 
+/** @public */
 export declare function avatar(props: AvatarStyleProps): string | undefined
 
+/** @public */
 export declare function avatarArrow(): string | undefined
 
+/** @public */
 export declare function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined
 
+/** @public */
 export declare function avatarImage(): string | undefined
 
+/** @public */
 export declare function avatarInitials(): string | undefined
 
+/** @public */
 export declare type AvatarScopedVarName =
   | `--avatar-bg-color`
   | `--avatar-fg-color`
   | `--avatar-distance`
   | `--avatar-size`
 
+/** @public */
 export declare function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined
 
+/** @public */
 export declare interface AvatarStyleProps {
   color: ThemeColorAvatarColorKey
   size: ResponsiveProp<AvatarSize>
@@ -77,17 +89,13 @@ export declare interface BorderStyleProps {
 /** @public */
 export declare function box(props: BoxStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type BoxHeight = 'stretch' | 'fill'
 
 /** @public */
 export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
-/**
- * @public
- */
+/** @public */
 export declare type BoxSizing = 'content' | 'border'
 
 /** @public */
@@ -115,8 +123,10 @@ export declare interface BoxStyleProps
   sizing?: ResponsiveProp<BoxSizing>
 }
 
+/** @public */
 export declare function breadcrumbs(): string | undefined
 
+/** @public */
 export declare const BREAKPOINTS: {
   1: number
   2: number
@@ -126,12 +136,16 @@ export declare const BREAKPOINTS: {
   6: number
 }
 
+/** @public */
 export declare function button(props: ButtonStyleProps): string | undefined
 
+/** @public */
 export declare function buttonLoadingBox(): string | undefined
 
+/** @public */
 export declare type ButtonScopedVarName = '--button-box-shadow'
 
+/** @public */
 export declare interface ButtonStyleProps
   extends DisplayStyleProps,
     FlexItemStyleProps,
@@ -141,11 +155,11 @@ export declare interface ButtonStyleProps
   tone?: ThemeColorStateToneKey
 }
 
+/** @public */
 export declare function card(props: CardStyleProps): string | undefined
 
 /** @public */
 export declare type CardScopedVarName =
-  | `--color-accent-fg`
   | `--color-avatar-bg`
   | `--color-avatar-fg`
   | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
@@ -229,14 +243,17 @@ export declare type CardScopedVarName =
   | `--padding-bottom`
   | `--padding-left`
 
-export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
+/** @public */
+export declare interface CardStyleProps extends ShadowStyleProps {
   checkered?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'
 }
 
+/** @public */
 export declare function checkbox(): string | undefined
 
+/** @public */
 export declare function checkboxInput(): string | undefined
 
 /** @public */
@@ -245,8 +262,10 @@ export declare function code(props: CodeStyleProps): string | undefined
 /** @public */
 export declare type CodeSize = number
 
+/** @beta */
 export declare function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface CodeSkeletonStyleProps {
   size?: ResponsiveProp<FontCodeSize>
 }
@@ -282,8 +301,8 @@ export declare interface ColorBadgeToneVars {
 /** @public */
 export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
 
+/** @public */
 export declare type ColorCardToneScopedVarName =
-  | `--color-${ThemeColorCardToneKey}-accent-fg`
   | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
   | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
   | `--color-${ThemeColorCardToneKey}-backdrop`
@@ -337,8 +356,8 @@ export declare type ColorCardToneScopedVarName =
   | `--color-${ThemeColorCardToneKey}-skeleton-from`
   | `--color-${ThemeColorCardToneKey}-skeleton-to`
 
+/** @public */
 export declare type ColorCardVarName =
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
   | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
   | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
   | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
@@ -394,9 +413,6 @@ export declare type ColorCardVarName =
 
 /** @public */
 export declare interface ColorCardVarNames {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
   backdrop: VarName
   code: {
@@ -465,9 +481,6 @@ export declare interface ColorCardVarNames {
 
 /** @public */
 export declare interface ColorCardVars {
-  accent: {
-    fg: CSSVar
-  }
   avatar: ColorAvatarVars
   backdrop: CSSVar
   code: {
@@ -601,6 +614,7 @@ export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCar
 /** @public */
 export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey, ColorCardVars> {}
 
+/** @public */
 export declare interface ColorVariantVarNames
   extends ColorElementVarNames,
     Record<ThemeColorStateToneKey, ColorElementVarNames> {}
@@ -610,21 +624,27 @@ export declare interface ColorVariantVars
   extends Record<ThemeColorStateToneKey, ColorElementVars>,
     ColorElementVars {}
 
+/** @public */
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
+/** @internal */
 export declare function compilePalette(): string
 
-/** @public */
+/** @internal */
 export declare function compileSystem(): string
 
+/** @internal */
 export declare function compileTheme(theme: RootTheme): string
 
+/** @public */
 export declare function composeClassNames(
   ...classNames: Array<string | false | undefined>
 ): string | undefined
 
+/** @public */
 export declare function container(props: ContainerStyleProps): string | undefined
 
+/** @public */
 export declare interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }
@@ -635,23 +655,28 @@ export declare type CSSVar = `var(${VarName})`
 /** @public */
 export declare interface CustomCSSProperties extends Record<VarName, string> {}
 
+/** @public */
 export declare function dialog(): string | undefined
 
+/** @public */
 export declare function dialogCardRoot(): string | undefined
 
+/** @public */
 export declare function dialogContainer(): string | undefined
 
+/** @public */
 export declare function dialogContent(): string | undefined
 
+/** @public */
 export declare function dialogFooter(): string | undefined
 
+/** @public */
 export declare function dialogHeader(): string | undefined
 
+/** @public */
 export declare function dialogLayout(): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type Display =
   | 'block'
   | 'inline-block'
@@ -661,8 +686,10 @@ export declare type Display =
   | 'inline-grid'
   | 'none'
 
+/** @internal */
 export declare function display(props: DisplayStyleProps): string | undefined
 
+/** @public */
 export declare interface DisplayStyleProps {
   display?: ResponsiveProp<Display>
 }
@@ -695,14 +722,10 @@ export declare type ElementColorVariantScopedVarName =
 /** @public */
 export declare function flex(props: FlexStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
 /** @public */
@@ -713,9 +736,7 @@ export declare interface FlexItemStyleProps {
   flex?: ResponsiveProp<FlexValue>
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexJustify =
   | 'flex-start'
   | 'flex-end'
@@ -732,9 +753,7 @@ export declare interface FlexStyleProps {
   wrap?: ResponsiveProp<FlexWrap>
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexValue =
   | 'none'
   | 'auto'
@@ -753,9 +772,7 @@ export declare type FlexValue =
   | 11
   | 12
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
 /** @public */
@@ -787,6 +804,7 @@ export declare interface FontStyleProps {
   weight?: FontWeight
 }
 
+/** @public */
 export declare interface FontVarNames<Size extends number> {
   family: VarName
   featureSettings: VarName
@@ -811,58 +829,43 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
-export declare function getClassNames(...classNames: Array<string | false | undefined>): string[]
+/** @internal */
+export declare function _getClassNames(...classNames: Array<string | false | undefined>): string[]
 
+/** @internal */
 export declare function grid(props: GridStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- */
+/** @public */
 export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-/**
- * @public
- */
+/** @public */
 export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
-/** @public */
+/** @internal */
 export declare function gridItem(props: GridItemStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemColumn = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemColumnEnd = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemColumnStart = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemRow = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemRowEnd = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemRowStart = 'auto' | number
 
+/** @public */
 export declare interface GridItemStyleProps {
   column?: ResponsiveProp<GridItemColumn>
   columnStart?: ResponsiveProp<GridItemColumnStart>
@@ -887,8 +890,10 @@ export declare function heading(props: HeadingStyleProps): string | undefined
 /** @public */
 export declare type HeadingSize = number
 
+/** @beta */
 export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface HeadingSkeletonStyleProps {
   size?: ResponsiveProp<FontHeadingSize>
 }
@@ -900,9 +905,10 @@ export declare interface HeadingStyleProps extends FontStyleProps, FlexItemStyle
   size?: ResponsiveProp<HeadingSize>
 }
 
-/** @public */
+/** @internal */
 export declare function height(props: HeightStyleProps): string | undefined
 
+/** @public */
 export declare interface HeightStyleProps {
   height?: ResponsiveProp<BoxHeight>
 }
@@ -910,8 +916,10 @@ export declare interface HeightStyleProps {
 /** @internal */
 export declare function _input(props: InputStyleProps): string | undefined
 
+/** @internal */
 export declare function _inputElement(): string | undefined
 
+/** @internal */
 export declare function _inputPresentation(): string | undefined
 
 /** @public */
@@ -939,6 +947,7 @@ export declare interface InputStyleProps extends RadiusStyleProps, WidthStylePro
 /** @public */
 export declare type Inset = 0
 
+/** @internal */
 export declare function inset(props: InsetStyleProps): string | undefined
 
 /** @public */
@@ -950,10 +959,13 @@ export declare interface InsetStyleProps {
   insetLeft?: ResponsiveProp<Inset>
 }
 
+/** @internal */
 export declare function isArray(value: unknown): value is unknown[]
 
+/** @internal */
 export declare function isRecord(value: unknown): value is Record<string, unknown>
 
+/** @public */
 export declare function kbd(props: KBDStyleProps): string | undefined
 
 /** @public */
@@ -962,11 +974,16 @@ export declare interface KBDStyleProps extends RadiusStyleProps {}
 /** @public */
 export declare function label(props: LabelStyleProps): string | undefined
 
-/** @public */
+/**
+ * @public
+ * @deprecated Use `FontLabelSize` from `@sanity/ui/theme` instead
+ */
 export declare type LabelSize = number
 
+/** @beta */
 export declare function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface LabelSkeletonStyleProps {
   size?: ResponsiveProp<FontLabelSize>
 }
@@ -975,9 +992,10 @@ export declare interface LabelSkeletonStyleProps {
 export declare interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
   muted?: boolean
-  size?: ResponsiveProp<LabelSize>
+  size?: ResponsiveProp<FontLabelSize>
 }
 
+/** @public */
 export declare type LegacyCardScopedVarName =
   | `--card-accent-fg-color`
   | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
@@ -1012,8 +1030,10 @@ export declare type LegacyCardScopedVarName =
   | `--card-skeleton-from-color`
   | `--card-skeleton-to-color`
 
+/** @internal */
 export declare function margin(props: MarginStyleProps): string | undefined
 
+/** @public */
 export declare interface MarginStyleProps {
   margin?: ResponsiveProp<number>
   marginTop?: ResponsiveProp<number>
@@ -1024,24 +1044,32 @@ export declare interface MarginStyleProps {
   marginY?: ResponsiveProp<number>
 }
 
+/** @internal */
 export declare function maxWidth(props: MaxWidthStyleProps): string
 
+/** @public */
 export declare interface MaxWidthStyleProps {
   maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
 }
 
+/** @public */
 export declare function menu(): string | undefined
 
+/** @public */
 export declare function menuDivider(): string | undefined
 
+/** @public */
 export declare type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
 
+/** @internal */
 export declare function minWidth(props: MinWidthStyleProps): string
 
+/** @public */
 export declare interface MinWidthStyleProps {
   minWidth?: ResponsiveProp<MinWidth>
 }
 
+/** @internal */
 export declare function overflow(props: OverflowStyleProps): string | undefined
 
 /** @public */
@@ -1051,6 +1079,7 @@ export declare interface OverflowStyleProps {
   overflowY?: ResponsiveProp<BoxOverflow>
 }
 
+/** @internal */
 export declare function padding(props: PaddingStyleProps): string | undefined
 
 /** @public */
@@ -1070,6 +1099,7 @@ export declare type PaletteVarName = `--black` | `--white` | `--${Hue}-${Tint}`
 /** @public */
 export declare type PointerEvents = 'auto' | 'none'
 
+/** @internal */
 export declare function pointerEvents(props: PointerEventsStyleProps): string | undefined
 
 /** @public */
@@ -1077,13 +1107,16 @@ export declare interface PointerEventsStyleProps {
   pointerEvents?: PointerEvents
 }
 
+/** @public */
 export declare function popover(): string | undefined
 
+/** @public */
 export declare function popoverCard(): string | undefined
 
 /** @public */
 export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
 
+/** @internal */
 export declare function position(props: PositionStyleProps): string | undefined
 
 /** @public */
@@ -1091,6 +1124,7 @@ export declare interface PositionStyleProps {
   position?: ResponsiveProp<Position>
 }
 
+/** @public */
 export declare const PREFIX = 's-'
 
 /** @public */
@@ -1109,8 +1143,10 @@ export declare type PropertiesWithVarsAndNested = PropertiesWithVars & {
   '@nest'?: Record<string, PropertiesWithVars>
 }
 
+/** @internal */
 export declare function px(value: number): string
 
+/** @public */
 export declare function radio(): string | undefined
 
 /** @public */
@@ -1121,11 +1157,13 @@ export declare interface RadiusStyleProps {
   radius?: ResponsiveProp<Radius | 'full'>
 }
 
+/** @internal */
 export declare function rem(value: number): string
 
 /** @public */
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
+/** @public */
 export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */
@@ -1133,12 +1171,11 @@ export declare interface Rules {
   [className: string]: Properties
 }
 
+/** @public */
 export declare function scopeClassName(className: string | undefined): string | undefined
 
+/** @public */
 export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
   bg: VarName
   border: VarName
@@ -1151,6 +1188,7 @@ export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'av
   }
 }
 
+/** @public */
 export declare interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
   avatar: ColorAvatarVars & ColorAvatarColorVars
   bg: CSSVar
@@ -1164,6 +1202,7 @@ export declare interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
   }
 }
 
+/** @public */
 export declare function select(props: SelectStyleProps): string | undefined
 
 /** @internal */
@@ -1174,11 +1213,13 @@ export declare interface SelectableStyleProps extends RadiusStyleProps {
   tone?: ThemeColorStateToneKey
 }
 
+/** @public */
 export declare function selectPresentation(): string | undefined
 
 /** @public */
 export declare interface SelectStyleProps extends InputStyleProps {}
 
+/** @internal */
 export declare function shadow(props: ShadowStyleProps): string | undefined
 
 /** @public */
@@ -1192,8 +1233,10 @@ export declare function skeleton(props: SkeletonStyleProps): string | undefined
 /** @beta */
 export declare interface SkeletonStyleProps extends RadiusStyleProps {}
 
+/** @public */
 export declare function spinner(): string | undefined
 
+/** @public */
 export declare function srOnly(): string | undefined
 
 /** @public */
@@ -1218,10 +1261,13 @@ export declare type StyleRules = Partial<Record<StyleSelector, Properties>>
 /** @public */
 export declare type StyleSelector = `.${string}` | `#${string}` | `:root`
 
+/** @public */
 export declare function _switch(): string | undefined
 
+/** @public */
 export declare function _switchElement(): string | undefined
 
+/** @public */
 export declare function _switchPresentation(): string | undefined
 
 /** @public */
@@ -1231,30 +1277,34 @@ export declare type SwitchScopedVarName =
   | '--switch-thumb-offset'
   | '--switch-thumb-size'
 
+/** @public */
 export declare function _switchThumb(): string | undefined
 
+/** @public */
 export declare function _switchTrack(): string | undefined
 
 /** @public */
 export declare function text(props: TextStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
+/** @public */
 export declare function textArea(props: TextAreaStyleProps): string | undefined
 
 /** @public */
 export declare interface TextAreaStyleProps extends InputStyleProps {}
 
+/** @public */
 export declare function textInput(props: TextInputStyleProps): string | undefined
 
 /** @public */
 export declare interface TextInputStyleProps extends InputStyleProps {}
 
+/** @internal */
 export declare function textOverflow(props: TextOverflowStyleProps): string | undefined
 
+/** @internal */
 export declare interface TextOverflowStyleProps {
   /**
    * Controls how overflowing text is treated.
@@ -1264,16 +1314,22 @@ export declare interface TextOverflowStyleProps {
   textOverflow?: 'ellipsis' | 'clip'
 }
 
+/** @public */
 export declare type TextSize = number
 
+/** @beta */
 export declare function textSkeleton(props: TextSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface TextSkeletonStyleProps {
   size?: ResponsiveProp<FontTextSize>
 }
 
 /** @public */
 export declare interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
+  /**
+   * @deprecated Will be removed in next major version
+   */
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>
@@ -1357,22 +1413,31 @@ export declare type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
+/** @public */
 export declare function toast(): string | undefined
 
+/** @public */
 export declare function toastLayer(): string | undefined
 
+/** @public */
 export declare function toastLoadingBar(): string | undefined
 
+/** @public */
 export declare function toastLoadingBarMask(): string | undefined
 
+/** @public */
 export declare function toastLoadingBarProgress(): string | undefined
 
+/** @internal */
 export declare function toBoxShadow(value: ThemeBoxShadow | undefined): string
 
+/** @public */
 export declare function tooltip(): string | undefined
 
+/** @public */
 export declare function tooltipCard(): string | undefined
 
+/** @beta */
 export declare function treeItem(): string | undefined
 
 /** @public */
@@ -1503,6 +1568,7 @@ export declare interface VarNames {
   cyan: Record<ColorTintKey, VarName>
 }
 
+/** @public */
 export declare const varNames: VarNames
 
 /** @public */
@@ -1573,12 +1639,16 @@ export declare interface Vars {
   cyan: Record<ColorTintKey, CSSVar>
 }
 
+/** @public */
 export declare const vars: Vars
 
+/** @public */
 export declare type Width = ContainerWidth | 'fill'
 
+/** @internal */
 export declare function width(props: WidthStyleProps): string
 
+/** @public */
 export declare interface WidthStyleProps {
   width?: ResponsiveProp<Width>
 }