@adamosuiteservices/ui 2.13.4 → 2.14.1

package/docs/components/ui/accordion.md

@@ -1,269 +1,269 @@
-# Accordion Component
-
-## Descripción
-
-El componente `Accordion` es un elemento de interfaz vertically apilado que permite a los usuarios expandir y colapsar secciones de contenido.
-
-## Importación
-
-```typescript
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@adamosuiteservices/ui/accordion";
-```
-
-## Componentes
-
-### Accordion (Root)
-
-Contenedor principal que controla el comportamiento del accordion.
-
-### AccordionItem
-
-Representa cada elemento individual del accordion.
-
-### AccordionTrigger
-
-El botón/header que se puede clickear para expandir/colapsar.
-
-### AccordionContent
-
-El contenido que se muestra/oculta al activar el trigger.
-
-## Uso Básico
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>Yes. It comes with default styles.</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Tipos de Accordion
-
-### Single (Un elemento a la vez)
-
-Solo permite que un elemento esté abierto a la vez.
-
-```tsx
-<Accordion type="single" collapsible>
-  {/* items */}
-</Accordion>
-```
-
-### Multiple (Múltiples elementos)
-
-Permite que múltiples elementos estén abiertos simultáneamente.
-
-```tsx
-<Accordion type="multiple">{/* items */}</Accordion>
-```
-
-## Con Valor por Defecto
-
-Puedes especificar qué elemento debe estar abierto inicialmente.
-
-```tsx
-<Accordion type="single" defaultValue="item-2" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>First Item</AccordionTrigger>
-    <AccordionContent>Content 1</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Second Item (Default Open)</AccordionTrigger>
-    <AccordionContent>Content 2</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Modo No-Collapsible
-
-En modo `type="single"` sin `collapsible`, al menos un elemento debe estar abierto.
-
-```tsx
-<Accordion type="single" collapsible={false} defaultValue="item-1">
-  {/* items */}
-</Accordion>
-```
-
-## Controlado
-
-Puedes controlar el accordion externamente con estado.
-
-```tsx
-const [value, setValue] = useState<string | undefined>("item-1");
-
-<Accordion type="single" collapsible value={value} onValueChange={setValue}>
-  {/* items */}
-</Accordion>;
-```
-
-## Con Contenido Rico
-
-### Con Listas
-
-```tsx
-<AccordionContent>
-  <div className="space-y-2">
-    <p>Modern frontend development stack includes:</p>
-    <ul className="list-disc list-inside space-y-1">
-      <li>React for building user interfaces</li>
-      <li>TypeScript for type safety</li>
-      <li>Tailwind CSS for styling</li>
-    </ul>
-  </div>
-</AccordionContent>
-```
-
-### Con Iconos y Badges
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<AccordionTrigger className="text-left">
-  <div className="flex items-center gap-2">
-    <Icon symbol="info" className="text-lg" />
-    Product Information
-  </div>
-</AccordionTrigger>
-<AccordionContent>
-  <div className="flex gap-2">
-    <Badge>Premium Quality</Badge>
-    <Badge variant="secondary">Wireless</Badge>
-  </div>
-</AccordionContent>
-```
-
-## Props
-
-### Accordion
-
-| Prop          | Tipo                     | Default | Descripción                                               |
-| ------------- | ------------------------ | ------- | --------------------------------------------------------- |
-| type          | `"single" \| "multiple"` | -       | Tipo de accordion                                         |
-| collapsible   | `boolean`                | -       | Solo para type="single". Permite colapsar todos los items |
-| defaultValue  | `string \| string[]`     | -       | Valor inicial abierto                                     |
-| value         | `string \| string[]`     | -       | Valor controlado                                          |
-| onValueChange | `(value) => void`        | -       | Callback cuando cambia el valor                           |
-
-### AccordionItem
-
-| Prop      | Tipo      | Default | Descripción                              |
-| --------- | --------- | ------- | ---------------------------------------- |
-| value     | `string`  | -       | Identificador único del item (requerido) |
-| disabled  | `boolean` | `false` | Desactiva el item                        |
-| className | `string`  | -       | Clases CSS adicionales                   |
-
-### AccordionTrigger
-
-| Prop      | Tipo        | Default | Descripción            |
-| --------- | ----------- | ------- | ---------------------- |
-| className | `string`    | -       | Clases CSS adicionales |
-| children  | `ReactNode` | -       | Contenido del trigger  |
-
-### AccordionContent
-
-| Prop      | Tipo        | Default | Descripción                 |
-| --------- | ----------- | ------- | --------------------------- |
-| className | `string`    | -       | Clases CSS adicionales      |
-| children  | `ReactNode` | -       | Contenido a mostrar/ocultar |
-
-## Animaciones
-
-El componente incluye animaciones suaves de entrada/salida:
-
-- El contenido se desliza hacia abajo al abrir
-- El contenido se desliza hacia arriba al cerrar
-- El icono chevron rota 180° al abrir
-
-## Estilizado
-
-Cada item tiene un borde inferior que desaparece en el último elemento:
-
-```tsx
-<AccordionItem className="border-b last:border-b-0">
-```
-
-El trigger incluye hover effect con subrayado:
-
-```tsx
-<AccordionTrigger className="hover:underline">
-```
-
-## Casos de Uso Comunes
-
-### FAQ Section
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="q1">
-    <AccordionTrigger>How do I get started?</AccordionTrigger>
-    <AccordionContent>Follow our quick start guide...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Product Information
-
-```tsx
-<Accordion type="single" collapsible defaultValue="info">
-  <AccordionItem value="info">
-    <AccordionTrigger>Product Information</AccordionTrigger>
-    <AccordionContent>{/* Specifications, features, etc */}</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="shipping">
-    <AccordionTrigger>Shipping & Delivery</AccordionTrigger>
-    <AccordionContent>{/* Shipping details */}</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Project Timeline
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="phase-1">
-    <AccordionTrigger>
-      <div className="flex items-center gap-2">
-        <Icon symbol="check_circle" className="text-lg" />
-        Phase 1: Planning
-      </div>
-    </AccordionTrigger>
-    <AccordionContent>
-      <Progress value={100} />
-      {/* Phase details */}
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Accesibilidad
-
-- Sigue el patrón WAI-ARIA para accordions
-- Navegación por teclado completa
-- Estados de focus visibles
-- Screen readers pueden anunciar el estado expandido/colapsado
-- Cada trigger tiene el header semántico apropiado
-
-## Notas de Implementación
-
-- Usa Radix UI Accordion internamente
-- Todos los estilos tienen prefijo ``
-- El icono keyboard_arrow_down se incluye automáticamente en el trigger
-- Las animaciones son manejadas por CSS y data attributes
-
-## Referencias
-
-- Documentación de shadcn/ui: https://ui.shadcn.com/docs/components/accordion
-- Radix UI Accordion: https://www.radix-ui.com/primitives/docs/components/accordion
+# Accordion Component
+
+## Descripción
+
+El componente `Accordion` es un elemento de interfaz vertically apilado que permite a los usuarios expandir y colapsar secciones de contenido.
+
+## Importación
+
+```typescript
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@adamosuiteservices/ui/accordion";
+```
+
+## Componentes
+
+### Accordion (Root)
+
+Contenedor principal que controla el comportamiento del accordion.
+
+### AccordionItem
+
+Representa cada elemento individual del accordion.
+
+### AccordionTrigger
+
+El botón/header que se puede clickear para expandir/colapsar.
+
+### AccordionContent
+
+El contenido que se muestra/oculta al activar el trigger.
+
+## Uso Básico
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Is it styled?</AccordionTrigger>
+    <AccordionContent>Yes. It comes with default styles.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Tipos de Accordion
+
+### Single (Un elemento a la vez)
+
+Solo permite que un elemento esté abierto a la vez.
+
+```tsx
+<Accordion type="single" collapsible>
+  {/* items */}
+</Accordion>
+```
+
+### Multiple (Múltiples elementos)
+
+Permite que múltiples elementos estén abiertos simultáneamente.
+
+```tsx
+<Accordion type="multiple">{/* items */}</Accordion>
+```
+
+## Con Valor por Defecto
+
+Puedes especificar qué elemento debe estar abierto inicialmente.
+
+```tsx
+<Accordion type="single" defaultValue="item-2" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>First Item</AccordionTrigger>
+    <AccordionContent>Content 1</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Second Item (Default Open)</AccordionTrigger>
+    <AccordionContent>Content 2</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Modo No-Collapsible
+
+En modo `type="single"` sin `collapsible`, al menos un elemento debe estar abierto.
+
+```tsx
+<Accordion type="single" collapsible={false} defaultValue="item-1">
+  {/* items */}
+</Accordion>
+```
+
+## Controlado
+
+Puedes controlar el accordion externamente con estado.
+
+```tsx
+const [value, setValue] = useState<string | undefined>("item-1");
+
+<Accordion type="single" collapsible value={value} onValueChange={setValue}>
+  {/* items */}
+</Accordion>;
+```
+
+## Con Contenido Rico
+
+### Con Listas
+
+```tsx
+<AccordionContent>
+  <div className="space-y-2">
+    <p>Modern frontend development stack includes:</p>
+    <ul className="list-disc list-inside space-y-1">
+      <li>React for building user interfaces</li>
+      <li>TypeScript for type safety</li>
+      <li>Tailwind CSS for styling</li>
+    </ul>
+  </div>
+</AccordionContent>
+```
+
+### Con Iconos y Badges
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<AccordionTrigger className="text-left">
+  <div className="flex items-center gap-2">
+    <Icon symbol="info" className="text-lg" />
+    Product Information
+  </div>
+</AccordionTrigger>
+<AccordionContent>
+  <div className="flex gap-2">
+    <Badge>Premium Quality</Badge>
+    <Badge variant="secondary">Wireless</Badge>
+  </div>
+</AccordionContent>
+```
+
+## Props
+
+### Accordion
+
+| Prop          | Tipo                     | Default | Descripción                                               |
+| ------------- | ------------------------ | ------- | --------------------------------------------------------- |
+| type          | `"single" \| "multiple"` | -       | Tipo de accordion                                         |
+| collapsible   | `boolean`                | -       | Solo para type="single". Permite colapsar todos los items |
+| defaultValue  | `string \| string[]`     | -       | Valor inicial abierto                                     |
+| value         | `string \| string[]`     | -       | Valor controlado                                          |
+| onValueChange | `(value) => void`        | -       | Callback cuando cambia el valor                           |
+
+### AccordionItem
+
+| Prop      | Tipo      | Default | Descripción                              |
+| --------- | --------- | ------- | ---------------------------------------- |
+| value     | `string`  | -       | Identificador único del item (requerido) |
+| disabled  | `boolean` | `false` | Desactiva el item                        |
+| className | `string`  | -       | Clases CSS adicionales                   |
+
+### AccordionTrigger
+
+| Prop      | Tipo        | Default | Descripción            |
+| --------- | ----------- | ------- | ---------------------- |
+| className | `string`    | -       | Clases CSS adicionales |
+| children  | `ReactNode` | -       | Contenido del trigger  |
+
+### AccordionContent
+
+| Prop      | Tipo        | Default | Descripción                 |
+| --------- | ----------- | ------- | --------------------------- |
+| className | `string`    | -       | Clases CSS adicionales      |
+| children  | `ReactNode` | -       | Contenido a mostrar/ocultar |
+
+## Animaciones
+
+El componente incluye animaciones suaves de entrada/salida:
+
+- El contenido se desliza hacia abajo al abrir
+- El contenido se desliza hacia arriba al cerrar
+- El icono chevron rota 180° al abrir
+
+## Estilizado
+
+Cada item tiene un borde inferior que desaparece en el último elemento:
+
+```tsx
+<AccordionItem className="border-b last:border-b-0">
+```
+
+El trigger incluye hover effect con subrayado:
+
+```tsx
+<AccordionTrigger className="hover:underline">
+```
+
+## Casos de Uso Comunes
+
+### FAQ Section
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="q1">
+    <AccordionTrigger>How do I get started?</AccordionTrigger>
+    <AccordionContent>Follow our quick start guide...</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Product Information
+
+```tsx
+<Accordion type="single" collapsible defaultValue="info">
+  <AccordionItem value="info">
+    <AccordionTrigger>Product Information</AccordionTrigger>
+    <AccordionContent>{/* Specifications, features, etc */}</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="shipping">
+    <AccordionTrigger>Shipping & Delivery</AccordionTrigger>
+    <AccordionContent>{/* Shipping details */}</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Project Timeline
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="phase-1">
+    <AccordionTrigger>
+      <div className="flex items-center gap-2">
+        <Icon symbol="check_circle" className="text-lg" />
+        Phase 1: Planning
+      </div>
+    </AccordionTrigger>
+    <AccordionContent>
+      <Progress value={100} />
+      {/* Phase details */}
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Accesibilidad
+
+- Sigue el patrón WAI-ARIA para accordions
+- Navegación por teclado completa
+- Estados de focus visibles
+- Screen readers pueden anunciar el estado expandido/colapsado
+- Cada trigger tiene el header semántico apropiado
+
+## Notas de Implementación
+
+- Usa Radix UI Accordion internamente
+- Todos los estilos tienen prefijo ``
+- El icono keyboard_arrow_down se incluye automáticamente en el trigger
+- Las animaciones son manejadas por CSS y data attributes
+
+## Referencias
+
+- Documentación de shadcn/ui: https://ui.shadcn.com/docs/components/accordion
+- Radix UI Accordion: https://www.radix-ui.com/primitives/docs/components/accordion

