@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
358 lines (355 loc) • 9.33 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: {
fs: "inherit";
color: "inherit";
cursor: "inherit";
flex: number;
w: "full";
'::placeholder': {
color: "inherit";
};
};
clearButton: {
display: "inline-flex";
alignItems: "center";
justifyContent: "center";
w: "auto";
h: "auto";
fs: "inherit";
color: "gray.400";
_hover: {
color: string;
};
};
label: {
position: "absolute";
transformOrigin: "top left";
transition: "colors";
pointerEvents: "none";
transitionProperty: "inset, color, transform";
transitionDuration: "0.2s";
};
prefix: {
display: "flex";
alignItems: "center";
pointerEvents: "none";
};
suffix: {
display: "flex";
alignItems: "center";
pointerEvents: "none";
};
}, {
size: {
sm: {
root: {
fs: "md";
h: "8";
};
};
md: {
root: {
fs: "lg";
h: "10";
};
};
lg: {
root: {
fs: "lg";
h: "12";
};
};
};
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: {
label: {
readonly colorPalette: "blue";
};
root: {
readonly colorPalette: "blue";
};
clearButton: {
readonly colorPalette: "blue";
};
};
readonly gray: {
label: {
readonly colorPalette: "gray";
};
root: {
readonly colorPalette: "gray";
};
clearButton: {
readonly colorPalette: "gray";
};
};
readonly pink: {
label: {
readonly colorPalette: "pink";
};
root: {
readonly colorPalette: "pink";
};
clearButton: {
readonly colorPalette: "pink";
};
};
readonly purple: {
label: {
readonly colorPalette: "purple";
};
root: {
readonly colorPalette: "purple";
};
clearButton: {
readonly colorPalette: "purple";
};
};
readonly cyan: {
label: {
readonly colorPalette: "cyan";
};
root: {
readonly colorPalette: "cyan";
};
clearButton: {
readonly colorPalette: "cyan";
};
};
readonly orange: {
label: {
readonly colorPalette: "orange";
};
root: {
readonly colorPalette: "orange";
};
clearButton: {
readonly colorPalette: "orange";
};
};
readonly yellow: {
label: {
readonly colorPalette: "yellow";
};
root: {
readonly colorPalette: "yellow";
};
clearButton: {
readonly colorPalette: "yellow";
};
};
readonly green: {
label: {
readonly colorPalette: "green";
};
root: {
readonly colorPalette: "green";
};
clearButton: {
readonly colorPalette: "green";
};
};
readonly 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;
};
};
label: {
"&:has(~ *:is(:focus-within, [data-focus-within=true]))": {
color: string;
};
};
};
faded: {
root: {
bg: "colorPalette.100";
_hover: {
bg: string;
};
_focusWithin: {
bg: string;
};
_dark: {
bg: string;
_hover: {
bg: string;
};
_focusWithin: {
bg: string;
};
};
'&:has(> [data-focus-visible=true]:not(:disabled, [data-disabled=true]))': {
outline: string;
};
color: {
_DEFAULT: "colorPalette.500";
_dark: "colorPalette.400";
};
};
clearButton: {
color: "colorPalette.500";
_hover: {
color: string;
};
_dark: {
color: string;
_hover: {
color: string;
};
};
};
};
underlined: {
root: {
px: "1.5";
'::before': {
content: "\"\"";
position: "absolute";
insetBlockEnd: number;
insetInlineStart: number;
w: "100%";
h: "2px";
bg: "gray.highlight";
transition: "colors";
};
'::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;
};
};
_hover: {
'::before': {
bg: string;
};
};
};
label: {
"&:has(~ *:is(:focus-within, [data-focus-within=true]))": {
color: string;
};
};
};
};
disabled: {
readonly true: {
root: {
readonly opacity: 0.6;
readonly pointerEvents: "none";
};
};
};
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%)";
pointerEvents: "auto";
};
};
'float-inside': {
label: {
"&:has(~ *:is(:focus-within, [data-focus-within=true]))": {
transform: string;
};
};
};
inside: {
label: {
insetBlockStart: "50%";
transform: "translateY(-90%) scale(0.8)";
};
};
};
}>;
type InputRecipe = typeof inputRecipe;
type InputVariants = RecipeVariants<InputRecipe>;
export { inputRecipe };
export type { InputRecipe, InputVariants };