switch

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/switch/Switch.astro directly.
3/**
4 * @component Switch
5 * @title Switch
6 * @description A toggle control for switching between checked and unchecked states.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2509-4236&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @status stable
10 * @since 0.1.0
11 *
12 * @preview
13 *
14 * <div class="flex items-center gap-3">
15 *   <Switch id="notifications" />
16 *   <Label for="notifications">Enable notifications</Label>
17 * </div>
18 *
19 * @usage
20 *
21 * ```astro nocollapse
22 * ---
23 * import { Switch } from '@bejamas/ui/components/switch';
24 * import { Label } from '@bejamas/ui/components/label';
25 * ---
26 *
27 * <div class="flex items-center gap-3">
28 *   <Switch id="notifications" />
29 *   <Label for="notifications">Enable notifications</Label>
30 * </div>
31 * ```
32 */
33 
34import type { HTMLAttributes } from "astro/types";
35import { cn } from "@/lib/utils";
36 
37interface Props extends HTMLAttributes<"span"> {
38  class?: string;
39  id?: string;
40  size?: "sm" | "default";
41  checked?: boolean;
42  defaultChecked?: boolean;
43  name?: string;
44  value?: string;
45  uncheckedValue?: string;
46  disabled?: boolean;
47  readOnly?: boolean;
48  required?: boolean;
49  "aria-invalid"?: boolean | "true" | "false";
50}
51 
52const {
53  class: className = "",
54  id = "",
55  size = "default",
56  checked,
57  defaultChecked,
58  name,
59  value,
60  uncheckedValue,
61  disabled = false,
62  readOnly = false,
63  required = false,
64  "aria-invalid": ariaInvalid,
65  ...rest
66} = Astro.props as Props;
67 
68const initialChecked = checked ?? defaultChecked ?? false;
69---
70 
71<span
72  {...rest}
73  id={id}
74  data-slot="switch"
75  data-size={size}
76  data-default-checked={initialChecked ? "true" : undefined}
77  data-name={name}
78  data-value={value}
79  data-unchecked-value={uncheckedValue}
80  data-disabled={disabled ? "true" : undefined}
81  data-read-only={readOnly ? "true" : undefined}
82  data-required={required ? "true" : undefined}
83  data-checked={initialChecked ? "true" : undefined}
84  data-unchecked={initialChecked ? undefined : "true"}
85  aria-invalid={ariaInvalid}
86  class={cn(
87// … truncated