@medable/nucleus-ui 2.0.0

package/side_nav/src/lib/side_nav.component.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useLocalizeMessage } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { Tooltip } from '../../../tooltip/src';
+import { SideNavLink } from './side_nav_link.component';
+import { SideNavSection } from './side_nav_section.component';
+import { SideNavStaticSection } from './side_nav_static_section.component';
+import { StudyCard } from './study_card.component';
+export const SideNav = ({ LinkComponent = 'a', activeLinkPath, collapsable = false, items, onLinkClick, studyCard, }) => {
+    const translate = useLocalizeMessage();
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const RenderSection = ({ item, isCollapsed }) => {
+        return item.static ? (_jsx(SideNavStaticSection, { LinkComponent: LinkComponent, activeLinkPath: activeLinkPath, isCollapsed: isCollapsed, item: item, onLinkClick: onLinkClick })) : (_jsx(SideNavSection, { LinkComponent: LinkComponent, activeLinkPath: activeLinkPath, isCollapsed: isCollapsed, item: item, onLinkClick: onLinkClick }));
+    };
+    const RenderLink = ({ item, isCollapsed }) => (_jsx(SideNavLink, { LinkComponent: LinkComponent, activeLinkPath: activeLinkPath, isCollapsed: isCollapsed, item: item, onLinkClick: onLinkClick }, item.path));
+    const handleCollapse = () => {
+        setIsCollapsed(!isCollapsed);
+    };
+    return (_jsxs("nav", { className: `
+        nucleus-box-border nucleus-inline-flex nucleus-h-full nucleus-flex-col nucleus-gap-y-4 nucleus-font-sans nucleus-bg-neutral-75 
+        nucleus-pb-4 nucleus-transition-all nucleus-duration-300 nucleus-ease-in-out nucleus-overflow-y-auto 
+        ${studyCard ? '' : 'nucleus-pt-4'}
+        ${isCollapsed ? 'nucleus-w-16' : 'nucleus-w-[16rem]'}
+      `, children: [studyCard && _jsx(StudyCard, Object.assign({}, studyCard)), _jsx("div", { className: `nucleus-box-border nucleus-flex nucleus-flex-col nucleus-transition-all nucleus-duration-300 nucleus-ease-in-out ${isCollapsed ? 'nucleus-px-3' : 'nucleus-px-4'}`, children: items.map((item) => {
+                    if (item.hidden) {
+                        return null;
+                    }
+                    return (_jsx("div", { className: 'nucleus-box-border nucleus-flex nucleus-flex-col nucleus-gap-1 nucleus-border-neutral-300', children: 'links' in item && (!item.links.some((link) => link.hidden) || item.static) ? (_jsx(RenderSection, { item: item, isCollapsed: isCollapsed })) : (_jsx(RenderLink, { item: item, isCollapsed: isCollapsed })) }, typeof item.title === 'string' ? item.title : item.path));
+                }) }), collapsable && (_jsx("div", { className: `
+            nucleus-box-border nucleus-mt-auto nucleus-transition-all nucleus-duration-300 nucleus-ease-in-out 
+            ${isCollapsed ? 'nucleus-px-4' : 'nucleus-px-5'}
+          `, children: _jsx(Tooltip, { placement: 'end', delayShow: 500, wrapperClassName: 'nucleus-p-0', title: isCollapsed ? translate('Open sidebar') : translate('Close sidebar'), children: _jsx("div", { className: 'nucleus-inline-flex nucleus-text-neutral-450 nucleus-rounded-lg hover:nucleus-text-primary-500 hover:nucleus-bg-neutral-100 nucleus-p-2', onClick: handleCollapse, children: _jsx(Icon, { name: 'sidebar', size: 'sm', color: 'current' }) }) }) }))] }));
+};
+//# sourceMappingURL=side_nav.component.js.map

package/side_nav/src/lib/side_nav.types.d.ts

