import React from "react";
import { PlusCheckbox as PlusCheckboxElement } from "../dist/components/checkbox/index.js";

export type { PlusCheckboxElement };

export interface PlusCheckboxProps
  extends Pick<
    React.AllHTMLAttributes<HTMLElement>,
    | "children"
    | "dir"
    | "hidden"
    | "id"
    | "lang"
    | "slot"
    | "style"
    | "title"
    | "translate"
    | "onClick"
    | "onFocus"
    | "onBlur"
  > {
  /** Whether the checkbox is checked. */
  checked?: boolean;

  /** Whether the checkbox is in an indeterminate state. */
  indeterminate?: boolean;

  /** Whether the checkbox is disabled. */
  disabled?: boolean;

  /** If true, the checkbox is displayed in an error state. */
  error?: boolean;

  /** The checkbox's name, submitted as a name/value pair with form data. */
  name?: PlusCheckboxElement["name"];

  /** The size of the checkbox. */
  size?: PlusCheckboxElement["size"];

  /** The value associated with the checkbox. Submitted with the form data if checked. */
  value?: PlusCheckboxElement["value"];

  /** The text label displayed next to the checkbox. If not provided, use the default slot. */
  text?: PlusCheckboxElement["text"];

  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
  className?: string;

  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;

  /** Used for labels to link them with their inputs (using input id). */
  htmlFor?: string;

  /** Used to help React identify which items have changed, are added, or are removed within a list. */
  key?: number | string;

  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;

  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
  ref?: any;

  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
  tabIndex?: number;

  /** Emitted when the checkbox's checked state changes. */
  onPlusChange?: (event: CustomEvent) => void;

  /** Emitted when the checkbox gains focus. */
  onPlusFocus?: (event: CustomEvent) => void;

  /** Emitted when the checkbox loses focus. */
  onPlusBlur?: (event: CustomEvent) => void;
}

/**
 *
 * ---
 *
 *
 * ### **Events:**
 *  - **plus-change** - Emitted when the checkbox's checked state changes.
 * - **plus-focus** - Emitted when the checkbox gains focus.
 * - **plus-blur** - Emitted when the checkbox loses focus.
 *
 * ### **Methods:**
 *  - **formResetCallback()** - Called when the associated form is reset.
 * Resets the checkbox to its initial checked state.
 * We need to specific attribute initialChecked
 * - **formDisabledCallback(disabled: _boolean_)** - Called when the disabled state of the parent form changes.
 * - **click()** - Clicks the checkbox
 * - **focus(options: _FocusOptions_)** - Focuses the checkbox
 * - **blur()** - Blurs the checkbox
 *
 * ### **Slots:**
 *  - _default_ - The label for the checkbox.
 *
 * ### **CSS Properties:**
 *  - **--checkbox-size** - Controls the size of the checkbox control. Typically maps to sm, md, lg tokens. _(default: undefined)_
 * - **--checkbox-color-default** - Default background color. _(default: undefined)_
 * - **--checkbox-color-checked** - Background color when checked. _(default: undefined)_
 * - **--checkbox-color-border** - Border color. _(default: undefined)_
 * - **--checkbox-color-border-checked** - Border color when checked. _(default: undefined)_
 * - **--checkbox-color-icon** - Color of the checkmark/indeterminate icon. _(default: undefined)_
 * - **--checkbox-border-color-error** - Border color in the error state. _(default: undefined)_
 *
 * ### **CSS Parts:**
 *  - **base** - The component's base wrapper (label).
 * - **control** - The container for the actual checkbox input and its visual representation.
 * - **checkbox** - The visual representation of the checkbox.
 * - **icon** - The checkmark or indeterminate icon.
 * - **label** - The text label container.
 */
export const PlusCheckbox: React.ForwardRefExoticComponent<PlusCheckboxProps>;