@lnco-ai/ui 1.0.0

package/dist/Main/LogoHeader.d.ts

@@ -0,0 +1,2 @@
+declare const LogoHeader: () => JSX.Element;
+export default LogoHeader;

package/dist/Main/LogoHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from '@mui/material';
+import GraaspLogo from '../GraaspLogo/GraaspLogo.js';
+const LogoHeader = () => (_jsxs(Stack, { direction: 'row', alignItems: 'center', textTransform: 'none', color: 'inherit', sx: { marginRight: '8px' }, children: [_jsx(GraaspLogo, { height: 50 }), _jsx(Typography, { sx: { display: { xs: 'none', sm: 'block' } }, color: 'currentcolor', variant: 'h6', children: "LNCO.ai" })] }));
+export default LogoHeader;

package/dist/Main/Main.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { AllowedContext } from '../types.js';
+type Props = {
+    /**
+     * Platform value which defines what color to use in the header.
+     */
+    context?: `${AllowedContext}` | AllowedContext;
+    /**
+     * Content to display inside the drawer / sidebar
+     */
+    drawerContent: ReactNode;
+    /**
+     * Content to display inside the footer
+     */
+    footerContent?: ReactNode;
+    /**
+     * Content to display inside the main area.
+     * This is usually the page content
+     */
+    children: ReactNode;
+    /**
+     * Left content presented in the header
+     */
+    headerLeftContent?: ReactNode;
+    /**
+     * Right content presented in the header
+     */
+    headerRightContent?: ReactNode;
+    /**
+     * Override the state of the drawer
+     * defaults to `false`
+     */
+    open?: boolean;
+    /**
+     * Wrapper component that supplies a link facility wrapping the logo
+     */
+    LinkComponent?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * Component that should be rendered to show the platform switch
+     */
+    PlatformComponent?: JSX.Element;
+    /**
+     * Id of the header element for testing purposes
+     */
+    headerId?: string;
+    /**
+     * Aria label to put on the button that opens and closes the drawer
+     * This should be a translated string reading i.e: `open drawer`
+     */
+    drawerOpenAriaLabel: string;
+    /**
+     * Color of the background
+     */
+    backgroundColor?: string;
+};
+declare const MainWithDrawerWrapper: (props: Props) => JSX.Element;
+export default MainWithDrawerWrapper;

