@adamosuiteservices/ui 2.9.15 → 2.10.0

package/docs/components/ui/kbd.md

@@ -156,12 +156,12 @@ import { Button } from "@adamosuiteservices/ui/button";
 
 ```tsx
 import { InputGroup, InputGroupInput, InputGroupAddon } from "@adamosuiteservices/ui/input-group";
-import { Search } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <InputGroup>
   <InputGroupInput placeholder="Search..." />
   <InputGroupAddon>
-    <Search />
+    <Icon symbol="search" className="text-lg" />
   </InputGroupAddon>
   <InputGroupAddon align="inline-end">
     <Kbd>⌘</Kbd>
@@ -270,22 +270,22 @@ import { Search } from "lucide-react";
 ### Con Iconos
 
 ```tsx
-import { Save, Copy, Settings } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <div className="flex items-center gap-4">
-  <Kbd><Save className="size-3" /></Kbd>
-  <Kbd><Copy className="size-3" /></Kbd>
-  <Kbd><Settings className="size-3" /></Kbd>
+  <Kbd><Icon symbol="save" className="text-sm" /></Kbd>
+  <Kbd><Icon symbol="content_copy" className="text-sm" /></Kbd>
+  <Kbd><Icon symbol="settings" className="text-sm" /></Kbd>
 </div>
 
 <div className="flex items-center gap-2">
   <span className="text-sm">Quick actions:</span>
   <KbdGroup>
-    <Kbd><Save className="size-3" /></Kbd>
+    <Kbd><Icon symbol="save" className="text-sm" /></Kbd>
     <Kbd>S</Kbd>
   </KbdGroup>
   <KbdGroup>
-    <Kbd><Copy className="size-3" /></Kbd>
+    <Kbd><Icon symbol="content_copy" className="text-sm" /></Kbd>
     <Kbd>C</Kbd>
   </KbdGroup>
 </div>

package/docs/components/ui/label.md

@@ -102,13 +102,13 @@ import { Switch } from "@adamosuiteservices/ui/switch";
 ### Con Iconos
 
 ```tsx
-import { Mail, User, Lock, Calendar } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 import { Input } from "@adamosuiteservices/ui/input";
 
 <div className="space-y-6">
   <div className="space-y-2">
     <Label htmlFor="username" className="flex items-center gap-2">
-      <User className="size-4" />
+      <Icon symbol="person" className="text-lg" />
       Username
     </Label>
     <Input id="username" placeholder="Enter your username" />
@@ -116,7 +116,7 @@ import { Input } from "@adamosuiteservices/ui/input";
 
   <div className="space-y-2">
     <Label htmlFor="email" className="flex items-center gap-2">
-      <Mail className="size-4" />
+      <Icon symbol="mail" className="text-lg" />
       Email Address
     </Label>
     <Input id="email" type="email" placeholder="Enter your email" />
@@ -124,7 +124,7 @@ import { Input } from "@adamosuiteservices/ui/input";
 
   <div className="space-y-2">
     <Label htmlFor="password" className="flex items-center gap-2">
-      <Lock className="size-4" />
+      <Icon symbol="lock" className="text-lg" />
       Password
     </Label>
     <Input id="password" type="password" />
@@ -132,7 +132,7 @@ import { Input } from "@adamosuiteservices/ui/input";
 
   <div className="space-y-2">
     <Label htmlFor="birthday" className="flex items-center gap-2">
-      <Calendar className="size-4" />
+      <Icon symbol="calendar_month" className="text-lg" />
       Date of Birth
     </Label>
     <Input id="birthday" type="date" />

package/docs/components/ui/pagination.md

@@ -98,7 +98,7 @@ import {
 | `onClick`   | `(e) => void` | -            | Click handler          |
 | `className` | `string`      | -            | Clases CSS adicionales |
 
-**Nota**: PaginationLink con ChevronLeft icon, texto "Previous" oculto en mobile
+**Nota**: PaginationLink con chevron_left icon (Material Symbol), texto "Previous" oculto en mobile
 
 ### PaginationNext
 
@@ -109,7 +109,7 @@ import {
 | `onClick`   | `(e) => void` | -        | Click handler          |
 | `className` | `string`      | -        | Clases CSS adicionales |
 
-**Nota**: PaginationLink con ChevronRight icon, texto "Next" oculto en mobile
+**Nota**: PaginationLink con chevron_right icon (Material Symbol), texto "Next" oculto en mobile
 
 ### PaginationEllipsis
 
@@ -117,7 +117,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Clases CSS adicionales |
 
-**Nota**: `<span>` con MoreHorizontal icon y `aria-hidden`
+**Nota**: `<span>` con more_horiz icon (Material Symbol) y `aria-hidden`
 
 ## Patrones de Uso
 
@@ -574,7 +574,7 @@ className = "pointer-events-none opacity-50";
 ### PaginationEllipsis
 
 - **Size**: `size-9`
-- **Icon**: MoreHorizontal `size-4`
+- **Icon**: more_horiz (Material Symbol) con `text-lg`
 - **Layout**: `flex items-center justify-center`
 - **ARIA**: `aria-hidden`
 
@@ -595,7 +595,7 @@ className = "pointer-events-none opacity-50";
 ## Notas de Implementación
 
 - **Links**: PaginationLink es `<a>` no `<button>`, usa Button styles
-- **Icons**: ChevronLeft, ChevronRight, MoreHorizontal de lucide-react
+- **Icons**: chevron_left, chevron_right, more_horiz (Material Symbols)
 - **Responsive text**: Previous/Next usan `hidden sm:block` en texto
 - **No state**: Componente stateless, maneja estado externamente
 - **Ellipsis logic**: Representación negativa (-1, -2) común para identificar ellipsis

package/docs/components/ui/popover.md

@@ -119,7 +119,7 @@ import {
   AvatarImage,
   AvatarFallback,
 } from "@adamosuiteservices/ui/avatar";
-import { Calendar } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Popover>
   <PopoverTrigger asChild>
@@ -142,7 +142,7 @@ import { Calendar } from "lucide-react";
           The React Framework – created and maintained by @vercel.
         </p>
         <div className="flex items-center pt-2">
-          <Calendar className="mr-2 h-4 w-4 opacity-70" />
+          <Icon symbol="calendar_month" className="mr-2 text-lg opacity-70" />
           <span className="text-xs text-muted-foreground">
             Joined December 2021
           </span>
@@ -158,12 +158,12 @@ import { Calendar } from "lucide-react";
 ```tsx
 import { Switch } from "@adamosuiteservices/ui/switch";
 import { Separator } from "@adamosuiteservices/ui/separator";
