@coveord/plasma-mantine/dist/esm/components/Header/Header.js

A Plasma flavoured Mantine theme

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Divider, Group, Stack, Text, Title, factory, useProps, useStyles } from '@mantine/core';
import { Children } from 'react';
import { HeaderProvider } from './Header.context.js';
import classes from './Header.module.css';
import { HeaderBreadcrumbAnchor } from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor.js';
import { HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';
import { HeaderBreadcrumbText } from './HeaderBreadcrumbs/HeaderBreadcrumbText.js';
import { HeaderDocAnchor } from './HeaderDocAnchor/HeaderDocAnchor.js';
import { HeaderRight } from './HeaderRight/HeaderRight.js';
const defaultProps = {
    variant: 'primary',
    justify: 'space-between',
    wrap: 'nowrap'
};
const getSpacing = (variant)=>variant === 'secondary' ? 'xxs' : 'xs';
export const Header = factory((_props, ref)=>{
    const props = useProps('PlasmaHeader', defaultProps, _props);
    const { className, description, borderBottom, variant, children, style, classNames, unstyled, vars, styles, titleComponent: TitleComponent, ...others } = props;
    const getStyles = useStyles({
        name: 'PlasmaHeader',
        props,
        classes,
        className,
        style,
        classNames,
        styles,
        unstyled,
        vars
    });
    const stylesApiProps = {
        classNames,
        styles
    };
    const convertedChildren = Children.toArray(children);
    const breadcrumbs = convertedChildren.find((child)=>child.type === HeaderBreadcrumbs);
    const right = convertedChildren.find((child)=>child.type === HeaderRight);
    const docAnchor = convertedChildren.find((child)=>child.type === HeaderDocAnchor);
    const otherChildren = convertedChildren.filter((child)=>child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor);
    return /*#__PURE__*/ _jsxs(HeaderProvider, {
        value: {
            getStyles
        },
        children: [
            /*#__PURE__*/ _jsxs(Group, {
                ref: ref,
                variant: variant,
                ...getStyles('root'),
                ...others,
                children: [
                    /*#__PURE__*/ _jsxs(Stack, {
                        gap: getSpacing(variant),
                        children: [
                            breadcrumbs,
                            /*#__PURE__*/ _jsxs(Title, {
                                variant: variant,
                                component: TitleComponent,
                                order: variant === 'primary' ? 1 : 3,
                                ...getStyles('title', stylesApiProps),
                                children: [
                                    otherChildren,
                                    docAnchor
                                ]
                            }),
                            /*#__PURE__*/ _jsx(Text, {
                                component: "div",
                                ...getStyles('description', stylesApiProps),
                                size: variant === 'primary' ? 'md' : 'sm',
                                children: description
                            })
                        ]
                    }),
                    right
                ]
            }),
            borderBottom ? /*#__PURE__*/ _jsx(Divider, {
                ...getStyles('divider', stylesApiProps),
                size: "xs"
            }) : null
        ]
    });
});
Header.displayName = 'Header';
Header.Breadcrumbs = HeaderBreadcrumbs;
Header.BreadcrumbAnchor = HeaderBreadcrumbAnchor;
Header.BreadcrumbText = HeaderBreadcrumbText;
Header.Right = HeaderRight;
Header.DocAnchor = HeaderDocAnchor;

//# sourceMappingURL=Header.js.map