@@ -0,0 +1,78 @@
+import { ElementType, HTMLAttributeAnchorTarget, ReactNode } from 'react';
+import { BadgeProps } from '../../../badge/src';
+import { IconName } from '../../../icon/src';
+export interface StudyCardProps {
+    /**
+     * Name of the study
+     */
+    studyName: string;
+    /**
+     * ID of study
+     */
+    studyId?: string;
+    /**
+     * Name of user role
+     */
+    role?: string;
+    /**
+     * Environment of the study
+     */
+    environment?: string;
+    /**
+     * Protocol number of the study
+     */
+    protocolNumber?: string;
+}
+export type SideNavProps = {
+    /** Tag to use when rendering side nav links */
+    LinkComponent?: ElementType;
+    /** URL of the active link */
+    activeLinkPath: string;
+    /**
+     * If true, the side nav will be able to collapse sections
+     */
+    collapsable?: boolean;
+    /** Array of links and sections to display in the side nav */
+    items: SideNavItem[];
+    /** Callback fired when a link is clicked */
+    onLinkClick?: (path: string) => void;
+    /** Study Card section that contains study info (Optional) */
+    studyCard?: StudyCardProps;
+};
+export type SideNavItem = NavLink | NavSection;
+export type NavSection = Omit<NavLink, 'path'> & {
+    links: NavLink[];
+    sectionToggleTestId?: string;
+} & ({
+    /**
+     * When `static` is true, then the section title will show exactly as a title instead of as a link
+     */
+    static: true;
+    path?: never;
+} | {
+    static?: never;
+    /**
+     * The path to be redirected to when section is clicked
+     * If no provided, then section will
+     */
+    path: string;
+});
+export interface NavLink {
+    icon?: IconName;
+    customIcon?: ReactNode;
+    isDisabled?: boolean;
+    path: string;
+    /**
+     * If true, ignore the fragment portion of a URL when determining if the link is active.
+     */
+    ignoreFragments?: boolean;
+    externalIcon?: boolean;
+    badgeProps?: BadgeProps;
+    /** If true, the link will include some spacing to visually start a new group of links. */
+    startsNewGroup?: boolean;
+    title: ReactNode;
+    /** control link behaviour with target prop */
+    target?: HTMLAttributeAnchorTarget;
+    /** Control whether this link should be hidden or not (usually for permissions control) */
+    hidden?: boolean;
+}

package/side_nav/src/lib/side_nav.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=side_nav.types.js.map

package/side_nav/src/lib/side_nav_link.component.d.ts

@@ -0,0 +1,11 @@
+import { ElementType } from 'react';
+import { NavLink, SideNavProps } from './side_nav.types';
+export interface SideNavLinkProps {
+    LinkComponent: ElementType;
+    activeLinkPath: string;
+    isChildren?: boolean;
+    isCollapsed: boolean;
+    item: NavLink;
+    onLinkClick?: SideNavProps['onLinkClick'];
+}
+export declare const SideNavLink: ({ LinkComponent, activeLinkPath, isChildren, isCollapsed, item, onLinkClick, }: SideNavLinkProps) => import("react/jsx-runtime").JSX.Element;

package/side_nav/src/lib/side_nav_link.component.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../../badge/src';
+import { Icon } from '../../../icon/src';
+import { Tooltip } from '../../../tooltip/src';
+import { Text } from '../../../typography/src';
+import { getPathLink } from './side_nav_link.utils';
+export const SideNavLink = ({ LinkComponent, activeLinkPath, isChildren, isCollapsed, item, onLinkClick, }) => {
+    const pathLink = getPathLink(item.path, item.ignoreFragments);
+    const isActive = activeLinkPath.startsWith(pathLink);
+    const onClick = () => {
+        if (onLinkClick) {
+            onLinkClick(item.path);
+        }
+    };
+    return (_jsx("div", { className: `nucleus-relative nucleus-box-border nucleus-font-sans nucleus-font-medium ${item.startsNewGroup ? 'nucleus-mt-6' : 'nucleus-mt-0.5'}`, children: _jsxs(LinkComponent, { to: item.path, href: item.path, className: `nucleus-group nucleus-flex nucleus-items-center nucleus-gap-x-2 nucleus-text-sm nucleus-no-underline nucleus-outline-primary-500 
+          nucleus-rounded-md nucleus-py-1 nucleus-pr-2 nucleus-font-normal ${item.isDisabled
+                ? 'nucleus-text-neutral-400 nucleus-cursor-default nucleus-pointer-events-none'
+                : isActive
+                    ? 'nucleus-bg-neutral-100 nucleus-text-text-action'
+                    : `hover:nucleus-bg-neutral-100 hover:nucleus-text-text-action focus-visible:nucleus-text-text-action ${isChildren ? 'nucleus-text-text-secondary' : 'nucleus-text-text-primary'}`} ${isChildren ? 'nucleus-pl-10' : 'nucleus-pl-2'}`, "aria-current": isActive ? 'page' : undefined, target: item.target, onClick: onClick, children: [_jsx(Tooltip, { placement: 'end', delayShow: 500, disabled: !isCollapsed, title: item.title, className: 'nucleus-mx-2', wrapperClassName: 'nucleus-p-0', children: (item.icon || item.customIcon) && (_jsxs("div", { className: `nucleus-min-w-[1.5rem] ${item.isDisabled
+                            ? 'nucleus-text-neutral-400'
+                            : isActive
+                                ? 'nucleus-text-primary-500'
+                                : 'nucleus-text-neutral-450 group-hover:nucleus-text-primary-500 group-focus-visible:nucleus-text-primary-500'}`, children: [item.icon && _jsx(Icon, { name: item.icon, color: 'current' }), item.customIcon] })) }), typeof item.title === 'string' ? (_jsx(Text, { size: 'sm', className: `nucleus-flex-1 nucleus-truncate ${isChildren ? '' : 'nucleus-font-medium'}`, children: item.title })) : (item.title), item.externalIcon && (_jsx("div", { className: `nucleus-min-w-[1.5rem] ${item.isDisabled ? 'nucleus-text-neutral-400' : 'nucleus-text-neutral-450'}`, children: _jsx(Icon, { size: 'sm', name: 'externalLink', color: 'current' }) })), item.badgeProps && _jsx(Badge, Object.assign({}, item.badgeProps))] }, item.path) }, item.path));
+};
+//# sourceMappingURL=side_nav_link.component.js.map

