@adamosuiteservices/ui 2.13.4 → 2.14.0

package/docs/components/ui/typography.md

@@ -1,320 +1,320 @@
-# Typography
-
-Sistema de estilos de texto con variantes de tamaño. Wrapper flexible con soporte `asChild`.
-
-## Importación
-
-```tsx
-import { Typography } from "@adamosuiteservices/ui/typography";
-```
-
-## Anatomía
-
-```tsx
-<Typography variant="md">Default paragraph text.</Typography>
-```
-
-**Componentes**: 1 (Typography)
-
-## Props
-
-| Prop        | Tipo                                        | Default     | Descripción                             |
-| ----------- | ------------------------------------------- | ----------- | --------------------------------------- |
-| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | `"sm"`      | Tamaño del texto                        |
-| `color`     | `"default" \| "muted" \| "primary" \| "success" \| "warning" \| "destructive" \| "waiting" \| "secondary"` | `"default"` | Color del texto                         |
-| `asChild`   | `boolean`                                   | `false`     | Renderiza como child element (usa Slot) |
-| `className` | `string`                                    | -           | Clases CSS adicionales                  |
-
-**Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
-
-## Variantes
-
-### Tamaños
-
-| Variante  | Font Size     | Uso                        |
-| --------- | ------------- | -------------------------- |
-| `lg`      | `text-lg`     | Headings, texto enfatizado |
-| `md`      | `text-base`   | Body text                  |
-| `sm`      | `text-sm`     | Secondary text, labels (default) |
-| `xs`      | `text-xs`     | Fine print, detalles       |
-| `caption` | `text-[11px]` | Captions, metadata         |
-
-### Colores
-
-| Color         | Clase CSS                 | Uso                                    |
-| ------------- | ------------------------- | -------------------------------------- |
-| `default`     | `text-foreground`         | Texto principal (default)              |
-| `muted`       | `text-muted-foreground`   | Texto secundario                       |
-| `primary`     | `text-primary`            | Texto con color de marca               |
-| `success`     | `text-success`            | Mensajes de éxito, confirmaciones      |
-| `warning`     | `text-warning`            | Advertencias, precauciones             |
-| `destructive` | `text-destructive`        | Errores, acciones destructivas         |
-| `waiting`     | `text-waiting`            | Estados pendientes, en progreso        |
-| `secondary`   | `text-secondary-foreground` | Texto secundario alternativo         |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-import { Typography } from "@adamosuiteservices/ui/typography";
-
-<Typography>Default paragraph with no variant.</Typography>
-<Typography variant="lg">Large text for emphasis.</Typography>
-<Typography variant="sm">Small secondary text.</Typography>
-```
-
-### Como Headings
-
-```tsx
-// H1
-<Typography asChild variant="lg">
-  <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
-    Main Page Heading
-  </h1>
-</Typography>
-
-// H2
-<Typography asChild variant="lg">
-  <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
-    Section Heading
-  </h2>
-</Typography>
-
-// H3
-<Typography asChild variant="md">
-  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-    Subsection
-  </h3>
-</Typography>
-
-// H4
-<Typography asChild variant="md">
-  <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
-    Small Heading
-  </h4>
-</Typography>
-```
-
-### Paragraph
-
-```tsx
-<Typography asChild variant="md">
-  <p className="leading-7 [&:not(:first-child)]:mt-6">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </p>
-</Typography>
-```
-
-### Blockquote
-
-```tsx
-<Typography asChild variant="md">
-  <blockquote className="mt-6 border-l-2 pl-6 italic">
-    "This is a quote with proper styling and emphasis."
-  </blockquote>
-</Typography>
-```
-
-### Inline Code
-
-```tsx
-<Typography asChild variant="sm">
-  <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-    @radix-ui/react-alert-dialog
-  </code>
-</Typography>
-```
-
-### Lead Text
-
-```tsx
-<Typography asChild variant="lg">
-  <p className="text-xl text-muted-foreground">
-    An introductory paragraph that stands out from regular body text.
-  </p>
-</Typography>
-```
-
-### Small / Fine Print
-
-```tsx
-<Typography asChild variant="sm">
-  <small className="text-sm font-medium leading-none">Email address</small>
-</Typography>
-```
-
-### Muted Text
-
-```tsx
-<Typography asChild variant="sm">
-  <p className="text-sm text-muted-foreground">
-    Secondary information with reduced emphasis.
-  </p>
-</Typography>
-```
-
-### Caption
-
-```tsx
-<Typography variant="caption">
-  Image caption or metadata · Published 2 hours ago
-</Typography>
-```
-
-### Color Variants
-
-```tsx
-{/* Default color - Primary text */}
-<Typography variant="md" color="default">
-  This is primary text with default color (foreground).
-</Typography>
-
-{/* Muted color - Secondary text */}
-<Typography variant="md" color="muted">
-  This is secondary text with muted color (muted-foreground).
-</Typography>
-
-{/* Primary brand color */}
-<Typography variant="md" color="primary">
-  Important information with brand color.
-</Typography>
-
-{/* Success messages */}
-<Typography variant="md" color="success">
-  ✓ Operation completed successfully!
-</Typography>
-
-{/* Warning messages */}
-<Typography variant="md" color="warning">
-  ⚠ Please review this information carefully.
-</Typography>
-
-{/* Error messages */}
-<Typography variant="md" color="destructive">
-  ✕ Error: File could not be uploaded.
-</Typography>
-
-{/* Pending states */}
-<Typography variant="md" color="waiting">
-  ⏳ Processing your request...
-</Typography>
-
-{/* Combining with sizes */}
-<Typography variant="lg" color="primary">
-  Large heading with brand color
-</Typography>
-
-<Typography variant="sm" color="muted">
-  Small secondary information
-</Typography>
-```
-
-## Casos de Uso
-
-**Headings**: H1-H6 con tamaños consistentes  
-**Body text**: Párrafos y contenido principal  
-**Labels**: Etiquetas de formularios  
-**Captions**: Descripciones de imágenes, metadata  
-**Fine print**: Términos, condiciones, notas  
-**Quotes**: Citas y testimonios  
-**Secondary text**: Información complementaria con `color="muted"`
-
-## Mejores Prácticas
-
-### Uso de Colores
-
-```tsx
-{/* ✅ Correcto - Color default para contenido principal */}
-<Typography variant="md" color="default">
-  This is the main content that users should read.
-</Typography>
-
-{/* ✅ Correcto - Color muted para información secundaria */}
-<Typography variant="sm" color="muted">
-  Optional description or helper text.
-</Typography>
-
-{/* ✅ Correcto - Combinar tamaño y color apropiadamente */}
-<div>
-  <Typography variant="lg" color="default">Main Heading</Typography>
-  <Typography variant="sm" color="muted">Subtitle or description</Typography>
-</div>
-
-{/* ⚠️ Evitar - Color muted en contenido principal */}
-<Typography variant="md" color="muted">
-  Important information that should be easily readable
-</Typography>
-```
-
-### Jerarquía Visual
-
-```tsx
-{/* ✅ Correcto - Jerarquía clara con tamaño y color */}
-<article>
-  <Typography variant="lg" color="default">Article Title</Typography>
-  <Typography variant="sm" color="muted">Published 2 hours ago</Typography>
-  <Typography variant="md" color="default">
-    Article content goes here with proper emphasis.
-  </Typography>
-</article>
-
-{/* ✅ Correcto - Lista con estados */}
-<div>
-  <Typography variant="md" color="default">Active item</Typography>
-  <Typography variant="md" color="muted">Inactive item</Typography>
-</div>
-```
-
-## Estilos Base
-
-### Tamaños de Texto
-
-- **lg**: 18px (text-lg)
-- **md**: 16px (text-base)
-- **sm**: 14px (text-sm) - **default**
-- **xs**: 12px (text-xs)
-- **caption**: 11px (text-[11px])
-
-### Colores de Texto
-
-- **default**: text-foreground - **default**
-- **muted**: text-muted-foreground
-- **primary**: text-primary
-- **success**: text-success
-- **warning**: text-warning
-- **destructive**: text-destructive
-- **waiting**: text-waiting
-- **secondary**: text-secondary-foreground
-
-## Accesibilidad
-
-- ✅ **Semantic HTML**: Usa `asChild` con elementos semánticos apropiados
-- ✅ **Heading hierarchy**: Mantén orden lógico de headings (H1 → H2 → H3)
-- ✅ **Contrast**: Asegura contraste suficiente con backgrounds
-- ⚠️ **No usar solo para estilo**: Usa elementos semánticos apropiados
-
-## Notas de Implementación
-
-- **CVA**: Variantes con class-variance-authority
-- **Slot**: Usa `@radix-ui/react-slot` para `asChild`
-- **Default element**: `<p>` cuando `asChild=false`
-- **Default variants**: `variant="sm"` y `color="default"`
-- **Data attribute**: `data-slot="typography"` para identificación
-- **Color variants**: 8 variantes de color para diferentes contextos semánticos:
-  - Neutral: default, muted, secondary
-  - Brand: primary
-  - States: success, warning, destructive, waiting
-- **Extensibilidad**: Combina con utility classes para estilos adicionales (weight, spacing, etc.)
-
-## Troubleshooting
-
-**Variant no aplica**: Verifica que variant esté entre las opciones válidas  
-**asChild no funciona**: Asegura que child sea un elemento válido, no texto plano  
-**Line height incorrecto**: Typography define line-heights base, pueden ser sobrescritos con className  
-**No semantic HTML**: Usa `asChild` con elementos apropiados (h1, h2, p, etc.)
-
-## Referencias
-
-- **shadcn/ui Typography**: <https://ui.shadcn.com/docs/components/typography>
-- **Tailwind Typography**: <https://tailwindcss.com/docs/typography-plugin>
+# Typography
+
+Sistema de estilos de texto con variantes de tamaño. Wrapper flexible con soporte `asChild`.
+
+## Importación
+
+```tsx
+import { Typography } from "@adamosuiteservices/ui/typography";
+```
+
+## Anatomía
+
+```tsx
+<Typography variant="md">Default paragraph text.</Typography>
+```
+
+**Componentes**: 1 (Typography)
+
+## Props
+
+| Prop        | Tipo                                        | Default     | Descripción                             |
+| ----------- | ------------------------------------------- | ----------- | --------------------------------------- |
+| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | `"sm"`      | Tamaño del texto                        |
+| `color`     | `"default" \| "muted" \| "primary" \| "success" \| "warning" \| "destructive" \| "waiting" \| "secondary"` | `"default"` | Color del texto                         |
+| `asChild`   | `boolean`                                   | `false`     | Renderiza como child element (usa Slot) |
+| `className` | `string`                                    | -           | Clases CSS adicionales                  |
+
+**Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
+
+## Variantes
+
+### Tamaños
+
+| Variante  | Font Size     | Uso                        |
+| --------- | ------------- | -------------------------- |
+| `lg`      | `text-lg`     | Headings, texto enfatizado |
+| `md`      | `text-base`   | Body text                  |
+| `sm`      | `text-sm`     | Secondary text, labels (default) |
+| `xs`      | `text-xs`     | Fine print, detalles       |
+| `caption` | `text-[11px]` | Captions, metadata         |
+
+### Colores
+
+| Color         | Clase CSS                 | Uso                                    |
+| ------------- | ------------------------- | -------------------------------------- |
+| `default`     | `text-foreground`         | Texto principal (default)              |
+| `muted`       | `text-muted-foreground`   | Texto secundario                       |
+| `primary`     | `text-primary`            | Texto con color de marca               |
+| `success`     | `text-success`            | Mensajes de éxito, confirmaciones      |
+| `warning`     | `text-warning`            | Advertencias, precauciones             |
+| `destructive` | `text-destructive`        | Errores, acciones destructivas         |
+| `waiting`     | `text-waiting`            | Estados pendientes, en progreso        |
+| `secondary`   | `text-secondary-foreground` | Texto secundario alternativo         |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Typography } from "@adamosuiteservices/ui/typography";
+
+<Typography>Default paragraph with no variant.</Typography>
+<Typography variant="lg">Large text for emphasis.</Typography>
+<Typography variant="sm">Small secondary text.</Typography>
+```
+
+### Como Headings
+
+```tsx
+// H1
+<Typography asChild variant="lg">
+  <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
+    Main Page Heading
+  </h1>
+</Typography>
+
+// H2
+<Typography asChild variant="lg">
+  <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
+    Section Heading
+  </h2>
+</Typography>
+
+// H3
+<Typography asChild variant="md">
+  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+    Subsection
+  </h3>
+</Typography>
+
+// H4
+<Typography asChild variant="md">
+  <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+    Small Heading
+  </h4>
+</Typography>
+```
+
+### Paragraph
+
+```tsx
+<Typography asChild variant="md">
+  <p className="leading-7 [&:not(:first-child)]:mt-6">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </p>
+</Typography>
+```
+
+### Blockquote
+
+```tsx
+<Typography asChild variant="md">
+  <blockquote className="mt-6 border-l-2 pl-6 italic">
+    "This is a quote with proper styling and emphasis."
+  </blockquote>
+</Typography>
+```
+
+### Inline Code
+
+```tsx
+<Typography asChild variant="sm">
+  <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+    @radix-ui/react-alert-dialog
+  </code>
+</Typography>
+```
+
+### Lead Text
+
+```tsx
+<Typography asChild variant="lg">
+  <p className="text-xl text-muted-foreground">
+    An introductory paragraph that stands out from regular body text.
+  </p>
+</Typography>
+```
+
+### Small / Fine Print
+
+```tsx
+<Typography asChild variant="sm">
+  <small className="text-sm font-medium leading-none">Email address</small>
+</Typography>
+```
+
+### Muted Text
+
+```tsx
+<Typography asChild variant="sm">
+  <p className="text-sm text-muted-foreground">
+    Secondary information with reduced emphasis.
+  </p>
+</Typography>
+```
+
+### Caption
+
+```tsx
+<Typography variant="caption">
+  Image caption or metadata · Published 2 hours ago
+</Typography>
+```
+
+### Color Variants
+
+```tsx
+{/* Default color - Primary text */}
+<Typography variant="md" color="default">
+  This is primary text with default color (foreground).
+</Typography>
+
+{/* Muted color - Secondary text */}
+<Typography variant="md" color="muted">
+  This is secondary text with muted color (muted-foreground).
+</Typography>
+
+{/* Primary brand color */}
+<Typography variant="md" color="primary">
+  Important information with brand color.
+</Typography>
+
+{/* Success messages */}
+<Typography variant="md" color="success">
+  ✓ Operation completed successfully!
+</Typography>
+
+{/* Warning messages */}
+<Typography variant="md" color="warning">
+  ⚠ Please review this information carefully.
+</Typography>
+
+{/* Error messages */}
+<Typography variant="md" color="destructive">
+  ✕ Error: File could not be uploaded.
+</Typography>
+
+{/* Pending states */}
+<Typography variant="md" color="waiting">
+  ⏳ Processing your request...
+</Typography>
+
+{/* Combining with sizes */}
+<Typography variant="lg" color="primary">
+  Large heading with brand color
+</Typography>
+
+<Typography variant="sm" color="muted">
+  Small secondary information
+</Typography>
+```
+
+## Casos de Uso
+
+**Headings**: H1-H6 con tamaños consistentes  
+**Body text**: Párrafos y contenido principal  
+**Labels**: Etiquetas de formularios  
+**Captions**: Descripciones de imágenes, metadata  
+**Fine print**: Términos, condiciones, notas  
+**Quotes**: Citas y testimonios  
+**Secondary text**: Información complementaria con `color="muted"`
+
+## Mejores Prácticas
+
+### Uso de Colores
+
+```tsx
+{/* ✅ Correcto - Color default para contenido principal */}
+<Typography variant="md" color="default">
+  This is the main content that users should read.
+</Typography>
+
+{/* ✅ Correcto - Color muted para información secundaria */}
+<Typography variant="sm" color="muted">
+  Optional description or helper text.
+</Typography>
+
+{/* ✅ Correcto - Combinar tamaño y color apropiadamente */}
+<div>
+  <Typography variant="lg" color="default">Main Heading</Typography>
+  <Typography variant="sm" color="muted">Subtitle or description</Typography>
+</div>
+
+{/* ⚠️ Evitar - Color muted en contenido principal */}
+<Typography variant="md" color="muted">
+  Important information that should be easily readable
+</Typography>
+```
+
+### Jerarquía Visual
+
+```tsx
+{/* ✅ Correcto - Jerarquía clara con tamaño y color */}
+<article>
+  <Typography variant="lg" color="default">Article Title</Typography>
+  <Typography variant="sm" color="muted">Published 2 hours ago</Typography>
+  <Typography variant="md" color="default">
+    Article content goes here with proper emphasis.
+  </Typography>
+</article>
+
+{/* ✅ Correcto - Lista con estados */}
+<div>
+  <Typography variant="md" color="default">Active item</Typography>
+  <Typography variant="md" color="muted">Inactive item</Typography>
+</div>
+```
+
+## Estilos Base
+
+### Tamaños de Texto
+
+- **lg**: 18px (text-lg)
+- **md**: 16px (text-base)
+- **sm**: 14px (text-sm) - **default**
+- **xs**: 12px (text-xs)
+- **caption**: 11px (text-[11px])
+
+### Colores de Texto
+
+- **default**: text-foreground - **default**
+- **muted**: text-muted-foreground
+- **primary**: text-primary
+- **success**: text-success
+- **warning**: text-warning
+- **destructive**: text-destructive
+- **waiting**: text-waiting
+- **secondary**: text-secondary-foreground
+
+## Accesibilidad
+
+- ✅ **Semantic HTML**: Usa `asChild` con elementos semánticos apropiados
+- ✅ **Heading hierarchy**: Mantén orden lógico de headings (H1 → H2 → H3)
+- ✅ **Contrast**: Asegura contraste suficiente con backgrounds
+- ⚠️ **No usar solo para estilo**: Usa elementos semánticos apropiados
+
+## Notas de Implementación
+
+- **CVA**: Variantes con class-variance-authority
+- **Slot**: Usa `@radix-ui/react-slot` para `asChild`
+- **Default element**: `<p>` cuando `asChild=false`
+- **Default variants**: `variant="sm"` y `color="default"`
+- **Data attribute**: `data-slot="typography"` para identificación
+- **Color variants**: 8 variantes de color para diferentes contextos semánticos:
+  - Neutral: default, muted, secondary
+  - Brand: primary
+  - States: success, warning, destructive, waiting
+- **Extensibilidad**: Combina con utility classes para estilos adicionales (weight, spacing, etc.)
+
+## Troubleshooting
+
+**Variant no aplica**: Verifica que variant esté entre las opciones válidas  
+**asChild no funciona**: Asegura que child sea un elemento válido, no texto plano  
+**Line height incorrecto**: Typography define line-heights base, pueden ser sobrescritos con className  
+**No semantic HTML**: Usa `asChild` con elementos apropiados (h1, h2, p, etc.)
+
+## Referencias
+
+- **shadcn/ui Typography**: <https://ui.shadcn.com/docs/components/typography>
+- **Tailwind Typography**: <https://tailwindcss.com/docs/typography-plugin>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.13.4",
+  "version": "2.14.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",