Input

import { Input } from '@immit/ui/input'

export function InputDemo() {
  return <Input placeholder="Type away..." />
}

import { Input } from '@immit/ui/input'

export function InputSizes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Input size="sm" placeholder="Small" />
      <Input size="default" placeholder="Default" />
      <Input size="lg" placeholder="Large" />
      <Input size="xl" placeholder="Extra large" />
      <Input size="2xl" placeholder="2XL" />
    </div>
  )
}

import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'

export function InputWithLabel() {
  return (
    <div className="grid w-full gap-1">
      <Label htmlFor="email">Email</Label>
      <Input type="email" placeholder="Enter an email" />
    </div>
  )
}

import { Button } from '@immit/ui/button'
import { Input } from '@immit/ui/input'

export function InputWithButton() {
  return (
    <div className="flex w-full gap-2">
      <Input type="email" placeholder="Enter an email" />
      <Button variant="secondary">Submit</Button>
    </div>
  )
}