adonisjs-ui
Version:
[](https://npmjs.com/package/adonisjs-ui) [](https://npm.chart.dev/adonisjs-ui)
52 lines (51 loc) • 1.65 kB
JavaScript
import { tv } from "tailwind-variants";
export const input = tv({
slots: {
wrapper: "",
input: "w-full border rounded-xl block disabled:opacity-50 appearance-none ps-4 pe-4 text-white placeholder-neutral-500 transition-colors",
},
variants: {
variant: {
outline: {
input: [
"bg-neutral-900 border-neutral-800",
"hover:border-neutral-700",
"focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30 focus:outline-none",
"disabled:bg-neutral-900/50",
],
},
filled: {
input: [
"bg-neutral-800/60 border-neutral-700/40",
"hover:border-neutral-600/60",
"focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30 focus:outline-none",
"disabled:bg-neutral-800/30",
],
},
},
size: {
xs: {
input: "text-xs py-1.5 h-6 leading-[1.125rem]",
},
sm: {
input: "text-sm py-1.5 h-8 leading-[1.125rem]",
},
md: {
input: "text-base sm:text-sm py-2.5 h-10 leading-[1.375rem]",
},
},
invalid: {
true: {
input: "border-red-500/50 focus:border-red-500/50 focus:ring-red-500/30",
},
false: {
input: "",
},
},
},
defaultVariants: {
invalid: false,
variant: "outline",
size: "md",
},
});