@adamosuiteservices/ui 2.11.16 → 2.11.18

package/docs/components/ui/separator.md

@@ -1,214 +1,214 @@
-# Separator
-
-Separador visual basado en Radix UI. Divide secciones con línea horizontal o vertical, con semántica accesible.
-
-## Descripción
-
-El componente `Separator` muestra una línea divisoria visual entre secciones de contenido.
-
-## Importación
-
-```typescript
-import { Separator } from "@adamosuiteservices/ui/separator";
-```
-
-## Anatomía
-
-```tsx
-<div>
-  <div>Section 1</div>
-  <Separator />
-  <div>Section 2</div>
-</div>
-```
-
-**Componentes**: 1 (Separator)
-
-## Props
-
-| Prop          | Tipo                         | Default        | Descripción                     |
-| ------------- | ---------------------------- | -------------- | ------------------------------- |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Orientación del separador       |
-| `decorative`  | `boolean`                    | `true`         | Si es decorativo (no semántico) |
-| `className`   | `string`                     | -              | Clases CSS adicionales          |
-
-## Patrones de Uso
-
-### Horizontal (Default)
-
-```tsx
-<div>
-  <h4 className="text-sm font-medium">Radix Primitives</h4>
-  <p className="text-sm text-muted-foreground">
-    An open-source UI component library.
-  </p>
-</div>
-<Separator className="my-4" />
-<div>
-  <h4 className="text-sm font-medium">Next Section</h4>
-  <p className="text-sm text-muted-foreground">More content here.</p>
-</div>
-```
-
-### Vertical
-
-```tsx
-<div className="flex h-5 items-center space-x-4 text-sm">
-  <div>Blog</div>
-  <Separator orientation="vertical" />
-  <div>Docs</div>
-  <Separator orientation="vertical" />
-  <div>Source</div>
-</div>
-```
-
-### En Navegación
-
-```tsx
-<nav className="flex items-center space-x-4 text-sm">
-  <a href="#" className="font-medium hover:underline">
-    Home
-  </a>
-  <Separator orientation="vertical" className="h-4" />
-  <a href="#" className="font-medium hover:underline">
-    About
-  </a>
-  <Separator orientation="vertical" className="h-4" />
-  <a href="#" className="font-medium hover:underline">
-    Contact
-  </a>
-</nav>
-```
-
-### En Cards
-
-```tsx
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardTitle,
-} from "@adamosuiteservices/ui/card";
-
-<Card>
-  <CardHeader>
-    <CardTitle>User Profile</CardTitle>
-  </CardHeader>
-  <CardContent className="space-y-4">
-    <div>
-      <p className="text-sm">John Doe</p>
-      <p className="text-xs text-muted-foreground">john@example.com</p>
-    </div>
-    <Separator />
-    <div className="space-y-2">
-      <div className="flex justify-between text-sm">
-        <span>Status</span>
-        <span className="text-muted-foreground">Active</span>
-      </div>
-      <div className="flex justify-between text-sm">
-        <span>Role</span>
-        <span className="text-muted-foreground">Admin</span>
-      </div>
-    </div>
-  </CardContent>
-</Card>;
-```
-
-### Con Spacing Custom
-
-```tsx
-<Separator className="my-2" />  {/* Tight */}
-<Separator className="my-4" />  {/* Normal */}
-<Separator className="my-8" />  {/* Loose */}
-```
-
-### En Listas
-
-```tsx
-const items = [
-  { id: 1, title: "First Item" },
-  { id: 2, title: "Second Item" },
-  { id: 3, title: "Third Item" },
-];
-
-<div className="space-y-0">
-  {items.map((item, index) => (
-    <div key={item.id}>
-      <div className="py-3">
-        <h4 className="text-sm font-medium">{item.title}</h4>
-      </div>
-      {index < items.length - 1 && <Separator />}
-    </div>
-  ))}
-</div>;
-```
-
-### Con Colores Custom
-
-```tsx
-<Separator className="bg-muted" />           {/* Subtle */}
-<Separator className="bg-primary h-0.5" />  {/* Accent */}
-<Separator className="bg-border" />          {/* Default */}
-```
-
-## Casos de Uso
-
-**Section dividers**: Separar secciones de contenido  
-**Navigation**: Dividir items de navegación  
-**Cards**: Separar contenido en cards  
-**Lists**: Dividir items en listas  
-**Sidebars**: Separar grupos de opciones  
-**Stats**: Dividir métricas verticalmente
-
-## Estilos Base
-
-### Estilos Horizontal
-
-- **Height**: `h-px` (1px)
-- **Width**: `w-full`
-- **Color**: `bg-border`
-
-### Estilos Vertical
-
-- **Width**: `w-px` (1px)
-- **Height**: `h-full`
-- **Color**: `bg-border`
-
-## Accesibilidad
-
-- ✅ **ARIA**: `role="separator"` si `decorative=false`
-- ✅ **Decorative**: Por defecto `decorative=true` (no anunciado por screen readers)
-- ✅ **Semantic**: Usa `decorative=false` para separadores semánticos
-
-## Notas de Implementación
-
-- **Radix UI**: Basado en `@radix-ui/react-separator`
-- **Data attributes**: `data-[orientation=horizontal|vertical]` para estilos
-- **Shrink**: `shrink-0` para evitar colapso en flex
-- **Decorative**: Por defecto no tiene rol semántico (solo visual)
-
-## Decorative vs Semantic
-
-```tsx
-{
-  /* Decorative (default) - solo visual */
-}
-<Separator />;
-
-{
-  /* Semantic - anunciado por screen readers */
-}
-<Separator decorative={false} />;
-```
-
-## Troubleshooting
-
-**No se ve**: Verifica `bg-border` o color custom aplicado  
-**Muy alto/ancho**: Horizontal usa `h-px`, vertical usa `w-px`  
-**No divide verticalmente**: Verifica `orientation="vertical"` y altura del contenedor  
-**Spacing inconsistente**: Usa `my-*` o `mx-*` para spacing uniforme
-
-## Referencias
-
-- **Radix UI Separator**: <https://www.radix-ui.com/primitives/docs/components/separator>
-- **shadcn/ui Separator**: <https://ui.shadcn.com/docs/components/separator>
+# Separator
+
+Separador visual basado en Radix UI. Divide secciones con línea horizontal o vertical, con semántica accesible.
+
+## Descripción
+
+El componente `Separator` muestra una línea divisoria visual entre secciones de contenido.
+
+## Importación
+
+```typescript
+import { Separator } from "@adamosuiteservices/ui/separator";
+```
+
+## Anatomía
+
+```tsx
+<div>
+  <div>Section 1</div>
+  <Separator />
+  <div>Section 2</div>
+</div>
+```
+
+**Componentes**: 1 (Separator)
+
+## Props
+
+| Prop          | Tipo                         | Default        | Descripción                     |
+| ------------- | ---------------------------- | -------------- | ------------------------------- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Orientación del separador       |
+| `decorative`  | `boolean`                    | `true`         | Si es decorativo (no semántico) |
+| `className`   | `string`                     | -              | Clases CSS adicionales          |
+
+## Patrones de Uso
+
+### Horizontal (Default)
+
+```tsx
+<div>
+  <h4 className="text-sm font-medium">Radix Primitives</h4>
+  <p className="text-sm text-muted-foreground">
+    An open-source UI component library.
+  </p>
+</div>
+<Separator className="my-4" />
+<div>
+  <h4 className="text-sm font-medium">Next Section</h4>
+  <p className="text-sm text-muted-foreground">More content here.</p>
+</div>
+```
+
+### Vertical
+
+```tsx
+<div className="flex h-5 items-center space-x-4 text-sm">
+  <div>Blog</div>
+  <Separator orientation="vertical" />
+  <div>Docs</div>
+  <Separator orientation="vertical" />
+  <div>Source</div>
+</div>
+```
+
+### En Navegación
+
+```tsx
+<nav className="flex items-center space-x-4 text-sm">
+  <a href="#" className="font-medium hover:underline">
+    Home
+  </a>
+  <Separator orientation="vertical" className="h-4" />
+  <a href="#" className="font-medium hover:underline">
+    About
+  </a>
+  <Separator orientation="vertical" className="h-4" />
+  <a href="#" className="font-medium hover:underline">
+    Contact
+  </a>
+</nav>
+```
+
+### En Cards
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardTitle,
+} from "@adamosuiteservices/ui/card";
+
+<Card>
+  <CardHeader>
+    <CardTitle>User Profile</CardTitle>
+  </CardHeader>
+  <CardContent className="space-y-4">
+    <div>
+      <p className="text-sm">John Doe</p>
+      <p className="text-xs text-muted-foreground">john@example.com</p>
+    </div>
+    <Separator />
+    <div className="space-y-2">
+      <div className="flex justify-between text-sm">
+        <span>Status</span>
+        <span className="text-muted-foreground">Active</span>
+      </div>
+      <div className="flex justify-between text-sm">
+        <span>Role</span>
+        <span className="text-muted-foreground">Admin</span>
+      </div>
+    </div>
+  </CardContent>
+</Card>;
+```
+
+### Con Spacing Custom
+
+```tsx
+<Separator className="my-2" />  {/* Tight */}
+<Separator className="my-4" />  {/* Normal */}
+<Separator className="my-8" />  {/* Loose */}
+```
+
+### En Listas
+
+```tsx
+const items = [
+  { id: 1, title: "First Item" },
+  { id: 2, title: "Second Item" },
+  { id: 3, title: "Third Item" },
+];
+
+<div className="space-y-0">
+  {items.map((item, index) => (
+    <div key={item.id}>
+      <div className="py-3">
+        <h4 className="text-sm font-medium">{item.title}</h4>
+      </div>
+      {index < items.length - 1 && <Separator />}
+    </div>
+  ))}
+</div>;
+```
+
+### Con Colores Custom
+
+```tsx
+<Separator className="bg-muted" />           {/* Subtle */}
+<Separator className="bg-primary h-0.5" />  {/* Accent */}
+<Separator className="bg-border" />          {/* Default */}
+```
+
+## Casos de Uso
+
+**Section dividers**: Separar secciones de contenido  
+**Navigation**: Dividir items de navegación  
+**Cards**: Separar contenido en cards  
+**Lists**: Dividir items en listas  
+**Sidebars**: Separar grupos de opciones  
+**Stats**: Dividir métricas verticalmente
+
+## Estilos Base
+
+### Estilos Horizontal
+
+- **Height**: `h-px` (1px)
+- **Width**: `w-full`
+- **Color**: `bg-border`
+
+### Estilos Vertical
+
+- **Width**: `w-px` (1px)
+- **Height**: `h-full`
+- **Color**: `bg-border`
+
+## Accesibilidad
+
+- ✅ **ARIA**: `role="separator"` si `decorative=false`
+- ✅ **Decorative**: Por defecto `decorative=true` (no anunciado por screen readers)
+- ✅ **Semantic**: Usa `decorative=false` para separadores semánticos
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-separator`
+- **Data attributes**: `data-[orientation=horizontal|vertical]` para estilos
+- **Shrink**: `shrink-0` para evitar colapso en flex
+- **Decorative**: Por defecto no tiene rol semántico (solo visual)
+
+## Decorative vs Semantic
+
+```tsx
+{
+  /* Decorative (default) - solo visual */
+}
+<Separator />;
+
+{
+  /* Semantic - anunciado por screen readers */
+}
+<Separator decorative={false} />;
+```
+
+## Troubleshooting
+
+**No se ve**: Verifica `bg-border` o color custom aplicado  
+**Muy alto/ancho**: Horizontal usa `h-px`, vertical usa `w-px`  
+**No divide verticalmente**: Verifica `orientation="vertical"` y altura del contenedor  
+**Spacing inconsistente**: Usa `my-*` o `mx-*` para spacing uniforme
+
+## Referencias
+
+- **Radix UI Separator**: <https://www.radix-ui.com/primitives/docs/components/separator>
+- **shadcn/ui Separator**: <https://ui.shadcn.com/docs/components/separator>