@adamosuiteservices/ui 2.18.6 → 2.19.1

package/docs/components/ui/avatar.md

@@ -10,7 +10,7 @@ Component for displaying **user profile images** with automatic fallback system
 - ✅ Lazy loading of images
 - ✅ Support for initials or icons as fallback
 - ✅ Customizable sizes
-- ✅ Shapes: circular (default) or square/rectangular
+- ✅ Shapes: rounded rectangle (default, `rounded-xl`) or circular
 - ✅ Avatar groups with overlap
 - ✅ Integration with Tooltip
 - ✅ Accessibility: alt text and ARIA
@@ -79,9 +79,9 @@ Main avatar container.
 **Default styles**:
 
 - `size-8`: 2rem (32x32px) - base size
-- `rounded-full`: Circular shape
+- `rounded-xl`: Rounded rectangle shape (12px radius)
 - `shrink-0`: Doesn't shrink in flex/grid
-- `overflow-hidden`: Clips content outside circle
+- `overflow-hidden`: Clips content inside container
 - `relative`: For internal positioning
 - `flex`: Flex container
 
@@ -104,6 +104,7 @@ Avatar image with lazy loading.
 
 - `aspect-square`: Maintains square aspect
 - `size-full`: Fills entire container (100% width/height)
+- `object-cover`: Crops image to fill container without distortion
 
 **Behavior**:
 
@@ -129,8 +130,9 @@ Content shown when the image doesn't load or doesn't exist.
 
 **Default styles**:
 
-- `bg-muted`: Light gray background
-- `rounded-full`: Circular shape (matches container)
+- `bg-primary-100`: Light teal background (matches design system)
+- `text-primary font-bold`: Primary color bold text for initials
+- `rounded-xl`: Rounded rectangle shape (matches container)
 - `size-full`: Fills all space
 - `flex items-center justify-center`: Centers content
 
@@ -205,42 +207,36 @@ The default size is `size-8` (32px). Customize with className:
 
 ## Custom shapes
 
-### Square avatar
+The default shape is `rounded-xl` (12px radius). Override via `className`:
+
+### Circular avatar
 
 ```tsx
-{
-  /* Rounded large */
-}
-<Avatar className="rounded-lg">
+<Avatar className="adm:rounded-full">
   <AvatarImage src={url} alt="User" />
-  <AvatarFallback>CN</AvatarFallback>
-</Avatar>;
+  <AvatarFallback className="adm:rounded-full">CN</AvatarFallback>
+</Avatar>
+```
 
-{
-  /* Rounded medium */
-}
-<Avatar className="rounded-md">
-  <AvatarImage src={url} alt="User" />
-  <AvatarFallback>ER</AvatarFallback>
-</Avatar>;
+### Larger radius (profile)
 
-{
-  /* Rounded small */
-}
-<Avatar className="rounded-sm">
+```tsx
+<Avatar className="adm:size-[92px] adm:rounded-2xl">
   <AvatarImage src={url} alt="User" />
-  <AvatarFallback>ML</AvatarFallback>
-</Avatar>;
+  <AvatarFallback className="adm:text-2xl">ML</AvatarFallback>
+</Avatar>
+```
 
-{
-  /* Completamente cuadrado */
-}
-<Avatar className="rounded-none">
-  <AvatarFallback>SQ</AvatarFallback>
-</Avatar>;
+### Smaller radius (sidebar)
+
+```tsx
+<Avatar className="adm:size-12 adm:rounded-xl">
+  <AvatarImage src={url} alt="User" />
+  <AvatarFallback>ER</AvatarFallback>
+</Avatar>
 ```
 
-**Usage**: Square avatars are common for company or application logos.
+**Usage**: Use `rounded-full` for circular, `rounded-xl`/`rounded-2xl` for profile cards, sidebar items, and company logos.
 
 ## Advanced patterns
 

package/docs/components/ui/badge.md

@@ -2,20 +2,20 @@
 
 ## Description
 
