DBHub

"use client"; import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"; import { cn } from "@/lib/utils"; function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { return ( <CheckboxPrimitive.Root className={cn( "peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:aria-invalid:ring-destructive/40", className, )} data-slot="checkbox" {...props} > <CheckboxPrimitive.Indicator className="grid place-content-center text-current" data-slot="checkbox-indicator" > {(props.checked as boolean | "indeterminate") === "indeterminate" ? ( <svg fill="currentcolor" height="9" viewBox="0 0 9 9" width="9"> <path d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z" /> </svg> ) : ( <svg fill="currentcolor" height="9" viewBox="0 0 9 9" width="9"> <path d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z" /> </svg> )} </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Root> ); } export { Checkbox };