@adamosuiteservices/ui 2.10.8 → 2.10.9

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.
Files changed (33) hide show
  1. package/dist/accordion-rounded.cjs +8 -8
  2. package/dist/accordion-rounded.js +16 -16
  3. package/dist/alert.cjs +4 -4
  4. package/dist/alert.js +1 -1
  5. package/dist/calendar.cjs +1 -1
  6. package/dist/calendar.js +1 -1
  7. package/dist/card.cjs +1 -1
  8. package/dist/card.js +1 -1
  9. package/dist/colors.css +1 -1
  10. package/dist/dialog.cjs +1 -1
  11. package/dist/dialog.js +1 -1
  12. package/dist/field.cjs +1 -1
  13. package/dist/field.js +1 -1
  14. package/dist/{label-BPyIEopy.cjs → label-1jx6a0Sm.cjs} +3 -3
  15. package/dist/{label-CRkCfcdF.js → label-CrsELeIw.js} +11 -11
  16. package/dist/label.cjs +1 -1
  17. package/dist/label.js +1 -1
  18. package/dist/styles.css +1 -1
  19. package/dist/table.cjs +4 -3
  20. package/dist/table.js +6 -5
  21. package/dist/tailwind-colors.css +1 -1
  22. package/dist/tailwind-theme.css +1 -1
  23. package/dist/themes.css +1 -1
  24. package/dist/toaster.cjs +1 -1
  25. package/dist/toaster.js +13 -13
  26. package/dist/typography.cjs +1 -1
  27. package/dist/typography.js +11 -11
  28. package/docs/components/layout/toaster.md +1 -1
  29. package/docs/components/ui/accordion-rounded.md +584 -584
  30. package/docs/components/ui/table.md +183 -183
  31. package/docs/components/ui/typography.md +8 -8
  32. package/package.json +1 -2
  33. package/dist/custom-layered-styles.css +0 -1
