@adamosuiteservices/ui 2.9.15 → 2.9.16

package/docs/components/ui/icon.md

@@ -2,18 +2,18 @@
 
 ## Descripción
 
-Componente para mostrar **iconos Material Symbols Outlined** con configuración avanzada de tipografía variable. Ofrece control granular sobre peso, relleno, grado óptico y tamaño, utilizando fuentes locales para mejor rendimiento. Ideal para interfaces modernas con iconografía consistente y personalizable.
+Componente para mostrar **iconos Material Symbols Outlined** con configuración avanzada de tipografía variable. Ofrece control granular sobre peso, relleno, grado óptico y tamaño usando **clases de texto Tailwind**, utilizando fuentes locales para mejor rendimiento. Ideal para interfaces modernas con iconografía consistente y personalizable.
 
 ## Características
 
 - ✅ Material Symbols Outlined con fuente local para mejor rendimiento
-- ✅ 4 tamaños predefinidos: 18px, 24px (default), 36px, 48px
+- ✅ Tamaños controlados por clases Tailwind: `text-lg`, `text-2xl`, `text-4xl`, `text-5xl`
 - ✅ 7 pesos tipográficos: 100-700 (default: 200)
 - ✅ Fill modes: outlined (0) y filled (1)
 - ✅ 3 grados ópticos: -25, 0 (default), 200
 - ✅ 4 tamaños ópticos: 20, 24 (default), 40, 48
 - ✅ Configuración via CSS font-variation-settings
-- ✅ Tipos exportados: IconSize, IconProps para extensibilidad
+- ✅ Tipos exportados: IconProps para extensibilidad
 - ✅ Extensión de ComponentProps<"span"> para máxima flexibilidad
 - ✅ Soporte completo para className y style customizados
 - ✅ Optimización automática con font-display: swap
@@ -23,7 +23,6 @@ Componente para mostrar **iconos Material Symbols Outlined** con configuración
 ```typescript
 import {
   Icon,
-  type IconSize,
   type IconProps,
 } from "@adamosuiteservices/ui/icon";
 ```
