@yamada-ui/react/dist/esm/components/breadcrumb/breadcrumb.js

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { ChevronRightIcon } from "../icon/icons/chevron-right-icon.js";
import { EllipsisIcon } from "../icon/icons/ellipsis-icon.js";
import { breadcrumbStyle } from "./breadcrumb.style.js";
import { useBreadcrumb } from "./use-breadcrumb.js";
import { Fragment, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/breadcrumb/breadcrumb.tsx
const { ComponentContext, PropsContext: BreadcrumbPropsContext, useComponentContext, usePropsContext: useBreadcrumbPropsContext, withContext, withProvider } = createSlotComponent("breadcrumb", breadcrumbStyle);
/**
* `Breadcrumb` is a component that helps users understand the hierarchy of a website.
*
* @see https://yamada-ui.com/docs/components/breadcrumb
*/
const BreadcrumbRoot = withProvider(({ endBoundaries, gap, separator, startBoundaries, itemProps, listProps, separatorProps,...rest }) => {
	const { children, getEllipsisProps, getLinkProps, getListProps, getRootProps } = useBreadcrumb({
		ellipsis: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}),
		endBoundaries,
		link: /* @__PURE__ */ jsx(BreadcrumbLink, {}),
		startBoundaries,
		...rest
	});
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({
			getEllipsisProps,
			getLinkProps
		}), [getEllipsisProps, getLinkProps]),
		children: /* @__PURE__ */ jsx(styled.nav, {
			...getRootProps(),
			children: /* @__PURE__ */ jsx(BreadcrumbList, {
				...getListProps({
					gap,
					...listProps
				}),
				children: children.map((child, index) => {
					const last = index === children.length - 1;
					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, {
						...itemProps,
						children: child
					}), !last ? /* @__PURE__ */ jsx(BreadcrumbSeparator, {
						...separatorProps,
						children: separator
					}) : null] }, index);
				})
			})
		})
	});
}, "root")();
const BreadcrumbList = withContext("ol", "list")();
const BreadcrumbItem = withContext("li", "item")();
const BreadcrumbSeparator = withContext(BreadcrumbItem, "separator")(({ children,...rest }) => ({
	children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {}),
	...rest
}));
const BreadcrumbLink = withContext("a", "link")(void 0, ({ currentPage,...rest }) => {
	const { getLinkProps } = useComponentContext();
	return {
		as: !currentPage ? "a" : "span",
		...getLinkProps({
			currentPage,
			...rest
		})
	};
});
const BreadcrumbEllipsis = withContext(EllipsisIcon, "ellipsis")(void 0, (props) => {
	const { getEllipsisProps } = useComponentContext();
	return { ...getEllipsisProps(props) };
});

//#endregion
export { BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPropsContext, BreadcrumbRoot, useBreadcrumbPropsContext };
//# sourceMappingURL=breadcrumb.js.map