Checkbox

"use client";

import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
import { cn } from "cn";

function Checkbox({
  className,
  size = "default",
  ...props
}: CheckboxPrimitive.Root.Props & { size?: "default" | "sm" }) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "group/checkbox peer relative isolate flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong,var(--input))] bg-popover shadow-[shadow:var(--shadow-control,0_1px_2px_0_rgb(0_0_0/0.05))] outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[ease] hover:not-data-disabled:border-[var(--checkbox-border-hover,var(--ring))] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 motion-reduce:transition-none after:absolute after:-inset-x-3 after:-inset-y-2",
        "data-checked:border-0 data-indeterminate:border-0 data-checked:bg-[image:var(--gradient-button-primary-default,linear-gradient(180deg,oklch(from_var(--primary)_calc(l_+_0.08)_c_h),var(--primary)))] data-indeterminate:bg-[image:var(--gradient-button-primary-default,linear-gradient(180deg,oklch(from_var(--primary)_calc(l_+_0.08)_c_h),var(--primary)))] data-checked:shadow-[inset_0_2px_0_0_rgb(255_255_255/0.25),inset_0_0_0_1px_oklch(from_var(--primary)_calc(l_+_0.08)_c_h)] data-indeterminate:shadow-[inset_0_2px_0_0_rgb(255_255_255/0.25),inset_0_0_0_1px_oklch(from_var(--primary)_calc(l_+_0.08)_c_h)]",
        "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-[image:var(--gradient-button-primary-hover,linear-gradient(180deg,oklch(from_var(--primary)_calc(l_+_0.16)_c_h),oklch(from_var(--primary)_calc(l_+_0.08)_c_h)))] before:opacity-0 before:transition-opacity before:duration-150 hover:not-data-disabled:data-checked:before:opacity-100 hover:not-data-disabled:data-indeterminate:before:opacity-100 motion-reduce:before:transition-none",
        size === "sm" && "size-3.5",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex size-full items-center justify-center text-[color:var(--checkbox-glyph,var(--primary-foreground))]"
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          className="size-full"
          aria-hidden="true"
        >
          <path
            d="M4.5 8H8H11.5"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            className="hidden group-data-indeterminate/checkbox:block"
          />
          <path
            d="M4 7.7002L6.64645 10.3466C6.84171 10.5419 7.15829 10.5419 7.35355 10.3466L12 5.7002"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            pathLength={1}
            className="[stroke-dasharray:1] [animation:check-draw_200ms_cubic-bezier(0.65,0,0.35,1)_forwards] group-data-indeterminate/checkbox:hidden motion-reduce:animate-none motion-reduce:[stroke-dashoffset:0]"
          />
        </svg>
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox };