Input

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6const inputVariants = cva(
7  "h-11.5 w-full min-w-0 px-4 py-2 text-sm font-medium tracking-[-0.006em] text-foreground outline-none transition-[border-color,box-shadow,background-color] duration-300 ease-[cubic-bezier(.16,1,.3,1)] placeholder:font-normal placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45 motion-reduce:transition-none",
8  {
9    variants: {
10      variant: {
11        default:
12          "rounded-xl border [background:var(--control-background)] [border-color:var(--control-border)] [box-shadow:var(--control-shadow)] hover:[background:var(--control-background-hover)] hover:[border-color:var(--control-border-hover)] hover:[box-shadow:var(--control-shadow-hover)] focus-visible:[background:var(--control-background)] focus-visible:[border-color:var(--control-focus-border)] focus-visible:[box-shadow:var(--control-focus-shadow)] aria-invalid:![border-color:color-mix(in_oklch,var(--destructive)_55%,transparent)] aria-invalid:![box-shadow:0_0_0_4px_color-mix(in_oklch,var(--destructive)_10%,transparent)]",
13        prism:
14          "rounded-lg border border-foreground/14 bg-background shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_78%,white),0_1px_2px_color-mix(in_oklch,var(--foreground)_8%,transparent),0_5px_14px_-12px_var(--foreground)] hover:border-foreground/24 hover:shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_82%,white),0_2px_5px_color-mix(in_oklch,var(--foreground)_9%,transparent)] focus-visible:border-primary/65 focus-visible:ring-4 focus-visible:ring-primary/12 focus-visible:shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_82%,white),0_8px_24px_-16px_var(--primary)] aria-invalid:border-destructive/55 aria-invalid:ring-destructive/10",
15      },
16    },
17    defaultVariants: { variant: "default" },
18  },
19);
20 
21function Input({
22  className,
23  type,
24  variant,
25  ...props
26}: React.ComponentProps<"input"> & VariantProps<typeof inputVariants>) {
27  return (
28    <input
29      type={type}
30      data-slot="input"
31      className={cn(inputVariants({ variant }), className)}
32      {...props}
33    />
34  );
35}
36 
37export { Input, inputVariants };