@adamosuiteservices/ui 2.18.5 → 2.19.0

package/docs/components/ui/dialog.md

@@ -41,38 +41,38 @@ import {
 </Dialog>
 ```
 
-**Components**: 10 (Dialog, Trigger, Content, Header, Title, Description, Body, Footer, Close, Overlay, Portal)
+**Components**: 11 (Dialog, Trigger, Content, Header, Title, Description, Body, Footer, Close, Overlay, Portal)
 
 ## Main props
 
 ### Dialog (Root)
 
-| Prop           | Tipo                      | Default | Descripción                               |
-| -------------- | ------------------------- | ------- | ----------------------------------------- |
-| `open`         | `boolean`                 | -       | Estado controlado del dialog              |
-| `onOpenChange` | `(open: boolean) => void` | -       | Callback cuando cambia estado             |
-| `defaultOpen`  | `boolean`                 | `false` | Estado inicial no controlado              |
+| Prop           | Type                      | Default | Description                              |
+| -------------- | ------------------------- | ------- | ---------------------------------------- |
+| `open`         | `boolean`                 | -       | Controlled dialog state                  |
+| `onOpenChange` | `(open: boolean) => void` | -       | Callback when state changes              |
+| `defaultOpen`  | `boolean`                 | `false` | Initial uncontrolled state               |
 | `modal`        | `boolean`                 | `true`  | Blocks interaction with external content |
 
 ### DialogTrigger
 
-| Prop        | Type      | Description                                        |
-| ----------- | --------- | -------------------------------------------------- |
+| Prop        | Type      | Description                                      |
+| ----------- | --------- | ------------------------------------------------ |
 | `asChild`   | `boolean` | Pass props to child instead of rendering wrapper |
-| `className` | `string`  | Additional CSS classes                             |
+| `className` | `string`  | Additional CSS classes                           |
 
 ### DialogContent
 
-| Prop                   | Type              | Default | Description                                             |
-| ---------------------- | ----------------- | ------- | ------------------------------------------------------- |
-| `showCloseButton`      | `boolean`         | `true`  | Shows X button in top right corner             |
+| Prop                   | Type              | Default | Description                                       |
+| ---------------------- | ----------------- | ------- | ------------------------------------------------- |
+| `showCloseButton`      | `boolean`         | `true`  | Shows X button in top right corner                |
 | `theme`                | `Theme`           | -       | Custom theme (default, dark, pay, sign, risk, id) |
-| `className`            | `string`          | -       | Additional CSS classes                                  |
-| `onEscapeKeyDown`      | `(event) => void` | -       | Callback when pressing Escape                            |
-| `onPointerDownOutside` | `(event) => void` | -       | Callback when clicking outside                            |
-| `onInteractOutside`    | `(event) => void` | -       | Callback when interacting outside                           |
+| `className`            | `string`          | -       | Additional CSS classes                            |
+| `onEscapeKeyDown`      | `(event) => void` | -       | Callback when pressing Escape                     |
+| `onPointerDownOutside` | `(event) => void` | -       | Callback when clicking outside                    |
+| `onInteractOutside`    | `(event) => void` | -       | Callback when interacting outside                 |
 
-**Default styles**: `max-w-lg`, `max-w-[calc(100%-2rem)]` on mobile, centered, `rounded-lg`, `p-6`, `shadow-lg`
+**Default styles**: `max-w-[610px]`, `max-w-[calc(100%-2rem)]` on mobile, centered, `rounded-2xl`, `p-6`, `shadow-xs`, `gap-4`
 
 ### DialogTitle
 
@@ -80,7 +80,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `text-lg`, `font-semibold`, `leading-none`
+**Styles**: `text-sm`, `font-semibold`, `text-foreground`
 
 ### DialogDescription
 
@@ -88,7 +88,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `text-sm`, `text-muted-foreground`
+**Styles**: `text-sm`, `text-foreground`
 
 ### DialogBody
 
@@ -96,7 +96,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `mt-2 mb-6`  
+**Styles**: `mt-4 mb-10`  
 **Purpose**: Container for main dialog content between header and footer. Provides consistent vertical spacing.
 
 ### DialogHeader
@@ -105,7 +105,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `flex flex-col gap-2`, `text-center` on mobile, `sm:text-left`
+**Styles**: `flex flex-col gap-2`
 
 ### DialogFooter
 
@@ -113,14 +113,14 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `flex-col-reverse` on mobile, `sm:flex-row sm:justify-end`, `gap-2`
+**Styles**: `flex gap-6`, `sm:flex-row sm:justify-start`
 
 ### DialogClose
 
-| Prop        | Type      | Description                                       |
-| ----------- | --------- | ------------------------------------------------- |
+| Prop        | Type      | Description                                     |
+| ----------- | --------- | ----------------------------------------------- |
 | `asChild`   | `boolean` | Pass props to child instead of rendering button |
-| `className` | `string`  | Additional CSS classes                            |
+| `className` | `string`  | Additional CSS classes                          |
 
 ## Usage patterns
 
@@ -511,12 +511,12 @@ function App() {
 
 ## Common use cases
 
-**Formularios de edición**: Edit profile, settings, preferences  
-**Confirmaciones destructivas**: Delete account, remove items, clear data  
-**Crear nuevos items**: New project, add user, create record  
-**Compartir contenido**: Share links, export data, send invitations  
-**Ver detalles**: User info, product details, transaction summary  
-**Información**: Disclaimers, terms, help content
+**Edit forms**: Edit profile, settings, preferences  
+**Destructive confirmations**: Delete account, remove items, clear data  
+**Create new items**: New project, add user, create record  
+**Share content**: Share links, export data, send invitations  
+**View details**: User info, product details, transaction summary  
+**Information**: Disclaimers, terms, help content
 
 ## States and data attributes
 
@@ -538,20 +538,20 @@ function App() {
 
 ## Keyboard navigation
 
-- ✅ **Escape**: Cierra el dialog (previene con `onEscapeKeyDown`)
-- ✅ **Tab**: Navega entre elementos focusables dentro del dialog
-- ✅ **Shift+Tab**: Navegación inversa
-- ✅ **Enter**: Activa botón/elemento enfocado
+- ✅ **Escape**: Closes the dialog (prevent with `onEscapeKeyDown`)
+- ✅ **Tab**: Navigate between focusable elements inside the dialog
+- ✅ **Shift+Tab**: Reverse navigation
+- ✅ **Enter**: Activate focused button/element
 
 ## Accessibility
 
 - ✅ **ARIA**: `role="dialog"`, `aria-labelledby` (title), `aria-describedby` (description)
-- ✅ **Focus trap**: Focus queda dentro del dialog mientras está abierto
-- ✅ **Focus restoration**: Focus vuelve al trigger al cerrar
-- ✅ **Screen readers**: Anuncia título, descripción, y contenido
-- ✅ **Keyboard navigation**: Completamente navegable por teclado
-- ✅ **Close button**: `aria-label="Close"` en botón X
-- ✅ **Modal behavior**: Bloquea interacción con contenido externo
+- ✅ **Focus trap**: Focus stays inside the dialog while it is open
+- ✅ **Focus restoration**: Focus returns to trigger on close
+- ✅ **Screen readers**: Announces title, description, and content
+- ✅ **Keyboard navigation**: Fully keyboard navigable
+- ✅ **Close button**: `aria-label="Close"` on the X button
+- ✅ **Modal behavior**: Blocks interaction with external content
 
 ## Implementation notes
 
@@ -559,8 +559,9 @@ function App() {
 - **Portal rendering**: Content is rendered in `document.body`
 - **Overlay**: `bg-black/50`, `fixed inset-0`, `z-50`
 - **Centered**: `top-[50%] left-[50%]`, `translate-x-[-50%] translate-y-[-50%]`
-- **Responsive**: `max-w-[calc(100%-2rem)]` on mobile, `sm:max-w-lg` on desktop
-- **Close button**: Automatic XIcon in top right corner if `showCloseButton={true}`
+- **Responsive**: `max-w-[calc(100%-2rem)]` on mobile, `sm:max-w-[610px]` on desktop
+- **Close button**: Automatic close icon in top right corner (`top-4 right-4`) if `showCloseButton={true}`
+- **Close button focus**: `ring-4 ring-primary/10`
 - **Auto-close**: Closes with Escape, click outside, or DialogClose
 - **Focus management**: First focusable element receives focus when opening
 - **Theme support**: `theme` prop applies `data-theme` to content
@@ -571,14 +572,11 @@ function App() {
 ### Mobile
 
 - `max-w-[calc(100%-2rem)]`: 1rem margin on each side
-- `text-center`: Centered header
-- `flex-col-reverse`: Footer with stacked buttons (Confirm on top, Cancel below)
 
 ### Desktop (sm+)
 
-- `sm:max-w-lg`: Max width 32rem
-- `sm:text-left`: Left-aligned header
-- `sm:flex-row sm:justify-end`: Horizontal footer with buttons on the right
+- `sm:max-w-[610px]`: Max width 610px
+- `sm:flex-row sm:justify-start`: Footer buttons laid out horizontally on the left
 
 ## Width customization
 
@@ -591,7 +589,7 @@ function App() {
 {
   /* Medium (default) */
 }
-<DialogContent className="sm:max-w-lg">...</DialogContent>;
+<DialogContent className="sm:max-w-[610px]">...</DialogContent>;
 
 {
   /* Large */

package/docs/components/ui/dropdown-menu.md

@@ -52,7 +52,7 @@ import {
 </DropdownMenu>
 ```
 
-**Components**: 14 (Menu, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, Label, Separator, Shortcut, Sub, SubTrigger, SubContent, Group, Portal)
+**Components**: 15 (Menu, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, Label, Separator, Shortcut, Sub, SubTrigger, SubContent, Group, Portal)
 
 ## Main props
 
@@ -67,11 +67,14 @@ import {
 
 ### DropdownMenuTrigger
 
-| Prop        | Type      | Description                            |
-| ----------- | --------- | -------------------------------------- |
-| `asChild`   | `boolean` | Pass props to child instead of wrapper |
-| `disabled`  | `boolean` | Disable the trigger                    |
-| `className` | `string`  | Additional CSS classes                 |
+| Prop        | Type                | Description                            |
+| ----------- | ------------------- | -------------------------------------- |
+| `asChild`   | `boolean`           | Pass props to child instead of wrapper |
+| `disabled`  | `boolean`           | Disable the trigger                    |
+| `size`      | `"sm" \| "default"` | Trigger size (default: "default")      |
+| `className` | `string`            | Additional CSS classes                 |
+
+**Default styles**: Similar to Button/Select trigger - `rounded-md`, `border`, `bg-background`, `h-10` (default) or `h-9` (sm), with hover and focus states
 
 ### DropdownMenuContent
 
@@ -99,9 +102,11 @@ import {
 | `variant`   | `"default" \| "destructive"` | `"default"` | Item style                          |
 | `className` | `string`                     | -           | Additional CSS classes              |
 
+**Default styles**: `h-11`, `gap-3`, `pl-4`, `pr-10`, no border (use DropdownMenuSeparator for dividers)
+
 **Variants**:
 
-- `default`: `focus:bg-accent`, `focus:text-accent-foreground`
+- `default`: `focus:bg-muted`, `focus:text-foreground`
 - `destructive`: `text-destructive`, `focus:bg-destructive/10`, `focus:text-destructive`
 
 ### DropdownMenuCheckboxItem
@@ -113,7 +118,9 @@ import {
 | `disabled`        | `boolean`                    | Disable the item            |
 | `className`       | `string`                     | Additional CSS classes      |
 
-**Indicator**: Automatic CheckIcon when `checked={true}`, positioned with `pl-8`
+**Indicator**: Check icon (`text-xl text-success`) when `checked={true}`, positioned at `left-2`
+
+**Default styles**: `h-11`, `gap-3`, `pl-8`, `pr-10`, `focus:bg-muted`
 
 ### DropdownMenuRadioGroup
 
@@ -130,7 +137,9 @@ import {
 | `disabled`  | `boolean` | Disable the item       |
 | `className` | `string`  | Additional CSS classes |
 
-**Indicator**: Automatic CircleIcon when selected, positioned with `pl-8`
+**Indicator**: Circle icon when selected, positioned at `left-2`
+
+**Default styles**: `h-11`, `gap-3`, `pl-8`, `pr-10`, `focus:bg-muted`
 
 ### DropdownMenuSub
 
@@ -147,6 +156,8 @@ import {
 | `inset`     | `boolean` | Left padding (`pl-8`)  |
 | `className` | `string`  | Additional CSS classes |
 
+**Default styles**: `h-11`, `gap-3`, `pl-4`, `pr-10`, `focus:bg-muted`, no border
+
 **Indicator**: Automatic ChevronRightIcon with `ml-auto`
 
 ### DropdownMenuLabel
@@ -156,7 +167,7 @@ import {
 | `inset`     | `boolean` | Left padding (`pl-8`)  |
 | `className` | `string`  | Additional CSS classes |
 
-**Styles**: `font-medium`, `text-sm`
+**Styles**: `text-xs`, `text-muted-foreground`, `px-2`, `py-1.5`
 
 ### DropdownMenuShortcut
 
@@ -395,8 +406,6 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 ### File actions (more menu)
 
 ```tsx
-import {
-  MoreHorizontalIcon,
 import { Icon } from "@adamosuiteservices/ui/icon";
 
 <DropdownMenu>
@@ -439,9 +448,6 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 ### Simple actions with chevron
 
 ```tsx
-import {
-  ChevronDownIcon,
-  EditIcon,
 import { Icon } from "@adamosuiteservices/ui/icon";
 
 <DropdownMenu>
@@ -476,12 +482,6 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 ### Project menu (nested)
 
 ```tsx
-import {
-  FolderIcon,
-  EditIcon,
-  ShareIcon,
-  CopyIcon,
-  UsersIcon,
 import { Icon } from "@adamosuiteservices/ui/icon";
 
 <DropdownMenu>
@@ -607,23 +607,20 @@ function App() {
 
 ### Items (MenuItem, SubTrigger)
 
-- **Height**: `min-h-10` (40px minimum, can grow with content)
-- **Padding**: `px-3` (horizontal), no vertical padding (height defines size)
-- **Rounded corners**: `first:rounded-t-sm`, `last:rounded-b-sm` (only first/last items)
-- **Icon constraints**: None - icons use their natural sizes
-- **Gap**: `gap-2` between content elements
+- **Height**: `h-11` (44px fixed)
+- **Padding**: `pl-4 pr-10` (left/right for icon alignment)
+- **Icon constraints**: Icons auto `size-4` and `text-muted-foreground` if no `size-*`/`text-*` class set
+- **Gap**: `gap-3` between content elements
 
 ### CheckboxItem and RadioItem
 
-- **Height**: `min-h-10` (40px minimum)
+- **Height**: `h-11` (44px fixed)
 - **Padding**: `pl-8` (left), `pr-10` (right) - space for indicators
-- **Rounded corners**: `first:rounded-t-sm`, `last:rounded-b-sm`
 
 ### Label
 
-- **Height**: `min-h-10` (40px minimum)
-- **Padding**: `px-3` horizontal
-- **Display**: `flex items-center` for vertical centering
+- **Padding**: `px-2 py-1.5`
+- **Text**: `text-xs text-muted-foreground`
 
 ### Content
 
@@ -634,20 +631,20 @@ function App() {
 ### Separator
 
 - **Height**: `h-px`
-- **Margins**: No margins (removed `-mx-1 my-1`)
+- **Margins**: `-mx-1 my-1`
 - **Background**: `bg-border`
 
 ## States and data attributes
 
 ### DropdownMenuItem States
 
-- **Focus**: `data-[highlighted]` → `bg-accent`, `text-accent-foreground`
+- **Focus**: `data-[highlighted]` → `bg-muted`, `text-foreground`
 - **Disabled**: `data-[disabled=true]` → `opacity-50`, `pointer-events-none`
 - **Destructive**: `data-[variant=destructive]` → `text-destructive`
 
 ### DropdownMenuSubTrigger States
 
-- **Open**: `data-[state=open]` → `bg-accent`, `text-accent-foreground`
+- **Open**: `data-[state=open]` → `bg-muted`, `text-foreground`
 
 ### Content Animations
 
@@ -738,6 +735,6 @@ Complete control of menu positioning:
 
 ## References
 
-- **Radix UI Dropdown Menu**: https://www.radix-ui.com/primitives/docs/components/dropdown-menu
-- **shadcn/ui Dropdown Menu**: https://ui.shadcn.com/docs/components/dropdown-menu
-- **ARIA Menu Pattern**: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+- **Radix UI Dropdown Menu**: <https://www.radix-ui.com/primitives/docs/components/dropdown-menu>
+- **shadcn/ui Dropdown Menu**: <https://ui.shadcn.com/docs/components/dropdown-menu>
+- **ARIA Menu Pattern**: <https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/>

package/docs/components/ui/field.md

@@ -53,23 +53,18 @@ import {
 
 ### Field
 
-| Prop | Tipo | Default | Descripción || Prop | Tipo | Descripción |
+| Prop            | Type                                         | Default      | Description                                   |
+| --------------- | -------------------------------------------- | ------------ | --------------------------------------------- |
+| `orientation`   | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` | Field layout orientation                      |
+| `data-invalid`  | `boolean`                                    | -            | Marks field as invalid (applies error styles) |
+| `data-disabled` | `boolean`                                    | -            | Marks field as disabled                       |
+| `className`     | `string`                                     | -            | Additional CSS classes                        |
 
-|------|------|---------|-------------||------|------|-------------|
+**Orientations**:
 
-| `orientation` | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` | Layout del field || label | `string` | Etiqueta del campo |
-
-| `data-invalid` | `boolean` | - | Marca field como inválido (aplica estilos de error) || description | `string` | Texto de ayuda |
-
-| `data-disabled` | `boolean` | - | Marca field como deshabilitado || error | `string` | Mensaje de error |
-
-| `className` | `string` | - | Clases CSS adicionales || required | `boolean` | Marca el campo como requerido |
-
-**Orientaciones**:
-
-- `vertical`: Label arriba, input abajo
-- `horizontal`: Label e input lado a lado
-- `responsive`: Vertical en mobile, horizontal en desktop (@md/field-group)
+- `vertical`: Label above, input below
+- `horizontal`: Label and input side by side
+- `responsive`: Vertical on mobile, horizontal on desktop (`@md/field-group`)
 
 ### FieldLabel
 
@@ -86,7 +81,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `text-sm`, `text-muted-foreground`, supports links with `hover:text-primary`
+**Styles**: `text-xs`, `text-foreground`, links with `hover:text-primary`
 
 ### FieldError
 
@@ -128,7 +123,7 @@ import {
 | ----------- | -------- | ---------------------- |
 | `className` | `string` | Additional CSS classes |
 
-**Styles**: `@container/field-group`, `flex flex-col gap-7`, auto-adjust for nested groups
+**Styles**: `@container/field-group`, `flex flex-col gap-4`, auto-adjust for nested groups
 
 ### FieldSeparator
 
@@ -593,20 +588,19 @@ function PriceRange() {
 
 ## Container queries
 
-FieldGroup usa `@container/field-group` para layouts responsive:
+FieldGroup uses `@container/field-group` for responsive layouts:
 
 ```tsx
 <FieldGroup>
-  {" "}
   {/* @container/field-group */}
   <Field orientation="responsive">
-    {/* Vertical por defecto */}
-    {/* Horizontal en @md/field-group */}
+    {/* Vertical by default */}
+    {/* Horizontal at @md/field-group */}
   </Field>
 </FieldGroup>
 ```
 
-**Breakpoint**: `@md` (aproximadamente 448px de ancho del container)
+**Breakpoint**: `@md` (approximately 448px container width)
 
 ## Accessibility
 
@@ -621,15 +615,15 @@ FieldGroup usa `@container/field-group` para layouts responsive:
 
 ## Implementation notes
 
-- **Composable**: Cada parte es un componente independiente
-- **Class Variance Authority**: Usa CVA para orientación variants
-- **Container queries**: `@container/field-group` para responsive
-- **Auto-styling**: Detecta checkbox/radio groups y ajusta gap
-- **Choice cards**: FieldLabel detecta Field hijo y aplica card styles
-- **Error deduplication**: Auto-deduplica errores por mensaje
-- **Flexible**: Soporta cualquier tipo de input/select/textarea
-- **No wrapper div**: Field es un `role="group"`, no agrega divs innecesarios
-- **Data attributes**: `data-slot` en cada componente para CSS targeting
+- **Composable**: Each part is an independent component
+- **Class Variance Authority**: Uses CVA for orientation variants
+- **Container queries**: `@container/field-group` for responsive layouts
+- **Auto-styling**: Detects checkbox/radio groups and adjusts gap
+- **Choice cards**: FieldLabel detects child Field and applies card styles
+- **Error deduplication**: Auto-deduplicates errors by message
+- **Flexible**: Supports any type of input/select/textarea
+- **No wrapper div**: Field is a `role="group"`, does not add unnecessary divs
+- **Data attributes**: `data-slot` on each component for CSS targeting
 - **Disabled state**: Propagates from Field to Label with opacity
 
 ## React Hook Form integration

package/docs/components/ui/file-upload-v2.md

@@ -1242,10 +1242,21 @@ function EventTrackingExample() {
 ## TypeScript types
 
 ```typescript
+export type FileStatus =
+  | "idle"
+  | "uploading"
+  | "success"
+  | "error"
+  | "deleting";
+
 export type FileWithMetadata = {
   id: string;
   file: File;
   metadata?: Record<string, unknown>;
+  status?: FileStatus;
+  deletable?: boolean;
+  disabled?: boolean;
+  error?: string;
 };
 
 export type FileUploadV2Labels = {