@yamada-ui/react 2.1.8-dev-20260409043924 → 2.2.0-dev-20260409110358

package/dist/cjs/components/sidebar/sidebar.cjs

@@ -0,0 +1,687 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_children = require('../../utils/children.cjs');
+const require_context = require('../../utils/context.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
+require('../icon/index.cjs');
+const require_collapse = require('../collapse/collapse.cjs');
+require('../collapse/index.cjs');
+const require_use_breakpoint_value = require('../../hooks/use-breakpoint/use-breakpoint-value.cjs');
+require('../../hooks/use-breakpoint/index.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_use_loading_component = require('../loading/use-loading-component.cjs');
+require('../loading/index.cjs');
+const require_tooltip = require('../tooltip/tooltip.cjs');
+require('../tooltip/index.cjs');
+const require_drawer = require('../drawer/drawer.cjs');
+require('../drawer/index.cjs');
+const require_sidebar_style = require('./sidebar.style.cjs');
+const require_use_sidebar = require('./use-sidebar.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/sidebar/sidebar.tsx
+const createKey = (props, index) => {
+	return "value" in props ? props.value || index : index;
+};
+const getReactNodeOrFunction = (type, custom, root) => {
+	if ((0, require_utils_index.utils_exports.isObject)(custom) && ("group" in custom || "item" in custom)) return custom[type];
+	else if (custom) return custom;
+	else if ((0, require_utils_index.utils_exports.isObject)(root) && ("group" in root || "item" in root)) return root[type];
+	else return root;
+};
+const [GroupComponentContext, useGroupComponentContext] = require_context.createContext({ name: "GroupComponentContext" });
+const [ItemComponentContext, useItemComponentContext] = require_context.createContext({ name: "ItemComponentContext" });
+const [SidePanelComponentContext, useSidePanelComponentContext] = require_context.createContext({ name: "SidePanelComponentContext" });
+const { ComponentContext, PropsContext: SidebarPropsContext, useComponentContext, usePropsContext: useSidebarPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("sidebar", require_sidebar_style.sidebarStyle);
+/**
+* `Sidebar` is a component that is used to display a list of items in a sidebar.
+*
+* @see https://yamada-ui.com/docs/components/sidebar
+*/
+const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanvas", placement: placementProp = "start", ...rest }) => {
+	const mobile = require_use_breakpoint_value.useBreakpointValue(breakpoint ? { [breakpoint]: true } : { base: false }) ?? false;
+	const mode = require_hooks_use_value_index.useValue(modeProp);
+	const placement = require_hooks_use_value_index.useValue(placementProp);
+	const { descendants, expandedValue, open, selectedValue, getContentProps, getFooterProps, getHeaderProps, getRootProps, getSidePanelProps, getTriggerProps, onClose, onExpandedChange, onOpen, onSelectedChange, onToggle } = require_use_sidebar.useSidebar({
+		mobile,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_sidebar.SidebarDescendantsContext, {
+		value: descendants,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_sidebar.SidebarContext, {
+			value: (0, react.useMemo)(() => ({
+				expandedValue,
+				mobile,
+				open,
+				selectedValue,
+				onClose,
+				onExpandedChange,
+				onOpen,
+				onSelectedChange,
+				onToggle
+			}), [
+				mobile,
+				expandedValue,
+				open,
+				selectedValue,
+				onClose,
+				onExpandedChange,
+				onOpen,
+				onSelectedChange,
+				onToggle
+			]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+				value: (0, react.useMemo)(() => ({
+					breakpoint,
+					mode,
+					placement,
+					getContentProps,
+					getFooterProps,
+					getHeaderProps,
+					getSidePanelProps,
+					getTriggerProps
+				}), [
+					breakpoint,
+					mode,
+					placement,
+					getContentProps,
+					getFooterProps,
+					getHeaderProps,
+					getSidePanelProps,
+					getTriggerProps
+				]),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+					"data-group": true,
+					...getRootProps()
+				})
+			})
+		})
+	});
+}, "root", { transferProps: ["mode", "placement"] })();
+const SidebarMainPanel = withContext("div", "mainPanel")();
+const SidebarTrigger = withContext("button", "trigger")(void 0, (props) => {
+	const { getTriggerProps } = useComponentContext();
+	return {
+		asChild: true,
+		...getTriggerProps(props)
+	};
+});
+const SidebarSidePanel = withContext(({ animated = true, children, content, endElement, footer, header, indicator, indicatorHidden, items, loadingScheme, render, startElement, withHandle = true, contentProps, drawerProps, endElementProps, footerProps, groupContentProps, groupProps, handleProps, headerProps, indicatorProps, itemContentProps, itemProps, labelProps, linkProps, menuProps, startElementProps, tooltipProps, triggerProps, ...rest }) => {
+	const { mobile, open, onClose } = require_use_sidebar.useSidebarContext();
+	const { breakpoint, placement, getSidePanelProps } = useComponentContext();
+	const [omittedChildren, customHeader, customContent, customFooter, customHandle] = require_children.useSplitChildren(children, SidebarHeader, SidebarContent, SidebarFooter, SidebarHandle);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidePanelComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			animated,
+			endElement,
+			indicator,
+			indicatorHidden,
+			items,
+			loadingScheme,
+			render,
+			startElement,
+			contentProps,
+			endElementProps,
+			footerProps,
+			groupContentProps,
+			groupProps,
+			handleProps,
+			headerProps,
+			indicatorProps,
+			itemContentProps,
+			itemProps,
+			labelProps,
+			linkProps,
+			menuProps,
+			startElementProps,
+			tooltipProps,
+			triggerProps
+		}), [
+			animated,
+			endElement,
+			indicator,
+			indicatorHidden,
+			items,
+			render,
+			loadingScheme,
+			startElement,
+			contentProps,
+			endElementProps,
+			footerProps,
+			groupContentProps,
+			groupProps,
+			handleProps,
+			headerProps,
+			indicatorProps,
+			itemContentProps,
+			itemProps,
+			labelProps,
+			linkProps,
+			menuProps,
+			startElementProps,
+			tooltipProps,
+			triggerProps
+		]),
+		children: mobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_drawer.DrawerRoot, {
+			size: "sm",
+			autoFocus: false,
+			duration: !animated ? 0 : void 0,
+			open,
+			placement: `inline-${placement}`,
+			withCloseButton: false,
+			portalProps: { disabled: true },
+			onClose,
+			...drawerProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_drawer.DrawerContent, { children: [
+				customHeader ?? (header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarHeader, { children: header }) : null),
+				customContent ?? (content || items ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContent, { children: content }) : null),
+				customFooter ?? (footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarFooter, { children: footer }) : null)
+			] })
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarGap, {
+			"data-animated": (0, require_utils_index.utils_exports.dataAttr)(animated),
+			display: breakpoint ? {
+				base: void 0,
+				[breakpoint]: "none"
+			} : void 0
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.aside, {
+			"data-animated": (0, require_utils_index.utils_exports.dataAttr)(animated),
+			"data-group": true,
+			display: breakpoint ? {
+				base: void 0,
+				[breakpoint]: "none"
+			} : void 0,
+			...getSidePanelProps(rest),
+			children: [
+				customHeader ?? (header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarHeader, { children: header }) : null),
+				customContent ?? (content || items ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContent, { children: content }) : null),
+				customFooter ?? (footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarFooter, { children: footer }) : null),
+				customHandle ?? (withHandle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarHandle, {}) : null),
+				omittedChildren
+			]
+		})] })
+	});
+}, "sidePanel")();
+const SidebarGap = withContext("div", "gap")();
+const SidebarHeader = withContext("header", "header")(void 0, (props) => {
+	const { getHeaderProps } = useComponentContext();
+	const { headerProps } = useSidePanelComponentContext();
+	return getHeaderProps(require_props.mergeProps(headerProps, props)());
+});
+const SidebarFooter = withContext("footer", "footer")(void 0, (props) => {
+	const { getFooterProps } = useComponentContext();
+	const { footerProps } = useSidePanelComponentContext();
+	return getFooterProps(require_props.mergeProps(footerProps, props)());
+});
+const SidebarContent = withContext(({ children, items, ...rest }) => {
+	const { getContentProps } = useComponentContext();
+	const { items: rootItems, contentProps } = useSidePanelComponentContext();
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return (items ?? rootItems)?.map((props, index) => {
+			const key = createKey(props, index);
+			if ("group" in props) {
+				const { children: children$1, group: _, ...rest$1 } = props;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarGroup, {
+					items: children$1,
+					...rest$1
+				}, key);
+			} else {
+				const { children: children$1, ...rest$1 } = props;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItem, {
+					items: children$1,
+					...rest$1
+				}, key);
+			}
+		});
+	}, [
+		children,
+		items,
+		rootItems
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, {
+		...getContentProps(require_props.mergeProps(contentProps, rest)()),
+		children: computedChildren
+	});
+}, "content")();
+const SidebarHandle = withContext((props) => {
+	const { handleProps } = useSidePanelComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTrigger, {
+		...require_props.mergeProps(handleProps, props)(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.button, { tabIndex: -1 })
+	});
+}, "handle")();
+const SidebarGroup = withContext(({ children, items, label, value: valueProp = (0, require_utils_index.utils_exports.isString)(label) ? label : void 0, contentProps, labelProps, ...rest }) => {
+	const { groupProps } = useSidePanelComponentContext();
+	const [omittedChildren, customLabel, customContent] = require_children.useSplitChildren((0, react.useMemo)(() => {
+		if (children) return children;
+		return items?.map(({ children: children$1, ...rest$1 }, index) => {
+			const key = createKey(rest$1, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItem, {
+				items: children$1,
+				...rest$1
+			}, key);
+		});
+	}, [children, items]), SidebarGroupLabel, SidebarGroupContent);
+	const { getContentProps, getLabelProps, getRootProps } = require_use_sidebar.useSidebarGroup({
+		...require_props.mergeProps(groupProps, rest)(),
+		value: valueProp
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			contentProps,
+			getContentProps,
+			getLabelProps,
+			labelProps
+		}), [
+			getLabelProps,
+			labelProps,
+			getContentProps,
+			contentProps
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.li, {
+			...getRootProps(),
+			children: [customLabel ?? (label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarGroupLabel, { children: label }) : null), customContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarGroupContent, { children: omittedChildren })]
+		})
+	});
+}, "group")();
+const SidebarGroupLabel = withContext("span", "groupLabel")(void 0, (props) => {
+	const { getLabelProps, labelProps } = useGroupComponentContext();
+	return getLabelProps(require_props.mergeProps(labelProps, props)());
+});
+const SidebarGroupContent = withContext("div", "groupContent")(void 0, ({ children, ...rest }) => {
+	const list = require_children.useIncludesChildren(require_children.useValidChildren(children), SidebarItem);
+	const { groupContentProps } = useSidePanelComponentContext();
+	const { contentProps, getContentProps } = useGroupComponentContext();
+	return {
+		as: list ? "ul" : "div",
+		children,
+		...getContentProps(require_props.mergeProps(groupContentProps, contentProps, rest)())
+	};
+});
+const SidebarMenu = withContext("div", "menu")(void 0, (props) => {
+	const { menuProps } = useSidePanelComponentContext();
+	return {
+		"data-menu": "",
+		...require_props.mergeProps(menuProps, props)()
+	};
+});
+const SidebarMenuButton = withContext("button", ["menu", "button"])(void 0, (props) => {
+	const { open } = require_use_sidebar.useSidebarContext();
+	const { mode } = useComponentContext();
+	const { menuProps } = useSidePanelComponentContext();
+	const offcanvas = mode === "offcanvas";
+	const { disabled, ...rest } = require_props.mergeProps(menuProps, props)();
+	return {
+		"data-menu": "",
+		disabled,
+		...rest,
+		tabIndex: (!offcanvas || open) && !disabled ? 0 : -1
+	};
+});
+const SidebarItem = withContext(({ animated: animatedProp, asyncChildren: asyncChildrenProp, children: childrenProp, endElement, indicator: indicatorProp, items, label, loadingScheme, render, startElement, contentProps, endElementProps, indicatorProps, labelProps, linkProps, startElementProps, tooltipProps, triggerProps, ...rest }) => {
+	const { mode } = useComponentContext();
+	const offcanvas = mode === "offcanvas";
+	const componentContext = useSidePanelComponentContext();
+	const Loading = require_use_loading_component.useLoadingComponent(loadingScheme ?? componentContext.loadingScheme ?? "oval");
+	const computedChildren = (0, react.useMemo)(() => {
+		if (childrenProp) return childrenProp;
+		return items?.map(({ children: children$1, ...rest$1 }, index) => {
+			const key = createKey(rest$1, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItem, {
+				items: children$1,
+				...rest$1
+			}, key);
+		});
+	}, [childrenProp, items]);
+	const asyncChildren = (0, react.useCallback)(async () => {
+		return (await asyncChildrenProp?.())?.map(({ children: children$1, ...rest$1 }, index) => {
+			const key = createKey(rest$1, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItem, {
+				items: children$1,
+				...rest$1
+			}, key);
+		});
+	}, [asyncChildrenProp]);
+	const { branchOpen, children, disabled, expanded, expandedValue, group, groupLoading, groupOpen, open, selected, selectedValue, value, getContentProps, getIndicatorProps, getItemProps, getLabelProps, getLinkProps, getTriggerProps, onExpandedChange, onGroupClose, onGroupOpen, onGroupToggle, onSelectedChange } = require_use_sidebar.useSidebarItem({
+		...componentContext.itemProps,
+		...rest,
+		asyncChildren: asyncChildrenProp ? asyncChildren : void 0,
+		children: computedChildren
+	});
+	const animated = animatedProp ?? componentContext.animated ?? true;
+	const tabIndex = offcanvas ? open && expanded && !disabled ? 0 : -1 : expanded && !disabled ? 0 : -1;
+	const callbackProps = (0, react.useMemo)(() => ({
+		disabled,
+		expanded: groupOpen
+	}), [disabled, groupOpen]);
+	const mergedTriggerProps = (0, react.useMemo)(() => {
+		return getTriggerProps({
+			tabIndex,
+			...require_props.mergeProps(componentContext.triggerProps, triggerProps)()
+		});
+	}, [
+		getTriggerProps,
+		tabIndex,
+		componentContext.triggerProps,
+		triggerProps
+	]);
+	const mergedLinkProps = (0, react.useMemo)(() => {
+		return getLinkProps({
+			tabIndex,
+			...require_props.mergeProps(componentContext.linkProps, linkProps)()
+		});
+	}, [
+		getLinkProps,
+		tabIndex,
+		componentContext.linkProps,
+		linkProps
+	]);
+	const indicator = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(indicatorProp ?? componentContext.indicator, callbackProps), [
+		indicatorProp,
+		componentContext.indicator,
+		callbackProps
+	]);
+	const groupStartElement = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(getReactNodeOrFunction("group", startElement, componentContext.startElement), callbackProps), [
+		startElement,
+		componentContext.startElement,
+		callbackProps
+	]);
+	const groupEndElement = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(getReactNodeOrFunction("group", endElement, componentContext.endElement), callbackProps), [
+		endElement,
+		componentContext.endElement,
+		callbackProps
+	]);
+	const itemStartElement = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(getReactNodeOrFunction("item", startElement, componentContext.startElement), callbackProps), [
+		startElement,
+		componentContext.startElement,
+		callbackProps
+	]);
+	const itemEndElement = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(getReactNodeOrFunction("item", endElement, componentContext.endElement), callbackProps), [
+		endElement,
+		componentContext.endElement,
+		callbackProps
+	]);
+	const trigger = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(render?.trigger ?? componentContext.render?.trigger, {
+		endElement: groupEndElement,
+		expanded,
+		expandedValue,
+		groupLoading,
+		groupOpen,
+		indicator,
+		label,
+		selected,
+		selectedValue,
+		startElement: groupStartElement,
+		value,
+		triggerProps: mergedTriggerProps,
+		onExpandedChange,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle,
+		onSelectedChange
+	}), [
+		render?.trigger,
+		componentContext.render?.trigger,
+		groupEndElement,
+		expanded,
+		expandedValue,
+		groupLoading,
+		groupOpen,
+		indicator,
+		label,
+		selected,
+		selectedValue,
+		groupStartElement,
+		value,
+		mergedTriggerProps,
+		onExpandedChange,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle,
+		onSelectedChange
+	]);
+	const link = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(render?.link ?? componentContext.render?.link, {
+		endElement: itemEndElement,
+		expanded,
+		expandedValue,
+		label,
+		selected,
+		selectedValue,
+		startElement: itemStartElement,
+		value,
+		linkProps: mergedLinkProps,
+		onExpandedChange,
+		onSelectedChange
+	}), [
+		render?.link,
+		componentContext.render?.link,
+		itemEndElement,
+		expanded,
+		expandedValue,
+		label,
+		selected,
+		selectedValue,
+		itemStartElement,
+		value,
+		mergedLinkProps,
+		onExpandedChange,
+		onSelectedChange
+	]);
+	const item = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(render?.item ?? componentContext.render?.item, {
+		children,
+		endElement: {
+			group: groupEndElement,
+			item: itemEndElement
+		},
+		expanded,
+		expandedValue,
+		group,
+		groupLoading,
+		groupOpen,
+		indicator,
+		label,
+		link,
+		selected,
+		selectedValue,
+		startElement: {
+			group: groupStartElement,
+			item: itemStartElement
+		},
+		trigger,
+		value,
+		itemProps: getItemProps(),
+		linkProps: mergedLinkProps,
+		triggerProps: mergedTriggerProps,
+		onExpandedChange,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle,
+		onSelectedChange
+	}), [
+		render?.item,
+		componentContext.render?.item,
+		children,
+		groupEndElement,
+		itemEndElement,
+		expanded,
+		expandedValue,
+		group,
+		groupLoading,
+		groupOpen,
+		indicator,
+		label,
+		link,
+		selected,
+		selectedValue,
+		groupStartElement,
+		itemStartElement,
+		trigger,
+		value,
+		getItemProps,
+		mergedLinkProps,
+		mergedTriggerProps,
+		onExpandedChange,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle,
+		onSelectedChange
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_sidebar.SidebarItemContext, {
+		value: (0, react.useMemo)(() => ({
+			branchOpen,
+			groupOpen
+		}), [branchOpen, groupOpen]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemComponentContext, {
+			value: (0, react.useMemo)(() => ({
+				contentProps: {
+					duration: !animated ? 0 : void 0,
+					open: groupOpen,
+					...getContentProps(require_props.mergeProps(componentContext.itemContentProps, contentProps)())
+				},
+				endElementProps: require_props.mergeProps(componentContext.endElementProps, endElementProps)(),
+				indicatorProps: getIndicatorProps({
+					"data-animated": (0, require_utils_index.utils_exports.dataAttr)(animated),
+					...require_props.mergeProps(componentContext.indicatorProps, indicatorProps)()
+				}),
+				labelProps: getLabelProps(require_props.mergeProps(componentContext.labelProps, labelProps)()),
+				startElementProps: require_props.mergeProps(componentContext.startElementProps, startElementProps)(),
+				tooltipProps: {
+					content: label,
+					disabled: open,
+					...require_props.mergeProps(componentContext.tooltipProps, tooltipProps)()
+				}
+			}), [
+				animated,
+				componentContext.endElementProps,
+				componentContext.indicatorProps,
+				componentContext.itemContentProps,
+				componentContext.labelProps,
+				componentContext.startElementProps,
+				componentContext.tooltipProps,
+				contentProps,
+				endElementProps,
+				getContentProps,
+				getIndicatorProps,
+				getLabelProps,
+				groupOpen,
+				indicatorProps,
+				label,
+				labelProps,
+				open,
+				startElementProps,
+				tooltipProps
+			]),
+			children: item ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.li, {
+				...getItemProps(),
+				children: group ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [trigger ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SidebarItemTrigger, {
+					...mergedTriggerProps,
+					children: [
+						groupStartElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemStartElement, { children: groupStartElement }) : null,
+						label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemLabel, { children: label }) : null,
+						groupEndElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemEndElement, { children: groupEndElement }) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemIndicator, { children: groupLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loading, {}) : (0, require_utils_index.utils_exports.runIfFn)(indicator, callbackProps) })
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemContent, { children })] }) : link ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SidebarItemLink, {
+					...mergedLinkProps,
+					children: [
+						itemStartElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemStartElement, { children: itemStartElement }) : null,
+						label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemLabel, { children: label }) : null,
+						itemEndElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemEndElement, { children: itemEndElement }) : null
+					]
+				})
+			})
+		})
+	});
+}, "item")();
+const SidebarItemTooltip = (props) => {
+	const { tooltipProps } = useItemComponentContext();
+	const { children, disabled, ...rest } = {
+		...tooltipProps,
+		...props
+	};
+	const { mode, placement } = useComponentContext();
+	if (mode === "offcanvas" || disabled) return children;
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+		closeOnClick: false,
+		gutter: 16,
+		placement: `center-${placement === "start" ? "end" : "start"}`,
+		...rest,
+		children
+	});
+};
+const SidebarItemTrigger = withContext((props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemTooltip, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.button, { ...props }) });
+}, "itemTrigger")();
+const SidebarItemLink = withContext((props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemTooltip, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.a, { ...props }) });
+}, "itemLink")();
+const SidebarItemContent = withContext((props) => {
+	const { contentProps = {} } = useItemComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_collapse.Collapse, {
+		as: "ul",
+		...(0, require_utils_index.utils_exports.cast)(require_props.mergeProps(contentProps, props)())
+	});
+}, "itemContent")();
+const SidebarItemIndicator = withContext(({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}), ...rest }) => {
+	const { indicatorHidden } = useSidePanelComponentContext();
+	if (indicatorHidden) return null;
+	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
+		...rest,
+		...children.props
+	});
+	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
+}, "itemIndicator")(void 0, (props) => {
+	const { indicatorProps } = useItemComponentContext();
+	return require_props.mergeProps(indicatorProps, props)();
+});
+const SidebarItemStartElement = withContext("div", {
+	name: "ItemStartElement",
+	slot: ["itemElement", "start"]
+})(void 0, (props) => {
+	const { startElementProps } = useItemComponentContext();
+	return require_props.mergeProps(startElementProps, props)();
+});
+const SidebarItemEndElement = withContext("div", {
+	name: "ItemEndElement",
+	slot: ["itemElement", "end"]
+})(void 0, (props) => {
+	const { endElementProps } = useItemComponentContext();
+	return require_props.mergeProps(endElementProps, props)();
+});
+const SidebarItemLabel = withContext("span", "itemLabel")(void 0, (props) => {
+	const { labelProps } = useItemComponentContext();
+	return require_props.mergeProps(labelProps, props)();
+});
+
+//#endregion
+exports.SidebarContent = SidebarContent;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarGroupContent = SidebarGroupContent;
+exports.SidebarGroupLabel = SidebarGroupLabel;
+exports.SidebarHandle = SidebarHandle;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarItem = SidebarItem;
+exports.SidebarItemContent = SidebarItemContent;
+exports.SidebarItemEndElement = SidebarItemEndElement;
+exports.SidebarItemIndicator = SidebarItemIndicator;
+exports.SidebarItemLabel = SidebarItemLabel;
+exports.SidebarItemLink = SidebarItemLink;
+exports.SidebarItemStartElement = SidebarItemStartElement;
+exports.SidebarItemTrigger = SidebarItemTrigger;
+exports.SidebarMainPanel = SidebarMainPanel;
+exports.SidebarMenu = SidebarMenu;
+exports.SidebarMenuButton = SidebarMenuButton;
+exports.SidebarPropsContext = SidebarPropsContext;
+exports.SidebarRoot = SidebarRoot;
+exports.SidebarSidePanel = SidebarSidePanel;
+exports.SidebarTrigger = SidebarTrigger;
+exports.useSidebarPropsContext = useSidebarPropsContext;
+//# sourceMappingURL=sidebar.cjs.map