@adamosuiteservices/ui 2.13.3 → 2.14.0

package/docs/components/ui/toggle.md

@@ -1,237 +1,237 @@
-# Toggle
-
-Botón de dos estados (on/off). Basado en Radix UI con variantes CVA.
-
-## Descripción
-
-El componente `Toggle` es un botón de dos estados (presionado/no presionado).
-
-## Importación
-
-```typescript
-import { Toggle } from "@adamosuiteservices/ui/toggle";
-```
-
-## Anatomía
-
-```tsx
-<Toggle aria-label="Toggle italic">
-  <Icon symbol="format_italic" />
-</Toggle>
-```
-
-**Componentes**: 1 (Toggle)
-
-## Props
-
-| Prop              | Tipo                         | Descripción                   |
-| ----------------- | ---------------------------- | ----------------------------- |
-| `defaultPressed`  | `boolean`                    | Estado inicial (uncontrolled) |
-| `pressed`         | `boolean`                    | Estado controlado             |
-| `onPressedChange` | `(pressed: boolean) => void` | Callback al cambiar           |
-| `disabled`        | `boolean`                    | Deshabilita el toggle         |
-| `variant`         | `"default" \| "outline"`     | Estilo visual                 |
-| `size`            | `"sm" \| "default" \| "lg"`  | Tamaño del toggle             |
-| `className`       | `string`                     | Clases CSS adicionales        |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-import { Toggle } from "@adamosuiteservices/ui/toggle";
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Toggle aria-label="Toggle italic">
-  <Icon symbol="format_italic" />
-</Toggle>;
-```
-
-### Con Texto
-
-```tsx
-<Toggle aria-label="Toggle bold">
-  <Icon symbol="format_bold" />
-  Bold
-</Toggle>
-```
-
-### Variantes
-
-```tsx
-// Default (transparent background)
-<Toggle aria-label="Default">
-  <Icon symbol="format_italic" />
-</Toggle>
-
-// Outline (con border)
-<Toggle variant="outline" aria-label="Outline">
-  <Icon symbol="format_italic" />
-</Toggle>
-```
-
-### Tamaños
-
-```tsx
-<Toggle size="sm"><Icon symbol="format_underlined" /></Toggle>
-<Toggle size="default"><Icon symbol="format_underlined" /></Toggle>
-<Toggle size="lg"><Icon symbol="format_underlined" /></Toggle>
-```
-
-### Controlado
-
-```tsx
-import { useState } from "react";
-
-function App() {
-  const [isPressed, setIsPressed] = useState(false);
-
-  return (
-    <Toggle
-      pressed={isPressed}
-      onPressedChange={setIsPressed}
-      aria-label="Toggle bold"
-    >
-      <Icon symbol="format_bold" />
-      {isPressed ? "Bold (On)" : "Bold (Off)"}
-    </Toggle>
-  );
-}
-```
-
-### Text Editor Formatting
-
-```tsx
-function TextEditor() {
-  const [formatting, setFormatting] = useState({
-    bold: false,
-    italic: false,
-    underline: false,
-  });
-
-  return (
-    <div className="flex gap-1">
-      <Toggle
-        pressed={formatting.bold}
-        onPressedChange={(pressed) =>
-          setFormatting((prev) => ({ ...prev, bold: pressed }))
-        }
-        size="sm"
-      >
-        <Icon symbol="format_bold" />
-      </Toggle>
-      <Toggle
-        pressed={formatting.italic}
-        onPressedChange={(pressed) =>
-          setFormatting((prev) => ({ ...prev, italic: pressed }))
-        }
-        size="sm"
-      >
-        <Icon symbol="format_italic" />
-      </Toggle>
-      <Toggle
-        pressed={formatting.underline}
-        onPressedChange={(pressed) =>
-          setFormatting((prev) => ({ ...prev, underline: pressed }))
-        }
-        size="sm"
-      >
-        <Icon symbol="format_underlined" />
-      </Toggle>
-    </div>
-  );
-}
-```
-
-### Media Controls
-
-```tsx
-function MediaControls() {
-  const [media, setMedia] = useState({
-    microphone: false,
-    camera: false,
-  });
-
-  return (
-    <div className="flex gap-3">
-      <Toggle
-        pressed={media.microphone}
-        onPressedChange={(pressed) =>
-          setMedia((prev) => ({ ...prev, microphone: pressed }))
-        }
-        variant="outline"
-        className={
-          !media.microphone ? "bg-destructive text-destructive-foreground" : ""
-        }
-      >
-        <Icon symbol={media.microphone ? "mic" : "mic_off"} />
-      </Toggle>
-
-      <Toggle
-        pressed={media.camera}
-        onPressedChange={(pressed) =>
-          setMedia((prev) => ({ ...prev, camera: pressed }))
-        }
-        variant="outline"
-        className={
-          !media.camera ? "bg-destructive text-destructive-foreground" : ""
-        }
-      >
-        <Icon symbol={media.camera ? "videocam" : "videocam_off"} />
-      </Toggle>
-    </div>
-  );
-}
-```
-
-### Deshabilitado
-
-```tsx
-<Toggle disabled><Icon symbol="format_underlined" /></Toggle>
-<Toggle disabled defaultPressed><Icon symbol="format_underlined" /></Toggle>
-```
-
-## Casos de Uso
-
-**Text formatting**: Bold, italic, underline toggles  
-**Media controls**: Mic/camera on/off  
-**View options**: List/grid view toggle  
-**Preferences**: Dark mode, notifications  
-**Filters**: Show/hide options
-
-## Estilos Base
-
-- **Sizes**: `h-8 min-w-8` (sm), `h-9 min-w-9` (default), `h-10 min-w-10` (lg)
-- **State off**: `bg-transparent`
-- **State on**: `bg-accent text-accent-foreground`
-- **Hover**: `bg-muted text-muted-foreground`
-- **Outline**: `border border-input shadow-xs`
-- **Focus**: `ring-ring/50` con `ring-[3px]`
-
-## Accesibilidad
-
-- ✅ **Role**: `role="button"` con `aria-pressed`
-- ✅ **ARIA**: `aria-label` requerido para icon-only
-- ✅ **Keyboard**: Space/Enter para toggle
-- ✅ **State**: Screen readers anuncian pressed/not pressed
-- ✅ **Focus**: Focus ring visible
-
-## Notas de Implementación
-
-- **Radix UI**: Basado en `@radix-ui/react-toggle`
-- **CVA**: Variantes con class-variance-authority
-- **Data state**: `data-state="on|off"` para estilos
-- **Controlled**: Usa `pressed` + `onPressedChange`
-- **Uncontrolled**: Usa `defaultPressed`
-
-## Troubleshooting
-
-**Estado no cambia**: En modo controlado usa `pressed` + `onPressedChange`, no `defaultPressed`  
-**No accesible**: Agrega `aria-label` en toggles solo con iconos  
-**Estilo no actualiza**: Verifica `data-state="on"` aplicado cuando pressed  
-**Variant no funciona**: Usa `variant="outline"` o `variant="default"`
-
-## Referencias
-
-- **Radix UI Toggle**: <https://www.radix-ui.com/primitives/docs/components/toggle>
-- **shadcn/ui Toggle**: <https://ui.shadcn.com/docs/components/toggle>
+# Toggle
+
+Botón de dos estados (on/off). Basado en Radix UI con variantes CVA.
+
+## Descripción
+
+El componente `Toggle` es un botón de dos estados (presionado/no presionado).
+
+## Importación
+
+```typescript
+import { Toggle } from "@adamosuiteservices/ui/toggle";
+```
+
+## Anatomía
+
+```tsx
+<Toggle aria-label="Toggle italic">
+  <Icon symbol="format_italic" />
+</Toggle>
+```
+
+**Componentes**: 1 (Toggle)
+
+## Props
+
+| Prop              | Tipo                         | Descripción                   |
+| ----------------- | ---------------------------- | ----------------------------- |
+| `defaultPressed`  | `boolean`                    | Estado inicial (uncontrolled) |
+| `pressed`         | `boolean`                    | Estado controlado             |
+| `onPressedChange` | `(pressed: boolean) => void` | Callback al cambiar           |
+| `disabled`        | `boolean`                    | Deshabilita el toggle         |
+| `variant`         | `"default" \| "outline"`     | Estilo visual                 |
+| `size`            | `"sm" \| "default" \| "lg"`  | Tamaño del toggle             |
+| `className`       | `string`                     | Clases CSS adicionales        |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Toggle } from "@adamosuiteservices/ui/toggle";
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Toggle aria-label="Toggle italic">
+  <Icon symbol="format_italic" />
+</Toggle>;
+```
+
+### Con Texto
+
+```tsx
+<Toggle aria-label="Toggle bold">
+  <Icon symbol="format_bold" />
+  Bold
+</Toggle>
+```
+
+### Variantes
+
+```tsx
+// Default (transparent background)
+<Toggle aria-label="Default">
+  <Icon symbol="format_italic" />
+</Toggle>
+
+// Outline (con border)
+<Toggle variant="outline" aria-label="Outline">
+  <Icon symbol="format_italic" />
+</Toggle>
+```
+
+### Tamaños
+
+```tsx
+<Toggle size="sm"><Icon symbol="format_underlined" /></Toggle>
+<Toggle size="default"><Icon symbol="format_underlined" /></Toggle>
+<Toggle size="lg"><Icon symbol="format_underlined" /></Toggle>
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <Toggle
+      pressed={isPressed}
+      onPressedChange={setIsPressed}
+      aria-label="Toggle bold"
+    >
+      <Icon symbol="format_bold" />
+      {isPressed ? "Bold (On)" : "Bold (Off)"}
+    </Toggle>
+  );
+}
+```
+
+### Text Editor Formatting
+
+```tsx
+function TextEditor() {
+  const [formatting, setFormatting] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+  });
+
+  return (
+    <div className="flex gap-1">
+      <Toggle
+        pressed={formatting.bold}
+        onPressedChange={(pressed) =>
+          setFormatting((prev) => ({ ...prev, bold: pressed }))
+        }
+        size="sm"
+      >
+        <Icon symbol="format_bold" />
+      </Toggle>
+      <Toggle
+        pressed={formatting.italic}
+        onPressedChange={(pressed) =>
+          setFormatting((prev) => ({ ...prev, italic: pressed }))
+        }
+        size="sm"
+      >
+        <Icon symbol="format_italic" />
+      </Toggle>
+      <Toggle
+        pressed={formatting.underline}
+        onPressedChange={(pressed) =>
+          setFormatting((prev) => ({ ...prev, underline: pressed }))
+        }
+        size="sm"
+      >
+        <Icon symbol="format_underlined" />
+      </Toggle>
+    </div>
+  );
+}
+```
+
+### Media Controls
+
+```tsx
+function MediaControls() {
+  const [media, setMedia] = useState({
+    microphone: false,
+    camera: false,
+  });
+
+  return (
+    <div className="flex gap-3">
+      <Toggle
+        pressed={media.microphone}
+        onPressedChange={(pressed) =>
+          setMedia((prev) => ({ ...prev, microphone: pressed }))
+        }
+        variant="outline"
+        className={
+          !media.microphone ? "bg-destructive text-destructive-foreground" : ""
+        }
+      >
+        <Icon symbol={media.microphone ? "mic" : "mic_off"} />
+      </Toggle>
+
+      <Toggle
+        pressed={media.camera}
+        onPressedChange={(pressed) =>
+          setMedia((prev) => ({ ...prev, camera: pressed }))
+        }
+        variant="outline"
+        className={
+          !media.camera ? "bg-destructive text-destructive-foreground" : ""
+        }
+      >
+        <Icon symbol={media.camera ? "videocam" : "videocam_off"} />
+      </Toggle>
+    </div>
+  );
+}
+```
+
+### Deshabilitado
+
+```tsx
+<Toggle disabled><Icon symbol="format_underlined" /></Toggle>
+<Toggle disabled defaultPressed><Icon symbol="format_underlined" /></Toggle>
+```
+
+## Casos de Uso
+
+**Text formatting**: Bold, italic, underline toggles  
+**Media controls**: Mic/camera on/off  
+**View options**: List/grid view toggle  
+**Preferences**: Dark mode, notifications  
+**Filters**: Show/hide options
+
+## Estilos Base
+
+- **Sizes**: `h-8 min-w-8` (sm), `h-9 min-w-9` (default), `h-10 min-w-10` (lg)
+- **State off**: `bg-transparent`
+- **State on**: `bg-accent text-accent-foreground`
+- **Hover**: `bg-muted text-muted-foreground`
+- **Outline**: `border border-input shadow-xs`
+- **Focus**: `ring-ring/50` con `ring-[3px]`
+
+## Accesibilidad
+
+- ✅ **Role**: `role="button"` con `aria-pressed`
+- ✅ **ARIA**: `aria-label` requerido para icon-only
+- ✅ **Keyboard**: Space/Enter para toggle
+- ✅ **State**: Screen readers anuncian pressed/not pressed
+- ✅ **Focus**: Focus ring visible
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-toggle`
+- **CVA**: Variantes con class-variance-authority
+- **Data state**: `data-state="on|off"` para estilos
+- **Controlled**: Usa `pressed` + `onPressedChange`
+- **Uncontrolled**: Usa `defaultPressed`
+
+## Troubleshooting
+
+**Estado no cambia**: En modo controlado usa `pressed` + `onPressedChange`, no `defaultPressed`  
+**No accesible**: Agrega `aria-label` en toggles solo con iconos  
+**Estilo no actualiza**: Verifica `data-state="on"` aplicado cuando pressed  
+**Variant no funciona**: Usa `variant="outline"` o `variant="default"`
+
+## Referencias
+
+- **Radix UI Toggle**: <https://www.radix-ui.com/primitives/docs/components/toggle>
+- **shadcn/ui Toggle**: <https://ui.shadcn.com/docs/components/toggle>