@yamada-ui/core
Version:
Yamada UI core
1,404 lines (1,401 loc) • 396 kB
text/typescript
import * as _yamada_ui_utils from '@yamada-ui/utils';
import { Dict, StringLiteral, Union, ObjectLiteral, Merge } from '@yamada-ui/utils';
import * as React from 'react';
import { RefObject, FC as FC$1, ReactNode, ForwardedRef } from 'react';
import { PortalProps } from '@yamada-ui/portal';
import { MotionConfigProps, Variants, HTMLMotionProps } from 'motion/react';
import { GeneratedTheme } from './generated-theme.types.mjs';
import { UITheme } from './ui-theme.types.mjs';
import { CSSObject, Keyframes, Interpolation, ThemeProviderProps as ThemeProviderProps$1 } from '@emotion/react';
export { CSSObject, Interpolation, Keyframes } from '@emotion/react';
import * as CSS from 'csstype';
export { CSS };
import * as react_jsx_runtime from 'react/jsx-runtime';
import { FunctionInterpolation } from '@emotion/styled';
type TextDirection = "ltr" | "rtl";
type BreakpointDirection = "down" | "up";
interface BreakpointOptions {
/**
* The base value for the `breakpoint` when `direction` is "down".
* This is treated as the largest `breakpoint`.
*
* @default "9999px"
*/
base?: string;
/**
* The `ref` of the container element used in `useBreakpoint` and others.
*
* Even if this `ref` is not set, CSS query will work, but JavaScript operations such as `useBreakpoint` will not work.
*
* @external
*/
containerRef?: RefObject<HTMLElement>;
/**
* The `breakpoint` direction controls the responsive design approach.
*
* - `up`: mobile-first using `min-width`.
* - `down`: desktop-first using `max-width`.
*
* @default "down"
*/
direction?: BreakpointDirection;
/**
* The `breakpoint` custom identifier.
*
* @external
*
* @default "@media screen"
*/
identifier?: "@media screen" | `@container ${string}` | `@container`;
}
type LoadingVariant = "audio" | "circles" | "dots" | "grid" | "oval" | "puff" | "rings";
type LoadingComponent = "background" | "custom" | "page" | "screen";
type StatusValue = "error" | "info" | "success" | "warning";
type Statuses = {
[key in StatusValue]?: {
colorScheme?: Theme["colorSchemes"];
};
};
type AlertStatusValue = "loading" | StatusValue;
type AlertStatuses = {
[key in AlertStatusValue]?: {
colorScheme?: Theme["colorSchemes"];
icon?: FC$1;
};
};
type NoticePlacement = "bottom" | "bottom-left" | "bottom-right" | "top" | "top-left" | "top-right";
interface NoticeComponentProps extends NoticeConfigOptions {
onClose: () => void;
}
interface NoticeConfigOptions extends ThemeProps<"Alert"> {
/**
* The custom style to use.
*/
style?: CSSUIObject;
/**
* The strategy to remove the notice when `isClosable` is set to `true`
*
* @default 'button'
*/
closeStrategy?: "both" | "button" | "element";
/**
* The custom notice component to use.
*/
component?: (props: NoticeComponentProps) => ReactNode;
/**
* The description of the notice.
*/
description?: ReactNode;
/**
* The number of `ms` the notice will continue to be displayed.
*
* If `null`, the notice will continue to display.
* Please use in conjunction with `isClosable`.
*
* @default 5000
*/
duration?: null | number;
/**
* The loading icon to use.
*/
icon?: {
variant?: LoadingVariant;
children?: ReactNode;
/**
* The CSS `color` property.
*/
color?: CSSUIProps["color"];
};
/**
* If `true`, allows the notice to be removed.
*
* @default false
*/
isClosable?: boolean;
/**
* The maximum value at which notice will be displayed.
*/
limit?: number;
/**
* The placement of the notice.
*
* @default 'top'
*/
placement?: NoticePlacement;
/**
* The status of the notice.
*
* @default 'info'
*/
status?: AlertStatusValue;
/**
* The title of the notice.
*/
title?: ReactNode;
}
type SnackDirection = "bottom" | "top";
interface SnackComponentProps extends SnackConfigOptions {
index: number;
onClose: () => void;
}
interface SnackConfigOptions extends ThemeProps<"Alert"> {
/**
* The custom style to use.
*/
style?: CSSUIObject;
/**
* The CSS `box-shadow` property.
*
* @default '["base", "dark-sm"]'
*/
boxShadow?: CSSUIProps["boxShadow"];
/**
* The strategy to remove the snack when `isClosable` is set to `true`
*
* @default 'button'
*/
closeStrategy?: "both" | "button" | "element";
/**
* The custom snack component to use.
*/
component?: (props: SnackComponentProps) => ReactNode;
/**
* The description of the snack.
*/
description?: ReactNode;
/**
* The direction of the snacks.
*
* @default 'top'
*/
direction?: SnackDirection;
/**
* The number of `ms` the snack will continue to be displayed.
*
* If `null`, the snack will continue to display.
* Please use in conjunction with `isClosable`.
*
* @default null
*/
duration?: null | number;
/**
* The loading icon to use.
*/
icon?: {
variant?: LoadingVariant;
children?: ReactNode;
/**
* The CSS `color` property.
*/
color?: CSSUIProps["color"];
};
/**
* If `true`, allows the snack to be removed.
*
* @default true
*/
isClosable?: boolean;
/**
* The maximum value at which snack will be displayed.
*
* @default 3
*/
limit?: null | number;
/**
* If set the stack will start from the given index.
*
* @default 0
*/
startIndex?: number;
/**
* The status of the snack.
*
* @default 'info'
*/
status?: AlertStatusValue;
/**
* The title of the snack.
*/
title?: ReactNode;
}
interface LoadingComponentProps {
duration: null | number;
icon: LoadingConfigOptions["icon"];
message: ReactNode | undefined;
text: LoadingConfigOptions["text"];
onFinish: () => void;
initialState?: boolean;
}
interface LoadingConfigOptions {
/**
* Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
*
* @default false.
*/
allowPinchZoom?: boolean;
/**
* If `true`, the portal will check if it is within a parent portal
* and append itself to the parent's portal node.
* This provides nesting for portals.
*
* If `false`, the portal will always append to `document.body`
* regardless of nesting. It is used to opt out of portal nesting.
*
* @default true
*/
appendToParentPortal?: PortalProps["appendToParentPortal"];
/**
* If `true`, scrolling will be disabled on the `body` when the modal opens.
*
* @default true
*/
blockScrollOnMount?: boolean;
/**
* The custom loading component to use.
*/
component?: (props: LoadingComponentProps, ref: ForwardedRef<any>) => ReactNode;
/**
* The `ref` to the component where the portal will be attached to.
*/
containerRef?: PortalProps["containerRef"];
/**
* The number of `ms` the loading will continue to be displayed.
*
* If `null`, the loading will continue to display.
*
* @default null
*/
duration?: null | number;
/**
* Props for loading icon element.
*/
icon?: {
/**
* The CSS `box-size` property.
*/
size?: CSSUIProps["boxSize"];
variant?: LoadingVariant;
/**
* The CSS `color` property.
*/
color?: CSSUIProps["color"];
/**
* The CSS `color` property.
*/
secondaryColor?: CSSUIProps["color"];
};
/**
* If `true`, loaded from the initial rendering.
*
* @default false
*/
initialState?: boolean;
/**
* Props for loading text element.
*/
text?: {
/**
* The CSS `color` property.
*/
color?: CSSUIProps["color"];
/**
* The CSS `font-family` property.
*/
fontFamily?: CSSUIProps["fontFamily"];
/**
* The CSS `font-size` property.
*/
fontSize?: CSSUIProps["fontSize"];
/**
* The CSS `font-weight` property.
*/
fontWeight?: CSSUIProps["fontWeight"];
/**
* The CSS `letter-spacing` property.
*/
letterSpacing?: CSSUIProps["letterSpacing"];
/**
* The CSS `line-height` property.
*/
lineHeight?: CSSUIProps["letterSpacing"];
};
}
interface ThemeConfig {
/**
* The config of the alert.
*/
alert?: {
/**
* The statuses of the alert.
*/
statuses?: AlertStatuses;
};
/**
* The config of breakpoint.
*/
breakpoint?: BreakpointOptions;
/**
* The config of the calendar or date picker etc.
*/
date?: {
/**
* The locale of the calendar or date picker etc.
* Check the docs to see the locale of possible modifiers you can pass.
*
* @see Docs https://day.js.org/docs/en/i18n/instance-locale
* @default 'en'
*
* @deprecated Use `locale` instead.
*/
locale?: string;
};
/**
* The text direction to apply to the application.
*
* @default 'ltr'
*/
direction?: TextDirection;
/**
* If `true`, temporarily disable transitions.
* This is used to avoid unnecessary movements caused by transitions during color mode switching, for example.
*
* @default false
*/
disableTransitionOnChange?: boolean;
/**
* The initial color mode.
* If `system`, the system will apply the color mode.
*
* @default 'light'
*/
initialColorMode?: "dark" | "light" | "system";
/**
* The initial theme scheme.
* This is only applicable if multiple themes are provided.
*
* @default 'base'
*/
initialThemeScheme?: Theme["themeSchemes"];
/**
* The config of the loading.
*/
loading?: {
/**
* The options of the background loading.
*/
background?: LoadingConfigOptions;
/**
* The options of the custom loading.
*/
custom?: LoadingConfigOptions;
/**
* The default component to use for `useAsyncCallback` and similar hooks.
*/
defaultComponent?: LoadingComponent;
/**
* The options of the page loading.
*/
page?: LoadingConfigOptions;
/**
* The options of the screen loading.
*/
screen?: LoadingConfigOptions;
};
/**
* The locale to apply to the application.
*
* @default 'en-US'
*/
locale?: string;
/**
* The config of the `motion`.
*/
motion?: {
/**
* Set configuration options for `motion`.
*
* @see Docs https://motion.dev/docs/react-motion-config
*/
config?: Omit<MotionConfigProps, "children">;
};
/**
* The config of the notice.
*/
notice?: {
/**
* If `true`, the portal will check if it is within a parent portal
* and append itself to the parent's portal node.
* This provides nesting for portals.
*
* If `false`, the portal will always append to `document.body`
* regardless of nesting. It is used to opt out of portal nesting.
*
* @default true
*/
appendToParentPortal?: PortalProps["appendToParentPortal"];
/**
* The `ref` to the component where the portal will be attached to.
*/
containerRef?: PortalProps["containerRef"];
/**
* The CSS `gap` property.
*
* @default 'md'
*/
gap?: CSSUIProps["gap"];
/**
* The options of the notice.
*/
options?: NoticeConfigOptions;
/**
* The variants of the notice.
* Check the docs to see the variants of possible modifiers you can pass.
*
* @see Docs https://motion.dev/docs/react-animation#variants
*/
variants?: Variants;
/**
* Props for notice item element.
*/
itemProps?: HTMLMotionProps<"li">;
/**
* Props for notice list element.
*/
listProps?: HTMLUIProps<"ul">;
};
/**
* The config of the snacks.
*/
snacks?: {
/**
* The CSS `gap` property.
*
* @default 'md'
*/
gap?: CSSUIProps["gap"];
/**
* A property that provides spacing between the top and bottom.
*
* @default "[0, 0]"
*/
gutter?: [CSSUIProps["paddingTop"], CSSUIProps["paddingBottom"]];
/**
* If `true`, apply gutter value to negative margin
*
* @default true
*/
negateMargin?: boolean;
/**
* The options of the snack.
*/
options?: SnackConfigOptions;
/**
* The variants of the snack.
* Check the docs to see the variants of possible modifiers you can pass.
*
* @see Docs https://motion.dev/docs/react-animation#variants
*/
variants?: Variants;
};
/**
* The config of the status.
*/
status?: {
/**
* The statuses of the status.
*/
statuses?: Statuses;
};
/**
* The config of the theme.
*/
theme?: {
/**
* If `true`, the theme tokens are converted into responsive object.
*
* @default false
*/
responsive?: boolean;
};
/**
* The config of CSS variables.
*/
var?: {
/**
* The prefix to attach to variable names when converting each token of the theme to CSS variable names.
*
* @default 'ui'
*/
prefix?: StringLiteral;
};
}
interface LayerStyles {
[key: string]: CSSUIObject;
}
interface TextStyles {
[key: string]: CSSUIObject;
}
type ThemeValue = number | string;
interface ThemeTokens {
[key: ThemeValue]: [Dict<ThemeValue> | ThemeValue, Dict<ThemeValue> | ThemeValue] | ThemeTokens | ThemeValue;
}
interface ThemeAnimationTokens<T extends AnimationStyle | string = AnimationStyle> {
[key: ThemeValue]: T | T[] | ThemeAnimationTokens<T>;
}
interface ThemeTransitionTokens {
duration?: ThemeTokens;
easing?: ThemeTokens;
property?: ThemeTokens;
}
interface ThemeBreakpointTokens {
[key: ThemeValue]: ThemeValue;
}
interface SemanticColorSchemes {
[key: string]: [Theme["colorSchemes"], Theme["colorSchemes"]] | Theme["colorSchemes"] | ThemeTokens;
}
interface ThemeSemanticTokens extends Omit<BaseTheme, "animations" | "breakpoints" | "components" | "semantics" | "styles" | "themeSchemes"> {
}
interface ThemeSemantics extends ThemeSemanticTokens {
animations?: ThemeAnimationTokens<AnimationStyle | string>;
colorSchemes?: SemanticColorSchemes;
}
interface NestedTheme extends Omit<BaseTheme, "breakpoints" | "components" | "styles" | "themeSchemes"> {
}
interface ThemeSchemes {
[key: string]: NestedTheme;
}
interface ThemeComponents {
[key: string]: ComponentMultiStyle | ComponentStyle;
}
interface BaseTheme {
animations?: ThemeAnimationTokens;
blurs?: ThemeTokens;
borders?: ThemeTokens;
breakpoints?: ThemeBreakpointTokens;
colors?: ThemeTokens;
components?: ThemeComponents;
fonts?: ThemeTokens;
fontSizes?: ThemeTokens;
fontWeights?: ThemeTokens;
gradients?: ThemeTokens;
letterSpacings?: ThemeTokens;
lineHeights?: ThemeTokens;
radii?: ThemeTokens;
semantics?: ThemeSemantics;
shadows?: ThemeTokens;
sizes?: ThemeTokens;
spaces?: ThemeTokens;
styles?: {
[key: string]: any;
globalStyle?: UIStyle;
layerStyles?: LayerStyles;
resetStyle?: UIStyle;
textStyles?: TextStyles;
};
themeSchemes?: ThemeSchemes;
transitions?: ThemeTransitionTokens;
zIndices?: ThemeTokens;
}
interface UsageTheme extends BaseTheme {
[key: string]: any;
}
type ComponentBaseStyle<Y extends Dict = Dict> = UIStyle<Y>;
interface ComponentVariants<Y extends Dict = Dict> {
[key: string]: UIStyle<Y>;
}
interface ComponentSizes<Y extends Dict = Dict> {
[key: string]: UIStyle<Y>;
}
type ComponentProps$1<Y extends keyof Theme["components"] | unknown = unknown, M extends Dict = Dict> = Partial<Omit<M, "colorScheme" | "size" | "variant">> & ThemeProps<Y>;
type ComponentDefaultProps<Y extends keyof Theme["components"] | unknown = unknown, M extends Dict = Dict> = ComponentProps$1<Y, M>;
type ComponentOverrideProps<Y extends keyof Theme["components"] | unknown = unknown, M extends Dict = Dict> = ((props: ComponentProps$1<Y, M>) => ComponentProps$1<Y, M>) | ComponentProps$1<Y, M>;
interface ComponentSharedStyle<Y extends keyof Theme["components"] | unknown = unknown, M extends Dict = Dict> {
/**
* The default props of the component.
*/
defaultProps?: ComponentDefaultProps<Y, M>;
/**
* The override props of the component.
*/
overrideProps?: ComponentOverrideProps<Y, M>;
}
interface ComponentStyle<Y extends keyof Theme["components"] | unknown = unknown, M extends Dict = Dict> extends ComponentSharedStyle<Y, M> {
/**
* The base style of the component.
*/
baseStyle?: ComponentBaseStyle<M>;
/**
* The sizes of the component.
*/
sizes?: ComponentSizes<M>;
/**
* The variants of the component.
*/
variants?: ComponentVariants<M>;
}
type ComponentMultiBaseStyle<Y extends Dict = Dict> = UIMultiStyle<Y>;
interface ComponentMultiVariants<Y extends Dict = Dict> {
[key: string]: UIMultiStyle<Y>;
}
interface ComponentMultiSizes<Y extends Dict = Dict> {
[key: string]: UIMultiStyle<Y>;
}
interface ComponentMultiStyle<Y extends keyof Theme["components"] | unknown = unknown, M extends Dict = Dict> extends ComponentSharedStyle<Y, M> {
/**
* The base style of the component.
*/
baseStyle?: ComponentMultiBaseStyle<M>;
/**
* The sizes of the component.
*/
sizes?: ComponentMultiSizes<M>;
/**
* The variants of the component.
*/
variants?: ComponentMultiVariants<M>;
}
interface CSSMap {
[key: string]: {
ref: string;
var: string;
};
}
interface CustomTheme {
}
interface CustomInternalTheme {
}
type InternalTheme = CustomInternalTheme extends Required<UsageTheme> ? CustomInternalTheme : UsageTheme;
type Theme = CustomTheme extends UITheme ? CustomTheme : GeneratedTheme;
type ChangeThemeScheme = (themeScheme: Theme["themeSchemes"]) => void;
type StyledTheme<T extends InternalTheme = InternalTheme> = {
changeThemeScheme: ChangeThemeScheme;
themeScheme: Theme["themeSchemes"];
__breakpoints?: AnalyzeBreakpointsReturn;
__config?: ThemeConfig;
__cssMap?: CSSMap;
__cssVars?: Dict;
} & T;
interface BreakpointQuery {
breakpoint: string;
maxW: number | undefined;
maxWQuery: string | undefined;
minMaxQuery: string | undefined;
minW: number | undefined;
minWQuery: string | undefined;
query: string | undefined;
}
type BreakpointQueries = BreakpointQuery[];
interface Breakpoints {
isResponsive: (obj: Dict, strict?: boolean) => boolean;
keys: string[];
queries: BreakpointQueries;
}
declare function createQuery(min: number | undefined, max: number | undefined, identifier?: string): string | undefined;
declare function analyzeBreakpoints(breakpoints: ThemeBreakpointTokens | undefined, options?: BreakpointOptions): Breakpoints | undefined;
type AnalyzeBreakpointsReturn = ReturnType<typeof analyzeBreakpoints>;
declare function getMinMaxQuery(queries: BreakpointQueries, direction: BreakpointDirection, pickKey?: string[]): {
maxQuery: BreakpointQuery | undefined;
minQuery: BreakpointQuery | undefined;
};
declare const attributes: {
/**
* The CSS `[data-accept]` attribute selector.
*/
readonly _accept: "&[data-accept]";
/**
* The CSS `[data-between]` attribute selector.
*/
readonly _between: "&[data-between]";
/**
* The CSS `[data-end]` attribute selector.
*/
readonly _end: "&[data-end]";
/**
* The CSS `[aria-selected=true]` attribute selector.
*
* - `[aria-expanded=true]`
* - `[data-expanded]`
*/
readonly _expanded: "&[data-expanded], &[aria-expanded=true]";
/**
* The CSS `[data-filled]` attribute selector.
*/
readonly _filled: "&[data-filled]";
/**
* The CSS `[data-grabbed]` attribute selector.
*
* - `[data-grabbed]`
* - `[aria-grabbed=true]`
*/
readonly _grabbed: "&[data-grabbed], &[aria-grabbed=true]";
/**
* The CSS `[data-grid]` attribute selector.
*/
readonly _grid: "[role=grid], &[data-grid]";
/**
* The CSS `[hidden]` attribute selector.
*
* - `[hidden]`
* - `[data-hidden]`
*/
readonly _hidden: "&[hidden], &[data-hidden]";
/**
* The CSS `[data-holiday]` attribute selector.
*/
readonly _holiday: "&[data-holiday]";
/**
* The CSS `[data-idle]` attribute selector.
*/
readonly _idle: "&[data-idle]";
/**
* The CSS `[data-loaded]` attribute selector.
*/
readonly _loaded: "&[data-loaded]";
/**
* The CSS `[aria-busy=true]` attribute selector.
*
* - `[data-loading]`
* - `[aria-busy=true]`
*/
readonly _loading: "&[data-loading], &[aria-busy=true]";
/**
* The CSS `[hidden]` attribute selector.
*/
readonly _nativeHidden: "&[hidden]";
/**
* The CSS `[data-not-allowed]` attribute selector.
*
* - `[data-not-allowed]`
*/
readonly _notAllowed: "&[data-not-allowed]";
/**
* The CSS `:not(:selected)` attribute selector.
*
* - `:not([data-selected])`
* - `:not([aria-selected=true])`
*/
readonly _notSelected: "&:not([data-selected]):not([aria-selected=true])";
/**
* The CSS `:where([data-outside])` attribute selector.
*/
readonly _outside: "&:where([data-outside])";
/**
* The CSS `[data-pressed]` attribute selector.
*
* - `[data-pressed]`
* - `[aria-pressed=true]`
*/
readonly _pressed: "&[data-pressed], &[aria-pressed=true]";
/**
* The CSS `[data-reject]` attribute selector.
*/
readonly _reject: "&[data-reject]";
readonly _ripple: "& .ui-ripple";
/**
* The CSS `:selected` attribute selector.
*
* - `[data-selected]`
* - `[aria-selected=true]`
*/
readonly _selected: "&[data-selected], &[aria-selected=true]";
/**
* The CSS `[data-start]` attribute selector.
*/
readonly _start: "&[data-start]";
/**
* The CSS `[data-today]` attribute selector.
*/
readonly _today: "&[data-today]";
/**
* The CSS `:where([data-weekend])` attribute selector.
*/
readonly _weekend: "&:where([data-weekend])";
};
type Attributes = typeof attributes;
type AttributeProperty = keyof Attributes;
type AttributeSelector = Attributes[AttributeProperty];
type AttributeProps = {
[K in AttributeProperty]?: CSSUIObject;
};
declare const attributeProperties: AttributeProperty[];
declare const attributeSelectors: ("&[data-accept]" | "&[data-between]" | "&[data-end]" | "&[data-expanded], &[aria-expanded=true]" | "&[data-filled]" | "&[data-grabbed], &[aria-grabbed=true]" | "[role=grid], &[data-grid]" | "&[hidden], &[data-hidden]" | "&[data-holiday]" | "&[data-idle]" | "&[data-loaded]" | "&[data-loading], &[aria-busy=true]" | "&[hidden]" | "&[data-not-allowed]" | "&:not([data-selected]):not([aria-selected=true])" | "&:where([data-outside])" | "&[data-pressed], &[aria-pressed=true]" | "&[data-reject]" | "& .ui-ripple" | "&[data-selected], &[aria-selected=true]" | "&[data-start]" | "&[data-today]" | "&:where([data-weekend])")[];
declare const pseudoElements: {
/**
* The CSS `::after` pseudo-element.
*/
readonly _after: "&::after";
/**
* The CSS `::backdrop` pseudo-element.
*/
readonly _backdrop: "&::backdrop";
/**
* The CSS `::before` pseudo-element.
*/
readonly _before: "&::before";
/**
* The CSS `::cue` pseudo-element.
*/
readonly _cue: "&::cue";
/**
* The CSS `::cue-region` pseudo-element.
*/
readonly _cueRegion: "&::cue-region";
/**
* The CSS `::file-selector-button` pseudo-element.
*/
readonly _fileSelector: "&::file-selector-button";
/**
* The CSS `::first-letter` pseudo-element.
*/
readonly _firstLetter: "&::first-letter";
/**
* The CSS `::first-line` pseudo-element.
*/
readonly _firstLine: "&::first-line";
/**
* The CSS `::marker` pseudo-element.
*/
readonly _marker: "&::marker";
/**
* The CSS `::placeholder` pseudo-element.
*
* - `::placeholder`
* - `[data-placeholder]`
*/
readonly _placeholder: "&::placeholder, &[data-placeholder]";
/**
* The CSS `::-webkit-scrollbar` pseudo-element.
*
* - `::-webkit-scrollbar`
* - `[data-scrollbar]`
*/
readonly _scrollbar: "&::-webkit-scrollbar, &[data-scrollbar]";
/**
* The CSS `::-webkit-scrollbar-button` pseudo-element.
*/
readonly _scrollbarButton: "&::-webkit-scrollbar-button";
/**
* The CSS `::-webkit-scrollbar-corner` pseudo-element.
*/
readonly _scrollbarCorner: "&::-webkit-scrollbar-corner";
/**
* The CSS `::-webkit-scrollbar-thumb` pseudo-element.
*/
readonly _scrollbarThumb: "&::-webkit-scrollbar-thumb";
/**
* The CSS `::-webkit-scrollbar-track` pseudo-element.
*/
readonly _scrollbarTrack: "&::-webkit-scrollbar-track";
/**
* The CSS `::-webkit-scrollbar-track-piece` pseudo-element.
*/
readonly _scrollbarTrackPiece: "&::-webkit-scrollbar-track-piece";
/**
* The CSS `::selection` pseudo-element.
*/
readonly _selection: "&::selection";
};
type PseudoElements = typeof pseudoElements;
type PseudoElementProperty = keyof PseudoElements;
type PseudoElementSelector = PseudoElements[PseudoElementProperty];
type PseudoElementProps = {
[K in PseudoElementProperty]?: CSSUIObject;
};
declare const pseudoElementProperties: PseudoElementProperty[];
declare const pseudoElementSelectors: ("&::after" | "&::backdrop" | "&::before" | "&::cue" | "&::cue-region" | "&::file-selector-button" | "&::first-letter" | "&::first-line" | "&::marker" | "&::placeholder, &[data-placeholder]" | "&::-webkit-scrollbar, &[data-scrollbar]" | "&::-webkit-scrollbar-button" | "&::-webkit-scrollbar-corner" | "&::-webkit-scrollbar-thumb" | "&::-webkit-scrollbar-track" | "&::-webkit-scrollbar-track-piece" | "&::selection")[];
declare const pseudoClasses: {
/**
* The CSS `:active` pseudo-class.
*
* - `:active`
* - `[data-active]`
*/
readonly _active: "&:active, &[data-active]";
/**
* The CSS `:any-link` pseudo-class.
*
* - `:any-link`
* - `[data-any-link]`
*/
readonly _anyLink: "&:any-link, &[data-any-link]";
/**
* The CSS `:autofill` pseudo-class.
*/
readonly _autofill: "&:autofill, &:-webkit-autofill";
/**
* The CSS `:blank` pseudo-class.
*
* - `:blank`
* - `[data-blank]`
*/
readonly _blank: "&:blank, &[data-blank]";
/**
* The CSS `:checked` pseudo-class.
*
* - `:checked`
* - `[data-checked]`
* - `[aria-checked=true]`
*/
readonly _checked: "&:checked, &[data-checked], &[aria-checked=true]";
/**
* The CSS `> *` child combinator selector.
*/
readonly _child: "& > *";
/**
* The CSS `:default` pseudo-class.
*/
readonly _default: "&:default";
/**
* The CSS `:disabled` pseudo-class.
*
* - `:disabled`
* - `[disabled]`
* - `[aria-disabled=true]`
* - `[data-disabled]`
*/
readonly _disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]";
/**
* The CSS `:empty` pseudo-class.
*/
readonly _empty: "&:empty";
/**
* The CSS `:enabled` pseudo-class.
*/
readonly _enabled: "&:enabled, &[data-enabled]";
/**
* The CSS `:nth-of-type(even)` pseudo-class.
*/
readonly _even: "&:nth-of-type(even)";
/**
* The CSS `:first-of-type` pseudo-class.
*/
readonly _first: "&:first-of-type";
/**
* The CSS `:first-child` pseudo-class.
*/
readonly _firstChild: "& > *:first-child";
/**
* The CSS `:focus` pseudo-class.
*
* - `:focus`
* - `[data-focus]`
*/
readonly _focus: "&:focus, &[data-focus]";
/**
* The CSS `:focus-visible` pseudo-class.
*
* - `:focus-visible`
* - `[data-focus-visible]`
*/
readonly _focusVisible: "&:focus-visible, &[data-focus-visible]";
/**
* The CSS `:focus-within` pseudo-class.
*
* - `:focus-within`
* - `[data-focus-within]`
*/
readonly _focusWithin: "&:focus-within, &[data-focus-within]";
/**
* The CSS `:fullscreen` pseudo-class.
*/
readonly _fullScreen: "&:fullscreen";
/**
* The CSS `:horizontal` pseudo-class.
*
* - `[aria-orientation=horizontal]`
* - `[data-orientation=horizontal]`
*/
readonly _horizontal: "&[data-orientation=horizontal], &[aria-orientation=horizontal]";
/**
* The CSS `:hover` pseudo-class.
*
* - `:hover`
* - `[data-hover]`
*/
readonly _hover: "&:hover, &[data-hover]";
/**
* The CSS `:indeterminate` pseudo-class.
*
* - `:indeterminate`
* - `[aria-checked=mixed]`
* - `[data-indeterminate]`
*/
readonly _indeterminate: "&:indeterminate, &[data-indeterminate], &[aria-checked=mixed]";
/**
* The CSS `:in-range` pseudo-class.
*
* - `:in-range`
* - `[data-in-range]`
*/
readonly _inRange: "&:in-range, &[data-in-range]";
/**
* The CSS `:invalid` attribute selector.
*
* - `[data-invalid]`
* - `[aria-invalid=true]`
*/
readonly _invalid: "&[data-invalid], &[aria-invalid=true]";
/**
* The CSS `:last-of-type` pseudo-class.
*/
readonly _last: "&:last-of-type";
/**
* The CSS `:last-child` pseudo-class.
*/
readonly _lastChild: "& > *:last-child";
/**
* The CSS `:link` pseudo-class.
*
* - `:link`
* - `[data-link]`
*/
readonly _link: "&:link, &[data-link]";
/**
* The CSS `:modal` pseudo-class.
*/
readonly _modal: "&:modal";
/**
* The CSS `:active` pseudo-class.
*/
readonly _nativeActive: "&:active";
/**
* The CSS `:checked` pseudo-class.
*/
readonly _nativeChecked: "&:checked";
/**
* The CSS `:disabled` pseudo-class.
*
* - `:disabled`
* - `[disabled]`
*/
readonly _nativeDisabled: "&:disabled, &[disabled]";
/**
* The CSS `:focus` pseudo-class.
*/
readonly _nativeFocus: "&:focus";
/**
* The CSS `:focus-visible` pseudo-class.
*/
readonly _nativeFocusVisible: "&:focus-visible";
/**
* The CSS `:focus-within` pseudo-class.
*/
readonly _nativeFocusWithin: "&:focus-within";
/**
* The CSS `:hover` pseudo-class.
*/
readonly _nativeHover: "&:hover";
/**
* The CSS `:read-only` pseudo-class.
*
* - `[readonly]`
* - `[aria-readonly=true]`
*/
readonly _nativeReadOnly: "&[readonly], &[aria-readonly=true]";
/**
* The CSS `:target` pseudo-class.
*/
readonly _nativeTarget: "&:target";
/**
* The CSS `:valid` pseudo-class.
*/
readonly _nativeValid: "&:valid";
/**
* The CSS `:checked` pseudo-class.
*
* - `:not(:checked)`
* - `:not([data-checked])`
* - `:not([aria-checked=true])`
*/
readonly _notChecked: "&:not(:checked):not([data-checked]):not([aria-checked=true])";
/**
* The CSS `:not(:first-of-type)` pseudo-class.
*/
readonly _notFirst: "&:not(:first-of-type)";
/**
* The CSS `:not(:first-child)` pseudo-class.
*/
readonly _notFirstChild: "& > *:not(:first-child)";
/**
* The CSS `:not(:last-of-type)` pseudo-class.
*/
readonly _notLast: "&:not(:last-of-type)";
/**
* The CSS `:not(:last-child)` pseudo-class.
*/
readonly _notLastChild: "& > *:not(:last-child)";
/**
* The CSS `:not(:target)` pseudo-class.
*/
readonly _notTarget: "&:not(:target)";
/**
* The CSS `:nth-of-type(odd)` pseudo-class.
*/
readonly _odd: "&:nth-of-type(odd)";
/**
* The CSS `:only-of-type` pseudo-class.
*/
readonly _only: "&:only-of-type";
/**
* The CSS `:optional` pseudo-class.
*
* - `:optional`
* - `[data-optional]`
*/
readonly _optional: "&:optional, &[data-optional]";
/**
* The CSS `:out-of-range` pseudo-class.
*
* - `:out-of-range`
* - `[data-out-of-range]`
*/
readonly _outRange: "&:out-of-range, &[data-out-of-range]";
/**
* The CSS `:paused` pseudo-class.
*
* - `:paused`
* - `[data-paused]`
*/
readonly _paused: "&:paused, &[data-paused]";
/**
* The CSS `:picture-in-picture` pseudo-class.
*/
readonly _picture: "&:picture-in-picture";
/**
* The CSS `:placeholder-shown` pseudo-class.
*/
readonly _placeholderShown: "&:placeholder-shown";
/**
* The CSS `:playing` pseudo-class.
*
* - `:playing`
* - `[data-playing]`
*/
readonly _playing: "&:playing, &[data-playing]";
/**
* The CSS `:read-only` pseudo-class.
*
* - `[readonly]`
* - `[aria-readonly=true]`
* - `[data-readonly]`
*/
readonly _readOnly: "&[readonly], &[data-readonly], &[aria-readonly=true]";
/**
* The CSS `:read-write` pseudo-class.
*
* - `:read-write`
* - `[data-read-write]`
*/
readonly _readWrite: "&:read-write, &[data-read-write]";
/**
* The CSS `:required` pseudo-class.
*
* - `:required`
* - `[required]`
*/
readonly _required: "&:required, &[required]";
/**
* The CSS `:target` pseudo-class.
*
* - `:target`
* - `[data-target]`
*/
readonly _target: "&:target, &[data-target]";
/**
* The CSS `:user-invalid` pseudo-class.
*
* - `:user-invalid`
* - `[data-user-invalid]`
*/
readonly _userInvalid: "&:user-invalid, &[data-user-invalid]";
/**
* The CSS `:valid` pseudo-class.
*
* - `:valid`
* - `[data-valid]`
*/
readonly _valid: "&:valid, &[data-valid]";
/**
* The CSS `:vertical` pseudo-class.
*
* - `[aria-orientation=vertical]`
* - `[data-orientation=vertical]`
*/
readonly _vertical: "&[data-orientation=vertical], &[aria-orientation=vertical]";
/**
* The CSS `:visited` pseudo-class.
*/
readonly _visited: "&:visited";
};
type PseudoClasses = typeof pseudoClasses;
type PseudoClassProperty = keyof PseudoClasses;
type PseudoClassSelector = PseudoClasses[PseudoClassProperty];
type PseudoClassProps = {
[K in PseudoClassProperty]?: CSSUIObject;
};
declare const pseudoClassProperties: PseudoClassProperty[];
declare const pseudoClassSelectors: ("&:active, &[data-active]" | "&:any-link, &[data-any-link]" | "&:autofill, &:-webkit-autofill" | "&:blank, &[data-blank]" | "&:checked, &[data-checked], &[aria-checked=true]" | "& > *" | "&:default" | "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]" | "&:empty" | "&:enabled, &[data-enabled]" | "&:nth-of-type(even)" | "&:first-of-type" | "& > *:first-child" | "&:focus, &[data-focus]" | "&:focus-visible, &[data-focus-visible]" | "&:focus-within, &[data-focus-within]" | "&:fullscreen" | "&[data-orientation=horizontal], &[aria-orientation=horizontal]" | "&:hover, &[data-hover]" | "&:indeterminate, &[data-indeterminate], &[aria-checked=mixed]" | "&:in-range, &[data-in-range]" | "&[data-invalid], &[aria-invalid=true]" | "&:last-of-type" | "& > *:last-child" | "&:link, &[data-link]" | "&:modal" | "&:active" | "&:checked" | "&:disabled, &[disabled]" | "&:focus" | "&:focus-visible" | "&:focus-within" | "&:hover" | "&[readonly], &[aria-readonly=true]" | "&:target" | "&:valid" | "&:not(:checked):not([data-checked]):not([aria-checked=true])" | "&:not(:first-of-type)" | "& > *:not(:first-child)" | "&:not(:last-of-type)" | "& > *:not(:last-child)" | "&:not(:target)" | "&:nth-of-type(odd)" | "&:only-of-type" | "&:optional, &[data-optional]" | "&:out-of-range, &[data-out-of-range]" | "&:paused, &[data-paused]" | "&:picture-in-picture" | "&:placeholder-shown" | "&:playing, &[data-playing]" | "&[readonly], &[data-readonly], &[aria-readonly=true]" | "&:read-write, &[data-read-write]" | "&:required, &[required]" | "&:target, &[data-target]" | "&:user-invalid, &[data-user-invalid]" | "&:valid, &[data-valid]" | "&[data-orientation=vertical], &[aria-orientation=vertical]" | "&:visited")[];
declare const atRules: {
/**
* Styles for when `data-mode` is applied to any parent of this component or element.
*/
readonly _dark: ".ui-dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]";
/**
* The CSS `@media (orientation: landscape)` media query.
*/
readonly _landscape: "@media (orientation: landscape)";
/**
* Styles for when `data-mode` is applied to any parent of this component or element.
*/
readonly _light: ".ui-light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]";
/**
* The CSS `@media (prefers-color-scheme: dark)` media query.
*/
readonly _mediaDark: "@media (prefers-color-scheme: dark)";
/**
* The CSS `@media (prefers-color-scheme: light)` media query.
*/
readonly _mediaLight: "@media (prefers-color-scheme: light)";
/**
* The CSS `@media (prefers-reduced-motion: reduce)` media query.
*/
readonly _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)";
/**
* The CSS `@media (orientation: portrait)` media query.
*/
readonly _portrait: "@media (orientation: portrait)";
/**
* The CSS `@media print` media query.
*/
readonly _print: "@media print";
};
type AtRules = typeof atRules;
type AtRuleProperty = keyof AtRules;
type AtRuleSelector = AtRules[AtRuleProperty];
type AtRuleProps = {
[K in keyof AtRules]?: CSSUIObject;
};
declare const atRuleProperties: AtRuleProperty[];
declare const atRuleSelectors: (".ui-dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]" | "@media (orientation: landscape)" | ".ui-light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]" | "@media (prefers-color-scheme: dark)" | "@media (prefers-color-scheme: light)" | "@media (prefers-reduced-motion: reduce)" | "@media (orientation: portrait)" | "@media print")[];
declare const groupAttributes: {
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is accepted.
*/
readonly _groupAccept: "[role=group][data-accept] &, [data-group][data-accept] &, .group[data-accept] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is active.
*/
readonly _groupActive: "[role=group]:active &, [role=group][data-active] &, [data-group]:active &, [data-group][data-active] &, .group:active &, .group[data-active] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is blank.
*/
readonly _groupBlank: "[role=group]:blank &, [role=group][data-blank] &, [data-group]:blank &, [data-group][data-blank] &, .group:blank &, .group[data-blank] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is checked.
*/
readonly _groupChecked: "[role=group]:checked &, [role=group][data-checked] &, [role=group][aria-checked=true] &, [data-group]:checked &, [data-group][data-checked] &, [data-group][aria-checked=true] &, .group:checked &, .group[data-checked] &, .group[aria-checked=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is disabled.
*/
readonly _groupDisabled: "[role=group]:disabled &, [role=group][disabled] &, [role=group][aria-disabled=true] &, [role=group][data-disabled] &, [data-group]:disabled &, [data-group][disabled] &, [data-group][aria-disabled=true] &, [data-group][data-disabled] &, .group:disabled &, .group[disabled] &, .group[aria-disabled=true] &, .group[data-disabled] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is enabled.
*/
readonly _groupEnabled: "[role=group]:enabled &, [role=group][data-enabled] &, [data-group]:enabled &, [data-group][data-enabled] &, .group:enabled &, .group[data-enabled] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is expanded.
*/
readonly _groupExpanded: "[role=group][data-expanded] &, [role=group][aria-expanded=true] &, [data-group][data-expanded] &, [data-group][aria-expanded=true] &, .group[data-expanded] &, .group[aria-expanded=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused.
*/
readonly _groupFocus: "[role=group]:focus &, [role=group][data-focus] &, [data-group]:focus &, [data-group][data-focus] &, .group:focus &, .group[data-focus] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused-visible.
*/
readonly _groupFocusVisible: "[role=group]:focus-visible &, [role=group][data-focus-visible] &, [data-group]:focus-visible &, [data-group][data-focus-visible] &, .group:focus-visible &, .group[data-focus-visible] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focus-within.
*/
readonly _groupFocusWithin: "[role=group]:focus-within &, [role=group][data-focus-within] &, [data-group]:focus-within &, [data-group][data-focus-within] &, .group:focus-within &, .group[data-focus-within] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is grabbed.
*/
readonly _groupGrabbed: "[role=group][data-grabbed] &, [role=group][aria-grabbed=true] &, [data-group][data-grabbed] &, [data-group][aria-grabbed=true] &, .group[data-grabbed] &, .group[aria-grabbed=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is horizontal.
*/
readonly _groupHorizontal: "[role=group][data-orientation=horizontal] &, [role=group][aria-orientation=horizontal] &, [data-group][data-orientation=horizontal] &, [data-group][aria-orientation=horizontal] &, .group[data-orientation=horizontal] &, .group[aria-orientation=horizontal] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is hovered.
*/
readonly _groupHover: "[role=group]:hover &, [role=group][data-hover] &, [data-group]:hover &, [data-group][data-hover] &, .group:hover &, .group[data-hover] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is idle.
*/
readonly _groupIdle: "[role=group][data-idle] &, [data-group][data-idle] &, .group[data-idle] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is invalid.
*/
readonly _groupInvalid: "[role=group][data-invalid] &, [role=group][aria-invalid=true] &, [data-group][data-invalid] &, [data-group][aria-invalid=true] &, .group[data-invalid] &, .group[aria-invalid=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loaded.
*/
readonly _groupLoaded: "[role=group][data-loaded] &, [data-group][data-loaded] &, .group[data-loaded] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loading.
*/
readonly _groupLoading: "[role=group][data-loading] &, [role=group][aria-busy=true] &, [data-group][data-loading] &, [data-group][aria-busy=true] &, .group[data-loading] &, .group[aria-busy=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is optional.
*/
readonly _groupOptional: "[role=group]:optional &, [role=group][data-optional] &, [data-group]:optional &, [data-group][data-optional] &, .group:optional &, .group[data-optional] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` has a placeholder shown.
*/
readonly _groupPlaceholderShown: "[role=group]:placeholder-shown &, [data-group]:placeholder-shown &, .group:placeholder-shown &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is pressed.
*/
readonly _groupPressed: "[role=group][data-pressed] &, [role=group][aria-pressed=true] &, [data-group][data-pressed] &, [data-group][aria-pressed=true] &, .group[data-pressed] &, .group[aria-pressed=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-only.
*/
readonly _groupReadOnly: "[role=group][readonly] &, [role=group][data-readonly] &, [role=group][aria-readonly=true] &, [data-group][readonly] &, [data-group][data-readonly] &, [data-group][aria-readonly=true] &, .group[readonly] &, .group[data-readonly] &, .group[aria-readonly=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-write.
*/
readonly _groupReadWrite: "[role=group]:read-write &, [role=group][data-read-write] &, [data-group]:read-write &, [data-group][data-read-write] &, .group:read-write &, .group[data-read-write] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is rejected.
*/
readonly _groupReject: "[role=group][data-reject] &, [data-group][data-reject] &, .group[data-reject] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is required.
*/
readonly _groupRequired: "[role=group]:required &, [role=group][required] &, [data-group]:required &, [data-group][required] &, .group:required &, .group[required] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is selected.
*/
readonly _groupSelected: "[role=group][data-selected] &, [role=group][aria-selected=true] &, [data-group][data-selected] &, [data-group][aria-selected=true] &, .group[data-selected] &, .group[aria-selected=true] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is user-invalid.
*/
readonly _groupUserInvalid: "[role=group]:user-invalid &, [role=group][data-user-invalid] &, [data-group]:user-invalid &, [data-group][data-user-invalid] &, .group:user-invalid &, .group[data-user-invalid] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is valid.
*/
readonly _groupValid: "[role=group]:valid &, [role=group][data-valid] &, [data-group]:valid &, [data-group][data-valid] &, .group:valid &, .group[data-valid] &";
/**
* Styles to apply when a parent element with `role=group`, `data-group` or `.group` is vertical.
*/
readonly _groupVertical: "[role=group][data-orientation=vertical] &, [role=group][aria-orientation=vertical] &, [data-group][data-orientation=vertical] &, [data-group][aria-orientation=vertical] &, .group[data-orientation=vertical] &, .group[aria-orientation=vertical] &";
};
type GroupAttributes = typeof groupAttributes;
type GroupAttributeProperty = keyof GroupAttributes;
type GroupAttributeSelector = GroupAttributes[GroupAttributeProperty];
type GroupAttributeProps = {
[K in GroupAttributeProperty]?: CSSUIObject;
};
declare const groupAttributeProperties: GroupAttributeProperty[];
declare const groupAttributeSelectors: ("[role=group][data-accept] &, [data-group][data-accept] &, .group[data-accept] &" | "[role=group]:active &, [role=group][data-active] &, [data-group]:active &, [data-group][data-active] &, .group:active &, .group[data-active] &" | "[role=group]:blank &, [role=group][data-blank] &, [data-group]:blank &, [data-group][data-blank] &, .group:blank &, .group[data-blank] &" | "[role=group]:checked &, [role=group][data-checked] &, [role=group][aria-checked=true] &, [data-group]:checked &, [data-group][data-checked] &, [data-group][aria-checked=true] &, .group:checked &, .group[data-checked] &, .group[aria-checked=true] &" | "[role=group]:disabled &, [role=group][disabled] &, [role=group][aria-disabled=true] &, [role=group][data-disabled] &, [data-group]:disabled &, [data-group][disabled] &, [data-group][aria-disabled=true] &, [data-group][data-disabled] &, .group:disabled &, .group[disabled] &, .group[aria-disabled=true] &, .group[data-disabled] &" | "[role=group]:enabled &, [role=group][data-enabled] &, [data-group]:enabled &, [data-group][data-enabled] &, .group:enabled &, .group[data-enabled] &" | "[role=group][data-expanded