Checkbox

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'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>
  );
}