siesa-ui-kit 1.0.0 → 1.0.2

package/src/assets/fonts/README.md

@@ -1,261 +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
+# 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