@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
1,541 lines • 63.2 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";
};
purple_alt: {
bg: "badge.purple_alt.bg";
color: "badge.purple_alt.fg";
};
blue_alt: {
bg: "badge.blue_alt.bg";
color: "badge.blue_alt.fg";
};
};
size: {
md: {
textStyle: "sm";
px: "1";
py: "0.5";
minH: "6";
};
};
}>;
button: import('@chakra-ui/react').RecipeDefinition<{
variant: {
solid: {
bg: "blue.600";
color: "white";
_hover: {
bg: "link.primary.hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "gray.200";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
_expanded: {
bg: "link.primary.hover";
};
};
outline: {
borderWidth: "2px";
borderStyle: "solid";
bg: "transparent";
color: "button.outline.fg";
borderColor: "button.outline.fg";
_hover: {
bg: "transparent";
color: "link.primary.hover";
borderColor: "link.primary.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: "link.primary.hover";
borderColor: "link.primary.hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "blue.500";
borderBottomColor: "spinner.track";
borderInlineStartColor: "spinner.track";
};
};
_expanded: {
bg: "transparent";
color: "link.primary.hover";
borderColor: "link.primary.hover";
};
_selected: {
bg: "button.dropdown.bg.selected";
color: "button.dropdown.fg.selected";
borderColor: "transparent";
_hover: {
bg: "button.dropdown.bg.selected";
color: "link.primary.hover";
borderColor: "transparent";
};
_expanded: {
color: "link.primary.hover";
};
};
};
header: {
bg: "transparent";
color: "button.header.fg";
borderColor: "button.header.border";
borderWidth: "2px";
borderStyle: "solid";
_hover: {
bg: "transparent";
color: "link.primary.hover";
borderColor: "link.primary.hover";
};
_loading: {
opacity: number;
'& .chakra-spinner': {
borderColor: "blue.500";
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: "link.primary.hover";
};
_expanded: {
color: "link.primary.hover";
};
_highlighted: {
bg: "button.header.bg.highlighted";
color: "button.header.fg.highlighted";
borderColor: "transparent";
borderWidth: "0px";
_expanded: {
color: "link.primary.hover";
};
_hover: {
bg: "button.header.bg.highlighted";
color: "link.primary.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: "link.primary.hover";
};
_expanded: {
color: "link.primary.hover";
};
};
};
segmented: {
bg: "transparent";
color: "button.segmented.fg";
borderColor: "button.segmented.border";
borderWidth: "2px";
borderStyle: "solid";
borderRadius: "none";
_hover: {
color: "link.primary.hover";
};
_selected: {
bg: "button.segmented.border";
color: "button.segmented.fg.selected";
_hover: {
bg: "button.segmented.border";
color: "button.segmented.fg.selected";
};
};
_notFirst: {
borderLeftWidth: "0";
};
_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: "link.primary.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: "button.icon_secondary.fg";
border: "none";
_hover: {
color: "link.primary.hover";
};
_selected: {
bg: "button.icon_secondary.bg.selected";
color: "button.icon_secondary.fg.selected";
_hover: {
bg: "button.icon_secondary.bg.selected";
color: "link.primary.hover";
};
_expanded: {
color: "link.primary.hover";
};
};
_expanded: {
color: "link.primary.hover";
};
};
};
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: "blue.500";
color: "white";
borderColor: "blue.500";
_hover: {
bg: "blue.400";
borderColor: "blue.400";
};
};
};
};
}>;
closeButton: import('@chakra-ui/react').RecipeDefinition<{
visual: {
plain: {
bg: "transparent";
color: "closeButton.fg";
border: "none";
_hover: {
bg: "transparent";
color: "link.primary.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";
_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: "link.primary.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: "link.primary.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: {
_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: "blue.500";
color: "white";
borderColor: "blue.500";
_hover: {
bg: "blue.400";
borderColor: "blue.400";
};
};
_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";
'&::before, &::after, *': {
visibility: "hidden";
};
};
};
variant: {
pulse: {
background: "bg.emphasized";
animation: "pulse";
animationDuration: "var(--duration, 1.2s)";
};
shine: {
'--animate-from': "100%";
'--animate-to': "-100%";
'--start-color': "colors.skeleton.bg.start";
'--end-color': "colors.skeleton.bg.end";
backgroundImage: "linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)";
backgroundColor: "transparent";
backgroundSize: "200% 100%";
animation: "bg-position var(--duration, 2s) linear infinite";
};
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";
};
};
}>;
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: {
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: "blue.500";
color: "white";
borderColor: "blue.500";
_hover: {
bg: "blue.400";
borderColor: "blue.400";
};
};
} | 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";
};
content: {
maxW: "100%";
_open: {
animationName: "slide-from-bottom-full, fade-in";
};
_closed: {
animationName: "slide-to-bottom-full, fade-out";
};
};
};
};
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: "menu.item.bg.highlighted";
};
};
};
};
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";
_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";
};
};
};
}>;
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: {
bg: "blue.500";
color: "white";
borderColor: "blue.500";
_hover: {
bg: "blue.400";
borderColor: "blue.400";
};
};
_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";
};
};
};
} | undefined;
};
};
size: {
md: {
item: {
textStyle: "md";
gap: "2";
};
itemControl: {
boxSize: "5";
} | undefined;
};
};
orientation: {
vertical: {
root: {
flexDirection: "column";
alignItems: "flex-start";
rowGap: "12px";
};
};
horizontal: {
root: {
flexDirection: "row";
alignItems: "center";
columnGap: "32px";
};
};
};
}>;
ratingGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "itemIndicator" | "control", {
size: {
md: {
item: {
boxSize: number;
};
root: {
textStyle: "md";
};
};
};
}>;
select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "indicator" | "control" | "trigger" | "valueText" | "itemText" | "itemGroupLabel" | "indicatorGroup" | "itemGroup", {
variant: {
outline: {
trigger: {
borderWidth: "2px";
bg: "input.bg";
color: "select.trigger.outline.fg";
borderColor: "input.border.filled";
_expanded: {
color: "link.primary.hover";
borderColor: "link.primary.hover";
_hover: {
color: "link.primary.hover";
borderColor: "link.primary.hover";
};
};
_hover: {
color: "select.trigger.outline.fg";
borderColor: "input.border.hover";
};
_focusVisible: {
borderColor: "input.border.focus";
};
_readOnly: {
userSelect: "all";
pointerEvents: "none";
cursor: "default";
bg: "input.bg.readOnly";
borderColor: "input.border.readOnly";
_focus: {
borderColor: "input.border.readOnly";
};
_hover: {
borderColor: "input.border.readOnly";
};
};
_invalid: {
borderColor: "input.border.error";
_hover: {
borderColor: "input.border.error";
};
_expanded: {
color: "link.primary.hover";
borderColor: "link.primary.hover";
_hover: {
color: "link.primary.hover";
borderColor: "link.primary.hover";
};
};
};
_placeholderShown: {
color: "select.placeholder.fg";
borderColor: "input.border";
_hover: {
color: "select.placeholder.fg";
};
_invalid: {
color: "select.placeholder.fg.error";
_hover: {
color: "select.placeholder.fg.error";
};
};
};
};
indicatorGroup: {
color: "select.indicator.fg";
_peerDisabled: {
opacity: "control.disabled";
};
};
};
plain: {
trigger: {};
indicatorGroup: {};
};
};
size: {
sm: {
root: {
'--select-trigger-height': "sizes.8";
'--select-trigger-padding-right': "spacing.8";
'--select-trigger-padding-left': "spacing.2";
};
content: {
px: "0";
py: "4";
textStyle: "md";
};
trigger: {
textStyle: "sm";
gap: "1";
};
indicatorGroup: {
pr: "2";
pl: "1";
};
item: {
py: "5px";
px: "4";
};
};
lg: {
root: {
'--select-trigger-height': "60px";
'--select-trigger-padding-right': "44px";
'--select-trigger-padding-left': "spacing.4";
};
content: {
px: "0";
py: "4";
textStyle: "md";
};
trigger: {
py: "2";
};
item: {
py: "5px";
px: "4";
};
indicatorGroup: {
pr: "4";
pl: "2";
};
};
};
}>;
stat: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "