@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
330 lines (329 loc) • 10.1 kB
TypeScript
export declare const pinInputSlotRecipe: import("../..").SlotRecipeDefinition<"root" | "control" | "label" | "input", {
size: {
sm: {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
md: {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
lg: {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
xl: {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
"2xl": {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
xs: {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
"2xs": {
input: {
px: "1";
textStyle: "xs";
"--input-height": "sizes.7";
} | {
px: "1";
textStyle: "xs";
"--input-height": "sizes.8";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.9";
} | {
px: "1";
textStyle: "sm";
"--input-height": "sizes.10";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.11";
} | {
px: "1";
textStyle: "md";
"--input-height": "sizes.12";
} | {
px: "1";
textStyle: "lg";
"--input-height": "sizes.16";
};
};
};
variant: {
outline: {
input: {
bg: "transparent";
borderWidth: "1px";
borderColor: "border";
focusVisibleRing: "inside";
focusRingColor: "var(--focus-color)";
} | {
borderWidth: "1px";
borderColor: "transparent";
bg: "bg.muted";
focusVisibleRing: "inside";
focusRingColor: "var(--focus-color)";
} | {
bg: "transparent";
borderBottomWidth: "1px";
borderBottomColor: "border";
borderRadius: "0";
px: "0";
_focusVisible: {
borderColor: "var(--focus-color)";
boxShadow: "0px 1px 0px 0px var(--focus-color)";
_invalid: {
borderColor: "var(--error-color)";
boxShadow: "0px 1px 0px 0px var(--error-color)";
};
};
};
};
subtle: {
input: {
bg: "transparent";
borderWidth: "1px";
borderColor: "border";
focusVisibleRing: "inside";
focusRingColor: "var(--focus-color)";
} | {
borderWidth: "1px";
borderColor: "transparent";
bg: "bg.muted";
focusVisibleRing: "inside";
focusRingColor: "var(--focus-color)";
} | {
bg: "transparent";
borderBottomWidth: "1px";
borderBottomColor: "border";
borderRadius: "0";
px: "0";
_focusVisible: {
borderColor: "var(--focus-color)";
boxShadow: "0px 1px 0px 0px var(--focus-color)";
_invalid: {
borderColor: "var(--error-color)";
boxShadow: "0px 1px 0px 0px var(--error-color)";
};
};
};
};
flushed: {
input: {
bg: "transparent";
borderWidth: "1px";
borderColor: "border";
focusVisibleRing: "inside";
focusRingColor: "var(--focus-color)";
} | {
borderWidth: "1px";
borderColor: "transparent";
bg: "bg.muted";
focusVisibleRing: "inside";
focusRingColor: "var(--focus-color)";
} | {
bg: "transparent";
borderBottomWidth: "1px";
borderBottomColor: "border";
borderRadius: "0";
px: "0";
_focusVisible: {
borderColor: "var(--focus-color)";
boxShadow: "0px 1px 0px 0px var(--focus-color)";
_invalid: {
borderColor: "var(--error-color)";
boxShadow: "0px 1px 0px 0px var(--error-color)";
};
};
};
};
};
attached: {
true: {
control: {
gap: "0";
spaceX: "-1px";
};
input: {
_notFirst: {
borderStartRadius: "0";
};
_notLast: {
borderEndRadius: "0";
};
_focusVisible: {
zIndex: "1";
};
};
};
};
}>;