@adamosuiteservices/ui 2.10.6 → 2.10.8

package/dist/typography.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./jsx-runtime-BB_1_6y_.cjs"),o=require("./index-CjyiloO7.cjs"),i=require("./index-DoxiiusW.cjs"),m=require("./index-BTzZJcis.cjs"),x=m.cva("adm:text-neutrals-700",{variants:{variant:{sm:"adm:text-sm",md:"adm:text-base",lg:"adm:text-lg",xs:"adm:text-xs",caption:"adm:text-[11px]"}},defaultVariants:{variant:"sm"}});function p({className:t,variant:a,asChild:e=!1,...s}){const r=e?o.Slot:"p";return n.jsxRuntimeExports.jsx(r,{"data-slot":"typography",className:i.cn(x({variant:a,className:t})),...s})}exports.Typography=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-BB_1_6y_.cjs"),i=require("./index-CjyiloO7.cjs"),d=require("./index-DoxiiusW.cjs"),l=require("./index-BTzZJcis.cjs"),m=l.cva("",{variants:{variant:{sm:"adm:text-sm",md:"adm:text-base",lg:"adm:text-lg",xs:"adm:text-xs",caption:"adm:text-[11px]"},color:{default:"adm:text-neutrals-700",muted:"adm:text-neutrals-500"}},defaultVariants:{variant:"sm",color:"default"}});function u({className:t,variant:a,color:e,asChild:r=!1,...s}){const n=r?i.Slot:"p";return o.jsxRuntimeExports.jsx(n,{"data-slot":"typography",className:d.cn(m({variant:a,color:e,className:t})),...s})}exports.Typography=u;

package/dist/typography.js

@@ -1,8 +1,8 @@
-import { j as o } from "./jsx-runtime-BzflLqGi.js";
+import { j as e } from "./jsx-runtime-BzflLqGi.js";
 import { S as p } from "./index-BvLQnI56.js";
