@adamosuiteservices/ui 2.18.6 → 2.19.1

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

@@ -50,18 +50,7 @@ function MyForm() {
 }
 ```
 
-### Múltiples Archivos
-
-```tsx
-import { useState } from "react";
-import { FileUpload } from "@adamosuiteservices/ui/file-upload";
-
-function MyForm() {
-  const [files, setFiles] = useState<File[]>([]);
-
-  return <FileUpload selectedFiles={files} onFilesSelect={setFiles} multiple />;
-}
-```
+### Multiple files
 
 **Default configuration**:
 
@@ -448,75 +437,55 @@ Position where selected files appear in multiple mode:
 ### With Field components
 
 ```tsx
-acceptedExtensions?: string[]
-```
-
-Array of allowed file extensions. Default: `[".xls", ".xlsx", ".numbers"]`
-
-**Example**:
-
-```tsx
-<FileUpload
-  selectedFile={file}
-  onFileSelect={setFile}
-  acceptedExtensions={[".pdf", ".doc", ".docx"]}
-/>
-```
-
-### maxSizeInMB
-
-```tsx
-maxSizeInMB?: number
-```
-
-Maximum file size in megabytes. Default: `50`
-
-**Example**:
-
-```tsx
-<FileUpload selectedFile={file} onFileSelect={setFile} maxSizeInMB={10} />
-```
-
-## Examples
+import { useState } from "react";
+import { FileUpload } from "@adamosuiteservices/ui/file-upload";
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+} from "@adamosuiteservices/ui/field";
 
-const handleInvalidFile = (file: File, reason: "extension" | "size") => {
-if (reason === "extension") {
-setError(`File "${file.name}" has an invalid extension.`);
-} else if (reason === "size") {
-setError(`File "${file.name}" exceeds the maximum size limit.`);
-}
-};
+function DocumentUpload() {
+  const [file, setFile] = useState<File | null>(null);
+  const [error, setError] = useState("");
+
+  const handleInvalidFile = (f: File, reason: "extension" | "size") => {
+    setError(
+      reason === "extension"
+        ? `File "${f.name}" has an invalid extension.`
+        : `File "${f.name}" exceeds the maximum size limit.`,
+    );
+  };
 
-return (
-<FieldGroup className="adm:max-w-xl">
-<Field>
-<FieldLabel>Upload document (PDF or DOCX only, max 2MB)</FieldLabel>
-<FileUpload
-selectedFile={file}
-onFileSelect={(newFile) => {
-setFile(newFile);
-if (newFile) setError("");
-}}
-onInvalidFile={handleInvalidFile}
-aria-invalid={!!error}
-acceptedExtensions={[".pdf", ".docx"]}
-maxSizeInMB={2}
-/>
-{error ? (
-<FieldError>{error}</FieldError>
-) : (
-<FieldDescription>
-Supported formats: PDF, DOCX. Maximum 2MB.
-</FieldDescription>
-)}
-</Field>
-</FieldGroup>
-);
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field data-invalid={!!error}>
+        <FieldLabel>Upload document (PDF or DOCX only, max 2 MB)</FieldLabel>
+        <FileUpload
+          selectedFile={file}
+          onFileSelect={(newFile) => {
+            setFile(newFile);
+            if (newFile) setError("");
+          }}
+          onInvalidFile={handleInvalidFile}
+          aria-invalid={!!error}
+          acceptedExtensions={[".pdf", ".docx"]}
+          maxSizeInMB={2}
+        />
+        {error ? (
+          <FieldError>{error}</FieldError>
+        ) : (
+          <FieldDescription>
+            Supported formats: PDF, DOCX. Maximum 2 MB.
+          </FieldDescription>
+        )}
+      </Field>
+    </FieldGroup>
+  );
 }
-
-````
-
-### Estado Deshabilitado
+```
 
 ```tsx
 import {
@@ -559,7 +528,7 @@ function DisabledWithFileExample() {
     </FieldGroup>
   );
 }
-````
+```
 
 ### Inside fieldset disabled
 
