import * as CSS from 'csstype'; import { AnalyzeBreakpointsReturn } from '@chakra-ui/breakpoint-utils'; import { BaseThemeTypings } from './shared.types.mjs'; import { ThemeTypings as ThemeTypings$1 } from './theming.types.mjs'; type Operand = string | number | { reference: string; }; interface CalcChain { add: (...operands: Array) => CalcChain; subtract: (...operands: Array) => CalcChain; multiply: (...operands: Array) => CalcChain; divide: (...operands: Array) => CalcChain; negate: () => CalcChain; toString: () => string; } declare const calc: ((x: Operand) => CalcChain) & { add: (...operands: Array) => string; subtract: (...operands: Array) => string; multiply: (...operands: Array) => string; divide: (...operands: Array) => string; negate: (x: Operand) => string; }; declare function addPrefix(value: string, prefix?: string): string; declare function toVarReference(name: string, fallback?: string): string; declare function toVarDefinition(value: string, prefix?: string): string; declare function cssVar(name: string, fallback?: string, cssVarPrefix?: string): { variable: string; reference: string; }; type VarDefinition = ReturnType; declare function defineCssVars(scope: string, keys: Array): Record; /** * This is a placeholder meant to be implemented via TypeScript's Module * Augmentation feature and is an alternative to running `npx @chakra-ui/cli * tokens` * * @example * ```ts * import { BaseThemeTypings } from "@chakra-ui/styled-system"; * * type DefaultSizes = 'small' | 'medium' | 'large'; * * declare module "@chakra-ui/styled-system" { * export interface CustomThemeTypings extends BaseThemeTypings { * // Example custom `borders` tokens * borders: 'none' | 'thin' | 'thick'; * // ... * // Other custom tokens * // ... * components: { * Button: { * // Example custom component sizes and variants * sizes: DefaultSizes; * variants: 'solid' | 'outline' | 'wacky' | 'chill'; * }, * // ... * } * } * } * ``` * * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation */ interface CustomThemeTypings { } type ThemeTypings = CustomThemeTypings extends BaseThemeTypings ? CustomThemeTypings : ThemeTypings$1; type ResponsiveArray = Array; type ResponsiveObject = Partial>; type ResponsiveValue = T | ResponsiveArray | ResponsiveObject; type Length = string | 0 | number; type Union = T | (string & {}); type Token = ThemeKey extends keyof ThemeTypings ? ResponsiveValue : ResponsiveValue; type CSSMap = Record; type Transform = (value: any, theme: CssTheme, styles?: Record) => any; type WithCSSVar = T & { __cssVars: Record; __cssMap: CSSMap; __breakpoints: AnalyzeBreakpointsReturn; }; type CssTheme = WithCSSVar<{ breakpoints: Record; direction?: "ltr" | "rtl"; [key: string]: any; }>; declare function toCSSVar>(rawTheme: T): WithCSSVar; type SemanticValue = Union | Partial>>; type PlainToken = { isSemantic: false; value: string | number; }; type SemanticToken = { isSemantic: true; value: string | number | SemanticValue; }; type FlatToken = PlainToken | SemanticToken; type FlatTokens = Record; type FlattenTokensParam = { tokens?: object; semanticTokens?: object; }; declare function flattenTokens({ tokens, semanticTokens, }: T): FlatTokens; declare const tokens: readonly ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "gradients", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur", "breakpoints"]; type ThemeScale = (typeof tokens)[number] | "transition.duration" | "transition.property" | "transition.easing"; type CSSProp = keyof CSS.Properties | (string & {}); type MaybeArray = T | T[]; type MaybeThemeFunction = T | ((theme: CssTheme) => T); type StringUnion = T | (string & {}); interface PropConfig { /** * This is useful for props that need to leverage CSS variables * Static styles to append to the computed styles. * * It does not get replicated if value is responsive or styles are nested. */ static?: Record; /** * The theme scale this maps to */ scale?: ThemeScale; /** * Css property or Css variable the prop maps to */ property?: MaybeThemeFunction>>; /** * Function to transform the value passed */ transform?: Transform; /** * Useful for `layerStyle`, tex`tStyles and `apply` where their * transform function returns theme aware styles */ processResult?: boolean; } type Config$1 = Record; declare const background: Config$1; interface BackgroundProps { /** * The CSS `background` property */ bg?: Token; /** * The CSS `background-clip` property */ bgClip?: Token; /** * The CSS `background-clip` property */ backgroundClip?: Token; /** * The CSS `background` property */ background?: Token; /** * The CSS `background-color` property */ bgColor?: Token; /** * The CSS `background-color` property */ backgroundColor?: Token; /** * The CSS `background-image` property */ backgroundImage?: Token; /** * The background-gradient shorthand */ bgGradient?: Token; /** * The CSS `background-size` property */ backgroundSize?: Token; /** * The CSS `background-position` property */ bgPos?: Token; /** * The CSS `background-position` property */ backgroundPosition?: Token; /** * The CSS `background-image` property */ bgImage?: Token; /** * The CSS `background-image` property */ bgImg?: Token; /** * The CSS `background-repeat` property */ bgRepeat?: Token; /** * The CSS `background-repeat` property */ backgroundRepeat?: Token; /** * The CSS `background-size` property */ bgSize?: Token; /** * The CSS `background-attachment` property */ bgAttachment?: Token; /** * The CSS `background-attachment` property */ backgroundAttachment?: Token; /** * The CSS `background-position` property */ bgPosition?: Token; } declare const border: Config$1; /** * The prop types for border properties listed above */ interface BorderProps { /** * The CSS `border` property */ border?: Token; /** * The CSS `border-width` property */ borderWidth?: Token; /** * The CSS `border-style` property */ borderStyle?: Token; /** * The CSS `border-color` property */ borderColor?: Token; /** * The CSS `border-radius` property */ borderRadius?: Token; /** * The CSS `border-radius` property */ rounded?: Token; /** * The CSS `border-top` property */ borderTop?: Token; borderBlockStart?: Token; /** * The CSS `border-top-width` property */ borderTopWidth?: Token; borderBlockStartWidth?: Token; /** * The CSS `border-bottom-width` property */ borderBottomWidth?: Token; borderBlockEndWidth?: Token; /** * The CSS `border-left-width` property */ borderLeftWidth?: Token; borderStartWidth?: Token; borderInlineStartWidth?: Token; /** * The CSS `border-right-width` property */ borderRightWidth?: Token; borderEndWidth?: Token; borderInlineEndWidth?: Token; /** * The CSS `border-top-style` property */ borderTopStyle?: Token; borderBlockStartStyle?: Token; /** * The CSS `border-bottom-style` property */ borderBottomStyle?: Token; borderBlockEndStyle?: Token; /** * The CSS `border-left-style` property */ borderLeftStyle?: Token; borderStartStyle?: Token; borderInlineStartStyle?: Token; /** * The CSS `border-right-styles` property */ borderRightStyle?: Token; borderEndStyle?: Token; borderInlineEndStyle?: Token; /** * The CSS `border-top-color` property */ borderTopColor?: Token; borderBlockStartColor?: Token; /** * The CSS `border-bottom-color` property */ borderBottomColor?: Token; borderBlockEndColor?: Token; /** * The CSS `border-left-color` property */ borderLeftColor?: Token; borderStartColor?: Token; borderInlineStartColor?: Token; /** * The CSS `border-right-color` property */ borderRightColor?: Token; borderEndColor?: Token; borderInlineEndColor?: Token; /** * The CSS `border-right` property */ borderRight?: Token; borderEnd?: Token; borderInlineEnd?: Token; /** * The CSS `border-bottom` property */ borderBottom?: Token; borderBlockEnd?: Token; /** * The CSS `border-left` property */ borderLeft?: Token; borderStart?: Token; borderInlineStart?: Token; /** * The CSS `border-top-radius` property */ borderTopRadius?: Token; /** * The CSS `border-top-radius` property */ roundedTop?: Token; /** * The CSS `border-right-radius` property */ borderRightRadius?: Token; /** * The CSS `border-right-radius` property */ roundedRight?: Token; /** * When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`. * When direction is `rtl`, `roundedEnd` is equivalent to `borderLeftRadius`. */ roundedEnd?: Token; /** * When direction is `ltr`, `borderInlineEndRadius` is equivalent to `borderRightRadius`. * When direction is `rtl`, `borderInlineEndRadius` is equivalent to `borderLeftRadius`. */ borderInlineEndRadius?: Token; /** * When direction is `ltr`, `borderEndRadius` is equivalent to `borderRightRadius`. * When direction is `rtl`, `borderEndRadius` is equivalent to `borderLeftRadius`. */ borderEndRadius?: Token; /** * The CSS `border-bottom-radius` property */ borderBottomRadius?: Token; /** * The CSS `border-bottom-radius` property */ roundedBottom?: Token; /** * The CSS `border-left-radius` property */ borderLeftRadius?: Token; /** * The CSS `border-left-radius` property */ roundedLeft?: Token; /** * When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`. * When direction is `rtl`, `roundedEnd` is equivalent to `borderLeftRadius`. */ roundedStart?: Token; /** * When direction is `ltr`, `borderInlineStartRadius` is equivalent to `borderLeftRadius`. * When direction is `rtl`, `borderInlineStartRadius` is equivalent to `borderRightRadius`. */ borderInlineStartRadius?: Token; /** * When direction is `ltr`, `borderStartRadius` is equivalent to `borderLeftRadius`. * When direction is `rtl`, `borderStartRadius` is equivalent to `borderRightRadius`. */ borderStartRadius?: Token; /** * The CSS `border-top-left-radius` property */ borderTopLeftRadius?: Token; borderTopStartRadius?: Token; borderStartStartRadius?: Token; /** * The CSS `border-top-left-radius` property */ roundedTopLeft?: Token; roundedTopStart?: Token; /** * The CSS `border-top-right-radius` property */ borderTopRightRadius?: Token; borderTopEndRadius?: Token; borderStartEndRadius?: Token; /** * The CSS `border-top-right-radius` property */ roundedTopRight?: Token; roundedTopEnd?: Token; /** * The CSS `border-bottom-left-radius` property */ borderBottomLeftRadius?: Token; borderBottomStartRadius?: Token; borderEndStartRadius?: Token; /** * The CSS `border-bottom-left-radius` property */ roundedBottomLeft?: Token; roundedBottomStart?: Token; /** * The CSS `border-bottom-right-radius` property */ borderBottomRightRadius?: Token; borderBottomEndRadius?: Token; borderEndEndRadius?: Token; /** * The CSS `border-bottom-right-radius` property */ roundedBottomRight?: Token; roundedBottomEnd?: Token; /** * The CSS `border-right` and `border-left` property */ borderX?: Token; borderInline?: Token; /** * The CSS `border-top` and `border-bottom` property */ borderY?: Token; borderBlock?: Token; } declare const color: Config$1; interface ColorProps { /** * The CSS `color` property */ textColor?: Token; /** * The CSS `color` property */ color?: Token; /** * The CSS `fill` property for icon svgs and paths */ fill?: Token; /** * The CSS `stroke` property for icon svgs and paths */ stroke?: Token; } declare const effect: Config$1; /** * Types for box and text shadow properties */ interface EffectProps { /** * The `box-shadow` property */ boxShadow?: Token; /** * The `box-shadow` property */ shadow?: Token; /** * The `mix-blend-mode` property */ mixBlendMode?: Token; /** * The `blend-mode` property */ blendMode?: Token; /** * The CSS `background-blend-mode` property */ backgroundBlendMode?: Token; /** * The CSS `background-blend-mode` property */ bgBlendMode?: Token; /** * The CSS `opacity` property */ opacity?: Token; } declare const filter: Config$1; interface FilterProps { /** * The CSS `filter` property. When set to `auto`, you allow * Chakra UI to define the color based on the filter style props * (`blur`, `saturate`, etc.) */ filter?: Token; /** * Sets the blur filter value of an element. * Value is assigned to `--chakra-filter` css variable */ blur?: Token<{}, "blur">; /** * Sets the brightness filter value of an element. * Value is assigned to `--chakra-brightness` css variable */ brightness?: Token; /** * Sets the contrast filter value of an element. * Value is assigned to `--chakra-contrast` css variable */ contrast?: Token; /** * Sets the hue-rotate filter value of an element. * Value is assigned to `--chakra-hue-rotate` css variable */ hueRotate?: Token; /** * Sets the invert filter value of an element. * Value is assigned to `--chakra-invert` css variable */ invert?: Token; /** * Sets the saturation filter value of an element. * Value is assigned to `--chakra-saturate` css variable */ saturate?: Token; /** * Sets the drop-shadow filter value of an element. * Value is assigned to `--chakra-drop-shadow` css variable */ dropShadow?: Token; /** * The CSS `backdrop-filter` property. When set to `auto`, you allow * Chakra UI to define the color based on the backdrop filter style props * (`backdropBlur`, `backdropSaturate`, etc.) */ backdropFilter?: Token; /** * Sets the backdrop-blur filter value of an element. * Value is assigned to `--chakra-backdrop-blur` css variable */ backdropBlur?: Token<{}, "blur">; /** * Sets the backdrop-brightness filter value of an element. * Value is assigned to `--chakra-backdrop-brightness` css variable */ backdropBrightness?: Token; /** * Sets the backdrop-contrast filter value of an element. * Value is assigned to `--chakra-backdrop-contrast` css variable */ backdropContrast?: Token; /** * Sets the backdrop-hue-rotate filter value of an element. * Value is assigned to `--chakra-backdrop-hue-rotate` css variable */ backdropHueRotate?: Token; /** * Sets the backdrop-invert filter value of an element. * Value is assigned to `--chakra-backdrop-invert` css variable */ backdropInvert?: Token; /** * Sets the backdrop-saturate filter value of an element. * Value is assigned to `--chakra-backdrop-saturate` css variable */ backdropSaturate?: Token; } declare const flexbox: Config$1; interface FlexboxProps { /** * The CSS `align-items` property. * * It defines the `align-self` value on all direct children as a group. * * - In Flexbox, it controls the alignment of items on the Cross Axis. * - In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-items) */ alignItems?: Token; /** * The CSS `align-content` property. * * It defines the distribution of space between and around * content items along a flexbox cross-axis or a grid's block axis. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-content) */ alignContent?: Token; /** * The CSS `justify-items` property. * * It defines the default `justify-self` for all items of the box, * giving them all a default way of justifying each box * along the appropriate axis. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/justify-items) */ justifyItems?: Token; /** * The CSS `justify-content` property. * * It defines how the browser distributes space between and around content items * along the main-axis of a flex container, and the inline axis of a grid container. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/justify-content) */ justifyContent?: Token; /** * The CSS `flex-wrap` property. * * It defines whether flex items are forced onto one line or * can wrap onto multiple lines. If wrapping is allowed, * it sets the direction that lines are stacked. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-wrap) */ flexWrap?: Token; /** * The CSS `flex-flow` property. * * It is a shorthand property for `flex-direction` and `flex-wrap`. * It specifies the direction of a flex container, as well as its wrapping behavior. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-flow) */ flexFlow?: Token; /** * The CSS `flex-basis` property. * * It defines the initial main size of a flex item. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-basis) */ flexBasis?: Token>; /** * The CSS `flex-direction` property. * * It defines how flex items are placed in the flex container * defining the main axis and the direction (normal or reversed). * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-direction) */ flexDirection?: Token; /** * The CSS `flex-direction` property. * * It defines how flex items are placed in the flex container * defining the main axis and the direction (normal or reversed). * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-direction) */ flexDir?: Token; /** * The CSS `flex` property. * * It defines how a flex item will grow or shrink * to fit the space available in its flex container. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex) */ flex?: Token>; /** * The CSS `gap` property. * * It defines the gap between items in both flex and * grid contexts. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/gap) */ gap?: Token, "space">; /** * The CSS `row-gap` property. * * It sets the size of the gap (gutter) between an element's grid rows. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/row-gap) */ rowGap?: Token, "space">; /** * The CSS `column-gap` property. * * It sets the size of the gap (gutter) between an element's columns. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/column-gap) */ columnGap?: Token, "space">; /** * The CSS `justify-self` property. * * It defines the way a box is justified inside its * alignment container along the appropriate axis. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-flow) */ justifySelf?: Token; /** * The CSS `align-self` property. * * It works like `align-items`, but applies only to a * single flexbox item, instead of all of them. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-self) */ alignSelf?: Token; /** * The CSS `order` property. * * It defines the order to lay out an item in a flex or grid container. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/order) */ order?: Token; /** * The CSS `flex-grow` property. * * It defines how much a flexbox item should grow * if there's space available. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-grow) */ flexGrow?: Token; /** * The CSS `flex-shrink` property. * * It defines how much a flexbox item should shrink * if there's not enough space available. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-shrink) */ flexShrink?: Token; /** * The CSS `place-items` property. * * It allows you to align items along both the block and * inline directions at once (i.e. the align-items and justify-items properties) * in a relevant layout system such as `Grid` or `Flex`. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-items) */ placeItems?: Token; /** * The CSS `place-content` property. * * It allows you to align content along both the block and * inline directions at once (i.e. the align-content and justify-content properties) * in a relevant layout system such as Grid or Flexbox. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-content) */ placeContent?: Token; /** * The CSS `place-self` property. * * It allows you to align an individual item in both the block and * inline directions at once (i.e. the align-self and justify-self properties) * in a relevant layout system such as Grid or Flexbox. * * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-self) */ placeSelf?: Token; } declare const grid: Config$1; interface GridProps { /** * The CSS `grid-gap` property. * * It defines the gaps (gutters) between rows and columns * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) */ gridGap?: Token; /** * The CSS `grid-column-gap` property. * * It defines the size of the gap (gutter) between an element's columns. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) */ gridColumnGap?: Token; /** * The CSS `grid-row-gap` property. * * It defines the size of the gap (gutter) between an element's grid rows. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) */ gridRowGap?: Token; /** * The CSS `grid-column` property. * * It specifies a grid item’s start position within the grid column by * contributing a line, a span, or nothing (automatic) to its grid placement * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) */ gridColumnStart?: Token; /** * The CSS `grid-row-start` property * * It specifies a grid item’s start position within the grid row by * contributing a line, a span, or nothing (automatic) to its grid placement, * thereby specifying the `inline-start` edge of its grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) */ gridRowStart?: Token; /** * The CSS `grid-row-end` property * * It specifies a grid item’s end position within the grid row by * contributing a line, a span, or nothing (automatic) to its grid placement, * thereby specifying the `inline-end` edge of its grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) */ gridRowEnd?: Token; /** * The CSS `grid-template` property. * * It is a shorthand property for defining grid columns, rows, and areas. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */ gridTemplate?: Token; /** * The CSS `grid-column` property * * It specifies a grid item’s end position within the grid column by * contributing a line, a span, or nothing (automatic) to its grid placement, * thereby specifying the block-end edge of its grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) */ gridColumnEnd?: Token; /** * The CSS `grid-column` property. * * It specifies a grid item's size and location within a grid column * by contributing a line, a span, or nothing (automatic) to its grid placement, * thereby specifying the `inline-start` and `inline-end` edge of its grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) */ gridColumn?: Token; /** * The CSS `grid-row` property * * It specifies a grid item’s size and location within the grid row * by contributing a line, a span, or nothing (automatic) to its grid placement, * thereby specifying the `inline-start` and `inline-end` edge of its grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) */ gridRow?: Token; /** * The CSS `grid-auto-flow` property * * It controls how the auto-placement algorithm works, * specifying exactly how auto-placed items get flowed into the grid. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */ gridAutoFlow?: Token; /** * The CSS `grid-auto-columns` property. * * It specifies the size of an implicitly-created grid column track or pattern of tracks. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */ gridAutoColumns?: Token; /** * The CSS `grid-auto-rows` property. * * It specifies the size of an implicitly-created grid row track or pattern of tracks. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */ gridAutoRows?: Token; /** * The CSS `grid-template-columns` property * * It defines the line names and track sizing functions of the grid columns. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */ gridTemplateColumns?: Token; /** * The CSS `grid-template-rows` property. * * It defines the line names and track sizing functions of the grid rows. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */ gridTemplateRows?: Token; /** * The CSS `grid-template-areas` property. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */ gridTemplateAreas?: Token; /** * The CSS `grid-areas` property. * * It specifies a grid item’s size and location within a grid by * contributing a line, a span, or nothing (automatic) * to its grid placement, thereby specifying the edges of its grid area. * * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */ gridArea?: Token; } declare const interactivity: Config$1; interface InteractivityProps { /** * The CSS `appearance` property */ appearance?: Token; /** * The CSS `user-select` property */ userSelect?: Token; /** * The CSS `pointer-events` property */ pointerEvents?: Token; /** * The CSS `resize` property */ resize?: Token; /** * The CSS `cursor` property */ cursor?: Token; /** * The CSS `outline` property */ outline?: Token>; /** * The CSS `outline-offset` property */ outlineOffset?: Token>; /** * The CSS `outline-color` property */ outlineColor?: Token; } declare const layout: Config$1; /** * Types for layout related CSS properties */ interface LayoutProps { /** * The CSS `display` property */ display?: Token; /** * Hides an element from the specified breakpoint and up */ hideFrom?: Token; /** * Hides an element below the specified breakpoint */ hideBelow?: Token; /** * The CSS `width` property */ width?: Token; /** * The CSS `width` property */ w?: Token; inlineSize?: Token; /** * The CSS `width` and `height` property */ boxSize?: Token; /** * The CSS `max-width` property */ maxWidth?: Token; /** * The CSS `max-width` property */ maxW?: Token; maxInlineSize?: Token; /** * The CSS `min-width` property */ minWidth?: Token; /** * The CSS `min-width` property */ minW?: Token; minInlineSize?: Token; /** * The CSS `height` property */ height?: Token; /** * The CSS `height` property */ h?: Token; blockSize?: Token; /** * The CSS `max-height` property */ maxHeight?: Token; /** * The CSS `max-height` property */ maxH?: Token; maxBlockSize?: Token; /** * The CSS `min-height` property */ minHeight?: Token; /** * The CSS `min-height` property */ minH?: Token; minBlockSize?: Token; /** * The CSS `vertical-align` property */ verticalAlign?: Token>; /** * The CSS `overflow` property */ overflow?: Token; /** * The CSS `overflow-x` property */ overflowX?: Token; /** * The CSS `overflow-y` property */ overflowY?: Token; /** * The CSS `box-sizing` property */ boxSizing?: CSS.Property.BoxSizing; /** * The CSS `box-decoration` property */ boxDecorationBreak?: Token; /** * The CSS `float` property */ float?: Token; /** * The CSS `object-fit` property */ objectFit?: Token; /** * The CSS `object-position` property */ objectPosition?: Token>; /** * The CSS `overscroll-behavior` property */ overscrollBehavior?: Token; /** * The CSS `overscroll-behavior` property */ overscroll?: Token; /** * The CSS `overscroll-behavior-x` property */ overscrollBehaviorX?: Token; /** * The CSS `overscroll-behavior-x` property */ overscrollX?: Token; /** * The CSS `overscroll-behavior-y` property */ overscrollBehaviorY?: Token; /** * The CSS `overscroll-behavior-y` property */ overscrollY?: Token; /** * The CSS `visibility` property */ visibility?: Token; /** * The CSS `isolation` property */ isolation?: Token; /** * The CSS `aspect-ratio` property */ aspectRatio?: Token; } declare const list: Config$1; interface ListProps { listStyleType?: ResponsiveValue; /** * The CSS `list-style-position` property */ listStylePosition?: ResponsiveValue; /** * The CSS `list-style-position` property */ listStylePos?: ResponsiveValue; /** * The CSS `list-style-image` property */ listStyleImage?: ResponsiveValue; /** * The CSS `list-style-image` property */ listStyleImg?: ResponsiveValue; } declare const others: Config$1; interface OtherProps { /** * If `true`, hide an element visually without hiding it from screen readers. * * If `focusable`, the sr-only styles will be undone, making the element visible * to sighted users as well as screen readers. */ srOnly?: true | "focusable"; /** * The layer style object to apply. * Note: Styles must be located in `theme.layerStyles` */ layerStyle?: Token; /** * The text style object to apply. * Note: Styles must be located in `theme.textStyles` */ textStyle?: Token; /** * Apply theme-aware style objects in `theme` * * @example * ```jsx * This is a div * ``` * * This will apply styles defined in `theme.styles.h3` */ apply?: ResponsiveValue; } declare const position: Config$1; /** * Types for position CSS properties */ interface PositionProps { /** * The CSS `z-index` property */ zIndex?: Token; /** * The CSS `top` property */ top?: Token; insetBlockStart?: Token; /** * The CSS `right` property */ right?: Token; /** * When the direction is `ltr`, `insetInlineEnd` is equivalent to `right`. * When the direction is `rtl`, `insetInlineEnd` is equivalent to `left`. */ insetInlineEnd?: Token; /** * When the direction is `ltr`, `insetEnd` is equivalent to `right`. * When the direction is `rtl`, `insetEnd` is equivalent to `left`. */ insetEnd?: Token; /** * The CSS `bottom` property */ bottom?: Token; insetBlockEnd?: Token; /** * The CSS `left` property */ left?: Token; insetInlineStart?: Token; /** * When the direction is `start`, `end` is equivalent to `left`. * When the direction is `start`, `end` is equivalent to `right`. */ insetStart?: Token; /** * The CSS `left`, `right`, `top`, `bottom` property */ inset?: Token; /** * The CSS `left`, and `right` property */ insetX?: Token; /** * The CSS `top`, and `bottom` property */ insetY?: Token; /** * The CSS `position` property */ pos?: Token; /** * The CSS `position` property */ position?: Token; insetInline?: Token; insetBlock?: Token; } /** * The parser configuration for common outline properties */ declare const ring: Config$1; interface RingProps { /** * Creates outline rings with CSS `box-shadow` property */ ring?: Token; /** * The color of the outline ring */ ringColor?: Token; /** * The thickness of the offset shadow when using outline rings */ ringOffset?: Token; /** * The color of the offset shadow when adding outline rings */ ringOffsetColor?: Token; /** * If the outline ring should an `inset` */ ringInset?: Token<"inset" | "none">; } declare const space: Config$1; /** * Types for space related CSS properties */ interface SpaceProps { /** * Margin on top, left, bottom and right */ m?: Token; /** * Margin on top, left, bottom and right */ margin?: Token; /** * Margin on top */ mt?: Token; marginBlockStart?: Token; /** * Margin on top */ marginTop?: Token; /** * Margin on right */ mr?: Token; /** * When direction is `ltr`, `marginInlineEnd` is equivalent to `marginRight`. * When direction is `rtl`, `marginInlineEnd` is equivalent to `marginLeft`. */ marginInlineEnd?: Token; /** * When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. * When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`. */ marginEnd?: Token; /** * When direction is `ltr`, `me` is equivalent to `marginRight`. * When direction is `rtl`, `me` is equivalent to `marginLeft`. */ me?: Token; /** * Margin on right */ marginRight?: Token; /** * Margin on bottom */ mb?: Token; marginBlockEnd?: Token; /** * Margin on bottom */ marginBottom?: Token; /** * Margin on left */ ml?: Token; /** * When direction is `ltr`, `marginInlineStart` is equivalent to `marginLeft`. * When direction is `rtl`, `marginInlineStart` is equivalent to `marginRight`. */ marginInlineStart?: Token; /** * When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. * When direction is `rtl`, `marginStart` is equivalent to `marginRight`. */ marginStart?: Token; /** * When direction is `ltr`, `ms` is equivalent to `marginLeft`. * When direction is `rtl`, `ms` is equivalent to `marginRight`. */ ms?: Token; /** * Margin on left */ marginLeft?: Token; /** * Margin on left and right */ mx?: Token; marginInline?: Token; /** * Margin on left and right */ marginX?: Token; /** * Margin on top and bottom */ my?: Token; marginBlock?: Token; /** * Margin on top and bottom */ marginY?: Token; /** * Padding on top, left, bottom and right */ p?: Token; /** * Padding on top, left, bottom and right */ padding?: Token; /** * Padding on top */ pt?: Token; paddingBlockStart?: Token; /** * Padding on top */ paddingTop?: Token; /** * Padding on right */ pr?: Token; /** * When direction is `ltr`, `paddingInlineEnd` is equivalent to `paddingRight`. * When direction is `rtl`, `paddingInlineEnd` is equivalent to `paddingLeft`. */ paddingInlineEnd?: Token; /** * When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. * When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. */ paddingEnd?: Token; /** * When direction is `ltr`, `pe` is equivalent to `paddingRight`. * When direction is `rtl`, `pe` is equivalent to `paddingLeft`. */ pe?: Token; /** * Padding on right */ paddingRight?: Token; /** * Padding on bottom */ pb?: Token; paddingBlockEnd?: Token; /** * Padding on bottom */ paddingBottom?: Token; /** * Padding on left */ pl?: Token; /** * When direction is `ltr`, `paddingInlineStart` is equivalent to `paddingLeft`. * When direction is `rtl`, `paddingInlineStart` is equivalent to `paddingRight`. */ paddingInlineStart?: Token; /** * When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. * When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. */ paddingStart?: Token; /** * When direction is `ltr`, `ps` is equivalent to `paddingLeft`. * When direction is `rtl`, `ps` is equivalent to `paddingRight`. */ ps?: Token; /** * Padding on left */ paddingLeft?: Token; /** * Padding on left and right */ px?: Token; paddingInline?: Token; /** * Padding on left and right */ paddingX?: Token; /** * Padding on top and bottom */ py?: Token; paddingBlock?: Token; /** * Padding on top and bottom */ paddingY?: Token; } declare const textDecoration: Config$1; interface TextDecorationProps { /** * The CSS `text-decoration` property */ textDecoration?: Token; /** * The CSS `text-decoration` property */ textDecor?: Token; /** * The CSS `text-decoration-color` property */ textDecorationColor?: Token; /** * The CSS `text-decoration-thickness` property */ textDecorationThickness?: ResponsiveValue; /** * The CSS `text-decoration-style` property */ textDecorationStyle?: ResponsiveValue; /** * The CSS `text-decoration-line` property */ textDecorationLine?: ResponsiveValue; /** * The CSS `text-underline-offset` property */ textUnderlineOffset?: ResponsiveValue; /** * The `text-shadow` property */ textShadow?: Token; } declare const transform: Config$1; interface TransformProps { /** * The CSS `transform` property */ transform?: Token; /** * The CSS `transform-origin` property */ transformOrigin?: Token; /** * The CSS `clip-path` property. * * It creates a clipping region that sets what part of an element should be shown. */ clipPath?: Token; /** * Translate value of an elements in the x-direction. * - Only works if `transform=auto` * - It sets the value of `--chakra-translate-x` */ translateX?: Token; /** * Translate value of an elements in the y-direction. * - Only works if `transform=auto` * - It sets the value of `--chakra-translate-y` */ translateY?: Token; /** * Sets the rotation value of the element */ rotate?: Token; /** * Skew value of an elements in the x-direction. * - Only works if `transform=auto` * - It sets the value of `--chakra-skew-x` */ skewX?: Token; /** * Skew value of an elements in the y-direction. * - Only works if `transform=auto` * - It sets the value of `--chakra-skew-y` */ skewY?: Token; /** * Scale value of an elements in the x-direction. * - Only works if `transform=auto` * - It sets the value of `--chakra-scale-x` */ scaleX?: Token; /** * Scale value of an elements in the y-direction. * - Only works if `transform=auto` * - It sets the value of `--chakra-scale-y` */ scaleY?: Token; /** * Sets the scale value of the element */ scale?: Token; } declare const transition: Config$1; interface TransitionProps { /** * The CSS `transition` property */ transition?: Token; /** * The CSS `transition-property` property */ transitionProperty?: Token; /** * The CSS `transition-timing-function` property */ transitionTimingFunction?: Token; /** * The CSS `transition-duration` property */ transitionDuration?: Token; /** * The CSS `transition-delay` property */ transitionDelay?: Token; /** * The CSS `animation` property */ animation?: Token; /** * The CSS `will-change` property */ willChange?: Token; } declare const typography: Config$1; /** * Types for typography related CSS properties */ interface TypographyProps { /** * The CSS `font-weight` property */ fontWeight?: Token; /** * The CSS `line-height` property */ lineHeight?: Token; /** * The CSS `letter-spacing` property */ letterSpacing?: Token; /** * The CSS `font-size` property */ fontSize?: Token; /** * The CSS `font-family` property */ fontFamily?: Token; /** * The CSS `text-align` property */ textAlign?: Token; /** * The CSS `font-style` property */ fontStyle?: Token; /** * The CSS `text-indent` property */ textIndent?: Token; /** * The CSS `word-break` property */ wordBreak?: Token; /** * The CSS `overflow-wrap` property */ overflowWrap?: Token; /** * The CSS `text-overflow` property */ textOverflow?: Token; /** * The CSS `text-transform` property */ textTransform?: Token; /** * The CSS `white-space` property */ whiteSpace?: Token; /** * Used to visually truncate a text after a number of lines. */ noOfLines?: ResponsiveValue; /** * If `true`, it clamps truncate a text after one line. */ isTruncated?: boolean; } declare const scroll: Config$1; interface ScrollProps { scrollBehavior?: Token; scrollSnapAlign?: Token; scrollSnapStop?: Token; scrollSnapType?: Token; scrollMargin?: Token; scrollMarginTop?: Token; scrollMarginBottom?: Token; scrollMarginLeft?: Token; scrollMarginRight?: Token; scrollMarginX?: Token; scrollMarginY?: Token; scrollPadding?: Token; scrollPaddingTop?: Token; scrollPaddingBottom?: Token; scrollPaddingLeft?: Token; scrollPaddingRight?: Token; scrollPaddingX?: Token; scrollPaddingY?: Token; } declare const pseudoSelectors: { /** * Styles for CSS selector `&:hover` */ _hover: string; /** * Styles for CSS Selector `&:active` */ _active: string; /** * Styles for CSS selector `&:focus` * */ _focus: string; /** * Styles for the highlighted state. */ _highlighted: string; /** * Styles to apply when a child of this element has received focus * - CSS Selector `&:focus-within` */ _focusWithin: string; /** * Styles to apply when this element has received focus via tabbing * - CSS Selector `&:focus-visible` */ _focusVisible: string; /** * Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors: * - `&[aria-disabled=true]` * - `&:disabled` * - `&[data-disabled]` * - `&[disabled]` */ _disabled: string; /** * Styles for CSS Selector `&:readonly` */ _readOnly: string; /** * Styles for CSS selector `&::before` * * NOTE:When using this, ensure the `content` is wrapped in a backtick. * @example * ```jsx * * ``` */ _before: string; /** * Styles for CSS selector `&::after` * * NOTE:When using this, ensure the `content` is wrapped in a backtick. * @example * ```jsx * * ``` */ _after: string; /** * Styles for CSS selector `&:empty` */ _empty: string; /** * Styles to apply when the ARIA attribute `aria-expanded` is `true` * - CSS selector `&[aria-expanded=true]` */ _expanded: string; /** * Styles to apply when the ARIA attribute `aria-checked` is `true` * - CSS selector `&[aria-checked=true]` */ _checked: string; /** * Styles to apply when the ARIA attribute `aria-grabbed` is `true` * - CSS selector `&[aria-grabbed=true]` */ _grabbed: string; /** * Styles for CSS Selector `&[aria-pressed=true]` * Typically used to style the current "pressed" state of toggle buttons */ _pressed: string; /** * Styles to apply when the ARIA attribute `aria-invalid` is `true` * - CSS selector `&[aria-invalid=true]` */ _invalid: string; /** * Styles for the valid state * - CSS selector `&[data-valid], &[data-state=valid]` */ _valid: string; /** * Styles for CSS Selector `&[aria-busy=true]` or `&[data-loading=true]`. * Useful for styling loading states */ _loading: string; /** * Styles to apply when the ARIA attribute `aria-selected` is `true` * * - CSS selector `&[aria-selected=true]` */ _selected: string; /** * Styles for CSS Selector `[hidden=true]` */ _hidden: string; /** * Styles for CSS Selector `&:-webkit-autofill` */ _autofill: string; /** * Styles for CSS Selector `&:nth-child(even)` */ _even: string; /** * Styles for CSS Selector `&:nth-child(odd)` */ _odd: string; /** * Styles for CSS Selector `&:first-of-type` */ _first: string; /** * Styles for CSS selector `&::first-letter` * * NOTE: This selector is only applied for block-level elements and not preceded by an image or table. * @example * ```jsx * Once upon a time * ``` */ _firstLetter: string; /** * Styles for CSS Selector `&:last-of-type` */ _last: string; /** * Styles for CSS Selector `&:not(:first-of-type)` */ _notFirst: string; /** * Styles for CSS Selector `&:not(:last-of-type)` */ _notLast: string; /** * Styles for CSS Selector `&:visited` */ _visited: string; /** * Used to style the active link in a navigation * Styles for CSS Selector `&[aria-current=page]` */ _activeLink: string; /** * Used to style the current step within a process * Styles for CSS Selector `&[aria-current=step]` */ _activeStep: string; /** * Styles to apply when the ARIA attribute `aria-checked` is `mixed` * - CSS selector `&[aria-checked=mixed]` */ _indeterminate: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered */ _groupHover: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered */ _peerHover: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused */ _groupFocus: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` is focused */ _peerFocus: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus */ _groupFocusVisible: string; /** * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus */ _peerFocusVisible: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active */ _groupActive: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` is active */ _peerActive: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled */ _groupDisabled: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` is disabled */ _peerDisabled: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid */ _groupInvalid: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` is invalid */ _peerInvalid: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked */ _groupChecked: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` is checked */ _peerChecked: string; /** * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within */ _groupFocusWithin: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` has focus within */ _peerFocusWithin: string; /** * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown */ _peerPlaceholderShown: string; /** * Styles for CSS Selector `&::placeholder`. */ _placeholder: string; /** * Styles for CSS Selector `&:placeholder-shown`. */ _placeholderShown: string; /** * Styles for CSS Selector `&:fullscreen`. */ _fullScreen: string; /** * Styles for CSS Selector `&::selection` */ _selection: string; /** * Styles for CSS Selector `[dir=rtl] &` * It is applied when a parent element or this element has `dir="rtl"` */ _rtl: string; /** * Styles for CSS Selector `[dir=ltr] &` * It is applied when a parent element or this element has `dir="ltr"` */ _ltr: string; /** * Styles for CSS Selector `@media (prefers-color-scheme: dark)` * It is used when the user has requested the system use a light or dark color theme. */ _mediaDark: string; /** * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)` * It is used when the user has requested the system to reduce the amount of animations. */ _mediaReduceMotion: string; /** * Styles for when `data-theme` is applied to any parent of * this component or element. */ _dark: string; /** * Styles for when `data-theme` is applied to any parent of * this component or element. */ _light: string; /** * Styles for the CSS Selector `&[data-orientation=horizontal]` */ _horizontal: string; /** * Styles for the CSS Selector `&[data-orientation=vertical]` */ _vertical: string; }; type Pseudos = typeof pseudoSelectors; declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_firstLetter" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_activeStep" | "_indeterminate" | "_groupHover" | "_peerHover" | "_groupFocus" | "_peerFocus" | "_groupFocusVisible" | "_peerFocusVisible" | "_groupActive" | "_peerActive" | "_groupDisabled" | "_peerDisabled" | "_groupInvalid" | "_peerInvalid" | "_groupChecked" | "_peerChecked" | "_groupFocusWithin" | "_peerFocusWithin" | "_peerPlaceholderShown" | "_placeholder" | "_placeholderShown" | "_fullScreen" | "_selection" | "_rtl" | "_ltr" | "_mediaDark" | "_mediaReduceMotion" | "_dark" | "_light" | "_horizontal" | "_vertical")[]; interface StyleProps extends SpaceProps, ColorProps, TransitionProps, TypographyProps, FlexboxProps, TransformProps, GridProps, FilterProps, LayoutProps, BorderProps, EffectProps, BackgroundProps, ListProps, PositionProps, RingProps, ScrollProps, InteractivityProps, TextDecorationProps, OtherProps { } interface SystemCSSProperties extends CSS.Properties, Omit { } type ThemeThunk = T | ((theme: Record) => T); type PropertyValue = ThemeThunk>; type CSSWithMultiValues = { [K in keyof SystemCSSProperties]?: K extends keyof StyleProps ? StyleProps[K] | PropertyValue : PropertyValue; }; type PseudoKeys = keyof CSS.Pseudos | keyof Pseudos; type PseudoSelectorDefinition = D | RecursivePseudo