CheckboxVariants

"use client"

import * as React from "react"

const CustomCheckbox = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  ({ className, ...props }, ref) => (
    <input
      type="checkbox"
      ref={ref}
      className={[
        "relative box-border block h-[1.5rem] w-[1.5rem] cursor-pointer appearance-none rounded-md border border-[color:var(--bz-line-control,#8a8a8e)] bg-slate-200 transition-[background-color,border-color] duration-300",
        "before:absolute before:left-2/4 before:top-[42%] before:h-[10px] before:w-[6px]",
        "before:-translate-x-2/4 before:-translate-y-2/4 before:rotate-45 before:scale-75",
        "before:border-b-2 before:border-r-2 before:border-solid before:border-b-white before:border-r-white",
        "before:opacity-0 before:transition-[transform,opacity] before:delay-100 before:duration-100 before:ease-[cubic-bezier(0.77,0,0.175,1)] before:content-['']",
        "after:absolute after:inset-0 after:rounded-[7px] after:opacity-0",
        "after:shadow-[0_0_0_calc(30px_/_2.5)_#1677ff] after:transition-[opacity,box-shadow] after:duration-500 after:ease-out after:content-['']",
        "checked:border-transparent checked:bg-[#1677ff]",
        "checked:before:-translate-x-2/4 checked:before:-translate-y-2/4",
        "checked:before:rotate-45 checked:before:scale-x-[1.4] checked:before:scale-y-[1.4]",
        "checked:before:opacity-100 checked:before:transition-[transform,opacity] checked:before:delay-100 checked:before:duration-200",
        "hover:border-[#1677ff] outline-2 outline-offset-1 outline-[#1677ff] focus-visible:outline",
        "[&:active:not(:checked)]:after:opacity-100 [&:active:not(:checked)]:after:shadow-none [&:active:not(:checked)]:after:transition-none",
        className,
      ].filter(Boolean).join(" ")}
      {...props}
    />
  )
)
CustomCheckbox.displayName = "CustomCheckbox"

const GradientCheckbox = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  ({ className, ...props }, ref) => (
    <label className="relative block cursor-pointer select-none rounded-md text-3xl outline-2 outline-offset-1 outline-gray-700 has-[:focus-visible]:outline">
      <input ref={ref} type="checkbox" className="peer absolute opacity-0" {...props} />
      <div className={[
        "relative left-0 top-0 h-[1.6rem] w-[1.6rem] rounded-[0.3em] bg-white transition-[background-color,box-shadow] duration-300",
        "after:absolute after:left-0 after:top-0 after:h-[1.6rem] after:w-[1.6rem]",
        "after:rotate-0 after:rounded-[0.3em] after:border-[2px] after:border-[rgba(0,0,0,0.863)]",
        "after:transition-[left,top,height,width,border-radius,border-color,transform] after:delay-100 after:duration-300 after:content-['']",
        "peer-checked:bg-black",
        "peer-checked:shadow-[-13px_-13px_40px_0px_rgb(17,0,248),13px_-0_40px_0px_rgb(243,11,243),13px_-13px_40px_0px_rgb(253,228,0),13px_0_40px_0px_rgb(107,255,21),13px_13px_40px_0px_rgb(76,0,255),13px_13px_40px_0px_rgb(255,196,0),-13px_13px_40px_0px_rgb(90,105,240)]",
        "peer-checked:after:left-2 peer-checked:after:top-[1px] peer-checked:after:h-[0.6em]",
        "peer-checked:after:w-[0.35em] peer-checked:after:rotate-45 peer-checked:after:rounded-[0em]",
        "peer-checked:after:border-b-[0.1em] peer-checked:after:border-r-[0.1em]",
        "peer-checked:after:border-[rgba(238,238,238,0)_white_white_#fff0]",
        "dark:bg-black dark:after:border-[rgba(255,255,255,0.863)]",
        "dark:peer-checked:bg-white dark:peer-checked:after:border-[rgba(238,238,238,0)_black_black_#fff0]",
        className,
      ].filter(Boolean).join(" ")} />
    </label>
  )
)
GradientCheckbox.displayName = "GradientCheckbox"

const TransformerCheckbox = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  ({ className, ...props }, ref) => (
    <label className="relative block h-[1.5rem] w-[1.5rem] cursor-pointer rounded-sm outline-2 outline-offset-1 outline-gray-700 has-[:focus-visible]:outline">
      <input ref={ref} type="checkbox" className="peer absolute h-0 w-0 opacity-0" {...props} />
      <span className={[
        "block h-[inherit] w-[inherit] rounded-md border-[2px] border-black transition-[margin,height,width,transform,border-radius,border-color] duration-300",
        "peer-checked:ml-1 peer-checked:h-5 peer-checked:w-3",
        "peer-checked:translate-x-[2px] peer-checked:translate-y-[-1px]",
        "peer-checked:rotate-45 peer-checked:rounded-none",
        "peer-checked:border-b-[2px] peer-checked:border-l-transparent peer-checked:border-t-transparent",
        "dark:border-white",
        className,
      ].filter(Boolean).join(" ")} />
    </label>
  )
)
TransformerCheckbox.displayName = "TransformerCheckbox"

const AnimatedCheckbox = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  ({ className, ...props }, ref) => (
    <label className="relative block cursor-pointer select-none rounded-full text-2xl outline-2 outline-offset-1 outline-[#0b6e4f] has-[:checked]:rounded-md has-[:focus-visible]:outline">
      <input ref={ref} type="checkbox" className="peer absolute h-0 w-0 opacity-0" {...props} />
      <div className={[
        "relative left-0 top-0 h-[1.5rem] w-[1.5rem] rounded-[50%] border border-[color:var(--bz-line-control,#8a8a8e)] bg-slate-200 transition duration-300",
        "after:absolute after:left-[0.5rem] after:top-1 after:hidden after:h-[0.8rem] after:w-[0.5rem]",
        "after:rotate-45 after:border-b-[0.2rem] after:border-r-[0.2rem] after:content-['']",
        "focus:outline-[#0b6e4f]",
        "peer-checked:animate-pulse peer-checked:rounded-lg peer-checked:border-[#0b6e4f] peer-checked:bg-[#0b6e4f] peer-checked:after:block",
        className,
      ].filter(Boolean).join(" ")} />
    </label>
  )
)
AnimatedCheckbox.displayName = "AnimatedCheckbox"

export { CustomCheckbox, GradientCheckbox, TransformerCheckbox, AnimatedCheckbox }