@adamosuiteservices/ui 2.9.15 → 2.10.0

package/docs/components/ui/breadcrumb.md

@@ -56,22 +56,22 @@ import {
 ### Con Iconos
 
 ```tsx
-import { HomeIcon, FolderIcon, FileIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Breadcrumb>
   <BreadcrumbList>
     <BreadcrumbItem>
-      <HomeIcon className="h-4 w-4" />
+      <Icon symbol="home" className="text-lg" />
       <BreadcrumbLink href="/">Home</BreadcrumbLink>
     </BreadcrumbItem>
     <BreadcrumbSeparator />
     <BreadcrumbItem>
-      <FolderIcon className="h-4 w-4" />
+      <Icon symbol="folder" className="text-lg" />
       <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
     </BreadcrumbItem>
     <BreadcrumbSeparator />
     <BreadcrumbItem>
-      <FileIcon className="h-4 w-4" />
+      <Icon symbol="description" className="text-lg" />
       <BreadcrumbPage>Document.pdf</BreadcrumbPage>
     </BreadcrumbItem>
   </BreadcrumbList>
@@ -235,11 +235,11 @@ Indicador de elementos colapsados (tres puntos).
 
 - Layout: `flex`, `items-center`, `justify-center`
 - Size: `size-9` (36x36px)
-- Icon: `size-4` (16px MoreHorizontal)
+- Icon: Material Symbols `more_horiz` icon
 
 **Incluye**:
 
-- Icono `MoreHorizontal` de lucide-react
+- Icono Material Symbols `more_horiz`
 - `<span className="sr-only">More</span>` para accesibilidad
 
 **Props**: Hereda todas las props de `React.ComponentProps<"span">`.
@@ -358,11 +358,11 @@ Colapsa elementos en móvil para ahorrar espacio:
 Usa cualquier icono o elemento como separador:
 
 ```tsx
-import { SlashIcon, ChevronRight, ArrowRight } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 // Slash
 <BreadcrumbSeparator>
-  <SlashIcon />
+  <Icon symbol="slash_forward" />
 </BreadcrumbSeparator>
 
 // Texto
@@ -372,7 +372,7 @@ import { SlashIcon, ChevronRight, ArrowRight } from "lucide-react";
 
 // Arrow
 <BreadcrumbSeparator>
-  <ArrowRight />
+  <Icon symbol="arrow_forward" />
 </BreadcrumbSeparator>
 ```
 
@@ -435,27 +435,27 @@ Navegación de documentos anidados:
 Sistema de archivos o carpetas:
 
 ```tsx
-import { FolderIcon, FileIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <Breadcrumb>
   <BreadcrumbList>
     <BreadcrumbItem>
       <BreadcrumbLink href="/files">
-        <FolderIcon className="h-4 w-4" />
+        <Icon symbol="folder" className="text-lg" />
         My Files
       </BreadcrumbLink>
     </BreadcrumbItem>
     <BreadcrumbSeparator />
     <BreadcrumbItem>
       <BreadcrumbLink href="/files/documents">
-        <FolderIcon className="h-4 w-4" />
+        <Icon symbol="folder" className="text-lg" />
         Documents
       </BreadcrumbLink>
     </BreadcrumbItem>
     <BreadcrumbSeparator />
     <BreadcrumbItem>
       <BreadcrumbPage>
-        <FileIcon className="h-4 w-4" />
+        <Icon symbol="description" className="text-lg" />
         Report.pdf
       </BreadcrumbPage>
     </BreadcrumbItem>
@@ -604,7 +604,7 @@ type BreadcrumbEllipsisProps = ComponentProps<"span">;
 ## Dependencias
 
 - **@radix-ui/react-slot**: Para el patrón `asChild`
-- **lucide-react**: Iconos por defecto (ChevronRight, MoreHorizontal)
+- **Material Symbols**: Iconos por defecto (chevron_right, more_horiz)
 - **@src/lib/utils**: Utilidad `cn` para combinar clases
 
 ## Recursos

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

@@ -63,14 +63,16 @@ import { Button } from "@adamosuiteservices/ui/button";
 ### Orientación Vertical
 
 ```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
 <ButtonGroup orientation="vertical" className="h-fit">
   <Button variant="outline" size="icon">
-    <PlusIcon />
+    <Icon symbol="add" />
   </Button>
   <Button variant="outline" size="icon">
-    <MinusIcon />
+    <Icon symbol="remove" />
   </Button>
-</ButtonGroup>
+</ButtonGroup>;
 ```
 
 **Nota**: Agrega `className="h-fit"` para evitar que el grupo se estire verticalmente.
@@ -195,7 +197,7 @@ Todos los tamaños de Button funcionan en ButtonGroup:
     Buttons
   </Button>
   <Button variant="outline" size="icon-sm">
-    <PlusIcon />
+    <Icon symbol="add" />
   </Button>
 </ButtonGroup>;
 
@@ -206,7 +208,7 @@ Todos los tamaños de Button funcionan en ButtonGroup:
   <Button variant="outline">Default</Button>
   <Button variant="outline">Buttons</Button>
   <Button variant="outline" size="icon">
-    <PlusIcon />
+    <Icon symbol="add" />
   </Button>
 </ButtonGroup>;
 
@@ -221,7 +223,7 @@ Todos los tamaños de Button funcionan en ButtonGroup:
     Buttons
   </Button>
   <Button variant="outline" size="icon-lg">
-    <PlusIcon />
+    <Icon symbol="add" />
   </Button>
 </ButtonGroup>;
 ```
@@ -249,10 +251,10 @@ Para crear toolbars complejas con espaciado entre grupos lógicos.
   </ButtonGroup>
   <ButtonGroup>
     <Button variant="outline" size="icon-sm">
-      <ArrowLeftIcon />
+      <Icon symbol="arrow_back" />
     </Button>
     <Button variant="outline" size="icon-sm">
-      <ArrowRightIcon />
+      <Icon symbol="arrow_forward" />
     </Button>
   </ButtonGroup>
 </ButtonGroup>
@@ -269,7 +271,7 @@ Botón con acción principal y menú dropdown.
   <Button variant="secondary">Deploy</Button>
   <ButtonGroupSeparator />
   <Button size="icon" variant="secondary">
-    <ChevronDownIcon />
+    <Icon symbol="keyboard_arrow_down" />
   </Button>
 </ButtonGroup>
 ```
@@ -280,12 +282,12 @@ Botón con acción principal y menú dropdown.
 
 ```tsx
 import { Input } from "@adamosuiteservices/ui/input";
-import { SearchIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <ButtonGroup>
   <Input placeholder="Search..." />
   <Button variant="outline" aria-label="Search">
-    <SearchIcon />
+    <Icon symbol="search" />
   </Button>
 </ButtonGroup>;
 ```
@@ -302,7 +304,7 @@ import {
   SelectContent,
   SelectItem,
 } from "@adamosuiteservices/ui/select";
-import { ArrowRightIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function CurrencyInput() {
   const [currency, setCurrency] = useState("$");
@@ -322,7 +324,7 @@ function CurrencyInput() {
       </ButtonGroup>
       <ButtonGroup>
         <Button aria-label="Send" size="icon" variant="outline">
-          <ArrowRightIcon />
+          <Icon symbol="arrow_forward" />
         </Button>
       </ButtonGroup>
     </ButtonGroup>
@@ -335,14 +337,7 @@ function CurrencyInput() {
 Player de audio/video con controles agrupados.
 
 ```tsx
-import {
-  PlayIcon,
-  PauseIcon,
-  SkipBackIcon,
-  SkipForwardIcon,
-  SquareIcon,
-} from "lucide-react";
-import { VolumeXIcon, Volume2Icon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function MediaControls() {
   const [isPlaying, setIsPlaying] = useState(false);
@@ -352,31 +347,31 @@ function MediaControls() {
       {/* Controles de reproducción */}
       <ButtonGroup>
         <Button variant="outline" size="icon">
-          <SkipBackIcon />
+          <Icon symbol="skip_previous" />
         </Button>
         <Button
           variant="outline"
           size="icon"
           onClick={() => setIsPlaying(!isPlaying)}
         >
-          {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          {isPlaying ? <Icon symbol="pause" /> : <Icon symbol="play_arrow" />}
         </Button>
         <Button variant="outline" size="icon">
-          <SquareIcon />
+          <Icon symbol="stop" />
         </Button>
         <Button variant="outline" size="icon">
-          <SkipForwardIcon />
+          <Icon symbol="skip_next" />
         </Button>
       </ButtonGroup>
 
       {/* Controles de volumen */}
       <ButtonGroup>
         <Button variant="outline" size="icon">
-          <VolumeXIcon />
+          <Icon symbol="volume_off" />
         </Button>
         <ButtonGroupText className="px-4">Volume</ButtonGroupText>
         <Button variant="outline" size="icon">
-          <Volume2Icon />
+          <Icon symbol="volume_up" />
         </Button>
       </ButtonGroup>
     </div>
@@ -389,8 +384,7 @@ function MediaControls() {
 Controles de formateo con estados toggle.
 
 ```tsx
-import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
-import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 function TextEditor() {
   const [formatting, setFormatting] = useState({
@@ -411,7 +405,7 @@ function TextEditor() {
             setFormatting((prev) => ({ ...prev, bold: !prev.bold }))
           }
         >
-          <BoldIcon />
+          <Icon symbol="format_bold" />
         </Button>
         <Button
           variant={formatting.italic ? "default" : "outline"}
@@ -420,7 +414,7 @@ function TextEditor() {
             setFormatting((prev) => ({ ...prev, italic: !prev.italic }))
           }
         >
-          <ItalicIcon />
+          <Icon symbol="format_italic" />
         </Button>
         <Button
           variant={formatting.underline ? "default" : "outline"}
@@ -429,7 +423,7 @@ function TextEditor() {
             setFormatting((prev) => ({ ...prev, underline: !prev.underline }))
           }
         >
-          <UnderlineIcon />
+          <Icon symbol="format_underlined" />
         </Button>
       </ButtonGroup>
 
@@ -440,21 +434,21 @@ function TextEditor() {
           size="icon"
           onClick={() => setAlignment("left")}
         >
-          <AlignLeftIcon />
+          <Icon symbol="format_align_left" />
         </Button>
         <Button
           variant={alignment === "center" ? "default" : "outline"}
           size="icon"
           onClick={() => setAlignment("center")}
         >
-          <AlignCenterIcon />
+          <Icon symbol="format_align_center" />
         </Button>
         <Button
           variant={alignment === "right" ? "default" : "outline"}
           size="icon"
           onClick={() => setAlignment("right")}
         >
-          <AlignRightIcon />
+          <Icon symbol="format_align_right" />
         </Button>
       </ButtonGroup>
     </div>
@@ -467,28 +461,21 @@ function TextEditor() {
 Grupos para operaciones de archivo.
 
 ```tsx
-import { SaveIcon, DownloadIcon, UploadIcon } from "lucide-react";
-import {
-  UndoIcon,
-  RedoIcon,
-  CopyIcon,
-  ShareIcon,
-  TrashIcon,
-} from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <div className="space-y-4">
   {/* Acciones principales */}
   <ButtonGroup>
     <Button variant="outline">
-      <SaveIcon />
+      <Icon symbol="save" />
       Save
     </Button>
     <Button variant="outline">
-      <DownloadIcon />
+      <Icon symbol="download" />
       Download
     </Button>
     <Button variant="outline">
-      <UploadIcon />
+      <Icon symbol="upload" />
       Upload
     </Button>
   </ButtonGroup>
@@ -496,21 +483,21 @@ import {
   {/* Acciones rápidas */}
   <ButtonGroup>
     <Button variant="outline" size="icon">
-      <UndoIcon />
+      <Icon symbol="undo" />
     </Button>
     <Button variant="outline" size="icon">
-      <RedoIcon />
+      <Icon symbol="redo" />
     </Button>
     <ButtonGroupSeparator />
     <Button variant="outline" size="icon">
-      <CopyIcon />
+      <Icon symbol="content_copy" />
     </Button>
     <Button variant="outline" size="icon">
-      <ShareIcon />
+      <Icon symbol="share" />
     </Button>
     <ButtonGroupSeparator />
     <Button variant="outline" size="icon">
-      <TrashIcon />
+      <Icon symbol="delete" />
     </Button>
   </ButtonGroup>
 </div>;
@@ -521,17 +508,12 @@ import {
 Layout con múltiples grupos anidados.
 
 ```tsx
-import {
-  ArrowLeftIcon,
-  MoreHorizontalIcon,
-  SettingsIcon,
-  RefreshCwIcon,
-} from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <ButtonGroup>
   <ButtonGroup>
     <Button variant="outline" size="icon">
-      <ArrowLeftIcon />
+      <Icon symbol="arrow_back" />
     </Button>
   </ButtonGroup>
   <ButtonGroup>
@@ -541,15 +523,15 @@ import {
   <ButtonGroup>
     <Button variant="outline">Snooze</Button>
     <Button variant="outline" size="icon">
-      <MoreHorizontalIcon />
+      <Icon symbol="more_horiz" />
     </Button>
   </ButtonGroup>
   <ButtonGroup>
     <Button variant="outline" size="icon">
-      <SettingsIcon />
+      <Icon symbol="settings" />
     </Button>
     <Button variant="outline" size="icon">
-      <RefreshCwIcon />
+      <Icon symbol="refresh" />
     </Button>
   </ButtonGroup>
 </ButtonGroup>;
@@ -560,7 +542,7 @@ import {
 Etiquetas para claridad contextual.
 
 ```tsx
-import { EditIcon, CopyIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <div className="space-y-4">
   {/* Texto antes */}
@@ -573,12 +555,12 @@ import { EditIcon, CopyIcon } from "lucide-react";
   {/* Texto entre botones */}
   <ButtonGroup>
     <Button variant="outline">
-      <EditIcon />
+      <Icon symbol="edit" />
       Edit
     </Button>
     <ButtonGroupText>or</ButtonGroupText>
     <Button variant="outline">
-      <CopyIcon />
+      <Icon symbol="content_copy" />
       Copy
     </Button>
   </ButtonGroup>
@@ -590,17 +572,17 @@ import { EditIcon, CopyIcon } from "lucide-react";
 ### Paginación
 
 ```tsx
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <ButtonGroup>
   <Button variant="outline" size="icon" disabled={currentPage === 1}>
-    <ChevronLeftIcon />
+    <Icon symbol="chevron_left" />
   </Button>
   <ButtonGroupText>
     {currentPage} of {totalPages}
   </ButtonGroupText>
   <Button variant="outline" size="icon" disabled={currentPage === totalPages}>
-    <ChevronRightIcon />
+    <Icon symbol="chevron_right" />
   </Button>
 </ButtonGroup>;
 ```
@@ -659,7 +641,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 ### Vista Toggle (List/Grid)
 
 ```tsx
-import { LayoutGridIcon, LayoutListIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <ButtonGroup>
   <Button
@@ -668,7 +650,7 @@ import { LayoutGridIcon, LayoutListIcon } from "lucide-react";
     onClick={() => setView("grid")}
     aria-label="Grid view"
   >
-    <LayoutGridIcon />
+    <Icon symbol="grid_view" />
   </Button>
   <Button
     variant={view === "list" ? "default" : "outline"}
@@ -676,7 +658,7 @@ import { LayoutGridIcon, LayoutListIcon } from "lucide-react";
     onClick={() => setView("list")}
     aria-label="List view"
   >
-    <LayoutListIcon />
+    <Icon symbol="list" />
   </Button>
 </ButtonGroup>;
 ```
@@ -684,15 +666,15 @@ import { LayoutGridIcon, LayoutListIcon } from "lucide-react";
 ### Zoom Controls
 
 ```tsx
-import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { Icon } from "@adamosuiteservices/ui/icon";
 
 <ButtonGroup>
   <Button variant="outline" size="icon" onClick={handleZoomOut}>
-    <ZoomOutIcon />
+    <Icon symbol="zoom_out" />
   </Button>
   <ButtonGroupText className="px-6 font-mono">{zoom}%</ButtonGroupText>
   <Button variant="outline" size="icon" onClick={handleZoomIn}>
-    <ZoomInIcon />
+    <Icon symbol="zoom_in" />
   </Button>
 </ButtonGroup>;
 ```
@@ -713,7 +695,7 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
     Two
   </Button>
   <Button variant="outline" size="icon-sm">
-    <PlusIcon />
+    <Icon symbol="add" />
   </Button>
 </ButtonGroup>;
 
@@ -782,10 +764,10 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
 }
 <ButtonGroup>
   <Button variant="outline" size="icon" aria-label="Previous page">
-    <ArrowLeftIcon />
+    <Icon symbol="arrow_back" />
   </Button>
   <Button variant="outline" size="icon" aria-label="Next page">
-    <ArrowRightIcon />
+    <Icon symbol="arrow_forward" />
   </Button>
 </ButtonGroup>;
 
@@ -794,10 +776,10 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
 }
 <ButtonGroup>
   <Button variant="outline" size="icon">
-    <ArrowLeftIcon />
+    <Icon symbol="arrow_back" />
   </Button>
   <Button variant="outline" size="icon">
-    <ArrowRightIcon />
+    <Icon symbol="arrow_forward" />
   </Button>
 </ButtonGroup>;
 ```
@@ -812,10 +794,10 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
   <ButtonGroup>
     {/* Acciones de navegación */}
     <Button variant="outline" size="icon">
-      <ArrowLeftIcon />
+      <Icon symbol="arrow_back" />
     </Button>
     <Button variant="outline" size="icon">
-      <ArrowRightIcon />
+      <Icon symbol="arrow_forward" />
     </Button>
   </ButtonGroup>
   <ButtonGroup>
@@ -830,11 +812,11 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
 }
 <ButtonGroup>
   <Button variant="outline" size="icon">
-    <ArrowLeftIcon />
+    <Icon symbol="arrow_back" />
   </Button>
   <Button variant="outline">Save</Button>
   <Button variant="outline" size="icon">
-    <ArrowRightIcon />
+    <Icon symbol="arrow_forward" />
   </Button>
   <Button variant="outline">Delete</Button>
 </ButtonGroup>;
@@ -875,13 +857,13 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
 }
 <ButtonGroup aria-label="Text alignment options">
   <Button variant="outline" size="icon" aria-label="Align left">
-    <AlignLeftIcon />
+    <Icon symbol="format_align_left" />
   </Button>
   <Button variant="outline" size="icon" aria-label="Align center">
-    <AlignCenterIcon />
+    <Icon symbol="format_align_center" />
   </Button>
   <Button variant="outline" size="icon" aria-label="Align right">
-    <AlignRightIcon />
+    <Icon symbol="format_align_right" />
   </Button>
 </ButtonGroup>;
 ```
@@ -905,7 +887,7 @@ import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
     aria-pressed={isBold}
     onClick={() => setIsBold(!isBold)}
   >
-    <BoldIcon />
+    <Icon symbol="format_bold" />
   </Button>
 </ButtonGroup>;
 ```
@@ -967,7 +949,7 @@ El focus ring se superpone correctamente gracias a `focus-visible:z-10 focus-vis
 <ButtonGroup>
   <Input placeholder="Search..." /> {/* Se expande automáticamente */}
   <Button variant="outline" size="icon">
-    <SearchIcon />
+    <Icon symbol="search" />
   </Button>
 </ButtonGroup>
 ```