package/dist/Main/Main.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MenuIcon } from 'lucide-react';
+import { MenuOpen } from '@mui/icons-material';
+import { AppBar, Box, CssBaseline, Drawer, IconButton, Stack, Toolbar, styled, } from '@mui/material';
+import { useEffect } from 'react';
+import { MainMenuOpenContextProvider, useMainMenuOpenContext, } from '../MainMenu/hooks.js';
+import { AccentColors, DEFAULT_BACKGROUND_COLOR, PRIMARY_COLOR, } from '../theme.js';
+import LogoHeader from './LogoHeader.js';
+const DRAWER_WIDTH = 240;
+const buildHeaderGradient = (color) => `linear-gradient(90deg, ${PRIMARY_COLOR} 35%, ${color} 100%);`;
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const openDrawerStyles = (theme) => ({
+    width: '100%',
+    // conditional styles applied when screen is larger than mobile
+    [theme.breakpoints.up('sm')]: {
+        marginLeft: `${DRAWER_WIDTH}px`,
+        width: `calc(100% - ${DRAWER_WIDTH}px)`,
+    },
+    // create transition for width and margin property
+    transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+    }),
+});
+const StyledMain = styled('main', {
+    shouldForwardProp: (prop) => !['open', 'backgroundColor'].includes(prop),
+})(({ theme, open, backgroundColor }) => ({
+    position: 'relative',
+    flexGrow: 1,
+    backgroundColor,
+    // create transition for width and margin property
+    transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.easeIn,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    // conditional styled applied only when drawer is opened
+    ...(open && openDrawerStyles(theme)),
+}));
+const StyledFooter = styled('footer', {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({ theme, open }) => ({
+    ...(open && openDrawerStyles(theme)),
+}));
+const MainWithDrawerContent = ({ context, drawerContent, footerContent, children, headerLeftContent, headerRightContent, open: openOverride, headerId, drawerOpenAriaLabel, LinkComponent, PlatformComponent, backgroundColor = DEFAULT_BACKGROUND_COLOR, }) => {
+    const { open, setOpen } = useMainMenuOpenContext();
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+    const handleDrawerToggle = () => {
+        setOpen((state) => !state);
+    };
+    useEffect(() => {
+        if (openOverride !== undefined) {
+            setOpen(openOverride);
+        }
+    }, [openOverride]);
+    return (_jsxs(_Fragment, { children: [_jsx(CssBaseline, {}), _jsx(AppBar, { id: headerId, position: 'fixed', sx: {
+                    background: context
+                        ? buildHeaderGradient(AccentColors[context])
+                        : PRIMARY_COLOR,
+                }, children: _jsx(Toolbar, { children: _jsxs(Stack, { width: '100%', direction: 'row', alignItems: 'center', justifyContent: 'space-between', spacing: 2, flex: 1, minWidth: 0, children: [_jsxs(Stack, { direction: 'row', alignItems: 'center', flex: 1, minWidth: 0, spacing: 1, children: [_jsx(IconButton, { color: 'inherit', "aria-label": drawerOpenAriaLabel, onClick: handleDrawerToggle, edge: 'start', "data-umami-event": 'header-drawer-toggle', "data-umami-event-context": context, "data-umami-event-open": open, children: open ? _jsx(MenuOpen, {}) : _jsx(MenuIcon, {}) }), LinkComponent && LinkComponent({ children: _jsx(LogoHeader, {}) }), PlatformComponent, headerLeftContent] }), headerRightContent] }) }) }), _jsxs(Box, { component: 'nav', "aria-label": 'navigation', children: [_jsxs(Drawer, { variant: 'temporary', open: open, onClose: handleDrawerClose, ModalProps: {
+                            keepMounted: true, // Better open performance on mobile.
+                        }, sx: {
+                            display: { xs: 'block', sm: 'none' },
+                            '& .MuiDrawer-paper': {
+                                boxSizing: 'border-box',
+                                width: DRAWER_WIDTH,
+                                backgroundColor,
+                            },
+                        }, children: [_jsx(Toolbar, {}), drawerContent] }), _jsxs(Drawer, { variant: 'persistent', sx: {
+                            display: { xs: 'none', sm: 'block' },
+                            '& .MuiDrawer-paper': {
+                                boxSizing: 'border-box',
+                                width: DRAWER_WIDTH,
+                                backgroundColor,
+                            },
+                        }, open: open, children: [_jsx(Toolbar, {}), drawerContent] })] }), _jsx(Toolbar, {}), _jsx(StyledMain, { open: open, backgroundColor: backgroundColor, children: children }), _jsx(StyledFooter, { open: open, children: footerContent })] }));
+};
+// this wrapper is necessary because we use the `useMainMenuOpenContext` in the
+// Content and we need to define the provider before using the hook.
+const MainWithDrawerWrapper = (props) => (_jsx(Box, { height: '100vh', overflow: 'auto', display: 'flex', flexDirection: 'column', children: _jsx(MainMenuOpenContextProvider, { open: props.open, children: _jsx(MainWithDrawerContent, { ...props }) }) }));
+export default MainWithDrawerWrapper;

package/dist/MainMenu/MainMenu.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type MainMenuProps = {
+    id?: string;
+    children?: ReactNode;
+    /** whether container is full height
+     * this allows possible footer elements */
+    fullHeight?: boolean;
+};
+export declare const MainMenu: ({ id, children, fullHeight, }: MainMenuProps) => JSX.Element;
+export default MainMenu;

package/dist/MainMenu/MainMenu.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from '@mui/material';
+export const MainMenu = ({ id, children, fullHeight, }) => {
+    return (_jsx(List, { id: id, sx: { height: fullHeight ? '100%' : undefined }, children: children }));
+};
+export default MainMenu;

package/dist/MainMenu/MenuItem/MenuItem.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, SyntheticEvent } from 'react';
+export type MenuItemProps = {
+    icon?: ReactElement;
+    id?: string;
+    key?: string;
+    onClick?: (event?: SyntheticEvent) => void;
+    text?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    /**
+     * Name of the event that will be sent to Umami for tracking user actions
+     */
+    dataUmamiEvent?: string;
+};
+export declare const MenuItem: ({ icon, id, key, onClick, text, selected, disabled, dataUmamiEvent, }: MenuItemProps) => JSX.Element;
+export default MenuItem;

