checkbox

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/checkbox/Checkbox.astro directly.
3/**
4 * @component Checkbox
5 * @title Checkbox
6 * @description An accessible control for toggling between checked and unchecked states. Built on native HTML checkbox.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2525-5683&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <div class="flex flex-col gap-6 not-content">
12 * <div class="flex items-center gap-3">
13 *   <Checkbox id="terms" />
14 *   <Label for="terms">Accept terms and conditions</Label>
15 * </div>
16 *
17 * <div class="flex items-start gap-3">
18 *   <Checkbox id="terms-2" defaultChecked />
19 *   <div class="grid gap-2">
20 *     <Label for="terms-2">Accept terms and conditions</Label>
21 *     <p class="text-muted-foreground text-sm">
22 *       By clicking this checkbox, you agree to the terms and conditions.
23 *     </p>
24 *   </div>
25 * </div>
26 *
27 * <div class="flex items-center gap-3">
28 *   <Checkbox id="toggle" disabled />
29 *   <Label for="toggle">Enable notifications</Label>
30 * </div>
31 *
32 * <Label
33 *   class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50 dark:has-[:checked]:border-blue-900 dark:has-[:checked]:bg-blue-950"
34 * >
35 *   <Checkbox
36 *     id="toggle-2"
37 *     defaultChecked
38 *     class="checked:border-blue-600 checked:bg-blue-600 dark:checked:border-blue-700 dark:checked:bg-blue-700"
39 *   />
40 *   <div class="grid gap-1.5 font-normal">
41 *     <p class="text-sm leading-none font-medium">Enable notifications</p>
42 *     <p class="text-muted-foreground text-sm">
43 *       You can enable or disable notifications at any time.
44 *     </p>
45 *   </div>
46 * </Label>
47 * </div>
48 *
49 * @usage
50 *
51 * ```astro nocollapse
52 * ---
53 * import { Checkbox } from '@bejamas/ui/components/checkbox';
54 * import { Label } from '@bejamas/ui/components/label';
55 * ---
56 *
57 * <div class="flex items-center gap-3">
58 *   <Checkbox id="terms" />
59 *   <Label for="terms">Accept terms and conditions</Label>
60 * </div>
61 * ```
62 */
63 
64const { class: className = "", id = "", name = id, ...props } = Astro.props;
65 
66import { cn } from "@/lib/utils";
67import SemanticIcon from "../icon/SemanticIcon.astro";
68 
69const baseWrapper =
70// … truncated