-import { Settings } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Popover>
   <PopoverTrigger asChild>
     <Button variant="outline" size="icon">
-      <Settings className="h-4 w-4" />
+      <Icon symbol="settings" className="text-lg" />
     </Button>
   </PopoverTrigger>
   <PopoverContent className="w-80">
@@ -201,7 +201,7 @@ import { Settings } from "lucide-react";
 ```tsx
 import { useState } from "react";
 import { Calendar } from "@adamosuiteservices/ui/calendar";
-import { Calendar as CalendarIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function App() {
   const [date, setDate] = useState<Date | undefined>(new Date());
@@ -216,7 +216,7 @@ function App() {
             !date && "text-muted-foreground"
           )}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
+          <Icon symbol="calendar_month" className="mr-2 text-lg" />
           {date ? date.toLocaleDateString() : "Pick a date"}
         </Button>
       </PopoverTrigger>
@@ -237,7 +237,7 @@ function App() {
 
 ```tsx
 import { useState } from "react";
-import { Plus, Minus } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function App() {
   const [count, setCount] = useState(0);
@@ -262,7 +262,7 @@ function App() {
               onClick={() => setCount(Math.max(0, count - 1))}
               disabled={count === 0}
             >
-              <Minus className="h-4 w-4" />
+              <Icon symbol="remove" className="text-lg" />
             </Button>
             <div className="flex items-center justify-center w-16 h-10 border rounded">
               {count}
@@ -272,7 +272,7 @@ function App() {
               size="icon"
               onClick={() => setCount(count + 1)}
             >
-              <Plus className="h-4 w-4" />
+              <Icon symbol="add" className="text-lg" />
             </Button>
           </div>
           <div className="flex gap-2">
@@ -293,20 +293,20 @@ function App() {
 ### Con Info Icon
 
 ```tsx
-import { Info, AlertCircle } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <div className="flex items-center gap-4">
   <span>Complex Feature</span>
   <Popover>
     <PopoverTrigger asChild>
       <Button variant="ghost" size="icon" className="h-5 w-5">
-        <Info className="h-3 w-3" />
+        <Icon symbol="info" className="text-sm" />
       </Button>
     </PopoverTrigger>
     <PopoverContent className="w-80">
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <AlertCircle className="h-4 w-4 text-blue-500" />
+          <Icon symbol="error" className="text-lg text-blue-500" />
           <h4 className="font-medium">About this feature</h4>
         </div>
         <p className="text-sm text-muted-foreground">
@@ -329,14 +329,14 @@ import { Info, AlertCircle } from "lucide-react";
 ### Con Notifications
 
 ```tsx
-import { Mail } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 import { Badge } from "@adamosuiteservices/ui/badge";
 import { Separator } from "@adamosuiteservices/ui/separator";
 
 <Popover>
   <PopoverTrigger asChild>
     <Button variant="outline" size="icon" className="relative">
-      <Mail className="h-4 w-4" />
+      <Icon symbol="mail" className="text-lg" />
       <Badge
         className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center"
         variant="destructive"

package/docs/components/ui/progress.md

@@ -97,11 +97,11 @@ function App() {
 ### Con Iconos
 
 ```tsx
-import { Download } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <div className="space-y-2">
   <div className="flex items-center gap-2">
-    <Download className="h-4 w-4" />
+    <Icon symbol="download" className="text-lg" />
     <Label>Download</Label>
     <span className="ml-auto text-sm text-muted-foreground">65%</span>
   </div>

package/docs/components/ui/radio-group.md

@@ -275,7 +275,7 @@ function App() {
 
 - **Size**: `size-5` (20px)
 - **Border**: `border-input` con `shadow-xs`
-- **Checked**: `CircleIcon` con `fill-primary`
+- **Checked**: Icon `circle` con `text-primary`
 - **Focus**: `ring-ring/50` con `ring-[3px]`
 - **Invalid**: `border-destructive` con `ring-destructive/20`
 - **Spacing**: `gap-3` default entre item y label
@@ -291,7 +291,7 @@ function App() {
 ## Notas de Implementación
 
 - **Radix UI**: Basado en `@radix-ui/react-radio-group`
-- **Indicador**: Usa `CircleIcon` de lucide-react con `fill-primary`
+- **Indicador**: Usa Icon component con symbol `circle` y `text-primary`
 - **Grid layout**: Default usa `grid gap-3` para vertical spacing
 - **Data attributes**: `data-slot` para identificar componentes
 - **Controlled**: Usa `value` + `onValueChange`

package/docs/components/ui/select.md

@@ -177,7 +177,7 @@ import { SelectGroup, SelectLabel } from "@adamosuiteservices/ui/select";
 ### Con Iconos
 
 ```tsx
-import { Apple, Banana, Cherry } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Select>
   <SelectTrigger className="w-[200px]">
@@ -185,15 +185,15 @@ import { Apple, Banana, Cherry } from "lucide-react";
   </SelectTrigger>
   <SelectContent>
     <SelectItem value="apple">
-      <Apple className="mr-2 h-4 w-4" />
+      <Icon symbol="nutrition" className="mr-2 text-lg" />
       Apple
     </SelectItem>
     <SelectItem value="banana">
-      <Banana className="mr-2 h-4 w-4" />
+      <Icon symbol="nutrition" className="mr-2 text-lg" />
       Banana
     </SelectItem>
     <SelectItem value="cherry">
-      <Cherry className="mr-2 h-4 w-4" />
+      <Icon symbol="nutrition" className="mr-2 text-lg" />
       Cherry
     </SelectItem>
   </SelectContent>
@@ -317,7 +317,7 @@ function App() {
 - **Focus**: `ring-ring/50` con `ring-[3px]`
 - **Content**: `bg-popover` con `shadow-md` y `border`
 - **Item hover**: `bg-accent text-accent-foreground`
-- **Check icon**: `CheckIcon` size-4 en item seleccionado
+- **Check icon**: Icon `check` con `text-lg` en item seleccionado
 
 ## Accesibilidad
 
@@ -331,7 +331,7 @@ function App() {
 
 - **Radix UI**: Basado en `@radix-ui/react-select`
 - **Portal**: SelectContent se renderiza en portal
-- **Iconos**: ChevronDown en trigger, CheckIcon en items seleccionados
+- **Iconos**: Icon `expand_more` en trigger, Icon `check` en items seleccionados, Icon `expand_less`/`expand_more` en scroll buttons
 - **Scroll buttons**: Auto-mostrados cuando content es scrollable
 - **Position**: `popper` (default) para absolute positioning
 - **Type-ahead**: Buscar items escribiendo

package/docs/components/ui/spinner.md

@@ -1,10 +1,10 @@
 # Spinner
 
-Indicador de carga animado basado en Loader2 icon de Lucide. Icono giratorio para estados de loading.
+Indicador de carga animado usando Material Symbols. Icono giratorio para estados de loading.
 
 ## Descripción
 
-El componente `Spinner` muestra un indicador de carga animado.
+El componente `Spinner` muestra un indicador de carga animado usando el ícono `progress_activity` de Material Symbols.
 
 ## Importación
 
@@ -26,7 +26,7 @@ import { Spinner } from "@adamosuiteservices/ui/spinner";
 | ----------- | -------- | ------------------------------ |
 | `className` | `string` | Clases CSS para tamaño y color |
 
-**Nota**: Acepta todas las props de `<svg>`
+**Nota**: Acepta todas las props de `<span>` (Material Symbols es font-based)
 
 ## Patrones de Uso
 
@@ -39,10 +39,10 @@ import { Spinner } from "@adamosuiteservices/ui/spinner";
 ### Tamaños
 
 ```tsx
-<Spinner className="size-3" />
-<Spinner className="size-4" />  {/* Default */}
-<Spinner className="size-6" />
-<Spinner className="size-8" />
+<Spinner className="text-sm" />
+<Spinner className="text-lg" />  {/* Default */}
+<Spinner className="text-2xl" />
+<Spinner className="text-3xl" />
 ```
 
 ### Colores
@@ -116,7 +116,7 @@ import { Card, CardContent } from "@adamosuiteservices/ui/card";
 
 <Card>
   <CardContent className="flex items-center space-x-3 p-6">
-    <Spinner className="size-5" />
+    <Spinner className="text-xl" />
     <span>Processing your payment...</span>
   </CardContent>
 </Card>;
@@ -126,7 +126,7 @@ import { Card, CardContent } from "@adamosuiteservices/ui/card";
 
 ```tsx
 <p>
-  Loading data <Spinner className="inline size-4" />
+  Loading data <Spinner className="inline text-lg" />
 </p>
 ```
 
@@ -140,7 +140,7 @@ import { Card, CardContent } from "@adamosuiteservices/ui/card";
 
 ## Estilos Base
 
-- **Size**: `size-4` default
+- **Size**: `text-lg` default (font-size based)
 - **Animation**: `animate-spin`
 - **Role**: `role="status"`
 - **ARIA**: `aria-label="Loading"`
@@ -153,18 +153,18 @@ import { Card, CardContent } from "@adamosuiteservices/ui/card";
 
 ## Notas de Implementación
 
-- **Lucide React**: Usa `Loader2Icon` de lucide-react
+- **Material Symbols**: Usa Icon component con symbol `progress_activity`
 - **Spin animation**: Tailwind `animate-spin`
-- **SVG**: Componente SVG nativo
-- **Customizable**: Tamaño y color via className
+- **Font-based**: Material Symbol icon (span element)
+- **Customizable**: Tamaño y color via className con font-size classes
 
 ## Troubleshooting
 
 **No gira**: Verifica `animate-spin` aplicado  
-**Muy pequeño/grande**: Ajusta `size-*` en className  
+**Muy pequeño/grande**: Ajusta `text-*` en className (text-lg, text-xl, etc.)  
 **Color incorrecto**: Usa `text-*` para cambiar color  
 **No se ve en button**: Asegúrate de espaciado con gap
 
 ## Referencias
 
-- **Lucide Icons**: <https://lucide.dev/icons/loader-2>
+- **Material Symbols**: <https://fonts.google.com/icons>

package/docs/components/ui/switch.md

@@ -83,7 +83,7 @@ function App() {
 ### Con Iconos y Badges
 
 ```tsx
-import { BellIcon, MoonIcon, WifiIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 import { Badge } from "@adamosuiteservices/ui/badge";
 
 function Settings() {
@@ -96,7 +96,10 @@ function Settings() {
   return (
     <div className="space-y-4">
       <div className="flex items-center space-x-3">
-        <BellIcon className="size-4 text-muted-foreground" />
+        <Icon
+          symbol="notifications"
+          className="text-lg text-muted-foreground"
+        />
         <Switch
           checked={settings.notifications}
           onCheckedChange={(checked) =>
@@ -110,7 +113,7 @@ function Settings() {
       </div>
 
       <div className="flex items-center space-x-3">
-        <MoonIcon className="size-4 text-muted-foreground" />
+        <Icon symbol="dark_mode" className="text-lg text-muted-foreground" />
         <Switch
           checked={settings.darkMode}
           onCheckedChange={(checked) =>
@@ -137,7 +140,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@adamosuiteservices/ui/card";
-import { AirplayIcon, WifiIcon, BluetoothIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function ControlCenter() {
   const [deviceSettings, setDeviceSettings] = useState({
@@ -159,7 +162,7 @@ function ControlCenter() {
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-4">
           <div className="flex flex-col items-center space-y-2 p-3 border rounded-lg">
-            <AirplayIcon className="size-6 text-muted-foreground" />
+            <Icon symbol="flight" className="text-2xl text-muted-foreground" />
             <span className="text-sm font-medium">Airplane</span>
             <Switch
               checked={deviceSettings.airplaneMode}
@@ -169,7 +172,7 @@ function ControlCenter() {
           </div>
 
           <div className="flex flex-col items-center space-y-2 p-3 border rounded-lg">
-            <WifiIcon className="size-6 text-muted-foreground" />
+            <Icon symbol="wifi" className="text-2xl text-muted-foreground" />
             <span className="text-sm font-medium">Wi-Fi</span>
             <Switch
               checked={deviceSettings.wifi}
@@ -179,7 +182,10 @@ function ControlCenter() {
           </div>
 
           <div className="flex flex-col items-center space-y-2 p-3 border rounded-lg">
-            <BluetoothIcon className="size-6 text-muted-foreground" />
+            <Icon
+              symbol="bluetooth"
+              className="text-2xl text-muted-foreground"
+            />
             <span className="text-sm font-medium">Bluetooth</span>
             <Switch
               checked={deviceSettings.bluetooth}
@@ -197,7 +203,7 @@ function ControlCenter() {
 ### Privacy Settings
 
 ```tsx
-import { ShieldIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 import { Button } from "@adamosuiteservices/ui/button";
 
 function PrivacySettings() {
@@ -212,7 +218,7 @@ function PrivacySettings() {
     <Card className="w-full max-w-lg">
       <CardHeader>
         <CardTitle className="flex items-center space-x-2">
-          <ShieldIcon className="size-5" />
+          <Icon symbol="shield" className="text-xl" />
           <span>Privacy & Security</span>
         </CardTitle>
         <CardDescription>

package/docs/components/ui/tabs-underline.md

@@ -58,19 +58,19 @@ Idéntico a `tabs` component. Ver documentación de tabs para props completas.
 ### Con Iconos
 
 ```tsx
-import { BarChartIcon, TableIcon, FileTextIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <TabsUnderlineList>
   <TabsUnderlineTrigger value="charts">
-    <BarChartIcon />
+    <Icon symbol="bar_chart" />
     Charts
   </TabsUnderlineTrigger>
   <TabsUnderlineTrigger value="table">
-    <TableIcon />
+    <Icon symbol="table" />
     Table
   </TabsUnderlineTrigger>
   <TabsUnderlineTrigger value="report">
-    <FileTextIcon />
+    <Icon symbol="description" />
     Report
   </TabsUnderlineTrigger>
 </TabsUnderlineList>;

package/docs/components/ui/tabs.md

@@ -82,23 +82,23 @@ const [activeTab, setActiveTab] = useState("overview");
 ### Con Iconos
 
 ```tsx
-import { UserIcon, KeyIcon, HomeIcon, SettingsIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <TabsList>
   <TabsTrigger value="home">
-    <HomeIcon />
+    <Icon symbol="home" />
     Home
   </TabsTrigger>
   <TabsTrigger value="settings">
-    <SettingsIcon />
+    <Icon symbol="settings" />
     Settings
   </TabsTrigger>
   <TabsTrigger value="profile">
-    <UserIcon />
+    <Icon symbol="person" />
     Profile
   </TabsTrigger>
   <TabsTrigger value="security">
-    <KeyIcon />
+    <Icon symbol="key" />
     Security
   </TabsTrigger>
 </TabsList>;