package/dist/MainMenu/MenuItem/MenuItem.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListItem, ListItemButton, ListItemIcon, ListItemText, } from '@mui/material';
+import { useMobileView } from '../../hooks/useMobileView.js';
+import { useMainMenuOpenContext } from '../hooks.js';
+export const MenuItem = ({ icon, id, key, onClick, text, selected, disabled, dataUmamiEvent, }) => {
+    const { setOpen } = useMainMenuOpenContext();
+    const { isMobile } = useMobileView();
+    const onNavigate = () => {
+        if (isMobile) {
+            setOpen(false);
+        }
+        onClick?.();
+    };
+    return (_jsx(ListItem, { disablePadding: true, id: id, children: _jsxs(ListItemButton, { onClick: onNavigate, disabled: disabled, selected: selected, "data-umami-event": dataUmamiEvent, children: [icon && _jsx(ListItemIcon, { children: icon }), text && _jsx(ListItemText, { primary: text })] }) }, key));
+};
+export default MenuItem;

package/dist/MainMenu/hooks.d.ts

@@ -0,0 +1,10 @@
+type MainMenuOpenContextType = {
+    open: boolean;
+    setOpen: (newState: boolean | ((state: boolean) => boolean)) => void;
+};
+export declare const MainMenuOpenContextProvider: ({ open: initialOpen, children, }: {
+    open?: boolean;
+    children: JSX.Element | JSX.Element[];
+}) => JSX.Element;
+export declare const useMainMenuOpenContext: () => MainMenuOpenContextType;
+export {};

package/dist/MainMenu/hooks.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { useMobileView } from '../hooks/useMobileView.js';
+const MainMenuOpenContext = createContext({
+    open: true,
+    setOpen: () => {
+        console.error('No Provider found for this context. Check your tree');
+    },
+});
+export const MainMenuOpenContextProvider = ({ open: initialOpen = true, children, }) => {
+    const { isMobile } = useMobileView();
+    // the initial open state is:
+    // on mobile: always closed by default
+    // on desktop: initialized by the state passed by the parent, or open if not specified
+    const [open, setOpen] = useState(isMobile ? false : initialOpen);
+    return (_jsx(MainMenuOpenContext.Provider, { value: {
+            open,
+            setOpen,
+        }, children: children }));
+};
+export const useMainMenuOpenContext = () => useContext(MainMenuOpenContext);

package/dist/Navigation/CurrentItemNavigation.d.ts

@@ -0,0 +1,15 @@
+import { LinkProps } from 'react-router-dom';
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+import { ItemMenuProps } from './ItemMenu.js';
+export type CurrentItemProps = {
+    item: DiscriminatedItem;
+    buildBreadcrumbsItemLinkId?: (id: string) => string;
+    buildIconId?: (id: string) => string;
+    buildMenuId?: (id: string) => string;
+    buildMenuItemId?: (id: string) => string;
+    useChildren: ItemMenuProps['useChildren'];
+    buildToItemPath: (id: string) => LinkProps['to'];
+    showArrow: boolean;
+};
+declare const CurrentItemNavigation: ({ item, buildBreadcrumbsItemLinkId, buildToItemPath, useChildren, buildIconId, buildMenuId, buildMenuItemId, showArrow, }: CurrentItemProps) => JSX.Element | null;
+export default CurrentItemNavigation;

