@mezzanine-ui/react 1.0.0-beta.0 → 1.0.0-beta.2

package/Form/FormField.d.ts

@@ -1,6 +1,18 @@
-import { Severity } from '@mezzanine-ui/system/severity';
+import { FormFieldCounterColor, FormFieldSize } from '@mezzanine-ui/core/form';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { SeverityWithInfo } from '@mezzanine-ui/system/severity';
 export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The counter text to display in the form field.
+     * Typically used to show character count or remaining characters.
+     */
+    counter?: string;
+    /**
+     * The color of the counter text.
+     * @default FormFieldCounterColor.INFO
+     */
+    counterColor?: FormFieldCounterColor;
     /**
      * To control the field passed from children whether should be disabled.
      * The form message won't appear if disabled.
@@ -10,17 +22,57 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * To control the field passed from children whether should be fullWidth.
      */
     fullWidth?: boolean;
+    /**
+     * The hint text to display below the input field.
+     * Provides additional information or guidance to the user.
+     */
+    hintText?: string;
+    /**
+     * The icon to display alongside the hint text.
+     */
+    hintTextIcon?: IconDefinition;
+    /**
+     * The label text for the form field.
+     */
+    label: string;
+    /**
+     * The icon to display next to the label.
+     * When provided, displays an icon that shows a tooltip on hover.
+     */
+    labelInformationIcon?: IconDefinition;
+    /**
+     * The tooltip text to display when hovering over the label information icon.
+     * Only shown when labelInformationIcon is provided.
+     */
+    labelInformationText?: string;
+    /**
+     * Optional marker text to display after the label.
+     * Typically used to show "(optional)" or similar text.
+     */
+    labelOptionalMarker?: string;
+    /**
+     * The name attribute for the form field.
+     * Used to identify the field in form submissions and as htmlFor in the label.
+     */
+    name: string;
     /**
      * To control the field passed from children whether should be required.
      */
     required?: boolean;
     /**
-     * To control the severity of field passed from children and form message.
+     * The size variant of the form field.
+     * Controls the layout and spacing of label, input, and other elements.
+     */
+    size: FormFieldSize;
+    /**
+     * The severity level of the form field.
+     * Used to indicate the importance or urgency of the field.
+     * @default 'info'
      */
-    severity?: Severity;
+    severity?: SeverityWithInfo;
 }
 /**
- * The react component for `mezzanine` form field.
+ * The React component for `mezzanine` form field.
  */
 declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
 export default FormField;

package/Form/FormField.js

@@ -1,24 +1,26 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { formFieldClasses } from '@mezzanine-ui/core/form';
+import { formFieldClasses, FormFieldCounterColor } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
+import FormHintText from './FormHintText.js';
+import FormLabel from './FormLabel.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` form field.
+ * The React component for `mezzanine` form field.
  */
 const FormField = forwardRef(function FormField(props, ref) {
-    const { children, className, disabled = false, fullWidth = false, required = false, severity, ...rest } = props;
+    const { children, className, counter, counterColor, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, name, required = false, size, severity = 'info', ...rest } = props;
     const formControl = {
         disabled,
         fullWidth,
         required,
         severity,
     };
-    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, severity && formFieldClasses.severity(severity), {
+    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, formFieldClasses.size(size), {
             [formFieldClasses.disabled]: disabled,
             [formFieldClasses.fullWidth]: fullWidth,
-        }, className), children: jsx(FormControlContext.Provider, { value: formControl, children: children }) }));
+        }, className), children: jsxs(FormControlContext.Provider, { value: formControl, children: [jsx(FormLabel, { className: formFieldClasses.labelArea, htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker }), jsxs("div", { className: cx(formFieldClasses.dataEntry), children: [children, jsxs("div", { className: cx(formFieldClasses.hintTextAndCounterArea), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })] })] }) }));
 });
 
 export { FormField as default };

package/Form/FormHintText.d.ts

