@adamosuiteservices/ui 1.9.14 → 2.9.15

package/docs/components/ui/combobox.md

@@ -33,7 +33,7 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 | `searchable`            | `boolean`                               | `false`      | Habilita input de búsqueda                                  |
 | `multiple`              | `boolean`                               | `false`      | Permite selección múltiple                                  |
 | `selectedFeedback`      | `"checkbox" \| "check"`                 | `"checkbox"` | Tipo de indicador visual                                    |
-| `icon`                  | `ComponentType<{ className?: string }>` | -            | Componente de icono opcional para mostrar en el trigger     |
+| `icon`                  | `string`                                | -            | Icono Material Symbol opcional para mostrar en el trigger   |
 | `alwaysShowPlaceholder` | `boolean`                               | `false`      | Mantiene el placeholder visible junto al valor seleccionado |
 | `valuePosition`         | `"left" \| "right"`                     | `"right"`    | Posición del valor cuando alwaysShowPlaceholder es true     |
 | `labels`                | `ComboboxLabels`                        | -            | Textos personalizables (ver tabla abajo)                    |
@@ -100,16 +100,16 @@ const frameworks = [
 ### Con Icono
 
 ```tsx
-import { CalendarIcon } from "lucide-react";
-
 <Combobox
   searchable
-  icon={CalendarIcon}
+  icon="event"
   options={frameworks}
   labels={{ placeholder: "Select framework..." }}
-/>;
+/>
 ```
 
+**Nota**: El prop `icon` acepta nombres de Material Symbols (ej: "event", "search", "person"). Ver [Material Icons](https://fonts.google.com/icons) para la lista completa.
+
 ### Placeholder Persistente
 
 Útil para usar el placeholder como etiqueta que permanece visible.
@@ -163,7 +163,7 @@ Cuando `alwaysShowPlaceholder` es true, puedes controlar dónde aparece el valor
 <Combobox
   searchable
   alwaysShowPlaceholder
-  icon={CalendarIcon}
+  icon="event"
   options={frameworks}
   value={value}
   onValueChange={setValue}

package/docs/components/ui/icon.md

@@ -8,11 +8,12 @@ Componente para mostrar **iconos Material Symbols Outlined** con configuración
 
 - ✅ 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: 300)
+- ✅ 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
 - ✅ Extensión de ComponentProps<"span"> para máxima flexibilidad
 - ✅ Soporte completo para className y style customizados
 - ✅ Optimización automática con font-display: swap
@@ -20,7 +21,25 @@ Componente para mostrar **iconos Material Symbols Outlined** con configuración
 ## Importación
 
 ```typescript
-import { Icon } from "@adamosuiteservices/ui/icon";
+import {
+  Icon,
+  type IconSize,
+  type IconProps,
+} from "@adamosuiteservices/ui/icon";
+```
+
+### Usando Types Exportados
+
+```tsx
+import { type IconSize, 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
@@ -90,13 +109,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={300} />  {/* Default - Moderno */}
+<Icon symbol="favorite" weight={200} />  {/* Default - Ligero */}
 <Icon symbol="favorite" weight={400} />  {/* Regular */}
 <Icon symbol="favorite" weight={700} />  {/* Grueso */}
 ```
 
 **Values**: `100` | `200` | `300` | `400` | `500` | `600` | `700`  
-**Default**: `300` (más moderno y ligero que el estándar 400)
+**Default**: `200` (ligero y moderno)
 
 ### grade
 
@@ -186,7 +205,7 @@ function FavoriteButton() {
 ```tsx
 <div className="adm:flex adm:items-center adm:gap-4">
   <Icon symbol="favorite" weight={100} /> {/* Delgado */}
-  <Icon symbol="favorite" weight={300} /> {/* Default */}
+  <Icon symbol="favorite" weight={200} /> {/* Default */}
   <Icon symbol="favorite" weight={500} /> {/* Medio */}
   <Icon symbol="favorite" weight={700} /> {/* Grueso */}
 </div>
@@ -347,7 +366,7 @@ const commonIcons = [
 {
   /* ✅ Correcto - Peso ligero para interfaces modernas */
 }
-<Icon symbol="menu" weight={300} />;
+<Icon symbol="menu" weight={200} />;
 
 {
   /* ✅ Correcto - Peso mayor para énfasis */
@@ -395,13 +414,27 @@ const commonIcons = [
 
 ```tsx
 {/* ✅ Correcto - Reutilizar configuraciones comunes */}
-const iconProps = { size: "24", weight: 300 } as const;
+const iconProps = { size: "24", weight: 200 } as const;
 
 <Icon symbol="home" {...iconProps} />
 <Icon symbol="search" {...iconProps} />
 <Icon symbol="settings" {...iconProps} />
 ```
 
+### Consistencia CSS y Componente
+
+Ahora tanto el CSS como el componente usan el mismo peso por defecto:
+
+```tsx
+{/* ✅ Ambos usan peso 200 */}
+<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 */}
+```
+
 ## Configuración Técnica
 
 ### Font Face Declaration
@@ -423,25 +456,30 @@ La fuente se carga localmente desde `assets/icons/`:
 
 ```css
 .material-symbols-outlined {
-  font-family: "Material Symbols Outlined";
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
   /* ... otros estilos de optimización */
 }
 ```
 
+**Nota**: Tanto el CSS como el componente React usan 200 como peso por defecto.
+
 ### TypeScript Interface
 
 ```typescript
-interface IconProps extends ComponentProps<"span"> {
+export type IconSize = "18" | "24" | "36" | "48";
+
+export type IconProps = ComponentProps<"span"> & {
   symbol: string;
-  size?: "18" | "24" | "36" | "48";
+  size?: IconSize;
   fill?: 0 | 1;
   weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
   grade?: -25 | 0 | 200;
   opticalSize?: 20 | 24 | 40 | 48;
-}
+};
 ```
 
+**Tipos Exportados**: Usa `IconSize` e `IconProps` para crear componentes custom o validar props.
+
 ## Recursos
 
 ### Material Symbols

package/package.json

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