-Compact component for **labeling, categorizing and highlighting information**. Offers 13 semantic variants (including soft "medium" versions), 2 sizes, auto-sized icons, support for clickable links, and special styles for numbers. Ideal for states, notifications, product labels, user roles and counters.
+Compact component for **labeling, categorizing and highlighting information**. Offers 16 variants (including soft "medium" versions), 2 sizes, auto-sized icons, support for clickable links, and special styles for numbers. Ideal for states, notifications, product labels, user roles and counters.
 
 ## Features
 
-- ✅ 13 variants: default (2), waiting (2), secondary, success (2), warning (2), destructive (2), muted, outline
-- ✅ "Medium" versions with soft backgrounds and vibrant colors
+- ✅ 16 variants: default (2), waiting (2), secondary, success (2), warning (2), destructive (2), info (2), muted, white, outline
+- ✅ "Medium" versions with soft backgrounds and vibrant icon colors
 - ✅ 2 sizes: default (compact) and lg (large)
+- ✅ `shape="pill"` for fully rounded badges
 - ✅ Auto-sized icons (12px default, 16px large)
 - ✅ `asChild` prop for clickable badges (links)
 - ✅ Automatic hover when link (`[a&]:hover`)
 - ✅ Accessible focus ring with aria-invalid support
 - ✅ Auto-adjustable width (`w-fit`)
 - ✅ Special styles for circular numbers
-- ✅ Full dark mode in all variants
 
 ## Import
 
@@ -83,10 +83,9 @@ Soft version with light background and icon in primary color.
 **Styles**:
 
 - Background: `bg-primary-50` (very light)
-- Text: `text-neutral-600`
+- Text: `text-foreground`
 - Icon: `text-primary` (vibrant color)
 - Hover (link): `bg-primary-100`
-- Dark mode: `bg-primary-200`, `text-primary-800`
 - Usage: Soft informational states, categories
 
 ### waiting
@@ -115,9 +114,8 @@ Soft version of waiting badge.
 **Styles**:
 
 - Background: `bg-waiting-50`
-- Text: `text-neutral-600`
+- Text: `text-foreground`
 - Icon: `text-waiting`
-- Dark mode: `bg-waiting-200`, `text-waiting-800`
 - Usage: Subtle waiting states
 
 ### secondary
@@ -146,10 +144,9 @@ Solid green badge for successful states.
 **Styles**:
 
 - Background: `bg-success` (green)
-- Text: `text-white`
+- Text: `text-success-foreground`
 - Hover (link): `bg-success/90`
 - Focus ring: `ring-success/20`
-- Dark mode: `bg-success/60`
 - Usage: Completed, approved, active, available
 
 ### success-medium
@@ -162,11 +159,10 @@ Soft version of success badge.
 
 **Styles**:
 
-- Background: `bg-success-50` (very light green)
-- Text: `text-neutral-600`
+- Background: `bg-success-25` (very light green)
+- Text: `text-foreground`
 - Icon: `text-success` (vibrant green)
 - Hover (link): `bg-success-100`
-- Dark mode: `bg-success-200`, `text-success-800`
 - Usage: Subtle positive states, confirmations
 
 ### warning
@@ -180,10 +176,9 @@ Solid orange/yellow badge for warnings.
 **Styles**:
 
 - Background: `bg-warning` (orange/yellow)
-- Text: `text-white`
+- Text: `text-warning-foreground`
 - Hover (link): `bg-warning/90`
 - Focus ring: `ring-warning/20`
-- Dark mode: `bg-warning/60`
 - Usage: Warning, attention required, almost full
 
 ### warning-medium
@@ -197,9 +192,8 @@ Soft version of warning badge.
 **Styles**:
 
 - Background: `bg-warning-50` (very light orange)
-- Text: `text-neutral-600`
+- Text: `text-foreground`
 - Icon: `text-warning`
-- Dark mode: `bg-warning-200`, `text-warning-800`
 - Usage: Subtle warnings, cautions
 
 ### destructive
@@ -213,10 +207,9 @@ Solid red badge for errors and negative states.
 **Styles**:
 
 - Background: `bg-destructive` (red)
-- Text: `text-white`
+- Text: `text-destructive-foreground`
 - Hover (link): `bg-destructive/90`
 - Focus ring: `ring-destructive/20`
