import React from "react";
import { PlusButtonGroup as PlusButtonGroupElement } from "../dist/components/button-group/index.js";

export type { PlusButtonGroupElement };

export interface PlusButtonGroupProps
  extends Pick<
    React.AllHTMLAttributes<HTMLElement>,
    | "children"
    | "dir"
    | "hidden"
    | "id"
    | "lang"
    | "slot"
    | "style"
    | "title"
    | "translate"
    | "onClick"
    | "onFocus"
    | "onBlur"
  > {
  /** Determines whether the button group's properties override the properties of its child buttons.
When true, all buttons in the group will have the same appearance.
When false, each button can have its own properties. */
  override?: boolean;

  /** Disables the button interaction */
  disabled?: boolean;

  /** Shows loading spinner and disables interaction */
  loading?: boolean;

  /** The orientation of the button group. */
  orientation?: PlusButtonGroupElement["orientation"];

  /** Determines the visual style of the button
- filled: Solid background color
- outlined: Transparent background with border
- dashed: Transparent background with dashed border
- text: Text only without background or border */
  kind?: PlusButtonGroupElement["kind"];

  /** Sets the status/color variant of the button
- default: Neutral color scheme
- primary: Brand color scheme
- success: Green color scheme
- warning: Yellow color scheme
- danger: Red color scheme
- info: Blue color scheme */
  status?: PlusButtonGroupElement["status"];

  /** Sets the size of the button
- sm: Small size
- md: Medium size
- lg: Large size */
  size?: PlusButtonGroupElement["size"];

  /** 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;
}

/**
 * Button group component that groups related buttons together.
 * ---
 *
 *
 * ### **Slots:**
 *  - _default_ - The default slot for the buttons
 *
 * ### **CSS Properties:**
 *  - **--button-group-gap** - Gap between buttons in the group _(default: undefined)_
 */
export const PlusButtonGroup: React.ForwardRefExoticComponent<PlusButtonGroupProps>;