Checkbox - Copy this React, Tailwind Component to your project

# Checkbox Component Prompt (MVC Pattern Functional) ## Context Design a **Checkbox** component for a React application using TypeScript and the MVC pattern. The component should allow users to toggle between checked and unchecked states, supporting customization and accessibility. ## Goals 1. Implement the **MVC pattern** in a functional style to manage state, rendering, and user interactions. 2. Provide a reusable and customizable checkbox component with optional labels and styles. 3. Ensure accessibility and responsiveness for various user needs. ## MVC Design Breakdown ### Model The **model** will manage the checkbox's state, such as whether it is checked or disabled. ### View The **view** will render the checkbox input, label, and any associated styles. ### Controller The **controller** will handle user interactions, such as clicks, keyboard inputs, and toggling states. ## Props Interface ```typescript interface CheckboxProps { checked: boolean; // Current state of the checkbox onChange: (checked: boolean) => void; // Callback when the checkbox state changes label?: string; // Optional label text for the checkbox disabled?: boolean; // Whether the checkbox is disabled indeterminate?: boolean; // Optional indeterminate state for mixed selections size?: 'small' | 'medium' | 'large'; // Size of the checkbox (default: medium) color?: 'default' | 'primary' | 'secondary' | 'success' | 'danger'; // Color theme of the checkbox }