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

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

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

  /**
   * A class string to add to the wrapping `<span>` around the chips' labels. If it's not specified, the `<span>` will not be added.
   * @default null
   */
  labelClass?: string | false | null;

  /**
   * An array of items, 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 of this radio button group. Check [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more information.
   * @default undefined
   */
  name: string;
}

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