@yamada-ui/react/dist/types/components/tabs/use-tabs.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Orientation } from "../../core/system/index.types.js";
import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { Descendant } from "../../hooks/use-descendants/index.js";
import "../../index.js";
import * as react2638 from "react";

//#region src/components/tabs/use-tabs.d.ts
declare const TabDescendantsContext: react2638.Context<{
    active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLButtonElement, {}>[];
    firstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    indexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
    } | undefined) => react2638.RefCallback<HTMLButtonElement>;
    unregister: (node?: HTMLButtonElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
    values: () => Descendant<HTMLButtonElement, {}>[];
  }>, useTabDescendant: (props?: {
    disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
  } | undefined) => {
    descendants: {
      active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
      count: () => number;
      destroy: () => void;
      enabledCount: () => number;
      enabledFirstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
      enabledIndexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
      enabledLastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
      enabledNextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
      enabledPrevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
      enabledValue: (index: number) => Descendant<HTMLButtonElement, {}> | undefined;
      enabledValues: () => Descendant<HTMLButtonElement, {}>[];
      firstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
      indexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
      lastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
      nextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
      prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
      register: (props?: {
        disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
      } | undefined) => react2638.RefCallback<HTMLButtonElement>;
      unregister: (node?: HTMLButtonElement | null | undefined) => void;
      value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
      values: () => Descendant<HTMLButtonElement, {}>[];
    };
    register: react2638.RefCallback<HTMLButtonElement>;
  }, useTabDescendants: () => {
    active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLButtonElement, {}>[];
    firstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    indexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
    } | undefined) => react2638.RefCallback<HTMLButtonElement>;
    unregister: (node?: HTMLButtonElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
    values: () => Descendant<HTMLButtonElement, {}>[];
  };
declare const TabPanelDescendantsContext: react2638.Context<{
    active: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLDivElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLDivElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLDivElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLDivElement, {}>[];
    firstValue: () => Descendant<HTMLDivElement, {}> | undefined;
    indexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLDivElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLDivElement) => boolean) | undefined;
    } | undefined) => react2638.RefCallback<HTMLDivElement>;
    unregister: (node?: HTMLDivElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, {}> | undefined;
    values: () => Descendant<HTMLDivElement, {}>[];
  }>, useTabPanelDescendant: (props?: {
    disabled?: boolean | ((node: HTMLDivElement) => boolean) | undefined;
  } | undefined) => {
    descendants: {
      active: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined, options?: FocusOptions) => void;
      count: () => number;
      destroy: () => void;
      enabledCount: () => number;
      enabledFirstValue: () => Descendant<HTMLDivElement, {}> | undefined;
      enabledIndexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
      enabledLastValue: () => Descendant<HTMLDivElement, {}> | undefined;
      enabledNextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
      enabledPrevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
      enabledValue: (index: number) => Descendant<HTMLDivElement, {}> | undefined;
      enabledValues: () => Descendant<HTMLDivElement, {}>[];
      firstValue: () => Descendant<HTMLDivElement, {}> | undefined;
      indexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
      lastValue: () => Descendant<HTMLDivElement, {}> | undefined;
      nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
      prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
      register: (props?: {
        disabled?: boolean | ((node: HTMLDivElement) => boolean) | undefined;
      } | undefined) => react2638.RefCallback<HTMLDivElement>;
      unregister: (node?: HTMLDivElement | null | undefined) => void;
      value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, {}> | undefined;
      values: () => Descendant<HTMLDivElement, {}>[];
    };
    register: react2638.RefCallback<HTMLDivElement>;
  }, useTabPanelDescendants: () => {
    active: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLDivElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLDivElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLDivElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLDivElement, {}>[];
    firstValue: () => Descendant<HTMLDivElement, {}> | undefined;
    indexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLDivElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLDivElement) => boolean) | undefined;
    } | undefined) => react2638.RefCallback<HTMLDivElement>;
    unregister: (node?: HTMLDivElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, {}> | undefined;
    values: () => Descendant<HTMLDivElement, {}>[];
  };
