@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
1,575 lines (1,574 loc) • 69.8 kB
TypeScript
export declare const recipes: {
badge: import('@chakra-ui/react').RecipeDefinition<{
variant: {
subtle: {};
};
colorPalette: {
gray: {
bg: "badge.gray.bg";
color: "badge.gray.fg";
};
green: {
bg: "badge.green.bg";
color: "badge.green.fg";
};
red: {
bg: "badge.red.bg";
color: "badge.red.fg";
};
purple: {
bg: "badge.purple.bg";
color: "badge.purple.fg";
};
orange: {
bg: "badge.orange.bg";
color: "badge.orange.fg";
};
blue: {
bg: "badge.blue.bg";
color: "badge.blue.fg";
};
yellow: {
bg: "badge.yellow.bg";
color: "badge.yellow.fg";
};
teal: {
bg: "badge.teal.bg";
color: "badge.teal.fg";
};
cyan: {
bg: "badge.cyan.bg";
color: "badge.cyan.fg";
};
pink: {
bg: "badge.pink.bg";
color: "badge.pink.fg";
};
purple_alt: {
bg: "badge.purple_alt.bg";
color: "badge.purple_alt.fg";
};
blue_alt: {
bg: "badge.blue_alt.bg";
color: "badge.blue_alt.fg";
};
bright_gray: {
bg: "badge.bright.gray.bg";
color: "badge.bright.gray.fg";
};
bright_green: {
bg: "badge.bright.green.bg";
color: "badge.bright.green.fg";
};
bright_red: {
bg: "badge.bright.red.bg";
color: "badge.bright.red.fg";
};
bright_blue: {
bg: "badge.bright.blue.bg";
color: "badge.bright.blue.fg";
};
bright_yellow: {
bg: "badge.bright.yellow.bg";
color: "badge.bright.yellow.fg";
};
bright_teal: {
bg: "badge.bright.teal.bg";
color: "badge.bright.teal.fg";
};
bright_cyan: {
bg: "badge.bright.cyan.bg";
color: "badge.bright.cyan.fg";
};
bright_orange: {
bg: "badge.bright.orange.bg";
color: "badge.bright.orange.fg";
};
bright_purple: {
bg: "badge.bright.purple.bg";
color: "badge.bright.purple.fg";
};
bright_pink: {
bg: "badge.bright.pink.bg";
color: "badge.bright.pink.fg";
};
};
size: {
sm: {
textStyle: "xs";
p: "1";
h: "4.5";
minH: "4.5";
};
md: {
textStyle: "sm";
px: "1";
py: "0.5";
minH: "6";
};
lg: {
textStyle: "sm";
px: "2";
py: "1";
minH: "7";
fontWeight: "600";
};
};
}>;
button: import('@chakra-ui/react').RecipeDefinition<{
variant: {
solid: {
bg: "button.solid.bg";
color: "white";
_hover: {
bg: "hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "gray.200";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
_expanded: {
bg: "hover";
};
};
outline: {
borderWidth: "2px";
borderStyle: "solid";
bg: "transparent";
color: "button.outline.fg";
borderColor: "button.outline.fg";
_hover: {
bg: "transparent";
color: "hover";
borderColor: "hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "button.outline.fg";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
};
dropdown: {
borderWidth: "2px";
borderStyle: "solid";
bg: "transparent";
color: "button.dropdown.fg";
borderColor: "button.dropdown.border";
_hover: {
bg: "transparent";
color: "hover";
borderColor: "hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "selected.option.bg";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
_expanded: {
bg: "transparent";
color: "hover";
borderColor: "hover";
};
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
borderColor: "transparent";
_hover: {
bg: "selected.control.bg";
color: "hover";
borderColor: "transparent";
};
_expanded: {
color: "hover";
};
};
};
header: {
bg: "transparent";
color: "button.header.fg";
borderColor: "button.header.border";
borderWidth: "2px";
borderStyle: "solid";
_hover: {
bg: "transparent";
color: "hover";
borderColor: "hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "selected.option.bg";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
_selected: {
bg: "button.header.bg.selected";
color: "button.header.fg.selected";
borderColor: "transparent";
borderWidth: "0px";
_hover: {
bg: "button.header.bg.selected";
color: "hover";
};
_expanded: {
color: "hover";
};
_highlighted: {
bg: "button.header.bg.highlighted";
color: "button.header.fg.highlighted";
borderColor: "transparent";
borderWidth: "0px";
_expanded: {
color: "hover";
};
_hover: {
bg: "button.header.bg.highlighted";
color: "hover";
};
};
};
};
hero: {
bg: "button.hero.bg";
color: "button.hero.fg";
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "button.hero.fg";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
_hover: {
bg: "button.hero.bg.hover";
color: "button.hero.fg.hover";
};
_selected: {
bg: "button.hero.bg.selected";
color: "button.hero.fg.selected";
_hover: {
bg: "button.hero.bg.selected";
color: "hover";
};
_expanded: {
color: "hover";
};
};
};
segmented: {
bg: "transparent";
color: "button.segmented.fg";
borderColor: "selected.control.bg";
borderWidth: "2px";
borderStyle: "solid";
borderRadius: "none";
_hover: {
color: "hover";
};
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
_hover: {
bg: "selected.control.bg";
color: "selected.control.text";
};
'& + *': {
borderLeftWidth: "0";
};
};
_notLast: {
borderRightWidth: "0";
_selected: {
borderRightWidth: "2px";
};
};
_first: {
borderTopLeftRadius: "base";
borderBottomLeftRadius: "base";
};
_last: {
borderTopRightRadius: "base";
borderBottomRightRadius: "base";
};
};
plain: {
bg: "transparent";
color: "inherit";
border: "none";
_hover: {
bg: "transparent";
};
};
subtle: {
bg: "button.subtle.bg";
color: "button.subtle.fg";
_hover: {
bg: "button.subtle.bg";
color: "hover";
};
_disabled: {
bg: "button.subtle.bg";
color: "button.subtle.fg";
};
};
link: {
bg: "transparent";
color: "link.primary";
border: "none";
fontWeight: "400";
px: number;
h: "auto";
_hover: {
bg: "transparent";
color: "link.primary.hover";
};
_disabled: {
color: "text.secondary";
};
};
icon_secondary: {
bg: "transparent";
color: "icon.secondary";
border: "none";
_hover: {
color: "hover";
};
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
_hover: {
bg: "selected.control.bg";
color: "hover";
};
_expanded: {
color: "hover";
};
};
_expanded: {
color: "hover";
};
};
icon_background: {
bg: "button.icon_background.bg";
color: "icon.secondary";
border: "none";
_hover: {
color: "hover";
};
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
_hover: {
bg: "selected.control.bg";
color: "hover";
};
_expanded: {
color: "hover";
};
};
_expanded: {
color: "hover";
};
};
pagination: {
borderWidth: "2px";
borderStyle: "solid";
bg: "transparent";
color: "button.pagination.fg";
borderColor: "button.pagination.border";
_hover: {
bg: "transparent";
color: "hover";
borderColor: "hover";
};
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
borderColor: "transparent";
_hover: {
bg: "selected.control.bg";
color: "selected.control.text";
borderColor: "transparent";
};
};
};
};
size: {
'2xs': {
px: number;
h: number;
minW: number;
textStyle: "xs";
borderRadius: "sm";
gap: number;
_icon: {
boxSize: "auto";
};
};
xs: {
px: number;
h: number;
minW: number;
textStyle: "sm";
borderRadius: "sm";
gap: number;
_icon: {
boxSize: "auto";
};
};
sm: {
px: number;
h: number;
minW: number;
textStyle: "sm";
borderRadius: "base";
gap: number;
_icon: {
boxSize: "auto";
};
};
md: {
px: number;
h: number;
minW: number;
textStyle: "md";
borderRadius: "base";
gap: number;
_icon: {
boxSize: "auto";
};
'& .chakra-spinner': {
'--spinner-size': "20px";
};
};
};
}>;
checkmark: import('@chakra-ui/react').RecipeDefinition<{
size: {
xs: {
boxSize: "3";
borderRadius: "2px";
};
sm: {
boxSize: "4";
borderRadius: "2px";
};
md: {
boxSize: "5";
borderRadius: "sm";
};
};
variant: {
solid: {
borderColor: "checkbox.control.border";
_hover: {
borderColor: "checkbox.control.border.hover";
};
_readOnly: {
borderColor: "checkbox.control.border.readOnly";
_hover: {
borderColor: "checkbox.control.border.readOnly";
};
'&:is([data-state=checked], [data-state=indeterminate])': {
bg: "checkbox.control.border.readOnly";
color: "gray.500";
_hover: {
bg: "checkbox.control.border.readOnly";
};
};
};
'&:is([data-state=checked], [data-state=indeterminate])': {
bg: "selected.option.bg";
color: "white";
borderColor: "selected.option.bg";
_hover: {
bg: "hover";
borderColor: "hover";
};
};
};
};
}>;
closeButton: import('@chakra-ui/react').RecipeDefinition<{
visual: {
plain: {
bg: "transparent";
color: "closeButton.fg";
border: "none";
_hover: {
bg: "transparent";
color: "hover";
};
};
};
size: {
md: {
boxSize: number;
};
};
}>;
input: import('@chakra-ui/react').RecipeDefinition<{
size: {
sm: {
textStyle: "sm";
px: "2";
'--input-height': "sizes.8";
};
md: {
textStyle: "sm";
px: "2";
'--input-height': "sizes.10";
};
lg: {
textStyle: "md";
px: "4";
'--input-height': "60px";
};
};
variant: {
outline: {
bg: "input.bg";
borderWidth: "2px";
borderColor: "input.border.filled";
focusVisibleRing: "none";
_placeholder: {
color: "input.placeholder";
};
_placeholderShown: {
borderColor: "input.border";
overflow: "hidden";
textOverflow: "ellipsis";
whiteSpace: "nowrap";
_invalid: {
borderColor: "input.border.error";
};
};
_hover: {
borderColor: "input.border.hover";
};
_focus: {
borderColor: "input.border.focus";
boxShadow: "size.md";
_hover: {
borderColor: "input.border.focus";
};
};
_readOnly: {
userSelect: "all";
pointerEvents: "none";
bg: "input.bg.readOnly";
borderColor: "input.border.readOnly";
_focus: {
borderColor: "input.border.readOnly";
};
_hover: {
borderColor: "input.border.readOnly";
};
};
_disabled: {
opacity: "control.disabled";
};
_invalid: {
borderColor: "input.border.error";
_placeholder: {
color: "input.placeholder.error";
};
_hover: {
borderColor: "input.border.error";
};
};
};
};
floating: {
true: {};
};
}>;
link: import('@chakra-ui/react').RecipeDefinition<{
variant: {
primary: {
color: "link.primary";
_hover: {
textDecoration: "none";
color: "link.primary.hover";
};
};
secondary: {
color: "link.secondary";
_hover: {
textDecoration: "none";
color: "hover";
};
};
subtle: {
color: "link.subtle";
_hover: {
color: "link.subtle.hover";
textDecorationLine: "underline";
textDecorationColor: "link.subtle.hover";
};
};
underlaid: {
color: "link.primary";
bgColor: "link.underlaid.bg";
px: "8px";
py: "6px";
borderRadius: "base";
textStyle: "sm";
_hover: {
color: "link.primary.hover";
textDecoration: "none";
};
};
menu: {
color: "link.menu";
_hover: {
color: "hover";
textDecoration: "none";
};
};
navigation: {
color: "link.navigation.fg";
bg: "transparent";
_hover: {
color: "link.navigation.fg.hover";
textDecoration: "none";
};
_selected: {
color: "link.navigation.fg.selected";
bg: "link.navigation.bg.selected";
};
_active: {
color: "link.navigation.fg.active";
};
};
plain: {
color: "inherit";
_hover: {
textDecoration: "none";
};
};
};
}>;
radiomark: import('@chakra-ui/react').RecipeDefinition<{
variant: {
solid: {
borderWidth: "2px";
borderColor: "radio.control.border";
_hover: {
borderColor: "radio.control.border.hover";
};
_checked: {
bg: "selected.option.bg";
color: "white";
borderColor: "selected.option.bg";
_hover: {
bg: "hover";
borderColor: "hover";
};
};
_invalid: {
bg: "red.500";
borderColor: "red.500";
};
_readOnly: {
borderColor: "radio.control.border.readOnly";
_hover: {
borderColor: "radio.control.border.readOnly";
};
_checked: {
bg: "radio.control.border.readOnly";
_hover: {
bg: "radio.control.border.readOnly";
};
'& .dot': {
bg: "gray.500";
};
};
};
};
};
size: {
xs: {
boxSize: "3";
};
sm: {
boxSize: "4";
};
md: {
boxSize: "5";
};
};
}>;
skeleton: import('@chakra-ui/react').RecipeDefinition<{
loading: {
reset: {};
};
state: {
loading: {
borderRadius: "base";
boxShadow: "none";
backgroundClip: "padding-box";
cursor: "default";
color: "transparent";
borderWidth: "0px";
pointerEvents: "none";
userSelect: "none";
'& > *': {
visibility: "hidden";
};
};
};
variant: {
pulse: {
background: "bg.emphasized";
animation: "pulse";
animationDuration: "var(--duration, 1.2s)";
};
shine: {
opacity: number;
'--animate-from': "100%";
'--animate-to': "-100%";
'--start-color': "colors.skeleton.bg.start";
'--end-color': "colors.skeleton.bg.end";
position: "relative";
overflow: "hidden";
backgroundColor: "var(--start-color)";
animation: "none";
'&::after': {
content: "\"\"";
position: "absolute";
inset: "0";
left: "0";
width: "100%";
pointerEvents: "none";
willChange: "transform";
transform: "translateX(-100%)";
backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)";
animation: "skeletonShimmer var(--duration, 2s) linear infinite";
};
_motionReduce: {
'&::after': {
animation: "none";
};
};
};
none: {
animation: "none";
};
};
}>;
spinner: import('@chakra-ui/react').RecipeDefinition<{
size: {
inherit: {
'--spinner-size': "1em";
};
xs: {
'--spinner-size': "sizes.3";
};
sm: {
'--spinner-size': "sizes.4";
};
md: {
'--spinner-size': "sizes.5";
};
lg: {
'--spinner-size': "sizes.8";
};
xl: {
'--spinner-size': "sizes.10";
};
};
}>;
separator: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
textarea: import('@chakra-ui/react').RecipeDefinition<{
size: {
'2xl': {
textStyle: "md";
py: "4";
pl: "4";
pr: "5";
scrollPaddingBottom: "4";
};
};
variant: {
outline: {
bg: "input.bg";
borderWidth: "2px";
borderColor: "input.border";
focusVisibleRing: "none";
_hover: {
borderColor: "input.border.hover";
};
_focus: {
borderColor: "input.border.focus";
boxShadow: "size.md";
_hover: {
borderColor: "input.border.focus";
};
};
_readOnly: {
userSelect: "all";
bg: "input.bg.readOnly";
borderColor: "input.border.readOnly";
_focus: {
borderColor: "input.border.readOnly";
};
_hover: {
borderColor: "input.border.readOnly";
};
};
_disabled: {
pointerEvents: "none";
opacity: "control.disabled";
};
_invalid: {
borderColor: "input.border.error";
_hover: {
borderColor: "input.border.error";
};
};
};
};
floating: {
true: {
paddingTop: "8";
_placeholderShown: {
paddingTop: "10";
};
};
};
}>;
};
export declare const slotRecipes: {
accordion: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "itemTrigger" | "itemContent" | "itemBody" | "itemIndicator", {
noAnimation: {
true: {
itemContent: {
_open: {
animationName: "none";
};
_closed: {
animationName: "none";
};
};
itemIndicator: {
transition: "none";
};
};
};
variant: {
outline: {
item: {
borderBottomWidth: "1px";
};
itemIndicator: {
color: "gray.500";
};
};
faq: {
item: {
borderBottomWidth: "1px";
};
itemTrigger: {
textStyle: "heading.md";
};
itemIndicator: {
color: "link.primary";
_groupHover: {
color: "link.primary.hover";
};
};
};
};
size: {
sm: {
root: {
'--accordion-padding-x': "0";
'--accordion-padding-y': "spacing.2";
};
itemTrigger: {
textStyle: "sm";
py: "var(--accordion-padding-y)";
};
itemIndicator: {
boxSize: "5";
};
};
md: {
root: {
'--accordion-padding-x': "0";
'--accordion-padding-y': "spacing.3";
};
itemTrigger: {
textStyle: "md";
py: "var(--accordion-padding-y)";
};
itemIndicator: {
boxSize: "5";
};
};
};
}>;
alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
status: {
info: {};
warning: {};
warning_table: {};
success: {};
error: {};
};
variant: {
subtle: {
root: {
color: "alert.fg";
};
};
};
inline: {
true: {
root: {
alignItems: "flex-start";
};
content: {
display: "inline-flex";
flexDirection: "row";
alignItems: "center";
};
};
false: {
content: {
display: "flex";
flexDirection: "column";
};
};
};
size: {
sm: {
root: {
gap: "2";
px: "2";
py: "2";
textStyle: "xs";
};
indicator: {
boxSize: "5";
my: number;
};
content: {
minH: "5";
};
};
md: {
root: {
gap: "2";
px: "3";
py: "2";
textStyle: "md";
};
indicator: {
boxSize: "5";
my: "2px";
};
};
};
}>;
checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control", {
size: {
md: {
root: {
gap: "2";
};
label: {
textStyle: "md";
};
control: {
boxSize: "5";
borderRadius: "sm";
} | undefined;
};
};
variant: {
solid: {
control: {
borderColor: "checkbox.control.border";
_hover: {
borderColor: "checkbox.control.border.hover";
};
_readOnly: {
borderColor: "checkbox.control.border.readOnly";
_hover: {
borderColor: "checkbox.control.border.readOnly";
};
'&:is([data-state=checked], [data-state=indeterminate])': {
bg: "checkbox.control.border.readOnly";
color: "gray.500";
_hover: {
bg: "checkbox.control.border.readOnly";
};
};
};
'&:is([data-state=checked], [data-state=indeterminate])': {
bg: "selected.option.bg";
color: "white";
borderColor: "selected.option.bg";
_hover: {
bg: "hover";
borderColor: "hover";
};
};
} | undefined;
};
};
}>;
dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "description" | "positioner" | "backdrop", {
placement: {
center: {
positioner: {
alignItems: "center";
};
content: {
'--dialog-base-margin': "auto";
mx: "auto";
};
};
top: {
positioner: {
alignItems: "flex-start";
};
content: {
'--dialog-base-margin': "spacing.16";
mx: "auto";
};
};
bottom: {
positioner: {
alignItems: "flex-end";
};
content: {
'--dialog-base-margin': "spacing.16";
mx: "auto";
};
};
};
scrollBehavior: {
inside: {
positioner: {
overflow: "hidden";
};
content: {
maxH: "calc(100% - 7.5rem)";
};
body: {
overflow: "auto";
};
};
outside: {
positioner: {
overflow: "auto";
pointerEvents: "auto";
};
};
};
size: {
sm: {
content: {
maxW: "400px";
};
};
md: {
content: {
maxW: "728px";
};
};
cover: {
positioner: {
padding: "10";
};
content: {
width: "100%";
height: "100%";
'--dialog-margin': "0";
};
};
full: {
content: {
maxW: "100vw";
minH: "100dvh";
'--dialog-margin': "0";
borderRadius: "0";
};
};
};
motionPreset: {
scale: {
content: {
_open: {
animationName: "scale-in, fade-in";
};
_closed: {
animationName: "scale-out, fade-out";
};
};
};
'slide-in-bottom': {
content: {
_open: {
animationName: "slide-from-bottom, fade-in";
};
_closed: {
animationName: "slide-to-bottom, fade-out";
};
};
};
'slide-in-top': {
content: {
_open: {
animationName: "slide-from-top, fade-in";
};
_closed: {
animationName: "slide-to-top, fade-out";
};
};
};
'slide-in-left': {
content: {
_open: {
animationName: "slide-from-left, fade-in";
};
_closed: {
animationName: "slide-to-left, fade-out";
};
};
};
'slide-in-right': {
content: {
_open: {
animationName: "slide-from-right, fade-in";
};
_closed: {
animationName: "slide-to-right, fade-out";
};
};
};
none: {};
};
}>;
drawer: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "positioner" | "backdrop" | "trigger", {
size: {
md: {
content: {
maxW: "300px";
};
};
};
placement: {
start: {
positioner: {
justifyContent: "flex-start";
};
content: {
_open: {
animationName: {
base: "slide-from-left-full, fade-in";
_rtl: "slide-from-right-full, fade-in";
};
};
_closed: {
animationName: {
base: "slide-to-left-full, fade-out";
_rtl: "slide-to-right-full, fade-out";
};
};
};
};
end: {
positioner: {
justifyContent: "flex-end";
};
content: {
_open: {
animationName: {
base: "slide-from-right-full, fade-in";
_rtl: "slide-from-left-full, fade-in";
};
};
_closed: {
animationName: {
base: "slide-to-right-full, fade-out";
_rtl: "slide-to-right-full, fade-out";
};
};
};
};
top: {
positioner: {
alignItems: "flex-start";
};
content: {
maxW: "100%";
_open: {
animationName: "slide-from-top-full, fade-in";
};
_closed: {
animationName: "slide-to-top-full, fade-out";
};
};
};
bottom: {
positioner: {
alignItems: "flex-end";
};
header: {
px: "5";
pt: "5";
pb: "3";
mb: "-5";
};
body: {
p: "5";
};
footer: {
px: "5";
pt: "3";
mt: "-5";
};
content: {
maxW: "100%";
_open: {
animationName: "slide-from-bottom-full, fade-in";
};
_closed: {
animationName: "slide-to-bottom-full, fade-out";
};
borderTopRadius: "base";
};
};
};
contained: {
true: {
positioner: {
padding: "4";
};
content: {
borderRadius: "l3";
};
};
};
}>;
field: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "requiredIndicator" | "errorText" | "helperText", {
floating: {
true: {
label: {
pos: "absolute";
bg: "bg";
top: "2px";
left: "2px";
color: "input.placeholder";
width: "calc(100% - 4px)";
borderRadius: "base";
pointerEvents: "none";
transformOrigin: "top left";
transitionProperty: "font-size, line-height, padding, background-color";
transitionDuration: "fast";
transitionTimingFunction: "ease";
};
};
};
size: {
sm: {
label: {
fontSize: "sm";
};
};
md: {
label: {
fontSize: "md";
};
};
lg: {
label: {
fontSize: "md";
};
};
'2xl': {
label: {
fontSize: "md";
};
};
};
orientation: {
vertical: {
root: {
flexDirection: "column";
alignItems: "flex-start";
};
};
horizontal: {
root: {
flexDirection: "row";
alignItems: "center";
justifyContent: "space-between";
};
label: {
flex: "0 0 var(--field-label-width, 80px)";
};
};
};
}>;
list: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "indicator", {
variant: {
marker: {
root: {
listStyle: "revert";
};
item: {
_marker: {
color: "inherit";
};
};
};
plain: {
item: {
alignItems: "flex-start";
display: "inline-flex";
};
};
};
align: {
center: {
item: {
alignItems: "center";
};
};
start: {
item: {
alignItems: "flex-start";
};
};
end: {
item: {
alignItems: "flex-end";
};
};
};
}>;
menu: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "item" | "separator" | "indicator" | "itemText" | "itemGroupLabel" | "itemCommand", {
variant: {
subtle: {
item: {
_highlighted: {
bg: "selected.control.bg";
};
};
};
};
size: {
md: {
content: {
minW: "150px";
py: "2";
px: "0";
};
item: {
gap: "2";
textStyle: "md";
py: "2";
px: "4";
};
};
};
}>;
pinInput: import('@chakra-ui/react').SlotRecipeDefinition<"input", {
size: {
md: {
input: {
boxSize: number;
borderRadius: "base";
};
};
};
variant: {
outline: {
input: {
bg: "input.bg";
borderWidth: "2px";
borderColor: "input.border.filled";
focusVisibleRing: "none";
_placeholder: {
color: "input.placeholder";
};
_placeholderShown: {
borderColor: "input.border";
overflow: "hidden";
textOverflow: "ellipsis";
whiteSpace: "nowrap";
_invalid: {
borderColor: "input.border.error";
};
};
_hover: {
borderColor: "input.border.hover";
};
_focus: {
borderColor: "input.border.focus";
boxShadow: "size.md";
_hover: {
borderColor: "input.border.focus";
};
};
_readOnly: {
userSelect: "all";
pointerEvents: "none";
bg: "input.bg.readOnly";
borderColor: "input.border.readOnly";
_focus: {
borderColor: "input.border.readOnly";
};
_hover: {
borderColor: "input.border.readOnly";
};
};
_disabled: {
opacity: "control.disabled";
};
_invalid: {
borderColor: "input.border.error";
_placeholder: {
color: "input.placeholder.error";
};
_hover: {
borderColor: "input.border.error";
};
};
};
};
};
}>;
popover: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "arrow" | "arrowTip", {
size: {
sm: {
content: {
'--popover-padding': "spacing.4";
};
};
};
}>;
progress: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "track" | "root" | "range" | "valueText", {
variant: {
subtle: {
track: {
bgColor: "progress.track";
};
range: {
bgColor: "selected.option.bg";
};
};
};
shape: {
rounded: {
track: {
borderRadius: "base";
};
};
};
striped: {
true: {
range: {
backgroundImage: "linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)";
backgroundSize: "var(--stripe-size) var(--stripe-size)";
'--stripe-size': "1rem";
'--stripe-color': {
_light: "rgba(255, 255, 255, 0.3)";
_dark: "rgba(0, 0, 0, 0.3)";
};
};
};
};
animated: {
true: {
range: {
'--animate-from': "var(--stripe-size)";
animation: "bg-position 1s linear infinite";
};
};
};
size: {
xs: {
track: {
h: "1";
};
};
sm: {
track: {
h: "2";
};
};
md: {
track: {
h: "3";
};
};
lg: {
track: {
h: "4";
};
};
xl: {
track: {
h: "8";
};
};
};
}>;
progressCircle: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "circle" | "root" | "valueText" | "circleTrack" | "circleRange", {
size: {
sm: {
circle: {
'--size': "20px";
'--thickness': "2px";
};
valueText: {
textStyle: "xs";
};
};
md: {
circle: {
'--size': "32px";
'--thickness': "3px";
};
valueText: {
textStyle: "xs";
};
};
lg: {
circle: {
'--size': "80px";
'--thickness': "8px";
};
valueText: {
textStyle: "sm";
};
};
};
}>;
radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "itemText" | "itemControl", {
variant: {
solid: {
itemControl: {
borderWidth: "2px";
borderColor: "radio.control.border";
_hover: {
borderColor: "radio.control.border.hover";
};
_checked: {