UNPKG

@vela-ui/react

Version:

Vela UI React components

76 lines (73 loc) 2.45 kB
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 };