@adamosuiteservices/ui 1.8.13 → 1.9.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/icon/icon.d.ts +11 -0
- package/dist/components/ui/icon/icon.stories.d.ts +55 -0
- package/dist/components/ui/icon/index.d.ts +1 -0
- package/dist/components/ui/input-group/input-group.d.ts +1 -1
- package/dist/custom-layered-styles.css +1 -1
- package/dist/icon.cjs +6 -0
- package/dist/icon.js +36 -0
- package/dist/icons.css +1 -0
- package/dist/styles.css +1 -1
- package/docs/AI-GUIDE.md +321 -321
- package/docs/components/layout/sidebar.md +404 -404
- package/docs/components/layout/toaster.md +436 -436
- package/docs/components/ui/accordion-rounded.md +583 -583
- package/docs/components/ui/accordion.md +267 -267
- package/docs/components/ui/alert.md +671 -671
- package/docs/components/ui/avatar.md +588 -588
- package/docs/components/ui/badge.md +1024 -1024
- package/docs/components/ui/button-group.md +1002 -1002
- package/docs/components/ui/button.md +1078 -1078
- package/docs/components/ui/calendar.md +1159 -1159
- package/docs/components/ui/card.md +1265 -1265
- package/docs/components/ui/checkbox.md +292 -292
- package/docs/components/ui/collapsible.md +320 -320
- package/docs/components/ui/command.md +454 -454
- package/docs/components/ui/context-menu.md +540 -540
- package/docs/components/ui/dialog.md +628 -628
- package/docs/components/ui/dropdown-menu.md +731 -731
- package/docs/components/ui/field.md +706 -706
- package/docs/components/ui/hover-card.md +446 -446
- package/docs/components/ui/icon.md +502 -0
- package/docs/components/ui/input-group.md +509 -509
- package/docs/components/ui/input.md +362 -362
- package/docs/components/ui/kbd.md +434 -434
- package/docs/components/ui/label.md +359 -359
- package/docs/components/ui/pagination.md +650 -650
- package/docs/components/ui/popover.md +536 -536
- package/docs/components/ui/progress.md +182 -182
- package/docs/components/ui/radio-group.md +311 -311
- package/docs/components/ui/select.md +352 -352
- package/docs/components/ui/separator.md +214 -214
- package/docs/components/ui/sheet.md +142 -142
- package/docs/components/ui/skeleton.md +140 -140
- package/docs/components/ui/slider.md +341 -341
- package/docs/components/ui/spinner.md +170 -170
- package/docs/components/ui/switch.md +402 -402
- package/docs/components/ui/table.md +183 -183
- package/docs/components/ui/tabs-underline.md +106 -106
- package/docs/components/ui/tabs.md +122 -122
- package/docs/components/ui/textarea.md +243 -243
- package/docs/components/ui/toggle.md +243 -243
- package/docs/components/ui/tooltip.md +320 -320
- package/docs/components/ui/typography.md +191 -191
- package/package.json +6 -5
- package/dist/components/icons/account-balance-icon.d.ts +0 -3
- package/dist/components/icons/account-icon.d.ts +0 -3
- package/dist/components/icons/add-circle-icon.d.ts +0 -3
- package/dist/components/icons/alarm-icon.d.ts +0 -3
- package/dist/components/icons/archive-icon.d.ts +0 -3
- package/dist/components/icons/arrow-back-icon.d.ts +0 -3
- package/dist/components/icons/arrow-circle-up-icon.d.ts +0 -3
- package/dist/components/icons/arrow-forward-icon.d.ts +0 -3
- package/dist/components/icons/arrow-outward-icon.d.ts +0 -3
- package/dist/components/icons/article-icon.d.ts +0 -3
- package/dist/components/icons/attach-file-icon.d.ts +0 -3
- package/dist/components/icons/autorenew-icon.d.ts +0 -3
- package/dist/components/icons/bookmark-icon.d.ts +0 -3
- package/dist/components/icons/calculate-icon.d.ts +0 -3
- package/dist/components/icons/calendar-today-icon.d.ts +0 -3
- package/dist/components/icons/call-split-icon.d.ts +0 -3
- package/dist/components/icons/cancel-filled-icon.d.ts +0 -3
- package/dist/components/icons/cancel-icon.d.ts +0 -3
- package/dist/components/icons/check-circle-icon.d.ts +0 -3
- package/dist/components/icons/check-icon.d.ts +0 -3
- package/dist/components/icons/chevron-back-icon.d.ts +0 -3
- package/dist/components/icons/chevron-down-icon.d.ts +0 -3
- package/dist/components/icons/chevron-forward-icon.d.ts +0 -3
- package/dist/components/icons/chevron-up-icon.d.ts +0 -3
- package/dist/components/icons/clarify-icon.d.ts +0 -3
- package/dist/components/icons/clock-icon.d.ts +0 -3
- package/dist/components/icons/close-icon.d.ts +0 -3
- package/dist/components/icons/confirmation-number-icon.d.ts +0 -3
- package/dist/components/icons/contacts-icon.d.ts +0 -3
- package/dist/components/icons/contract-delete-icon.d.ts +0 -3
- package/dist/components/icons/copy-icon.d.ts +0 -3
- package/dist/components/icons/do-not-touch-icon.d.ts +0 -3
- package/dist/components/icons/download-icon.d.ts +0 -3
- package/dist/components/icons/dragger-icon.d.ts +0 -3
- package/dist/components/icons/edit-icon.d.ts +0 -3
- package/dist/components/icons/edit-square-icon.d.ts +0 -3
- package/dist/components/icons/exclamation-icon.d.ts +0 -3
- package/dist/components/icons/expand-circle-right-icon.d.ts +0 -3
- package/dist/components/icons/feature-search-icon.d.ts +0 -3
- package/dist/components/icons/filter-icon.d.ts +0 -3
- package/dist/components/icons/folder-icon.d.ts +0 -3
- package/dist/components/icons/folder-open-icon.d.ts +0 -3
- package/dist/components/icons/format-list-bulleted-icon.d.ts +0 -3
- package/dist/components/icons/hamburger-menu-icon.d.ts +0 -3
- package/dist/components/icons/help-icon.d.ts +0 -3
- package/dist/components/icons/hide-pass-icon.d.ts +0 -3
- package/dist/components/icons/home-icon.d.ts +0 -3
- package/dist/components/icons/id-card-icon.d.ts +0 -3
- package/dist/components/icons/index.d.ts +0 -88
- package/dist/components/icons/info-icon.d.ts +0 -3
- package/dist/components/icons/kid-star-icon.d.ts +0 -3
- package/dist/components/icons/language-icon.d.ts +0 -3
- package/dist/components/icons/last-page-icon.d.ts +0 -3
- package/dist/components/icons/layers-icon.d.ts +0 -3
- package/dist/components/icons/location-icon.d.ts +0 -3
- package/dist/components/icons/mail-icon.d.ts +0 -3
- package/dist/components/icons/manage-search-icon.d.ts +0 -3
- package/dist/components/icons/menu-icon.d.ts +0 -3
- package/dist/components/icons/message-icon.d.ts +0 -3
- package/dist/components/icons/metrics-icon.d.ts +0 -3
- package/dist/components/icons/mic-icon.d.ts +0 -3
- package/dist/components/icons/minus-icon.d.ts +0 -3
- package/dist/components/icons/mode-comment-icon.d.ts +0 -3
- package/dist/components/icons/money-icon.d.ts +0 -3
- package/dist/components/icons/monitoring-icon.d.ts +0 -3
- package/dist/components/icons/more-icon.d.ts +0 -3
- package/dist/components/icons/notifications-icon.d.ts +0 -3
- package/dist/components/icons/open-in-new-icon.d.ts +0 -3
- package/dist/components/icons/palette-icon.d.ts +0 -3
- package/dist/components/icons/password-icon.d.ts +0 -3
- package/dist/components/icons/pending-icon.d.ts +0 -3
- package/dist/components/icons/person-add-icon.d.ts +0 -3
- package/dist/components/icons/person-search-icon.d.ts +0 -3
- package/dist/components/icons/photo-icon.d.ts +0 -3
- package/dist/components/icons/plus-icon.d.ts +0 -3
- package/dist/components/icons/policy-icon.d.ts +0 -3
- package/dist/components/icons/publish-icon.d.ts +0 -3
- package/dist/components/icons/ready-icon.d.ts +0 -3
- package/dist/components/icons/receipt-icon.d.ts +0 -3
- package/dist/components/icons/receive-icon.d.ts +0 -3
- package/dist/components/icons/refresh-icon.d.ts +0 -3
- package/dist/components/icons/search-icon.d.ts +0 -3
- package/dist/components/icons/see-icon.d.ts +0 -3
- package/dist/components/icons/send-icon.d.ts +0 -3
- package/dist/components/icons/settings-icon.d.ts +0 -3
- package/dist/components/icons/shield-icon.d.ts +0 -3
- package/dist/components/icons/swap-horiz-icon.d.ts +0 -3
- package/dist/components/icons/tag-icon.d.ts +0 -3
- package/dist/components/icons/trash-icon.d.ts +0 -3
- package/dist/icons.cjs +0 -1
- package/dist/icons.js +0 -1507
|
@@ -1,191 +1,191 @@
|
|
|
1
|
-
# Typography
|
|
2
|
-
|
|
3
|
-
Sistema de estilos de texto con variantes de tamaño. Wrapper flexible con soporte `asChild`.
|
|
4
|
-
|
|
5
|
-
## Importación
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
import { Typography } from "@adamosuiteservices/ui/typography";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Anatomía
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
<Typography variant="md">Default paragraph text.</Typography>
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
**Componentes**: 1 (Typography)
|
|
18
|
-
|
|
19
|
-
## Props
|
|
20
|
-
|
|
21
|
-
| Prop | Tipo | Descripción |
|
|
22
|
-
| ----------- | ------------------------------------------- | --------------------------------------- |
|
|
23
|
-
| `variant` | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | Tamaño del texto |
|
|
24
|
-
| `asChild` | `boolean` | Renderiza como child element (usa Slot) |
|
|
25
|
-
| `className` | `string` | Clases CSS adicionales |
|
|
26
|
-
|
|
27
|
-
**Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
|
|
28
|
-
|
|
29
|
-
## Variantes
|
|
30
|
-
|
|
31
|
-
| Variante | Font Size | Line Height | Uso |
|
|
32
|
-
| --------- | ------------- | ---------------- | -------------------------- |
|
|
33
|
-
| `lg` | `text-lg` | `leading-1` | Headings, texto enfatizado |
|
|
34
|
-
| `md` | `text-base` | `leading-0.5` | Body text default |
|
|
35
|
-
| `sm` | `text-sm` | `leading` | Secondary text, labels |
|
|
36
|
-
| `xs` | `text-xs` | `leading-[20px]` | Fine print, detalles |
|
|
37
|
-
| `caption` | `text-[11px]` | `leading-[18px]` | Captions, metadata |
|
|
38
|
-
|
|
39
|
-
## Patrones de Uso
|
|
40
|
-
|
|
41
|
-
### Básico
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
import { Typography } from "@adamosuiteservices/ui/typography";
|
|
45
|
-
|
|
46
|
-
<Typography>Default paragraph with no variant.</Typography>
|
|
47
|
-
<Typography variant="lg">Large text for emphasis.</Typography>
|
|
48
|
-
<Typography variant="sm">Small secondary text.</Typography>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### Como Headings
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
// H1
|
|
55
|
-
<Typography asChild variant="lg">
|
|
56
|
-
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
|
|
57
|
-
Main Page Heading
|
|
58
|
-
</h1>
|
|
59
|
-
</Typography>
|
|
60
|
-
|
|
61
|
-
// H2
|
|
62
|
-
<Typography asChild variant="lg">
|
|
63
|
-
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
|
|
64
|
-
Section Heading
|
|
65
|
-
</h2>
|
|
66
|
-
</Typography>
|
|
67
|
-
|
|
68
|
-
// H3
|
|
69
|
-
<Typography asChild variant="md">
|
|
70
|
-
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
|
|
71
|
-
Subsection
|
|
72
|
-
</h3>
|
|
73
|
-
</Typography>
|
|
74
|
-
|
|
75
|
-
// H4
|
|
76
|
-
<Typography asChild variant="md">
|
|
77
|
-
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
|
|
78
|
-
Small Heading
|
|
79
|
-
</h4>
|
|
80
|
-
</Typography>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Paragraph
|
|
84
|
-
|
|
85
|
-
```tsx
|
|
86
|
-
<Typography asChild variant="md">
|
|
87
|
-
<p className="leading-7 [&:not(:first-child)]:mt-6">
|
|
88
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
89
|
-
</p>
|
|
90
|
-
</Typography>
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Blockquote
|
|
94
|
-
|
|
95
|
-
```tsx
|
|
96
|
-
<Typography asChild variant="md">
|
|
97
|
-
<blockquote className="mt-6 border-l-2 pl-6 italic">
|
|
98
|
-
"This is a quote with proper styling and emphasis."
|
|
99
|
-
</blockquote>
|
|
100
|
-
</Typography>
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
### Inline Code
|
|
104
|
-
|
|
105
|
-
```tsx
|
|
106
|
-
<Typography asChild variant="sm">
|
|
107
|
-
<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
|
|
108
|
-
@radix-ui/react-alert-dialog
|
|
109
|
-
</code>
|
|
110
|
-
</Typography>
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
### Lead Text
|
|
114
|
-
|
|
115
|
-
```tsx
|
|
116
|
-
<Typography asChild variant="lg">
|
|
117
|
-
<p className="text-xl text-muted-foreground">
|
|
118
|
-
An introductory paragraph that stands out from regular body text.
|
|
119
|
-
</p>
|
|
120
|
-
</Typography>
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
### Small / Fine Print
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
<Typography asChild variant="sm">
|
|
127
|
-
<small className="text-sm font-medium leading-none">Email address</small>
|
|
128
|
-
</Typography>
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### Muted Text
|
|
132
|
-
|
|
133
|
-
```tsx
|
|
134
|
-
<Typography asChild variant="sm">
|
|
135
|
-
<p className="text-sm text-muted-foreground">
|
|
136
|
-
Secondary information with reduced emphasis.
|
|
137
|
-
</p>
|
|
138
|
-
</Typography>
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
### Caption
|
|
142
|
-
|
|
143
|
-
```tsx
|
|
144
|
-
<Typography variant="caption">
|
|
145
|
-
Image caption or metadata · Published 2 hours ago
|
|
146
|
-
</Typography>
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
## Casos de Uso
|
|
150
|
-
|
|
151
|
-
**Headings**: H1-H6 con tamaños consistentes
|
|
152
|
-
**Body text**: Párrafos y contenido principal
|
|
153
|
-
**Labels**: Etiquetas de formularios
|
|
154
|
-
**Captions**: Descripciones de imágenes, metadata
|
|
155
|
-
**Fine print**: Términos, condiciones, notas
|
|
156
|
-
**Quotes**: Citas y testimonios
|
|
157
|
-
|
|
158
|
-
## Estilos Base
|
|
159
|
-
|
|
160
|
-
- **lg**: 18px, line-height: leading-1
|
|
161
|
-
- **md**: 16px, line-height: leading-0.5 (default)
|
|
162
|
-
- **sm**: 14px, line-height: leading
|
|
163
|
-
- **xs**: 12px, line-height: 20px
|
|
164
|
-
- **caption**: 11px, line-height: 18px
|
|
165
|
-
|
|
166
|
-
## Accesibilidad
|
|
167
|
-
|
|
168
|
-
- ✅ **Semantic HTML**: Usa `asChild` con elementos semánticos apropiados
|
|
169
|
-
- ✅ **Heading hierarchy**: Mantén orden lógico de headings (H1 → H2 → H3)
|
|
170
|
-
- ✅ **Contrast**: Asegura contraste suficiente con backgrounds
|
|
171
|
-
- ⚠️ **No usar solo para estilo**: Usa elementos semánticos apropiados
|
|
172
|
-
|
|
173
|
-
## Notas de Implementación
|
|
174
|
-
|
|
175
|
-
- **CVA**: Variantes con class-variance-authority
|
|
176
|
-
- **Slot**: Usa `@radix-ui/react-slot` para `asChild`
|
|
177
|
-
- **Default element**: `<p>` cuando `asChild=false`
|
|
178
|
-
- **Data attribute**: `data-slot="typography"` para identificación
|
|
179
|
-
- **No estilos de color**: Typography solo define tamaño/line-height, combina con utility classes para color/weight
|
|
180
|
-
|
|
181
|
-
## Troubleshooting
|
|
182
|
-
|
|
183
|
-
**Variant no aplica**: Verifica que variant esté entre las opciones válidas
|
|
184
|
-
**asChild no funciona**: Asegura que child sea un elemento válido, no texto plano
|
|
185
|
-
**Line height incorrecto**: Typography define line-heights base, pueden ser sobrescritos con className
|
|
186
|
-
**No semantic HTML**: Usa `asChild` con elementos apropiados (h1, h2, p, etc.)
|
|
187
|
-
|
|
188
|
-
## Referencias
|
|
189
|
-
|
|
190
|
-
- **shadcn/ui Typography**: <https://ui.shadcn.com/docs/components/typography>
|
|
191
|
-
- **Tailwind Typography**: <https://tailwindcss.com/docs/typography-plugin>
|
|
1
|
+
# Typography
|
|
2
|
+
|
|
3
|
+
Sistema de estilos de texto con variantes de tamaño. Wrapper flexible con soporte `asChild`.
|
|
4
|
+
|
|
5
|
+
## Importación
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Typography } from "@adamosuiteservices/ui/typography";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Anatomía
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<Typography variant="md">Default paragraph text.</Typography>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
**Componentes**: 1 (Typography)
|
|
18
|
+
|
|
19
|
+
## Props
|
|
20
|
+
|
|
21
|
+
| Prop | Tipo | Descripción |
|
|
22
|
+
| ----------- | ------------------------------------------- | --------------------------------------- |
|
|
23
|
+
| `variant` | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | Tamaño del texto |
|
|
24
|
+
| `asChild` | `boolean` | Renderiza como child element (usa Slot) |
|
|
25
|
+
| `className` | `string` | Clases CSS adicionales |
|
|
26
|
+
|
|
27
|
+
**Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
|
|
28
|
+
|
|
29
|
+
## Variantes
|
|
30
|
+
|
|
31
|
+
| Variante | Font Size | Line Height | Uso |
|
|
32
|
+
| --------- | ------------- | ---------------- | -------------------------- |
|
|
33
|
+
| `lg` | `text-lg` | `leading-1` | Headings, texto enfatizado |
|
|
34
|
+
| `md` | `text-base` | `leading-0.5` | Body text default |
|
|
35
|
+
| `sm` | `text-sm` | `leading` | Secondary text, labels |
|
|
36
|
+
| `xs` | `text-xs` | `leading-[20px]` | Fine print, detalles |
|
|
37
|
+
| `caption` | `text-[11px]` | `leading-[18px]` | Captions, metadata |
|
|
38
|
+
|
|
39
|
+
## Patrones de Uso
|
|
40
|
+
|
|
41
|
+
### Básico
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Typography } from "@adamosuiteservices/ui/typography";
|
|
45
|
+
|
|
46
|
+
<Typography>Default paragraph with no variant.</Typography>
|
|
47
|
+
<Typography variant="lg">Large text for emphasis.</Typography>
|
|
48
|
+
<Typography variant="sm">Small secondary text.</Typography>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Como Headings
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
// H1
|
|
55
|
+
<Typography asChild variant="lg">
|
|
56
|
+
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
|
|
57
|
+
Main Page Heading
|
|
58
|
+
</h1>
|
|
59
|
+
</Typography>
|
|
60
|
+
|
|
61
|
+
// H2
|
|
62
|
+
<Typography asChild variant="lg">
|
|
63
|
+
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
|
|
64
|
+
Section Heading
|
|
65
|
+
</h2>
|
|
66
|
+
</Typography>
|
|
67
|
+
|
|
68
|
+
// H3
|
|
69
|
+
<Typography asChild variant="md">
|
|
70
|
+
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
|
|
71
|
+
Subsection
|
|
72
|
+
</h3>
|
|
73
|
+
</Typography>
|
|
74
|
+
|
|
75
|
+
// H4
|
|
76
|
+
<Typography asChild variant="md">
|
|
77
|
+
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
|
|
78
|
+
Small Heading
|
|
79
|
+
</h4>
|
|
80
|
+
</Typography>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Paragraph
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<Typography asChild variant="md">
|
|
87
|
+
<p className="leading-7 [&:not(:first-child)]:mt-6">
|
|
88
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
89
|
+
</p>
|
|
90
|
+
</Typography>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Blockquote
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<Typography asChild variant="md">
|
|
97
|
+
<blockquote className="mt-6 border-l-2 pl-6 italic">
|
|
98
|
+
"This is a quote with proper styling and emphasis."
|
|
99
|
+
</blockquote>
|
|
100
|
+
</Typography>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Inline Code
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
<Typography asChild variant="sm">
|
|
107
|
+
<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
|
|
108
|
+
@radix-ui/react-alert-dialog
|
|
109
|
+
</code>
|
|
110
|
+
</Typography>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Lead Text
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
<Typography asChild variant="lg">
|
|
117
|
+
<p className="text-xl text-muted-foreground">
|
|
118
|
+
An introductory paragraph that stands out from regular body text.
|
|
119
|
+
</p>
|
|
120
|
+
</Typography>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Small / Fine Print
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
<Typography asChild variant="sm">
|
|
127
|
+
<small className="text-sm font-medium leading-none">Email address</small>
|
|
128
|
+
</Typography>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Muted Text
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
<Typography asChild variant="sm">
|
|
135
|
+
<p className="text-sm text-muted-foreground">
|
|
136
|
+
Secondary information with reduced emphasis.
|
|
137
|
+
</p>
|
|
138
|
+
</Typography>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Caption
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
<Typography variant="caption">
|
|
145
|
+
Image caption or metadata · Published 2 hours ago
|
|
146
|
+
</Typography>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Casos de Uso
|
|
150
|
+
|
|
151
|
+
**Headings**: H1-H6 con tamaños consistentes
|
|
152
|
+
**Body text**: Párrafos y contenido principal
|
|
153
|
+
**Labels**: Etiquetas de formularios
|
|
154
|
+
**Captions**: Descripciones de imágenes, metadata
|
|
155
|
+
**Fine print**: Términos, condiciones, notas
|
|
156
|
+
**Quotes**: Citas y testimonios
|
|
157
|
+
|
|
158
|
+
## Estilos Base
|
|
159
|
+
|
|
160
|
+
- **lg**: 18px, line-height: leading-1
|
|
161
|
+
- **md**: 16px, line-height: leading-0.5 (default)
|
|
162
|
+
- **sm**: 14px, line-height: leading
|
|
163
|
+
- **xs**: 12px, line-height: 20px
|
|
164
|
+
- **caption**: 11px, line-height: 18px
|
|
165
|
+
|
|
166
|
+
## Accesibilidad
|
|
167
|
+
|
|
168
|
+
- ✅ **Semantic HTML**: Usa `asChild` con elementos semánticos apropiados
|
|
169
|
+
- ✅ **Heading hierarchy**: Mantén orden lógico de headings (H1 → H2 → H3)
|
|
170
|
+
- ✅ **Contrast**: Asegura contraste suficiente con backgrounds
|
|
171
|
+
- ⚠️ **No usar solo para estilo**: Usa elementos semánticos apropiados
|
|
172
|
+
|
|
173
|
+
## Notas de Implementación
|
|
174
|
+
|
|
175
|
+
- **CVA**: Variantes con class-variance-authority
|
|
176
|
+
- **Slot**: Usa `@radix-ui/react-slot` para `asChild`
|
|
177
|
+
- **Default element**: `<p>` cuando `asChild=false`
|
|
178
|
+
- **Data attribute**: `data-slot="typography"` para identificación
|
|
179
|
+
- **No estilos de color**: Typography solo define tamaño/line-height, combina con utility classes para color/weight
|
|
180
|
+
|
|
181
|
+
## Troubleshooting
|
|
182
|
+
|
|
183
|
+
**Variant no aplica**: Verifica que variant esté entre las opciones válidas
|
|
184
|
+
**asChild no funciona**: Asegura que child sea un elemento válido, no texto plano
|
|
185
|
+
**Line height incorrecto**: Typography define line-heights base, pueden ser sobrescritos con className
|
|
186
|
+
**No semantic HTML**: Usa `asChild` con elementos apropiados (h1, h2, p, etc.)
|
|
187
|
+
|
|
188
|
+
## Referencias
|
|
189
|
+
|
|
190
|
+
- **shadcn/ui Typography**: <https://ui.shadcn.com/docs/components/typography>
|
|
191
|
+
- **Tailwind Typography**: <https://tailwindcss.com/docs/typography-plugin>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adamosuiteservices/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.14",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"./colors.css": "./dist/colors.css",
|
|
14
14
|
"./custom-scroll-bar.css": "./dist/custom-scroll-bar.css",
|
|
15
15
|
"./fonts.css": "./dist/fonts.css",
|
|
16
|
+
"./icons.css": "./dist/icons.css",
|
|
16
17
|
"./radius.css": "./dist/radius.css",
|
|
17
18
|
"./space.css": "./dist/space.css",
|
|
18
19
|
"./themes.css": "./dist/themes.css",
|
|
@@ -30,10 +31,6 @@
|
|
|
30
31
|
"types": "./dist/lib/index.d.ts",
|
|
31
32
|
"import": "./dist/lib.js"
|
|
32
33
|
},
|
|
33
|
-
"./icons": {
|
|
34
|
-
"types": "./dist/components/icons/icons.d.ts",
|
|
35
|
-
"import": "./dist/icons.js"
|
|
36
|
-
},
|
|
37
34
|
"./sidebar": {
|
|
38
35
|
"types": "./dist/components/layout/sidebar/sidebar.d.ts",
|
|
39
36
|
"import": "./dist/sidebar.js"
|
|
@@ -114,6 +111,10 @@
|
|
|
114
111
|
"types": "./dist/components/ui/hover-card/hover-card.d.ts",
|
|
115
112
|
"import": "./dist/hover-card.js"
|
|
116
113
|
},
|
|
114
|
+
"./icon": {
|
|
115
|
+
"types": "./dist/components/ui/icon/icon.d.ts",
|
|
116
|
+
"import": "./dist/icon.js"
|
|
117
|
+
},
|
|
117
118
|
"./input": {
|
|
118
119
|
"types": "./dist/components/ui/input/input.d.ts",
|
|
119
120
|
"import": "./dist/input.js"
|