Input

"use client"

import { Input } from "@/components/ui/preskok-ui/input"

export function InputBasicDemo() {
  return <Input aria-label="Name" placeholder="Your name" />
}

"use client"

import { MailIcon, SearchIcon } from "lucide-react"

import { Button } from "@/components/ui/preskok-ui/button"
import { Input, InputGroup } from "@/components/ui/preskok-ui/input"
import { Loader } from "@/components/ui/preskok-ui/loader"
import { Text } from "@/components/ui/preskok-ui/text"

export function InputPreskokDemo() {
  return (
    <div className="space-y-4">
      <div>
        <label className="mb-2 block text-sm font-medium">Basic Input</label>
        <Input placeholder="Enter your email" />
      </div>

      <div>
        <label className="mb-2 block text-sm font-medium">
          Input with Icon
        </label>
        <InputGroup>
          <MailIcon data-slot="icon" />
          <Input placeholder="you@example.com" />
        </InputGroup>
      </div>

      <div>
        <label className="mb-2 block text-sm font-medium">
          Input with Loading State
        </label>
        <InputGroup>
          <Input placeholder="Searching..." />
          <Loader data-slot="loader" variant="spin" />
        </InputGroup>
      </div>

      <div>
        <label className="mb-2 block text-sm font-medium">
          Input with Button
        </label>
        <InputGroup>
          <Input placeholder="Enter search term" />
          <Button intent="primary">
            <SearchIcon className="size-4" />
          </Button>
        </InputGroup>
      </div>

      <div>
        <label className="mb-2 block text-sm font-medium">
          Input with Text Prefix
        </label>
        <InputGroup className="[--input-gutter-end:--spacing(12)] [--input-gutter-start:--spacing(16)]">
          <Text>https://</Text>
          <Input />
          <Text>.com</Text>
        </InputGroup>
      </div>
    </div>
  )
}

"use client"

import { useState } from "react"

import { Input } from "@/components/ui/preskok-ui/input"
import { Text } from "@/components/ui/preskok-ui/text"

export function InputControlledDemo() {
  const [text, setText] = useState("")
  return (
    <div>
      <Input
        aria-label="Name"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      {text && <Text className="mt-6">{text}</Text>}
    </div>
  )
}

"use client"

import { MailIcon } from "lucide-react"

import { Input, InputGroup } from "@/components/ui/preskok-ui/input"
import { Text } from "@/components/ui/preskok-ui/text"

export function InputGroupDemo() {
  return (
    <div className="space-y-6">
      <InputGroup>
        <MailIcon data-slot="icon" />
        <Input type="email" />
      </InputGroup>
      <InputGroup className="[--input-gutter-end:--spacing(12)] [--input-gutter-start:--spacing(16)]">
        <Text>https://</Text>
        <Input />
        <Text>.com</Text>
      </InputGroup>
    </div>
  )
}

"use client"

import { Description, Label } from "@/components/ui/preskok-ui/field"
import { Input } from "@/components/ui/preskok-ui/input"

export function InputLabelDescriptionDemo() {
  return (
    <div className="space-y-2">
      <Label htmlFor="name">Name</Label>
      <Input id="name" aria-label="Name" placeholder="Your name" />
      <Description>Please enter your full name.</Description>
    </div>
  )
}

"use client"

import { Description, Label } from "@/components/ui/preskok-ui/field"
import { Input } from "@/components/ui/preskok-ui/input"
import { TextField } from "@/components/ui/preskok-ui/text-field"

export function InputTextFieldDemo() {
  return (
    <TextField>
      <Label htmlFor="name">Name</Label>
      <Input id="name" aria-label="Name" placeholder="Your name" />
      <Description>Please enter your full name.</Description>
    </TextField>
  )
}