@adamosuiteservices/ui 2.10.7 → 2.10.8

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.10.7",
+  "version": "2.10.8",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",