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

package/dist/esm/components/sidebar/sidebar.js

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