@sanity/ui 3.0.0-static.2 → 3.0.0-static.4

package/dist/css.d.ts

@@ -8,7 +8,6 @@ import {FontLabelSize} from '@sanity/ui/theme'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
 import {Hue as Hue_2} from '@sanity/ui/theme'
-import {PaletteConfig as PaletteConfig_2} from '@sanity/ui/theme'
 import {Radius} from '@sanity/ui/theme'
 import {RootTheme} from '@sanity/ui/theme'
 import {Shadow} from '@sanity/ui/theme'
@@ -27,9 +26,9 @@ export declare function animatedSpinnerIcon(): string | undefined
 /** @internal */
 export declare function _arrow(): string | undefined
 
-export declare function _arrowShape(): string
+export declare function _arrowShape(): string | undefined
 
-export declare function _arrowStroke(): string
+export declare function _arrowStroke(): string | undefined
 
 export declare function avatar(props: AvatarStyleProps): string | undefined
 
@@ -99,6 +98,7 @@ export declare interface BoxStyleProps
     GapStyleProps,
     GridStyleProps,
     GridItemStyleProps,
+    HeightStyleProps,
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
@@ -108,7 +108,6 @@ export declare interface BoxStyleProps
     PositionStyleProps,
     RadiusStyleProps,
     WidthStyleProps {
-  height?: ResponsiveProp<BoxHeight>
   muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
@@ -120,6 +119,8 @@ export declare function button(props: ButtonStyleProps): string | undefined
 
 export declare function buttonLoadingBox(): string | undefined
 
+export declare type ButtonScopedVarName = '--button-box-shadow'
+
 export declare interface ButtonStyleProps
   extends DisplayStyleProps,
     FlexItemStyleProps,
@@ -317,8 +318,8 @@ export declare interface CodeStyleProps extends FontStyleProps {
 
 /** @public */
 export declare interface ColorAvatarColorVarNames {
-  bg: CSSVarName
-  fg: CSSVarName
+  bg: VarName
+  fg: VarName
 }
 
 /** @public */
@@ -450,65 +451,65 @@ export declare type ColorCardVarName =
 /** @public */
 export declare interface ColorCardVarNames {
   accent: {
-    fg: CSSVarName
+    fg: VarName
   }
   avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames>
-  backdrop: CSSVarName
-  focusRing: CSSVarName
+  backdrop: VarName
+  focusRing: VarName
   link: {
-    fg: CSSVarName
+    fg: VarName
   }
   muted: {
-    bg: CSSVarName
-    fg: CSSVarName
+    bg: VarName
+    fg: VarName
   }
   shadow: {
-    outline: CSSVarName
-    umbra: CSSVarName
-    penumbra: CSSVarName
-    ambient: CSSVarName
+    outline: VarName
+    umbra: VarName
+    penumbra: VarName
+    ambient: VarName
   }
   skeleton: {
-    from: CSSVarName
-    to: CSSVarName
+    from: VarName
+    to: VarName
   }
   token: {
-    atrule: CSSVarName
-    attrName: CSSVarName
-    attrValue: CSSVarName
-    attribute: CSSVarName
-    boolean: CSSVarName
-    builtin: CSSVarName
-    cdata: CSSVarName
-    char: CSSVarName
-    class: CSSVarName
-    className: CSSVarName
-    comment: CSSVarName
-    constant: CSSVarName
-    deleted: CSSVarName
-    doctype: CSSVarName
-    entity: CSSVarName
-    function: CSSVarName
-    hexcode: CSSVarName
-    id: CSSVarName
-    important: CSSVarName
-    inserted: CSSVarName
-    keyword: CSSVarName
-    number: CSSVarName
-    operator: CSSVarName
-    prolog: CSSVarName
-    property: CSSVarName
-    pseudoClass: CSSVarName
-    pseudoElement: CSSVarName
-    punctuation: CSSVarName
-    regex: CSSVarName
-    selector: CSSVarName
-    string: CSSVarName
-    symbol: CSSVarName
-    tag: CSSVarName
-    unit: CSSVarName
-    url: CSSVarName
-    variable: CSSVarName
+    atrule: VarName
+    attrName: VarName
+    attrValue: VarName
+    attribute: VarName
+    boolean: VarName
+    builtin: VarName
+    cdata: VarName
+    char: VarName
+    class: VarName
+    className: VarName
+    comment: VarName
+    constant: VarName
+    deleted: VarName
+    doctype: VarName
+    entity: VarName
+    function: VarName
+    hexcode: VarName
+    id: VarName
+    important: VarName
+    inserted: VarName
+    keyword: VarName
+    number: VarName
+    operator: VarName
+    prolog: VarName
+    property: VarName
+    pseudoClass: VarName
+    pseudoElement: VarName
+    punctuation: VarName
+    regex: VarName
+    selector: VarName
+    string: VarName
+    symbol: VarName
+    tag: VarName
+    unit: VarName
+    url: VarName
+    variable: VarName
   }
   solid: ColorVariantVarNames
   tinted: ColorVariantVarNames
@@ -584,25 +585,25 @@ export declare interface ColorCardVars {
 /** @public */
 export declare interface ColorElementVarNames {
   bg: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
   border: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
   fg: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
 }
 
@@ -678,7 +679,7 @@ export declare interface ColorVariantVars
 
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
-export declare function compilePalette(config: PaletteConfig_2): string
+export declare function compilePalette(): string
 
 /** @public */
 export declare function compileSystem(): string
@@ -703,23 +704,10 @@ export declare interface ContainerStyleProps {
 declare type CSSObject = StyledObject<any>
 
 /** @public */
-export declare type CSSVar = `var(${CSSVarName})`
+export declare type CSSVar = `var(${VarName})`
 
 /** @public */
-export declare type CSSVarName =
-  | AvatarScopedVarName
-  | LegacyCardScopedVarName
-  | PaletteVarName
-  | ThemeVarName
-  | ColorCardVarName
-  | ColorCardToneScopedVarName
-  | CardScopedVarName
-  | ElementColorVariantScopedVarName
-  | InputScopedVarName
-  | SwitchScopedVarName
-
-/** @public */
-export declare interface CustomCSSProperties extends Record<CSSVarName, string> {}
+export declare interface CustomCSSProperties extends Record<VarName, string> {}
 
 export declare function dialog(): string | undefined
 
@@ -838,7 +826,23 @@ export declare interface FlexStyleProps {
 /**
  * @public
  */
-export declare type FlexValue = number | 'none' | 'auto' | 'initial'
+export declare type FlexValue =
+  | 'none'
+  | 'auto'
+  | 'initial'
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
 
 /**
  * @public
@@ -850,12 +854,12 @@ export declare function font(props: FontStyleProps): string | undefined
 
 /** @public */
 export declare interface FontSizeVarNames {
-  ascenderHeight: CSSVarName
-  descenderHeight: CSSVarName
-  fontSize: CSSVarName
-  lineHeight: CSSVarName
-  letterSpacing: CSSVarName
-  iconSize: CSSVarName
+  ascenderHeight: VarName
+  descenderHeight: VarName
+  fontSize: VarName
+  lineHeight: VarName
+  letterSpacing: VarName
+  iconSize: VarName
 }
 
 /** @public */
@@ -875,7 +879,7 @@ export declare interface FontStyleProps {
 }
 
 export declare interface FontVarNames<Size extends number> {
-  family: CSSVarName
+  family: VarName
   sizes: Record<Size, FontSizeVarNames>
 }
 
@@ -895,6 +899,8 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
+export declare function getClassNames(...classNames: Array<string | false | undefined>): string[]
+
 export declare function grid(props: GridStyleProps): string | undefined
 
 /**
@@ -982,6 +988,13 @@ export declare interface HeadingStyleProps extends FontStyleProps, FlexItemStyle
   size?: ResponsiveProp<HeadingSize>
 }
 
+/** @public */
+export declare function height(props: HeightStyleProps): string | undefined
+
+export declare interface HeightStyleProps {
+  height?: ResponsiveProp<BoxHeight>
+}
+
 declare type Hue = (typeof HUES)[number]
 
 declare const HUES: readonly [
@@ -999,9 +1012,9 @@ declare const HUES: readonly [
 /** @internal */
 export declare function _input(props: InputStyleProps): string | undefined
 
-export declare function _inputElement(): string
+export declare function _inputElement(): string | undefined
 
-export declare function _inputPresentation(): string
+export declare function _inputPresentation(): string | undefined
 
 /** @public */
 export declare type InputScopedVarName =
@@ -1116,7 +1129,7 @@ export declare interface MarginStyleProps {
 export declare function maxWidth(props: MaxWidthStyleProps): string
 
 export declare interface MaxWidthStyleProps {
-  maxWidth?: ResponsiveProp<ContainerWidth>
+  maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
 }
 
 export declare function menu(): string | undefined
@@ -1145,24 +1158,6 @@ export declare interface PaddingStyleProps {
   paddingY?: ResponsiveProp<Space>
 }
 
-declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
 /** @public */
 export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
 
@@ -1189,10 +1184,19 @@ export declare interface PositionStyleProps {
 }
 
 /** @public */
-export declare interface Properties extends CSS_2.PropertiesFallback, Partial<CustomCSSProperties> {
-  '@keyframes'?: Record<string, Record<string, Properties>>
-  '@media'?: Record<string, Properties>
-  '@nest'?: Record<string, Properties>
+export declare type Properties = PropertiesWithVarsAndNested & {
+  '@media'?: Record<string, PropertiesWithVarsAndNested>
+}
+
+/** @public */
+export declare type PropertiesWithVars = CSS_2.Properties &
+  Partial<Record<VarName, string>> & {
+    _prefix?: boolean
+  }
+
+/** @public */
+export declare type PropertiesWithVarsAndNested = PropertiesWithVars & {
+  '@nest'?: Record<string, PropertiesWithVars>
 }
 
 export declare function px(value: number): string
@@ -1204,7 +1208,7 @@ export declare function radius(props: RadiusStyleProps): string | undefined
 
 /** @public */
 export declare interface RadiusStyleProps {
-  radius?: ResponsiveProp<Radius>
+  radius?: ResponsiveProp<Radius | 'full'>
 }
 
 export declare function rem(value: number): string
@@ -1254,19 +1258,21 @@ export declare interface Rules {
   [className: string]: Properties
 }
 
+export declare function scopeClassName(className: string | undefined): string | undefined
+
 export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
   accent: {
-    fg: CSSVarName
+    fg: VarName
   }
   avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
-  bg: CSSVarName
-  border: CSSVarName
-  fg: CSSVarName
+  bg: VarName
+  border: VarName
+  fg: VarName
   input: {
-    bg: CSSVarName
-    border: CSSVarName
-    fg: CSSVarName
-    placeholder: CSSVarName
+    bg: VarName
+    border: VarName
+    fg: VarName
+    placeholder: VarName
   }
 }
 
@@ -1315,6 +1321,25 @@ export declare function spinner(): string | undefined
 
 export declare function srOnly(): string | undefined
 
+/** @public */
+export declare type Style = {
+  keyframes?: StyleKeyframes
+  layers?: StyleLayers
+  rules?: StyleRules
+}
+
+/** @public */
+export declare type StyleKeyframes = Record<string, Record<string, Properties>>
+
+/** @public */
+export declare type StyleLayers = Record<string, StyleRules>
+
+/** @public */
+export declare type StyleRules = Partial<Record<StyleSelector, Properties>>
+
+/** @public */
+export declare type StyleSelector = `.${string}` | `#${string}` | `:root`
+
 export declare function _switch(): string | undefined
 
 export declare function _switchElement(): string | undefined
@@ -1427,7 +1452,6 @@ declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'se
  */
 declare interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -1993,27 +2017,7 @@ export declare type ThemeVarName =
 
 declare type Tint = (typeof TINTS)[number]
 
-declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
+declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
 export declare function toast(): string | undefined
 
@@ -2040,23 +2044,38 @@ export declare function treeItem(): string | undefined
 
 export declare function v3_v2(theme_v3: Theme_v3): RootTheme_v2
 
+/** @public */
+export declare type VarName =
+  | AvatarScopedVarName
+  | LegacyCardScopedVarName
+  | PaletteVarName
+  | ThemeVarName
+  | ColorCardVarName
+  | ButtonScopedVarName
+  | ColorCardToneScopedVarName
+  | CardScopedVarName
+  | ElementColorVariantScopedVarName
+  | InputScopedVarName
+  | SwitchScopedVarName
+
 /** @public */
 export declare interface VarNames {
   color: Record<ThemeColorSchemeKey_2, ColorSchemeVarNames> &
     ScopedColorVarNames &
     Record<ThemeColorCardToneKey_2, ColorCardVarNames>
+  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
   avatar: {
-    distance: CSSVarName
+    distance: VarName
     focusRing: {
-      offset: CSSVarName
-      width: CSSVarName
+      offset: VarName
+      width: VarName
     }
-    size: CSSVarName
+    size: VarName
     sizes: Record<
       AvatarSize,
       {
-        distance: CSSVarName
-        size: CSSVarName
+        distance: VarName
+        size: VarName
       }
     >
   }
@@ -2067,15 +2086,16 @@ export declare interface VarNames {
     text: FontVarNames<FontTextSize>
   }
   input: {
-    fontSize: CSSVarName
-    lineHeight: CSSVarName
-    letterSpacing: CSSVarName
-    ascenderHeight: CSSVarName
-    descenderHeight: CSSVarName
-    gap: CSSVarName
-    padding: CSSVarName
+    fontSize: VarName
+    lineHeight: VarName
+    letterSpacing: VarName
+    ascenderHeight: VarName
+    descenderHeight: VarName
+    gap: VarName
+    padding: VarName
   }
-  space: Record<Space, CSSVarName>
+  radius: Record<Radius, VarName>
+  space: Record<Space, VarName>
 }
 
 export declare const varNames: VarNames
@@ -2098,6 +2118,7 @@ export declare interface Vars {
     light: ColorSchemeVars
   } & ScopedColorVars &
     Record<ThemeColorCardToneKey_2, ColorCardVars>
+  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
@@ -2119,12 +2140,13 @@ export declare interface Vars {
       }
     }
   }
+  radius: Record<Radius, CSSVar>
   space: Record<Space, CSSVar>
 }
 
 export declare const vars: Vars
 
-export declare type Width = ContainerWidth
+export declare type Width = ContainerWidth | 'fill'
 
 export declare function width(props: WidthStyleProps): string