package/side_nav/src/lib/side_nav_link.utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * get the path link, optionally ignoring fragments
+ * @param path the path to get the link for
+ * @param ignoreFragments whether to ignore fragments
+ * @returns the path link
+ */
+export declare const getPathLink: (path?: string, ignoreFragments?: boolean) => string;

package/side_nav/src/lib/side_nav_link.utils.js

@@ -0,0 +1,13 @@
+/**
+ * get the path link, optionally ignoring fragments
+ * @param path the path to get the link for
+ * @param ignoreFragments whether to ignore fragments
+ * @returns the path link
+ */
+export const getPathLink = (path = '', ignoreFragments) => {
+    if (!path) {
+        return '';
+    }
+    return ignoreFragments ? path.split('#')[0] : path;
+};
+//# sourceMappingURL=side_nav_link.utils.js.map

package/side_nav/src/lib/side_nav_section.component.d.ts

@@ -0,0 +1,11 @@
+import { ElementType } from 'react';
+import { NavSection, SideNavProps } from './side_nav.types';
+interface SideNavSectionProps {
+    LinkComponent: ElementType;
+    activeLinkPath: SideNavProps['activeLinkPath'];
+    item: NavSection;
+    isCollapsed: boolean;
+    onLinkClick: SideNavProps['onLinkClick'];
+}
+export declare const SideNavSection: ({ LinkComponent, activeLinkPath, isCollapsed, item, onLinkClick, }: SideNavSectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/side_nav/src/lib/side_nav_section.component.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { useState } from 'react';
+import { Badge } from '../../../badge/src';
+import { Icon } from '../../../icon/src';
+import { Text } from '../../../typography/src';
+import { SideNavLink } from './side_nav_link.component';
+import { getPathLink } from './side_nav_link.utils';
+export const SideNavSection = ({ LinkComponent, activeLinkPath, isCollapsed, item, onLinkClick, }) => {
+    const pathLink = getPathLink(item.path, item.ignoreFragments);
+    // check that no child links are included in the active link path for the section header
+    const isActive = activeLinkPath.startsWith(pathLink) &&
+        item.links.every((link) => !activeLinkPath.startsWith(getPathLink(link.path, link.ignoreFragments)));
+    const [isExpanded, setIsExpanded] = useState(isActive ||
+        item.links.some((link) => {
+            const pathLink = getPathLink(link.path, link.ignoreFragments);
+            return activeLinkPath.startsWith(pathLink);
+        }));
+    const onHeaderClick = (event) => {
+        if (isActive) {
+            event.preventDefault();
+        }
+        else {
+            if (onLinkClick && !item.static) {
+                onLinkClick(item.path);
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.currentTarget.click();
+        }
+    };
+    const onSectionToggle = (e) => {
+        e.preventDefault();
+        setIsExpanded((prev) => !prev);
+    };
+    return (_jsxs(Disclosure, { defaultOpen: isExpanded, children: [_jsx(DisclosureButton, { as: 'div', children: _jsxs(LinkComponent, { to: item.path, href: item.path, onClick: onHeaderClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'page' : undefined, className: `nucleus-group nucleus-box-border nucleus-flex nucleus-w-full nucleus-cursor-pointer nucleus-select-none nucleus-items-center nucleus-gap-2 nucleus-border-none nucleus-font-sans nucleus-no-underline nucleus-outline-primary-500 nucleus-rounded-md nucleus-px-2 nucleus-py-1 ${item.isDisabled
+                        ? 'nucleus-text-neutral-400 nucleus-cursor-default nucleus-pointer-events-none'
+                        : isActive
+                            ? 'nucleus-text-primary-500 nucleus-bg-neutral-100'
+                            : 'nucleus-text-text-primary nucleus-bg-transparent hover:nucleus-bg-neutral-100 hover:nucleus-text-text-action focus-visible:nucleus-text-text-action'} ${item.startsNewGroup ? 'nucleus-mt-6' : 'nucleus-mt-0.5'}`, tabIndex: 0, children: [item.icon && (_jsx("div", { className: `nucleus-box-border nucleus-min-w-[1.5rem] ${item.isDisabled
+                                ? 'nucleus-text-neutral-400'
+                                : isActive
+                                    ? 'nucleus-text-primary-500'
+                                    : 'nucleus-text-neutral-450 group-hover:nucleus-text-primary-500 group-focus-visible:nucleus-text-primary-500'}`, children: _jsx(Icon, { name: item.icon, color: 'current' }) })), typeof item.title === 'string' ? (_jsx(Text, { size: 'sm', className: 'nucleus-font-medium nucleus-flex-1 nucleus-truncate', children: item.title })) : (item.title), item.badgeProps && _jsx(Badge, Object.assign({}, item.badgeProps)), _jsx("div", { className: `nucleus-box-border nucleus-ml-auto ${item.isDisabled ? 'nucleus-text-neutral-400' : 'nucleus-text-neutral-450'}`, onClick: (e) => onSectionToggle(e), "data-testid": item.sectionToggleTestId || 'side-nav-section-toggle', children: _jsx(Icon, { name: isExpanded ? 'chevronDown' : 'chevronRight', color: 'current', size: 'sm' }) })] }) }), isExpanded && (_jsx("div", { children: _jsx(DisclosurePanel, { className: 'nucleus-box-border nucleus-flex nucleus-flex-col nucleus-font-sans', static: true, children: item.links.map((link) => {
+                        if (link.hidden) {
+                            return null;
+                        }
+                        return (_jsx(SideNavLink, { LinkComponent: LinkComponent, activeLinkPath: activeLinkPath, isChildren: true, isCollapsed: isCollapsed, item: link, onLinkClick: onLinkClick }, link.path));
+                    }) }) }))] }, String(item.title)));
+};
+//# sourceMappingURL=side_nav_section.component.js.map

package/side_nav/src/lib/side_nav_static_section.component.d.ts

@@ -0,0 +1,11 @@
+import { ElementType } from 'react';
+import { NavSection, SideNavProps } from './side_nav.types';
+interface SideNavSectionProps {
+    LinkComponent: ElementType;
+    activeLinkPath: SideNavProps['activeLinkPath'];
+    isCollapsed: boolean;
+    item: NavSection;
+    onLinkClick: SideNavProps['onLinkClick'];
+}
+export declare const SideNavStaticSection: ({ LinkComponent, activeLinkPath, isCollapsed, item, onLinkClick, }: SideNavSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/side_nav/src/lib/side_nav_static_section.component.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '../../../badge/src';
+import { Text } from '../../../typography/src';
+import { SideNavLink } from './side_nav_link.component';
+export const SideNavStaticSection = ({ LinkComponent, activeLinkPath, isCollapsed, item, onLinkClick, }) => {
+    const links = item.links.filter((link) => !link.hidden);
+    if (links.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `
+          nucleus-group nucleus-box-border nucleus-flex nucleus-w-full nucleus-select-none nucleus-items-center
+          nucleus-gap-2 nucleus-border-none nucleus-font-sans nucleus-rounded-md nucleus-px-2 nucleus-py-1 
+          nucleus-text-text-secondary nucleus-bg-transparent
+        ${isCollapsed ? 'nucleus-invisible' : ''}
+        ${item.startsNewGroup ? 'nucleus-mt-6' : 'nucleus-mt-0.5'}`, tabIndex: 0, children: [typeof item.title === 'string' ? (_jsx(Text, { size: 'xs', className: 'nucleus-font-normal nucleus-flex-1 nucleus-truncate', children: item.title })) : (item.title), item.badgeProps && _jsx(Badge, Object.assign({}, item.badgeProps))] }), _jsx("div", { className: 'nucleus-box-border nucleus-flex nucleus-flex-col nucleus-font-sans nucleus-pb-4', children: item.links.map((link) => {
+                    if (link.hidden) {
+                        return null;
+                    }
+                    return (_jsx(SideNavLink, { LinkComponent: LinkComponent, activeLinkPath: activeLinkPath, item: link, isCollapsed: isCollapsed, onLinkClick: onLinkClick }, link.path));
+                }) })] }));
+};
+//# sourceMappingURL=side_nav_static_section.component.js.map

