switch

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"span"> & {
7  defaultChecked?: boolean
8  disabled?: boolean
9  readOnly?: boolean
10  required?: boolean
11  name?: string
12  size?: "default" | "sm"
13  value?: string
14  uncheckedValue?: string
15}
16 
17const {
18  class: className,
19  defaultChecked,
20  disabled,
21  readOnly,
22  required,
23  name,
24  size = "default",
25  value,
26  uncheckedValue,
27  ...props
28} = Astro.props
29 
30const initialChecked = defaultChecked === true
31const switchStyle =
32  "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default"
33const switchSizeStyle = {
34  sm: "h-[14px] w-[24px]",
35  default: "h-[18.4px] w-[32px]",
36}
37---
38 
39<span
40  role="switch"
41  aria-checked={initialChecked ? "true" : "false"}
42  aria-disabled={disabled ? "true" : undefined}
43  aria-readonly={readOnly ? "true" : undefined}
44  aria-required={required ? "true" : undefined}
45  data-slot="switch"
46  data-size={size}
47  data-checked={initialChecked ? "" : undefined}
48  data-unchecked={initialChecked ? undefined : ""}
49  data-default-checked={defaultChecked}
50  data-disabled={disabled}
51  data-read-only={readOnly}
52  data-readonly={readOnly}
53  data-required={required}
54  data-name={name}
55  data-value={value}
56  data-unchecked-value={uncheckedValue}
57  class={cn(switchStyle, switchSizeStyle[size], className)}
58  {...props}
59>
60  <span
61    aria-hidden="true"
62    data-slot="switch-thumb"
63    class="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
64  ></span>
65</span>
66 
67<script>
68// … truncated