@yamada-ui/tabs/dist/chunk-XFQCMVXU.mjs

Yamada UI tabs component

"use client"
import {
  useTabDescendantsContext,
  useTabsContext
} from "./chunk-BUHUHEQA.mjs";

// src/tab-list.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { cx, handlerAll } from "@yamada-ui/utils";
import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
var TabList = forwardRef(
  ({ className, ...rest }, ref) => {
    const { focusedIndex, orientation, styles, tabListProps } = useTabsContext();
    const descendants = useTabDescendantsContext();
    const isVertical = orientation === "vertical";
    const onNext = useCallback(() => {
      const next = descendants.enabledNextValue(focusedIndex);
      if (next) next.node.focus();
    }, [descendants, focusedIndex]);
    const onPrev = useCallback(() => {
      const prev = descendants.enabledPrevValue(focusedIndex);
      if (prev) prev.node.focus();
    }, [descendants, focusedIndex]);
    const onFirst = useCallback(() => {
      const first = descendants.enabledFirstValue();
      if (first) first.node.focus();
    }, [descendants]);
    const onLast = useCallback(() => {
      const last = descendants.enabledLastValue();
      if (last) last.node.focus();
    }, [descendants]);
    const onKeyDown = useCallback(
      (ev) => {
        const actions = {
          ArrowDown: () => isVertical ? onNext() : {},
          ArrowLeft: () => !isVertical ? onPrev() : {},
          ArrowRight: () => !isVertical ? onNext() : {},
          ArrowUp: () => isVertical ? onPrev() : {},
          End: onLast,
          Home: onFirst
        };
        const action = actions[ev.key];
        if (!action) return;
        ev.preventDefault();
        action(ev);
      },
      [onFirst, onLast, isVertical, onPrev, onNext]
    );
    const css = { display: "flex", ...styles.tabList };
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-tabs__list", className),
        "aria-orientation": orientation,
        role: "tablist",
        __css: css,
        ...tabListProps,
        ...rest,
        onKeyDown: handlerAll(rest.onKeyDown, onKeyDown)
      }
    );
  }
);
TabList.displayName = "TabList";
TabList.__ui__ = "TabList";

export {
  TabList
};
//# sourceMappingURL=chunk-XFQCMVXU.mjs.map