@adamosuiteservices/ui 2.11.17 → 2.11.18

package/docs/components/ui/sheet.md

@@ -1,142 +1,174 @@
-# Sheet
-
-Panel lateral deslizable (drawer). Basado en Radix UI Dialog con 4 direcciones.
-
-## Descripción
-
-El componente `Sheet` muestra un panel lateral deslizante, similar a un drawer.
-
-## Importación
-
-```typescript
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  SheetFooter,
-  SheetClose,
-} from "@adamosuiteservices/ui/sheet";
-```
-
-## Anatomía
-
-```tsx
-<Sheet>
-  <SheetTrigger>Open</SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Are you sure?</SheetTitle>
-      <SheetDescription>This action cannot be undone.</SheetDescription>
-    </SheetHeader>
-  </SheetContent>
-</Sheet>
-```
-
-**Componentes**: 8 (Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose)
-
-## Props
-
-### Sheet (Root)
-
-| Prop           | Tipo                      | Descripción         |
-| -------------- | ------------------------- | ------------------- |
-| `open`         | `boolean`                 | Estado controlado   |
-| `defaultOpen`  | `boolean`                 | Estado inicial      |
-| `onOpenChange` | `(open: boolean) => void` | Callback al cambiar |
-
-### SheetContent
-
-| Prop              | Tipo                                     | Descripción                      |
-| ----------------- | ---------------------------------------- | -------------------------------- |
-| `side`            | `"top" \| "right" \| "bottom" \| "left"` | Dirección (default: "right")     |
-| `showCloseButton` | `boolean`                                | Mostrar X button (default: true) |
-
-## Patrones de Uso
-
-### Desde Derecha (Default)
-
-```tsx
-<Sheet>
-  <SheetTrigger asChild>
-    <Button>Open Sheet</Button>
-  </SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Settings</SheetTitle>
-      <SheetDescription>Configure your preferences</SheetDescription>
-    </SheetHeader>
-  </SheetContent>
-</Sheet>
-```
-
-### Desde Izquierda
-
-```tsx
-<Sheet>
-  <SheetTrigger>Open Left</SheetTrigger>
-  <SheetContent side="left">
-    <SheetHeader>
-      <SheetTitle>Navigation</SheetTitle>
-    </SheetHeader>
-  </SheetContent>
-</Sheet>
-```
-
-### Desde Arriba/Abajo
-
-```tsx
-<Sheet>
-  <SheetTrigger>Open Top</SheetTrigger>
-  <SheetContent side="top">
-    <SheetHeader>
-      <SheetTitle>Top Sheet</SheetTitle>
-    </SheetHeader>
-  </SheetContent>
-</Sheet>
-
-<Sheet>
-  <SheetTrigger>Open Bottom</SheetTrigger>
-  <SheetContent side="bottom">
-    <SheetHeader>
-      <SheetTitle>Bottom Sheet</SheetTitle>
-    </SheetHeader>
-  </SheetContent>
-</Sheet>
-```
-
-### Con Footer
-
-```tsx
-<Sheet>
-  <SheetTrigger>Edit Profile</SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Edit profile</SheetTitle>
-      <SheetDescription>Make changes to your profile here.</SheetDescription>
-    </SheetHeader>
-    {/* Form fields */}
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </SheetClose>
-      <Button type="submit">Save changes</Button>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>
-```
-
-## Casos de Uso
-
-**Navigation menu**: Menú móvil  
-**Filters**: Panel de filtros  
-**Details**: Vista de detalles  
-**Forms**: Formularios laterales  
-**Settings**: Panel de configuración
-
-## Referencias
-
-- **Radix UI Dialog**: <https://www.radix-ui.com/primitives/docs/components/dialog>
-- **shadcn/ui Sheet**: <https://ui.shadcn.com/docs/components/sheet>
+# Sheet
+
+Panel lateral deslizable (drawer). Basado en Radix UI Dialog con 4 direcciones.
+
+## Descripción
+
+El componente `Sheet` muestra un panel lateral deslizante, similar a un drawer.
+
+## Importación
+
+```typescript
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetFooter,
+  SheetClose,
+} from "@adamosuiteservices/ui/sheet";
+```
+
+## Anatomía
+
+```tsx
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Are you sure?</SheetTitle>
+      <SheetDescription>This action cannot be undone.</SheetDescription>
+    </SheetHeader>
+    <SheetBody>
+      {/* Content */}
+    </SheetBody>
+  </SheetContent>
+</Sheet>
+```
+
+**Componentes**: 9 (Sheet, SheetTrigger, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, SheetClose)
+
+## Props
+
+### Sheet (Root)
+
+| Prop           | Tipo                      | Descripción         |
+| -------------- | ------------------------- | ------------------- |
+| `open`         | `boolean`                 | Estado controlado   |
+| `defaultOpen`  | `boolean`                 | Estado inicial      |
+| `onOpenChange` | `(open: boolean) => void` | Callback al cambiar |
+
+### SheetContent
+
+| Prop              | Tipo                                     | Descripción                      |
+| ----------------- | ---------------------------------------- | -------------------------------- |
+| `side`            | `"top" \| "right" \| "bottom" \| "left"` | Dirección (default: "right")     |
+| `showCloseButton` | `boolean`                                | Mostrar X button (default: true) |
+
+## Patrones de Uso
+
+### Desde Derecha (Default)
+
+Ancho: `w-11/12` en móvil, `max-w-sm` en desktop. Border radius: `rounded-2xl`. Padding: `p-8` (32px).
+
+```tsx
+<Sheet>
+  <SheetTrigger asChild>
+    <Button>Open Sheet</Button>
+  </SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Settings</SheetTitle>
+      <SheetDescription>Configure your preferences</SheetDescription>
+    </SheetHeader>
+    <SheetBody>
+      {/* Content with horizontal padding */}
+    </SheetBody>
+  </SheetContent>
+</Sheet>
+```
+
+### Desde Izquierda
+
+```tsx
+<Sheet>
+  <SheetTrigger>Open Left</SheetTrigger>
+  <SheetContent side="left">
+    <SheetHeader>
+      <SheetTitle>Navigation</SheetTitle>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
+
+### Desde Arriba/Abajo
+
+```tsx
+<Sheet>
+  <SheetTrigger>Open Top</SheetTrigger>
+  <SheetContent side="top">
+    <SheetHeader>
+      <SheetTitle>Top Sheet</SheetTitle>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+
+<Sheet>
+  <SheetTrigger>Open Bottom</SheetTrigger>
+  <SheetContent side="bottom">
+    <SheetHeader>
+      <SheetTitle>Bottom Sheet</SheetTitle>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
+
+### Con Footer
+
+```tsx
+<Sheet>
+  <SheetTrigger>Edit Profile</SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Edit profile</SheetTitle>
+      <SheetDescription>Make changes to your profile here.</SheetDescription>
+    </SheetHeader>
+    <SheetBody>
+      {/* Form fields */}
+    </SheetBody>
+    <SheetFooter>
+      <SheetClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </SheetClose>
+      <Button type="submit">Save changes</Button>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+
+## Componentes
+
+### SheetBody
+
+Contenedor para el contenido principal del sheet con padding horizontal de 32px (`px-8`).
+
+```tsx
+<SheetBody>
+  <p>Content goes here</p>
+</SheetBody>
+```
+
+**Props**: Acepta todas las props de `div` + `className`
+
+**Estilos por defecto**: `px-8` (32px horizontal padding)
+
+## Espaciado
+
+- **Padding del contenido**: SheetHeader, SheetBody, SheetFooter usan `p-8` o `px-8` (32px)
+- **Gap entre secciones**: `gap-8` (32px) entre SheetHeader, SheetBody, y SheetFooter
+
+## Casos de Uso
+
+**Navigation menu**: Menú móvil  
+**Filters**: Panel de filtros  
+**Details**: Vista de detalles  
+**Forms**: Formularios laterales  
+**Settings**: Panel de configuración
+
+## Referencias
+
+- **Radix UI Dialog**: <https://www.radix-ui.com/primitives/docs/components/dialog>
+- **shadcn/ui Sheet**: <https://ui.shadcn.com/docs/components/sheet>

package/docs/components/ui/skeleton.md

@@ -1,140 +1,140 @@
-# Skeleton
-
-Placeholder animado para contenido en carga. Simula la estructura del contenido final con bloques pulsantes.
-
-## Descripción
-
-El componente `Skeleton` muestra placeholders de carga para contenido que está siendo cargado.
-
-## Importación
-
-```typescript
-import { Skeleton } from "@adamosuiteservices/ui/skeleton";
-```
-
-## Anatomía
-
-```tsx
-<Skeleton className="w-full h-12" />
-```
-
-**Componentes**: 1 (Skeleton)
-
-## Props
-
-| Prop        | Tipo     | Descripción                    |
-| ----------- | -------- | ------------------------------ |
-| `className` | `string` | Clases CSS para tamaño y forma |
-
-**Nota**: Acepta todas las props de `<div>`
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<Skeleton className="h-4 w-[250px]" />
-```
-
-### Avatar + Text
-
-```tsx
-<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>
-```
-
-### Card
-
-```tsx
-<div className="flex flex-col space-y-3">
-  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>
-```
-
-### Text Lines
-
-```tsx
-<div className="space-y-2">
-  <Skeleton className="h-4 w-full" />
-  <Skeleton className="h-4 w-[90%]" />
-  <Skeleton className="h-4 w-[80%]" />
-</div>
-```
-
-### Form
-
-```tsx
-<div className="space-y-4 max-w-md">
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-16" />
-    <Skeleton className="h-10 w-full rounded-md" />
-  </div>
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-20" />
-    <Skeleton className="h-10 w-full rounded-md" />
-  </div>
-  <Skeleton className="h-10 w-24 rounded-md" />
-</div>
-```
-
-### List Items
-
-```tsx
-<div className="space-y-4">
-  {Array.from({ length: 4 }).map((_, i) => (
-    <div key={i} className="flex items-center space-x-4">
-      <Skeleton className="h-10 w-10 rounded-full" />
-      <div className="space-y-2 flex-1">
-        <Skeleton className="h-4 w-[200px]" />
-        <Skeleton className="h-3 w-[150px]" />
-      </div>
-      <Skeleton className="h-8 w-16 rounded-md" />
-    </div>
-  ))}
-</div>
-```
-
-## Casos de Uso
-
-**Loading states**: Placeholder mientras carga contenido  
-**Lazy loading**: Imágenes/contenido que carga progresivamente  
-**Optimistic UI**: Simular contenido antes de respuesta  
-**Infinite scroll**: Items mientras cargan más
-
-## Estilos Base
-
-- **Background**: `bg-accent`
-- **Animation**: `animate-pulse`
-- **Border radius**: `rounded-md` default
-
-## Accesibilidad
-
-- ✅ **ARIA**: Usa `aria-busy="true"` en contenedor padre
-- ✅ **Screen readers**: Anuncia estado de carga en contenedor
-- ⚠️ **Replace**: Reemplaza skeleton con contenido real al cargar
-
-## Notas de Implementación
-
-- **HTML nativo**: Simple `<div>` con estilos
-- **Pulse animation**: Tailwind `animate-pulse`
-- **Customizable**: Totalmente personalizable con className
-- **No state**: Stateless, solo visual
-
-## Troubleshooting
-
-**No pulsa**: Verifica que `animate-pulse` esté aplicado  
-**Tamaño inconsistente**: Usa height/width específicos con className  
-**Forma incorrecta**: Ajusta `rounded-*` para avatars, cards, etc.
-
-## Referencias
-
-- **shadcn/ui Skeleton**: <https://ui.shadcn.com/docs/components/skeleton>
+# Skeleton
+
+Placeholder animado para contenido en carga. Simula la estructura del contenido final con bloques pulsantes.
+
+## Descripción
+
+El componente `Skeleton` muestra placeholders de carga para contenido que está siendo cargado.
+
+## Importación
+
+```typescript
+import { Skeleton } from "@adamosuiteservices/ui/skeleton";
+```
+
+## Anatomía
+
+```tsx
+<Skeleton className="w-full h-12" />
+```
+
+**Componentes**: 1 (Skeleton)
+
+## Props
+
+| Prop        | Tipo     | Descripción                    |
+| ----------- | -------- | ------------------------------ |
+| `className` | `string` | Clases CSS para tamaño y forma |
+
+**Nota**: Acepta todas las props de `<div>`
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<Skeleton className="h-4 w-[250px]" />
+```
+
+### Avatar + Text
+
+```tsx
+<div className="flex items-center space-x-4">
+  <Skeleton className="h-12 w-12 rounded-full" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-[250px]" />
+    <Skeleton className="h-4 w-[200px]" />
+  </div>
+</div>
+```
+
+### Card
+
+```tsx
+<div className="flex flex-col space-y-3">
+  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-[250px]" />
+    <Skeleton className="h-4 w-[200px]" />
+  </div>
+</div>
+```
+
+### Text Lines
+
+```tsx
+<div className="space-y-2">
+  <Skeleton className="h-4 w-full" />
+  <Skeleton className="h-4 w-[90%]" />
+  <Skeleton className="h-4 w-[80%]" />
+</div>
+```
+
+### Form
+
+```tsx
+<div className="space-y-4 max-w-md">
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-16" />
+    <Skeleton className="h-10 w-full rounded-md" />
+  </div>
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-20" />
+    <Skeleton className="h-10 w-full rounded-md" />
+  </div>
+  <Skeleton className="h-10 w-24 rounded-md" />
+</div>
+```
+
+### List Items
+
+```tsx
+<div className="space-y-4">
+  {Array.from({ length: 4 }).map((_, i) => (
+    <div key={i} className="flex items-center space-x-4">
+      <Skeleton className="h-10 w-10 rounded-full" />
+      <div className="space-y-2 flex-1">
+        <Skeleton className="h-4 w-[200px]" />
+        <Skeleton className="h-3 w-[150px]" />
+      </div>
+      <Skeleton className="h-8 w-16 rounded-md" />
+    </div>
+  ))}
+</div>
+```
+
+## Casos de Uso
+
+**Loading states**: Placeholder mientras carga contenido  
+**Lazy loading**: Imágenes/contenido que carga progresivamente  
+**Optimistic UI**: Simular contenido antes de respuesta  
+**Infinite scroll**: Items mientras cargan más
+
+## Estilos Base
+
+- **Background**: `bg-accent`
+- **Animation**: `animate-pulse`
+- **Border radius**: `rounded-md` default
+
+## Accesibilidad
+
+- ✅ **ARIA**: Usa `aria-busy="true"` en contenedor padre
+- ✅ **Screen readers**: Anuncia estado de carga en contenedor
+- ⚠️ **Replace**: Reemplaza skeleton con contenido real al cargar
+
+## Notas de Implementación
+
+- **HTML nativo**: Simple `<div>` con estilos
+- **Pulse animation**: Tailwind `animate-pulse`
+- **Customizable**: Totalmente personalizable con className
+- **No state**: Stateless, solo visual
+
+## Troubleshooting
+
+**No pulsa**: Verifica que `animate-pulse` esté aplicado  
+**Tamaño inconsistente**: Usa height/width específicos con className  
+**Forma incorrecta**: Ajusta `rounded-*` para avatars, cards, etc.
+
+## Referencias
+
+- **shadcn/ui Skeleton**: <https://ui.shadcn.com/docs/components/skeleton>