checkbox

1import * as React from "react"
2import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
3import { cva, type VariantProps } from "class-variance-authority"
4import { Check, Minus } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import "./checkbox.css"
8 
9const checkboxVariants = cva(
10  "checkbox-indicator inline-flex items-center justify-center shrink-0",
11  {
12    variants: {
13      size: {
14        sm: "h-[var(--layout-size-xs)] w-[var(--layout-size-xs)] rounded-[var(--layout-radius-sm)]",
15        md: "h-[var(--layout-size-sm)] w-[var(--layout-size-sm)] rounded-[var(--layout-radius-md)]",
16      },
17    },
18    defaultVariants: {
19      size: "sm",
20    },
21  }
22)
23 
24function Checkbox({
25  className,
26  size = "sm",
27  label,
28  description,
29  disabled,
30  ...props
31}: React.ComponentProps<typeof CheckboxPrimitive.Root> &
32  VariantProps<typeof checkboxVariants> & {
33    label?: string
34    description?: string
35  }) {
36  const id = React.useId()
37 
38  return (
39    <div
40      data-slot="checkbox"
41      data-disabled={disabled || undefined}
42      className={cn("flex items-start gap-[var(--layout-gap-md)]", className)}
43    >
44      <div className="flex items-center py-[var(--layout-padding-2xs)]">
45        <CheckboxPrimitive.Root
46          id={id}
47          className={cn(checkboxVariants({ size }))}
48          disabled={disabled}
49          {...props}
50        >
51          <CheckboxPrimitive.Indicator className="checkbox-icon flex items-center justify-center">
52            <Check
53              className={cn(
54                "checkbox-check",
55                size === "sm" ? "size-3" : "size-3.5"
56              )}
57              strokeWidth={3}
58            />
59            <Minus
60              className={cn(
61                "checkbox-minus",
62                size === "sm" ? "size-3" : "size-3.5"
63              )}
64              strokeWidth={3}
65            />
66          </CheckboxPrimitive.Indicator>
67        </CheckboxPrimitive.Root>
68      </div>
69      {label && (
70        <label
71          htmlFor={id}
72          className={cn(
73            "flex flex-col",
74            disabled ? "cursor-default" : "cursor-pointer"
75          )}
76        >
77          <span
78            className={cn(
79              "font-accent checkbox-label",
80              size === "sm" ? "text-content-note" : "text-content-body"
81            )}
82          >
83            {label}
84          </span>
85          {description && (
86            <span className="text-content-note checkbox-description">
87              {description}
88// … truncated