Checkbox

1import { cva } from "class-variance-authority";
2import { html, LitElement, nothing, type PropertyValues } from "lit";
3import { customElement, property, state } from "lit/decorators.js";
4import { unsafeSVG } from "lit/directives/unsafe-svg.js";
5import { Check, Minus } from "lucide-static";
6import { TW } from "@/registry/lib/tailwindMixin";
7 
8export const checkboxVariants = cva(
9  "peer size-4 shrink-0 rounded-sm border border-primary shadow-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
10);
11 
12export interface CheckboxChangeEvent extends CustomEvent {
13  detail: { checked: boolean; indeterminate: boolean };
14}
15 
16export interface CheckboxProperties {
17  checked?: boolean;
18  defaultChecked?: boolean;
19  indeterminate?: boolean;
20  disabled?: boolean;
21  required?: boolean;
22  name?: string;
23  value?: string;
24  ariaLabel?: string | null;
25  ariaLabelledby?: string | null;
26  ariaDescribedby?: string | null;
27}
28 
29@customElement("ui-checkbox")
30export class Checkbox extends TW(LitElement) implements CheckboxProperties {
31  static formAssociated = true;
32  private internals: ElementInternals;
33 
34  @property({ type: Boolean }) checked: boolean | undefined = undefined;
35  @property({ type: Boolean, attribute: "default-checked" })
36  defaultChecked = false;
37  @property({ type: Boolean }) indeterminate = false;
38  @property({ type: Boolean }) disabled = false;
39  @property({ type: Boolean }) required = false;
40  @property({ type: String }) name = "";
41  @property({ type: String }) value = "on";
42 
43  @property({ type: String, attribute: "aria-label" }) accessor ariaLabel:
44    | string
45    | null = null;
46  @property({ type: String, attribute: "aria-labelledby" })
47  accessor ariaLabelledby: string | null = null;
48  @property({ type: String, attribute: "aria-describedby" })
49  accessor ariaDescribedby: string | null = null;
50 
51  @state() private _checked = false;
52 
53  private _labelClickHandler = (e: Event) => {
54    const label = e.currentTarget as HTMLLabelElement;
55    if (label.htmlFor === this.id && !this.disabled) {
56      e.preventDefault();
57      this._handleClick();
58    }
59  };
60 
61  constructor() {
62    super();
63    this.internals = this.attachInternals();
64  }
65 
66  override connectedCallback() {
67    super.connectedCallback();
68    if (this.checked === undefined) {
69// … truncated