@adamosuiteservices/ui 2.10.1 → 2.10.3

package/docs/components/ui/icon.md

@@ -8,11 +8,13 @@ Componente para mostrar **iconos Material Symbols Outlined** con configuración
 
 - ✅ Material Symbols Outlined con fuente local para mejor rendimiento
 - ✅ Tamaños controlados por clases Tailwind: `text-lg`, `text-2xl`, `text-4xl`, `text-5xl`
+- ✅ Tamaño por defecto: `text-2xl` (~24px) para uso general
 - ✅ 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
+- ✅ Data slot `data-slot="icon"` para CSS targeting específico
 - ✅ Tipos exportados: IconProps para extensibilidad
 - ✅ Extensión de ComponentProps<"span"> para máxima flexibilidad
 - ✅ Soporte completo para className y style customizados
@@ -479,12 +481,12 @@ La fuente se carga localmente desde `assets/icons/`:
 
 ```css
 .material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
   /* ... otros estilos de optimización */
 }
 ```
 
-**Nota**: Tanto el CSS como el componente React usan 200 como peso por defecto.
+**Nota**: Tanto el CSS como el componente React usan 300 como peso por defecto para un aspecto ligero y moderno.
 
 ### TypeScript Interface
 
@@ -500,6 +502,24 @@ export type IconProps = ComponentProps<"span"> & {
 
 **Tipos Exportados**: Usa `IconProps` para crear componentes custom. Los tamaños ahora se controlan via `className` con clases Tailwind.
 
+### Component Structure
+
+El componente renderiza un `<span>` con las siguientes características:
+
+```tsx
+<span
+  data-slot="icon"
+  className="material-symbols-outlined adm:inline-block adm:text-2xl"
+  style={{ fontVariationSettings: '...' }}
+>
+  {symbol}
+</span>
+```
+
+- **data-slot="icon"**: Permite targeting CSS específico, útil para estilos contextuales (ej: `[&>[data-slot=icon]]:text-current`)
+- **className base**: `material-symbols-outlined adm:inline-block adm:text-2xl` (puede ser extendido via prop `className`)
+- **style**: Genera `font-variation-settings` dinámicamente según props
+
 ## Recursos
 
 ### Material Symbols

package/package.json

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