32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const inputVariants = cva(
|
|
[
|
|
"flex w-full min-w-0 rounded-[var(--ui-input-radius)] border bg-[var(--ui-input-bg)]",
|
|
"text-[var(--ui-input-fg)] shadow-[var(--ui-input-shadow)] outline-none",
|
|
"[border-width:var(--ui-input-border-width)] border-[var(--ui-input-border)] backdrop-blur-[var(--ui-input-backdrop-blur)]",
|
|
"placeholder:text-[var(--color-muted-foreground)]",
|
|
"transition-[border-color,box-shadow,background-color,transform] duration-[var(--dur-base)] ease-[var(--ease-standard)]",
|
|
"focus-visible:-translate-y-[var(--ui-input-focus-lift)] focus-visible:border-[var(--ui-input-focus-border)] focus-visible:shadow-[var(--ui-input-focus-shadow)]",
|
|
"focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
|
"disabled:cursor-not-allowed disabled:bg-[var(--ui-input-disabled-bg)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
|
|
"read-only:bg-[var(--ui-input-readonly-bg)] read-only:text-[var(--color-muted-foreground)]",
|
|
"aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
|
|
"aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]",
|
|
getMotionRecipeClassNames("ring")
|
|
],
|
|
{
|
|
variants: {
|
|
size: {
|
|
sm: "h-10 px-3 text-sm",
|
|
md: "h-11 px-4 text-sm",
|
|
lg: "h-12 px-4 text-base"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: "md"
|
|
}
|
|
}
|
|
);
|