package/dist/Navigation/CurrentItemNavigation.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import truncate from 'lodash.truncate';
+import { Typography } from '@mui/material';
+import { ItemType } from '@lnco-ai/sdk';
+import ItemMenu from './ItemMenu.js';
+import CenterAlignWrapper from './common/CenterAlignWrapper.js';
+import NavigationLink from './common/NavigationLink.js';
+import { ITEM_NAME_MAX_LENGTH } from './common/constants.js';
+const CurrentItemNavigation = ({ item, buildBreadcrumbsItemLinkId, buildToItemPath, useChildren, buildIconId, buildMenuId, buildMenuItemId, showArrow, }) => {
+    return (_jsxs(CenterAlignWrapper, { children: [_jsx(NavigationLink, { id: buildBreadcrumbsItemLinkId?.(item.id), to: buildToItemPath(item?.id), children: _jsx(Typography, { children: truncate(item.name, { length: ITEM_NAME_MAX_LENGTH }) }) }, item.id), (item.type === ItemType.FOLDER || showArrow) && (_jsx(ItemMenu, { useChildren: useChildren, itemId: item.id, buildToItemPath: buildToItemPath, buildIconId: buildIconId, buildMenuItemId: buildMenuItemId, buildMenuId: buildMenuId, renderArrow: showArrow }))] }));
+};
+export default CurrentItemNavigation;

package/dist/Navigation/ExtraItemsMenu.d.ts

@@ -0,0 +1,10 @@
+import { MenuItemType } from './Navigation.js';
+export type ExtraItemsMenuProps = {
+    icon?: JSX.Element;
+    menuItems: MenuItemType[];
+    buildIconId?: (id: string) => string;
+    buildMenuId?: (itemId: string) => string;
+    name: string;
+};
+declare const ExtraItemsMenu: ({ icon, menuItems, buildIconId, buildMenuId, name, }: ExtraItemsMenuProps) => JSX.Element;
+export default ExtraItemsMenu;

package/dist/Navigation/ExtraItemsMenu.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from 'lucide-react';
+import { IconButton, Menu, MenuItem, Typography, } from '@mui/material';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+const Separator = _jsx(ChevronRightIcon, { "data-testid": 'NavigateNextIcon' });
+const ExtraItemsMenu = ({ icon = Separator, menuItems, buildIconId, buildMenuId, name, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: handleClick, "aria-haspopup": 'true', id: buildIconId?.(name), "aria-expanded": open ? true : undefined, children: icon }), _jsx(Menu, { anchorEl: anchorEl, open: open, id: buildMenuId?.(name), onClose: handleClose, onClick: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, children: menuItems?.map(({ name, path }) => (_jsx(MenuItem, { component: Link, to: path, children: _jsx(Typography, { children: name }) }, name))) })] }));
+};
+export default ExtraItemsMenu;

package/dist/Navigation/ExtraItemsNavigation.d.ts

@@ -0,0 +1,11 @@
+import { MenuItemType } from './Navigation.js';
+export interface ExtraItem {
+    name: string;
+    path: string;
+    icon?: JSX.Element;
+    menuItems?: MenuItemType[];
+}
+declare const ExtraItemsNavigation: ({ extraItems, }: {
+    extraItems: ExtraItem[];
+}) => JSX.Element[] | null;
+export default ExtraItemsNavigation;

package/dist/Navigation/ExtraItemsNavigation.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import truncate from 'lodash.truncate';
+import { Box, Typography } from '@mui/material';
+import ExtraItemsMenu from './ExtraItemsMenu.js';
+import CenterAlignWrapper from './common/CenterAlignWrapper.js';
+import NavigationLink from './common/NavigationLink.js';
+import { ITEM_NAME_MAX_LENGTH } from './common/constants.js';
+const ExtraItemsNavigation = ({ extraItems, }) => {
+    return extraItems.map(({ icon, name, path, menuItems }) => (_jsxs(CenterAlignWrapper, { children: [_jsxs(Box, { display: 'flex', gap: 1, children: [icon, _jsx(NavigationLink, { to: path, children: _jsx(Typography, { children: truncate(name, { length: ITEM_NAME_MAX_LENGTH }) }) })] }), menuItems && menuItems.length > 0 && (_jsx(ExtraItemsMenu, { menuItems: menuItems, name: name }))] })));
+};
+export default ExtraItemsNavigation;