-import { c as e } from "./index-CRiPKpXj.js";
-import { c as n } from "./index-BqtVL8d-.js";
-const x = n("adm:text-neutrals-700", {
+import { c as n } from "./index-CRiPKpXj.js";
+import { c as x } from "./index-BqtVL8d-.js";
+const d = x("", {
   variants: {
     variant: {
       sm: "adm:text-sm",
@@ -10,28 +10,34 @@ const x = n("adm:text-neutrals-700", {
       lg: "adm:text-lg",
       xs: "adm:text-xs",
       caption: "adm:text-[11px]"
+    },
+    color: {
+      default: "adm:text-neutrals-700",
+      muted: "adm:text-neutrals-500"
     }
   },
   defaultVariants: {
-    variant: "sm"
+    variant: "sm",
+    color: "default"
   }
 });
-function f({
+function u({
   className: t,
   variant: a,
-  asChild: s = !1,
-  ...m
+  color: o,
+  asChild: r = !1,
+  ...s
 }) {
-  const r = s ? p : "p";
-  return /* @__PURE__ */ o.jsx(
-    r,
+  const m = r ? p : "p";
+  return /* @__PURE__ */ e.jsx(
+    m,
     {
       "data-slot": "typography",
-      className: e(x({ variant: a, className: t })),
-      ...m
+      className: n(d({ variant: a, color: o, className: t })),
+      ...s
     }
   );
 }
 export {
-  f as Typography
+  u as Typography
 };

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/typography.md

@@ -18,23 +18,33 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 
 ## Props
 
-| Prop        | Tipo                                        | Descripción                             |
-| ----------- | ------------------------------------------- | --------------------------------------- |
-| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | Tamaño del texto                        |
-| `asChild`   | `boolean`                                   | Renderiza como child element (usa Slot) |
-| `className` | `string`                                    | Clases CSS adicionales                  |
+| Prop        | Tipo                                        | Default     | Descripción                             |
+| ----------- | ------------------------------------------- | ----------- | --------------------------------------- |
+| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | `"sm"`      | Tamaño del texto                        |
+| `color`     | `"default" \| "muted"`                      | `"default"` | Color del texto                         |
+| `asChild`   | `boolean`                                   | `false`     | Renderiza como child element (usa Slot) |
+| `className` | `string`                                    | -           | Clases CSS adicionales                  |
 
 **Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
 
 ## Variantes
 
-| Variante  | Font Size     | Line Height      | Uso                        |
-| --------- | ------------- | ---------------- | -------------------------- |
-| `lg`      | `text-lg`     | `leading-1`      | Headings, texto enfatizado |
-| `md`      | `text-base`   | `leading-0.5`    | Body text default          |
-| `sm`      | `text-sm`     | `leading`        | Secondary text, labels     |
-| `xs`      | `text-xs`     | `leading-[20px]` | Fine print, detalles       |
-| `caption` | `text-[11px]` | `leading-[18px]` | Captions, metadata         |
+### Tamaños
+
+| Variante  | Font Size     | Uso                        |
+| --------- | ------------- | -------------------------- |
+| `lg`      | `text-lg`     | Headings, texto enfatizado |
+| `md`      | `text-base`   | Body text                  |
+| `sm`      | `text-sm`     | Secondary text, labels (default) |
+| `xs`      | `text-xs`     | Fine print, detalles       |
+| `caption` | `text-[11px]` | Captions, metadata         |
+
+### Colores
+
+| Color     | Clase CSS            | Uso                        |
+| --------- | -------------------- | -------------------------- |
+| `default` | `text-neutrals-700`  | Texto principal (default)  |
+| `muted`   | `text-neutrals-500`  | Texto secundario           |
 
 ## Patrones de Uso
 
@@ -146,6 +156,29 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 </Typography>
 ```
 
+### Color Variants
+
+```tsx
+{/* Default color - Primary text */}
+<Typography variant="md" color="default">
+  This is primary text with default color (neutrals-700).
+</Typography>
+
+{/* Muted color - Secondary text */}
+<Typography variant="md" color="muted">
+  This is secondary text with muted color (neutrals-500).
+</Typography>
+
+{/* Combining with sizes */}
+<Typography variant="lg" color="default">
+  Large heading text
+</Typography>
+
+<Typography variant="sm" color="muted">
+  Small secondary information
+</Typography>
+```
+
 ## Casos de Uso
 
 **Headings**: H1-H6 con tamaños consistentes  
@@ -153,15 +186,69 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 **Labels**: Etiquetas de formularios  
 **Captions**: Descripciones de imágenes, metadata  
 **Fine print**: Términos, condiciones, notas  
-**Quotes**: Citas y testimonios
+**Quotes**: Citas y testimonios  
+**Secondary text**: Información complementaria con `color="muted"`
+
+## Mejores Prácticas
+
+### Uso de Colores
+
+```tsx
+{/* ✅ Correcto - Color default para contenido principal */}
+<Typography variant="md" color="default">
+  This is the main content that users should read.
+</Typography>
+
+{/* ✅ Correcto - Color muted para información secundaria */}
+<Typography variant="sm" color="muted">
+  Optional description or helper text.
+</Typography>
+
+{/* ✅ Correcto - Combinar tamaño y color apropiadamente */}
+<div>
+  <Typography variant="lg" color="default">Main Heading</Typography>
+  <Typography variant="sm" color="muted">Subtitle or description</Typography>
+</div>
+
+{/* ⚠️ Evitar - Color muted en contenido principal */}
+<Typography variant="md" color="muted">
+  Important information that should be easily readable
+</Typography>
+```
+
+### Jerarquía Visual
+
+```tsx
+{/* ✅ Correcto - Jerarquía clara con tamaño y color */}
+<article>
+  <Typography variant="lg" color="default">Article Title</Typography>
+  <Typography variant="sm" color="muted">Published 2 hours ago</Typography>
+  <Typography variant="md" color="default">
+    Article content goes here with proper emphasis.
+  </Typography>
+</article>
+
+{/* ✅ Correcto - Lista con estados */}
+<div>
+  <Typography variant="md" color="default">Active item</Typography>
+  <Typography variant="md" color="muted">Inactive item</Typography>
+</div>
+```
 
 ## Estilos Base
 
-- **lg**: 18px, line-height: leading-1
-- **md**: 16px, line-height: leading-0.5 (default)
-- **sm**: 14px, line-height: leading
-- **xs**: 12px, line-height: 20px
-- **caption**: 11px, line-height: 18px
+### Tamaños de Texto
+
+- **lg**: 18px (text-lg)
+- **md**: 16px (text-base)
+- **sm**: 14px (text-sm) - **default**
+- **xs**: 12px (text-xs)
+- **caption**: 11px (text-[11px])
+
+### Colores de Texto
+
+- **default**: neutrals-700 (text-neutrals-700) - **default**
+- **muted**: neutrals-500 (text-neutrals-500)
 
 ## Accesibilidad
 
@@ -175,8 +262,10 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 - **CVA**: Variantes con class-variance-authority
 - **Slot**: Usa `@radix-ui/react-slot` para `asChild`
 - **Default element**: `<p>` cuando `asChild=false`
+- **Default variants**: `variant="sm"` y `color="default"`
 - **Data attribute**: `data-slot="typography"` para identificación
-- **No estilos de color**: Typography solo define tamaño/line-height, combina con utility classes para color/weight
+- **Color variants**: Incluye colores default (neutrals-700) y muted (neutrals-500)
+- **Extensibilidad**: Combina con utility classes para estilos adicionales (weight, spacing, etc.)
 
 ## Troubleshooting
 

package/package.json

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