@adamosuiteservices/ui 1.2.5 → 1.4.5

package/docs/components/ui/switch.md

@@ -0,0 +1,402 @@
+# Switch
+
+Toggle binario on/off. Basado en Radix UI con animación de thumb.
+
+## Descripción
+
+El componente `Switch` es un control de toggle que representa un estado booleano (on/off).
+
+## Importación
+
+```typescript
+import { Switch } from "@adamosuiteservices/ui/switch";
+```
+
+## Anatomía
+
+```tsx
+<Switch />
+```
+
+**Componentes**: 1 (Switch) con thumb interno
+
+## Props
+
+| Prop              | Tipo                         | Descripción                   |
+| ----------------- | ---------------------------- | ----------------------------- |
+| `defaultChecked`  | `boolean`                    | Estado inicial (uncontrolled) |
+| `checked`         | `boolean`                    | Estado controlado             |
+| `onCheckedChange` | `(checked: boolean) => void` | Callback al cambiar           |
+| `disabled`        | `boolean`                    | Deshabilita el switch         |
+| `required`        | `boolean`                    | Campo requerido               |
+| `name`            | `string`                     | Nombre (formularios)          |
+| `value`           | `string`                     | Valor (formularios)           |
+| `id`              | `string`                     | ID para asociar con Label     |
+| `className`       | `string`                     | Clases CSS adicionales        |
+
+**Nota**: Acepta todas las props de Radix UI Switch.Root
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Switch } from "@adamosuiteservices/ui/switch";
+
+<Switch />;
+```
+
+### Con Label
+
+```tsx
+import { Label } from "@adamosuiteservices/ui/label";
+
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label htmlFor="airplane-mode">Airplane Mode</Label>
+</div>;
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id="controlled-switch"
+        checked={isChecked}
+        onCheckedChange={setIsChecked}
+      />
+      <Label htmlFor="controlled-switch">
+        Notifications {isChecked ? "enabled" : "disabled"}
+      </Label>
+    </div>
+  );
+}
+```
+
+### Con Iconos y Badges
+
+```tsx
+import { BellIcon, MoonIcon, WifiIcon } from "lucide-react";
+import { Badge } from "@adamosuiteservices/ui/badge";
+
+function Settings() {
+  const [settings, setSettings] = useState({
+    notifications: true,
+    darkMode: false,
+    wifi: true,
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-3">
+        <BellIcon className="size-4 text-muted-foreground" />
+        <Switch
+          checked={settings.notifications}
+          onCheckedChange={(checked) =>
+            setSettings((prev) => ({ ...prev, notifications: checked }))
+          }
+        />
+        <Label>Notifications</Label>
+        <Badge variant={settings.notifications ? "default" : "secondary"}>
+          {settings.notifications ? "On" : "Off"}
+        </Badge>
+      </div>
+
+      <div className="flex items-center space-x-3">
+        <MoonIcon className="size-4 text-muted-foreground" />
+        <Switch
+          checked={settings.darkMode}
+          onCheckedChange={(checked) =>
+            setSettings((prev) => ({ ...prev, darkMode: checked }))
+          }
+        />
+        <Label>Dark Mode</Label>
+        <Badge variant={settings.darkMode ? "default" : "secondary"}>
+          {settings.darkMode ? "On" : "Off"}
+        </Badge>
+      </div>
+    </div>
+  );
+}
+```
+
+### Device Controls
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@adamosuiteservices/ui/card";
+import { AirplayIcon, WifiIcon, BluetoothIcon } from "lucide-react";
+
+function ControlCenter() {
+  const [deviceSettings, setDeviceSettings] = useState({
+    airplaneMode: false,
+    wifi: true,
+    bluetooth: false,
+  });
+
+  const updateSetting = (key: keyof typeof deviceSettings) => {
+    setDeviceSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Control Center</CardTitle>
+        <CardDescription>Quick access to device settings</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col items-center space-y-2 p-3 border rounded-lg">
+            <AirplayIcon className="size-6 text-muted-foreground" />
+            <span className="text-sm font-medium">Airplane</span>
+            <Switch
+              checked={deviceSettings.airplaneMode}
+              onCheckedChange={() => updateSetting("airplaneMode")}
+              className="scale-75"
+            />
+          </div>
+
+          <div className="flex flex-col items-center space-y-2 p-3 border rounded-lg">
+            <WifiIcon className="size-6 text-muted-foreground" />
+            <span className="text-sm font-medium">Wi-Fi</span>
+            <Switch
+              checked={deviceSettings.wifi}
+              onCheckedChange={() => updateSetting("wifi")}
+              className="scale-75"
+            />
+          </div>
+
+          <div className="flex flex-col items-center space-y-2 p-3 border rounded-lg">
+            <BluetoothIcon className="size-6 text-muted-foreground" />
+            <span className="text-sm font-medium">Bluetooth</span>
+            <Switch
+              checked={deviceSettings.bluetooth}
+              onCheckedChange={() => updateSetting("bluetooth")}
+              className="scale-75"
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Privacy Settings
+
+```tsx
+import { ShieldIcon } from "lucide-react";
+import { Button } from "@adamosuiteservices/ui/button";
+
+function PrivacySettings() {
+  const [privacySettings, setPrivacySettings] = useState({
+    locationServices: true,
+    analyticsData: false,
+    crashReports: true,
+    personalizedAds: false,
+  });
+
+  return (
+    <Card className="w-full max-w-lg">
+      <CardHeader>
+        <CardTitle className="flex items-center space-x-2">
+          <ShieldIcon className="size-5" />
+          <span>Privacy & Security</span>
+        </CardTitle>
+        <CardDescription>
+          Control how your data is collected and used
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="space-y-4">
+          <div className="flex items-start justify-between space-x-4">
+            <div className="flex-1">
+              <Label className="text-sm font-medium">Location Services</Label>
+              <p className="text-xs text-muted-foreground mt-1">
+                Allow apps to access your location for personalized experiences
+              </p>
+            </div>
+            <Switch
+              checked={privacySettings.locationServices}
+              onCheckedChange={(checked) =>
+                setPrivacySettings((prev) => ({
+                  ...prev,
+                  locationServices: checked,
+                }))
+              }
+            />
+          </div>
+
+          <div className="flex items-start justify-between space-x-4">
+            <div className="flex-1">
+              <Label className="text-sm font-medium">
+                Analytics & Diagnostics
+              </Label>
+              <p className="text-xs text-muted-foreground mt-1">
+                Share analytics data to help improve our products
+              </p>
+            </div>
+            <Switch
+              checked={privacySettings.analyticsData}
+              onCheckedChange={(checked) =>
+                setPrivacySettings((prev) => ({
+                  ...prev,
+                  analyticsData: checked,
+                }))
+              }
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end space-x-2 pt-4 border-t">
+          <Button variant="outline" size="sm">
+            Reset to Defaults
+          </Button>
+          <Button size="sm">Save Changes</Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Feature Toggles
+
+```tsx
+function FeatureToggles() {
+  const [features, setFeatures] = useState({
+    newDashboard: false,
+    betaFeatures: false,
+    experimentalUI: false,
+  });
+
+  const updateFeature = (key: keyof typeof features) => {
+    setFeatures((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <Card className="w-full max-w-lg">
+      <CardHeader>
+        <CardTitle>Feature Toggles</CardTitle>
+        <CardDescription>
+          Enable or disable experimental features
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-start justify-between space-x-4 p-3 border rounded-lg">
+          <div className="flex-1 space-y-1">
+            <div className="flex items-center space-x-2">
+              <Label className="text-sm font-medium">New Dashboard</Label>
+              <Badge variant="default" className="text-xs">
+                New
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Try our redesigned dashboard interface
+            </p>
+          </div>
+          <Switch
+            checked={features.newDashboard}
+            onCheckedChange={() => updateFeature("newDashboard")}
+          />
+        </div>
+
+        <div className="flex items-start justify-between space-x-4 p-3 border rounded-lg">
+          <div className="flex-1 space-y-1">
+            <div className="flex items-center space-x-2">
+              <Label className="text-sm font-medium">Beta Features</Label>
+              <Badge variant="secondary" className="text-xs">
+                Beta
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Access features currently in beta testing
+            </p>
+          </div>
+          <Switch
+            checked={features.betaFeatures}
+            onCheckedChange={() => updateFeature("betaFeatures")}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Deshabilitado
+
+```tsx
+<div className="space-y-4">
+  <div className="flex items-center space-x-2">
+    <Switch disabled />
+    <Label className="text-muted-foreground">Disabled (off)</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <Switch disabled checked />
+    <Label className="text-muted-foreground">Disabled (on)</Label>
+  </div>
+</div>
+```
+
+## Casos de Uso
+
+**Settings**: On/off toggles para configuración  
+**Feature flags**: Activar/desactivar features  
+**Notifications**: Habilitar/deshabilitar notificaciones  
+**Privacy**: Controles de privacidad y permisos  
+**Device controls**: Wi-Fi, Bluetooth, Airplane mode  
+**Filters**: Mostrar/ocultar contenido
+
+## Estilos Base
+
+- **Size**: `h-5 w-8`
+- **Checked bg**: `bg-primary`
+- **Unchecked bg**: `bg-input` (dark: `bg-input/80`)
+- **Thumb**: `size-4` con `bg-background`
+- **Thumb checked**: `translate-x-[calc(100%-2px)]`
+- **Thumb unchecked**: `translate-x-0`
+- **Focus**: `ring-ring/50` con `ring-[3px]`
+- **Transition**: `transition-all` en thumb y background
+
+## Accesibilidad
+
+- ✅ **Role**: `role="switch"` con `aria-checked`
+- ✅ **Keyboard**: Space/Enter para toggle
+- ✅ **Focus**: Focus ring visible
+- ✅ **Label**: Asociar con `htmlFor` e `id`
+- ✅ **State**: Screen readers anuncian checked/unchecked
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-switch`
+- **Peer class**: Usa `peer` para estilos relacionados con Label
+- **Data states**: `data-state="checked|unchecked"` para estilos
+- **Controlled**: Usa `checked` + `onCheckedChange`
+- **Uncontrolled**: Usa `defaultChecked`
+- **Dark mode**: Thumb color cambia automáticamente
+
+## Troubleshooting
+
+**No cambia estado**: En modo controlado usa `checked` + `onCheckedChange`, no `defaultChecked`  
+**Label no clickeable**: Asegura `htmlFor` en Label coincida con `id` del Switch  
+**Thumb no anima**: Verifica que estilos de `transition-transform` no estén sobrescritos  
+**Color incorrecto**: Switch usa `bg-primary` checked, `bg-input` unchecked  
+**Disabled no funciona**: Prop `disabled` deshabilita interacción
+
+## Referencias
+
+- **Radix UI Switch**: <https://www.radix-ui.com/primitives/docs/components/switch>
+- **shadcn/ui Switch**: <https://ui.shadcn.com/docs/components/switch>

package/docs/components/ui/table.md

@@ -0,0 +1,183 @@
+# Table
+
+Tabla HTML semántica con estilos. 8 componentes para estructura completa.
+
+## Descripción
+
+El componente `Table` muestra datos en formato tabular.
+
+## Importación
+
+```typescript
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableFooter,
+} from "@adamosuiteservices/ui/table";
+```
+
+## Anatomía
+
+```tsx
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>Credit Card</TableCell>
+      <TableCell className="text-right">$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={3}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+**Componentes**: 8 (Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption)
+
+## Props
+
+Todos los componentes aceptan sus props HTML estándar más `className` para personalización.
+
+## Patrones de Uso
+
+### Tabla Simple
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>$250.00</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>INV002</TableCell>
+      <TableCell>Pending</TableCell>
+      <TableCell>$150.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Con Footer
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Item</TableHead>
+      <TableHead>Quantity</TableHead>
+      <TableHead className="text-right">Price</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Product A</TableCell>
+      <TableCell>10</TableCell>
+      <TableCell className="text-right">$100.00</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={2}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+### Con Caption
+
+```tsx
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Con Datos Dinámicos
+
+```tsx
+const invoices = [
+  { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+  { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+];
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    {invoices.map((invoice) => (
+      <TableRow key={invoice.id}>
+        <TableCell>{invoice.id}</TableCell>
+        <TableCell>{invoice.status}</TableCell>
+        <TableCell>{invoice.method}</TableCell>
+        <TableCell className="text-right">{invoice.amount}</TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>;
+```
+
+## Casos de Uso
+
+**Data tables**: Listados de datos  
+**Invoices**: Facturas  
+**Users**: Lista de usuarios  
+**Reports**: Reportes tabulares
+
+## Estilos Base
+
+- **Container**: `rounded-xl border` con `overflow-x-auto`
+- **Head**: `bg-neutrals-50 text-neutrals-500 uppercase`
+- **Row hover**: `hover:bg-muted/50`
+- **Cell**: `p-4 text-neutrals-500`
+
+## Referencias
+
+- **shadcn/ui Table**: <https://ui.shadcn.com/docs/components/table>

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

@@ -0,0 +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 { BarChartIcon, TableIcon, FileTextIcon } from "lucide-react";
+
+<TabsUnderlineList>
+  <TabsUnderlineTrigger value="charts">
+    <BarChartIcon />
+    Charts
+  </TabsUnderlineTrigger>
+  <TabsUnderlineTrigger value="table">
+    <TableIcon />
+    Table
+  </TabsUnderlineTrigger>
+  <TabsUnderlineTrigger value="report">
+    <FileTextIcon />
+    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>