@adamosuiteservices/ui 1.8.13 → 1.9.14

package/docs/components/ui/tabs.md

@@ -1,122 +1,122 @@
-# Tabs
-
-Pestañas con background. Basado en Radix UI.
-
-## Descripción
-
-El componente `Tabs` permite organizar contenido en secciones que se pueden alternar.
-
-## Importación
-
-```typescript
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@adamosuiteservices/ui/tabs";
-```
-
-## Anatomía
-
-```tsx
-<Tabs defaultValue="account">
-  <TabsList>
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">Account settings content</TabsContent>
-  <TabsContent value="password">Password settings content</TabsContent>
-</Tabs>
-```
-
-**Componentes**: 4 (Tabs, TabsList, TabsTrigger, TabsContent)
-
-## Props
-
-### Tabs (Root)
-
-| Prop            | Tipo                      | Descripción                |
-| --------------- | ------------------------- | -------------------------- |
-| `defaultValue`  | `string`                  | Tab inicial (uncontrolled) |
-| `value`         | `string`                  | Tab controlado             |
-| `onValueChange` | `(value: string) => void` | Callback al cambiar        |
-
-### TabsTrigger
-
-| Prop       | Tipo      | Descripción         |
-| ---------- | --------- | ------------------- |
-| `value`    | `string`  | Valor único del tab |
-| `disabled` | `boolean` | Deshabilitar tab    |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<Tabs defaultValue="account">
-  <TabsList>
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">Account settings content</TabsContent>
-  <TabsContent value="password">Password settings content</TabsContent>
-</Tabs>
-```
-
-### Controlado
-
-```tsx
-const [activeTab, setActiveTab] = useState("overview");
-
-<Tabs value={activeTab} onValueChange={setActiveTab}>
-  <TabsList>
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="analytics">Analytics</TabsTrigger>
-  </TabsList>
-  <TabsContent value="overview">Overview content</TabsContent>
-  <TabsContent value="analytics">Analytics content</TabsContent>
-</Tabs>;
-```
-
-### Con Iconos
-
-```tsx
-import { UserIcon, KeyIcon, HomeIcon, SettingsIcon } from "lucide-react";
-
-<TabsList>
-  <TabsTrigger value="home">
-    <HomeIcon />
-    Home
-  </TabsTrigger>
-  <TabsTrigger value="settings">
-    <SettingsIcon />
-    Settings
-  </TabsTrigger>
-  <TabsTrigger value="profile">
-    <UserIcon />
-    Profile
-  </TabsTrigger>
-  <TabsTrigger value="security">
-    <KeyIcon />
-    Security
-  </TabsTrigger>
-</TabsList>;
-```
-
-## Casos de Uso
-
-**Settings**: Secciones de configuración  
-**Navigation**: Navegación por secciones  
-**Data views**: Diferentes vistas de datos
-
-## Estilos Base
-
-- **List**: `bg-muted rounded-lg h-9`
-- **Trigger active**: `bg-primary text-primary-foreground shadow-sm`
-- **Trigger**: `rounded-md px-2 py-1 font-semibold`
-
-## Referencias
-
-- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
-- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>
+# Tabs
+
+Pestañas con background. Basado en Radix UI.
+
+## Descripción
+
+El componente `Tabs` permite organizar contenido en secciones que se pueden alternar.
+
+## Importación
+
+```typescript
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@adamosuiteservices/ui/tabs";
+```
+
+## Anatomía
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings content</TabsContent>
+  <TabsContent value="password">Password settings content</TabsContent>
+</Tabs>
+```
+
+**Componentes**: 4 (Tabs, TabsList, TabsTrigger, TabsContent)
+
+## Props
+
+### Tabs (Root)
+
+| Prop            | Tipo                      | Descripción                |
+| --------------- | ------------------------- | -------------------------- |
+| `defaultValue`  | `string`                  | Tab inicial (uncontrolled) |
+| `value`         | `string`                  | Tab controlado             |
+| `onValueChange` | `(value: string) => void` | Callback al cambiar        |
+
+### TabsTrigger
+
+| Prop       | Tipo      | Descripción         |
+| ---------- | --------- | ------------------- |
+| `value`    | `string`  | Valor único del tab |
+| `disabled` | `boolean` | Deshabilitar tab    |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings content</TabsContent>
+  <TabsContent value="password">Password settings content</TabsContent>
+</Tabs>
+```
+
+### Controlado
+
+```tsx
+const [activeTab, setActiveTab] = useState("overview");
+
+<Tabs value={activeTab} onValueChange={setActiveTab}>
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+  <TabsContent value="analytics">Analytics content</TabsContent>
+</Tabs>;
+```
+
+### Con Iconos
+
+```tsx
+import { UserIcon, KeyIcon, HomeIcon, SettingsIcon } from "lucide-react";
+
+<TabsList>
+  <TabsTrigger value="home">
+    <HomeIcon />
+    Home
+  </TabsTrigger>
+  <TabsTrigger value="settings">
+    <SettingsIcon />
+    Settings
+  </TabsTrigger>
+  <TabsTrigger value="profile">
+    <UserIcon />
+    Profile
+  </TabsTrigger>
+  <TabsTrigger value="security">
+    <KeyIcon />
+    Security
+  </TabsTrigger>
+</TabsList>;
+```
+
+## Casos de Uso
+
+**Settings**: Secciones de configuración  
+**Navigation**: Navegación por secciones  
+**Data views**: Diferentes vistas de datos
+
+## Estilos Base
+
+- **List**: `bg-muted rounded-lg h-9`
+- **Trigger active**: `bg-primary text-primary-foreground shadow-sm`
+- **Trigger**: `rounded-md px-2 py-1 font-semibold`
+
+## Referencias
+
+- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
+- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>