import * as React from 'react';
import { createComponent } from '@lit/react';
import Component from '../../components/checkbox';
import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
/**
 * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,
 * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels
 * where users need to make selections or express preferences.
 *
 * To create a group of checkboxes, use the `mdc-formfieldgroup` component.
 *
 * **Note:** This component internally renders a native checkbox input element with custom styling.
 *
 * ## When to use
 *
 * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
 *
 * ## Accessibility
 * - Provide clear labels that describe what the checkbox controls
 * - Use `data-aria-label` when a visual label is not present
 * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form
 *
 * ## Styling
 * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.
 * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.
 *
 * @dependency mdc-button
 * @dependency mdc-icon
 * @dependency mdc-staticcheckbox
 * @dependency mdc-text
 * @dependency mdc-toggletip
 *
 * @tagname mdc-checkbox
 *
 * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
 * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
 *
 * @csspart label - The label element.
 * @csspart label-text - The container for the label and required indicator elements.
 * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
 * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
 * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
 * @csspart help-text - The helper/validation text element.
 * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
 * @csspart help-text-container - The container for the helper/validation icon and text elements.
 * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
 * @csspart text-container - The container for the label and helper text elements.
 * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
 *
 * @cssstate checked - Active when the checkbox is checked.
 */
const reactWrapper = createComponent({
    tagName: TAG_NAME,
    elementClass: Component,
    react: React,
    events: {
        onChange: 'change',
        onFocus: 'focus',
    },
    displayName: 'Checkbox',
});
export default reactWrapper;
