FormStack

import { useState } from 'react'

import { type DateRange, FormStack, TextField, PasswordField, NumberField, PhoneField, TextareaField, CheckboxField, RadioGroupField, SelectField, ComboboxField, DateField, TimeField, DateRangeField } from '@amineslab/ui'

function ManagedFieldsExample() {
    const [name, setName] = useState('Amineslab');
    const [password, setPassword] = useState('secret');
    const [amount, setAmount] = useState<number | null>(12000);
    const [phone, setPhone] = useState('010-1234-5678');
    const [enabled, setEnabled] = useState(true);
    const [role, setRole] = useState('admin');
    const [team, setTeam] = useState('design');
    const [owner, setOwner] = useState('seunghun');
    const [date, setDate] = useState('2026-09-10');
    const [time, setTime] = useState('09:30');
    const [range, setRange] = useState<DateRange>({ from: '2026-09-10', to: '2026-09-14' });
    return (<FormStack className="grid-cols-1 md:grid-cols-2">
      <TextField label="이름" value={name} onValueChange={setName} description="자동으로 생성된 id와 설명 관계를 확인할 수 있습니다." required/>
      <PasswordField label="비밀번호" value={password} onValueChange={setPassword} showToggle/>
      <NumberField label="예산" value={amount} onValueChange={setAmount} showThousandsSeparator textAlign="end"/>
      <PhoneField label="연락처" value={phone} onValueChange={setPhone}/>
      <TextareaField label="메모" value="폼 컨트롤은 동일한 오류·설명 연결을 사용합니다." onValueChange={() => { }}/>
      <CheckboxField label="알림 받기" value={enabled} onValueChange={setEnabled} description="체크박스도 필드 설명과 필수 마커를 공유합니다."/>
      <RadioGroupField label="권한" value={role} onValueChange={setRole} options={[
            { value: 'admin', label: '관리자' },
            { value: 'member', label: '멤버' },
        ]}/>
      <SelectField label="팀" value={team} onValueChange={setTeam} options={[
            { value: 'design', label: '디자인' },
            { value: 'engineering', label: '엔지니어링' },
        ]}/>
      <ComboboxField label="담당자" value={owner} onValueChange={setOwner} options={[
            { value: 'seunghun', label: '박승훈' },
            { value: 'mina', label: '김미나' },
            { value: 'jisu', label: '이 지수' },
        ]}/>
      <DateField label="시작일" value={date} onValueChange={setDate}/>
      <TimeField label="시작 시간" value={time} onValueChange={setTime} step={30}/>
      <DateRangeField label="기간" value={range} onValueChange={setRange}/>
    </FormStack>);
}

export default function ExamplePreview() {
  return (<ManagedFieldsExample />)
}

import { useState } from 'react'

import { useForm } from 'react-hook-form'

import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, DateRangeField } from '@amineslab/ui/forms/react-hook-form'

import { Input, Button } from '@amineslab/ui'

function ReactHookFormExample() {
    const [saved, setSaved] = useState('');
    const form = useForm({ defaultValues: { name: '', range: { from: '', to: '' } } });
    return (<Form {...form}>
      <form className="grid w-full gap-4" onSubmit={form.handleSubmit((value) => setSaved(value.name))}>
        <FormField control={form.control} name="name" rules={{ required: '이름을 입력하세요' }} render={({ field }) => (<FormItem>
              <FormLabel>프로젝트 이름</FormLabel>
              <FormControl>
                <Input {...field} aria-required="true"/>
              </FormControl>
              <FormDescription>목록에 표시할 이름입니다.</FormDescription>
              <FormMessage />
            </FormItem>)}/>
        <DateRangeField control={form.control} name="range" label="활동 기간"/>
        <Button type="submit">{saved ? '저장됨' : '검증 후 저장'}</Button>
      </form>
    </Form>);
}

export default function ExamplePreview() {
  return (<ReactHookFormExample />)
}