package/docs/components/ui/button.md

@@ -377,28 +377,47 @@ Desactiva el botón y reduce opacidad.
 
 ### Loading
 
-Muestra spinner y desactiva interacciones.
+Muestra spinner automático y desactiva interacciones usando la prop `loading`.
 
 ```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Button disabled>
-  <Icon symbol="progress_activity" className="animate-spin" />
-  Loading...
-</Button>;
+<Button loading>Loading...</Button>
 ```
 
-**Patrón recomendado**:
+**Comportamiento**:
+
+- Muestra un spinner automáticamente antes del contenido
+- Desactiva el botón automáticamente (como si tuviera `disabled`)
+- `pointer-events-none`: No acepta clicks ni hover
+- El spinner usa el componente `Spinner` con animación integrada
+
+**Patrón recomendado con estado**:
 
 ```tsx
 const [isLoading, setIsLoading] = useState(false);
 
-<Button disabled={isLoading} onClick={handleSubmit}>
-  {isLoading && <Icon symbol="progress_activity" className="animate-spin" />}
-  {isLoading ? "Saving..." : "Save Changes"}
+const handleSubmit = async () => {
+  setIsLoading(true);
+  try {
+    await saveData();
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+<Button loading={isLoading} onClick={handleSubmit}>
+  Save Changes
 </Button>;
 ```
 