package/dist/Navigation/HomeMenu.d.ts

@@ -0,0 +1,17 @@
+type Props = {
+    selected: {
+        name: string;
+        id: string;
+        to: string;
+    };
+    elements: {
+        name: string;
+        id: string;
+        to: string;
+    }[];
+    menuId?: string;
+    buildMenuItemId?: (itemId: string) => string;
+    homeDropdownId?: string;
+};
+declare const HomeMenu: ({ buildMenuItemId, elements, homeDropdownId, menuId, selected, }: Props) => JSX.Element;
+export default HomeMenu;

package/dist/Navigation/HomeMenu.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, HomeIcon } from 'lucide-react';
+import { IconButton, Menu, MenuItem, Typography, } from '@mui/material';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import NavigationLink from './common/NavigationLink.js';
+const Separator = _jsx(ChevronRightIcon, { "data-testid": 'NavigateNextIcon' });
+const HomeMenu = ({ buildMenuItemId, elements, homeDropdownId, menuId, selected, }) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const onClick = () => {
+        handleClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(HomeIcon, {}), _jsx(IconButton, { onClick: handleClick, id: homeDropdownId, "aria-controls": open ? 'root' : undefined, "aria-haspopup": 'true', "aria-expanded": open ? true : undefined, children: Separator }), _jsx(Menu, { anchorEl: anchorEl, open: open, id: menuId, onClose: handleClose, onClick: onClick, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, children: elements.map(({ name, id, to }) => (_jsx(MenuItem, { component: Link, to: to, id: buildMenuItemId?.(id), children: _jsx(Typography, { children: name }) }, id))) }), _jsx(NavigationLink, { to: selected.to, children: _jsx(Typography, { children: selected.name }) }, selected.id)] }));
+};
+export default HomeMenu;

package/dist/Navigation/ItemMenu.d.ts

@@ -0,0 +1,16 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { LinkProps } from 'react-router-dom';
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+export declare const Separator: import("react/jsx-runtime").JSX.Element;
+export type ItemMenuProps = {
+    buildIconId?: (id: string) => string;
+    buildMenuId?: (itemId: string) => string;
+    buildMenuItemId?: (itemId: string) => string;
+    buildToItemPath: (itemId: string) => LinkProps['to'];
+    icon?: JSX.Element;
+    itemId: string;
+    useChildren: (...args: unknown[]) => UseQueryResult<DiscriminatedItem[]>;
+    renderArrow?: boolean;
+};
+declare const ItemMenu: ({ buildIconId, buildMenuId, buildMenuItemId, buildToItemPath, icon, itemId, useChildren, renderArrow, }: ItemMenuProps) => JSX.Element | null;
+export default ItemMenu;

package/dist/Navigation/ItemMenu.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from 'lucide-react';
+import { IconButton, Menu, MenuItem, Typography, } from '@mui/material';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+export const Separator = _jsx(ChevronRightIcon, { "data-testid": 'NavigateNextIcon' });
+const ItemMenu = ({ buildIconId, buildMenuId, buildMenuItemId, buildToItemPath, icon = Separator, itemId, useChildren, renderArrow, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { data: items } = useChildren(itemId);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    if (!items?.length && renderArrow) {
+        // to display icon as a separator specially if there's an extra items after items menu
+        return icon;
+    }
+    if (!items?.length) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: handleClick, id: buildIconId?.(itemId), "aria-controls": open ? buildMenuId?.(itemId) : undefined, "aria-haspopup": 'true', "aria-expanded": open ? true : undefined, children: icon }), _jsx(Menu, { anchorEl: anchorEl, id: buildMenuId?.(itemId), open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, children: items?.map(({ name, id }) => (_jsx(MenuItem, { id: buildMenuItemId?.(id), component: Link, to: buildToItemPath(id), children: _jsx(Typography, { children: name }) }, id))) })] }));
+};
+export default ItemMenu;

