@veracity/vui
Version:
Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.
50 lines (47 loc) • 1.9 kB
JavaScript
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { BreadcrumbsProvider } from "./context.js";
import { BreadcrumbsItem } from "./breadcrumbsItem.js";
import { BreadcrumbsSeparator } from "./breadcrumbsSeparator.js";
import { Children, Fragment, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/breadcrumbs/breadcrumbs.tsx
const BreadcrumbsBase = styled.divBox`
display: flex;
min-width: 0;
transition-duration: normal;
.vui-breadcrumbs-item:last-of-type {
font-weight: 600;
}
`;
/** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
const Breadcrumbs = vui((props, ref) => {
const { children, className, size, variant, ...rest } = props;
const styles = useStyleConfig("Breadcrumbs", props);
const context = useMemo(() => filterUndefined({
size,
variant
}), [size, variant]);
const aliasedProps = filterUndefined({});
const arrayChildren = Children.toArray(children);
return /* @__PURE__ */ jsx(BreadcrumbsProvider, {
value: context,
children: /* @__PURE__ */ jsx(BreadcrumbsBase, {
className: cs("vui-breadcrumbs", className),
ref,
...styles.main,
...aliasedProps,
...rest,
children: Children.map(arrayChildren, (child, key) => /* @__PURE__ */ jsxs(Fragment, { children: [child, key !== arrayChildren.length - 1 && /* @__PURE__ */ jsx(BreadcrumbsSeparator, {})] }, key))
})
});
});
Breadcrumbs.Item = BreadcrumbsItem;
Breadcrumbs.displayName = "Breadcrumbs";
//#endregion
export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=breadcrumbs.js.map