-- Dark mode: `bg-destructive/60`
 - Usage: Error, inactive, cancelled, rejected
 
 ### destructive-medium
@@ -230,9 +223,8 @@ Soft version of destructive badge.
 **Styles**:
 
 - Background: `bg-destructive-50` (very light red)
-- Text: `text-neutral-600`
+- Text: `text-foreground`
 - Icon: `text-destructive` (vibrant red)
-- Dark mode: `bg-destructive-200`, `text-destructive-800`
 - Usage: Subtle errors, negative states
 
 ### muted
@@ -248,9 +240,55 @@ Badge with muted colors for low emphasis.
 - Background: `bg-muted`
 - Text: `text-muted-foreground`
 - Hover (link): `bg-muted/90`
-- Dark mode: `bg-muted/60`
 - Usage: Secondary information, disabled, draft
 
+### info
+
+Solid neutral badge for informational states.
+
+```tsx
+<Badge variant="info">Info</Badge>
+```
+
+**Styles**:
+
+- Background: `bg-neutrals-500` (medium gray)
+- Text: `text-neutrals-0` (white)
+- Hover (link): `bg-neutrals-600`
+- Usage: Neutral tags, archived, read-only, informational
+
+### info-medium
+
+Soft version of info badge.
+
+```tsx
+<Badge variant="info-medium">Info medium</Badge>
+```
+
+**Styles**:
+
+- Background: `bg-muted` (neutrals-50)
+- Text: `text-foreground`
+- Icon: `text-neutrals-500`
+- Hover (link): `bg-neutrals-100`
+- Usage: Subtle neutral states, inactive, metadata
+
+### white
+
+Badge with page background color. Stands out on colored backgrounds.
+
+```tsx
+<Badge variant="white">White</Badge>
+```
+
+**Styles**:
+
+- Background: `bg-background`
+- Text: `text-foreground`
+- Border: Transparent
+- Hover (link): `bg-subtle`
+- Usage: Badges on colored cards or banners
+
 ### outline
 
 Badge with border and transparent background.
@@ -267,6 +305,20 @@ Badge with border and transparent background.
 - Hover (link): `bg-accent`
 - Usage: Tags, categories, filters, neutral labels
 
+## Shape
+
+### pill
+
+Fully rounded badge. Can be combined with any variant and size.
+
+```tsx
+<Badge shape="pill" variant="success">Active</Badge>
+<Badge shape="pill" variant="info">Info</Badge>
+<Badge shape="pill" size="lg">Large pill</Badge>
+```
+
+The default shape uses `rounded-md`. Adding `shape="pill"` overrides it to `rounded-full`.
+
 ## Sizes
 
 ### default (Compact)
@@ -304,14 +356,15 @@ Large size for increased visibility.
 
 ## Props
 
-| Prop      | Type                                                                                                                                                                                                               | Default     | Description                                                 |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | ----------------------------------------------------------- |
-| variant   | `"default" \| "default-medium" \| "waiting" \| "waiting-medium" \| "secondary" \| "success" \| "success-medium" \| "warning" \| "warning-medium" \| "destructive" \| "destructive-medium" \| "muted" \| "outline"` | `"default"` | Visual variant of the badge                                 |
-| size      | `"default" \| "lg"`                                                                                                                                                                                                | `"default"` | Size of the badge                                           |
-| asChild   | `boolean`                                                                                                                                                                                                          | `false`     | Renders the child instead of a `<span>`. Uses Radix UI Slot |
-| className | `string`                                                                                                                                                                                                           | -           | Additional CSS classes                                      |
-| children  | `ReactNode`                                                                                                                                                                                                        | -           | Badge content (text, icons, numbers)                        |
-| ...props  | `HTMLAttributes<HTMLSpanElement>`                                                                                                                                                                                  | -           | All native `<span>` props                                   |
+| Prop      | Type                                                                                                                                                                                                                                                     | Default     | Description                                                 |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------- |
+| variant   | `"default" \| "default-medium" \| "waiting" \| "waiting-medium" \| "secondary" \| "success" \| "success-medium" \| "warning" \| "warning-medium" \| "destructive" \| "destructive-medium" \| "info" \| "info-medium" \| "muted" \| "white" \| "outline"` | `"default"` | Visual variant of the badge                                 |
+| size      | `"default" \| "lg"`                                                                                                                                                                                                                                      | `"default"` | Size of the badge                                           |
+| shape     | `"pill"`                                                                                                                                                                                                                                                 | -           | `"pill"` overrides border radius to `rounded-full`          |
+| asChild   | `boolean`                                                                                                                                                                                                                                                | `false`     | Renders the child instead of a `<span>`. Uses Radix UI Slot |
+| className | `string`                                                                                                                                                                                                                                                 | -           | Additional CSS classes                                      |
+| children  | `ReactNode`                                                                                                                                                                                                                                              | -           | Badge content (text, icons, numbers)                        |
+| ...props  | `HTMLAttributes<HTMLSpanElement>`                                                                                                                                                                                                                        | -           | All native `<span>` props                                   |
 
 **Note about asChild**: Useful for clickable badges with `<a>` links.
 
