@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/index.d.ts

@@ -3,6 +3,7 @@
 import {AnimationEventHandler} from 'react'
 import {AriaRole} from 'react'
 import {ClipboardEventHandler} from 'react'
+import {ColorTint} from '@sanity/color'
 import {Component} from 'react'
 import {CompositionEventHandler} from 'react'
 import {CSSProperties} from 'react'
@@ -43,12 +44,16 @@ export declare type ArrayPropPrimitive = string | number | boolean | undefined |
 export declare function attemptFocus(element: HTMLElement): boolean
 
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
 export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
   props: AutocompleteProps<Option> &
     Omit<
       HTMLProps<HTMLInputElement>,
+      | 'type'
       | 'value'
       | 'ref'
       | 'id'
@@ -66,7 +71,6 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
       | 'onSelect'
       | 'as'
       | 'autoComplete'
-      | 'type'
     > & {
       ref?: Ref<HTMLInputElement> | undefined
     },
@@ -127,6 +131,7 @@ export declare interface AutocompleteProps<
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** The options to render. */
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
@@ -135,6 +140,7 @@ export declare interface AutocompleteProps<
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
   renderOption?: (option: Option) => ReactElement
   /** @beta */
   renderPopover?: (
@@ -149,6 +155,7 @@ export declare interface AutocompleteProps<
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
+  /** The current value. */
   value?: string
 }
 
@@ -218,6 +225,8 @@ export declare interface AutocompleteValueChangeMsg {
 }
 
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export declare const Avatar: ForwardRefExoticComponent<
@@ -250,6 +259,8 @@ export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
  * @public
  */
 export declare interface AvatarProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
@@ -302,6 +313,8 @@ export declare interface AvatarStackProps {
 export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export declare const Badge: ForwardRefExoticComponent<
@@ -335,6 +348,25 @@ export declare interface BaseAutocompleteOption {
   value: string
 }
 
+export declare interface BaseColorTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueValue
+  bg?: ColorTokenValue
+  fg?: ColorTokenValue
+  border?: ColorTokenValue
+  focusRing?: ColorTokenValue
+  shadow?: {
+    outline?: ColorTokenValue
+    umbra?: ColorTokenValue
+    penumbra?: ColorTokenValue
+    ambient?: ColorTokenValue
+  }
+  skeleton?: {
+    from?: ColorTokenValue
+    to?: ColorTokenValue
+  }
+}
+
 /**
  * @public
  */
@@ -392,6 +424,9 @@ export declare interface BoundaryElementProviderProps {
 }
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
@@ -443,7 +478,7 @@ export declare type BoxSizing = 'content' | 'border'
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
   BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'ref' | 'as' | 'type'> &
+    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
     RefAttributes<HTMLOListElement>
 >
 
@@ -456,19 +491,29 @@ export declare interface BreadcrumbsProps {
   space?: number | number[]
 }
 
+/** @internal */
+export declare function buildTheme(config?: ThemeConfig): TMP_Theme
+
 /**
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as'>, 'ref'> &
+  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLButtonElement>
 >
 
+export declare interface ButtonColorTokens
+  extends Partial<Record<ColorButtonMode, ButtonModeColorTokens>> {
+  _hue?: ColorHueValue
+}
+
 /**
  * @public
  */
 export declare type ButtonMode = 'default' | 'ghost' | 'bleed'
 
+export declare type ButtonModeColorTokens = Partial<Record<'*' | ColorState, StateColorTokens>>
+
 /**
  * @public
  */
@@ -490,6 +535,7 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 /**
@@ -505,6 +551,14 @@ export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution'
 /**
  * @public
  */
+export declare type ButtonWidth = 'fill'
+
+/**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
+ * @public
+ */
 export declare const Card: ForwardRefExoticComponent<
   Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
@@ -548,10 +602,12 @@ export declare interface CardStyleProps {
 export declare type CardTone = ThemeColorToneKey | 'inherit'
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -580,6 +636,7 @@ export declare const Code: ForwardRefExoticComponent<
  */
 export declare interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
@@ -605,7 +662,168 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
   size?: number | number[]
 }
 
