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

Yamada UI tabs component

"use client"
import {
  TabList
} from "./chunk-XFQCMVXU.mjs";
import {
  TabPanel
} from "./chunk-IYJM52AT.mjs";
import {
  TabPanels
} from "./chunk-URCVY5EZ.mjs";
import {
  Tab
} from "./chunk-TXH6H2BP.mjs";
import {
  TabDescendantsContextProvider,
  TabPanelDescendantsContextProvider,
  TabsProvider,
  useTabDescendants,
  useTabPanelDescendants
} from "./chunk-BUHUHEQA.mjs";

// src/tabs.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { useControllableState } from "@yamada-ui/use-controllable-state";
import { cx, findChild, getValidChildren, pickChildren } from "@yamada-ui/utils";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Tabs = forwardRef(
  ({ align = "start", isFitted, fitted = isFitted, ...props }, ref) => {
    const [styles, mergedProps] = useComponentMultiStyle("Tabs", {
      align,
      fitted,
      ...props
    });
    const {
      className,
      children,
      defaultIndex = 0,
      disableRipple = false,
      index,
      isLazy = true,
      isManual,
      lazy = isLazy,
      lazyBehavior = "keepMounted",
      manual = isManual,
      orientation = "horizontal",
      tabListProps,
      tabPanelsProps,
      onChange,
      ...rest
    } = omitThemeProps(mergedProps);
    const [focusedIndex, setFocusedIndex] = useState(defaultIndex);
    const [selectedIndex, setSelectedIndex] = useControllableState({
      defaultValue: defaultIndex,
      value: index,
      onChange
    });
    const tabDescendants = useTabDescendants();
    const tabPanelDescendants = useTabPanelDescendants();
    const validChildren = getValidChildren(children);
    const customTabList = findChild(validChildren, TabList);
    const customTabPanels = findChild(validChildren, TabPanels);
    const cloneTabs = pickChildren(validChildren, Tab);
    const cloneTabPanels = pickChildren(validChildren, TabPanel);
    const css = { w: "100%", ...styles.container };
    useEffect(() => {
      if (index != null) setFocusedIndex(index);
    }, [index]);
    return /* @__PURE__ */ jsx(TabDescendantsContextProvider, { value: tabDescendants, children: /* @__PURE__ */ jsx(TabPanelDescendantsContextProvider, { value: tabPanelDescendants, children: /* @__PURE__ */ jsx(
      TabsProvider,
      {
        value: {
          align,
          disableRipple,
          fitted,
          focusedIndex,
          lazy,
          lazyBehavior,
          manual,
          orientation,
          selectedIndex,
          setFocusedIndex,
          setSelectedIndex,
          styles,
          tabListProps,
          tabPanelsProps
        },
        children: /* @__PURE__ */ jsxs(
          ui.div,
          {
            ref,
            className: cx("ui-tabs", className),
            __css: css,
            ...rest,
            children: [
              customTabList != null ? customTabList : /* @__PURE__ */ jsx(TabList, { children: cloneTabs }),
              customTabPanels != null ? customTabPanels : /* @__PURE__ */ jsx(TabPanels, { children: cloneTabPanels })
            ]
          }
        )
      }
    ) }) });
  }
);
Tabs.displayName = "Tabs";
Tabs.__ui__ = "Tabs";

export {
  Tabs
};
//# sourceMappingURL=chunk-RQ4KBU5Z.mjs.map