@adamosuiteservices/ui 2.10.7 → 2.10.9

package/docs/components/ui/button.md

@@ -6,7 +6,7 @@ Componente fundamental para **acciones e interacciones del usuario**. Ofrece 11
 
 ## Características
 
-- ✅ 11 variantes: default, success (2), warning (2), destructive (2), secondary, outline, ghost, link
+- ✅ 12 variantes: default, success (2), warning (2), destructive (2), secondary, outline, ghost, ghost-neutral, link
 - ✅ 6 tamaños: sm, default, lg, icon, icon-sm, icon-lg
 - ✅ Iconos auto-dimensionados (16px) con ajuste automático de padding
 - ✅ Estados automáticos: hover, focus-visible, disabled, loading
@@ -199,7 +199,7 @@ Botón con borde y fondo transparente para acciones secundarias.
 
 ### ghost
 
-Botón mínimo sin borde que solo aparece en hover.
+Botón mínimo sin borde con color primario que solo aparece en hover.
 
 ```tsx
 <Button variant="ghost">Ghost</Button>
@@ -208,9 +208,26 @@ Botón mínimo sin borde que solo aparece en hover.
 **Estilos**:
 
 - Fondo: Transparente
-- Hover: `bg-accent`
+- Texto: `text-primary`
+- Hover: `bg-primary-50`, `text-primary`
+- Dark mode: `hover:bg-primary-50/20`
+- Uso: Acciones terciarias con énfasis primario, iconos de herramientas, menús
+
+### ghost-neutral
+
+Botón mínimo sin borde con color neutral que solo aparece en hover.
+
+```tsx
+<Button variant="ghost-neutral">Ghost Neutral</Button>
+```
+
+**Estilos**:
+
+- Fondo: Transparente
+- Texto: Color heredado del contexto
+- Hover: `bg-accent`, `text-accent-foreground`
 - Dark mode: `hover:bg-accent/50`
-- Uso: Acciones terciarias, iconos de herramientas, menús
+- Uso: Acciones terciarias neutras, iconos de herramientas sin énfasis, controles de interfaz
 
 ### link
 
@@ -569,9 +586,9 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 ## Props
 
-| Prop      | Tipo                                                                                                                                                                    | Default     | Descripción                                                    |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------- |
-| variant   | `"default" \| "success" \| "success-medium" \| "warning" \| "warning-medium" \| "destructive" \| "destructive-medium" \| "secondary" \| "outline" \| "ghost" \| "link"` | `"default"` | Variante visual del botón                                      |
+| Prop      | Tipo                                                                                                                                                                                            | Default     | Descripción                                                    |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------- |
+| variant   | `"default" \| "success" \| "success-medium" \| "warning" \| "warning-medium" \| "destructive" \| "destructive-medium" \| "secondary" \| "outline" \| "ghost" \| "ghost-neutral" \| "link"` | `"default"` | Variante visual del botón                                      |
 | size      | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`                                                                                                         | `"default"` | Tamaño del botón                                               |
 | asChild   | `boolean`                                                                                                                                                               | `false`     | Renderiza el hijo en lugar de un `<button>`. Usa Radix UI Slot |
 | disabled  | `boolean`                                                                                                                                                               | `false`     | Desactiva el botón (opacity 50%, pointer-events none)          |
@@ -732,6 +749,7 @@ Acciones en footer de dialogs.
 Botones de herramientas con iconos.
 
 ```tsx
+{/* Toolbar con ghost para acciones primarias */}
 <div className="flex gap-1 p-2 border rounded-lg">
   <Button size="icon-sm" variant="ghost" aria-label="Bold">
     <BoldIcon />
@@ -750,6 +768,19 @@ Botones de herramientas con iconos.
     <AlignCenterIcon />
   </Button>
 </div>
+
+{/* Toolbar con ghost-neutral para apariencia más sutil */}
+<div className="flex gap-1 p-2 border rounded-lg">
+  <Button size="icon-sm" variant="ghost-neutral" aria-label="Bold">
+    <BoldIcon />
+  </Button>
+  <Button size="icon-sm" variant="ghost-neutral" aria-label="Italic">
+    <ItalicIcon />
+  </Button>
+  <Button size="icon-sm" variant="ghost-neutral" aria-label="Underline">
+    <UnderlineIcon />
+  </Button>
+</div>
 ```
 
 ### Call to Action (CTA)
@@ -890,6 +921,34 @@ function Navigation() {
 <Button>Delete All Data</Button>  {/* Debería ser destructive */}
 ```
 
+### Ghost vs Ghost-Neutral
+
+```tsx
+{/* ✅ Correcto - Ghost para acciones con énfasis primario */}
+<Button variant="ghost">
+  <Icon symbol="add" />
+  Add Item
+</Button>
+
+{/* ✅ Correcto - Ghost-neutral para controles sin énfasis */}
+<Button variant="ghost-neutral" size="icon" aria-label="Settings">
+  <Icon symbol="settings" />
+</Button>
+
+{/* ✅ Correcto - Ghost-neutral en toolbars y paneles */}
+<div className="flex gap-1">
+  <Button variant="ghost-neutral" size="icon-sm" aria-label="Edit">
+    <Icon symbol="edit" />
+  </Button>
+  <Button variant="ghost-neutral" size="icon-sm" aria-label="Delete">
+    <Icon symbol="delete" />
+  </Button>
+</div>
+
+{/* ⚠️ Considerar - Ghost puede ser muy prominente en algunos contextos */}
+<Button variant="ghost">Close</Button>  {/* Mejor usar ghost-neutral */}
+```
+
 ### Espaciado Consistente
 
 ```tsx

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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.10.7",
+  "version": "2.10.9",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -9,7 +9,6 @@
   "exports": {
     "./docs/*": "./docs/*",
     "./styles.css": "./dist/styles.css",
-    "./custom-layered-styles.css": "./dist/custom-layered-styles.css",
     "./colors.css": "./dist/colors.css",
     "./custom-scroll-bar.css": "./dist/custom-scroll-bar.css",
     "./fonts.css": "./dist/fonts.css",