package/docs/components/ui/table.md CHANGED
@@ -1,183 +1,183 @@
1
- # Table
2
-
3
- Tabla HTML semántica con estilos. 8 componentes para estructura completa.
4
-
5
- ## Descripción
6
-
7
- El componente `Table` muestra datos en formato tabular.
8
-
9
- ## Importación
10
-
11
- ```typescript
12
- import {
13
- Table,
14
- TableBody,
15
- TableCaption,
16
- TableCell,
17
- TableHead,
18
- TableHeader,
19
- TableRow,
20
- TableFooter,
21
- } from "@adamosuiteservices/ui/table";
22
- ```
23
-
24
- ## Anatomía
25
-
26
- ```tsx
27
- <Table>
28
- <TableCaption>A list of your recent invoices.</TableCaption>
29
- <TableHeader>
30
- <TableRow>
31
- <TableHead>Invoice</TableHead>
32
- <TableHead>Status</TableHead>
33
- <TableHead>Method</TableHead>
34
- <TableHead className="text-right">Amount</TableHead>
35
- </TableRow>
36
- </TableHeader>
37
- <TableBody>
38
- <TableRow>
39
- <TableCell className="font-medium">INV001</TableCell>
40
- <TableCell>Paid</TableCell>
41
- <TableCell>Credit Card</TableCell>
42
- <TableCell className="text-right">$250.00</TableCell>
43
- </TableRow>
44
- </TableBody>
45
- <TableFooter>
46
- <TableRow>
47
- <TableCell colSpan={3}>Total</TableCell>
48
- <TableCell className="text-right">$2,500.00</TableCell>
49
- </TableRow>
50
- </TableFooter>
51
- </Table>
52
- ```
53
-
54
- **Componentes**: 8 (Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption)
55
-
56
- ## Props
57
-
58
- Todos los componentes aceptan sus props HTML estándar más `className` para personalización.
59
-
60
- ## Patrones de Uso
61
-
62
- ### Tabla Simple
63
-
64
- ```tsx
65
- <Table>
66
- <TableHeader>
67
- <TableRow>
68
- <TableHead>Invoice</TableHead>
69
- <TableHead>Status</TableHead>
70
- <TableHead>Amount</TableHead>
71
- </TableRow>
72
- </TableHeader>
73
- <TableBody>
74
- <TableRow>
75
- <TableCell>INV001</TableCell>
76
- <TableCell>Paid</TableCell>
77
- <TableCell>$250.00</TableCell>
78
- </TableRow>
79
- <TableRow>
80
- <TableCell>INV002</TableCell>
81
- <TableCell>Pending</TableCell>
82
- <TableCell>$150.00</TableCell>
83
- </TableRow>
84
- </TableBody>
85
- </Table>
86
- ```
87
-
88
- ### Con Footer
89
-
90
- ```tsx
91
- <Table>
92
- <TableHeader>
93
- <TableRow>
94
- <TableHead>Item</TableHead>
95
- <TableHead>Quantity</TableHead>
96
- <TableHead className="text-right">Price</TableHead>
97
- </TableRow>
98
- </TableHeader>
99
- <TableBody>
100
- <TableRow>
101
- <TableCell>Product A</TableCell>
102
- <TableCell>10</TableCell>
103
- <TableCell className="text-right">$100.00</TableCell>
104
- </TableRow>
105
- </TableBody>
106
- <TableFooter>
107
- <TableRow>
108
- <TableCell colSpan={2}>Total</TableCell>
109
- <TableCell className="text-right">$2,500.00</TableCell>
110
- </TableRow>
111
- </TableFooter>
112
- </Table>
113
- ```
114
-
115
- ### Con Caption
116
-
117
- ```tsx
118
- <Table>
119
- <TableCaption>A list of your recent invoices.</TableCaption>
120
- <TableHeader>
121
- <TableRow>
122
- <TableHead>Invoice</TableHead>
123
- <TableHead>Status</TableHead>
124
- <TableHead>Amount</TableHead>
125
- </TableRow>
126
- </TableHeader>
127
- <TableBody>
128
- <TableRow>
129
- <TableCell>INV001</TableCell>
130
- <TableCell>Paid</TableCell>
131
- <TableCell>$250.00</TableCell>
132
- </TableRow>
133
- </TableBody>
134
- </Table>
135
- ```
136
-
137
- ### Con Datos Dinámicos
138
-
139
- ```tsx
140
- const invoices = [
141
- { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
142
- { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
143
- ];
144
-
145
- <Table>
146
- <TableHeader>
147
- <TableRow>
148
- <TableHead>Invoice</TableHead>
149
- <TableHead>Status</TableHead>
150
- <TableHead>Method</TableHead>
151
- <TableHead className="text-right">Amount</TableHead>
152
- </TableRow>
153
- </TableHeader>
154
- <TableBody>
155
- {invoices.map((invoice) => (
156
- <TableRow key={invoice.id}>
157
- <TableCell>{invoice.id}</TableCell>
158
- <TableCell>{invoice.status}</TableCell>
159
- <TableCell>{invoice.method}</TableCell>
160
- <TableCell className="text-right">{invoice.amount}</TableCell>
161
- </TableRow>
162
- ))}
163
- </TableBody>
164
- </Table>;
165
- ```
166
-
167
- ## Casos de Uso
168
-
169
- **Data tables**: Listados de datos
170
- **Invoices**: Facturas
171
- **Users**: Lista de usuarios
172
- **Reports**: Reportes tabulares
173
-
174
- ## Estilos Base
175
-
176
- - **Container**: `rounded-xl border` con `overflow-x-auto`
177
- - **Head**: `bg-neutrals-50 text-neutrals-500 uppercase`
178
- - **Row hover**: `hover:bg-muted/50`
179
- - **Cell**: `p-4 text-neutrals-500`
180
-
181
- ## Referencias
182
-
183
- - **shadcn/ui Table**: <https://ui.shadcn.com/docs/components/table>
1
+ # Table
2
+
3
+ Tabla HTML semántica con estilos. 8 componentes para estructura completa.
4
+
5
+ ## Descripción
6
+
7
+ El componente `Table` muestra datos en formato tabular.
8
+
9
+ ## Importación
10
+
11
+ ```typescript
12
+ import {
13
+ Table,
14
+ TableBody,
15
+ TableCaption,
16
+ TableCell,
17
+ TableHead,
18
+ TableHeader,
19
+ TableRow,
20
+ TableFooter,
21
+ } from "@adamosuiteservices/ui/table";
22
+ ```
23
+
24
+ ## Anatomía
25
+
26
+ ```tsx
27
+ <Table>
28
+ <TableCaption>A list of your recent invoices.</TableCaption>
29
+ <TableHeader>
30
+ <TableRow>
31
+ <TableHead>Invoice</TableHead>
32
+ <TableHead>Status</TableHead>
33
+ <TableHead>Method</TableHead>
34
+ <TableHead className="text-right">Amount</TableHead>
35
+ </TableRow>
36
+ </TableHeader>
37
+ <TableBody>
38
+ <TableRow>
39
+ <TableCell className="font-medium">INV001</TableCell>
40
+ <TableCell>Paid</TableCell>
41
+ <TableCell>Credit Card</TableCell>
42
+ <TableCell className="text-right">$250.00</TableCell>
43
+ </TableRow>
44
+ </TableBody>
45
+ <TableFooter>
46
+ <TableRow>
47
+ <TableCell colSpan={3}>Total</TableCell>
48
+ <TableCell className="text-right">$2,500.00</TableCell>
49
+ </TableRow>
50
+ </TableFooter>
51
+ </Table>
52
+ ```
53
+
54
+ **Componentes**: 8 (Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption)
55
+
56
+ ## Props
57
+
58
+ Todos los componentes aceptan sus props HTML estándar más `className` para personalización.
59
+
60
+ ## Patrones de Uso
61
+
62
+ ### Tabla Simple
63
+
64
+ ```tsx
65
+ <Table>
66
+ <TableHeader>
67
+ <TableRow>
68
+ <TableHead>Invoice</TableHead>
69
+ <TableHead>Status</TableHead>
70
+ <TableHead>Amount</TableHead>
71
+ </TableRow>
72
+ </TableHeader>
73
+ <TableBody>
74
+ <TableRow>
75
+ <TableCell>INV001</TableCell>
76
+ <TableCell>Paid</TableCell>
77
+ <TableCell>$250.00</TableCell>
78
+ </TableRow>
79
+ <TableRow>
80
+ <TableCell>INV002</TableCell>
81
+ <TableCell>Pending</TableCell>
82
+ <TableCell>$150.00</TableCell>
83
+ </TableRow>
84
+ </TableBody>
85
+ </Table>
86
+ ```
87
+
88
+ ### Con Footer
89
+
90
+ ```tsx
91
+ <Table>
92
+ <TableHeader>
93
+ <TableRow>
94
+ <TableHead>Item</TableHead>
95
+ <TableHead>Quantity</TableHead>
96
+ <TableHead className="text-right">Price</TableHead>
97
+ </TableRow>
98
+ </TableHeader>
99
+ <TableBody>
100
+ <TableRow>
101
+ <TableCell>Product A</TableCell>
102
+ <TableCell>10</TableCell>
103
+ <TableCell className="text-right">$100.00</TableCell>
104
+ </TableRow>
105
+ </TableBody>
106
+ <TableFooter>
107
+ <TableRow>
108
+ <TableCell colSpan={2}>Total</TableCell>
109
+ <TableCell className="text-right">$2,500.00</TableCell>
110
+ </TableRow>
111
+ </TableFooter>
112
+ </Table>
113
+ ```
114
+
115
+ ### Con Caption
116
+
117
+ ```tsx
118
+ <Table>
119
+ <TableCaption>A list of your recent invoices.</TableCaption>
120
+ <TableHeader>
121
+ <TableRow>
122
+ <TableHead>Invoice</TableHead>
123
+ <TableHead>Status</TableHead>
124
+ <TableHead>Amount</TableHead>
125
+ </TableRow>
126
+ </TableHeader>
127
+ <TableBody>
128
+ <TableRow>
129
+ <TableCell>INV001</TableCell>
130
+ <TableCell>Paid</TableCell>
131
+ <TableCell>$250.00</TableCell>
132
+ </TableRow>
133
+ </TableBody>
134
+ </Table>
135
+ ```
136
+
137
+ ### Con Datos Dinámicos
138
+
139
+ ```tsx
140
+ const invoices = [
141
+ { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
142
+ { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
143
+ ];
144
+
145
+ <Table>
146
+ <TableHeader>
147
+ <TableRow>
148
+ <TableHead>Invoice</TableHead>
149
+ <TableHead>Status</TableHead>
150
+ <TableHead>Method</TableHead>
151
+ <TableHead className="text-right">Amount</TableHead>
152
+ </TableRow>
153
+ </TableHeader>
154
+ <TableBody>
155
+ {invoices.map((invoice) => (
156
+ <TableRow key={invoice.id}>
157
+ <TableCell>{invoice.id}</TableCell>
158
+ <TableCell>{invoice.status}</TableCell>
159
+ <TableCell>{invoice.method}</TableCell>
160
+ <TableCell className="text-right">{invoice.amount}</TableCell>
161
+ </TableRow>
162
+ ))}
163
+ </TableBody>
164
+ </Table>;
165
+ ```
166
+
167
+ ## Casos de Uso
168
+
169
+ **Data tables**: Listados de datos
170
+ **Invoices**: Facturas
171
+ **Users**: Lista de usuarios
172
+ **Reports**: Reportes tabulares
173
+
174
+ ## Estilos Base
175
+
176
+ - **Container**: `rounded-xl border` con `overflow-x-auto`
177
+ - **Head**: `bg-neutrals-50 text-muted-foreground text-xs uppercase`
178
+ - **Row hover**: `hover:bg-muted/50`
179
+ - **Cell**: `p-4 text-sm text-muted-foreground`
180
+
181
+ ## Referencias
182
+
183
+ - **shadcn/ui Table**: <https://ui.shadcn.com/docs/components/table>
package/docs/components/ui/typography.md CHANGED
@@ -41,10 +41,10 @@ import { Typography } from "@adamosuiteservices/ui/typography";
41
41
 