interface TabsContext extends Omit<UseTabsReturn, "getRootProps" | "tabDescendants" | "tabPanelDescendants"> {}
declare const TabsContext: react2638.Context<TabsContext>, useTabsContext: () => TabsContext;
interface UseTabsProps extends Omit<HTMLProps, "onChange"> {
  /**
   * The index of the selected tab.
   */
  defaultIndex?: number;
  /**
   * The index of the selected tab.
   */
  index?: number;
  /**
   * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.
   *
   * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.
   *
   * @default false
   */
  manual?: boolean;
  /**
   * The orientation of the tabs.
   *
   * @default 'horizontal'
   */
  orientation?: Orientation;
  /**
   * The callback invoked when the index changes.
   */
  onChange?: (index: number) => void;
}
declare const useTabs: ({
  id,
  defaultIndex,
  index: indexProp,
  manual,
  orientation,
  onChange,
  ...rest
}?: UseTabsProps) => {
  id: string;
  focusedIndex: number;
  index: number;
  manual: boolean;
  orientation: Orientation;
  setFocusedIndex: react2638.Dispatch<react2638.SetStateAction<number>>;
  setIndex: react2638.Dispatch<react2638.SetStateAction<number>>;
  tabDescendants: {
    active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLButtonElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLButtonElement, {}>[];
    firstValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    indexOf: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLButtonElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
    } | undefined) => react2638.RefCallback<HTMLButtonElement>;
    unregister: (node?: HTMLButtonElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
    values: () => Descendant<HTMLButtonElement, {}>[];
  };
  tabPanelDescendants: {
    active: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined, options?: FocusOptions) => void;
    count: () => number;
    destroy: () => void;
    enabledCount: () => number;
    enabledFirstValue: () => Descendant<HTMLDivElement, {}> | undefined;
    enabledIndexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
    enabledLastValue: () => Descendant<HTMLDivElement, {}> | undefined;
    enabledNextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    enabledPrevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    enabledValue: (index: number) => Descendant<HTMLDivElement, {}> | undefined;
    enabledValues: () => Descendant<HTMLDivElement, {}>[];
    firstValue: () => Descendant<HTMLDivElement, {}> | undefined;
    indexOf: (target?: HTMLDivElement | Descendant<HTMLDivElement, {}> | null | undefined) => number;
    lastValue: () => Descendant<HTMLDivElement, {}> | undefined;
    nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, {}> | null, loop?: boolean) => Descendant<HTMLDivElement, {}> | undefined;
    register: (props?: {
      disabled?: boolean | ((node: HTMLDivElement) => boolean) | undefined;
    } | undefined) => react2638.RefCallback<HTMLDivElement>;
    unregister: (node?: HTMLDivElement | null | undefined) => void;
    value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, {}> | undefined;
    values: () => Descendant<HTMLDivElement, {}>[];
  };
  getListProps: PropGetter<"div", undefined, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
};
type UseTabsReturn = ReturnType<typeof useTabs>;
interface UseTabProps extends HTMLProps<"button"> {
  /**
   * The index of the tab.
   */
  index: number;
}
declare const useTab: ({
  id,
  disabled,
  index,
  ...rest
}: UseTabProps) => {
  index: number;
  selected: boolean;
  getRootProps: PropGetter<"button", undefined, undefined>;
};
type UseTabReturn = ReturnType<typeof useTab>;
interface UseTabPanelProps extends HTMLProps {
  /**
   * The index of the tab panel.
   */
  index: number;
}
declare const useTabPanel: ({
  id,
  "aria-labelledby": ariaLabelledbyProp,
  index,
  ...rest
}: UseTabPanelProps) => {
  index: number;
  selected: boolean;
  getRootProps: PropGetter<"div", undefined, undefined>;
};
type UseTabPanelReturn = ReturnType<typeof useTabPanel>;
//#endregion
export { TabDescendantsContext, TabPanelDescendantsContext, TabsContext, UseTabPanelProps, UseTabPanelReturn, UseTabProps, UseTabReturn, UseTabsProps, UseTabsReturn, useTab, useTabDescendant, useTabDescendants, useTabPanel, useTabPanelDescendant, useTabPanelDescendants, useTabs, useTabsContext };
//# sourceMappingURL=use-tabs.d.ts.map