Checkbox

1"use client";
2 
3import * as React from "react";
4import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
5import { cn } from "@/lib/utils";
6 
7const Checkbox = React.forwardRef<
8  React.ComponentRef<typeof CheckboxPrimitive.Root>,
9  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10>(({ className, ...props }, ref) => (
11  <CheckboxPrimitive.Root
12    ref={ref}
13    data-slot="checkbox"
14    className={cn(
15      "group relative size-5 shrink-0 cursor-pointer rounded-md border border-input bg-surface shadow-xs",
16      "after:absolute after:-inset-2 after:content-['']",
17      "transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)]",
18      "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25",
19      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
20      "disabled:cursor-not-allowed disabled:border-border disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100",
21      className,
22    )}
23    {...props}
24  >
25    <CheckboxPrimitive.Indicator
26      data-slot="checkbox-indicator"
27      className="flex items-center justify-center text-current group-data-[state=checked]:animate-poyraz-scale-in"
28    >
29      <svg
30        width="10"
31        height="10"
32        viewBox="0 0 12 12"
33        fill="none"
34        stroke="currentColor"
35        strokeWidth="2.5"
36        strokeLinecap="round"
37        strokeLinejoin="round"
38      >
39        <polyline points="2.5 6 5 8.5 9.5 3.5" />
40      </svg>
41    </CheckboxPrimitive.Indicator>
42  </CheckboxPrimitive.Root>
43));
44Checkbox.displayName = CheckboxPrimitive.Root.displayName;
45 
46export { Checkbox };