package/dist/Navigation/Navigation.d.ts

@@ -0,0 +1,26 @@
+import { SxProps } from '@mui/material';
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+import { ExtraItem } from './ExtraItemsNavigation.js';
+import { ItemMenuProps } from './ItemMenu.js';
+export type NavigationProps = {
+    backgroundColor?: string;
+    buildBreadcrumbsItemLinkId?: (id: string) => string;
+    buildIconId?: (id: string) => string;
+    buildMenuItemId?: (id: string) => string;
+    buildToItemPath: (id: string) => string;
+    buildMenuId?: (id: string) => string;
+    id?: string;
+    item?: DiscriminatedItem;
+    parents?: DiscriminatedItem[];
+    renderRoot?: (item?: DiscriminatedItem) => JSX.Element | null;
+    sx?: SxProps;
+    useChildren: ItemMenuProps['useChildren'];
+    maxItems?: number;
+    extraItems?: ExtraItem[];
+};
+export interface MenuItemType {
+    name: string;
+    path: string;
+}
+declare const Navigation: ({ backgroundColor, buildBreadcrumbsItemLinkId, buildIconId, buildMenuItemId, buildToItemPath, id, item, parents, renderRoot, sx, useChildren, buildMenuId, maxItems, extraItems, }: NavigationProps) => JSX.Element | null;
+export default Navigation;

package/dist/Navigation/Navigation.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumbs, styled } from '@mui/material';
+import CurrentItemNavigation from './CurrentItemNavigation.js';
+import ExtraItemsNavigation from './ExtraItemsNavigation.js';
+import ParentsNavigation from './ParentsNavigation.js';
+import CenterAlignWrapper from './common/CenterAlignWrapper.js';
+const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
+    '.MuiBreadcrumbs-separator': {
+        margin: 0,
+    },
+}));
+const Navigation = ({ backgroundColor, buildBreadcrumbsItemLinkId, buildIconId, buildMenuItemId, buildToItemPath, id, item, parents, renderRoot, sx, useChildren, buildMenuId, maxItems = 4, extraItems, }) => {
+    return (_jsxs(StyledBreadcrumbs, { sx: sx, id: id, maxItems: maxItems, separator: '', "aria-label": 'breadcrumb', style: { backgroundColor }, children: [_jsx(CenterAlignWrapper, { children: renderRoot?.(item) }), item?.id && parents && (_jsx(ParentsNavigation, { useChildren: useChildren, parents: parents, buildToItemPath: buildToItemPath, buildBreadcrumbsItemLinkId: buildBreadcrumbsItemLinkId })), item?.id && item && (_jsx(CurrentItemNavigation, { item: item, useChildren: useChildren, buildToItemPath: buildToItemPath, buildBreadcrumbsItemLinkId: buildBreadcrumbsItemLinkId, buildIconId: buildIconId, buildMenuId: buildMenuId, buildMenuItemId: buildMenuItemId, showArrow: Boolean(extraItems?.length) })), extraItems && _jsx(ExtraItemsNavigation, { extraItems: extraItems })] }));
+};
+export default Navigation;

package/dist/Navigation/ParentsNavigation.d.ts

@@ -0,0 +1,10 @@
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+import { ItemMenuProps } from './ItemMenu.js';
+export type ParentsProps = {
+    parents: DiscriminatedItem[];
+    buildBreadcrumbsItemLinkId?: (id: string) => string;
+    useChildren: ItemMenuProps['useChildren'];
+    buildToItemPath: (id: string) => string;
+};
+declare const ParentsNavigation: ({ parents, useChildren, buildBreadcrumbsItemLinkId, buildToItemPath, }: ParentsProps) => JSX.Element;
+export default ParentsNavigation;

