Input

'use client';

import { TextField } from '@/components/ui/input';

export default function InputDemo() {
  return (
    <TextField
      name="email"
      type="email"
      label="E-mail"
      placeholder="voce@suaempresa.com.br"
      description="Enviaremos o orçamento para este endereço."
      className="w-full max-w-sm"
    />
  );
}

'use client';

import { TextField } from '@/components/ui/input';

export default function InputTypes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <TextField label="E-mail" type="email" autoComplete="email" placeholder="voce@suaempresa.com.br" />
      <TextField label="WhatsApp" type="tel" autoComplete="tel" placeholder="(11) 91234-5678" />
      <TextField label="Site atual" type="url" placeholder="https://" />
      <TextField label="Senha" type="password" description="Mínimo de 8 caracteres." />
    </div>
  );
}

'use client';

import { TextField } from '@/components/ui/input';

export default function InputTextarea() {
  return (
    <TextField
      name="mensagem"
      label="Conte sobre o seu negócio"
      multiline
      rows={4}
      placeholder="Ex.: Tenho uma clínica odontológica e quero agendamento online."
      description="Quanto mais detalhes, mais preciso o orçamento."
      className="w-full max-w-sm"
    />
  );
}

'use client';

import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { TextField } from '@/components/ui/input';

export default function InputValidation() {
  return (
    <Form onSubmit={(e) => e.preventDefault()} className="w-full max-w-sm">
      <TextField
        name="email"
        type="email"
        label="E-mail"
        isRequired
        errorMessage={({ validationDetails }) =>
          validationDetails.valueMissing ? 'Informe seu e-mail.' : 'Digite um e-mail válido.'
        }
      />
      <TextField
        name="cep"
        label="CEP"
        placeholder="00000-000"
        validate={(valor) =>
          valor && !/^\d{5}-?\d{3}$/.test(valor) ? 'Digite um CEP válido, ex.: 01310-100.' : null
        }
      />
      <Button type="submit" className="self-start">
        Validar
      </Button>
    </Form>
  );
}

'use client';

import { TextField } from '@/components/ui/input';

export default function InputDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <TextField label="Razão social" defaultValue="Oficina do Zé Ltda." isDisabled />
      <TextField
        label="Código do cliente"
        defaultValue="LT-000482"
        isReadOnly
        description="Somente leitura: pode ser selecionado e copiado, mas não editado."
      />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { TextField } from '@/components/ui/input';

const LIMITE = 160;

export default function InputControlled() {
  const [bio, setBio] = useState('');
  return (
    <TextField
      label="Descrição curta"
      multiline
      rows={3}
      value={bio}
      onChange={setBio}
      maxLength={LIMITE}
      placeholder="Pães artesanais de fermentação natural, direto do forno."
      description={`${bio.length}/${LIMITE} caracteres — aparece no Google e nas redes sociais.`}
      className="w-full max-w-sm"
    />
  );
}

'use client';

import { FieldDescription, FieldError, Label } from '@/components/ui/field';
import { Input, Textarea, TextField } from '@/components/ui/input';

export default function InputComposed() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <TextField isRequired>
        <Label>
          Nome do responsável <span className="text-destructive">*</span>
        </Label>
        <Input placeholder="Dra. Ana Souza" />
        <FieldDescription>Quem vai aprovar o layout.</FieldDescription>
        <FieldError>Informe o nome do responsável.</FieldError>
      </TextField>
      <TextField>
        <Label>Observações</Label>
        <Textarea placeholder="Horários preferidos para contato, referências…" />
      </TextField>
    </div>
  );
}