@adamosuiteservices/ui 2.10.6 → 2.10.7

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/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.7",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",