@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
148 lines (147 loc) • 4.24 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "indicator" | "trigger", {
fitted: {
true: {
list: {
display: "flex";
};
trigger: {
flex: number;
textAlign: "center";
justifyContent: "center";
};
};
};
justify: {
start: {
list: {
justifyContent: "flex-start";
};
};
center: {
list: {
justifyContent: "center";
};
};
end: {
list: {
justifyContent: "flex-end";
};
};
};
size: {
sm: {
root: {
'--tabs-height': "sizes.8";
'--tabs-content-padding': "spacing.6";
};
trigger: {
py: "1";
px: "3";
textStyle: "sm";
};
};
md: {
root: {
'--tabs-height': "sizes.10";
'--tabs-content-padding': "spacing.6";
};
trigger: {
py: "2";
px: "4";
textStyle: "md";
};
};
free: {};
};
variant: {
solid: {
trigger: {
fontWeight: "600";
gap: "1";
borderRadius: "base";
color: "tabs.solid.fg";
bg: "transparent";
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
_hover: {
color: "selected.control.text";
};
};
_hover: {
color: "hover";
};
};
};
secondary: {
list: {
border: "none";
columnGap: "2";
_horizontal: {
_before: {
display: "none";
};
};
};
trigger: {
fontWeight: "500";
color: "tabs.secondary.fg";
bg: "transparent";
borderWidth: "2px";
borderStyle: "solid";
borderColor: "tabs.secondary.border";
borderRadius: "base";
_selected: {
bg: "selected.control.bg";
color: "selected.control.text";
borderColor: "transparent";
_hover: {
borderColor: "transparent";
};
};
_hover: {
color: "hover";
borderColor: "hover";
};
};
};
segmented: {
trigger: {
color: "tabs.segmented.fg";
bg: "transparent";
borderWidth: "2px";
borderStyle: "solid";
borderColor: "selected.control.bg";
_hover: {
color: "hover";
};
_selected: {
color: "selected.control.text";
bg: "selected.control.bg";
borderColor: "selected.control.bg";
_hover: {
color: "selected.control.text";
};
'& + *': {
borderLeftWidth: "0";
};
};
_notLast: {
borderRightWidth: "0";
_selected: {
borderRightWidth: "2px";
};
};
_first: {
borderTopLeftRadius: "base";
borderBottomLeftRadius: "base";
};
_last: {
borderTopRightRadius: "base";
borderBottomRightRadius: "base";
};
};
};
unstyled: {};
};
}>;