@adamosuiteservices/ui 2.11.15 → 2.11.16

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