@iaclinical/components 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iaclinical/components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Librería de componentes Vue 3 del IAclinical Design System",
   "type": "module",
   "main": "./dist/iaclinical-components.cjs",
@@ -34,7 +34,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@iaclinical/tailwind-preset": "1.0.0"
+    "@iaclinical/tailwind-preset": "^1.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",