@adamosuiteservices/ui 2.13.3 → 2.14.0

package/docs/components/ui/tabs-underline.md

@@ -1,106 +1,106 @@
-# Tabs Underline
-
-Pestañas con underline. Variante de tabs sin background.
-
-## Descripción
-
-Variante del componente Tabs con estilo de subrayado en lugar de fondo.
-
-## Importación
-
-```typescript
-import {
-  TabsUnderline,
-  TabsUnderlineList,
-  TabsUnderlineTrigger,
-  TabsUnderlineContent,
-} from "@adamosuiteservices/ui/tabs-underline";
-```
-
-## Anatomía
-
-```tsx
-<TabsUnderline defaultValue="account">
-  <TabsUnderlineList>
-    <TabsUnderlineTrigger value="account">Account</TabsUnderlineTrigger>
-    <TabsUnderlineTrigger value="password">Password</TabsUnderlineTrigger>
-  </TabsUnderlineList>
-  <TabsUnderlineContent value="account">Account content</TabsUnderlineContent>
-  <TabsUnderlineContent value="password">Password content</TabsUnderlineContent>
-</TabsUnderline>
-```
-
-**Componentes**: 4 (TabsUnderline, TabsUnderlineList, TabsUnderlineTrigger, TabsUnderlineContent)
-
-## Props
-
-Idéntico a `tabs` component. Ver documentación de tabs para props completas.
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<TabsUnderline defaultValue="overview">
-  <TabsUnderlineList>
-    <TabsUnderlineTrigger value="overview">Overview</TabsUnderlineTrigger>
-    <TabsUnderlineTrigger value="analytics">Analytics</TabsUnderlineTrigger>
-    <TabsUnderlineTrigger value="reports">Reports</TabsUnderlineTrigger>
-  </TabsUnderlineList>
-  <TabsUnderlineContent value="overview">Overview content</TabsUnderlineContent>
-  <TabsUnderlineContent value="analytics">
-    Analytics content
-  </TabsUnderlineContent>
-  <TabsUnderlineContent value="reports">Reports content</TabsUnderlineContent>
-</TabsUnderline>
-```
-
-### Con Iconos
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<TabsUnderlineList>
-  <TabsUnderlineTrigger value="charts">
-    <Icon symbol="bar_chart" />
-    Charts
-  </TabsUnderlineTrigger>
-  <TabsUnderlineTrigger value="table">
-    <Icon symbol="table" />
-    Table
-  </TabsUnderlineTrigger>
-  <TabsUnderlineTrigger value="report">
-    <Icon symbol="description" />
-    Report
-  </TabsUnderlineTrigger>
-</TabsUnderlineList>;
-```
-
-## Diferencias con Tabs Regular
-
-- Subrayado animado en lugar de fondo
-- Estilo más minimalista
-- API idéntica a Tabs regular
-
-## Diferencia vs Tabs
-
-**tabs**: Background `bg-muted` con `rounded-lg`, active usa `bg-primary`  
-**tabs-underline**: Sin background, active usa `border-b-2 border-b-primary`
-
-## Casos de Uso
-
-**Navigation**: Navegación principal  
-**Content sections**: Secciones de contenido  
-**Data views**: Diferentes visualizaciones
-
-## Estilos Base
-
-- **List**: Sin background, `h-9`
-- **Trigger active**: `border-b-2 border-b-primary text-primary`
-- **Trigger inactive**: `border-b-2 border-b-transparent`
-
-## Referencias
-
-- Ver [Tabs](./tabs.md) para documentación completa
-- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
-- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>
+# Tabs Underline
+
+Pestañas con underline. Variante de tabs sin background.
+
+## Descripción
+
+Variante del componente Tabs con estilo de subrayado en lugar de fondo.
+
+## Importación
+
+```typescript
+import {
+  TabsUnderline,
+  TabsUnderlineList,
+  TabsUnderlineTrigger,
+  TabsUnderlineContent,
+} from "@adamosuiteservices/ui/tabs-underline";
+```
+
+## Anatomía
+
+```tsx
+<TabsUnderline defaultValue="account">
+  <TabsUnderlineList>
+    <TabsUnderlineTrigger value="account">Account</TabsUnderlineTrigger>
+    <TabsUnderlineTrigger value="password">Password</TabsUnderlineTrigger>
+  </TabsUnderlineList>
+  <TabsUnderlineContent value="account">Account content</TabsUnderlineContent>
+  <TabsUnderlineContent value="password">Password content</TabsUnderlineContent>
+</TabsUnderline>
+```
+
+**Componentes**: 4 (TabsUnderline, TabsUnderlineList, TabsUnderlineTrigger, TabsUnderlineContent)
+
+## Props
+
+Idéntico a `tabs` component. Ver documentación de tabs para props completas.
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<TabsUnderline defaultValue="overview">
+  <TabsUnderlineList>
+    <TabsUnderlineTrigger value="overview">Overview</TabsUnderlineTrigger>
+    <TabsUnderlineTrigger value="analytics">Analytics</TabsUnderlineTrigger>
+    <TabsUnderlineTrigger value="reports">Reports</TabsUnderlineTrigger>
+  </TabsUnderlineList>
+  <TabsUnderlineContent value="overview">Overview content</TabsUnderlineContent>
+  <TabsUnderlineContent value="analytics">
+    Analytics content
+  </TabsUnderlineContent>
+  <TabsUnderlineContent value="reports">Reports content</TabsUnderlineContent>
+</TabsUnderline>
+```
+
+### Con Iconos
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<TabsUnderlineList>
+  <TabsUnderlineTrigger value="charts">
+    <Icon symbol="bar_chart" />
+    Charts
+  </TabsUnderlineTrigger>
+  <TabsUnderlineTrigger value="table">
+    <Icon symbol="table" />
+    Table
+  </TabsUnderlineTrigger>
+  <TabsUnderlineTrigger value="report">
+    <Icon symbol="description" />
+    Report
+  </TabsUnderlineTrigger>
+</TabsUnderlineList>;
+```
+
+## Diferencias con Tabs Regular
+
+- Subrayado animado en lugar de fondo
+- Estilo más minimalista
+- API idéntica a Tabs regular
+
+## Diferencia vs Tabs
+
+**tabs**: Background `bg-muted` con `rounded-lg`, active usa `bg-primary`  
+**tabs-underline**: Sin background, active usa `border-b-2 border-b-primary`
+
+## Casos de Uso
+
+**Navigation**: Navegación principal  
+**Content sections**: Secciones de contenido  
+**Data views**: Diferentes visualizaciones
+
+## Estilos Base
+
+- **List**: Sin background, `h-9`
+- **Trigger active**: `border-b-2 border-b-primary text-primary`
+- **Trigger inactive**: `border-b-2 border-b-transparent`
+
+## Referencias
+
+- Ver [Tabs](./tabs.md) para documentación completa
+- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
+- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>

