Checkbox

// CoreUI Checkbox v0.0.0import * as React from 'react';import * as CheckboxPrimitive from '@radix-ui/react-checkbox';import { cn } from '@/utils/cn';function IconCheck({ ...rest }: React.SVGProps<SVGSVGElement>) {  return (    <svg      width='10'      height='8'      viewBox='0 0 10 8'      fill='none'      xmlns='http://www.w3.org/2000/svg'      {...rest}    >      <path        d='M1 3.5L4 6.5L9 1.5'        strokeWidth='1.5'        className='stroke-static-white'      />    </svg>  );}function IconIndeterminate({ ...rest }: React.SVGProps<SVGSVGElement>) {  return (    <svg      width='8'      height='2'      viewBox='0 0 8 2'      fill='none'      xmlns='http://www.w3.org/2000/svg'      {...rest}    >      <path d='M0 1H8' strokeWidth='1.5' className='stroke-static-white' />    </svg>  );}const Checkbox = React.forwardRef<  React.ComponentRef<typeof CheckboxPrimitive.Root>,  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>(({ className, checked, ...rest }, forwardedRef) => {  const filterId = React.useId();  // precalculated by .getTotalLength()  const TOTAL_LENGTH_CHECK = 11.313708305358887;  const TOTAL_LENGTH_INDETERMINATE = 8;  return (    <CheckboxPrimitive.Root      ref={forwardedRef}      checked={checked}      className={cn(        'group/checkbox relative flex size-5 shrink-0 items-center justify-center outline-none',        'focus:outline-none',        className,      )}      {...rest}    >      <svg        width='20'        height='20'        viewBox='0 0 20 20'        fill='none'        xmlns='http://www.w3.org/2000/svg'      >        <rect          x='2'          y='2'          width='16'          height='16'          rx='4'          className={cn(            'fill-bg-soft-200 transition duration-200 ease-out',            // hover            'group-hover/checkbox:fill-bg-sub-300',            // focus            'group-focus/checkbox:fill-primary-base',            // disabled            'group-disabled/checkbox:fill-bg-soft-200',            // hover            'group-hover/checkbox:group-data-[state=checked]/checkbox:fill-primary-darker',            'group-hover/checkbox:group-data-[state=indeterminate]/checkbox:fill-primary-darker',            // focus            'group-focus/checkbox:group-data-[state=checked]/checkbox:fill-primary-dark',            'group-focus/checkbox:group-data-[state=indeterminate]/checkbox:fill-primary-dark',            // checked            'group-data-[state=checked]/checkbox:fill-primary-base',            'group-data-[state=indeterminate]/checkbox:fill-primary-base',            // disabled checked            'group-disabled/checkbox:group-data-[state=checked]/checkbox:fill-bg-soft-200',            'group-disabled/checkbox:group-data-[state=indeterminate]/checkbox:fill-bg-soft-200',          )}        />        <g filter={`url(#${filterId})`}>          <rect            x='3.5'            y='3.5'            width='13'            height='13'            rx='2.6'            className={cn(              'fill-bg-white-0 transition duration-200 ease-out',              // disabled              'group-disabled/checkbox:hidden',              // checked              'group-data-[state=checked]/checkbox:opacity-0',              'group-data-[state=indeterminate]/checkbox:opacity-0',            )}          />        </g>        <defs>          <filter            id={filterId}            x='1.5'            y='3.5'            width='17'            height='17'            filterUnits='userSpaceOnUse'            colorInterpolationFilters='sRGB'          >            <feFlood floodOpacity='0' result='BackgroundImageFix' />            <feColorMatrix              in='SourceAlpha'              type='matrix'              values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'              result='hardAlpha'            />            <feOffset dy='2' />            <feGaussianBlur stdDeviation='1' />            <feColorMatrix              type='matrix'              values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.12 0'            />            <feBlend              mode='normal'              in2='BackgroundImageFix'              result='effect1_dropShadow_34646_2602'            />            <feBlend              mode='normal'              in='SourceGraphic'              in2='effect1_dropShadow_34646_2602'              result='shape'            />          </filter>        </defs>      </svg>      <CheckboxPrimitive.Indicator        forceMount        className='[&_path]:transition-all [&_path]:duration-300 [&_path]:ease-out [&_svg]:opacity-0'      >        <IconCheck          className={cn(            'absolute left-1/2 top-1/2 shrink-0 -translate-x-1/2 -translate-y-1/2',            // checked            'group-data-[state=checked]/checkbox:opacity-100',            'group-data-[state=checked]/checkbox:[&>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,          }}        />        <IconIndeterminate          className={cn(            'absolute left-1/2 top-1/2 shrink-0 -translate-x-1/2 -translate-y-1/2',            // indeterminate            'group-data-[state=indeterminate]/checkbox:opacity-100',            'group-data-[state=indeterminate]/checkbox:[&>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,          }}        />      </CheckboxPrimitive.Indicator>    </CheckboxPrimitive.Root>  );});Checkbox.displayName = CheckboxPrimitive.Root.displayName;export { Checkbox as Root };