toggle

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/toggle/Toggle.astro directly.
3/**
4 * @component Toggle
5 * @title Toggle
6 * @description A two-state button that can be either on or off.
7 *
8 * @preview
9 *
10 * <Toggle aria-label="Toggle bookmark" variant="outline">
11 *   <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
12 *   Bookmark
13 * </Toggle>
14 *
15 * @usage
16 *
17 * ```astro nocollapse
18 * ---
19 * import { Toggle } from '@bejamas/ui/components/toggle';
20 * import { BoldIcon } from '@lucide/astro';
21 * ---
22 *
23 * <Toggle aria-label="Toggle bold">
24 *   <BoldIcon />
25 * </Toggle>
26 * ```
27 *
28 * @api
29 *
30 * ### Events
31 *
32 * | Event | Detail | Description |
33 * |-------|--------|-------------|
34 * | `toggle:change` | `{ pressed: boolean }` | Fired when the toggle state changes |
35 *
36 * ### Programmatic Control
37 *
38 * ```js nocollapse
39 * // Set toggle state programmatically
40 * element.dispatchEvent(new CustomEvent('toggle:set', { detail: { value: true } }));
41 * ```
42 *
43 * ### Data Attributes
44 *
45 * | Attribute | Element | Description |
46 * |-----------|---------|-------------|
47 * | `data-state` | toggle | Current state: `on` or `off` |
48 * | `data-disabled` | toggle | Present when toggle is disabled |
49 *
50 * @examples
51 *
52 * ### Outline
53 *
54 * <div class="flex items-center gap-2">
55 *   <Toggle variant="outline" aria-label="Toggle bold">
56 *     <BoldIcon />
57 *     Bold
58 *   </Toggle>
59 *   <Toggle variant="outline" aria-label="Toggle italic">
60 *     <ItalicIcon />
61 *     Italic
62 *   </Toggle>
63 * </div>
64 *
65 * ### With Text
66 *
67 * <Toggle variant="outline" aria-label="Toggle italic">
68 *   <ItalicIcon />
69 *   Italic
70 * </Toggle>
71 *
72 * ### Sizes
73 *
74 * <div class="flex items-center gap-2">
75 *   <Toggle size="sm" variant="outline" aria-label="Toggle small">
76 *     Small
77 *   </Toggle>
78 *   <Toggle size="default" variant="outline" aria-label="Toggle default">
79 *     Default
80 *   </Toggle>
81 *   <Toggle size="lg" variant="outline" aria-label="Toggle large">
82 *     Large
83 *   </Toggle>
84 * </div>
85 *
86 * ### Disabled
87 *
88 * <div class="flex items-center gap-2">
89 *   <Toggle disabled aria-label="Toggle bold">
90 *     Disabled
91 *   </Toggle>
92 *   <Toggle disabled variant="outline" aria-label="Toggle italic">
93 *     Disabled
94 *   </Toggle>
95 * </div>
96 *
97 */
98 
99import type { HTMLAttributes } from "astro/types";
100import { cn } from "@/lib/utils";
101import {
102  toggleVariants,
103  type ToggleVariantProps,
104} from "@bejamas/ui/lib/toggle-shared";
105 
106// … truncated