/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { RadioButtonProps } from "./radio-button.svelte";

export interface RadioGroupProps extends RadioButtonProps {
  /**
   * @default null
   */
  class?: string | false | null;

  /**
   * A class string to add to the `<RadioButton>` components.
   * @default null
   */
  radioClass?: string | false | null;

  /**
   * A class string to assign to the labels' wrapping `<span>`s.
   * If this is not passed, the labels are not wrapped in a `<span>`.
   * @default null
   */
  labelClass?: string | false | null;

  /**
   * Designates the radio buttons as color choices. Labels are ignored and values are expected to be `"#RRGGBB"`.
   * @default false
   */
  color?: boolean;

  /**
   * An array of objects, where only the `value` field is required. Must contain at least one value.
   * @default undefined
   */
  items: Array<{ value: string; label?: string; disabled?: boolean }>;

  /**
   * The currently selected value of the group.
   * @default null
   */
  value?: string | null;

  /**
   * The name to assign to all radio buttons belonging to the same group. Check [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more information.
   * @default undefined
   */
  name: string;

  /**
   * Places the labels to the left of the radio buttons.
   * @default false
   */
  labelsLeft?: boolean;
}

export default class RadioGroup extends SvelteComponentTyped<
  RadioGroupProps,
  { change: CustomEvent<{ value: string; nativeEvent: Event }> },
  {}
> {}