27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import * as React from "react"
|
||
|
|
import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
export type CheckboxRootProps = React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & {
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const BaseCheckboxRoot = BaseCheckbox.Root as React.ElementType
|
||
|
|
|
||
|
|
export const CheckboxRoot = React.forwardRef<HTMLElement, CheckboxRootProps>(
|
||
|
|
({ className, ...props }, ref) => (
|
||
|
|
<BaseCheckboxRoot
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white data-checked:bg-neutral-950 data-checked:text-white focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950 dark:focus-visible:outline-white",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
)
|
||
|
|
|
||
|
|
CheckboxRoot.displayName = "CheckboxRoot"
|