package/docs/components/ui/tabs.md

@@ -1,122 +1,125 @@
-# 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 { Icon } from "@adamosuiteservices/ui/icon";
-
-<TabsList>
-  <TabsTrigger value="home">
-    <Icon symbol="home" />
-    Home
-  </TabsTrigger>
-  <TabsTrigger value="settings">
-    <Icon symbol="settings" />
-    Settings
-  </TabsTrigger>
-  <TabsTrigger value="profile">
-    <Icon symbol="person" />
-    Profile
-  </TabsTrigger>
-  <TabsTrigger value="security">
-    <Icon symbol="key" />
-    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 { Icon } from "@adamosuiteservices/ui/icon";
+
+<TabsList>
+  <TabsTrigger value="home">
+    <Icon symbol="home" />
+    Home
+  </TabsTrigger>
+  <TabsTrigger value="settings">
+    <Icon symbol="settings" />
+    Settings
+  </TabsTrigger>
+  <TabsTrigger value="profile">
+    <Icon symbol="person" />
+    Profile
+  </TabsTrigger>
+  <TabsTrigger value="security">
+    <Icon symbol="key" />
+    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**: `h-10 bg-muted border rounded-[12px] p-px`
+- **Trigger**: `h-[calc(100%-1px)] rounded-[10px] px-4 py-2.5 font-semibold`
+- **Trigger active**: `bg-primary text-primary-foreground shadow-sm`
+- **Gap**: `gap-2` entre iconos y texto
+
+**Nota**: Los tabs ahora tienen la misma altura que los botones e inputs (40px) para mantener consistencia visual en formularios y layouts.
+
+## Referencias
+
+- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
+- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>