Shadcn Checkbox for React and Tailwind

"use client";

import {
  Checkbox as ArkCheckbox,
  useCheckbox as useArkCheckbox,
  useCheckboxContext as useArkCheckboxContext,
  useCheckboxGroup as useArkCheckboxGroup,
  useCheckboxGroupContext as useArkCheckboxGroupContext,
} from "@ark-ui/react/checkbox";
import { CheckIcon, MinusIcon } from "lucide-react";
import type React from "react";
import { tv } from "tailwind-variants";
import { cn } from "@/lib/utils";

export const useCheckbox = useArkCheckbox;
export const useCheckboxContext = useArkCheckboxContext;
export const CheckboxContext = ArkCheckbox.Context;
export const useCheckboxGroup = useArkCheckboxGroup;
export const useCheckboxGroupContext = useArkCheckboxGroupContext;

const checkboxGroupClassName = "flex flex-col gap-2";

export const CheckboxGroup = (
  props: React.ComponentProps<typeof ArkCheckbox.Group>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCheckbox.Group
      className={cn(checkboxGroupClassName, className)}
      data-slot="checkbox-group"
      {...rest}
    />
  );
};

export const CheckboxGroupProvider = (
  props: React.ComponentProps<typeof ArkCheckbox.GroupProvider>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCheckbox.GroupProvider
      className={cn(checkboxGroupClassName, className)}
      data-slot="checkbox-group"
      {...rest}
    />
  );
};

export const checkboxVariants = tv({
  base: [
    "relative",
    "inline-flex shrink-0 items-center justify-center",
    "size-4",
    "bg-transparent",
    "rounded-sm border border-input shadow-xs/5",
    "transition-shadow",
    "data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring/32 data-focus-visible:ring-offset-1 data-focus-visible:ring-offset-background",
    "dark:data-focus-visible:data-invalid:border-destructive-foreground/64 dark:data-focus-visible:data-invalid:ring-destructive-foreground/48",
    "data-disabled:opacity-64",
    "[[data-disabled],[data-checked],[data-invalid]]:shadow-none",
    "data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
    "dark:data-invalid:border-destructive-foreground dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-destructive-foreground/20",
    "dark:not-data-checked:bg-input/32 dark:data-invalid:ring-destructive-foreground/24",
    "motion-reduce:transition-none!",
  ],
});

const CheckboxControl = (props: { tabIndex?: number }) => {
  const { tabIndex } = props;

  return (
    <>
      <ArkCheckbox.Control data-slot="checkbox-control">
        <CheckboxIndicator>
          <CheckIcon aria-hidden="true" />
        </CheckboxIndicator>
        <CheckboxIndicator indeterminate>
          <MinusIcon aria-hidden="true" />
        </CheckboxIndicator>
      </ArkCheckbox.Control>
      <ArkCheckbox.HiddenInput tabIndex={tabIndex} />
    </>
  );
};

export const Checkbox = (
  props: React.ComponentProps<typeof ArkCheckbox.Root>
) => {
  const { className, tabIndex, ...rest } = props;

  return (
    <ArkCheckbox.Root
      className={cn(checkboxVariants(), className)}
      data-slot="checkbox"
      role="checkbox"
      {...rest}
    >
      <CheckboxControl tabIndex={tabIndex} />
    </ArkCheckbox.Root>
  );
};

export const CheckboxRootProvider = (
  props: React.ComponentProps<typeof ArkCheckbox.RootProvider>
) => {
  const { className, tabIndex, ...rest } = props;

  return (
    <ArkCheckbox.RootProvider
      className={cn(checkboxVariants(), className)}
      data-slot="checkbox"
      role="checkbox"
      {...rest}
    >
      <CheckboxControl tabIndex={tabIndex} />
    </ArkCheckbox.RootProvider>
  );
};

export const CheckboxIndicator = (
  props: React.ComponentProps<typeof ArkCheckbox.Indicator>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCheckbox.Indicator
      className={cn(
        "absolute -inset-px",
        "flex items-center justify-center",
        "rounded-sm",
        "text-primary-foreground",
        "data-[state=checked]:bg-primary",
        "data-[state=unchecked]:hidden",
        "data-[state=indeterminate]:text-foreground",
        className
      )}
      data-slot="checkbox-indicator"
      {...rest}
    />
  );
};