@adamosuiteservices/ui 2.13.3 → 2.14.0

package/docs/components/ui/switch.md

@@ -1,408 +1,408 @@
-# 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 { Icon } from "@adamosuiteservices/ui/icon";
-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">
-        <Icon
-          symbol="notifications"
-          className="text-lg 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">
-        <Icon symbol="dark_mode" className="text-lg 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 { Icon } from "@adamosuiteservices/ui/icon";
-
-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">
-            <Icon symbol="flight" className="text-2xl 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">
-            <Icon symbol="wifi" className="text-2xl 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">
-            <Icon
-              symbol="bluetooth"
-              className="text-2xl 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 { Icon } from "@adamosuiteservices/ui/icon";
-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">
-          <Icon symbol="shield" className="text-xl" />
-          <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>
+# 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 { Icon } from "@adamosuiteservices/ui/icon";
+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">
+        <Icon
+          symbol="notifications"
+          className="text-lg 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">
+        <Icon symbol="dark_mode" className="text-lg 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 { Icon } from "@adamosuiteservices/ui/icon";
+
+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">
+            <Icon symbol="flight" className="text-2xl 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">
+            <Icon symbol="wifi" className="text-2xl 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">
+            <Icon
+              symbol="bluetooth"
+              className="text-2xl 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 { Icon } from "@adamosuiteservices/ui/icon";
+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">
+          <Icon symbol="shield" className="text-xl" />
+          <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>