@adamosuiteservices/ui 2.9.15 → 2.10.0

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
-- ✅ 7 pesos tipográficos: 100-700 (default: 200)
+- ✅ Tamaños controlados por clases Tailwind: `text-lg`, `text-2xl`, `text-4xl`, `text-5xl`
+- ✅ 7 pesos tipográficos: 100-700 (default: 300)
 - ✅ 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
@@ -21,25 +21,18 @@ Componente para mostrar **iconos Material Symbols Outlined** con configuración
 ## Importación
 
 ```typescript
-import {
-  Icon,
-  type IconSize,
-  type IconProps,
-} from "@adamosuiteservices/ui/icon";
+import { Icon, type IconProps } from "@adamosuiteservices/ui/icon";
 ```
 
 ### 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 +43,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 +70,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
 
@@ -109,13 +103,13 @@ Grosor de las líneas del icono. Más bajo = más delgado, más alto = más grue
 
 ```tsx
 <Icon symbol="favorite" weight={100} />  {/* Muy delgado */}
-<Icon symbol="favorite" weight={200} />  {/* Default - Ligero */}
+<Icon symbol="favorite" weight={300} />  {/* Default - Ligero */}
 <Icon symbol="favorite" weight={400} />  {/* Regular */}
 <Icon symbol="favorite" weight={700} />  {/* Grueso */}
 ```
 
 **Values**: `100` | `200` | `300` | `400` | `500` | `600` | `700`  
-**Default**: `200` (ligero y moderno)
+**Default**: `300` (ligero y moderno)
 
 ### grade
 
@@ -151,13 +145,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 +161,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 +186,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 +201,22 @@ 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={300} 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 +244,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 +258,8 @@ const commonIcons = [
 ```tsx
 <Icon
   symbol="notification"
-  size="24"
-  weight={400}
-  className="adm:text-blue-500 adm:drop-shadow-sm"
+  weight={300}
+  className="adm:text-2xl adm:text-blue-500 adm:drop-shadow-sm"
 />
 ```
 
@@ -260,8 +268,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 +277,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 +289,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 +300,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,50 +329,67 @@ 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
 {
   /* ✅ Correcto - Peso ligero para interfaces modernas */
 }
-<Icon symbol="menu" weight={200} />;
+<Icon symbol="menu" weight={300} />;
 
 {
   /* ✅ Correcto - Peso mayor para énfasis */
@@ -398,14 +421,14 @@ const commonIcons = [
   /* ✅ Correcto - Botones con labels */
 }
 <Button variant="ghost" size="icon" aria-label="Close dialog">
-  <Icon symbol="close" size="24" />
+  <Icon symbol="close" className="adm:text-2xl" />
 </Button>;
 
 {
   /* ✅ 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>;
 ```
@@ -414,7 +437,7 @@ const commonIcons = [
 
 ```tsx
 {/* ✅ Correcto - Reutilizar configuraciones comunes */}
-const iconProps = { size: "24", weight: 200 } as const;
+const iconProps = { weight: 300, className: "adm:text-2xl" } as const;
 
 <Icon symbol="home" {...iconProps} />
 <Icon symbol="search" {...iconProps} />
@@ -426,13 +449,13 @@ const iconProps = { size: "24", weight: 200 } as const;
 Ahora tanto el CSS como el componente usan el mismo peso por defecto:
 
 ```tsx
-{/* ✅ Ambos usan peso 200 */}
+{/* ✅ Ambos usan peso 300 */}
 <span className="material-symbols-outlined">home</span>
 <Icon symbol="home" />
 
 {/* ✅ Ambos se ven idénticos */}
-<Icon symbol="star" weight={200} />
-<Icon symbol="star" /> {/* Sin especificar peso = 200 */}
+<Icon symbol="star" weight={300} />
+<Icon symbol="star" /> {/* Sin especificar peso = 300 */}
 ```
 
 ## Configuración Técnica
@@ -466,11 +489,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 +498,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
 
@@ -498,27 +518,6 @@ export type IconProps = ComponentProps<"span"> & {
 **Usuario**: `person`, `account_circle`, `login`, `logout`, `settings`  
 **Comunicación**: `email`, `phone`, `chat`, `notifications`, `message`
 
-### Migración desde Otros Sistemas
-
-Si migras desde Font Awesome o Heroicons:
-
-```tsx
-{
-  /* Font Awesome */
-}
-<i className="fas fa-heart"></i>;
-
-{
-  /* Material Icons (anterior) */
-}
-<span className="material-icons">favorite</span>;
-
-{
-  /* Icon Component (nuevo) ✅ */
-}
-<Icon symbol="favorite" />;
-```
-
 ## Solución de Problemas
 
 ### Icono No Aparece