@@ -876,8 +929,8 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 ### Color contrast
 
-- ✅ All solid variants (default, success, warning, destructive) have AAA contrast
-- ✅ "Medium" variants have AA contrast for text
+- ✅ All solid variants (default, success, warning, destructive, info) have sufficient contrast
+- ✅ "Medium" variants use `text-foreground` for high-contrast text
 - ✅ Icons in "medium" variants use vibrant colors for better visibility
 - ⚠️ Verify contrast if using custom colors
 

package/docs/components/ui/breadcrumb.md

@@ -7,14 +7,13 @@ Navigation component that shows the **user's current location within a navigatio
 ## Features
 
 - ✅ Semantic structure with `<nav>` and `<ol>`
-- ✅ Customizable separators (chevron by default)
+- ✅ Customizable separators (`/` by default, supports chevron icon or any custom content)
 - ✅ Support for icons at each level
 - ✅ Ellipsis to indicate collapsed elements
 - ✅ Integration with Dropdown Menu for long paths
 - ✅ `asChild` prop for custom link components (React Router, Next.js)
 - ✅ Responsive and mobile-adaptable
 - ✅ Full accessibility (aria-label, aria-current, role)
-- ✅ Automatic dark mode
 - ✅ Styles with smooth transitions
 
 ## Import
@@ -130,9 +129,9 @@ Ordered list that contains breadcrumb elements.
 
 **Styles**:
 
-- Text: `text-muted-foreground`, `text-sm`
+- Text: `text-foreground`, `text-sm`
 - Layout: `flex`, `flex-wrap`, `items-center`
-- Spacing: `gap-1.5`, `sm:gap-2.5`
+- Spacing: `gap-2`
 - Utility: `break-words` for long text
 
 **Props**: Inherits all props from `React.ComponentProps<"ol">`.
@@ -150,7 +149,7 @@ Individual breadcrumb element (one navigation level).
 **Styles**:
 
 - Layout: `inline-flex`, `items-center`
-- Spacing: `gap-1.5` between icon and text
+- Spacing: `gap-2` between icon and text
 
 **Props**: Inherits all props from `React.ComponentProps<"li">`.
 
@@ -169,8 +168,7 @@ Navigable link within the breadcrumb.
 
 **Styles**:
 
-- Text: `text-muted-foreground`
-- Hover: `hover:text-foreground`
+- Hover: `hover:text-foreground hover:underline`
 - Transition: `transition-colors`
 
 **Props**:

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

@@ -92,20 +92,20 @@ Main container that groups buttons.
 
 **Automatic attributes**:
 
-- `role="group"`: Para accesibilidad
-- `data-slot="button-group"`: Identificación interna
-- `data-orientation`: Valor de orientation prop
+- `role="group"`: For accessibility
+- `data-slot="button-group"`: Internal identification
+- `data-orientation`: Value of the orientation prop
 
-**Estilos aplicados**:
+**Applied styles**:
 