+export declare const COLOR_BASE_TONES: readonly [
+  'transparent',
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export declare const COLOR_BLEND_MODES: readonly ['multiply', 'screen']
+
+export declare const COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
+
+export declare const COLOR_CONFIG_BASE_KEYS: readonly [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
+  'skeleton/from',
+  'skeleton/to',
+]
+
+export declare const COLOR_CONFIG_BASE_TONES: readonly [
+  '*',
+  'transparent',
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
+
+export declare const COLOR_CONFIG_STATE_KEYS: readonly [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+]
+
+export declare const COLOR_CONFIG_STATE_TONES: readonly [
+  '*',
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export declare const COLOR_HUES: readonly [
+  'gray',
+  'cyan',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+]
+
+export declare const COLOR_STATE_TONES: readonly [
+  'default',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export declare const COLOR_STATES: readonly [
+  'enabled',
+  'hovered',
+  'pressed',
+  'selected',
+  'disabled',
+]
+
+export declare const COLOR_TINTS: readonly [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+]
+
+export declare type ColorBaseTone = (typeof COLOR_BASE_TONES)[number]
+
+export declare type ColorBlendModeTokenValue = [ColorBlendModeValue, ColorBlendModeValue]
+
+export declare type ColorBlendModeValue = (typeof COLOR_BLEND_MODES)[number]
+
+export declare type ColorButtonMode = (typeof COLOR_BUTTON_MODES)[number]
+
+export declare type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
+
+export declare type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
+
+export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
+
+export declare type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
+
+export declare type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+export declare type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
+
+export declare type ColorConfigValue =
+  | `black`
+  | `white`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${ColorHueValue}`
+  | `${ColorHueValue}/${ColorTintValue}`
+  | `${ColorHueValue}/${ColorTintValue}/${ColorConfigOpacityValue}`
+  | `${ColorTintValue}`
+  | `${ColorTintValue}/${ColorConfigOpacityValue}`
+  | ColorBlendModeValue
+
+export declare type ColorHueValue = (typeof COLOR_HUES)[number]
+
+export declare type ColorState = (typeof COLOR_STATES)[number]
+
+export declare type ColorStateTone = (typeof COLOR_STATE_TONES)[number]
+
+export declare interface ColorThemeConfig {
+  palette?: TMP_ColorPalette
+  tokens?: ColorTokens
+}
+
+export declare type ColorTintValue = (typeof COLOR_TINTS)[number]
+
+export declare interface ColorTokens extends Partial<Record<ColorConfigBaseTone, BaseColorTokens>> {
+  button?: Partial<Record<ColorConfigStateTone, ButtonColorTokens>>
+}
+
+export declare type ColorTokenValue = [ColorConfigValue, ColorConfigValue]
+
 /**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
@@ -644,6 +862,8 @@ export declare type Delay =
     }>
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
@@ -802,6 +1022,8 @@ export declare function _fillCSSObject(
 ): CSSObject
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
@@ -890,6 +1112,8 @@ export declare function _getResponsiveSpace(
 ): CSSObject[] | null
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
@@ -953,6 +1177,8 @@ export declare interface GridProps extends Omit<BoxProps, 'display'>, Responsive
 export declare function _hasFocus(element: HTMLElement): boolean
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
@@ -1004,6 +1230,8 @@ export declare interface HeadingSkeletonProps extends SkeletonProps {
 export declare function hexToRgb(hex: string): RGB
 
 /**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
@@ -1036,6 +1264,8 @@ export declare interface HSL {
 export declare function hslToRgb(hsl: HSL): RGB
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export declare const Inline: ForwardRefExoticComponent<
@@ -1046,9 +1276,34 @@ export declare const Inline: ForwardRefExoticComponent<
  * @public
  */
 export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
+export declare function isColorBlendModeValue(str: string): str is ColorBlendModeValue
+
+export declare function isColorButtonMode(str: string): str is ColorButtonMode
+
+export declare function isColorConfigBaseKey(str: string): str is ColorConfigBaseKey
+
+export declare function isColorConfigBaseTone(str: string): str is ColorConfigBaseTone
+
+export declare function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey
+
+export declare function isColorConfigStateKey(str: string): str is ColorConfigStateKey
+
+export declare function isColorConfigStateTone(str: string): str is ColorConfigStateTone
+
+export declare function isColorHueValue(str: string): str is ColorHueValue
+
+export declare function isColorOpacityValue(str: string): str is ColorConfigOpacityValue
+
+export declare function isColorTintValue(str: string): str is ColorTintValue
+
+export declare function isColorTokenValue(str: string): str is ColorConfigValue
+
+export declare function isColorValue(str: string): str is 'black' | 'white'
+
 /**
  * @internal
  */
@@ -1095,6 +1350,8 @@ export declare function isHTMLTextAreaElement(element: unknown): element is HTML
 export declare function _isScrollable(el: Node): boolean
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
@@ -1112,6 +1369,8 @@ export declare interface KBDProps {
 }
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
@@ -1215,6 +1474,8 @@ export declare interface _MediaStore {
 }
 
 /**
+ * The `Menu` component is a building block for application menus.
+ *
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
@@ -1223,6 +1484,8 @@ export declare const Menu: ForwardRefExoticComponent<
 >
 
 /**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
  * @public
  */
 export declare const MenuButton: ForwardRefExoticComponent<
@@ -1664,12 +1927,16 @@ export declare interface MenuProps extends ResponsivePaddingProps {
  * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
  * @internal
  */
-export declare function multiply(b: RGB, s: RGB): RGB
+export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
 
 /**
  * @internal
  */
-export declare function parseColor(color: unknown): RGB
+export declare function parseColor(color: unknown): RGB | RGBA
+
+export declare function parseTokenKey(str: string): TokenKeyNode | undefined
+
+export declare function parseTokenValue(str: string): TokenValueNode | undefined
 
 /**
  * @public
@@ -1695,7 +1962,11 @@ export declare type Placement =
   | 'left-start'
   | 'left-end'
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
@@ -1732,6 +2003,7 @@ export declare interface PopoverProps
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
@@ -1799,10 +2071,12 @@ export declare interface PortalProviderProps {
 }
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -1887,6 +2161,7 @@ export declare function responsiveCodeFontStyle(
  * @public
  */
 export declare interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
   flex?: FlexValue | FlexValue[]
 }
 
@@ -1964,8 +2239,11 @@ export declare function responsiveLabelFont(
  * @public
  */
 export declare interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
   margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
   marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
   marginY?: number | number[]
   marginTop?: number | number[]
   marginRight?: number | number[]
@@ -2044,6 +2322,17 @@ export declare interface RGB {
   r: number
   g: number
   b: number
+  a?: undefined
+}
+
+/**
+ * @internal
+ */
+export declare interface RGBA {
+  r: number
+  g: number
+  b: number
+  a: number
 }
 
 /**
@@ -2051,6 +2340,11 @@ export declare interface RGB {
  */
 export declare function rgba(color: unknown, a: number): string
 
+/**
+ * @internal
+ */
+export declare function rgbaToRGBA(rgba: string): RGBA
+
 /**
  * @internal
  */
@@ -2072,10 +2366,12 @@ export declare type RootTheme = BaseTheme<Styles>
  * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
  * @internal
  */
-declare function screen_2(b: RGB, s: RGB): RGB
+declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export declare const Select: ForwardRefExoticComponent<
@@ -2117,6 +2413,8 @@ export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxPr
 }
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
@@ -2149,6 +2447,8 @@ export declare interface SrOnlyProps {
 }
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
@@ -2163,6 +2463,32 @@ export declare interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
+export declare interface StateColorTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueValue
+  bg?: ColorTokenValue
+  bg2?: ColorTokenValue
+  fg?: ColorTokenValue
+  border?: ColorTokenValue
+  muted?: {
+    fg?: ColorTokenValue
+  }
+  accent?: {
+    fg?: ColorTokenValue
+  }
+  link?: {
+    fg?: ColorTokenValue
+  }
+  code?: {
+    bg?: ColorTokenValue
+    fg?: ColorTokenValue
+  }
+  skeleton?: {
+    from?: ColorTokenValue
+    to?: ColorTokenValue
+  }
+}
+
 /**
  * @public
  */
@@ -2182,10 +2508,14 @@ export declare interface Styles {
 }
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2201,7 +2531,11 @@ export declare interface SwitchProps {
  */
 export declare const Tab: ForwardRefExoticComponent<
   Omit<
-    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'id' | 'aria-controls' | 'as' | 'type'>,
+    TabProps &
+      Omit<
+        HTMLProps<HTMLButtonElement>,
+        'type' | 'label' | 'width' | 'id' | 'aria-controls' | 'as'
+      >,
     'ref'
   > &
     RefAttributes<HTMLButtonElement>
@@ -2263,6 +2597,8 @@ export declare interface TabProps {
 }
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
@@ -2277,6 +2613,9 @@ export {Text_2 as Text}
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
 /**
+ * A multiline text input.
+ *
+
  * @public
  */
 export declare const TextArea: ForwardRefExoticComponent<
@@ -2296,10 +2635,12 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
 }
 
 /**
+ * Single line text input.
+ *
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'as' | 'type'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2313,6 +2654,10 @@ export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
  * @public
  */
 export declare interface TextInputProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
   border?: boolean
   /**
    * @beta
@@ -2359,6 +2704,7 @@ export declare interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -2404,7 +2750,9 @@ export declare interface Theme {
  */
 export declare interface ThemeAvatar {
   sizes: {
+    /** Distance between avatars in an <AvatarStack> component (px) */
     distance: number
+    /** Diameter (px) */
     size: number
   }[]
   focusRing: FocusRing
@@ -2826,6 +3174,10 @@ export declare type ThemeColorToneKey =
   | 'caution'
   | 'critical'
 
+export declare interface ThemeConfig {
+  color?: ColorThemeConfig
+}
+
 /**
  * @public
  */
@@ -2968,7 +3320,78 @@ export declare interface ThemeShadow {
   ambient: BoxShadow
 }
 
+export declare interface TMP_BaseColorTheme {
+  _blend: ColorBlendModeValue
+  dark: boolean
+  base: {
+    bg: string
+    fg: string
+    border: string
+    focusRing: string
+    shadow: {
+      outline: string
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+    skeleton: {
+      from: string
+      to: string
+    }
+  }
+  button: TMP_ButtonColorTheme
+}
+
+export declare type TMP_ButtonColorTheme = Record<ColorStateTone, TMP_ButtonModesColorTheme>
+
+export declare type TMP_ButtonModesColorTheme = Record<ColorButtonMode, TMP_ButtonStatesColorTheme>
+
+export declare type TMP_ButtonStatesColorTheme = Record<ColorState, TMP_StateColorTheme>
+
+export declare type TMP_ColorPalette = {
+  black: string | ColorTint
+  white: string | ColorTint
+} & Record<ColorHueValue, Record<ColorTintValue, string | ColorTint>>
+
+export declare type TMP_ColorTheme = Record<ColorBaseTone, TMP_BaseColorTheme>
+
+export declare interface TMP_StateColorTheme {
+  _blend: ColorBlendModeValue
+  bg: string
+  bg2?: string
+  fg: string
+  border: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}
+
+export declare interface TMP_Theme {
+  color: {
+    light: TMP_ColorTheme
+    dark: TMP_ColorTheme
+  }
+}
+
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
 export declare function Toast(
@@ -3023,7 +3446,47 @@ export declare interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
+export declare interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigBaseTone
+  key: ColorConfigBaseKey | ColorConfigBlendKey
+}
+
+export declare interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ColorBlendModeValue
+}
+
+export declare interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ColorButtonMode
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+export declare interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white' | `${ColorHueValue}/${ColorTintValue}` | ColorTintValue
+  hue?: ColorHueValue
+  tint?: ColorTintValue
+  opacity?: number
+}
+
+export declare interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueValue
+}
+
+export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+export declare type TokenValueNode =
+  | TokenColorValueNode
+  | TokenHueValueNode
+  | TokenBlendModeValueNode
+
 /**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
@@ -3085,6 +3548,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   fallbackPlacements?: Placement[]
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]