package/side_nav/src/lib/study_card.component.d.ts

@@ -0,0 +1,2 @@
+import { StudyCardProps } from './side_nav.types';
+export declare const StudyCard: ({ studyName, studyId, role, environment, protocolNumber }: StudyCardProps) => import("react/jsx-runtime").JSX.Element;

package/side_nav/src/lib/study_card.component.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocalizeMessage } from '../../../i18n/src';
+export const StudyCard = ({ studyName, studyId, role, environment, protocolNumber }) => {
+    const translate = useLocalizeMessage();
+    return (_jsxs("div", { className: 'nucleus-box-border nucleus-bg-neutral-200 nucleus-font-sans nucleus-px-6 nucleus-py-4', children: [_jsx("p", { className: 'nucleus-box-border nucleus-text-base nucleus-font-medium nucleus-text-text-primary nucleus-m-0 line-clamp-2', children: studyName }), protocolNumber && (_jsx("p", { className: 'nucleus-box-border nucleus-text-xs nucleus-font-normal nucleus-text-text-secondary nucleus-m-0 truncate', children: protocolNumber })), studyId && (_jsx("p", { className: 'nucleus-box-border nucleus-text-xs nucleus-font-normal nucleus-text-text-secondary nucleus-m-0 truncate', children: translate('Study ID: {studyId}', { studyId }) })), role && (_jsx("p", { className: 'nucleus-box-border nucleus-text-xs nucleus-font-normal nucleus-text-text-secondary nucleus-m-0 truncate', children: translate('Role: {role}', { role }) })), environment && (_jsx("p", { className: 'nucleus-box-border nucleus-text-xs nucleus-font-normal nucleus-text-text-secondary nucleus-m-0 truncate', children: translate('Environment: {environment}', { environment }) }))] }));
+};
+//# sourceMappingURL=study_card.component.js.map