@@ -1,17 +1,40 @@
 import { formHintIcons } from '@mezzanine-ui/core/form';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export type FormHintTextProps = NativeElementPropsWithoutKeyAndRef<'span'> & {
+    /**
+     * The hint text to display below the input field.
+     * Provides additional information or guidance to the user.
+     */
+    hintText?: string;
+    /**
+     * The icon to display alongside the hint text.
+     * If provided, this icon will override the default severity icon.
+     */
+    hintTextIcon?: IconDefinition;
     /**
      * The severity of form message.
+     * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
 };
 /**
- * The react component for `mezzanine` form message.
+ * The React component for `mezzanine` form message.
  */
 declare const FormHintText: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"span"> & {
+    /**
+     * The hint text to display below the input field.
+     * Provides additional information or guidance to the user.
+     */
+    hintText?: string;
+    /**
+     * The icon to display alongside the hint text.
+     * If provided, this icon will override the default severity icon.
+     */
+    hintTextIcon?: IconDefinition;
     /**
      * The severity of form message.
+     * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
 } & import("react").RefAttributes<HTMLSpanElement>>;

package/Form/FormHintText.js

@@ -6,12 +6,12 @@ import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` form message.
+ * The React component for `mezzanine` form message.
  */
 const FormHintText = forwardRef(function FormHintText(props, ref) {
-    const { children, className, severity, ...rest } = props;
-    const icon = severity ? formHintIcons[severity] : null;
-    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [icon && jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: icon }), children] }));
+    const { className, hintText, hintTextIcon, severity = 'info', ...rest } = props;
+    const defaultIcon = severity ? formHintIcons[severity] : null;
+    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [hintTextIcon ? (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: hintTextIcon, color: severity })) : (defaultIcon && (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: defaultIcon, color: severity }))), hintText] }));
 });
 
 export { FormHintText as default };

package/Form/FormLabel.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export interface FormLabelProps extends NativeElementPropsWithoutKeyAndRef<'label'> {
-    remark?: ReactNode;
-    remarkIcon?: ReactNode;
+    informationIcon?: IconDefinition;
+    informationText?: string;
+    labelText: string;
+    optionalMarker?: ReactNode;
 }
 /**
- * The react component for `mezzanine` form label.
+ * The React component for `mezzanine` form label.
  */
 declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
 export default FormLabel;

package/Form/FormLabel.js

