@adamosuiteservices/ui 2.9.15 → 2.10.0

package/docs/components/ui/button.md

@@ -33,10 +33,10 @@ import { Button } from "@adamosuiteservices/ui/button";
 ### Con Icono
 
 ```tsx
-import { PlusIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Button>
-  <PlusIcon />
+  <Icon symbol="add" />
   Add Item
 </Button>;
 ```
@@ -349,10 +349,10 @@ Desactiva el botón y reduce opacidad.
 Muestra spinner y desactiva interacciones.
 
 ```tsx
-import { Loader2Icon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Button disabled>
-  <Loader2Icon className="animate-spin" />
+  <Icon symbol="progress_activity" className="animate-spin" />
   Loading...
 </Button>;
 ```
@@ -363,7 +363,7 @@ import { Loader2Icon } from "lucide-react";
 const [isLoading, setIsLoading] = useState(false);
 
 <Button disabled={isLoading} onClick={handleSubmit}>
-  {isLoading && <Loader2Icon className="animate-spin" />}
+  {isLoading && <Icon symbol="progress_activity" className="animate-spin" />}
   {isLoading ? "Saving..." : "Save Changes"}
 </Button>;
 ```
@@ -410,13 +410,13 @@ Para formularios con validación.
 ### Botón con Icono (Text + Icon)
 
 ```tsx
-import { SaveIcon, DownloadIcon, TrashIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 {
   /* Icono a la izquierda */
 }
 <Button>
-  <SaveIcon />
+  <Icon symbol="save" />
   Save Changes
 </Button>;
 
@@ -425,14 +425,14 @@ import { SaveIcon, DownloadIcon, TrashIcon } from "lucide-react";
 }
 <Button>
   Download
-  <DownloadIcon />
+  <Icon symbol="download" />
 </Button>;
 
 {
   /* Múltiples iconos */
 }
 <Button variant="destructive">
-  <TrashIcon />
+  <Icon symbol="delete" />
   Delete All
   <span className="ml-auto text-xs">(5)</span>
 </Button>;
@@ -468,7 +468,7 @@ import { SaveIcon, DownloadIcon, TrashIcon } from "lucide-react";
 
 ```tsx
 import { useState } from "react";
-import { HeartIcon, StarIcon, PlayIcon, PauseIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function LikeButton() {
   const [liked, setLiked] = useState(false);
@@ -478,7 +478,7 @@ function LikeButton() {
       variant={liked ? "default" : "outline"}
       onClick={() => setLiked(!liked)}
     >
-      <HeartIcon className={liked ? "fill-current" : ""} />
+      <Icon symbol="favorite" className={liked ? "fill-current" : ""} />
       {liked ? "Liked" : "Like"}
     </Button>
   );
@@ -492,7 +492,7 @@ function SaveButton() {
       variant={saved ? "secondary" : "outline"}
       onClick={() => setSaved(!saved)}
     >
-      <StarIcon className={saved ? "fill-current" : ""} />
+      <Icon symbol="star" className={saved ? "fill-current" : ""} />
       {saved ? "Saved" : "Save"}
     </Button>
   );
@@ -503,7 +503,7 @@ function PlayButton() {
 
   return (
     <Button variant="outline" onClick={() => setPlaying(!playing)}>
-      {playing ? <PauseIcon /> : <PlayIcon />}
+      {playing ? <Icon symbol="pause" /> : <Icon symbol="play_arrow" />}
       {playing ? "Pause" : "Play"}
     </Button>
   );
@@ -514,7 +514,7 @@ function PlayButton() {
 
 ```tsx
 import Link from "next/link";
