@adamosuiteservices/ui 1.8.13 → 1.9.14

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-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>

package/docs/components/ui/tabs-underline.md

@@ -1,106 +1,106 @@
-# Tabs Underline
-
-Pestañas con underline. Variante de tabs sin background.
-
-## Descripción
-
-Variante del componente Tabs con estilo de subrayado en lugar de fondo.
-
-## Importación
-
-```typescript
-import {
-  TabsUnderline,
-  TabsUnderlineList,
-  TabsUnderlineTrigger,
-  TabsUnderlineContent,
-} from "@adamosuiteservices/ui/tabs-underline";
-```
-
-## Anatomía
-
-```tsx
-<TabsUnderline defaultValue="account">
-  <TabsUnderlineList>
-    <TabsUnderlineTrigger value="account">Account</TabsUnderlineTrigger>
-    <TabsUnderlineTrigger value="password">Password</TabsUnderlineTrigger>
-  </TabsUnderlineList>
-  <TabsUnderlineContent value="account">Account content</TabsUnderlineContent>
-  <TabsUnderlineContent value="password">Password content</TabsUnderlineContent>
-</TabsUnderline>
-```
-
-**Componentes**: 4 (TabsUnderline, TabsUnderlineList, TabsUnderlineTrigger, TabsUnderlineContent)
-
-## Props
-
-Idéntico a `tabs` component. Ver documentación de tabs para props completas.
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<TabsUnderline defaultValue="overview">
-  <TabsUnderlineList>
-    <TabsUnderlineTrigger value="overview">Overview</TabsUnderlineTrigger>
-    <TabsUnderlineTrigger value="analytics">Analytics</TabsUnderlineTrigger>
-    <TabsUnderlineTrigger value="reports">Reports</TabsUnderlineTrigger>
-  </TabsUnderlineList>
-  <TabsUnderlineContent value="overview">Overview content</TabsUnderlineContent>
-  <TabsUnderlineContent value="analytics">
-    Analytics content
-  </TabsUnderlineContent>
-  <TabsUnderlineContent value="reports">Reports content</TabsUnderlineContent>
-</TabsUnderline>
-```
-
-### Con Iconos
-
-```tsx
-import { BarChartIcon, TableIcon, FileTextIcon } from "lucide-react";
-
-<TabsUnderlineList>
-  <TabsUnderlineTrigger value="charts">
-    <BarChartIcon />
-    Charts
-  </TabsUnderlineTrigger>
-  <TabsUnderlineTrigger value="table">
-    <TableIcon />
-    Table
-  </TabsUnderlineTrigger>
-  <TabsUnderlineTrigger value="report">
-    <FileTextIcon />
-    Report
-  </TabsUnderlineTrigger>
-</TabsUnderlineList>;
-```
-
-## Diferencias con Tabs Regular
-
-- Subrayado animado en lugar de fondo
-- Estilo más minimalista
-- API idéntica a Tabs regular
-
-## Diferencia vs Tabs
-
-**tabs**: Background `bg-muted` con `rounded-lg`, active usa `bg-primary`  
-**tabs-underline**: Sin background, active usa `border-b-2 border-b-primary`
-
-## Casos de Uso
-
-**Navigation**: Navegación principal  
-**Content sections**: Secciones de contenido  
-**Data views**: Diferentes visualizaciones
-
-## Estilos Base
-
-- **List**: Sin background, `h-9`
-- **Trigger active**: `border-b-2 border-b-primary text-primary`
-- **Trigger inactive**: `border-b-2 border-b-transparent`
-
-## Referencias
-
-- Ver [Tabs](./tabs.md) para documentación completa
-- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
-- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>
+# Tabs Underline
+
+Pestañas con underline. Variante de tabs sin background.
+
+## Descripción
+
+Variante del componente Tabs con estilo de subrayado en lugar de fondo.
+
+## Importación
+
+```typescript
+import {
+  TabsUnderline,
+  TabsUnderlineList,
+  TabsUnderlineTrigger,
+  TabsUnderlineContent,
+} from "@adamosuiteservices/ui/tabs-underline";
+```
+
+## Anatomía
+
+```tsx
+<TabsUnderline defaultValue="account">
+  <TabsUnderlineList>
+    <TabsUnderlineTrigger value="account">Account</TabsUnderlineTrigger>
+    <TabsUnderlineTrigger value="password">Password</TabsUnderlineTrigger>
+  </TabsUnderlineList>
+  <TabsUnderlineContent value="account">Account content</TabsUnderlineContent>
+  <TabsUnderlineContent value="password">Password content</TabsUnderlineContent>
+</TabsUnderline>
+```
+
+**Componentes**: 4 (TabsUnderline, TabsUnderlineList, TabsUnderlineTrigger, TabsUnderlineContent)
+
+## Props
+
+Idéntico a `tabs` component. Ver documentación de tabs para props completas.
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<TabsUnderline defaultValue="overview">
+  <TabsUnderlineList>
+    <TabsUnderlineTrigger value="overview">Overview</TabsUnderlineTrigger>
+    <TabsUnderlineTrigger value="analytics">Analytics</TabsUnderlineTrigger>
+    <TabsUnderlineTrigger value="reports">Reports</TabsUnderlineTrigger>
+  </TabsUnderlineList>
+  <TabsUnderlineContent value="overview">Overview content</TabsUnderlineContent>
+  <TabsUnderlineContent value="analytics">
+    Analytics content
+  </TabsUnderlineContent>
+  <TabsUnderlineContent value="reports">Reports content</TabsUnderlineContent>
+</TabsUnderline>
+```
+
+### Con Iconos
+
+```tsx
+import { BarChartIcon, TableIcon, FileTextIcon } from "lucide-react";
+
+<TabsUnderlineList>
+  <TabsUnderlineTrigger value="charts">
+    <BarChartIcon />
+    Charts
+  </TabsUnderlineTrigger>
+  <TabsUnderlineTrigger value="table">
+    <TableIcon />
+    Table
+  </TabsUnderlineTrigger>
+  <TabsUnderlineTrigger value="report">
+    <FileTextIcon />
+    Report
+  </TabsUnderlineTrigger>
+</TabsUnderlineList>;
+```
+
+## Diferencias con Tabs Regular
+
+- Subrayado animado en lugar de fondo
+- Estilo más minimalista
+- API idéntica a Tabs regular
+
+## Diferencia vs Tabs
+
+**tabs**: Background `bg-muted` con `rounded-lg`, active usa `bg-primary`  
+**tabs-underline**: Sin background, active usa `border-b-2 border-b-primary`
+
+## Casos de Uso
+
+**Navigation**: Navegación principal  
+**Content sections**: Secciones de contenido  
+**Data views**: Diferentes visualizaciones
+
+## Estilos Base
+
+- **List**: Sin background, `h-9`
+- **Trigger active**: `border-b-2 border-b-primary text-primary`
+- **Trigger inactive**: `border-b-2 border-b-transparent`
+
+## Referencias
+
+- Ver [Tabs](./tabs.md) para documentación completa
+- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
+- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>