@@ -31,15 +30,12 @@ import {
 ### Usando Types Exportados
 
 ```tsx
-import { type IconSize, type IconProps } from "@adamosuiteservices/ui/icon";
+import { type IconProps } from "@adamosuiteservices/ui/icon";
 
 // Para crear componentes custom
 function CustomIcon(props: IconProps) {
   return <Icon {...props} className="custom-icon-styles" />;
 }
-
-// Para validar tamaños
-const iconSizes: IconSize[] = ["18", "24", "36", "48"];
 ```
 
 ## Uso Básico
@@ -50,10 +46,10 @@ const iconSizes: IconSize[] = ["18", "24", "36", "48"];
 <Icon symbol="home" />
 ```
 
-### Con Tamaño Personalizado
+### Con Tamaño Personalizado usando Tailwind
 
 ```tsx
-<Icon symbol="settings" size="36" />
+<Icon symbol="settings" className="adm:text-4xl" />
 ```
 
 ### Icono Relleno
@@ -77,19 +73,20 @@ El nombre del icono Material Symbol. Consulta [Google Fonts](https://fonts.googl
 <Icon symbol="close" />
 ```
 
-### size
+### className
 
-Tamaño del icono en píxeles. Valores predefinidos para consistencia.
+Usa clases de texto Tailwind para controlar el tamaño del icono. Se pueden combinar con otras clases.
 
 ```tsx
-// Tamaños disponibles
-<Icon symbol="star" size="18" />  {/* Pequeño */}
-<Icon symbol="star" size="24" />  {/* Default */}
-<Icon symbol="star" size="36" />  {/* Mediano */}
-<Icon symbol="star" size="48" />  {/* Grande */}
-```
+// Tamaños comunes usando Tailwind
+<Icon symbol="star" className="adm:text-lg" />    {/* ~18px */}
+<Icon symbol="star" className="adm:text-2xl" />   {/* ~24px */}
+<Icon symbol="star" className="adm:text-4xl" />   {/* ~36px */}
+<Icon symbol="star" className="adm:text-5xl" />   {/* ~48px */}
 
-**Default**: `"24"`
+// Combinando tamaño con color
+<Icon symbol="star" className="adm:text-2xl adm:text-yellow-500" />
+```
 
 ### fill
 
@@ -151,13 +148,13 @@ Optimización de legibilidad para diferentes tamaños de pantalla.
 ```tsx
 <div className="adm:flex adm:gap-1">
   <Button variant="ghost" size="icon">
-    <Icon symbol="arrow_back" size="24" />
+    <Icon symbol="arrow_back" className="adm:text-2xl" />
   </Button>
   <Button variant="ghost" size="icon">
-    <Icon symbol="home" size="24" />
+    <Icon symbol="home" className="adm:text-2xl" />
   </Button>
   <Button variant="ghost" size="icon">
-    <Icon symbol="search" size="24" />
+    <Icon symbol="search" className="adm:text-2xl" />
   </Button>
 </div>
 ```
@@ -167,15 +164,15 @@ Optimización de legibilidad para diferentes tamaños de pantalla.
 ```tsx
 <div className="adm:flex adm:gap-2">
   <Button>
-    <Icon symbol="save" size="18" />
+    <Icon symbol="save" className="adm:text-lg" />
     Save
   </Button>
   <Button variant="outline">
-    <Icon symbol="edit" size="18" />
+    <Icon symbol="edit" className="adm:text-lg" />
     Edit
   </Button>
   <Button variant="destructive">
-    <Icon symbol="delete" size="18" />
+    <Icon symbol="delete" className="adm:text-lg" />
     Delete
   </Button>
 </div>
@@ -192,7 +189,10 @@ function FavoriteButton() {
       <Icon
         symbol="favorite"
         fill={isFavorite ? 1 : 0}
-        className={isFavorite ? "adm:text-red-500" : "adm:text-gray-400"}
+        className={cn(
+          "adm:text-lg",
+          isFavorite ? "adm:text-red-500" : "adm:text-gray-400"
+        )}
       />
       {isFavorite ? "Liked" : "Like"}
     </Button>
@@ -204,10 +204,21 @@ function FavoriteButton() {
 
 ```tsx
 <div className="adm:flex adm:items-center adm:gap-4">
-  <Icon symbol="favorite" weight={100} /> {/* Delgado */}
-  <Icon symbol="favorite" weight={200} /> {/* Default */}
-  <Icon symbol="favorite" weight={500} /> {/* Medio */}
-  <Icon symbol="favorite" weight={700} /> {/* Grueso */}
+  <Icon symbol="favorite" weight={100} className="adm:text-2xl" /> {/* Delgado */}
+  <Icon symbol="favorite" weight={200} className="adm:text-2xl" /> {/* Default */}
+  <Icon symbol="favorite" weight={500} className="adm:text-2xl" /> {/* Medio */}
+  <Icon symbol="favorite" weight={700} className="adm:text-2xl" /> {/* Grueso */}
+</div>
+```
+
+### Diferentes Tamaños con Tailwind
+
+```tsx
+<div className="adm:flex adm:items-center adm:gap-4">
+  <Icon symbol="favorite" className="adm:text-lg" />    {/* ~18px */}
+  <Icon symbol="favorite" className="adm:text-2xl" />   {/* ~24px */}
+  <Icon symbol="favorite" className="adm:text-4xl" />   {/* ~36px */}
+  <Icon symbol="favorite" className="adm:text-5xl" />   {/* ~48px */}
 </div>
 ```
 
@@ -235,7 +246,7 @@ const commonIcons = [
 <div className="adm:grid adm:grid-cols-5 adm:gap-4">
   {commonIcons.map((icon) => (
     <div key={icon} className="adm:text-center">
-      <Icon symbol={icon} size="24" />
+      <Icon symbol={icon} className="adm:text-2xl" />
       <p className="adm:text-xs adm:mt-1">{icon}</p>
     </div>
   ))}
@@ -249,9 +260,8 @@ const commonIcons = [
 ```tsx
 <Icon
   symbol="notification"
-  size="24"
   weight={400}
-  className="adm:text-blue-500 adm:drop-shadow-sm"
+  className="adm:text-2xl adm:text-blue-500 adm:drop-shadow-sm"
 />
 ```
 
@@ -260,8 +270,7 @@ const commonIcons = [
 ```tsx
 <Icon
   symbol="refresh"
-  size="24"
-  className="adm:animate-spin adm:text-blue-500"
+  className="adm:text-2xl adm:animate-spin adm:text-blue-500"
 />
 ```
 
@@ -270,8 +279,7 @@ const commonIcons = [
 ```tsx
 <Icon
   symbol="menu"
-  size="24"
-  className="adm:text-gray-600 hover:adm:text-gray-900 adm:transition-colors"
+  className="adm:text-2xl adm:text-gray-600 hover:adm:text-gray-900 adm:transition-colors"
 />
 ```
 
@@ -283,7 +291,7 @@ const commonIcons = [
 <Card>
   <CardHeader>
     <div className="adm:flex adm:items-center adm:gap-2">
-      <Icon symbol="folder" size="24" className="adm:text-blue-500" />
+      <Icon symbol="folder" className="adm:text-2xl adm:text-blue-500" />
       <CardTitle>Documents</CardTitle>
     </div>
   </CardHeader>
@@ -294,7 +302,7 @@ const commonIcons = [
 
 ```tsx
 <Button disabled>
-  <Icon symbol="sync" className="adm:animate-spin" size="18" />
+  <Icon symbol="sync" className="adm:text-lg adm:animate-spin" />
   Loading...
 </Button>
 ```
@@ -323,43 +331,60 @@ const commonIcons = [
 ```tsx
 <div className="adm:flex adm:gap-1 adm:p-2 adm:border adm:rounded-md">
   <Button variant="ghost" size="icon">
-    <Icon symbol="undo" size="20" />
+    <Icon symbol="undo" className="adm:text-xl" />
   </Button>
   <Button variant="ghost" size="icon">
-    <Icon symbol="redo" size="20" />
+    <Icon symbol="redo" className="adm:text-xl" />
   </Button>
   <Separator orientation="vertical" className="adm:h-6" />
   <Button variant="ghost" size="icon">
-    <Icon symbol="content_copy" size="20" />
+    <Icon symbol="content_copy" className="adm:text-xl" />
   </Button>
   <Button variant="ghost" size="icon">
-    <Icon symbol="content_paste" size="20" />
+    <Icon symbol="content_paste" className="adm:text-xl" />
   </Button>
 </div>
 ```
 
 ## Mejores Prácticas
 
-### Tamaños Consistentes
+### Tamaños Consistentes con Tailwind
 
 ```tsx
-{/* ✅ Correcto - Tamaños consistentes por contexto */}
+{/* ✅ Correcto - Tamaños consistentes por contexto usando Tailwind */}
 <Button>
-  <Icon symbol="save" size="18" />  {/* 18px para botones */}
+  <Icon symbol="save" className="adm:text-lg" />  {/* text-lg para botones con texto */}
   Save
 </Button>
 
 <Button size="icon">
-  <Icon symbol="settings" size="24" />  {/* 24px para botones icon */}
+  <Icon symbol="settings" className="adm:text-2xl" />  {/* text-2xl para botones icon */}
 </Button>
 
 {/* ❌ Incorrecto - Tamaños inconsistentes */}
 <Button>
-  <Icon symbol="save" size="24" />  {/* Muy grande para botón con texto */}
+  <Icon symbol="save" className="adm:text-4xl" />  {/* Muy grande para botón con texto */}
   Save
 </Button>
 ```
 
+### Clases Tailwind Recomendadas por Contexto
+
+```tsx
+{/* ✅ Correcto - Tamaños apropiados */}
+// Botones con texto
+<Icon symbol="save" className="adm:text-lg" />     {/* ~18px */}
+
+// Botones icon solamente  
+<Icon symbol="menu" className="adm:text-2xl" />    {/* ~24px */}
+
+// Títulos y encabezados
+<Icon symbol="folder" className="adm:text-4xl" />  {/* ~36px */}
+
+// Hero sections o elementos grandes
+<Icon symbol="star" className="adm:text-5xl" />    {/* ~48px */}
+```
+
 ### Peso Apropiado por Contexto
 
 ```tsx
@@ -394,27 +419,23 @@ const commonIcons = [
 ### Accesibilidad
 
 ```tsx
-{
-  /* ✅ Correcto - Botones con labels */
-}
+{/* ✅ Correcto - Botones con labels */}
 <Button variant="ghost" size="icon" aria-label="Close dialog">
-  <Icon symbol="close" size="24" />
-</Button>;
+  <Icon symbol="close" className="adm:text-2xl" />
+</Button>
 
-{
-  /* ✅ Correcto - Iconos decorativos */
-}
+{/* ✅ Correcto - Iconos decorativos */}
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="folder" size="20" aria-hidden="true" />
+  <Icon symbol="folder" className="adm:text-xl" aria-hidden="true" />
   <span>Documents</span>
-</div>;
+</div>
 ```
 
 ### Performance
 
 ```tsx
 {/* ✅ Correcto - Reutilizar configuraciones comunes */}
-const iconProps = { size: "24", weight: 200 } as const;
+const iconProps = { weight: 200, className: "adm:text-2xl" } as const;
 
 <Icon symbol="home" {...iconProps} />
 <Icon symbol="search" {...iconProps} />
@@ -466,11 +487,8 @@ La fuente se carga localmente desde `assets/icons/`:
 ### TypeScript Interface
 
 ```typescript
-export type IconSize = "18" | "24" | "36" | "48";
-
 export type IconProps = ComponentProps<"span"> & {
   symbol: string;
-  size?: IconSize;
   fill?: 0 | 1;
   weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
   grade?: -25 | 0 | 200;
@@ -478,7 +496,7 @@ export type IconProps = ComponentProps<"span"> & {
 };
 ```
 
-**Tipos Exportados**: Usa `IconSize` e `IconProps` para crear componentes custom o validar props.
+**Tipos Exportados**: Usa `IconProps` para crear componentes custom. Los tamaños ahora se controlan via `className` con clases Tailwind.
 
 ## Recursos
 
@@ -503,20 +521,30 @@ export type IconProps = ComponentProps<"span"> & {
 Si migras desde Font Awesome o Heroicons:
 
 ```tsx
-{
-  /* Font Awesome */
-}
-<i className="fas fa-heart"></i>;
+{/* Font Awesome */}
+<i className="fas fa-heart"></i>
 
-{
-  /* Material Icons (anterior) */
-}
-<span className="material-icons">favorite</span>;
+{/* Material Icons (anterior) */}
+<span className="material-icons">favorite</span>
 
-{
-  /* Icon Component (nuevo) ✅ */
-}
-<Icon symbol="favorite" />;
+{/* Icon Component (nuevo) ✅ */}
+<Icon symbol="favorite" className="adm:text-2xl" />
+```
+
+### Migración desde versión anterior del Icon Component
+
+Si ya usabas el Icon component con la prop `size`:
+
+```tsx
+{/* Versión anterior */}
+<Icon symbol="home" size="24" />
+<Icon symbol="star" size="18" />
+<Icon symbol="settings" size="36" />
+
+{/* Nueva versión ✅ */}
+<Icon symbol="home" className="adm:text-2xl" />    {/* 24px */}
+<Icon symbol="star" className="adm:text-lg" />     {/* 18px */}
+<Icon symbol="settings" className="adm:text-4xl" /> {/* 36px */}
 ```
 
 ## Solución de Problemas

package/package.json

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

package/dist/icon-DTx6Y_mx.cjs

@@ -1,6 +0,0 @@
-"use strict";const a=require("./jsx-runtime-BB_1_6y_.cjs"),m=require("./index-DoxiiusW.cjs");function x({symbol:t,size:n="24",fill:s=0,weight:e=200,grade:i=0,opticalSize:o=24,className:c,style:r,...u}){const l={fontSize:`${n}px`,fontVariationSettings:`
-      'FILL' ${s},
-      'wght' ${e},
-      'GRAD' ${i},
-      'opsz' ${o}
-    `,...r};return a.jsxRuntimeExports.jsx("span",{className:m.cn("material-symbols-outlined",c),style:l,...u,children:t})}exports.Icon=x;

package/dist/icon-DmU_SEHC.js

@@ -1,36 +0,0 @@
-import { j as l } from "./jsx-runtime-BzflLqGi.js";
-import { c as p } from "./index-CRiPKpXj.js";
-function x({
-  symbol: t,
-  size: o = "24",
-  fill: s = 0,
-  weight: n = 200,
-  grade: e = 0,
-  opticalSize: i = 24,
-  className: r,
-  style: a,
-  ...m
-}) {
-  const c = {
-    fontSize: `${o}px`,
-    fontVariationSettings: `
-      'FILL' ${s},
-      'wght' ${n},
-      'GRAD' ${e},
-      'opsz' ${i}
-    `,
-    ...a
-  };
-  return /* @__PURE__ */ l.jsx(
-    "span",
-    {
-      className: p("material-symbols-outlined", r),
-      style: c,
-      ...m,
-      children: t
-    }
-  );
-}
-export {
-  x as I
-};