@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
374 lines (371 loc) • 9.45 kB
TypeScript
import * as _nex_ui_system from '@nex-ui/system';
import { RecipeVariants } from '@nex-ui/system';
declare const inputRecipe: _nex_ui_system.SlotRecipeRuntimeFn<{
root: {
boxSizing: "border-box";
transition: "colors";
display: "inline-flex";
alignItems: "center";
gap: "1";
cursor: "text";
position: "relative";
px: "3";
};
input: {
outline: "none";
border: "none";
fs: "inherit";
bg: "transparent";
color: "inherit";
flex: number;
cursor: "inherit";
w: "full";
p: number;
'::placeholder': {
color: "inherit";
};
'::WebkitSearchCancelButton': {
WebkitAppearance: string;
appearance: string;
};
};
clearButton: {
w: "auto";
h: "auto";
fs: "inherit";
color: "gray.400";
_hover: {
color: string;
};
};
label: {
position: "absolute";
transformOrigin: "top left";
pointerEvents: "none";
transition: "colors";
};
prefix: {
display: "flex";
alignItems: "center";
pointerEvents: "none";
};
suffix: {
display: "flex";
alignItems: "center";
pointerEvents: "none";
};
}, {
size: {
sm: {
root: {
fs: "md";
h: "8";
};
input: {
py: "2";
};
};
md: {
root: {
fs: "lg";
h: "10";
};
input: {
py: "2.5";
};
};
lg: {
root: {
fs: "lg";
h: "12";
};
input: {
py: "3";
};
};
};
fullWidth: {
readonly true: {
root: {
readonly w: "100%";
};
};
};
radius: {
readonly sm: {
root: {
readonly borderRadius: "md";
};
};
readonly md: {
root: {
readonly borderRadius: "lg";
};
};
readonly lg: {
root: {
readonly borderRadius: "xl";
};
};
readonly full: {
root: {
readonly borderRadius: "full";
};
};
readonly none: {
root: {
readonly borderRadius: "none";
};
};
};
color: {
readonly blue: {
input: {
readonly colorPalette: "blue";
};
label: {
readonly colorPalette: "blue";
};
root: {
readonly colorPalette: "blue";
};
clearButton: {
readonly colorPalette: "blue";
};
};
readonly gray: {
input: {
readonly colorPalette: "gray";
};
label: {
readonly colorPalette: "gray";
};
root: {
readonly colorPalette: "gray";
};
clearButton: {
readonly colorPalette: "gray";
};
};
readonly pink: {
input: {
readonly colorPalette: "pink";
};
label: {
readonly colorPalette: "pink";
};
root: {
readonly colorPalette: "pink";
};
clearButton: {
readonly colorPalette: "pink";
};
};
readonly purple: {
input: {
readonly colorPalette: "purple";
};
label: {
readonly colorPalette: "purple";
};
root: {
readonly colorPalette: "purple";
};
clearButton: {
readonly colorPalette: "purple";
};
};
readonly cyan: {
input: {
readonly colorPalette: "cyan";
};
label: {
readonly colorPalette: "cyan";
};
root: {
readonly colorPalette: "cyan";
};
clearButton: {
readonly colorPalette: "cyan";
};
};
readonly orange: {
input: {
readonly colorPalette: "orange";
};
label: {
readonly colorPalette: "orange";
};
root: {
readonly colorPalette: "orange";
};
clearButton: {
readonly colorPalette: "orange";
};
};
readonly yellow: {
input: {
readonly colorPalette: "yellow";
};
label: {
readonly colorPalette: "yellow";
};
root: {
readonly colorPalette: "yellow";
};
clearButton: {
readonly colorPalette: "yellow";
};
};
readonly green: {
input: {
readonly colorPalette: "green";
};
label: {
readonly colorPalette: "green";
};
root: {
readonly colorPalette: "green";
};
clearButton: {
readonly colorPalette: "green";
};
};
readonly red: {
input: {
readonly colorPalette: "red";
};
label: {
readonly colorPalette: "red";
};
root: {
readonly colorPalette: "red";
};
clearButton: {
readonly colorPalette: "red";
};
};
};
variant: {
outlined: {
root: {
border: "md";
borderColor: "gray.highlight";
_hover: {
borderColor: string;
};
_focusWithin: {
borderColor: string;
};
};
};
filled: {
root: {
bg: "colorPalette.muted";
_hover: {
bg: string;
};
_focusWithin: {
bg: string;
};
_focusVisible: {
outline: string;
};
};
label: {
color: {
_DEFAULT: "colorPalette.500";
_dark: "colorPalette.400";
};
};
input: {
color: {
_DEFAULT: "colorPalette.500";
_dark: "colorPalette.400";
};
transition: "colors";
};
};
underlined: {
root: {
px: "1.5";
'::before': {
content: "\"\"";
position: "absolute";
insetBlockEnd: number;
insetInlineStart: number;
w: "100%";
h: "2px";
bg: "gray.highlight";
};
'::after': {
content: "\"\"";
position: "absolute";
insetBlockEnd: number;
insetInlineStart: "50%";
transform: "translateX(-50%)";
width: number;
h: "2px";
bg: "colorPalette.primary";
transition: "width 0.2s ease";
};
_focusWithin: {
'::after': {
width: string;
};
};
};
};
};
disabled: {
true: {
root: {
pointerEvents: "none";
opacity: number;
};
};
};
invalid: {
true: {};
};
labelPlacement: {
'float-outside': {
label: {
"&:has(~ *:is(:focus-within, [data-focus-within=true]))": {
insetInlineStart: string;
insetBlockStart: string;
};
};
};
outside: {
label: {
insetInlineStart: "0";
insetBlockStart: "-1em";
transform: "translateY(-50%)";
};
};
'float-inside': {
label: {
"&:has(~ *:is(:focus-within, [data-focus-within=true]))": {
transform: string;
};
};
input: {
pb: number;
};
};
inside: {
label: {
insetBlockStart: "50%";
transform: "translateY(-90%) scale(0.8)";
};
input: {
pb: number;
};
};
};
}>;
type InputRecipe = typeof inputRecipe;
type InputVariants = RecipeVariants<InputRecipe>;
export { inputRecipe };
export type { InputRecipe, InputVariants };