package/dist/Navigation/ParentsNavigation.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import truncate from 'lodash.truncate';
+import { Stack, Typography } from '@mui/material';
+import ItemMenu from './ItemMenu.js';
+import NavigationLink from './common/NavigationLink.js';
+import { ITEM_NAME_MAX_LENGTH } from './common/constants.js';
+const ParentsNavigation = ({ parents, useChildren, buildBreadcrumbsItemLinkId, buildToItemPath, }) => (_jsx(Stack, { direction: 'row', children: parents.map(({ name, id }) => (_jsxs(Stack, { direction: 'row', alignItems: 'center', justifyContent: 'center', children: [_jsx(NavigationLink, { id: buildBreadcrumbsItemLinkId?.(id), to: buildToItemPath(id), children: _jsx(Typography, { children: truncate(name, { length: ITEM_NAME_MAX_LENGTH }) }) }), _jsx(ItemMenu, { useChildren: useChildren, itemId: id, buildToItemPath: buildToItemPath })] }, id))) }));
+export default ParentsNavigation;

package/dist/Navigation/common/CenterAlignWrapper.d.ts

@@ -0,0 +1,3 @@
+import { Box } from '@mui/material';
+declare const CenterAlignWrapper: typeof Box;
+export default CenterAlignWrapper;

package/dist/Navigation/common/CenterAlignWrapper.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+const CenterAlignWrapper = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+export default CenterAlignWrapper;

package/dist/Navigation/common/NavigationLink.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { LinkProps } from 'react-router-dom';
+declare const NavigationLink: (props: {
+    id?: string;
+    children: ReactNode;
+    to: LinkProps['to'];
+}) => ReactNode;
+export default NavigationLink;

package/dist/Navigation/common/NavigationLink.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+import { Link } from 'react-router-dom';
+const NavigationLink = styled(Link)(({ theme }) => ({
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+}));
+export default NavigationLink;

package/dist/Navigation/common/constants.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_NAME_MAX_LENGTH = 15;

package/dist/Navigation/common/constants.js

@@ -0,0 +1 @@
+export const ITEM_NAME_MAX_LENGTH = 15;

package/dist/PlatformSwitch/PlatformSwitch.d.ts

@@ -0,0 +1,57 @@
+import { SxProps, TooltipProps } from '@mui/material';
+import { Platform } from './hooks.js';
+export type PlatformSwitchProps = {
+    /** Element ID of the Platform Switch */
+    id?: string;
+    /** Size of the icons (default: 32) */
+    size?: number;
+    /** Spacing in-between icons as well as padding inside the switch frame */
+    spacing?: number;
+    /** Color of the switch controls */
+    color?: string;
+    /** Color of the icons when highlighted */
+    accentColor?: string;
+    /** Color of the icons when the corresponding platform is disabled */
+    disabledColor?: string;
+    /** Style overrides to apply to the switch frame */
+    sx?: SxProps;
+    /** Platform that should be currently highlighted */
+    selected?: Platform;
+    /** Platform-specific icon props */
+    platformsProps?: Partial<Record<Platform, {
+        /** Element ID of this specific platform button */
+        id?: string;
+        /** Whether this platform should be disabled (non-clickable) */
+        disabled?: boolean;
+        /** Tooltips to add to the buttons, in order left to right */
+        tooltip?: string;
+        /** Placements of tooltips, in order left to right */
+        placement?: TooltipProps['placement'];
+        /** Target when this platform button is clicked */
+        href?: string;
+        /** Style overrides for this platform's icon */
+        sx?: SxProps;
+    }>>;
+    /**
+     * Custom icon to show as selected in mobile
+     */
+    CustomMobileIcon?: (props: IconProps) => JSX.Element;
+};
+/** Common props for all platform icons */
+type IconProps = {
+    size?: number;
+    primaryColor?: string;
+    primaryOpacity?: number;
+    secondaryColor?: string;
+    secondaryOpacity?: number;
+    sx?: SxProps;
+    disabledColor?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    disableHover?: boolean;
+};
+/**
+ * PlatformSwitch allows the user to change between the platforms
+ */
+export declare const PlatformSwitch: ({ id, spacing, size, color, accentColor, disabledColor, sx, selected, platformsProps, CustomMobileIcon, }: PlatformSwitchProps) => JSX.Element;
+export default PlatformSwitch;