adonisjs-ui
Version:
[](https://npmjs.com/package/adonisjs-ui) [](https://npm.chart.dev/adonisjs-ui)
67 lines (66 loc) • 2.12 kB
JavaScript
import { tv } from "tailwind-variants";
export const input = tv({
slots: {
wrapper: "",
input: "w-full border rounded-lg block disabled:shadow-none dark:shadow-none appearance-none ps-3 pe-3",
},
variants: {
variant: {
outline: {
input: [
"bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]",
"text-zinc-700 disabled:text-zinc-500 placeholder-zinc-400 disabled:placeholder-zinc-400/70 dark:text-zinc-300 dark:disabled:text-zinc-400 dark:placeholder-zinc-400 dark:disabled:placeholder-zinc-500",
],
},
filled: {
input: [
"bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%]",
"text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40",
],
},
},
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 h-10 leading-[1.375rem]",
},
},
invalid: {
true: {
input: "",
},
false: {
input: "",
},
},
},
compoundSlots: [
{
invalid: true,
slots: ["input"],
class: "border-red-500",
},
{
invalid: false,
variant: "filled",
slots: ["input"],
class: "border-0",
},
{
invalid: false,
variant: "outline",
slots: ["input"],
class: "here shadow-xs border-zinc-200 border-b-zinc-300/80 disabled:border-b-zinc-200 dark:border-white/10 dark:disabled:border-white/5",
},
],
defaultVariants: {
invalid: false,
variant: "outline",
size: "md",
},
});