@yamada-ui/react/dist/cjs/components/tabs/tabs.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_hooks_use_lazy_mount_index = require('../../hooks/use-lazy-mount/index.cjs');
const require_tabs_style = require('./tabs.style.cjs');
const require_use_tabs = require('./use-tabs.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/tabs/tabs.tsx
const { ComponentContext, PropsContext: TabsPropsContext, useComponentContext, usePropsContext: useTabsPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("tabs", require_tabs_style.tabsStyle);
/**
* `Tabs` is a component for switching between different display areas.
*
* @see https://yamada-ui.com/docs/components/tabs
*/
const TabsRoot = withProvider(({ children, items, lazy, lazyBehavior, orientation: orientationProp,...rest }) => {
	const { id, focusedIndex, index, manual, orientation, setFocusedIndex, setIndex, tabDescendants, tabPanelDescendants, getListProps, getRootProps } = require_use_tabs.useTabs({
		orientation: require_hooks_use_value_index.useValue(orientationProp),
		...rest
	});
	const componentContext = (0, react.useMemo)(() => ({
		items,
		lazy,
		lazyBehavior
	}), [
		items,
		lazy,
		lazyBehavior
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tabs.TabDescendantsContext, {
		value: tabDescendants,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tabs.TabPanelDescendantsContext, {
			value: tabPanelDescendants,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tabs.TabsContext, {
				value: (0, react.useMemo)(() => ({
					id,
					focusedIndex,
					index,
					manual,
					orientation,
					setFocusedIndex,
					setIndex,
					getListProps
				}), [
					id,
					manual,
					focusedIndex,
					index,
					orientation,
					setFocusedIndex,
					setIndex,
					getListProps
				]),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
					value: componentContext,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
						...getRootProps(),
						children
					})
				})
			})
		})
	});
}, "root", { transferProps: ["orientation"] })();
const TabsList = withContext(({ children,...rest }) => {
	const { items } = useComponentContext();
	const { getListProps } = require_use_tabs.useTabsContext();
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		else return items?.map(({ id, panel: _panel, tab, panelProps: _panelProps,...rest$1 }, index) => (0, require_utils_index.utils_exports.isUndefined)(tab) || (0, require_utils_index.utils_exports.isNull)(tab) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsTab, {
			id,
			index,
			...rest$1,
			children: tab
		}, id ?? index));
	}, [children, items]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
		...getListProps(rest),
		children: computedChildren
	});
}, "list")();
const TabsTab = withContext("button", "tab")(void 0, (props) => {
	const { getRootProps } = require_use_tabs.useTab(props);
	return getRootProps();
});
const TabsPanels = ({ children }) => {
	const { items } = useComponentContext();
	return (0, react.useMemo)(() => {
		if (children) return children;
		else return items?.map(({ id, panel, panelProps }, index) => (0, require_utils_index.utils_exports.isUndefined)(panel) || (0, require_utils_index.utils_exports.isNull)(panel) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsPanel, {
			index,
			...panelProps,
			children: panel
		}, id ?? index));
	}, [children, items]);
};
const TabsPanel = withContext("div", "panel")(void 0, (props) => {
	const { lazy, lazyBehavior } = useComponentContext();
	const { selected: mounted, getRootProps } = require_use_tabs.useTabPanel(props);
	const children = require_hooks_use_lazy_mount_index.useLazyMount({
		lazy,
		lazyBehavior,
		mounted,
		...props
	});
	return {
		...getRootProps(),
		children
	};
});

//#endregion
exports.TabsList = TabsList;
exports.TabsPanel = TabsPanel;
exports.TabsPanels = TabsPanels;
exports.TabsPropsContext = TabsPropsContext;
exports.TabsRoot = TabsRoot;
exports.TabsTab = TabsTab;
exports.useTabsPropsContext = useTabsPropsContext;
//# sourceMappingURL=tabs.cjs.map