YA Input

import { YaInput } from '@/components/ui/ya-input'

export default function Example() {
  return <YaInput label="Email" placeholder="Enter your email" />
}

<YaInput
  inputType="text"
  label="Username"
  placeholder="Enter username"
  helpText="Choose a unique username"
/>

<YaInput
  inputType="file"
  label="Document"
  fileText="Choose file"
  placeholder="No file selected"
  accept=".pdf,.doc,.docx"
  onFileSelect={(file) => console.log(file)}
/>

const [tags, setTags] = useState(['react', 'typescript'])

<YaInput
  inputType="tag"
  label="Skills"
  placeholder="Add a skill..."
  tags={tags}
  onTagsChange={setTags}
/>

<YaInput size="md" label="Medium Input" placeholder="Default size" />
<YaInput size="sm" label="Small Input" placeholder="Compact size" />

<YaInput
  orientation="vertical"
  label="Vertical Layout"
  placeholder="Label above"
  helpText="This is help text"
/>

<YaInput
  orientation="horizontal"
  label="Horizontal"
  placeholder="Label on the left"
/>

import { Search, Mail, User } from 'lucide-react'

<YaInput label="Search" placeholder="Search..." iconLeading={<Search />} />
<YaInput label="Email" placeholder="name@example.com" iconLeading={<Mail />} />
<YaInput label="Username" placeholder="Enter username" iconLeading={<User />} />

const [value, setValue] = useState('')
const maxLength = 100

<YaInput
  label="Bio"
  placeholder="Tell us about yourself"
  value={value}
  onChange={(e) => setValue(e.target.value.slice(0, maxLength))}
  counter={{ current: value.length, max: maxLength }}
  helpText="Brief description about yourself"
/>

import { YaButton } from '@/components/ui/ya-button'
import { Mail, ArrowRight } from 'lucide-react'

<YaInput
  label="Newsletter"
  placeholder="Enter your email"
  helpText="Subscribe to our newsletter"
  iconLeading={<Mail />}
  button={
    <YaButton variant="primary" rightIcon={<ArrowRight />}>
      Subscribe
    </YaButton>
  }
/>

<YaInput label="Disabled Input" placeholder="This is disabled" disabled />

<YaInput
  label="Email"
  placeholder="name@example.com"
  destructive
  errorText="Please enter a valid email address"
/>

<YaInput
  inputType="text"
  label="Email"
  destructive
  errorText="Invalid email format"
/>

<YaInput
  inputType="file"
  label="Document"
  destructive
  errorText="File size exceeds 5MB limit"
/>

<YaInput
  inputType="tag"
  label="Categories"
  tags={['invalid-tag']}
  onTagsChange={() => {}}
  destructive
  errorText="One or more tags are invalid"
/>

import { useState } from 'react'
import { YaInput } from '@/components/ui/ya-input'
import { YaButton } from '@/components/ui/ya-button'
import { Mail, ArrowRight } from 'lucide-react'

export default function NewsletterSignup() {
  const [email, setEmail] = useState('')

  return (
    <YaInput
      label="Stay Updated"
      placeholder="your@email.com"
      iconLeading={<Mail />}
      helpText="Get the latest news delivered to your inbox"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      button={
        <YaButton variant="primary" rightIcon={<ArrowRight />}>
          Subscribe
        </YaButton>
      }
    />
  )
}

import { useState } from 'react'
import { YaInput } from '@/components/ui/ya-input'

export default function FileUpload() {
  const [error, setError] = useState('')

  const handleFileSelect = (file: File | null) => {
    if (file && file.size > 5 * 1024 * 1024) {
      setError('File size must be less than 5MB')
    } else {
      setError('')
    }
  }

  return (
    <YaInput
      inputType="file"
      label="Upload Resume"
      accept=".pdf,.doc,.docx"
      onFileSelect={handleFileSelect}
      destructive={!!error}
      errorText={error}
      helpText="Accepted formats: PDF, DOC, DOCX (max 5MB)"
    />
  )
}

import { useState } from 'react'
import { YaInput } from '@/components/ui/ya-input'
import { Tag } from 'lucide-react'

export default function TagManager() {
  const [tags, setTags] = useState(['react', 'typescript', 'nextjs'])

  return (
    <YaInput
      inputType="tag"
      label="Skills"
      placeholder="Type and press Enter..."
      iconLeading={<Tag />}
      tags={tags}
      onTagsChange={setTags}
      counter={{ current: tags.length, max: 10 }}
      helpText="Add up to 10 skills"
    />
  )
}

import { YaInput } from '@/components/ui/ya-input'
import { YaButton } from '@/components/ui/ya-button'
import { User, Mail } from 'lucide-react'

<form className="flex flex-col gap-4">
  <YaInput label="Full Name" placeholder="John Doe" iconLeading={<User />} />
  <YaInput label="Email" placeholder="john@example.com" iconLeading={<Mail />} />
  <YaInput
    inputType="file"
    label="Profile Picture"
    accept="image/*"
    helpText="Upload a profile picture (optional)"
  />
  <div className="flex gap-2 mt-4">
    <YaButton type="submit" variant="primary">Save</YaButton>
    <YaButton type="button" variant="secondary">Cancel</YaButton>
  </div>
</form>

import { type VariantProps } from 'class-variance-authority'
import { yaInputWrapperVariants, yaInputFieldVariants } from '@/components/ui/ya-input'

type InputOrientation = VariantProps<typeof yaInputWrapperVariants>['orientation']
type InputSize = VariantProps<typeof yaInputFieldVariants>['size']