Checkbox

npx chandra-asri-ui add checkbox

"use client";

import { cn } from "@/lib/utils";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react";
import * as React from "react";

type CheckboxSize = "default" | "sm";

const sizeStyles: Record<CheckboxSize, string> = {
  default: "h-5 w-5",
  sm: "h-4 w-4",
};

export const Checkbox = React.forwardRef<
  React.ComponentRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
    size?: CheckboxSize;
  }
>(({ className, size = "default", ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer focus-visible:ring-primary-30 shrink-0 rounded-sm border-2 border-gray-100 focus-visible:ring-1 focus-visible:outline-none",
      "disabled:cursor-not-allowed disabled:opacity-50",
      "data-[state=checked]:border-primary-70 data-[state=checked]:bg-primary-70 data-[state=checked]:text-white",
      sizeStyles[size],
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-full w-full p-0.5" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;