@@ -733,12 +702,17 @@ function MultipleFilesWithCallbacks() {
 
 ### Excel files (default)
 
-````tsx
+```tsx
 const [file, setFile] = useState<File | null>(null);
 
 <FileUpload
   selectedFile={file}
-### Múltiples Archivos
+  onFileSelect={setFile}
+  // Default: .xls, .xlsx, .numbers; max 50 MB
+/>;
+```
+
+### Multiple files with labels
 
 ```tsx
 const [files, setFiles] = useState<File[]>([]);
@@ -750,10 +724,10 @@ const [files, setFiles] = useState<File[]>([]);
   maxFiles={5}
   labels={{
     dragDrop: "Drag and drop your files here or",
-    selectFile: "Select files"
+    selectFile: "Select files",
   }}
-/>
-````
+/>;
+```
 
 ### Multiple images
 
@@ -793,13 +767,24 @@ const [files, setFiles] = useState<File[]>([]);
 />;
 ```
 
-/>
-
 ### Images
 
-````tsx
+```tsx
 const [image, setImage] = useState<File | null>(null);
 
+<FileUpload
+  selectedFile={image}
+  onFileSelect={setImage}
+  acceptedExtensions={[".jpg", ".jpeg", ".png", ".gif", ".webp"]}
+  maxSizeInMB={5}
+  labels={{
+    dragDrop: "Drag and drop your image here or",
+    selectFile: "Select image",
+    fileRequirements: "Supported: JPG, PNG, GIF, WebP. Max 5 MB.",
+  }}
+/>;
+```
+
 ## Visual states
 
 ### Simple mode
@@ -807,6 +792,7 @@ const [image, setImage] = useState<File | null>(null);
 #### Without selected file
 
 The component shows:
+
 - Drag & drop area with dashed border
 - Document icon on light blue background
 - Instructional text and link to select file
@@ -815,6 +801,7 @@ The component shows:
 #### With selected file
 
 The drag & drop area is hidden and shows:
+
 - Card with `bg-muted` background and border
 - Document icon on `bg-primary-50` background
 - File name (with truncate if long)
@@ -830,12 +817,15 @@ Only the drag & drop area is shown.
 ### During drag over
 
 When the user drags files over the area:
-- Border changes to `border-primary`
+
+- Border changes to `border-strong-border`
+- Background changes to `bg-muted`
 - Smooth transition with `transition-colors`
 
 ### Invalid state
 
 When `invalid={true}` or `aria-invalid={true}`:
+
 - Border: `border-destructive`
 - Background: `bg-destructive/5`
 - Document icon: `text-destructive` with `bg-destructive/10` background
@@ -848,11 +838,13 @@ When `invalid={true}` or `aria-invalid={true}`:
 When `disabled={true}` or inside `<fieldset disabled>`:
 
 **Drag & drop area**:
+
 - Opacity: `opacity-50`
 - Cursor: `cursor-not-allowed`
 - Visual error states are not applied
 
 **Selected files**:
+
 - Opacity: `opacity-50`
 - Cursor: `cursor-not-allowed`
 - Remove button disabled
@@ -868,6 +860,7 @@ The component automatically validates:
 3. **Count** (multiple mode): Limits to `maxFiles` number of files
 
 If a file does not meet these validations:
+
 - It is not selected
 - The `onFileSelect`/`onFilesSelect` callbacks are not invoked
 - The `onInvalidFile` callback is invoked (if defined) with the file and reason
@@ -898,16 +891,18 @@ const handleInvalidFile = (file: File, reason: "extension" | "size") => {
   invalid={!!error}
   acceptedExtensions={[".pdf", ".docx"]}
   maxSizeInMB={2}
-/>
+/>;
 
-{error && (
-  <div className="adm:rounded-lg adm:border adm:border-destructive adm:bg-destructive/5 adm:p-4">
-    <Typography color="destructive" className="adm:text-sm adm:font-medium">
-      {error}
-    </Typography>
-  </div>
-)}
-````
+{
+  error && (
+    <div className="adm:rounded-lg adm:border adm:border-destructive adm:bg-destructive/5 adm:p-4">
+      <Typography color="destructive" className="adm:text-sm adm:font-medium">
+        {error}
+      </Typography>
+    </div>
+  );
+}
+```
 
 ## Behavior by mode
 
@@ -930,26 +925,28 @@ const handleInvalidFile = (file: File, reason: "extension" | "size") => {
 **Drag & drop area:**
 
 - Padding: `p-6` (24px)
-- Border radius: `rounded-2xl` (16px)
-- Border: `border-2 border-dashed`
+- Border radius: `rounded-3xl` (24px)
+- Border: `border border-dashed`
 - Normal state: `border-input bg-background`
-- Dragging: `border-primary`
+- Hover: `border-strong-border bg-muted`
+- Dragging: `border-strong-border`
 - Transitions: `transition-colors`
+- Drop icon: `upload` from Material Symbols on `bg-primary-50` background (`rounded-full size-11`)
 
 **Selected file card:**
 
-- Padding: `p-6` (24px)
-- Border radius: `rounded-2xl` (16px)
+- Padding: `p-4` (16px)
+- Border radius: `rounded-3xl` (24px)
 - Background: `bg-muted`
-- Border: `border-input`
-- Horizontal gap: `gap-4` (16px)
-- Icon: `text-primary` on `bg-primary/15` background
+- No border
+- Horizontal gap: `gap-6` (24px)
+- Icon: `article` from Material Symbols on `bg-background` background (`rounded-full size-11`)
 
 **Remove button:**
 
-- Variant: `destructive-medium`
-- Icon: `delete` from Material Symbols
-- Icon color: `text-destructive`
+- Variant: `ghost`, size: `icon`
+- Icon: `cancel` from Material Symbols
+- Icon color: `text-destructive` (automatically inherits `text-disabled-foreground` when disabled)
 
 **Clear all button (multiple mode):**
 

package/docs/components/ui/hover-card.md

@@ -60,10 +60,32 @@ import {
 
 ## Props
 
-| Prop       | Type     | Default | Description               |
-| ---------- | -------- | ------- | ------------------------- |
-| openDelay  | `number` | `200`   | Delay before opening (ms) |
-| closeDelay | `number` | `300`   | Delay before closing (ms) |
+### HoverCard (root)
+
+| Prop           | Type                      | Default | Description                 |
+| -------------- | ------------------------- | ------- | --------------------------- |
+| `open`         | `boolean`                 | -       | Controlled open state       |
+| `onOpenChange` | `(open: boolean) => void` | -       | Callback when state changes |
+| `openDelay`    | `number`                  | `200`   | Delay before opening (ms)   |
+| `closeDelay`   | `number`                  | `300`   | Delay before closing (ms)   |
+
+### HoverCardTrigger
+
+| Prop      | Type      | Description                              |
+| --------- | --------- | ---------------------------------------- |
+| `asChild` | `boolean` | Pass props to child instead of a wrapper |
+
+### HoverCardContent
+
+| Prop          | Type                                     | Default    | Description                              |
+| ------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
+| `align`       | `"start" \| "center" \| "end"`           | `"center"` | Horizontal alignment relative to trigger |
+| `side`        | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Side where the card appears              |
+| `sideOffset`  | `number`                                 | `4`        | Distance from trigger (px)               |
+| `alignOffset` | `number`                                 | `0`        | Alignment offset                         |
+| `className`   | `string`                                 | -          | Additional CSS classes                   |
+
+**Default styles**: `w-64`, `p-4`, `rounded-md`, `shadow-xs`, `bg-popover`, `z-50`
 
 ## References
 
@@ -90,7 +112,7 @@ import {
 </HoverCard>
 ```
 
-### Con Avatar (User Preview)
+### With avatar (user preview)
 
 ```tsx
 import {
@@ -152,7 +174,7 @@ import { Icon } from "@adamosuiteservices/ui/icon";
       <p className="text-sm">Building design systems and web apps.</p>
       <div className="flex items-center gap-4 text-sm text-muted-foreground">
         <div className="flex items-center gap-1">
-          <UsersIcon className="h-4 w-4" />
+          <Icon symbol="group" className="text-lg" />
           <span>2.1k followers</span>
         </div>
         <div>Following 180</div>

package/docs/components/ui/icon.md

@@ -31,7 +31,7 @@ import { Icon, type IconProps } from "@adamosuiteservices/ui/icon";
 ```tsx
 import { type IconProps } from "@adamosuiteservices/ui/icon";
 
-// Para crear componentes custom
+// To create custom components
 function CustomIcon(props: IconProps) {
   return <Icon {...props} className="custom-icon-styles" />;
 }
@@ -386,21 +386,21 @@ const commonIcons = [
 <Icon symbol="star" className="adm:text-5xl" />    {/* ~48px */}
 ```
 
-### Peso Apropiado por Contexto
+### Appropriate weight by context
 
 ```tsx
 {
-  /* ✅ Correcto - Peso ligero para interfaces modernas */
+  /* ✅ Correct - Light weight for modern interfaces */
 }
 <Icon symbol="menu" weight={300} />;
 
 {
-  /* ✅ Correcto - Peso mayor para énfasis */
+  /* ✅ Correct - Heavier weight for emphasis */
 }
 <Icon symbol="warning" weight={500} fill={1} className="adm:text-warning" />;
 
 {
-  /* ❌ Evitar - Peso muy pesado sin propósito */
+  /* ❌ Avoid - Too heavy without purpose */
 }
 <Icon symbol="home" weight={700} />;
 ```
@@ -417,18 +417,18 @@ const commonIcons = [
 <Icon symbol="favorite" fill={liked ? 1 : 0} />
 ```
 
-### Accesibilidad
+### Accessibility
 
 ```tsx
 {
-  /* ✅ Correcto - Botones con labels */
+  /* ✅ Correct - Buttons with labels */
 }
 <Button variant="ghost" size="icon" aria-label="Close dialog">
   <Icon symbol="close" className="adm:text-2xl" />
 </Button>;
 
 {
-  /* ✅ Correcto - Iconos decorativos */
+  /* ✅ Correct - Decorative icons */
 }
 <div className="adm:flex adm:items-center adm:gap-2">
   <Icon symbol="folder" className="adm:text-xl" aria-hidden="true" />
@@ -513,8 +513,9 @@ The component renders a `<span>` with the following characteristics:
 
 ```tsx
 <span
+  translate="no"
   data-slot="icon"
-  className="material-symbols-outlined adm:inline-block adm:text-2xl"
+  className="material-symbols-outlined adm:inline-block adm:text-2xl adm:select-none"
   style={{ fontVariationSettings: "..." }}
 >
   {symbol}

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

@@ -79,12 +79,12 @@ import {
 
 ### InputGroupButton
 
-| Prop      | Type                                     | Default           | Description                    |
-| --------- | ---------------------------------------- | ----------------- | ------------------------------ |
-| `size`    | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"`            | Button size                    |
-| `variant` | Button variants                          | `"ghost-neutral"` | Button variant                 |
-| `type`    | `string`                                 | `"button"`        | HTML button type               |
-| ...rest   | -                                        | -                 | All Button props except `size` |
+| Prop      | Type                                     | Default          | Description                    |
+| --------- | ---------------------------------------- | ---------------- | ------------------------------ |
+| `size`    | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"`           | Button size                    |
+| `variant` | Button variants                          | `"link-neutral"` | Button variant                 |
+| `type`    | `string`                                 | `"button"`       | HTML button type               |
+| ...rest   | -                                        | -                | All Button props except `size` |
 
 **Sizes**:
 
@@ -448,9 +448,9 @@ function App() {
 
 ### InputGroup States
 
-- **Disabled**: `data-disabled` → `opacity-50` en addons
-- **Focus**: `has-[input:focus-visible]` → ring y border aplicados al grupo
-- **Invalid**: `has-[input[aria-invalid=true]]` → ring destructive y border
+- **Disabled**: `data-disabled` → `opacity-50` on addons
+- **Focus**: `has-[input:focus-visible]` → ring and border applied to the group
+- **Invalid**: `has-[input[aria-invalid=true]]` → destructive ring and border
 
 ### Focus behavior
 

package/docs/components/ui/input.md

@@ -128,20 +128,20 @@ import { Input } from "@adamosuiteservices/ui/input";
 
 ```tsx
 {
-  /* Pequeño */
+  /* Small */
 }
 <Input type="text" placeholder="Small input" className="h-9 text-sm" />;
 
 {
-  /* Por defecto */
+  /* Default */
 }
 <Input type="text" placeholder="Default input" />;
 {
-  /* h-10 por defecto */
+  /* h-10 by default */
 }
 
 {
-  /* Grande */
+  /* Large */
 }
 <Input type="text" placeholder="Large input" className="h-11" />;
 ```
@@ -179,32 +179,28 @@ import { Input } from "@adamosuiteservices/ui/input";
 
 ### Focus
 
-El input tiene un anillo de enfoque visible:
+The input has a visible focus ring:
 
 ```css
-focus-visible:ring-ring/50
-focus-visible:ring-[3px]
+focus-visible:border-primary-300
+focus-visible:ring-4
+focus-visible:ring-primary/10
 ```
 
 ### Validation states
 
 - Normal border: `border-input`
-- Invalid: `aria-invalid:border-destructive` with red ring
-
-### Dark mode
-
-```css
-dark: bg-input/30;
-```
+- Invalid: `aria-invalid:border-destructive` + red ring on focus `ring-4 ring-destructive/10`
 
 ### File input
 
 File inputs have special styles for the button:
 
 ```css
-file:h-7
+file:h-full
 file:text-sm
 file:font-medium
+file:text-foreground
 ```
 
 ## Common use cases
@@ -265,7 +261,7 @@ const maxLength = 100;
 
 ## Implementation notes
 
-- Uses the `` prefix in all styles
+- Uses the `adm:` prefix in all styles
 - Based on the native HTML `<input>` element
 - Supports all native HTML input props
 - Internal SVG icons are automatically resized
@@ -273,32 +269,32 @@ const maxLength = 100;
 
 ## References
 
-- Documentación de shadcn/ui: <https://ui.shadcn.com/docs/components/input>
+- shadcn/ui documentation: <https://ui.shadcn.com/docs/components/input>
 - MDN Input: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input>
 
 ## Advanced features
 
-**Forms**: Inputs en formularios de registro, login, contacto  
-**Search**: Barras de búsqueda con `type="search"`  
-**File upload**: Selección de archivos con `type="file"`  
-**Numbers**: Cantidades, precios, edades con `type="number"`  
-**Dates**: Selección de fechas con `type="date"`  
-**Validation**: Campos con validación visual via `aria-invalid`
+**Forms**: Inputs in registration, login, and contact forms  
+**Search**: Search bars with `type="search"`  
+**File upload**: File selection with `type="file"`  
+**Numbers**: Quantities, prices, ages with `type="number"`  
+**Dates**: Date selection with `type="date"`  
+**Validation**: Fields with visual validation via `aria-invalid`
 
 ## States and data attributes
 
 ### Focus
 
-- **Focused**: `focus-visible:ring-ring/50`, `focus-visible:ring-[3px]`, `focus-visible:border-ring`
+- **Focused**: `focus-visible:border-primary-300`, `focus-visible:ring-4`, `focus-visible:ring-primary/10`
 
 ### Validation
 
-- **Invalid**: `aria-invalid:border-destructive`, `aria-invalid:ring-destructive/20`
+- **Invalid**: `aria-invalid:border-destructive`, `aria-invalid:focus-visible:border-destructive`, `aria-invalid:focus-visible:ring-destructive/10`
 - **Valid**: Border normal `border-input`
 
 ### Disabled state
 
-- **Disabled**: `opacity-50`, `pointer-events-none`, `cursor-not-allowed`
+- **Disabled**: `disabled:opacity-100`, `disabled:pointer-events-none`, `disabled:cursor-not-allowed`, `disabled:bg-input-disabled`, `disabled:text-input-foreground-disabled`, `disabled:placeholder:text-disabled-foreground`
 
 ### File input styles
 
@@ -309,9 +305,10 @@ const maxLength = 100;
 - **Height**: `h-10` (~40px) default
 - **Border**: `border`, `border-input`, `rounded-md`
 - **Padding**: `px-3` (no vertical padding, height defines the height)
-- **Font**: `text-base md:text-sm`
+- **Font**: `text-sm`
 - **Shadow**: `shadow-xs`
-- **Background**: `bg-transparent`, `dark:bg-input/30`
+- **Background**: `bg-background`
+- **Hover**: `hover:bg-muted`
 - **Transitions**: `transition-[color,box-shadow]`
 - **Selection**: `selection:bg-primary selection:text-primary-foreground`
 
@@ -332,17 +329,17 @@ const maxLength = 100;
 - **Props forwarding**: Accepts all native HTML props
 - **Validation**: Uses native attributes (`required`, `pattern`, `min`, `max`) + `aria-invalid`
 - **File input**: Special styles for "Choose file" button
-- **Focus ring**: 3px with 50% opacity for visibility without being invasive
+- **Focus ring**: `ring-4` with `ring-primary/10` for visibility without being invasive
 - **Shadow**: Subtle `shadow-xs` for depth
-- **Responsive**: `text-base` on mobile, `text-sm` on desktop (`md:`)
-- **Dark mode**: Semi-transparent background `dark:bg-input/30`
+- **Font size**: `text-sm` on all screen sizes
+- **Background**: Solid `bg-background`, `hover:bg-muted`
 
 ## Differences with Textarea
 
 | Aspect     | Input                            | Textarea                  |
 | ---------- | -------------------------------- | ------------------------- |
 | **Lines**  | Single-line                      | Multi-line                |
-| **Height** | Fixed (h-9)                      | Variable (min-h-20)       |
+| **Height** | Fixed (h-10)                     | Variable (min-h-20)       |
 | **Resize** | No                               | Yes (vertical by default) |
 | **Types**  | Multiple (email, password, etc.) | Text only                 |
 | **Usage**  | Short data                       | Long text                 |
@@ -354,7 +351,7 @@ const maxLength = 100;
 **Styles don't apply**: Verify you're using `className` with valid Tailwind  
 **File input doesn't look good**: Use `file:*` classes to style button  
 **Invalid state doesn't work**: Make sure to use `aria-invalid` not just `invalid`  
-**Inconsistent height**: Input has `h-9` default, use `className` to override  
+**Inconsistent height**: Input has `h-10` default, use `className` to override  
 **Dark mode doesn't work**: Verify theme configured and `dark:` class applying  
 **Number input allows text**: Browser validates, but use additional JS validation