+**Con diferentes variantes**:
+
+```tsx
+<Button variant="default" loading>Loading...</Button>
+<Button variant="success" loading>Saving...</Button>
+<Button variant="destructive" loading>Deleting...</Button>
+<Button variant="outline" loading>Please wait</Button>
+```
+
 ### Hover
 
 Estado automático al pasar el mouse.
@@ -605,6 +624,7 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 | variant   | `"default" \| "success" \| "success-medium" \| "warning" \| "warning-medium" \| "destructive" \| "destructive-medium" \| "secondary" \| "outline" \| "ghost" \| "ghost-neutral" \| "link"` | `"default"` | Variante visual del botón                                      |
 | size      | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`                                                                                                         | `"default"` | Tamaño del botón                                               |
 | asChild   | `boolean`                                                                                                                                                               | `false`     | Renderiza el hijo en lugar de un `<button>`. Usa Radix UI Slot |
+| loading   | `boolean`                                                                                                                                                               | `false`     | Muestra spinner automático y desactiva el botón                |
 | disabled  | `boolean`                                                                                                                                                               | `false`     | Desactiva el botón (opacity 50%, pointer-events none)          |
 | className | `string`                                                                                                                                                                | -           | Clases CSS adicionales                                         |
 | children  | `ReactNode`                                                                                                                                                             | -           | Contenido del botón (texto, iconos, etc.)                      |
@@ -614,6 +634,8 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 **Nota sobre asChild**: Cuando es `true`, el componente usa `Slot` de Radix UI para transferir todas las props y estilos al hijo directo.
 
+**Nota sobre loading con asChild**: Cuando `loading` es `true`, el prop `asChild` se desactiva automáticamente porque `Slot` requiere un solo hijo React y el loading agrega un spinner adicional.
+
 ## Estilos Base Automáticos
 
 Todos los botones tienen estos estilos aplicados automáticamente:
@@ -732,18 +754,8 @@ Combinación típica en formularios.
     <Button type="button" variant="outline" onClick={onCancel}>
       Cancel
     </Button>
-    <Button type="submit">
-      {isSubmitting ? (
-        <>
-          <Loader2Icon className="animate-spin" />
-          Saving...
-        </>
-      ) : (
-        <>
-          <SaveIcon />
-          Save
-        </>
-      )}
+    <Button type="submit" loading={isSubmitting}>
+      Save
     </Button>
   </div>
 </form>