-- `flex`: Display flex
-- `w-fit`: Ancho auto-ajustable
-- `items-stretch`: Estira items verticalmente
-- Bordes y esquinas ajustados automáticamente según orientation
+- `flex`: Flex display
+- `w-fit`: Auto-adjustable width
+- `items-stretch`: Stretches items vertically
+- Borders and corners adjusted automatically based on orientation
 
 ### ButtonGroupSeparator
 
-Línea separadora visual entre botones.
+Visual separator line between buttons.
 
 | Prop        | Type                         | Default      | Description                    |
 | ----------- | ---------------------------- | ------------ | ------------------------------ |
@@ -115,17 +115,17 @@ Línea separadora visual entre botones.
 
 **Applied styles**:
 
-- `bg-input`: Color de fondo
-- `relative`: Posicionamiento
-- `!m-0`: Sin márgenes
-- `self-stretch`: Se estira para llenar altura/ancho
-- `h-auto` cuando orientation="vertical"
+- `bg-input`: Background color
+- `relative`: Positioning
+- `!m-0`: No margins
+- `self-stretch`: Stretches to fill height/width
+- `h-auto` when orientation="vertical"
 
-**Nota**: Usa `orientation="vertical"` (default) para grupos horizontales, y `orientation="horizontal"` para grupos verticales.
+**Note**: Use `orientation="vertical"` (default) for horizontal groups, and `orientation="horizontal"` for vertical groups.
 
 ### ButtonGroupText
 
-Texto descriptivo dentro del grupo.
+Descriptive text within the group.
 
 | Prop      | Type                             | Default | Description                  |
 | --------- | -------------------------------- | ------- | ---------------------------- |

package/docs/components/ui/button.md

@@ -14,7 +14,6 @@ Fundamental component for **user actions and interactions**. Offers 13 visual va
 - ✅ Accessible focus ring with keyboard detection
 - ✅ Support for aria-invalid with error rings
 - ✅ Smooth transitions in all states
-- ✅ Full dark mode support in all variants
 
 ## Import
 
@@ -67,7 +66,7 @@ Primary button with brand colors for primary actions.
 
 - Background: `bg-primary`
 - Text: `text-primary-foreground`
-- Hover: `bg-primary-700`
+- Hover: `bg-primary-600`
 - Usage: Primary actions, main CTAs
 
 ### success
@@ -80,11 +79,9 @@ Solid green button for successful actions or important confirmations.
 
 **Styles**:
 
-- Background: `bg-success` (green)
-- Text: `text-white`
-- Hover: `bg-success-700`
-- Focus ring: `ring-success/20`
-- Dark mode: `bg-success/60`
+- Background: `bg-success-500` (green)
+- Text: `text-success-foreground`
+- Hover: `bg-success-600`
 - Usage: Save, approve, confirm, complete
 
 ### success-medium
@@ -98,8 +95,8 @@ Soft version of the success button with light background and green text.
 **Styles**:
 
 - Background: `bg-success-50` (very light green)
-- Text: `text-success` (green)
-- Hover: `bg-success/20`
+- Text: `text-success-foreground-subtle`
+- Hover: `bg-success-100`
 - Usage: Secondary successful actions, less emphatic success states
 
 ### warning
@@ -112,11 +109,9 @@ Solid orange/yellow button for actions that require caution.
 
 **Styles**:
 
-- Background: `bg-warning` (orange/yellow)
-- Text: `text-white`
-- Hover: `bg-warning-700`
-- Focus ring: `ring-warning/20`
-- Dark mode: `bg-warning/60`
+- Background: `bg-warning-500` (orange/yellow)
+- Text: `text-warning-foreground`
+- Hover: `bg-warning-600`
 - Usage: Warning actions, confirmations with moderate risk
 
 ### warning-medium
@@ -130,8 +125,8 @@ Soft version of the warning button with light background.
 **Styles**:
 
 - Background: `bg-warning-50` (very light orange/yellow)
-- Text: `text-warning`
-- Hover: `bg-warning/20`
+- Text: `text-warning-foreground-subtle`
+- Hover: `bg-warning-100`
 - Usage: Secondary warnings, less critical alerts
 
 ### destructive