@@ -3,15 +3,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { formFieldClasses } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` form label.
+ * The React component for `mezzanine` form label.
  */
 const FormLabel = forwardRef(function FormLabel(props, ref) {
-    const { children, className, htmlFor, remark, remarkIcon, ...rest } = props;
+    const { className, htmlFor, informationIcon, informationText, labelText, optionalMarker, ...rest } = props;
     const { required } = useContext(FormControlContext) || {};
-    return (jsxs("label", { ...rest, ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor, children: [jsxs("span", { children: [children, required && jsx("span", { className: formFieldClasses.asterisk, children: "*" })] }), (remark || remarkIcon) && (jsxs("span", { className: formFieldClasses.remark, children: [jsx("span", { children: remark }), remarkIcon] }))] }));
+    return (jsxs("label", { ...rest, ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor, children: [required && jsx("span", { className: formFieldClasses.labelRequiredMarker, children: "*" }), labelText, optionalMarker && (jsx("span", { className: formFieldClasses.labelOptionalMarker, children: optionalMarker })), informationIcon && (jsx(Tooltip, { title: informationText, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsx(Icon, { ref: tooltipRef, className: cx(formFieldClasses.labelInformationIcon), color: "neutral-light", icon: informationIcon, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, size: 16 })) })), jsx("span", { className: formFieldClasses.labelColon, children: ":" })] }));
 });
 
 export { FormLabel as default };

package/Input/PasswordStrengthIndicator/PasswordStrengthIndicator.js

@@ -12,7 +12,7 @@ const PasswordStrengthIndicator = forwardRef(function PasswordStrengthIndicator(
     const { className, strength = 'weak', strengthText: strengthTextProp, strengthTextPrefix = '密碼強度：', hintTexts, ...rest } = props;
     const strengthText = strengthTextProp ||
         (strength === 'weak' ? '低' : strength === 'medium' ? '中' : '高');
-    return (jsxs("div", { ref: ref, className: cx(inputPasswordStrengthIndicatorClasses.host, className), ...rest, children: [jsx("div", { className: cx(inputPasswordStrengthIndicatorClasses.bar, inputPasswordStrengthIndicatorClasses.barState(strength)) }), jsxs("span", { className: inputPasswordStrengthIndicatorClasses.text, children: [strengthTextPrefix, jsx("mark", { children: strengthText })] }), hintTexts && hintTexts.length > 0 && (jsx("div", { className: inputPasswordStrengthIndicatorClasses.hintTextGroup, children: hintTexts.map((hintText, idx) => (jsx(FormHintText, { severity: hintText.severity, children: hintText.hint }, idx))) }))] }));
+    return (jsxs("div", { ref: ref, className: cx(inputPasswordStrengthIndicatorClasses.host, className), ...rest, children: [jsx("div", { className: cx(inputPasswordStrengthIndicatorClasses.bar, inputPasswordStrengthIndicatorClasses.barState(strength)) }), jsxs("span", { className: inputPasswordStrengthIndicatorClasses.text, children: [strengthTextPrefix, jsx("mark", { children: strengthText })] }), hintTexts && hintTexts.length > 0 && (jsx("div", { className: inputPasswordStrengthIndicatorClasses.hintTextGroup, children: hintTexts.map((hintText, idx) => (jsx(FormHintText, { hintText: hintText.hint, severity: hintText.severity }, idx))) }))] }));
 });
 
 export { PasswordStrengthIndicator as default };

package/Navigation/Navigation.d.ts

@@ -1,29 +1,32 @@
-import { Key, ReactElement } from 'react';
-import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
+import { JSX, ReactElement } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { NavigationItemProps } from './NavigationItem';
-import { NavigationSubMenuProps } from './NavigationSubMenu';
-export type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps> | null;
+import { NavigationOptionProps } from './NavigationOption';
+import { NavigationHeaderProps } from './NavigationHeader';
+import { NavigationFooterProps } from './NavigationFooter';
+export type NavigationChild = ReactElement<NavigationOptionProps | NavigationHeaderProps | NavigationFooterProps> | null | JSX.Element[];
 export type NavigationChildren = NavigationChild | NavigationChild[];
 export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'onClick'> {
     /**
      * Current active key.
      */
-    activeKey?: Key | null;
+    activatedPath?: string[];
     /**
-     * Strict children with `NavigationItem` or `NavigationSubMenu`.
-     * @default []
+     * Strict children with `NavigationOption`, `NavigationHeader` or `NavigationFooter`.
      */
     children?: NavigationChildren;
     /**
-     * Called when a navigation item is clicked.
+     * Navigation display type.
+     * @default false (expanded)
      */
-    onClick?: (key?: Key | string | null) => void;
+    collapsed?: boolean;
     /**
-     * Navigation orientation.
-     * @default 'horizontal'
+     * Called when collapsed state changes.
      */
-    orientation?: NavigationOrientation;
+    onCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Called when a navigation option is clicked.
+     */
+    onOptionClick?: (activePath?: string[]) => void;
 }
-declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & import("react").RefAttributes<HTMLUListElement>>;
+declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & import("react").RefAttributes<HTMLElement>>;
 export default Navigation;

package/Navigation/Navigation.js

@@ -1,57 +1,89 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useCallback, Children, cloneElement, useMemo } from 'react';
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useMemo, Children, isValidElement, cloneElement } from 'react';
 import { navigationClasses } from '@mezzanine-ui/core/navigation';
-import NavigationItem from './NavigationItem.js';
-import NavigationSubMenu from './NavigationSubMenu.js';
-import { NavigationContext } from './NavigationContext.js';
+import NavigationOption from './NavigationOption.js';
+import NavigationHeader from './NavigationHeader.js';
+import NavigationFooter from './NavigationFooter.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import NavigationOptionCategory from './NavigationOptionCategory.js';
+import { NavigationActivatedContext, NavigationOptionLevelContext, navigationOptionLevelContextDefaultValues } from './context.js';
+import { useCurrentPathname } from './useCurrentPathname.js';
+import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
-    const { activeKey, children = [], className, onClick, orientation = 'horizontal', ...rest } = props;
-    const renderItemChildren = useCallback(function renderItemChildrenImpl(parsedChildren) {
-        return Children.map(parsedChildren, (child) => {
-            var _a, _b;
-            if (child) {
+    const { activatedPath, children = [], className, collapsed: collapsedProp, onOptionClick, onCollapseChange, ...rest } = props;
+    const [collapsedState, setCollapsedState] = useState(collapsedProp || false);
+    const collapsed = collapsedProp !== null && collapsedProp !== void 0 ? collapsedProp : collapsedState;
+    const handleCollapseChange = useCallback((newCollapsed) => {
+        setCollapsedState(newCollapsed);
+        onCollapseChange === null || onCollapseChange === void 0 ? void 0 : onCollapseChange(newCollapsed);
+    }, [onCollapseChange]);
+    const [innerActivatedPath, setInnerActivatedPath] = useState([]);
+    const combineSetActivatedPath = useCallback((newActivatedPath) => {
+        onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(newActivatedPath);
+        setInnerActivatedPath(newActivatedPath);
+    }, [onOptionClick]);
+    const currentPathname = useCurrentPathname();
+    const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
+    const { headerComponent, footerComponent, searchInput } = useMemo(() => {
+        let headerComponent = null;
+        let footerComponent = null;
+        let searchInput = null;
+        Children.forEach(flattenedChildren, (child) => {
+            if (child && isValidElement(child)) {
                 switch (child.type) {
-                    case NavigationItem: {
-                        const itemChild = child;
-                        return cloneElement(itemChild, {
-                            active: itemChild.props.active || activeKey === itemChild.key,
-                            eventKey: itemChild.key,
-                            onClick: itemChild.props.onClick || onClick,
-                        });
+                    case NavigationHeader: {
+                        headerComponent = child;
+                        break;
+                    }
+                    case NavigationFooter: {
+                        footerComponent = child;
+                        break;
                     }
-                    case NavigationSubMenu: {
-                        const subMenuChild = child;
-                        const subMenuChildren = child.props.children;
-                        let subMenuActive = false;
-                        const groupChildren = Children.map(subMenuChildren, (groupChild) => {
-                            const active = activeKey === groupChild.key || groupChild.props.active;
-                            if (active) {
-                                subMenuActive = true;
-                            }
-                            return cloneElement(groupChild, {
-                                active,
-                                eventKey: groupChild.key,
-                                onClick: groupChild.props.onClick || onClick,
-                            });
+                    case Input: {
+                        searchInput = cloneElement(child, {
+                            size: 'sub',
+                            variant: 'search',
+                            className: cx(navigationClasses.searchInput, child.props.className),
                         });
-                        return cloneElement(subMenuChild, {
-                            active: subMenuChild.props.active || subMenuActive,
-                        }, groupChildren);
+                        break;
+                    }
+                }
+            }
+        });
+        return { headerComponent, footerComponent, searchInput };
+    }, [flattenedChildren]);
+    const renderItemChildren = useCallback(function renderItemChildrenImpl(parsedChildren) {
+        var _a;
+        const childArray = Children.map(parsedChildren, (child) => {
+            if (child && isValidElement(child)) {
+                switch (child.type) {
+                    case NavigationOptionCategory:
+                    case NavigationOption: {
+                        return child;
                     }
+                    case NavigationHeader:
+                    case NavigationFooter:
+                        // already handled in headerComponent and footerComponent
+                        return null;
                     default:
-                        // Keep finding children in case of React.Fragment
-                        return renderItemChildrenImpl(((_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []));
+                        console.warn('[Mezzanine][Navigation]: Navigation only accepts NavigationOption, NavigationOptionCategory, NavigationHeader or NavigationFooter as children.');
+                        return null;
                 }
             }
             return null;
         });
-    }, [activeKey, onClick]);
-    const context = useMemo(() => ({
-        orientation,
-    }), [orientation]);
-    return (jsx("ul", { ...rest, ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className), children: jsx(NavigationContext.Provider, { value: context, children: renderItemChildren(children) }) }));
+        return (_a = childArray === null || childArray === void 0 ? void 0 : childArray.filter((child) => child !== null)) !== null && _a !== void 0 ? _a : null;
+    }, []);
+    return (jsx("nav", { ...rest, ref: ref, className: cx(navigationClasses.host, collapsed ? navigationClasses.collapsed : navigationClasses.expand, className), children: jsxs(NavigationActivatedContext.Provider, { value: {
+                activatedPath: activatedPath || innerActivatedPath,
+                setActivatedPath: combineSetActivatedPath,
+                currentPathname,
+                collapsed,
+                handleCollapseChange,
+            }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { className: navigationClasses.content, children: [searchInput, jsx("ul", { children: renderItemChildren(flattenedChildren) })] }) }), footerComponent] }) }));
 });
 
 export { Navigation as default };

package/Navigation/NavigationFooter.d.ts

@@ -0,0 +1,10 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface NavigationFooterProps extends NativeElementPropsWithoutKeyAndRef<'footer'> {
+    /**
+     * Children of footer, only `NavigationUserMenu` is allowed as direct child,
+     * other children will be wrapped in an icons container.
+     */
+    children?: React.ReactNode;
+}
+declare const NavigationFooter: import("react").ForwardRefExoticComponent<NavigationFooterProps & import("react").RefAttributes<HTMLElement>>;
+export default NavigationFooter;

package/Navigation/NavigationFooter.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, use, Children, isValidElement } from 'react';
+import { navigationFooterClasses } from '@mezzanine-ui/core/navigation';
+import NavigationUserMenu from './NavigationUserMenu.js';
+import { NavigationActivatedContext } from './context.js';
+import cx from 'clsx';
+
+const resolveChildren = (children) => {
+    let userMenu = null;
+    const otherChildren = [];
+    Children.map(children, (child) => {
+        if (isValidElement(child) && child.type === NavigationUserMenu) {
+            userMenu = child;
+        }
+        else {
+            otherChildren.push(child);
+        }
+    });
+    return { userMenu, otherChildren };
+};
+const NavigationFooter = forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { collapsed } = use(NavigationActivatedContext);
+    const { userMenu, otherChildren } = resolveChildren(children);
+    return (jsxs("footer", { ...rest, ref: ref, className: cx(navigationFooterClasses.host, collapsed && navigationFooterClasses.collapsed, className), children: [userMenu, jsx("span", { className: navigationFooterClasses.icons, children: otherChildren })] }));
+});
+
+export { NavigationFooter as default };

package/Navigation/NavigationHeader.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface NavigationHeaderProps extends NativeElementPropsWithoutKeyAndRef<'header'> {
+    /**
+     * Custom content to render inside the header, typically an icon or logo.
+     */
+    children?: ReactNode;
+    /**
+     * The title text displayed in the header.
+     */
+    title: string;
+}
+declare const NavigationHeader: import("react").ForwardRefExoticComponent<NavigationHeaderProps & import("react").RefAttributes<HTMLElement>>;
+export default NavigationHeader;

package/Navigation/NavigationHeader.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, use } from 'react';
+import { navigationHeaderClasses } from '@mezzanine-ui/core/navigation';
+import { SiderIcon } from '@mezzanine-ui/icons';
+import NavigationIconButton from './NavigationIconButton.js';
+import { NavigationActivatedContext } from './context.js';
+import cx from 'clsx';
+
+const NavigationHeader = forwardRef((props, ref) => {
+    const { children, className, title, ...rest } = props;
+    const { collapsed, handleCollapseChange } = use(NavigationActivatedContext);
+    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, className), children: [jsxs("span", { className: navigationHeaderClasses.content, children: [children, jsx("span", { className: navigationHeaderClasses.title, children: title })] }), jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon })] }));
+});
+
+export { NavigationHeader as default };

package/Navigation/NavigationIconButton.d.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export type NavigationIconButtonProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children'> & {
+    /**
+     * The icon to be displayed.
+     */
+    icon: IconDefinition;
+};
+declare const NavigationIconButton: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"button">, "children"> & {
+    /**
+     * The icon to be displayed.
+     */
+    icon: IconDefinition;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default NavigationIconButton;

package/Navigation/NavigationIconButton.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { navigationIconButtonClasses } from '@mezzanine-ui/core/navigation';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const NavigationIconButton = forwardRef((props, ref) => {
+    const { className, icon, ...rest } = props;
+    return (jsx("button", { ...rest, ref: ref, className: cx(navigationIconButtonClasses.host, className), type: "button", children: jsx(Icon, { icon: icon, size: 16 }) }));
+});
+
+export { NavigationIconButton as default };

package/Navigation/NavigationOption.d.ts

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export type NavigationOptionChild = ReactElement<NavigationOptionProps>;
+export type NavigationOptionChildren = NavigationOptionChild | NavigationOptionChild[];
+export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
+    /**
+     * Whether the item is active.
+     */
+    active?: boolean;
+    /**
+     * Strict children with `NavigationOption`.
+     */
+    children?: NavigationOptionChildren;
+    /**
+     * Icon of the item.
+     */
+    icon?: IconDefinition;
+    /**
+     * Unique ID of the item.
+     */
+    href?: string;
+    /**
+     * Set display title for sub-menu item.
+     */
+    title?: string;
+    /**
+     * Open menu as default
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onTriggerClick?: (path: string[], href: string) => void;
+}
+declare const NavigationOption: import("react").ForwardRefExoticComponent<NavigationOptionProps & import("react").RefAttributes<HTMLLIElement>>;
+export default NavigationOption;

package/Navigation/NavigationOption.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, use, useMemo, useEffect } from 'react';
+import { navigationOptionClasses } from '@mezzanine-ui/core/navigation';
+import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
+import { NavigationOptionLevelContext, NavigationActivatedContext } from './context.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import Icon from '../Icon/Icon.js';
+import Collapse from '../Transition/Collapse.js';
+import cx from 'clsx';
+
+const NavigationOption = forwardRef((props, ref) => {
+    const { active, children, className, defaultOpen = false, href, icon, onTriggerClick, title, ...rest } = props;
+    const [open, setOpen] = useState(defaultOpen);
+    const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
+    const { level, path: parentPath } = use(NavigationOptionLevelContext);
+    const currentLevel = level + 1;
+    const currentKey = href || title || 'unknownId';
+    const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
+    const { activatedPath, setActivatedPath, currentPathname, collapsed, handleCollapseChange, } = use(NavigationActivatedContext);
+    useEffect(() => {
+        if (currentPathname === href) {
+            setActivatedPath(currentPath);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const Component = href ? 'a' : 'div';
+    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !children && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
+            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, className), "data-id": currentKey, children: [jsx(Tooltip, { options: {
+                    placement: 'right',
+                }, title: collapsed ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, href: href, onClick: () => {
+                        setOpen(!open);
+                        onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, href || '');
+                        if (collapsed) {
+                            handleCollapseChange(false);
+                        }
+                        if (!children)
+                            setActivatedPath([...parentPath, currentKey]);
+                    }, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            setOpen(!open);
+                            if (!children)
+                                setActivatedPath([...parentPath, currentKey]);
+                        }
+                    }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.title, children: title }), children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { className: navigationOptionClasses.childrenWrapper, style: {
+                    width: '100%',
+                }, in: !!open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
+                        level: currentLevel,
+                        path: currentPath,
+                    }, children: jsx("ul", { className: navigationOptionClasses.group, children: children }) }) }))] }));
+});
+
+export { NavigationOption as default };

package/Navigation/NavigationOptionCategory.d.ts

@@ -0,0 +1,6 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface NavigationOptionCategoryProps extends Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'onClick'> {
+    title: string;
+}
+declare const NavigationOptionCategory: import("react").ForwardRefExoticComponent<NavigationOptionCategoryProps & import("react").RefAttributes<HTMLLIElement>>;
+export default NavigationOptionCategory;