haxen-lib

Biblioteca Tailwind-only pensada para Next.js, com foco em:

• layout Grid, Row, Col
• formulários com suporte a react-hook-form
• Table, dialogs, botões e displays
• visual alinhado com Auth_Fluxo_Login.html e WMS-SAAS-TELAS-PROTOTIPO.html

Uso

Importe o CSS global da lib no app:

import '@haxen/components/styles.css';

Exemplo com react-hook-form:

import { useForm } from 'react-hook-form';
import { Button, Form, TextField, Select } from '@haxen/components';

type FormData = {
  email: string;
  company: string;
};

export function ExampleForm() {
  const form = useForm<FormData>({
    defaultValues: {
      email: '',
      company: ''
    }
  });

  return (
    <Form onSubmit={form.handleSubmit(console.log)}>
      <TextField
        control={form.control}
        name="email"
        label="E-mail"
        rules={{ required: 'Informe o e-mail' }}
      />
      <Select
        control={form.control}
        name="company"
        domId="company"
        label="Empresa"
        options={[{ id: 'haxen', name: 'Haxen' }]}
        getValue={item => item.id}
        getLabel={item => item.name}
      />
      <Button type="submit">Salvar</Button>
    </Form>
  );
}