pnpm dlx shadcn@latest add https://n-exit.io/r/input.json

<Input 
  label="Email"
  placeholder="Enter email"
  leftIcon={<MailIcon className="h-4 w-4" />}
/>

<Input 
  label="Password"
  type="password"
  placeholder="Enter password"
  rightIcon={<EyeIcon className="h-4 w-4" />}
/>

<Input 
  label="Search"
  placeholder="Search..."
  leftIcon={<SearchIcon className="h-4 w-4" />}
  rightIcon={<FilterIcon className="h-4 w-4" />}
/>

<Input 
  label="Valid Input"
  placeholder="This looks good"
  state="success"
  description="Great! This input is valid."
/>

<Input 
  label="Invalid Input"
  placeholder="Something's wrong"
  state="error"
  errorMessage="This field is required."
/>

<Input 
  label="Warning Input"
  placeholder="Be careful"
  state="warning"
  description="This might need attention."
/>

<Input 
  label="Required Field"
  placeholder="This field is required"
  isRequired
/>

<Input 
  label="Username"
  placeholder="Enter username"
  description="Username must be 3-20 characters long"
/>

<Input 
  label="Password"
  type="password"
  placeholder="Enter password"
  errorMessage="Password must be at least 8 characters"
/>

<Input radius="none" label="No Radius" />
<Input radius="sm" label="Small Radius" />
<Input radius="default" label="Default Radius" />
<Input radius="lg" label="Large Radius" />
<Input radius="xl" label="Extra Large Radius" />
<Input radius="full" label="Full Radius" />

<Input 
  label="Disabled Input"
  placeholder="Cannot type here"
  disabled
/>

{/* Disable animations */}
<Input 
  label="No Animation"
  placeholder="Static input"
  disableAnimation
/>

import { useState } from 'react'
import { Input } from '@/nexit-ui/components/ui/input'
import { Button } from '@/nexit-ui/components/ui/button'

export function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <form className="space-y-4">
      <Input
        label="Email"
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        leftIcon={<MailIcon className="h-4 w-4" />}
        isRequired
      />
      
      <Input
        label="Password"
        type="password"
        placeholder="Enter your password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        leftIcon={<LockIcon className="h-4 w-4" />}
        isRequired
      />
      
      <Button type="submit" variant="primary" className="w-full">
        Sign In
      </Button>
    </form>
  )
}

export function SearchInput() {
  const [query, setQuery] = useState('')

  return (
    <Input
      placeholder="Search anything..."
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      leftIcon={<SearchIcon className="h-4 w-4" />}
      isClearable
      onClear={() => setQuery('')}
      variant="filled"
    />
  )
}

export function ValidatedInput() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')

  const validateEmail = (value: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!value) {
      setError('Email is required')
    } else if (!emailRegex.test(value)) {
      setError('Please enter a valid email')
    } else {
      setError('')
    }
  }

  return (
    <Input
      label="Email Address"
      type="email"
      placeholder="Enter your email"
      value={email}
      onChange={(e) => {
        setEmail(e.target.value)
        validateEmail(e.target.value)
      }}
      state={error ? 'error' : email ? 'success' : 'default'}
      errorMessage={error}
      isRequired
    />
  )
}