carbon-components-svelte/src/Tabs/Tabs.svelte.d.ts

Svelte implementation of the Carbon Design System

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>;
  /** Tracks which icon-only tab's tooltip is open so only one shows at a time.
   Scoped per `Tabs` instance. */
  activeTooltip: import("svelte/store").Writable<string | undefined>;
  /** Mirror the `iconOnly` prop into the context so each `Tab` reacts to it. */
  iconOnly: import("svelte/store").Writable<boolean>;
  useAutoWidth: import("svelte/store").Writable<boolean>;
  useFullWidth: import("svelte/store").Writable<boolean>;
  useDismissible: import("svelte/store").Writable<boolean>;
  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: (id: string) => void;
};

type $RestProps = SvelteHTMLElements["div"];

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

  /**
   * Specify the type of tabs.
   * @default "default"
   */
  type?: "default" | "container";

  /**
   * Set to `true` for tabs to have an auto-width
   * @default false
   */
  autoWidth?: boolean;

  /**
   * Set to `true` to render a dismiss button for each tab
   * @default false
   */
  dismissible?: boolean;

  /**
   * Set to `true` for tabs to span the full width of the container
   * @default false
   */
  fullWidth?: boolean;

  /**
   * Set to `true` to render icon-only tabs.
   * Each `Tab` displays only its `icon`; the `label` is used as the accessible
   * name and the tooltip shown on hover and focus.
   * @default false
   */
  iconOnly?: boolean;

  /**
   * Specify the icon size for icon-only tabs.
   * `"lg"` uses the large scale (48px tabs with a 20px icon);
   * the default scale is 40px tabs with a 16px icon.
   * Only applies when `iconOnly` is `true`.
   * @default "default"
   */
  iconSize?: "default" | "lg";

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

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

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

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

export default class Tabs extends SvelteComponentTyped<
  TabsProps,
  {
    change: CustomEvent<number>;
    dismiss: CustomEvent<{
        id: string;
        label: string;
        disabled: boolean;
        hasSecondaryLabel: boolean;
        index: number
      }>;
  },
  {
    default: Record<string, never>;
    content: Record<string, never>;
  }
> {}