@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
72 lines (71 loc) • 1.93 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
variant: {
primary: {
control: {
borderRadius: "full";
bg: "switch.primary.bg";
focusVisibleRing: "outside";
_checked: {
bg: "selected.option.bg";
_hover: {
bg: "hover";
};
};
};
thumb: {
bg: "white";
width: "var(--switch-height)";
height: "var(--switch-height)";
scale: "0.8";
boxShadow: "sm";
_checked: {
bg: "white";
};
};
};
};
direction: {
rtl: {
root: {
flexDirection: "row-reverse";
};
};
ltr: {
root: {
flexDirection: "row";
};
};
};
size: {
sm: {
root: {
'--switch-width': "26px";
'--switch-height': "sizes.4";
'--switch-indicator-font-size': "fontSizes.sm";
};
label: {
textStyle: "sm";
};
};
md: {
root: {
'--switch-width': "34px";
'--switch-height': "sizes.5";
'--switch-indicator-font-size': "fontSizes.md";
};
label: {
textStyle: "sm";
};
};
lg: {
root: {
'--switch-width': "50px";
'--switch-height': "sizes.7";
'--switch-indicator-font-size': "fontSizes.md";
};
label: {
textStyle: "md";
};
};
};
}>;