@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
101 lines (100 loc) • 2.49 kB
TypeScript
export declare const nativeSelectSlotRecipe: import("../..").SlotRecipeDefinition<"root" | "indicator" | "field", {
variant: {
outline: {
field: {
bg: "transparent";
borderWidth: "1px";
borderColor: "border";
_expanded: {
borderColor: "border.emphasized";
};
} | undefined;
};
subtle: {
field: {
borderWidth: "1px";
borderColor: "transparent";
bg: "bg.muted";
} | undefined;
};
plain: {
field: {
bg: "transparent";
color: "fg";
focusRingWidth: "2px";
};
};
};
size: {
xs: {
root: {
"--select-field-height": "sizes.8";
};
field: {
textStyle: "xs";
ps: "2";
pe: "6";
};
indicator: {
textStyle: "sm";
insetEnd: "1.5";
};
};
sm: {
root: {
"--select-field-height": "sizes.9";
};
field: {
textStyle: "sm";
ps: "2.5";
pe: "8";
};
indicator: {
textStyle: "md";
insetEnd: "2";
};
};
md: {
root: {
"--select-field-height": "sizes.10";
};
field: {
textStyle: "sm";
ps: "3";
pe: "8";
};
indicator: {
textStyle: "lg";
insetEnd: "2";
};
};
lg: {
root: {
"--select-field-height": "sizes.11";
};
field: {
textStyle: "md";
ps: "4";
pe: "8";
};
indicator: {
textStyle: "xl";
insetEnd: "3";
};
};
xl: {
root: {
"--select-field-height": "sizes.12";
};
field: {
textStyle: "md";
ps: "4.5";
pe: "10";
};
indicator: {
textStyle: "xl";
insetEnd: "3";
};
};
};
}>;