Checkbox

1"use client";
2
3import React, { createContext, useContext, useEffect, useState } from "react";
4import { Checkbox as CheckboxPrimitive } from "@base-ui/react";
5import { tv, type VariantProps } from "tailwind-variants";
6
7import { cn } from "@/lib/classes";
8
9const checkboxRootStyles = tv({
10  base: [
11    `group size-7 relative inline-flex items-center justify-center shrink-0 overflow-hidden outline-hidden focus:outline-hidden focus-visible:outline-hidden cursor-pointer focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background`,
12    `data-disabled:cursor-not-allowed data-disabled:grayscale data-disabled:scale-100 data-disabled:opacity-50`,
13    `before:content-[''] before:absolute before:border-2 before:inset-0 before:border-border not-data-disabled:hover:before:bg-secondary/60`,
14    `after:content-[''] after:absolute after:inset-0 after:bg-primary data-unchecked:after:scale-50 data-unchecked:after:opacity-0 after:origin-center data-checked:after:scale-100 data-checked:after:opacity-100`,
15    ``,
16  ],
17  variants: {
18    size: {
19      sm: "size-4.5",
20      default: "size-5",
21      lg: "size-6",
22    },
23    radius: {
24      none: "rounded-none before:rounded-none after:rounded-none",
25      sm: "rounded-[6px] before:rounded-[6px] after:rounded-[6px]",
26      default: "rounded-[7.2px] before:rounded-[7.2px] after:rounded-[7.2px]",
27      lg: "rounded-[8.4px] before:rounded-[8.4px] after:rounded-[8.4px]",
28      full: "rounded-full before:rounded-full after:rounded-full",
29    },
30    reduceMotion: {
31      true: "transition-none before:transition-none after:transition-none",
32      false:
33        "before:transition-colors transition-transform after:[transition:0.2s_linear] after:[transition-property:opacity,scale,transform]",
34    },
35  },
36  defaultVariants: {
37    size: "default",
38    radius: "default",
39    reduceMotion: false,
40  },
41});
42
43const checkboxIndicatorStyles = tv({
44  base: [
45    `relative z-10 flex items-center justify-center data-unchecked:opacity-0 data-checked:opacity-100 text-primary-foreground transition-opacity pointer-events-none`,
46  ],
47  variants: {
48    size: {
49      sm: "w-2.5 h-2.5",
50      default: "w-3 h-3",
51      lg: "w-4 h-4",
52    },
53    reduceMotion: {
54      true: "transition-none",
55      false: "transition-opacity",
56    },
57  },
58  defaultVariants: {
59    size: "default",
60    reduceMotion: false,
61  },
62});
63
64interface CheckboxRootProps
65// … truncated