Checkbox

1"use client";
2 
3import { Check } from "@phosphor-icons/react";
4import { Checkbox as CheckboxPrimitive } from "radix-ui";
5import * as React from "react";
6 
7import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9 
10/* Role: bordered adaptive glass. */
11const ROLE = {
12  border: true,
13};
14 
15const Checkbox = React.forwardRef<
16  React.ElementRef<typeof CheckboxPrimitive.Root>,
17  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
18    MaterialAxisProps & {
19      variant?: "default" | "glass";
20    }
21>(({ className, variant = "glass", ...props }, ref) => {
22  const [axes, rest] = splitAxisProps(props);
23  /* `glow` rides the CHECKED state on toggles — kept out of the materialSurface forward below. */
24  const m = materialSurface(variant === "default" ? null : ROLE, {
25    ...axes,
26    glow: undefined,
27  });
28 
29  return (
30    <CheckboxPrimitive.Root
31      ref={ref}
32      data-slot="checkbox"
33      data-material={m?.["data-material"]}
34      className={cn(
35        m?.className,
36        "peer h-4 w-4 shrink-0 rounded-sm border shadow transition-shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
37        m === null && "border-primary",
38        m !== null && "data-[state=checked]:glass data-[state=checked]:border-[var(--glass-border)]",
39        axes.glow && "data-[state=checked]:glass-glow transition duration-200",
40        className,
41      )}
42      {...rest}
43    >
44      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className={cn("flex items-center justify-center text-current")}>
45        <Check className="h-4 w-4" />
46      </CheckboxPrimitive.Indicator>
47    </CheckboxPrimitive.Root>
48  );
49});
50Checkbox.displayName = CheckboxPrimitive.Root.displayName;
51 
52export { Checkbox };