Checkbox

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

'use client';import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';import { CheckIcon, MinusIcon } from 'lucide-react';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Provides a shared state to a series of checkboxes. * * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox) * * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox-group#api-reference) */export namespace CheckboxGroup {  export type State = CheckboxGroupPrimitive.State;  export type Props = React.ComponentProps<typeof CheckboxGroupPrimitive>;  export type ChangeEventDetails = CheckboxGroupPrimitive.ChangeEventDetails;  export type ChangeEventReason = CheckboxGroupPrimitive.ChangeEventReason;}export function CheckboxGroup({ className, ...props }: CheckboxGroup.Props) {  return (    <CheckboxGroupPrimitive      className={cn('flex flex-col items-start gap-1.5', className)}      data-slot="checkbox-group"      {...props}    />  );}/** * Represents the checkbox itself. * Renders a `<span>` element and a hidden `<input>` beside. * * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox) * * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox#root) */export namespace Checkbox {  export type State = CheckboxPrimitive.Root.State;  export type Props = React.ComponentProps<typeof CheckboxPrimitive.Root>;  export type ChangeEventDetails = CheckboxPrimitive.Root.ChangeEventDetails;  export type ChangeEventReason = CheckboxPrimitive.Root.ChangeEventReason;}export function Checkbox({ className, ...props }: Checkbox.Props) {  return (    <CheckboxPrimitive.Root className={cn('', className)} data-slot="checkbox" {...props}>      <CheckboxPrimitive.Indicator        className={cn('')}        data-slot="checkbox-indicator"        render={(indicatorProps, { indeterminate }) => (          <span {...indicatorProps}>            {indeterminate ? (              <MinusIcon className="size-3.5" />            ) : (              <CheckIcon className="size-3.5" />            )}          </span>        )}      />    </CheckboxPrimitive.Root>  );}