@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
129 lines (128 loc) • 4.11 kB
TypeScript
export declare const comboboxSlotRecipe: import("../..").SlotRecipeDefinition<"root" | "item" | "itemIndicator" | "positioner" | "content" | "list" | "control" | "label" | "trigger" | "input" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "indicatorGroup" | "empty", {
variant: {
outline: {
input: {
bg: "transparent";
borderWidth: "1px";
borderColor: "border";
focusVisibleRing: "inside";
};
};
subtle: {
input: {
borderWidth: "1px";
borderColor: "transparent";
bg: "bg.muted";
focusVisibleRing: "inside";
};
};
flushed: {
input: {
bg: "transparent";
borderBottomWidth: "1px";
borderBottomColor: "border";
borderRadius: "0";
px: "0";
_focusVisible: {
borderColor: "var(--focus-color)";
boxShadow: "0px 1px 0px 0px var(--focus-color)";
};
};
indicatorGroup: {
px: "0";
};
};
};
size: {
xs: {
root: {
"--combobox-input-height": "sizes.8";
"--combobox-input-padding-x": "spacing.2";
"--combobox-indicator-size": "sizes.3.5";
};
input: {
textStyle: "xs";
};
content: {
"--combobox-item-padding-x": "spacing.1.5";
"--combobox-item-padding-y": "spacing.1";
"--combobox-indicator-size": "sizes.3.5";
p: "1";
textStyle: "xs";
};
trigger: {
textStyle: "xs";
gap: "1";
};
};
sm: {
root: {
"--combobox-input-height": "sizes.9";
"--combobox-input-padding-x": "spacing.2.5";
"--combobox-indicator-size": "sizes.4";
};
input: {
textStyle: "sm";
};
content: {
"--combobox-item-padding-x": "spacing.2";
"--combobox-item-padding-y": "spacing.1.5";
"--combobox-indicator-size": "sizes.4";
p: "1";
textStyle: "sm";
};
trigger: {
textStyle: "sm";
gap: "1";
};
};
md: {
root: {
"--combobox-input-height": "sizes.10";
"--combobox-input-padding-x": "spacing.3";
"--combobox-indicator-size": "sizes.4";
};
input: {
textStyle: "sm";
};
content: {
"--combobox-item-padding-x": "spacing.2";
"--combobox-item-padding-y": "spacing.1.5";
"--combobox-indicator-size": "sizes.4";
p: "1";
textStyle: "sm";
};
itemIndicator: {
display: "flex";
alignItems: "center";
justifyContent: "center";
};
trigger: {
textStyle: "sm";
gap: "2";
};
};
lg: {
root: {
"--combobox-input-height": "sizes.12";
"--combobox-input-padding-x": "spacing.4";
"--combobox-indicator-size": "sizes.5";
};
input: {
textStyle: "md";
};
content: {
"--combobox-item-padding-y": "spacing.2";
"--combobox-item-padding-x": "spacing.3";
"--combobox-indicator-size": "sizes.5";
p: "1.5";
textStyle: "md";
};
trigger: {
textStyle: "md";
py: "3";
gap: "2";
};
};
};
}>;