-import { ExternalLinkIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Button asChild>
   <Link href="/dashboard">
@@ -524,7 +524,7 @@ import { ExternalLinkIcon } from "lucide-react";
 
 <Button asChild variant="outline">
   <a href="https://example.com" target="_blank" rel="noopener noreferrer">
-    <ExternalLinkIcon />
+    <Icon symbol="open_in_new" />
     External Link
   </a>
 </Button>
@@ -559,11 +559,11 @@ import { Badge } from "@adamosuiteservices/ui/badge";
 ### Botón Dropdown Trigger
 
 ```tsx
-import { ChevronDownIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Button>
   Options
-  <ChevronDownIcon className="ml-auto -mr-1" />
+  <Icon symbol="keyboard_arrow_down" className="ml-auto -mr-1" />
 </Button>;
 ```
 

package/docs/components/ui/calendar.md

@@ -408,7 +408,7 @@ import {
   PopoverTrigger,
 } from "@adamosuiteservices/ui/popover";
 import { Button } from "@adamosuiteservices/ui/button";
-import { CalendarIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 import { format } from "date-fns";
 
 function DatePickerPopover() {
@@ -418,7 +418,7 @@ function DatePickerPopover() {
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline">
-          <CalendarIcon />
+          <Icon symbol="calendar_today" />
           {date ? format(date, "PPP") : "Pick a date"}
         </Button>
       </PopoverTrigger>
@@ -690,13 +690,13 @@ import {
   PopoverTrigger,
 } from "@adamosuiteservices/ui/popover";
 import { Button } from "@adamosuiteservices/ui/button";
-import { CalendarIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 import { format } from "date-fns";
 
 <Popover>
   <PopoverTrigger asChild>
     <Button variant="outline">
-      <CalendarIcon />
+      <Icon symbol="calendar_today" />
       {date ? format(date, "PPP") : "Pick a date"}
     </Button>
   </PopoverTrigger>
@@ -712,7 +712,7 @@ import { format } from "date-fns";
 <Popover>
   <PopoverTrigger asChild>
     <Button variant="outline">
-      <CalendarIcon />
+      <Icon symbol="calendar_today" />
       {range?.from
         ? range.to
           ? `${format(range.from, "LLL dd")} - ${format(range.to, "LLL dd, y")}`
@@ -1130,7 +1130,7 @@ function DatePickerWithControl() {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button variant="outline">
-          <CalendarIcon />
+          <Icon symbol="calendar_today" />
           {date ? format(date, "PPP") : "Pick a date"}
         </Button>
       </PopoverTrigger>

package/docs/components/ui/card.md

@@ -78,7 +78,7 @@ Para contenedores minimalistas sin header/footer.
 Botón de acción que se alinea automáticamente a la derecha.
 
 ```tsx
-import { MoreHorizontalIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Card className="w-[400px]">
   <CardHeader>
@@ -86,7 +86,7 @@ import { MoreHorizontalIcon } from "lucide-react";
     <CardDescription>You have 3 unread messages.</CardDescription>
     <CardAction>
       <Button variant="outline" size="sm">
-        <MoreHorizontalIcon />
+        <Icon symbol="more_horiz" />
       </Button>
     </CardAction>
   </CardHeader>
@@ -394,19 +394,13 @@ Card con avatar, stats y acciones múltiples.
 
 ```tsx
 import { Avatar } from "@adamosuiteservices/ui/avatar";
-import {
-  HeartIcon,
-  StarIcon,
-  ShareIcon,
-  ExternalLinkIcon,
-  UserIcon,
-} from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Card className="w-[380px]">
   <CardHeader>
     <div className="flex items-center space-x-4">
       <Avatar className="h-12 w-12">
-        <UserIcon />
+        <Icon symbol="person" />
       </Avatar>
       <div>
         <CardTitle>Sofia Davis</CardTitle>
@@ -427,20 +421,20 @@ import {
   <CardFooter className="flex justify-between">
     <div className="flex space-x-4 text-sm text-muted-foreground">
       <div className="flex items-center">
-        <HeartIcon className="mr-1 h-3 w-3" />
+        <Icon symbol="favorite" className="mr-1 text-sm" />
         256
       </div>
       <div className="flex items-center">
-        <StarIcon className="mr-1 h-3 w-3" />
+        <Icon symbol="star" className="mr-1 text-sm" />
         98
       </div>
     </div>
     <div className="flex space-x-1">
       <Button variant="ghost" size="sm">
-        <ShareIcon />
+        <Icon symbol="share" />
       </Button>
       <Button variant="ghost" size="sm">
-        <ExternalLinkIcon />
+        <Icon symbol="open_in_new" />
       </Button>
     </div>
   </CardFooter>
@@ -453,7 +447,7 @@ E-commerce card con imagen, badge, precio y acciones.
 
 ```tsx
 import { Badge } from "@adamosuiteservices/ui/badge";
-import { StarIcon, CreditCardIcon, HeartIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Card className="w-[350px]">
   <CardHeader>
@@ -469,7 +463,7 @@ import { StarIcon, CreditCardIcon, HeartIcon } from "lucide-react";
       <div className="flex items-center justify-between">
         <div className="text-2xl font-bold">$299.99</div>
         <div className="flex items-center text-sm text-muted-foreground">
-          <StarIcon className="mr-1 h-4 w-4 fill-current" />
+          <Icon symbol="star" className="mr-1 text-lg fill-current" />
           4.5 (128)
         </div>
       </div>
@@ -477,11 +471,11 @@ import { StarIcon, CreditCardIcon, HeartIcon } from "lucide-react";
   </CardContent>
   <CardFooter className="flex gap-2">
     <Button className="flex-1">
-      <CreditCardIcon />
+      <Icon symbol="credit_card" />
       Add to Cart
     </Button>
     <Button variant="outline" size="sm">
-      <HeartIcon />
+      <Icon symbol="favorite" />
     </Button>
   </CardFooter>
 </Card>;
@@ -492,13 +486,13 @@ import { StarIcon, CreditCardIcon, HeartIcon } from "lucide-react";
 Grid de cards para métricas con iconos y tendencias.
 
 ```tsx
-import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
   <Card>
     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
       <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-      <DollarSignIcon className="h-4 w-4 text-muted-foreground" />
+      <Icon symbol="payments" className="text-lg text-muted-foreground" />
     </CardHeader>
     <CardContent>
       <div className="text-2xl font-bold">$45,231.89</div>
@@ -509,7 +503,7 @@ import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
   <Card>
     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
       <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-      <UserIcon className="h-4 w-4 text-muted-foreground" />
+      <Icon symbol="person" className="text-lg text-muted-foreground" />
     </CardHeader>
     <CardContent>
       <div className="text-2xl font-bold">+2350</div>
@@ -520,7 +514,7 @@ import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
   <Card>
     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
       <CardTitle className="text-sm font-medium">Sales</CardTitle>
-      <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
+      <Icon symbol="credit_card" className="text-lg text-muted-foreground" />
     </CardHeader>
     <CardContent>
       <div className="text-2xl font-bold">+12,234</div>
@@ -531,7 +525,7 @@ import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
   <Card>
     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
       <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-      <UserIcon className="h-4 w-4 text-muted-foreground" />
+      <Icon symbol="person" className="text-lg text-muted-foreground" />
     </CardHeader>
     <CardContent>
       <div className="text-2xl font-bold">+573</div>
@@ -546,7 +540,7 @@ import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
 Lista de notificaciones con items y acción de marcar leído.
 
 ```tsx
-import { BellIcon, MailIcon, CheckIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Card className="w-[380px]">
   <CardHeader>
@@ -555,7 +549,7 @@ import { BellIcon, MailIcon, CheckIcon } from "lucide-react";
   </CardHeader>
   <CardContent className="grid gap-4">
     <div className="flex items-center space-x-4 rounded-md border p-4">
-      <BellIcon className="h-4 w-4" />
+      <Icon symbol="notifications" className="text-lg" />
       <div className="flex-1 space-y-1">
         <p className="text-sm font-medium leading-none">Push Notifications</p>
         <p className="text-sm text-muted-foreground">
@@ -564,7 +558,7 @@ import { BellIcon, MailIcon, CheckIcon } from "lucide-react";
       </div>
     </div>
     <div className="flex items-center space-x-4 rounded-md border p-4">
-      <MailIcon className="h-4 w-4" />
+      <Icon symbol="mail" className="text-lg" />
       <div className="flex-1 space-y-1">
         <p className="text-sm font-medium leading-none">Email Notifications</p>
         <p className="text-sm text-muted-foreground">
@@ -575,7 +569,7 @@ import { BellIcon, MailIcon, CheckIcon } from "lucide-react";
   </CardContent>
   <CardFooter>
     <Button className="w-full">
-      <CheckIcon />
+      <Icon symbol="check" />
       Mark all as read
     </Button>
   </CardFooter>

package/docs/components/ui/collapsible.md

@@ -79,12 +79,12 @@ const [isOpen, setIsOpen] = useState(false);
 
 ```tsx
 import { Button } from "@adamosuiteservices/ui/button";
-import { ChevronsUpDownIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Collapsible>
   <CollapsibleTrigger asChild>
     <Button variant="outline" size="sm">
-      <ChevronsUpDownIcon />
+      <Icon symbol="unfold_more" className="text-base" />
       Toggle
     </Button>
   </CollapsibleTrigger>
@@ -102,8 +102,9 @@ const [isOpen, setIsOpen] = useState(false);
 <Collapsible open={isOpen} onOpenChange={setIsOpen}>
   <CollapsibleTrigger className="flex w-full items-center justify-between p-4 border rounded-lg hover:bg-muted">
     <span>Section Title</span>
-    <ChevronDownIcon
-      className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
+    <Icon
+      symbol="expand_more"
+      className={`text-lg transition-transform ${isOpen ? "rotate-180" : ""}`}
     />
   </CollapsibleTrigger>
   <CollapsibleContent className="p-4">
@@ -119,7 +120,7 @@ const [isOpen, setIsOpen] = useState(false);
   <Collapsible>
     <CollapsibleTrigger className="flex w-full items-center justify-between border p-4 rounded-lg hover:bg-muted">
       <span className="font-medium">What is this?</span>
-      <ChevronRightIcon className="h-4 w-4" />
+      <Icon symbol="chevron_right" className="text-lg" />
     </CollapsibleTrigger>
     <CollapsibleContent className="px-4 pb-4">
       <p className="text-sm text-muted-foreground">
@@ -131,7 +132,7 @@ const [isOpen, setIsOpen] = useState(false);
   <Collapsible>
     <CollapsibleTrigger className="flex w-full items-center justify-between border p-4 rounded-lg hover:bg-muted">
       <span className="font-medium">How to install?</span>
-      <ChevronRightIcon className="h-4 w-4" />
+      <Icon symbol="chevron_right" className="text-lg" />
     </CollapsibleTrigger>
     <CollapsibleContent className="px-4 pb-4">
       <p className="text-sm text-muted-foreground">
@@ -159,10 +160,11 @@ const toggleSection = (id: string) => {
     onOpenChange={() => toggleSection("settings")}
   >
     <CollapsibleTrigger className="flex w-full items-center gap-2 p-3 rounded-lg hover:bg-muted">
-      <SettingsIcon className="h-4 w-4" />
+      <Icon symbol="settings" className="text-lg" />
       <span className="flex-1 font-medium">Settings</span>
-      <ChevronDownIcon
-        className={`h-4 w-4 transition-transform ${
+      <Icon
+        symbol="expand_more"
+        className={`text-lg transition-transform ${
           openSections.includes("settings") ? "rotate-180" : ""
         }`}
       />
@@ -182,10 +184,11 @@ const toggleSection = (id: string) => {
     onOpenChange={() => toggleSection("account")}
   >
     <CollapsibleTrigger className="flex w-full items-center gap-2 p-3 rounded-lg hover:bg-muted">
-      <UserIcon className="h-4 w-4" />
+      <Icon symbol="person" className="text-lg" />
       <span className="flex-1 font-medium">Account</span>
-      <ChevronDownIcon
-        className={`h-4 w-4 transition-transform ${
+      <Icon
+        symbol="expand_more"
+        className={`text-lg transition-transform ${
           openSections.includes("account") ? "rotate-180" : ""
         }`}
       />
@@ -238,7 +241,7 @@ const toggleSection = (id: string) => {
     <h4 className="font-semibold">@user starred 3 repos</h4>
     <CollapsibleTrigger asChild>
       <Button variant="outline" size="sm">
-        <ChevronsUpDownIcon />
+        <Icon symbol="unfold_more" className="text-base" />
       </Button>
     </CollapsibleTrigger>
   </div>

package/docs/components/ui/combobox.md

@@ -25,20 +25,20 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 
 ## Props Principales
 
-| Prop                    | Tipo                                    | Default      | Descripción                                                 |
-| ----------------------- | --------------------------------------- | ------------ | ----------------------------------------------------------- |
-| `options`               | `ComboboxOption[]`                      | **required** | Array de opciones `{ value, label, disabled? }`             |
-| `value`                 | `string \| string[]`                    | -            | Valor controlado (string para single, array para multiple)  |
-| `onValueChange`         | `(value: string \| string[]) => void`   | -            | Callback al cambiar selección                               |
-| `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`                  | `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)                    |
-| `classNames`            | `ComboboxClassNames`                    | -            | Clases CSS por sección (ver tabla abajo)                    |
-| `renders`               | `ComboboxRenderProps`                   | -            | Funciones de renderizado personalizadas (ver tabla abajo)   |
+| Prop                    | Tipo                                  | Default      | Descripción                                                 |
+| ----------------------- | ------------------------------------- | ------------ | ----------------------------------------------------------- |
+| `options`               | `ComboboxOption[]`                    | **required** | Array de opciones `{ value, label, disabled? }`             |
+| `value`                 | `string \| string[]`                  | -            | Valor controlado (string para single, array para multiple)  |
+| `onValueChange`         | `(value: string \| string[]) => void` | -            | Callback al cambiar selección                               |
+| `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`                  | `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)                    |
+| `classNames`            | `ComboboxClassNames`                  | -            | Clases CSS por sección (ver tabla abajo)                    |
+| `renders`               | `ComboboxRenderProps`                 | -            | Funciones de renderizado personalizadas (ver tabla abajo)   |
 
 ### ComboboxLabels
 

package/docs/components/ui/command.md

@@ -156,22 +156,22 @@ function CommandMenu() {
 ### Con Iconos
 
 ```tsx
-import { CalendarIcon, FaceIcon, RocketIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Command>
   <CommandInput placeholder="Search..." />
   <CommandList>
     <CommandGroup heading="Suggestions">
       <CommandItem>
-        <CalendarIcon />
+        <Icon symbol="calendar_month" />
         Calendar
       </CommandItem>
       <CommandItem>
-        <FaceIcon />
+        <Icon symbol="sentiment_satisfied" />
         Search Emoji
       </CommandItem>
       <CommandItem>
-        <RocketIcon />
+        <Icon symbol="rocket_launch" />
         Launch
       </CommandItem>
     </CommandGroup>
@@ -421,10 +421,10 @@ function CustomFilter() {
 - **Basado en cmdk**: Librería `cmdk` de Paco Coursey
 - **Fuzzy search**: Búsqueda difusa por defecto (typo-tolerant)
 - **Performance**: Virtualización automática con muchos items
-- **SearchIcon**: Incluido automáticamente en CommandInput
+- **Search icon**: Incluido automáticamente en CommandInput (Material Symbol "search")
 - **CommandDialog**: Wrapper de Command + Dialog con estilos predefinidos
 - **Data slots**: Cada componente tiene `data-slot` para CSS targeting
-- **SVG auto-sizing**: Iconos dentro de items automáticamente `size-4`
+- **Icon sizing**: Material Symbol icons automáticamente `text-lg` (18px) con shrink-0 y opacity-50
 - **CommandShortcut**: Elemento visual para shortcuts (no ejecuta código)
 - **Max height**: CommandList tiene `max-h-[300px]` default
 - **Scroll behavior**: `scroll-py-1` para padding al scrollear