42
42
  ### Colores
43
43
 
44
- | Color | Clase CSS | Uso |
45
- | --------- | -------------------- | -------------------------- |
46
- | `default` | `text-neutrals-700` | Texto principal (default) |
47
- | `muted` | `text-neutrals-500` | Texto secundario |
44
+ | Color | Clase CSS | Uso |
45
+ | --------- | ------------------------- | -------------------------- |
46
+ | `default` | `text-foreground` | Texto principal (default) |
47
+ | `muted` | `text-muted-foreground` | Texto secundario |
48
48
 
49
49
  ## Patrones de Uso
50
50
 
@@ -161,12 +161,12 @@ import { Typography } from "@adamosuiteservices/ui/typography";
161
161
  ```tsx
162
162
  {/* Default color - Primary text */}
163
163
  <Typography variant="md" color="default">
164
- This is primary text with default color (neutrals-700).
164
+ This is primary text with default color (foreground).
165
165
  </Typography>
166
166
 
167
167
  {/* Muted color - Secondary text */}
168
168
  <Typography variant="md" color="muted">
169
- This is secondary text with muted color (neutrals-500).
169
+ This is secondary text with muted color (muted-foreground).
170
170
  </Typography>
171
171
 
172
172
  {/* Combining with sizes */}
@@ -247,8 +247,8 @@ import { Typography } from "@adamosuiteservices/ui/typography";
247
247
 
248
248
  ### Colores de Texto
249
249
 
250
- - **default**: neutrals-700 (text-neutrals-700) - **default**
251
- - **muted**: neutrals-500 (text-neutrals-500)
250
+ - **default**: text-foreground - **default**
251
+ - **muted**: text-muted-foreground
252
252
 
253
253
  ## Accesibilidad
254
254
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adamosuiteservices/ui",
3
- "version": "2.10.8",
3
+ "version": "2.10.9",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -9,7 +9,6 @@
9
9
  "exports": {
10
10
  "./docs/*": "./docs/*",
11
11
  "./styles.css": "./dist/styles.css",
12
- "./custom-layered-styles.css": "./dist/custom-layered-styles.css",
13
12
  "./colors.css": "./dist/colors.css",
14
13
  "./custom-scroll-bar.css": "./dist/custom-scroll-bar.css",
15
14
  "./fonts.css": "./dist/fonts.css",