@adamosuiteservices/ui 2.10.8 → 2.10.10

package/docs/components/ui/table.md

@@ -1,183 +1,183 @@
-# Table
-
-Tabla HTML semántica con estilos. 8 componentes para estructura completa.
-
-## Descripción
-
-El componente `Table` muestra datos en formato tabular.
-
-## Importación
-
-```typescript
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableFooter,
-} from "@adamosuiteservices/ui/table";
-```
-
-## Anatomía
-
-```tsx
-<Table>
-  <TableCaption>A list of your recent invoices.</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Method</TableHead>
-      <TableHead className="text-right">Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell className="font-medium">INV001</TableCell>
-      <TableCell>Paid</TableCell>
-      <TableCell>Credit Card</TableCell>
-      <TableCell className="text-right">$250.00</TableCell>
-    </TableRow>
-  </TableBody>
-  <TableFooter>
-    <TableRow>
-      <TableCell colSpan={3}>Total</TableCell>
-      <TableCell className="text-right">$2,500.00</TableCell>
-    </TableRow>
-  </TableFooter>
-</Table>
-```
-
-**Componentes**: 8 (Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption)
-
-## Props
-
-Todos los componentes aceptan sus props HTML estándar más `className` para personalización.
-
-## Patrones de Uso
-
-### Tabla Simple
-
-```tsx
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>INV001</TableCell>
-      <TableCell>Paid</TableCell>
-      <TableCell>$250.00</TableCell>
-    </TableRow>
-    <TableRow>
-      <TableCell>INV002</TableCell>
-      <TableCell>Pending</TableCell>
-      <TableCell>$150.00</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
-
-### Con Footer
-
-```tsx
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Item</TableHead>
-      <TableHead>Quantity</TableHead>
-      <TableHead className="text-right">Price</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>Product A</TableCell>
-      <TableCell>10</TableCell>
-      <TableCell className="text-right">$100.00</TableCell>
-    </TableRow>
-  </TableBody>
-  <TableFooter>
-    <TableRow>
-      <TableCell colSpan={2}>Total</TableCell>
-      <TableCell className="text-right">$2,500.00</TableCell>
-    </TableRow>
-  </TableFooter>
-</Table>
-```
-
-### Con Caption
-
-```tsx
-<Table>
-  <TableCaption>A list of your recent invoices.</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>INV001</TableCell>
-      <TableCell>Paid</TableCell>
-      <TableCell>$250.00</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
-
-### Con Datos Dinámicos
-
-```tsx
-const invoices = [
-  { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
-  { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
-];
-
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Method</TableHead>
-      <TableHead className="text-right">Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    {invoices.map((invoice) => (
-      <TableRow key={invoice.id}>
-        <TableCell>{invoice.id}</TableCell>
-        <TableCell>{invoice.status}</TableCell>
-        <TableCell>{invoice.method}</TableCell>
-        <TableCell className="text-right">{invoice.amount}</TableCell>
-      </TableRow>
-    ))}
-  </TableBody>
-</Table>;
-```
-
-## Casos de Uso
-
-**Data tables**: Listados de datos  
-**Invoices**: Facturas  
-**Users**: Lista de usuarios  
-**Reports**: Reportes tabulares
-
-## Estilos Base
-
-- **Container**: `rounded-xl border` con `overflow-x-auto`
-- **Head**: `bg-neutrals-50 text-neutrals-500 uppercase`
-- **Row hover**: `hover:bg-muted/50`
-- **Cell**: `p-4 text-neutrals-500`
-
-## Referencias
-
-- **shadcn/ui Table**: <https://ui.shadcn.com/docs/components/table>
+# Table
+
+Tabla HTML semántica con estilos. 8 componentes para estructura completa.
+
+## Descripción
+
+El componente `Table` muestra datos en formato tabular.
+
+## Importación
+
+```typescript
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableFooter,
+} from "@adamosuiteservices/ui/table";
+```
+
+## Anatomía
+
+```tsx
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>Credit Card</TableCell>
+      <TableCell className="text-right">$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={3}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+**Componentes**: 8 (Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption)
+
+## Props
+
+Todos los componentes aceptan sus props HTML estándar más `className` para personalización.
+
+## Patrones de Uso
+
+### Tabla Simple
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>$250.00</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>INV002</TableCell>
+      <TableCell>Pending</TableCell>
+      <TableCell>$150.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Con Footer
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Item</TableHead>
+      <TableHead>Quantity</TableHead>
+      <TableHead className="text-right">Price</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Product A</TableCell>
+      <TableCell>10</TableCell>
+      <TableCell className="text-right">$100.00</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={2}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+### Con Caption
+
+```tsx
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Con Datos Dinámicos
+
+```tsx
+const invoices = [
+  { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+  { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+];
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    {invoices.map((invoice) => (
+      <TableRow key={invoice.id}>
+        <TableCell>{invoice.id}</TableCell>
+        <TableCell>{invoice.status}</TableCell>
+        <TableCell>{invoice.method}</TableCell>
+        <TableCell className="text-right">{invoice.amount}</TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>;
+```
+
+## Casos de Uso
+
+**Data tables**: Listados de datos  
+**Invoices**: Facturas  
+**Users**: Lista de usuarios  
+**Reports**: Reportes tabulares
+
+## Estilos Base
+
+- **Container**: `rounded-xl border` con `overflow-x-auto`
+- **Head**: `bg-neutrals-50 text-muted-foreground text-xs uppercase`
+- **Row hover**: `hover:bg-muted/50`
+- **Cell**: `p-4 text-sm text-muted-foreground`
+
+## Referencias
+
+- **shadcn/ui Table**: <https://ui.shadcn.com/docs/components/table>

package/docs/components/ui/typography.md

@@ -41,10 +41,10 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 
 ### Colores
 
-| Color     | Clase CSS            | Uso                        |
-| --------- | -------------------- | -------------------------- |
-| `default` | `text-neutrals-700`  | Texto principal (default)  |
-| `muted`   | `text-neutrals-500`  | Texto secundario           |
+| Color     | Clase CSS                 | Uso                        |
+| --------- | ------------------------- | -------------------------- |
+| `default` | `text-foreground`         | Texto principal (default)  |
+| `muted`   | `text-muted-foreground`   | Texto secundario           |
 
 ## Patrones de Uso
 
@@ -161,12 +161,12 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 ```tsx
 {/* Default color - Primary text */}
 <Typography variant="md" color="default">
-  This is primary text with default color (neutrals-700).
+  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 (neutrals-500).
+  This is secondary text with muted color (muted-foreground).
 </Typography>
 
 {/* Combining with sizes */}
@@ -247,8 +247,8 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 
 ### Colores de Texto
 
-- **default**: neutrals-700 (text-neutrals-700) - **default**
-- **muted**: neutrals-500 (text-neutrals-500)
+- **default**: text-foreground - **default**
+- **muted**: text-muted-foreground
 
 ## Accesibilidad