checkbox

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = Omit<HTMLAttributes<"input">, "type">
7 
8const { class: className, ...props } = Astro.props
9---
10 
11<input
12  type="checkbox"
13  role="checkbox"
14  data-slot="checkbox"
15  class={cn(
16    "border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary aria-invalid:checked:border-primary aria-invalid:indeterminate:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 checked:[color:var(--color-primary-foreground)] indeterminate:[color:var(--color-primary-foreground)] focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
17    className
18  )}
19  {...props}
20/>
21 
22<style>
23  [data-slot="checkbox"] {
24    color: inherit;
25  }
26 
27  [data-slot="checkbox"]::before {
28    content: "";
29    position: absolute;
30    inset: 0;
31    margin: auto;
32    width: 14px;
33    height: 14px;
34    opacity: 0;
35    background-color: currentColor;
36    background-repeat: no-repeat;
37    background-position: center;
38    background-size: 14px 14px;
39    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
40    -webkit-mask-repeat: no-repeat;
41    -webkit-mask-position: center;
42    -webkit-mask-size: 14px 14px;
43    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
44    mask-repeat: no-repeat;
45    mask-position: center;
46    mask-size: 14px 14px;
47  }
48 
49  [data-slot="checkbox"]:checked,
50  [data-slot="checkbox"]:indeterminate {
51    color: var(--color-primary-foreground);
52  }
53 
54  [data-slot="checkbox"]:checked::before {
55    opacity: 1;
56  }
57 
58  [data-slot="checkbox"]:indeterminate::before {
59    opacity: 1;
60// … truncated