All files / react-base/src/components/ui checkbox.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { cva, type VariantProps } from "class-variance-authority";
import { Check } from "lucide-react";
import { ui } from "@/config/theme";
import { cn } from "@/lib/utils";
 
const checkboxVariants = cva(ui("checkbox"), {
  variants: {
    shape: {
      rounded: "rounded-sm",
      square: "rounded-none",
    },
    size: {
      default: "h-4 w-4",
      sm: "h-3.5 w-3.5",
    },
  },
  defaultVariants: {
    shape: "rounded",
    size: "default",
  },
});
 
const checkboxIndicatorVariants = cva("flex items-center justify-center text-current", {
  variants: {
    size: {
      default: "[&_svg]:h-4 [&_svg]:w-4",
      sm: "[&_svg]:h-3 [&_svg]:w-3",
    },
  },
  defaultVariants: {
    size: "default",
  },
});
 
export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
  VariantProps<typeof checkboxVariants>;
 
const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
  ({ className, shape, size, ...props }, ref) => (
    <CheckboxPrimitive.Root ref={ref} className={cn(checkboxVariants({ shape, size }), className)} {...props}>
      <CheckboxPrimitive.Indicator className={checkboxIndicatorVariants({ size })}>
        <Check />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  ),
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
export { Checkbox, checkboxVariants };