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

Yamada UI tabs component

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

// src/tab.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { Ripple, useRipple } from "@yamada-ui/ripple";
import { useClickable } from "@yamada-ui/use-clickable";
import { cx, handlerAll, mergeRefs } from "@yamada-ui/utils";
import { useId } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Tab = forwardRef(
  ({
    id,
    className,
    children,
    clickOnEnter,
    clickOnSpace,
    isDisabled,
    disabled = isDisabled,
    isFocusable,
    focusable = isFocusable,
    ...rest
  }, ref) => {
    var _a;
    const uuid = useId();
    const {
      disableRipple,
      manual,
      orientation,
      selectedIndex,
      setFocusedIndex,
      setSelectedIndex,
      styles
    } = useTabsContext();
    const { index, register } = useTabDescendant({
      disabled: disabled && !focusable
    });
    const { descendants } = useTabPanelDescendant();
    const tabpanelId = (_a = descendants.value(index)) == null ? void 0 : _a.node.id;
    const isSelected = index === selectedIndex;
    const css = {
      alignItems: "center",
      display: "flex",
      justifyContent: "center",
      outline: "0",
      overflow: "hidden",
      position: "relative",
      ...styles.tab
    };
    id != null ? id : id = uuid;
    const onFocus = () => {
      setFocusedIndex(index);
      if (!manual && !(disabled && focusable)) setSelectedIndex(index);
    };
    const clickableProps = useClickable({
      id,
      "aria-controls": tabpanelId,
      "aria-selected": isSelected,
      role: "tab",
      ...rest,
      ref: mergeRefs(register, ref),
      clickOnEnter,
      clickOnSpace,
      disabled,
      focusable,
      onClick: handlerAll(rest.onClick, () => setSelectedIndex(index)),
      onFocus: disabled ? void 0 : handlerAll(rest.onFocus, onFocus)
    });
    const { onPointerDown, ...rippleProps } = useRipple({
      ...clickableProps,
      disabled: disableRipple || disabled
    });
    return /* @__PURE__ */ jsxs(
      ui.button,
      {
        className: cx("ui-tabs__tab", className),
        __css: css,
        ...clickableProps,
        type: "button",
        "data-orientation": orientation,
        tabIndex: isSelected ? 0 : -1,
        onPointerDown,
        children: [
          children,
          /* @__PURE__ */ jsx(Ripple, { ...rippleProps })
        ]
      }
    );
  }
);
Tab.displayName = "Tab";
Tab.__ui__ = "Tab";

export {
  Tab
};
//# sourceMappingURL=chunk-TXH6H2BP.mjs.map