import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

export type CarbonTabsContext = {
  tabs: import("svelte/store").Writable<ReadonlyArray<{
        id: string;
        label: string;
        disabled: boolean;
        hasSecondaryLabel: boolean;
        index: number
      }>>;
  contentById: import("svelte/store").Readable<Record<string, {
        id: string;
        index: number
      }>>;
  selectedTab: import("svelte/store").Writable<string | undefined>;
  selectedContent: import("svelte/store").Writable<string | undefined>;
  activeTooltip: any;
  iconOnly: any;
  useAutoWidth: any;
  useFullWidth: any;
  useDismissible: any;
  hasSecondaryLabel: any;
  add: (data: {
      id: string;
      label: string;
      disabled: boolean;
      hasSecondaryLabel: boolean
    }) => void;
  remove: (id: string) => void;
  addContent: (data: { id: string }) => void;
  removeContent: (id: string) => void;
  update: (id: string) => void;
  dismiss: any;
};

type $RestProps = SvelteHTMLElements["div"];

type $Props = {
  /**
   * Specify the selected tab index.
   * @default 0
   */
  selected?: number;

  /**
   * Specify the size of the vertical tabs.
   * `"xl"` matches the default height.
   * @default "xl"
   */
  size?: "sm" | "md" | "lg" | "xl";

  content?: (this: void) => void;

  children?: (this: void) => void;

  [key: `data-${string}`]: unknown;
};

export type TabsVerticalProps = Omit<$RestProps, keyof $Props> & $Props;

export default class TabsVertical extends SvelteComponentTyped<
  TabsVerticalProps,
  { change: CustomEvent<number> },
  {
    default: Record<string, never>;
    content: Record<string, never>;
  }
> {}