@vela-ui/react
Version:
Vela UI React components
76 lines (73 loc) • 2.45 kB
JavaScript
import {
focusRing
} from "./chunk-2FWUIDJB.mjs";
// src/components/input.tsx
import { Input as AriaInput, composeRenderProps } from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx, jsxs } from "react/jsx-runtime";
var inputVariants = tv({
extend: focusRing,
base: "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
variants: {
size: {
xs: "h-8 px-2 text-xs",
sm: "h-9 px-2.5 text-sm",
md: "h-10 px-3 text-sm",
lg: "h-11 px-4 text-base",
xl: "h-12 px-4.5 text-base"
},
hasStartContent: {
true: "pl-10"
},
hasEndContent: {
true: "pr-10"
},
isFocused: focusRing.variants.isFocusVisible
},
defaultVariants: {
size: "md"
}
});
function Input({ className, size, startContent, endContent, ...props }) {
if (startContent || endContent) {
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
startContent && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground pointer-events-none absolute top-0 bottom-0 left-0 flex items-center px-3", children: startContent }),
/* @__PURE__ */ jsx(
AriaInput,
{
"data-slot": "input",
className: composeRenderProps(
className,
(className2, renderProps) => inputVariants({
...renderProps,
size,
hasStartContent: !!startContent,
hasEndContent: !!endContent,
className: className2
})
),
...props
}
),
endContent && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground pointer-events-none absolute top-0 right-0 bottom-0 flex items-center px-3", children: endContent })
] });
}
return /* @__PURE__ */ jsx(
AriaInput,
{
"data-slot": "input",
className: composeRenderProps(
className,
(className2, renderProps) => inputVariants({
...renderProps,
size,
className: className2
})
),
...props
}
);
}
export {
Input
};