package/spinner/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/spinner';

package/spinner/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/spinner';
+//# sourceMappingURL=index.js.map

package/spinner/src/lib/spinner.d.ts

@@ -0,0 +1,10 @@
+interface SpinnerProps {
+    size?: 'sm' | 'md' | 'base' | 'xl' | 'full';
+    variant?: 'default' | 'alt';
+    wrapper?: 'none' | 'full';
+}
+/**
+ * The spinner component is used to indicate that an operation is in progress.
+ */
+export declare const Spinner: ({ size, variant, wrapper }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/spinner/src/lib/spinner.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+const sizeClasses = {
+    sm: 'nucleus-w-4 nucleus-h-4',
+    md: 'nucleus-w-6 nucleus-h-6',
+    base: 'nucleus-w-8 nucleus-h-8',
+    xl: 'nucleus-w-10 nucleus-h-10',
+    full: 'nucleus-w-full nucleus-h-full',
+};
+const WRAPPER_STYLES = {
+    none: '',
+    full: 'nucleus-absolute nucleus-inset-0 nucleus-flex nucleus-justify-center nucleus-items-center nucleus-bg-opacity-60 nucleus-bg-white nucleus-z-[9999]',
+};
+/**
+ * The spinner component is used to indicate that an operation is in progress.
+ */
+export const Spinner = ({ size = 'base', variant = 'default', wrapper = 'none' }) => {
+    const spinner = (_jsxs("div", { role: 'status', className: WRAPPER_STYLES[wrapper], children: [_jsxs("svg", { "aria-hidden": 'true', className: `nucleus-animate-spin ${sizeClasses[size]} ${variant === 'alt' ? 'nucleus-fill-white nucleus-text-white/30' : 'nucleus-fill-black/30 nucleus-text-black/10'}`, viewBox: '0 0 100 101', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "data-testid": 'spinner', children: [_jsx("path", { d: 'M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z', fill: 'currentColor' }), _jsx("path", { d: 'M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z', fill: 'currentFill' })] }), _jsx("span", { className: 'nucleus-sr-only', children: "Loading..." })] }));
+    return wrapper === 'none' || typeof document === 'undefined' ? spinner : createPortal(spinner, document.body);
+};
+//# sourceMappingURL=spinner.js.map

package/steps/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/steps';

package/steps/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/steps';
+//# sourceMappingURL=index.js.map

package/steps/src/lib/steps.d.ts

@@ -0,0 +1,70 @@
+export type Step = {
+    /**
+     * The name of the step
+     */
+    name: string;
+    /**
+     * The url of the nav step
+     */
+    href: string;
+    /**
+     * The description of the step
+     */
+    description?: string;
+    /**
+     * callback when the step is clicked
+     */
+    onClick?: (step: Step, stepIdx: number) => void;
+};
+export interface StepProps {
+    /**
+     * The steps to render
+     * @default []
+     * @example
+     * ```tsx
+     * const steps: Step[] = [
+     *  {
+     *    name: 'Step 1',
+     *  },
+     *  {
+     *    name: 'Step 2',
+     *    description: 'This is step 2',
+     *  }
+     * ]
+     * ```
+     * */
+    steps: Step[];
+    /**
+     * The index of the active step
+     * @default 0
+     * */
+    activeStep: number;
+    /**
+     * The orientation of the steps
+     * @default 'vertical'
+     * */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * If the steps are sequential. If false, you'll be able to click steps in any order
+     * @default true
+     * */
+    sequential?: boolean;
+}
+/**
+ * The steps component is used to display a series of steps in a process
+ * @example
+ * ```tsx
+ * const steps: Step[] = [
+ *  {
+ *    name: 'Step 1',
+ *  },
+ *  {
+ *    name: 'Step 2',
+ *    description: 'This is step 2',
+ *  }
+ * ]
+ *
+ * <Steps steps={steps} activeStep={0} />
+ * ```
+ * */
+export declare const Steps: ({ steps, activeStep, orientation, sequential }: StepProps) => import("react/jsx-runtime").JSX.Element;

package/steps/src/lib/steps.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+/**
+ * The steps component is used to display a series of steps in a process
+ * @example
+ * ```tsx
+ * const steps: Step[] = [
+ *  {
+ *    name: 'Step 1',
+ *  },
+ *  {
+ *    name: 'Step 2',
+ *    description: 'This is step 2',
+ *  }
+ * ]
+ *
+ * <Steps steps={steps} activeStep={0} />
+ * ```
+ * */
+export const Steps = ({ steps = [], activeStep = 0, orientation = 'vertical', sequential = true }) => {
+    const handleEnterPress = useCallback((e, step, stepIdx) => {
+        var _a;
+        if (e.key === 'Enter') {
+            (_a = step.onClick) === null || _a === void 0 ? void 0 : _a.call(step, step, stepIdx);
+        }
+    }, []);
+    const onFutureStepClick = useCallback((e, step, stepIdx) => {
+        var _a;
+        if (sequential) {
+            e.preventDefault();
+        }
+        else {
+            (_a = step.onClick) === null || _a === void 0 ? void 0 : _a.call(step, step, stepIdx);
+        }
+    }, [sequential]);
+    const onFutureEnterPress = useCallback((e, step, stepIdx) => {
+        if (sequential) {
+            e.preventDefault();
+        }
+        else {
+            handleEnterPress(e, step, stepIdx);
+        }
+    }, [sequential]);
+    const renderCompletedStep = (step, stepIdx) => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [stepIdx !== steps.length - 1 && (_jsx("div", { className: classNames('nucleus-absolute nucleus-box-border nucleus-bg-primary-500 nucleus-top-4', orientation === 'vertical'
+                        ? 'nucleus-h-full nucleus-w-0.5 -nucleus-ml-px nucleus-mt-0.5 nucleus-left-4'
+                        : 'nucleus-w-full nucleus-h-0.5 nucleus-mt-px nucleus-left-[calc(50%+1rem)]'), "aria-hidden": 'true' })), _jsxs("a", { href: (_a = step.href) !== null && _a !== void 0 ? _a : '#', tabIndex: 0, onClick: () => { var _a; return (_a = step.onClick) === null || _a === void 0 ? void 0 : _a.call(step, step, stepIdx); }, onKeyUp: (e) => handleEnterPress(e, step, stepIdx), className: classNames('nucleus-group nucleus-relative nucleus-box-border nucleus-flex nucleus-no-underline nucleus-cursor-pointer', orientation === 'vertical' && step.description ? 'nucleus-items-start' : 'nucleus-items-center', orientation === 'vertical' ? 'nucleus-flex-row' : 'nucleus-flex-col'), children: [_jsx("span", { className: 'nucleus-box-border nucleus-flex nucleus-h-9 nucleus-items-center', children: _jsx("span", { "data-testid": 'stepMarker', className: 'nucleus-relative nucleus-z-10 nucleus-box-border nucleus-flex nucleus-h-8 nucleus-w-8 nucleus-items-center nucleus-justify-center nucleus-bg-primary-500 nucleus-rounded-full group-hover:nucleus-bg-primary-700', children: _jsx("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', children: _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z', fill: 'white' }) }) }) }), _jsxs("span", { className: classNames(orientation === 'vertical' ? 'nucleus-ml-4 ' : 'nucleus-px-4 nucleus-text-center', 'nucleus-box-border nucleus-flex nucleus-min-w-0 nucleus-flex-col'), children: [_jsx("span", { className: 'nucleus-box-border nucleus-text-base nucleus-font-medium nucleus-text-text-primary', children: step.name }), step.description && (_jsx("span", { className: 'nucleus-box-border nucleus-text-sm nucleus-font-normal nucleus-text-text-secondary', children: step.description }))] })] })] }));
+    };
+    const renderActiveStep = (step, stepIdx) => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [stepIdx !== steps.length - 1 && (_jsx("div", { className: classNames('nucleus-absolute nucleus-box-border nucleus-bg-neutral-300 nucleus-top-4', orientation === 'vertical'
+                        ? 'nucleus-h-full nucleus-w-0.5 -nucleus-ml-px nucleus-mt-0.5 nucleus-left-4'
+                        : 'nucleus-w-full nucleus-h-0.5 nucleus-mt-px nucleus-left-[calc(50%+1rem)]'), "aria-hidden": 'true' })), _jsxs("a", { href: (_a = step.href) !== null && _a !== void 0 ? _a : '#', tabIndex: 0, onClick: () => { var _a; return (_a = step.onClick) === null || _a === void 0 ? void 0 : _a.call(step, step, stepIdx); }, onKeyUp: (e) => handleEnterPress(e, step, stepIdx), className: classNames('nucleus-group nucleus-relative nucleus-box-border nucleus-flex nucleus-items-start nucleus-no-underline nucleus-cursor-pointer', orientation === 'vertical' && step.description ? 'nucleus-items-start' : 'nucleus-items-center', orientation === 'vertical' ? 'nucleus-flex-row' : 'nucleus-flex-col'), "aria-current": 'step', children: [_jsx("span", { className: 'nucleus-box-border nucleus-flex nucleus-h-9 nucleus-items-center', "aria-hidden": 'true', children: _jsx("span", { "data-testid": 'stepMarker', className: 'nucleus-relative nucleus-z-10 nucleus-box-border nucleus-flex nucleus-h-8 nucleus-w-8 nucleus-items-center nucleus-justify-center nucleus-border-solid nucleus-bg-white nucleus-rounded-full nucleus-border-2 nucleus-border-primary-500', children: _jsx("span", { className: 'nucleus-h-2.5 nucleus-w-2.5 nucleus-bg-primary-500 nucleus-rounded-full' }) }) }), _jsxs("span", { className: classNames(orientation === 'vertical' ? 'nucleus-ml-4' : 'nucleus-px-4 nucleus-text-center', 'nucleus-box-border nucleus-flex nucleus-min-w-0 nucleus-flex-col'), children: [_jsx("span", { className: 'nucleus-box-border nucleus-text-base nucleus-font-medium nucleus-text-primary-500', children: step.name }), step.description && (_jsx("span", { className: 'nucleus-box-border nucleus-text-sm nucleus-font-normal nucleus-text-text-secondary', children: step.description }))] })] })] }));
+    };
+    const renderFutureStep = (step, stepIdx) => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [stepIdx !== steps.length - 1 && (_jsx("div", { className: classNames('nucleus-absolute nucleus-box-border nucleus-bg-neutral-300 nucleus-top-4', orientation === 'vertical'
+                        ? 'nucleus-h-full nucleus-w-0.5 -nucleus-ml-px nucleus-mt-0.5 nucleus-left-4'
+                        : 'nucleus-w-full nucleus-h-0.5 nucleus-mt-px nucleus-left-[calc(50%+1rem)]'), "aria-hidden": 'true' })), _jsxs("a", { href: (_a = step.href) !== null && _a !== void 0 ? _a : '#', tabIndex: 0, onClick: (e) => onFutureStepClick(e, step, stepIdx), onKeyUp: (e) => onFutureEnterPress(e, step, stepIdx), className: classNames('nucleus-group nucleus-relative nucleus-box-border nucleus-flex nucleus-items-start nucleus-no-underline nucleus-cursor-default', orientation === 'vertical' && step.description ? 'nucleus-items-start' : 'nucleus-items-center', orientation === 'vertical' ? 'nucleus-flex-row' : 'nucleus-flex-col', !sequential ? 'nucleus-cursor-pointer' : ''), children: [_jsx("span", { className: 'nucleus-box-border nucleus-flex nucleus-h-9 nucleus-items-center', "aria-hidden": 'true', children: _jsx("span", { "data-testid": 'stepMarker', className: `nucleus-relative nucleus-z-10 nucleus-box-border nucleus-flex nucleus-h-8 nucleus-w-8 nucleus-items-center nucleus-justify-center nucleus-border-solid nucleus-bg-white nucleus-rounded-full nucleus-border-2 nucleus-border-neutral-300 ${sequential ? 'group-hover:nucleus-border-neutral-400' : 'group-hover:nucleus-border-primary-500'}`, children: _jsx("span", { className: `nucleus-box-border nucleus-h-2.5 nucleus-w-2.5 nucleus-bg-transparent nucleus-rounded-full ${sequential ? 'group-hover:nucleus-bg-neutral-300' : 'group-hover:nucleus-bg-primary-500'}` }) }) }), _jsxs("span", { className: classNames(orientation === 'vertical' ? 'nucleus-ml-4' : 'nucleus-px-4 nucleus-text-center', 'nucleus-box-border nucleus-flex nucleus-min-w-0 nucleus-flex-col'), children: [_jsx("span", { className: 'nucleus-box-border nucleus-text-base nucleus-font-medium nucleus-text-text-primary', children: step.name }), step.description && (_jsx("span", { className: 'nucleus-box-border nucleus-text-sm nucleus-font-normal nucleus-text-text-secondary', children: step.description }))] })] })] }));
+    };
+    return (_jsx("nav", { "aria-label": 'Progress', className: classNames('nucleus-box-border nucleus-font-sans', orientation === 'vertical' ? 'nucleus-inline-block' : 'nucleus-block'), children: _jsx("ol", { className: classNames(orientation === 'vertical'
+                ? 'nucleus-inline-flex nucleus-flex-col'
+                : 'nucleus-flex nucleus-flex-row nucleus-flex-grow nucleus-px-0.5', 'nucleus-box-border nucleus-list-none nucleus-overflow-hidden nucleus-m-0 nucleus-p-0'), children: steps.map((step, stepIdx) => (_jsx("li", { className: classNames(orientation === 'vertical' && stepIdx !== steps.length - 1 ? 'nucleus-pb-10' : 'nucleus-mb-0.5', orientation === 'vertical' && stepIdx === 0 ? 'nucleus-mt-0.5' : '', orientation === 'vertical' ? 'nucleus-mx-0.5' : 'nucleus-my-0.5 nucleus-flex-1', 'nucleus-box-border nucleus-relative'), children: activeStep > stepIdx
+                    ? renderCompletedStep(step, stepIdx)
+                    : activeStep === stepIdx
+                        ? renderActiveStep(step, stepIdx)
+                        : renderFutureStep(step, stepIdx) }, step.name))) }) }));
+};
+//# sourceMappingURL=steps.js.map