@adamosuiteservices/ui 2.10.12 → 2.10.13

package/docs/components/ui/icon.md

@@ -84,7 +84,7 @@ Usa clases de texto Tailwind para controlar el tamaño del icono. Se pueden comb
 <Icon symbol="star" className="adm:text-5xl" />   {/* ~48px */}
 
 // Combinando tamaño con color
-<Icon symbol="star" className="adm:text-2xl adm:text-yellow-500" />
+<Icon symbol="star" className="adm:text-2xl adm:text-warning" />
 ```
 
 ### fill
@@ -190,7 +190,7 @@ function FavoriteButton() {
         fill={isFavorite ? 1 : 0}
         className={cn(
           "adm:text-lg",
-          isFavorite ? "adm:text-red-500" : "adm:text-gray-400"
+          isFavorite ? "adm:text-destructive" : "adm:text-muted-foreground"
         )}
       />
       {isFavorite ? "Liked" : "Like"}
@@ -261,7 +261,7 @@ const commonIcons = [
 <Icon
   symbol="notification"
   weight={300}
-  className="adm:text-2xl adm:text-blue-500 adm:drop-shadow-sm"
+  className="adm:text-2xl adm:text-primary adm:drop-shadow-sm"
 />
 ```
 
@@ -270,7 +270,7 @@ const commonIcons = [
 ```tsx
 <Icon
   symbol="refresh"
-  className="adm:text-2xl adm:animate-spin adm:text-blue-500"
+  className="adm:text-2xl adm:animate-spin adm:text-primary"
 />
 ```
 
@@ -291,7 +291,7 @@ const commonIcons = [
 <Card>
   <CardHeader>
     <div className="adm:flex adm:items-center adm:gap-2">
-      <Icon symbol="folder" className="adm:text-2xl adm:text-blue-500" />
+      <Icon symbol="folder" className="adm:text-2xl adm:text-primary" />
       <CardTitle>Documents</CardTitle>
     </div>
   </CardHeader>
@@ -311,17 +311,17 @@ const commonIcons = [
 
 ```tsx
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="check_circle" fill={1} className="adm:text-green-500" />
+  <Icon symbol="check_circle" fill={1} className="adm:text-success" />
   <span>Completed</span>
 </div>
 
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="error" fill={1} className="adm:text-red-500" />
+  <Icon symbol="error" fill={1} className="adm:text-destructive" />
   <span>Error</span>
 </div>
 
 <div className="adm:flex adm:items-center adm:gap-2">
-  <Icon symbol="schedule" fill={1} className="adm:text-yellow-500" />
+  <Icon symbol="schedule" fill={1} className="adm:text-warning" />
   <span>Pending</span>
 </div>
 ```
@@ -396,7 +396,7 @@ const commonIcons = [
 {
   /* ✅ Correcto - Peso mayor para énfasis */
 }
-<Icon symbol="warning" weight={500} fill={1} className="adm:text-yellow-500" />;
+<Icon symbol="warning" weight={500} fill={1} className="adm:text-warning" />;
 
 {
   /* ❌ Evitar - Peso muy pesado sin propósito */
@@ -408,9 +408,9 @@ const commonIcons = [
 
 ```tsx
 {/* ✅ Correcto - Estados con significado claro */}
-<Icon symbol="check_circle" fill={1} className="adm:text-green-500" />  {/* Éxito */}
-<Icon symbol="error" fill={1} className="adm:text-red-500" />           {/* Error */}
-<Icon symbol="info" fill={1} className="adm:text-blue-500" />           {/* Info */}
+<Icon symbol="check_circle" fill={1} className="adm:text-success" />  {/* Éxito */}
+<Icon symbol="error" fill={1} className="adm:text-destructive" />           {/* Error */}
+<Icon symbol="info" fill={1} className="adm:text-primary" />           {/* Info */}
 
 {/* ✅ Correcto - Estados interactivos */}
 <Icon symbol="favorite" fill={liked ? 1 : 0} />

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

@@ -79,12 +79,12 @@ import {
 
 ### InputGroupButton
 
-| Prop      | Tipo                                     | Default    | Descripción                              |
-| --------- | ---------------------------------------- | ---------- | ---------------------------------------- |
-| `size`    | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"`     | Tamaño del botón                         |
-| `variant` | Button variants                          | `"ghost"`  | Variante del botón                       |
-| `type`    | `string`                                 | `"button"` | Tipo HTML del botón                      |
-| ...rest   | -                                        | -          | Todas las props de Button excepto `size` |
+| Prop      | Tipo                                     | Default           | Descripción                              |
+| --------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
+| `size`    | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"`            | Tamaño del botón                         |
+| `variant` | Button variants                          | `"ghost-neutral"` | Variante del botón                       |
+| `type`    | `string`                                 | `"button"`        | Tipo HTML del botón                      |
+| ...rest   | -                                        | -                 | Todas las props de Button excepto `size` |
 
 **Sizes**:
 
@@ -235,7 +235,7 @@ import {
   <InputGroupAddon align="inline-end">
     <Tooltip>
       <TooltipTrigger asChild>
-        <InputGroupButton variant="ghost" size="icon-xs">
+        <InputGroupButton size="icon-xs">
           <Icon symbol="info" className="text-base" />
         </InputGroupButton>
       </TooltipTrigger>
@@ -268,7 +268,6 @@ function App() {
         />
         <InputGroupAddon align="inline-end">
           <InputGroupButton
-            variant="ghost"
             size="icon-xs"
             onClick={() => setShowPassword(!showPassword)}
             aria-label={showPassword ? "Hide password" : "Show password"}
@@ -315,7 +314,7 @@ import {
   <InputGroupAddon align="inline-end">
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <InputGroupButton variant="ghost" size="icon-xs">
+        <InputGroupButton size="icon-xs">
           <Icon symbol="more_horiz" className="text-base" />
         </InputGroupButton>
       </DropdownMenuTrigger>
@@ -362,11 +361,7 @@ import { Label } from "@adamosuiteservices/ui/label";
     </Label>
     <Tooltip>
       <TooltipTrigger asChild>
-        <InputGroupButton
-          variant="ghost"
-          className="ml-auto rounded-full"
-          size="icon-xs"
-        >
+        <InputGroupButton className="ml-auto rounded-full" size="icon-xs">
           <Icon symbol="info" className="text-base" />
         </InputGroupButton>
       </TooltipTrigger>

package/docs/components/ui/popover.md

@@ -306,7 +306,7 @@ import { Icon } from "@adamosuiteservices/ui/icon";
     <PopoverContent className="w-80">
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <Icon symbol="error" className="text-lg text-blue-500" />
+          <Icon symbol="error" className="text-lg text-primary" />
           <h4 className="font-medium">About this feature</h4>
         </div>
         <p className="text-sm text-muted-foreground">
@@ -359,7 +359,7 @@ import { Separator } from "@adamosuiteservices/ui/separator";
             <p className="text-sm font-medium">New message</p>
             <p className="text-xs text-muted-foreground">2 min ago</p>
           </div>
-          <div className="h-2 w-2 bg-blue-500 rounded-full mt-1" />
+          <div className="h-2 w-2 bg-primary rounded-full mt-1" />
         </div>
       </div>
       <Separator />

package/docs/components/ui/spinner.md

@@ -50,7 +50,7 @@ import { Spinner } from "@adamosuiteservices/ui/spinner";
 ```tsx
 <Spinner className="text-primary" />
 <Spinner className="text-destructive" />
-<Spinner className="text-blue-500" />
+<Spinner className="text-warning" />
 ```
 
 ### En Botones

package/docs/components/ui/table.md

@@ -174,7 +174,7 @@ const invoices = [
 ## Estilos Base
 
 - **Container**: `rounded-xl border` con `overflow-x-auto`
-- **Head**: `bg-neutrals-50 text-muted-foreground text-xs uppercase`
+- **Head**: `bg-muted/50 text-muted-foreground text-xs uppercase`
 - **Row hover**: `hover:bg-muted/50`
 - **Cell**: `p-4 text-sm text-muted-foreground`
 

package/docs/components/ui/tooltip.md

@@ -278,11 +278,11 @@ function App() {
 
 ## Estilos Base
 
-- **Background**: `bg-neutrals-800`
-- **Text**: `text-white text-xs`
+- **Background**: `bg-primary`
+- **Text**: `text-primary-foreground text-xs`
 - **Padding**: `px-3 py-1.5`
 - **Border radius**: `rounded-md`
-- **Arrow**: `size-2.5` con `bg-neutrals-800`
+- **Arrow**: `size-2.5` con `bg-primary`
 - **Z-index**: `z-50`
 - **Animation**: Fade + zoom in/out
 

package/docs/components/ui/typography.md

@@ -264,7 +264,7 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 - **Default element**: `<p>` cuando `asChild=false`
 - **Default variants**: `variant="sm"` y `color="default"`
 - **Data attribute**: `data-slot="typography"` para identificación
-- **Color variants**: Incluye colores default (neutrals-700) y muted (neutrals-500)
+- **Color variants**: Incluye colores default (foreground) y muted (muted-foreground)
 - **Extensibilidad**: Combina con utility classes para estilos adicionales (weight, spacing, etc.)
 
 ## Troubleshooting

package/package.json

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