@iaclinical/components 1.0.1 → 1.0.3

package/README.md

@@ -1,389 +1,389 @@
-# @iaclinical/components
-
-Librería de componentes Vue 3 del IAclinical Design System, construida con Tailwind CSS.
-
-## 📦 Instalación
-
-### Usando pnpm (Recomendado)
-
-```bash
-pnpm add @iaclinical/components @iaclinical/tailwind-preset
-```
-
-### Usando npm
-
-```bash
-npm install @iaclinical/components @iaclinical/tailwind-preset
-```
-
-### Usando yarn
-
-```bash
-yarn add @iaclinical/components @iaclinical/tailwind-preset
-```
-
-## ⚙️ Configuración
-
-### 1. Configurar Tailwind CSS
-
-Crea o actualiza tu `tailwind.config.js`:
-
-```javascript
-import iaclinicalPreset from "@iaclinical/tailwind-preset";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  presets: [iaclinicalPreset],
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-    "./node_modules/@iaclinical/components/**/*.{js,ts,vue}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-```
-
-### 2. Importar estilos
-
-En tu archivo principal (ej. `main.ts` o `main.js`):
-
-```typescript
-import { createApp } from "vue";
-import App from "./App.vue";
-
-// Importar estilos de la librería
-import "@iaclinical/components/style.css";
-
-createApp(App).mount("#app");
-```
-
-## 🚀 Uso Básico
-
-### Importación de Componentes
-
-```vue
-<script setup lang="ts">
-import { Button, Card, Dialog, AppBar } from "@iaclinical/components";
-import { ref } from "vue";
-
-const isDialogOpen = ref(false);
-</script>
-
-<template>
-  <div>
-    <!-- Button -->
-    <Button variant="primary" size="md"> Click me </Button>
-
-    <!-- Card -->
-    <Card title="Card Title" subtitle="Card subtitle">
-      <p>Card content goes here</p>
-    </Card>
-
-    <!-- Dialog -->
-    <Button @click="isDialogOpen = true"> Open Dialog </Button>
-    <Dialog
-      v-model:open="isDialogOpen"
-      title="Dialog Title"
-      description="Dialog description"
-    >
-      <p>Dialog content</p>
-    </Dialog>
-  </div>
-</template>
-```
-
-## 📚 Componentes Disponibles
-
-### Button
-
-Botón versátil con múltiples variantes y tamaños.
-
-```vue
-<template>
-  <!-- Variantes -->
-  <Button variant="primary">Primary</Button>
-  <Button variant="secondary">Secondary</Button>
-  <Button variant="outline">Outline</Button>
-  <Button variant="ghost">Ghost</Button>
-  <Button variant="danger">Danger</Button>
-
-  <!-- Tamaños -->
-  <Button size="sm">Small</Button>
-  <Button size="md">Medium</Button>
-  <Button size="lg">Large</Button>
-
-  <!-- Con badge (para variant="icon") -->
-  <Button variant="icon" :badge="5" aria-label="Notifications">
-    <BellIcon class="w-5 h-5" />
-  </Button>
-
-  <!-- Deshabilitado -->
-  <Button disabled>Disabled</Button>
-</template>
-```
-
-**Props:**
-
-- `variant`: `'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'icon'`
-- `size`: `'sm' | 'md' | 'lg'`
-- `radius`: `'full' | 'xl' | 'lg' | 'md' | 'sm' | 'none'`
-- `disabled`: `boolean`
-- `badge`: `number` (solo para variant="icon")
-- `ariaLabel`: `string`
-
-### AppBar
-
-Barra de navegación flexible con slots personalizables.
-
-```vue
-<template>
-  <AppBar variant="default">
-    <template #left>
-      <Button variant="icon" @click="toggleMenu">
-        <MenuIcon class="w-6 h-6" />
-      </Button>
-    </template>
-
-    <template #center>
-      <h1 class="text-lg font-semibold">My App</h1>
-    </template>
-
-    <template #right>
-      <Button variant="icon" :badge="3">
-        <BellIcon class="w-5 h-5" />
-      </Button>
-      <Select v-model="selectedUser" :options="userOptions" />
-    </template>
-  </AppBar>
-</template>
-```
-
-**Props:**
-
-- `variant`: `'default' | 'dark' | 'light'`
-
-**Slots:**
-
-- `left`: Contenido izquierdo
-- `center`: Contenido central
-- `right`: Contenido derecho
-
-**Events:**
-
-- `menu-toggle`: Emitido al hacer clic en el área del menú
-
-### Card
-
-Contenedor de contenido con título y subtítulo opcionales.
-
-```vue
-<template>
-  <Card title="Card Title" subtitle="Optional subtitle" padding="md">
-    <p>Your content here</p>
-
-    <template #actions>
-      <Button size="sm">Action</Button>
-    </template>
-  </Card>
-</template>
-```
-
-**Props:**
-
-- `title`: `string`
-- `subtitle`: `string`
-- `padding`: `'none' | 'sm' | 'md' | 'lg'`
-
-### Dialog
-
-Modal/diálogo con overlay y animaciones.
-
-```vue
-<script setup>
-import { ref } from "vue";
-
-const isOpen = ref(false);
-</script>
-
-<template>
-  <Dialog
-    v-model:open="isOpen"
-    title="Confirm Action"
-    description="Are you sure you want to proceed?"
-  >
-    <div class="flex gap-2 justify-end mt-4">
-      <Button variant="ghost" @click="isOpen = false"> Cancel </Button>
-      <Button variant="primary" @click="handleConfirm"> Confirm </Button>
-    </div>
-  </Dialog>
-</template>
-```
-
-**Props:**
-
-- `open`: `boolean` (v-model)
-- `title`: `string`
-- `description`: `string`
-
-### Select
-
-Selector con opciones y acciones personalizables.
-
-```vue
-<script setup>
-import { ref } from "vue";
-
-const selected = ref("");
-const options = [
-  { label: "Option 1", value: "1" },
-  { label: "Option 2", value: "2" },
-];
-const actions = [{ label: "Logout", action: () => console.log("logout") }];
-</script>
-
-<template>
-  <Select
-    v-model="selected"
-    :options="options"
-    :actions="actions"
-    placeholder="Select an option"
-  />
-</template>
-```
-
-**Props:**
-
-- `modelValue`: `string | number`
-- `options`: `SelectOption[]`
-- `actions`: `ActionItem[]`
-- `placeholder`: `string`
-- `size`: `'sm' | 'md' | 'lg'`
-- `disabled`: `boolean`
-
-### Table
-
-Tabla de datos con soporte para paginación y acciones.
-
-```vue
-<script setup>
-const columns = [
-  { key: "name", label: "Name" },
-  { key: "email", label: "Email" },
-  { key: "role", label: "Role" },
-];
-
-const data = [
-  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
-  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
-];
-
-const handleEdit = (row) => console.log("Edit", row);
-const handleDelete = (row) => console.log("Delete", row);
-</script>
-
-<template>
-  <Table
-    :columns="columns"
-    :data="data"
-    :actions="[
-      { label: 'Edit', handler: handleEdit },
-      { label: 'Delete', handler: handleDelete },
-    ]"
-  />
-</template>
-```
-
-### Otros Componentes
-
-- **FileUpload**: Carga de archivos con drag & drop
-- **Loader**: Indicador de carga
-- **Tabs**: Navegación por pestañas
-- **Text**: Texto con estilos predefinidos
-
-## 📖 Documentación Completa
-
-Para ver la documentación completa con ejemplos interactivos, visita:
-
-```bash
-# Clonar el repositorio
-git clone https://github.com/iaclinical/design-system.git
-
-# Instalar dependencias
-pnpm install
-
-# Ejecutar la documentación
-pnpm --filter @iaclinical/docs dev
-```
-
-## 🎨 Personalización
-
-### Colores del Tema
-
-El preset de Tailwind incluye los colores del sistema de diseño:
-
-- `primary`: Color principal (azul IAclinical)
-- `ia-primary`: Alias del color principal
-- `secondary`: Color secundario
-- `danger`: Color de error/peligro
-- `success`: Color de éxito
-- `warning`: Color de advertencia
-
-```vue
-<template>
-  <!-- Usando clases de Tailwind con colores del preset -->
-  <div class="bg-primary-500 text-white p-4">Content with primary color</div>
-
-  <div class="bg-ia-primary-600 text-white p-4">
-    Content with ia-primary color
-  </div>
-</template>
-```
-
-### Fuentes
-
-El sistema de diseño incluye Roboto como fuente principal:
-
-```css
-/* Ya incluido en los estilos de la librería */
-font-family: "Roboto", sans-serif;
-```
-
-## 🔧 TypeScript
-
-Todos los componentes incluyen definiciones de tipos completas:
-
-```typescript
-import type {
-  ButtonProps,
-  CardProps,
-  DialogProps,
-  SelectOption,
-  TableColumn,
-} from "@iaclinical/components";
-
-// Uso con tipos
-const buttonProps: ButtonProps = {
-  variant: "primary",
-  size: "md",
-  disabled: false,
-};
-```
-
-## 📄 Licencia
-
-MIT © IAclinical
-
-## 🤝 Contribuir
-
-Para contribuir al desarrollo de esta librería, consulta el repositorio principal:
-
-[https://github.com/iaclinical/design-system](https://github.com/iaclinical/design-system)
-
-## 📞 Soporte
-
-Para reportar bugs o solicitar nuevas características, abre un issue en:
-
-[https://github.com/iaclinical/design-system/issues](https://github.com/iaclinical/design-system/issues)
+# @iaclinical/components
+
+Librería de componentes Vue 3 del IAclinical Design System, construida con Tailwind CSS.
+
+## 📦 Instalación
+
+### Usando pnpm (Recomendado)
+
+```bash
+pnpm add @iaclinical/components @iaclinical/tailwind-preset
+```
+
+### Usando npm
+
+```bash
+npm install @iaclinical/components @iaclinical/tailwind-preset
+```
+
+### Usando yarn
+
+```bash
+yarn add @iaclinical/components @iaclinical/tailwind-preset
+```
+
+## ⚙️ Configuración
+
+### 1. Configurar Tailwind CSS
+
+Crea o actualiza tu `tailwind.config.js`:
+
+```javascript
+import iaclinicalPreset from "@iaclinical/tailwind-preset";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [iaclinicalPreset],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./node_modules/@iaclinical/components/**/*.{js,ts,vue}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+### 2. Importar estilos
+
+En tu archivo principal (ej. `main.ts` o `main.js`):
+
+```typescript
+import { createApp } from "vue";
+import App from "./App.vue";
+
+// Importar estilos de la librería
+import "@iaclinical/components/style.css";
+
+createApp(App).mount("#app");
+```
+
+## 🚀 Uso Básico
+
+### Importación de Componentes
+
+```vue
+<script setup lang="ts">
+import { Button, Card, Dialog, AppBar } from "@iaclinical/components";
+import { ref } from "vue";
+
+const isDialogOpen = ref(false);
+</script>
+
+<template>
+  <div>
+    <!-- Button -->
+    <Button variant="primary" size="md"> Click me </Button>
+
+    <!-- Card -->
+    <Card title="Card Title" subtitle="Card subtitle">
+      <p>Card content goes here</p>
+    </Card>
+
+    <!-- Dialog -->
+    <Button @click="isDialogOpen = true"> Open Dialog </Button>
+    <Dialog
+      v-model:open="isDialogOpen"
+      title="Dialog Title"
+      description="Dialog description"
+    >
+      <p>Dialog content</p>
+    </Dialog>
+  </div>
+</template>
+```
+
+## 📚 Componentes Disponibles
+
+### Button
+
+Botón versátil con múltiples variantes y tamaños.
+
+```vue
+<template>
+  <!-- Variantes -->
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="outline">Outline</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button variant="danger">Danger</Button>
+
+  <!-- Tamaños -->
+  <Button size="sm">Small</Button>
+  <Button size="md">Medium</Button>
+  <Button size="lg">Large</Button>
+
+  <!-- Con badge (para variant="icon") -->
+  <Button variant="icon" :badge="5" aria-label="Notifications">
+    <BellIcon class="w-5 h-5" />
+  </Button>
+
+  <!-- Deshabilitado -->
+  <Button disabled>Disabled</Button>
+</template>
+```
+
+**Props:**
+
+- `variant`: `'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'icon'`
+- `size`: `'sm' | 'md' | 'lg'`
+- `radius`: `'full' | 'xl' | 'lg' | 'md' | 'sm' | 'none'`
+- `disabled`: `boolean`
+- `badge`: `number` (solo para variant="icon")
+- `ariaLabel`: `string`
+
+### AppBar
+
+Barra de navegación flexible con slots personalizables.
+
+```vue
+<template>
+  <AppBar variant="default">
+    <template #left>
+      <Button variant="icon" @click="toggleMenu">
+        <MenuIcon class="w-6 h-6" />
+      </Button>
+    </template>
+
+    <template #center>
+      <h1 class="text-lg font-semibold">My App</h1>
+    </template>
+
+    <template #right>
+      <Button variant="icon" :badge="3">
+        <BellIcon class="w-5 h-5" />
+      </Button>
+      <Select v-model="selectedUser" :options="userOptions" />
+    </template>
+  </AppBar>
+</template>
+```
+
+**Props:**
+
+- `variant`: `'default' | 'dark' | 'light'`
+
+**Slots:**
+
+- `left`: Contenido izquierdo
+- `center`: Contenido central
+- `right`: Contenido derecho
+
+**Events:**
+
+- `menu-toggle`: Emitido al hacer clic en el área del menú
+
+### Card
+
+Contenedor de contenido con título y subtítulo opcionales.
+
+```vue
+<template>
+  <Card title="Card Title" subtitle="Optional subtitle" padding="md">
+    <p>Your content here</p>
+
+    <template #actions>
+      <Button size="sm">Action</Button>
+    </template>
+  </Card>
+</template>
+```
+
+**Props:**
+
+- `title`: `string`
+- `subtitle`: `string`
+- `padding`: `'none' | 'sm' | 'md' | 'lg'`
+
+### Dialog
+
+Modal/diálogo con overlay y animaciones.
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Dialog
+    v-model:open="isOpen"
+    title="Confirm Action"
+    description="Are you sure you want to proceed?"
+  >
+    <div class="flex gap-2 justify-end mt-4">
+      <Button variant="ghost" @click="isOpen = false"> Cancel </Button>
+      <Button variant="primary" @click="handleConfirm"> Confirm </Button>
+    </div>
+  </Dialog>
+</template>
+```
+
+**Props:**
+
+- `open`: `boolean` (v-model)
+- `title`: `string`
+- `description`: `string`
+
+### Select
+
+Selector con opciones y acciones personalizables.
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const selected = ref("");
+const options = [
+  { label: "Option 1", value: "1" },
+  { label: "Option 2", value: "2" },
+];
+const actions = [{ label: "Logout", action: () => console.log("logout") }];
+</script>
+
+<template>
+  <Select
+    v-model="selected"
+    :options="options"
+    :actions="actions"
+    placeholder="Select an option"
+  />
+</template>
+```
+
+**Props:**
+
+- `modelValue`: `string | number`
+- `options`: `SelectOption[]`
+- `actions`: `ActionItem[]`
+- `placeholder`: `string`
+- `size`: `'sm' | 'md' | 'lg'`
+- `disabled`: `boolean`
+
+### Table
+
+Tabla de datos con soporte para paginación y acciones.
+
+```vue
+<script setup>
+const columns = [
+  { key: "name", label: "Name" },
+  { key: "email", label: "Email" },
+  { key: "role", label: "Role" },
+];
+
+const data = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
+];
+
+const handleEdit = (row) => console.log("Edit", row);
+const handleDelete = (row) => console.log("Delete", row);
+</script>
+
+<template>
+  <Table
+    :columns="columns"
+    :data="data"
+    :actions="[
+      { label: 'Edit', handler: handleEdit },
+      { label: 'Delete', handler: handleDelete },
+    ]"
+  />
+</template>
+```
+
+### Otros Componentes
+
+- **FileUpload**: Carga de archivos con drag & drop
+- **Loader**: Indicador de carga
+- **Tabs**: Navegación por pestañas
+- **Text**: Texto con estilos predefinidos
+
+## 📖 Documentación Completa
+
+Para ver la documentación completa con ejemplos interactivos, visita:
+
+```bash
+# Clonar el repositorio
+git clone https://github.com/iaclinical/design-system.git
+
+# Instalar dependencias
+pnpm install
+
+# Ejecutar la documentación
+pnpm --filter @iaclinical/docs dev
+```
+
+## 🎨 Personalización
+
+### Colores del Tema
+
+El preset de Tailwind incluye los colores del sistema de diseño:
+
+- `primary`: Color principal (azul IAclinical)
+- `ia-primary`: Alias del color principal
+- `secondary`: Color secundario
+- `danger`: Color de error/peligro
+- `success`: Color de éxito
+- `warning`: Color de advertencia
+
+```vue
+<template>
+  <!-- Usando clases de Tailwind con colores del preset -->
+  <div class="bg-primary-500 text-white p-4">Content with primary color</div>
+
+  <div class="bg-ia-primary-600 text-white p-4">
+    Content with ia-primary color
+  </div>
+</template>
+```
+
+### Fuentes
+
+El sistema de diseño incluye Roboto como fuente principal:
+
+```css
+/* Ya incluido en los estilos de la librería */
+font-family: "Roboto", sans-serif;
+```
+
+## 🔧 TypeScript
+
+Todos los componentes incluyen definiciones de tipos completas:
+
+```typescript
+import type {
+  ButtonProps,
+  CardProps,
+  DialogProps,
+  SelectOption,
+  TableColumn,
+} from "@iaclinical/components";
+
+// Uso con tipos
+const buttonProps: ButtonProps = {
+  variant: "primary",
+  size: "md",
+  disabled: false,
+};
+```
+
+## 📄 Licencia
+
+MIT © IAclinical
+
+## 🤝 Contribuir
+
+Para contribuir al desarrollo de esta librería, consulta el repositorio principal:
+
+[https://github.com/iaclinical/design-system](https://github.com/iaclinical/design-system)
+
+## 📞 Soporte
+
+Para reportar bugs o solicitar nuevas características, abre un issue en:
+
+[https://github.com/iaclinical/design-system/issues](https://github.com/iaclinical/design-system/issues)