@@ -145,10 +140,8 @@ Solid red button for destructive or dangerous actions.
 **Styles**:
 
 - Background: `bg-destructive` (red)
-- Text: `text-white`
-- Hover: `bg-destructive-700`
-- Focus ring: `ring-destructive/20`
-- Dark mode: `bg-destructive/60`
+- Text: `text-destructive-foreground`
+- Hover: `bg-destructive-600`
 - Usage: Delete, cancel subscription, reset, irreversible actions
 
 ### destructive-medium
@@ -162,8 +155,8 @@ Soft version of the destructive button with light background.
 **Styles**:
 
 - Background: `bg-destructive-50` (very light red)
-- Text: `text-destructive`
-- Hover: `bg-destructive/20`
+- Text: `text-destructive-foreground-subtle`
+- Hover: `bg-destructive-100`
 - Usage: Secondary destructive actions, error warnings
 
 ### secondary
@@ -191,10 +184,8 @@ Button with border and transparent background for secondary actions.
 
 **Styles**:
 
-- Background: `bg-background` with `border`
-- Shadow: `shadow-xs`
-- Hover: `bg-accent`
-- Dark mode: `bg-input/30`, `border-input`
+- Background: `bg-background` with `border border-border`
+- Hover: `bg-subtle`
 - Support for `aria-invalid` with red border and ring
 - Usage: Cancel, alternative actions, buttons in groups
 
@@ -210,8 +201,7 @@ Minimal button without border with primary color that only appears on hover.
 
 - Background: Transparent
 - Text: `text-primary`
-- Hover: `bg-primary-50`, `text-primary`
-- Dark mode: `hover:bg-primary-50/20`
+- Hover: `bg-primary-50`
 - Usage: Tertiary actions with primary emphasis, tool icons, menus
 
 ### ghost-neutral
@@ -225,9 +215,8 @@ Minimal button without border with neutral color that only appears on hover.
 **Styles**:
 
 - Background: Transparent
-- Text: Color inherited from context
-- Hover: `bg-accent`, `text-accent-foreground`
-- Dark mode: `hover:bg-accent/50`
+- Text: `text-foreground-secondary`
+- Hover: `bg-subtle`, `text-foreground`
 - Usage: Neutral tertiary actions, tool icons without emphasis, interface controls
 
 ### link
@@ -254,7 +243,7 @@ Button that looks like a link with neutral color.
 
 **Styles**:
 
-- Color: `text-foreground`
+- Color: `text-foreground-secondary`
 - No hover underline
 - Usage: Inline navigation without color emphasis, low-impact actions
 
@@ -272,7 +261,6 @@ Compact button for reduced spaces.
 
 - Height: `h-9` (36px)
 - Horizontal padding: `px-3` (12px)
-- Padding with icon: `px-2.5` (10px) with `has-[>svg]`
 - Gap: `gap-2` (8px)
 - Border radius: `rounded-[12px]` (12px)
 
@@ -287,8 +275,7 @@ Standard size for most cases.
 **Dimensions**:
 
 - Height: `h-10` (40px)
-- Horizontal padding: `px-4` (16px)
-- Padding with icon: `px-3.5` (14px) with `has-[>svg]` or `has-[>[data-slot=icon]]`
+- Horizontal padding: `px-3` (12px)
 - Gap: `gap-2` (8px)
 - Border radius: `rounded-[12px]` (12px)
 
@@ -304,7 +291,6 @@ Large button for prominent CTAs.
 
 - Height: `h-11` (44px)
 - Horizontal padding: `px-6` (24px)
-- Padding with icon: `px-5` (20px) with `has-[>svg]`
 - Gap: `gap-2` (8px)
 - Border radius: `rounded-[12px]` (12px)
 
@@ -373,6 +359,7 @@ Disables the button and reduces opacity.
 
 - `opacity-50`: 50% opacity
 - `pointer-events-none`: Does not accept clicks or hover
+- `*:text-inherit`: All children (icons, text) inherit the button's disabled text color, preventing hardcoded icon colors from overriding the disabled appearance
 - Automatic in all browsers
 
 ### Loading