// AlignUI Checkbox v0.0.0 import * as React from 'react'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { cn } from '../../utils/cn'; function IconCheck({ ...rest }: React.SVGProps) { return ( ); } function IconIndeterminate({ ...rest }: React.SVGProps) { return ( ); } const Checkbox = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, checked, ...rest }, forwardedRef) => { const filterId = React.useId(); // precalculated by .getTotalLength() const TOTAL_LENGTH_CHECK = 11.313708305358887; const TOTAL_LENGTH_INDETERMINATE = 8; return ( path]:[stroke-dashoffset:0]', // path '[&>path]:[stroke-dasharray:var(--total-length)] [&>path]:[stroke-dashoffset:var(--total-length)]', 'group-data-[state=indeterminate]/checkbox:invisible', )} style={{ ['--total-length' as any]: TOTAL_LENGTH_CHECK, }} /> path]:[stroke-dashoffset:0]', // path '[&>path]:[stroke-dasharray:var(--total-length)] [&>path]:[stroke-dashoffset:var(--total-length)]', 'invisible group-data-[state=indeterminate]/checkbox:visible', )} style={{ ['--total-length' as any]: TOTAL_LENGTH_INDETERMINATE, }} /> ); }); Checkbox.displayName = CheckboxPrimitive.Root.displayName; export { Checkbox as Root };