import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "../../lib/utils"

const inputVariants = cva(
  "file:text-foreground placeholder:text-foreground/40 selection:bg-primary selection:text-primary-foreground h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-base shadow-2xs transition-[color,box-shadow] outline-hidden 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 md:text-sm focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
  {
    variants: {
      variant: {
        default:
          "border-input shadow-2xs dark:bg-input/30 focus-visible:border-ring aria-invalid:border-destructive",
        slant:
          "border-0 bg-foreground/10 px-6 shadow-none focus-visible:border-0 !rounded-none [clip-path:var(--slant-clip-path)] text-foreground dark:bg-muted aria-invalid:border-0 dark:aria-invalid:border-0",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export type InputProps = React.ComponentProps<"input"> &
  VariantProps<typeof inputVariants>

function Input({ className, type, variant, ...props }: InputProps) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(inputVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Input, inputVariants }
Input

Installation

Usage

Examples

Default

Slant
