@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
127 lines (126 loc) • 4.1 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "indicator" | "control" | "positioner" | "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: "hover";
borderColor: "hover";
_hover: {
color: "hover";
borderColor: "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: "hover";
borderColor: "hover";
_hover: {
color: "hover";
borderColor: "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";
};
};
};
}>;