import { CheckboxBasicDemo } from "../../../src/components/checkbox-basic-demo";
import { CheckboxSizesDemo } from "../../../src/components/checkbox-sizes-demo";
import { CheckboxIndeterminateDemo } from "../../../src/components/checkbox-indeterminate-demo";
import { CheckboxDisabledDemo } from "../../../src/components/checkbox-disabled-demo";

## Overview

The Checkbox component provides a binary selection control that allows users to toggle between checked and unchecked states. It includes support for an indeterminate state for representing partial selections, multiple sizes, and full keyboard accessibility.

## Import

```tsx
import { Checkbox } from "@px-ui/core";
```

## Usage

<Preview>
  <CheckboxBasicDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div className="flex items-center gap-2">
    <Checkbox id="terms" />
    <label htmlFor="terms">Accept terms and conditions</label>
  </div>
  ```
</CodeBlock>

## Examples

### Sizes

The Checkbox component supports three size variants to match different interface densities.

<Preview>
  <CheckboxSizesDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Checkbox id="small" size="sm" defaultChecked />
  <Checkbox id="default" size="default" defaultChecked />
  <Checkbox id="large" size="lg" defaultChecked />
  ```
</CodeBlock>

### Indeterminate State

The indeterminate state is useful for representing partial selections, such as when a parent checkbox controls multiple child checkboxes and only some are selected.

<Preview>
  <CheckboxIndeterminateDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Checkbox id="unchecked" />
  <Checkbox id="indeterminate" indeterminate defaultChecked />
  <Checkbox id="checked" defaultChecked />
  ```
</CodeBlock>

### Disabled State

Checkboxes can be disabled in any state: unchecked, checked, or indeterminate.

<Preview>
  <CheckboxDisabledDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Checkbox id="disabled-unchecked" disabled />
  <Checkbox id="disabled-checked" disabled defaultChecked />
  <Checkbox id="disabled-indeterminate" disabled indeterminate defaultChecked />
  ```
</CodeBlock>

## API Reference

### Checkbox

A binary selection control component with customizable size and indeterminate state support.

| Prop            | Type                        | Default     | Description                                                    |
| --------------- | --------------------------- | ----------- | -------------------------------------------------------------- |
| `variant`       | `"default"`                 | `"default"` | Visual style variant                                           |
| `size`          | `"default" \| "sm" \| "lg"` | `"default"` | Size of the checkbox                                           |
| `indeterminate` | `boolean`                   | `false`     | When true, displays a minus icon to indicate partial selection |
| `className`     | `string`                    | -           | Additional CSS classes                                         |

**Inherited Props:** Inherits all props from [Base UI Checkbox.Root](https://base-ui.com/react/components/checkbox#root) including `checked`, `defaultChecked`, `onCheckedChange`, `disabled`, `required`, etc.