npm package: @fcfmclub/ui
Description: Componentes UI del Club
Author: FCFM Club
Latest version: 1.0.9

# @fcfmclub/ui

Biblioteca de componentes UI de FCFM Club construida con shadcn/ui y Tailwind CSS.

## Instalación

```bash
npm install @fcfmclub/ui
```

### Dependencias requeridas

Este paquete requiere las siguientes dependencias peer:

```bash
npm install react react-dom tailwindcss
```

### Configuración

#### 1. Importar CSS global

En tu archivo principal de CSS o `app/globals.css`:

```css
@import "@fcfmclub/ui/styles";
```

O importa directamente en tu `layout.tsx`:

```tsx
import "@fcfmclub/ui/styles";
```

## Uso

### Importar componentes

Puedes importar componentes de varias formas:

**Importación desde el índice principal:**

```tsx
import { Button, Card, Input } from "@fcfmclub/ui";
```

**Importación directa (tree-shaking optimizado):**

```tsx
import { Button } from "@fcfmclub/ui/button";
import { Card, CardHeader, CardContent } from "@fcfmclub/ui/card";
import { Input } from "@fcfmclub/ui/input";
```

**Utilidad cn:**

```tsx
import { cn } from "@fcfmclub/ui/utils";
```

### Ejemplo básico

```tsx
import { Button } from "@fcfmclub/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@fcfmclub/ui/card";
import { Input } from "@fcfmclub/ui/input";

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Título</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Escribe algo..." />
        <Button>Guardar</Button>
      </CardContent>
    </Card>
  );
}
```

## Componentes disponibles

### Formularios y Entrada

- **Button** - Botones con múltiples variantes
- **Input** - Campos de entrada de texto
- **Textarea** - Áreas de texto
- **Checkbox** - Casillas de verificación
- **Select** - Selectores desplegables
- **Form** - Componentes de formulario con validación
- **Label** - Etiquetas para formularios

### Layout

- **Card** - Tarjetas para contenido
- **Separator** - Separadores visuales
- **Sidebar** - Barra lateral con navegación

### Overlays

- **Dialog** - Diálogos modales
- **Drawer** - Cajones deslizables
- **Sheet** - Paneles laterales
- **Credenza** - Diálogos responsivos
- **Popover** - Popovers flotantes
- **Tooltip** - Tooltips informativos
- **HoverCard** - Tarjetas al pasar el mouse
- **DropdownMenu** - Menús desplegables

### Navegación

- **Command** - Paleta de comandos
- **Pagination** - Paginación

### Feedback

- **Progress** - Barras de progreso
- **Skeleton** - Placeholders de carga

### Display

- **Avatar** - Avatares de usuario

### Grupos

- **ButtonGroup** - Grupos de botones
- **InputGroup** - Grupos de inputs

## Variables CSS

Todas las variables de color y espaciado están definidas en el CSS global y pueden ser personalizadas:

```css
:root {
  --background: oklch(0.9816 0.0017 247.839);
  --foreground: oklch(0.1649 0.0352 281.8285);
  --primary: oklch(0.6726 0.2904 341.4084);
  /* ... más variables */
}
```

## TypeScript

Todos los componentes están completamente tipados con TypeScript.

## Ejemplos

### Botones

```tsx
import { Button } from "@fcfmclub/ui/button";

<Button>Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔥</Button>
```

### Formularios con React Hook Form

```tsx
import { useForm } from "react-hook-form";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@fcfmclub/ui/form";
import { Input } from "@fcfmclub/ui/input";
import { Button } from "@fcfmclub/ui/button";

function MyForm() {
  const form = useForm();

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="tu@email.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Enviar</Button>
      </form>
    </Form>
  );
}
```

## Licencia

MIT

## Autor

FCFM Club