🦊 uikitsune

uikitsune es una librería headless de componentes UI reutilizables construida con React Está diseñada para facilitar la creación de interfaces accesibles y de alta calidad, sin imponer estilos visuales predeterminados. Esto te brinda total libertad para integrar cualquier sistema de diseño o tema, usando Tailwind CSS, CSS Modules, estilos globales o cualquier enfoque que prefieras.

🚀 Instalación

npm install uikitsune

⚠️ Requiere react y react-dom como dependencias del proyecto (peer dependencies).

📦 Uso básico

import { Form, Field, Input, FieldLabel, FieldMessage } from 'uikitsune';

const ContactForm = () => (
  <Form onSubmit={(data) => console.log(data)}>
    <Field name="email" required="El correo es obligatorio">
      <FieldLabel>Email</FieldLabel>
      <Input type="email" placeholder="[email protected]" />
      <FieldMessage />
    </Field>
    <button type="submit">Enviar</button>
  </Form>
);

📦 Input de teléfono (campos múltiples con groupName)

Con uikitsune puedes crear componentes compuestos (como un input de teléfono) que se comportan como un solo campo usando la prop groupName. Esto permite validaciones y gestión de estado agrupada.

import { Field,ListBox, Input, ListBoxButton, FieldMessage } from 'uikitsune';

<Field
  groupName="phone"
  required={{
    country: 'Necesitamos un prefijo',
    number: 'Necesitamos un teléfono',
  }}
  pattern={{
    number: {
      regex: /^[0-9\s]+$/,
      message: 'Solo puedes usar números',
    },
  }}
>
  <div className="flex gap-8">
    <ListBox name="country" className="w-fit">
      <ListBoxButton
        valueRender={formatDefaultSelectedCountry}
        className="bg-white p-3 w-full"
      >
        Selecciona
      </ListBoxButton>
      <PhoneCodes classNamePhoneCodesList="bg-white p-3 text-black whitespace-nowrap" />
    </ListBox>
    <Input
      name="number"
      placeholder="55 5555 5555"
      className="bg-white p-3"
    />
  </div>
  <FieldMessage className="p-3 bg-red-500 mt-4" />
</Field>

• groupName="phone" agrupa ambos campos (country y number) en un solo valor del formulario.

• La validación se hace por campo con mensajes personalizados.

• Se conserva compatibilidad con useForm, FieldMessage y accesibilidad.

🎯 Componentes incluidos

• Form, useForm – Gestión de estado del formulario
• Field, Label, FieldDescription, FieldMessage FieldSet, Legend, FieldSetMessage – Manejo de campo individual
• Input, TextArea, Checkbox, Switch, – Inputs controlados/contextuales
• ListBox, ListBoxButton, ListBoxOptions, ListBoxOption ,PhoneCodes – Select accesible
• Spinner, SubmitButton – Indicadores de carga y botones contextuales
• Dropdown, DropdowButton, DropdowItems, DropdowItem, DropdowHeading, DropdowSection, DropdowSeparator, – Dropdown

🎨 Estilos y personalización

uikitsune es una librería headless, lo que significa que:

• Los componentes no incluyen estilos visuales predeterminados.
• Puedes usar cualquier sistema de estilos: Tailwind CSS, CSS Modules, Sass, etc.
• Tienes control total sobre la apariencia y diseño.

Por ejemplo, para dar estilos a un componente con Tailwind:

<Input className="bg-white border rounded px-4 py-2" />

O bien con clases personalizadas:

<Input className="mi-estilo" />

.mi-estilo {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
}

Esto permite que uikitsune sea ligera, flexible y compatible con cualquier diseño o tema que ya estés utilizando.

🧩 Requisitos

• React ^18.0.0 o ^19.0.0
• Tailwind CSS opcional pero recomendado para estilos por defecto

📄 Licencia

MIT

👨‍💻 Autor

Desarrollado con pasión por @WuichoArista