siesa-ui-kit 1.0.3 → 1.0.4

package/src/assets/fonts/README.md

@@ -0,0 +1,261 @@
+# Fuentes del Siesa UI Kit
+
+## 📋 Estructura
+
+```
+fonts/
+└── SiesaBT/                    # Familia tipográfica Siesa BT
+    ├── SiesaBT-Regular.otf     # 400 - Peso normal
+    ├── SiesaBT-Light.otf       # 300 - Peso ligero
+    └── SiesaBT-Bold.otf        # 700 - Peso negrita
+```
+
+## 🎨 Familia Tipográfica: SiesaBT
+
+### Variantes Disponibles
+
+| Archivo | Peso | font-weight | Uso Principal |
+|---------|------|-------------|---------------|
+| **SiesaBT-Light.otf** | Light | 300 | Textos extensos, párrafos largos |
+| **SiesaBT-Regular.otf** | Regular | 400 | Texto base, contenido general |
+| **SiesaBT-Bold.otf** | Bold | 700 | Títulos, labels, botones, énfasis |
+
+## 📦 Configuración
+
+### En `src/index.css`:
+
+```css
+@font-face {
+  font-family: 'SiesaBT';
+  src: url('./assets/fonts/SiesaBT/SiesaBT-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SiesaBT';
+  src: url('./assets/fonts/SiesaBT/SiesaBT-Light.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SiesaBT';
+  src: url('./assets/fonts/SiesaBT/SiesaBT-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+```
+
+### En `tailwind.config.js`:
+
+```javascript
+fontFamily: {
+  sans: ['SiesaBT', 'system-ui', 'sans-serif'],
+},
+```
+
+## 🚀 Uso en Componentes
+
+### Con Tailwind CSS:
+
+```tsx
+// Regular (400)
+<p className="font-normal">
+  Texto con peso regular
+</p>
+
+// Light (300)
+<p className="font-light">
+  Texto con peso ligero
+</p>
+
+// Bold (700)
+<h1 className="font-bold">
+  Título con peso negrita
+</h1>
+```
+
+### Directamente con CSS:
+
+```css
+.my-text {
+  font-family: 'SiesaBT', sans-serif;
+  font-weight: 400; /* Regular */
+}
+
+.my-title {
+  font-family: 'SiesaBT', sans-serif;
+  font-weight: 700; /* Bold */
+}
+```
+
+## 📐 Sistema Tipográfico
+
+El proyecto utiliza un sistema tipográfico estructurado basado en Tailwind:
+
+### Escalas de Tamaño
+
+```tsx
+text-xs   // 12px - Label Tiny
+text-sm   // 14px - Label Small
+text-base // 16px - Body Base
+text-lg   // 18px - Body Large
+text-xl   // 20px - Heading Small
+text-2xl  // 24px - Heading Medium
+text-3xl  // 30px - Heading Large
+text-4xl  // 36px - Display Small
+```
+
+### Combinaciones Comunes
+
+```tsx
+// Botones
+<button className="font-bold text-sm">Button</button>
+
+// Títulos de sección
+<h2 className="font-bold text-2xl">Section Title</h2>
+
+// Párrafos
+<p className="font-normal text-base">Regular text content</p>
+
+// Labels
+<label className="font-bold text-xs">Input Label</label>
+```
+
+## ⚡ Optimización
+
+### Font Display Strategy
+
+Todas las fuentes usan `font-display: swap` para:
+- Mostrar texto inmediatamente con fuente fallback
+- Cambiar a la fuente personalizada cuando cargue
+- Evitar FOIT (Flash of Invisible Text)
+
+### Preload (Opcional)
+
+Para fonts críticos que se usan inmediatamente:
+
+```html
+<!-- En index.html -->
+<link
+  rel="preload"
+  href="/src/assets/fonts/SiesaBT/SiesaBT-Bold.otf"
+  as="font"
+  type="font/otf"
+  crossorigin
+/>
+```
+
+## 🔄 Proceso de Build
+
+Durante el build de Vite:
+1. Las fuentes son detectadas automáticamente
+2. Se copian a `dist/assets/` con hash de versión
+3. Las referencias en CSS se actualizan automáticamente
+
+```
+dist/
+└── assets/
+    ├── SiesaBT-Bold-[hash].otf
+    ├── SiesaBT-Light-[hash].otf
+    ├── SiesaBT-Regular-[hash].otf
+    └── index-[hash].css (con referencias actualizadas)
+```
+
+## 📚 Documentación Relacionada
+
+Para más información sobre el sistema tipográfico completo:
+- `docs/typography.md` - Guía completa de tipografía
+- `tailwind.config.js` - Configuración de fuentes en Tailwind
+- `src/index.css` - Declaraciones @font-face
+
+## 🆕 Agregar Nuevas Fuentes
+
+Si necesitas agregar una nueva familia tipográfica:
+
+1. **Crear carpeta**:
+   ```
+   src/assets/fonts/NuevaFuente/
+   ```
+
+2. **Agregar archivos**:
+   ```
+   NuevaFuente-Regular.otf
+   NuevaFuente-Bold.otf
+   etc.
+   ```
+
+3. **Declarar en `src/index.css`**:
+   ```css
+   @font-face {
+     font-family: 'NuevaFuente';
+     src: url('./assets/fonts/NuevaFuente/NuevaFuente-Regular.otf') format('opentype');
+     font-weight: 400;
+     font-style: normal;
+     font-display: swap;
+   }
+   ```
+
+4. **Configurar en `tailwind.config.js`**:
+   ```javascript
+   fontFamily: {
+     nueva: ['NuevaFuente', 'sans-serif'],
+   },
+   ```
+
+5. **Usar en código**:
+   ```tsx
+   <p className="font-nueva">Texto con nueva fuente</p>
+   ```
+
+## 📏 Mejores Prácticas
+
+### ✅ Hacer
+
+- Usar los pesos definidos (300, 400, 700)
+- Mantener consistencia con el sistema tipográfico
+- Usar Tailwind utilities cuando sea posible
+- Incluir fallback fonts (`sans-serif`)
+- Usar `font-display: swap`
+
+### ❌ Evitar
+
+- Agregar pesos de fuente no disponibles
+- Usar `font-display: block` (causa FOIT)
+- Referencias absolutas a fuentes
+- Cargar fuentes innecesarias
+- Múltiples declaraciones de la misma fuente
+
+## 🔍 Troubleshooting
+
+### Fuente no se carga
+
+1. Verificar ruta en `src/index.css`
+2. Verificar que el archivo existe en `src/assets/fonts/SiesaBT/`
+3. Limpiar build: `rm -rf dist && npm run build`
+4. Verificar consola del navegador
+
+### Peso incorrecto
+
+Verificar que uses el `font-weight` correcto:
+```css
+font-weight: 300; /* Light */
+font-weight: 400; /* Regular */
+font-weight: 700; /* Bold */
+```
+
+### Build falla
+
+Si el build falla después de mover fuentes:
+1. Limpiar caché: `rm -rf node_modules/.vite`
+2. Rebuild: `npm run build`
+
+---
+
+**Última actualización**: 2025-11-11
+**Versión**: 1.0.0
+**Mantenedor**: Siesa UI Kit Team

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,332 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Alert } from './Alert';
+import { Input } from '../Input/Input';
+import { useState } from 'react';
+
+/**
+ * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
+ *
+ * Sistema completo para mostrar diálogos de confirmación con soporte para:
+ * - **Título y descripción**: Texto principal y secundario
+ * - **Contenido personalizado**: Children para inputs, placeholders, etc.
+ * - **Botones de acción**: Personalizables o por defecto
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente para mostrar diálogos de confirmación y alertas. Ideal para confirmaciones de acciones destructivas, advertencias, o cualquier acción que requiera confirmación del usuario.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título del alert (texto principal)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción opcional (texto secundario)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    children: {
+      control: false,
+      description: 'Contenido opcional del body',
+      table: {
+        type: { summary: 'ReactNode' },
+        category: 'Content',
+      },
+    },
+    cancelText: {
+      control: 'text',
+      description: 'Texto del botón de cancelar',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Cancelar' },
+        category: 'Actions',
+      },
+    },
+    confirmText: {
+      control: 'text',
+      description: 'Texto del botón de confirmar',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Confirmar' },
+        category: 'Actions',
+      },
+    },
+    onCancel: {
+      action: 'cancelled',
+      description: 'Callback cuando se hace click en Cancel',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Actions',
+      },
+    },
+    onConfirm: {
+      action: 'confirmed',
+      description: 'Callback cuando se hace click en Confirm',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Actions',
+      },
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con el Alert en tiempo real.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    title: '¿Está seguro de que desea reembolsar este pago?',
+    description:
+      'El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento.',
+    cancelText: 'Cancelar',
+    confirmText: 'Reembolsar',
+  },
+};
+
+// ============================================
+// 2. TODAS LAS VARIANTES
+// ============================================
+
+/**
+ * Todas las Variantes
+ *
+ * Vista de todas las variantes del Alert según Figma.
+ */
+export const AllVariants: Story = {
+  name: 'Todas las Variantes',
+  args: {
+    title: '',
+    description: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* 1. Con descripción */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Descripción</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          description="El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        />
+      </div>
+
+      {/* 2. Sin descripción */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Descripción</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        />
+      </div>
+
+      {/* 3. Con placeholder */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Placeholder</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          description="El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        >
+          <div className="bg-background-secondary dark:bg-gray-700 border border-border-primary dark:border-dark-border-primary border-dashed h-16 rounded flex items-center justify-center">
+            <p className="text-xs font-bold text-content-tertiary dark:text-content-tertiary">
+              Marcador de Posición
+            </p>
+          </div>
+        </Alert>
+      </div>
+
+      {/* 4. Con input */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Input</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          description="El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        >
+          <Input placeholder="****" fullWidth />
+        </Alert>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON INPUT INTERACTIVO
+// ============================================
+
+/**
+ * Con Input Interactivo
+ *
+ * Ejemplo de Alert con un campo de input funcional.
+ */
+export const WithInput: Story = {
+  name: 'Con Input Interactivo',
+  args: {
+    title: '',
+    description: '',
+  },
+  render: () => {
+    const InteractiveAlert = () => {
+      const [value, setValue] = useState('');
+
+      return (
+        <Alert
+          title="Ingrese el código de confirmación"
+          description="Por favor ingrese el código de 4 dígitos enviado a su correo electrónico."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed with value:', value)}
+          confirmText="Verificar"
+        >
+          <Input
+            placeholder="Ingrese el código"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            fullWidth
+          />
+        </Alert>
+      );
+    };
+
+    return <InteractiveAlert />;
+  },
+};
+
+// ============================================
+// 4. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar Alert en situaciones reales.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  args: {
+    title: '',
+    description: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Delete Confirmation */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Confirmación de Eliminación</h3>
+        <Alert
+          title="¿Eliminar este elemento permanentemente?"
+          description="Esta acción no se puede deshacer. Todos los datos asociados con este elemento serán eliminados permanentemente."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Deleted')}
+          cancelText="Cancelar"
+          confirmText="Eliminar"
+        />
+      </div>
+
+      {/* Logout Confirmation */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Confirmación de Cierre de Sesión</h3>
+        <Alert
+          title="¿Está seguro de que desea cerrar sesión?"
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Logged out')}
+          cancelText="Permanecer"
+          confirmText="Cerrar Sesión"
+        />
+      </div>
+
+      {/* Save Changes */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Guardar Cambios</h3>
+        <Alert
+          title="¿Guardar cambios antes de salir?"
+          description="Tiene cambios sin guardar. ¿Desea guardarlos antes de salir de esta página?"
+          onCancel={() => console.log('Discarded')}
+          onConfirm={() => console.log('Saved')}
+          cancelText="Descartar"
+          confirmText="Guardar"
+        />
+      </div>
+
+      {/* Cancel Subscription */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Cancelar Suscripción</h3>
+        <Alert
+          title="¿Cancelar su suscripción?"
+          description="Su suscripción permanecerá activa hasta el final de su período de facturación actual."
+          onCancel={() => console.log('Keep subscription')}
+          onConfirm={() => console.log('Cancelled subscription')}
+          cancelText="Mantener Suscripción"
+          confirmText="Cancelar Suscripción"
+        />
+      </div>
+
+      {/* Reset Settings */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Restablecer Configuración</h3>
+        <Alert
+          title="¿Restablecer toda la configuración a los valores predeterminados?"
+          description="Esto restablecerá todas sus preferencias y configuraciones a sus valores predeterminados."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Reset')}
+          cancelText="Cancelar"
+          confirmText="Restablecer"
+        />
+      </div>
+
+      {/* Archive Item */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Archivar Elemento</h3>
+        <Alert
+          title="¿Archivar este proyecto?"
+          description="Los proyectos archivados pueden restaurarse más tarde desde la sección de archivos."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Archived')}
+          cancelText="Cancelar"
+          confirmText="Archivar"
+        />
+      </div>
+    </div>
+  ),
+};