@mezzanine-ui/react 1.0.0-canary.9 → 1.0.0-rc.0

package/Accordion/Accordion.d.ts

@@ -1,5 +1,13 @@
+import React from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { AccordionTitleProps } from './AccordionTitle';
 export interface AccordionProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * The content of the component. <br />
+     * The first child will be treated as the title of the accordion, and the rest will be treated as the content of the accordion.
+     * You can also use `title` prop to set the title of the accordion, then all children will be treated as the content of the accordion.
+     */
+    children: React.ReactNode;
     /**
      * If true, expands the accordion by default.
      * @default false
@@ -18,6 +26,20 @@ export interface AccordionProps extends Omit<NativeElementPropsWithoutKeyAndRef<
      * Callback fired when the expand/collapse state is changed.
      */
     onChange?(e: boolean): void;
+    /**
+     * The size of accordion.
+     * @default 'main'
+     */
+    size?: 'main' | 'sub';
+    /**
+     * The title of accordion.
+     */
+    title?: string;
+    /**
+     * The actions displayed on the right side of the accordion title. <br />
+     * Only `Button` or `Dropdown` is allowed.
+     */
+    actions?: AccordionTitleProps['actions'];
 }
-declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
 export default Accordion;

package/Accordion/Accordion.js

@@ -1,12 +1,54 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, Children, useMemo } from 'react';
+import React, { forwardRef, useState, useCallback, useMemo, cloneElement } from 'react';
 import { accordionClasses } from '@mezzanine-ui/core/accordion';
 import { AccordionControlContext } from './AccordionControlContext.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import AccordionTitle from './AccordionTitle.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import AccordionContent from './AccordionContent.js';
+import Fade from '../Transition/Fade.js';
 import cx from 'clsx';
 
+const resolveChildren = (children) => {
+    let title = null;
+    let content = null;
+    const restContentChildren = [];
+    flattenChildren(children).forEach((child) => {
+        if (React.isValidElement(child) && child.type === AccordionTitle) {
+            if (title) {
+                console.warn('[Mezzanine][Accordion] Only one AccordionTitle is allowed as children of Accordion.');
+            }
+            title = child;
+        }
+        else if (React.isValidElement(child) && child.type === AccordionContent) {
+            if (content) {
+                console.warn('[Mezzanine][Accordion] Only one AccordionContent is allowed as children of Accordion.');
+            }
+            content = child;
+        }
+        else {
+            restContentChildren.push(child);
+        }
+    });
+    if (restContentChildren.length > 0) {
+        if (content || title) {
+            console.warn('[Mezzanine][Accordion] When <AccordionTitle> or <AccordionContent> is used as children. Please wrap other children with AccordionContent.');
+        }
+        if (!content) {
+            content = jsx(AccordionContent, {});
+        }
+        content = cloneElement(content, {
+            children: [content.props.children, ...restContentChildren],
+        });
+    }
+    return {
+        title,
+        content,
+    };
+};
 const Accordion = forwardRef(function Accordion(props, ref) {
-    const { className, children: childrenProp, defaultExpanded = false, disabled = false, expanded: expandedProp, onChange, ...rest } = props;
-    const [expanded, toggleExpanded] = useState(defaultExpanded || false);
+    const { actions, children: childrenProp, className, defaultExpanded = false, disabled = false, expanded: expandedProp, onChange, size = 'main', title, ...rest } = props;
+    const [expanded, toggleExpanded] = useState(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : false);
     const onToggleExpanded = useCallback((newStatus) => {
         if (typeof onChange === 'function') {
             onChange(newStatus);
@@ -15,20 +57,26 @@ const Accordion = forwardRef(function Accordion(props, ref) {
             toggleExpanded(newStatus);
         }
     }, [onChange]);
-    const [summary, ...children] = Children.toArray(childrenProp);
+    const { title: resolvedTitle, content: resolvedContent } = useMemo(() => resolveChildren(childrenProp), [childrenProp]);
     const contextValue = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         return ({
-            detailsId: ((_a = summary === null || summary === void 0 ? void 0 : summary.props) === null || _a === void 0 ? void 0 : _a.id)
-                ? `${summary.props.id}-details`
+            contentId: resolvedTitle && ((_a = resolvedTitle === null || resolvedTitle === void 0 ? void 0 : resolvedTitle.props) === null || _a === void 0 ? void 0 : _a.id)
+                ? `${resolvedTitle.props.id}-content`
                 : undefined,
             disabled,
-            expanded: expandedProp || expanded,
-            summaryId: (_b = summary === null || summary === void 0 ? void 0 : summary.props) === null || _b === void 0 ? void 0 : _b.id,
+            expanded: expandedProp !== null && expandedProp !== void 0 ? expandedProp : expanded,
+            titleId: (_c = (resolvedTitle && ((_b = resolvedTitle === null || resolvedTitle === void 0 ? void 0 : resolvedTitle.props) === null || _b === void 0 ? void 0 : _b.id))) !== null && _c !== void 0 ? _c : undefined,
             toggleExpanded: onToggleExpanded,
         });
-    }, [disabled, expandedProp, expanded, onToggleExpanded, summary]);
-    return (jsx("div", { ...rest, ref: ref, className: cx(accordionClasses.host, className), children: jsxs(AccordionControlContext.Provider, { value: contextValue, children: [summary, children] }) }));
+    }, [disabled, expandedProp, expanded, onToggleExpanded, resolvedTitle]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(accordionClasses.host, accordionClasses.size(size), className), children: jsxs(AccordionControlContext.Provider, { value: contextValue, children: [title ? (jsx(AccordionTitle, { actions: actions, children: title })) : (resolvedTitle), jsx(Fade, { duration: {
+                        enter: MOTION_DURATION.moderate,
+                        exit: MOTION_DURATION.moderate,
+                    }, easing: {
+                        enter: MOTION_EASING.entrance,
+                        exit: MOTION_EASING.exit,
+                    }, in: expandedProp !== null && expandedProp !== void 0 ? expandedProp : expanded, children: jsx("div", { children: resolvedContent }) })] }) }));
 });
 
 export { Accordion as default };

package/Accordion/AccordionActions.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ButtonGroupProps, ButtonProps } from '../Button';
+import { DropdownProps } from '../Dropdown';
+type AccordionActionsChild = ReactElement<DropdownProps> | ReactElement<ButtonProps> | null | undefined | false;
+export interface AccordionActionsProps extends Omit<ButtonGroupProps, 'children'> {
+    /**
+     * The content of the component. <br />
+     * Only `Button` or `Dropdown` is allowed.
+     */
+    children?: AccordionActionsChild | AccordionActionsChild[];
+}
+declare const AccordionActions: React.FC<AccordionActionsProps>;
+export default AccordionActions;

package/Accordion/AccordionActions.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import { accordionClasses } from '@mezzanine-ui/core/accordion';
+import Dropdown from '../Dropdown/Dropdown.js';
+import cx from 'clsx';
+
+const AccordionActions = ({ children, className, ...rest }) => {
+    const filteredChildren = flattenChildren(children).map((child) => {
+        if (isValidElement(child) &&
+            child.type !== Button &&
+            child.type !== Dropdown) {
+            console.warn('[Mezzanine][Accordion] Only Button or Dropdown is allowed as the child of AccordionActions.');
+            return null;
+        }
+        return child;
+    });
+    return (jsx(ButtonGroup, { className: cx(accordionClasses.titleActions, className), ...rest, children: filteredChildren }));
+};
+
+export { AccordionActions as default };

package/Accordion/AccordionContent.d.ts

@@ -0,0 +1,9 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AccordionContentProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * If true, expands the content, otherwise collapse it.
+     */
+    expanded?: boolean;
+}
+declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionContent;

package/Accordion/{AccordionDetails.js → AccordionContent.js}

@@ -6,9 +6,9 @@ import { AccordionControlContext } from './AccordionControlContext.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
-const AccordionDetails = forwardRef(function AccordionDetails(props, ref) {
+const AccordionContent = forwardRef(function AccordionContent(props, ref) {
     const { className, children, expanded: expandedProp, ...rest } = props;
-    const { detailsId, expanded, summaryId } = useContext(AccordionControlContext) || {};
+    const { contentId: detailsId, expanded, titleId: summaryId, } = useContext(AccordionControlContext) || {};
     const ariaProps = useMemo(() => {
         if (summaryId && detailsId) {
             return {
@@ -18,9 +18,7 @@ const AccordionDetails = forwardRef(function AccordionDetails(props, ref) {
         }
         return {};
     }, [summaryId, detailsId]);
-    return (jsx(Collapse, { style: { width: '100%' }, in: expandedProp || expanded, children: jsx("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.details, {
-                [accordionClasses.detailsExpanded]: expandedProp || expanded,
-            }, className), role: "region", children: children }) }));
+    return (jsx(Collapse, { style: { width: '100%' }, in: expandedProp || expanded, children: jsx("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.content, className), role: "region", children: children }) }));
 });
 
-export { AccordionDetails as default };
+export { AccordionContent as default };

package/Accordion/AccordionControlContext.d.ts

@@ -1,8 +1,8 @@
 export interface AccordionControlContextValue {
-    detailsId?: string;
+    contentId?: string;
     disabled: boolean;
     expanded: boolean;
-    summaryId?: string;
+    titleId?: string;
     toggleExpanded(e: boolean): void;
 }
 export declare const AccordionControlContext: import("react").Context<AccordionControlContextValue | undefined>;

package/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,10 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AccordionGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The size of accordion group, which will be passed to each Accordion in the group.
+     * @default 'main'
+     */
+    size?: 'main' | 'sub';
+}
+declare const AccordionGroup: import("react").ForwardRefExoticComponent<AccordionGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionGroup;

package/Accordion/AccordionGroup.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, isValidElement } from 'react';
+import { accordionGroupClasses } from '@mezzanine-ui/core/accordion';
+import { flattenChildren } from '../utils/flatten-children.js';
+import Accordion from './Accordion.js';
+import cx from 'clsx';
+
+const AccordionGroup = forwardRef(function AccordionGroup(props, ref) {
+    const { className, children, size, ...rest } = props;
+    const childrenWithSize = useMemo(() => flattenChildren(children).map((child) => {
+        if (isValidElement(child) && child.type === Accordion) {
+            return {
+                ...child,
+                props: {
+                    ...child.props,
+                    size,
+                },
+            };
+        }
+        return child;
+    }), [children, size]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(accordionGroupClasses.host, className), children: childrenWithSize }));
+});
+
+export { AccordionGroup as default };

package/Accordion/AccordionTitle.d.ts

@@ -0,0 +1,14 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { AccordionActionsProps } from './AccordionActions';
+export interface AccordionTitleProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Custom ChevronRight icon className.
+     */
+    iconClassName?: string;
+    /**
+     * Custom suffix actions.
+     */
+    actions?: AccordionActionsProps;
+}
+declare const AccordionTitle: import("react").ForwardRefExoticComponent<AccordionTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionTitle;

package/Accordion/AccordionTitle.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback, useMemo, isValidElement } from 'react';
+import { ChevronRightIcon } from '@mezzanine-ui/icons';
+import { accordionClasses } from '@mezzanine-ui/core/accordion';
+import { AccordionControlContext } from './AccordionControlContext.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import AccordionActions from './AccordionActions.js';
+import Rotate from '../Transition/Rotate.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const resolveChildren = (children) => {
+    const mainPartChildren = [];
+    const actionsChildren = [];
+    flattenChildren(children).forEach((child) => {
+        if (isValidElement(child) && child.type === AccordionActions) {
+            actionsChildren.push(child);
+        }
+        else {
+            mainPartChildren.push(child);
+        }
+    });
+    return { mainPartChildren, actionsChildren };
+};
+const AccordionTitle = forwardRef(function AccordionTitle(props, ref) {
+    const { className, children, iconClassName: iconClassNameProp, actions: suffixActions, ...rest } = props;
+    const { contentId, disabled, expanded, toggleExpanded } = useContext(AccordionControlContext) || {};
+    const onToggle = useCallback((e) => {
+        e.stopPropagation();
+        if (typeof toggleExpanded === 'function' && !disabled) {
+            toggleExpanded(!expanded);
+        }
+    }, [disabled, expanded, toggleExpanded]);
+    const ariaProps = useMemo(() => {
+        let result = {
+            'aria-expanded': expanded,
+        };
+        if (contentId) {
+            result = {
+                ...result,
+                'aria-controls': contentId,
+            };
+        }
+        return result;
+    }, [contentId, expanded]);
+    const { mainPartChildren, actionsChildren } = useMemo(() => resolveChildren(children), [children]);
+    return (jsxs("div", { ...rest, ref: ref, className: cx(accordionClasses.title, {
+            [accordionClasses.titleExpanded]: expanded,
+            [accordionClasses.titleDisabled]: disabled,
+        }, className), children: [jsxs("button", { className: accordionClasses.titleMainPart, disabled: disabled, onClick: onToggle, type: "button", ...ariaProps, children: [jsx(Rotate, { in: expanded, degrees: -90, children: jsx(Icon, { size: 16, className: cx(accordionClasses.titleIcon, {
+                                [accordionClasses.titleIconDisabled]: disabled,
+                            }, iconClassNameProp), icon: ChevronRightIcon }) }), mainPartChildren] }), suffixActions ? (jsx(AccordionActions, { ...suffixActions })) : (actionsChildren)] }));
+});
+
+export { AccordionTitle as default };

package/Accordion/index.d.ts

@@ -1,6 +1,10 @@
 export type { AccordionProps } from './Accordion';
 export { default } from './Accordion';
-export { default as AccordionSummary } from './AccordionSummary';
-export type { AccordionSummaryProps } from './AccordionSummary';
-export { default as AccordionDetails } from './AccordionDetails';
-export type { AccordionDetailsProps } from './AccordionDetails';
+export { default as AccordionTitle } from './AccordionTitle';
+export type { AccordionTitleProps } from './AccordionTitle';
+export { default as AccordionContent } from './AccordionContent';
+export type { AccordionContentProps } from './AccordionContent';
+export { default as AccordionActions } from './AccordionActions';
+export type { AccordionActionsProps } from './AccordionActions';
+export { default as AccordionGroup } from './AccordionGroup';
+export type { AccordionGroupProps } from './AccordionGroup';

package/Accordion/index.js

@@ -1,3 +1,5 @@
 export { default } from './Accordion.js';
-export { default as AccordionSummary } from './AccordionSummary.js';
-export { default as AccordionDetails } from './AccordionDetails.js';
+export { default as AccordionTitle } from './AccordionTitle.js';
+export { default as AccordionContent } from './AccordionContent.js';
+export { default as AccordionActions } from './AccordionActions.js';
+export { default as AccordionGroup } from './AccordionGroup.js';

package/Anchor/Anchor.d.ts

@@ -1,30 +1,63 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface AnchorProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
-    /** The current active anchor ID */
-    activeAnchorId?: string;
-    /** Whether apply ellipsis or not
-     * @default false
+import { ReactElement } from 'react';
+import { AnchorItemData } from './AnchorItem';
+export interface AnchorPropsWithAnchors {
+    /**
+     * ```tsx
+     * interface AnchorItemData {
+     *   autoScrollTo?: boolean;
+     *   children?: AnchorItemData[];
+     *   disabled?: boolean;
+     *   href: string;
+     *   id: string;
+     *   name: string;
+     *   onClick?: VoidFunction;
+     *   title?: string;
+     * }
+     * ```
+     */
+    anchors: AnchorItemData[];
+    children?: never;
+}
+export interface AnchorPropsWithChildren {
+    anchors?: never;
+    /**
+     * Whether to enable smooth scrolling to the target element when clicked.
+     */
+    autoScrollTo?: boolean;
+    /**
+     * Use nested `<Anchor>` components to create hierarchical navigation. <br />
+     * Only accepts `<Anchor>` components and text content as children. <br />
+     * ```tsx
+     * <AnchorGroup>
+     *   <Anchor href="#acr1">ACR 1</Anchor>
+     *   <Anchor href="#acr2">
+     *     anchor 2
+     *     <Anchor href="#acr2-1">ACR 2-1</Anchor>
+     *     <Anchor href="#acr2-2">ACR 2-2</Anchor>
+     *   </Anchor>
+     * </AnchorGroup>
+     * ```
      */
-    ellipsis?: boolean;
+    children: string | ReactElement<AnchorPropsWithChildren, typeof Anchor> | Array<string | ReactElement<AnchorPropsWithChildren, typeof Anchor>>;
     /**
-     * Anchor list.
+     * Whether the anchor is disabled.<br>
+     * If parent anchor is disabled, all its children will be disabled too. <br />
      */
-    list: {
-        id: string;
-        name: string;
-    }[];
+    disabled?: boolean;
     /**
-     * The maximum width for anchor container. This might be useful when you need to set `ellipsis: true`.
+     * Required when used as child component.
      */
-    maxWidth?: number;
+    href?: string;
     /**
      * Trigger when user click on any anchor.
      */
-    onClick?: (nextAnchorId: string) => void;
+    onClick?: VoidFunction;
+    title?: string;
 }
+export type AnchorProps = AnchorPropsWithAnchors | AnchorPropsWithChildren;
 /**
- * The react component for `mezzanine` anchor.
- * This component should always be full width of its parent.
+ * The `mezzanine` Anchor component provides navigation menu for page sections with automatic hash tracking.
+ * Nested structure supports up to 3 levels; deeper levels will be ignored.
  */
-declare const Anchor: import("react").ForwardRefExoticComponent<AnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+declare function Anchor(props: AnchorProps): import("react/jsx-runtime").JSX.Element;
 export default Anchor;

package/Anchor/Anchor.js

@@ -1,20 +1,20 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { anchorClasses } from '@mezzanine-ui/core/anchor';
-import Typography from '../Typography/Typography.js';
-import cx from 'clsx';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import AnchorItem from './AnchorItem.js';
+import { parseChildren } from './utils.js';
 
 /**
- * The react component for `mezzanine` anchor.
- * This component should always be full width of its parent.
+ * The `mezzanine` Anchor component provides navigation menu for page sections with automatic hash tracking.
+ * Nested structure supports up to 3 levels; deeper levels will be ignored.
  */
-const Anchor = forwardRef(function Anchor(props, ref) {
-    const { activeAnchorId, className, ellipsis = false, list, maxWidth, onClick, style, ...rest } = props;
-    const resolvedStyle = {
-        ...(style || {}),
-        ...(maxWidth ? { maxWidth: `${maxWidth}px` } : {}),
-    };
-    return (jsxs("div", { ref: ref, className: cx(anchorClasses.host, className), style: resolvedStyle, ...rest, children: [jsx("div", { className: anchorClasses.bar }), list.map((anchor) => (jsx("button", { type: "button", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(anchor.id), className: cx(anchorClasses.anchor, activeAnchorId === anchor.id && anchorClasses.anchorActive), children: jsx(Typography, { variant: "input3", color: "inherit", ellipsis: ellipsis, children: anchor.name }) }, anchor.id)))] }));
-});
+function Anchor(props) {
+    const anchorItems = 'anchors' in props && props.anchors
+        ? props.anchors
+        : 'children' in props && props.children
+            ? parseChildren(props.children, Anchor)
+            : [];
+    return (jsx(Fragment, { children: anchorItems.map((anchorItem) => (jsx(AnchorItem, { autoScrollTo: anchorItem.autoScrollTo, disabled: anchorItem.disabled, href: anchorItem.href, id: anchorItem.id, name: anchorItem.name, onClick: anchorItem.onClick, subAnchors: anchorItem.children, title: anchorItem.title }, anchorItem.id))) }));
+}
 
 export { Anchor as default };

package/Anchor/AnchorGroup.d.ts

@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+import Anchor from './Anchor';
+import type { AnchorPropsWithAnchors, AnchorPropsWithChildren } from './Anchor';
+type AnchorElement = ReactElement<AnchorPropsWithChildren, typeof Anchor>;
+type AnchorChildren = AnchorElement | AnchorElement[];
+export type AnchorGroupPropsWithAnchors = AnchorPropsWithAnchors;
+export interface AnchorGroupPropsWithChildren {
+    anchors?: never;
+    children: AnchorChildren;
+}
+type AnchorGroupBaseProps = AnchorGroupPropsWithAnchors | AnchorGroupPropsWithChildren;
+export type AnchorGroupProps = AnchorGroupBaseProps & {
+    className?: string;
+};
+/**
+ * The `mezzanine` AnchorGroup component renders a group of anchor links,
+ * configured via an `anchors` prop or parsed from `Anchor` child components.
+ *
+ * ```tsx
+ * <AnchorGroup>
+ *   <Anchor href="#section1">Section 1</Anchor>
+ *   <Anchor href="#section2">Section 2</Anchor>
+ * </AnchorGroup>
+ * ```
+ *
+ * ```tsx
+ * <AnchorGroup anchors={[
+ *   { id: 'section1', name: 'Section 1', href: '#section1' },
+ *   { id: 'section2', name: 'Section 2', href: '#section2' }
+ * ]} />
+ * ```
+ */
+declare const AnchorGroup: import("react").ForwardRefExoticComponent<AnchorGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AnchorGroup;

package/Anchor/AnchorGroup.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { anchorClasses } from '@mezzanine-ui/core/anchor';
+import Anchor from './Anchor.js';
+import { parseChildren } from './utils.js';
+import cx from 'clsx';
+
+/**
+ * The `mezzanine` AnchorGroup component renders a group of anchor links,
+ * configured via an `anchors` prop or parsed from `Anchor` child components.
+ *
+ * ```tsx
+ * <AnchorGroup>
+ *   <Anchor href="#section1">Section 1</Anchor>
+ *   <Anchor href="#section2">Section 2</Anchor>
+ * </AnchorGroup>
+ * ```
+ *
+ * ```tsx
+ * <AnchorGroup anchors={[
+ *   { id: 'section1', name: 'Section 1', href: '#section1' },
+ *   { id: 'section2', name: 'Section 2', href: '#section2' }
+ * ]} />
+ * ```
+ */
+const AnchorGroup = forwardRef(function AnchorGroup(props, ref) {
+    const { className } = props;
+    const anchorItems = 'anchors' in props && props.anchors
+        ? props.anchors
+        : 'children' in props && props.children
+            ? parseChildren(props.children, Anchor)
+            : [];
+    return (jsx("div", { ref: ref, className: cx(anchorClasses.host, className), children: jsx(Anchor, { anchors: anchorItems }) }));
+});
+
+export { AnchorGroup as default };

package/Anchor/AnchorItem.d.ts

@@ -0,0 +1,30 @@
+export interface AnchorItemData {
+    autoScrollTo?: boolean;
+    children?: AnchorItemData[];
+    disabled?: boolean;
+    href: string;
+    id: string;
+    name: string;
+    onClick?: VoidFunction;
+    title?: string;
+}
+export interface AnchorItemProps {
+    autoScrollTo?: boolean;
+    className?: string;
+    disabled?: boolean;
+    href: string;
+    id: string;
+    level?: number;
+    name: string;
+    onClick?: VoidFunction;
+    parentAutoScrollTo?: boolean;
+    parentDisabled?: boolean;
+    subAnchors?: AnchorItemData[];
+    title?: string;
+}
+/**
+ * Individual anchor link with hash tracking and smooth scrolling.
+ * Tracks active state from URL hash and inherits disabled state from parent.
+ */
+declare function AnchorItem({ autoScrollTo, className, disabled, href, id: _id, level, name, onClick, parentAutoScrollTo, parentDisabled, subAnchors, title, }: AnchorItemProps): import("react/jsx-runtime").JSX.Element;
+export default AnchorItem;

package/Anchor/AnchorItem.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { anchorClasses } from '@mezzanine-ui/core/anchor';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+const MAX_CHILDREN_PER_LEVEL = 3;
+/**
+ * Custom hook to track window.location.hash changes
+ */
+function useHash() {
+    const [hash, setHash] = useState(() => typeof window !== 'undefined' ? window.location.hash : '');
+    useEffect(() => {
+        const handleHashChange = () => {
+            setHash(window.location.hash);
+        };
+        window.addEventListener('hashchange', handleHashChange);
+        return () => {
+            window.removeEventListener('hashchange', handleHashChange);
+        };
+    }, []);
+    return hash;
+}
+/**
+ * Individual anchor link with hash tracking and smooth scrolling.
+ * Tracks active state from URL hash and inherits disabled state from parent.
+ */
+function AnchorItem({ autoScrollTo, className, disabled, href, id: _id, level = 1, name, onClick, parentAutoScrollTo = false, parentDisabled = false, subAnchors, title, }) {
+    const renderableChildren = subAnchors && subAnchors.length > 0 && level < MAX_CHILDREN_PER_LEVEL
+        ? subAnchors.slice(0, MAX_CHILDREN_PER_LEVEL)
+        : undefined;
+    const currentHash = useHash();
+    const hashIndex = href.indexOf('#');
+    const itemHash = hashIndex !== -1 ? href.slice(hashIndex) : '';
+    const isActive = itemHash && currentHash === itemHash;
+    const isAutoScrollTo = parentAutoScrollTo || autoScrollTo;
+    const isDisabled = parentDisabled || disabled;
+    const handleClick = (event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        // If href contains a hash, handle navigation manually to ensure hashchange event fires
+        if (itemHash && typeof window !== 'undefined') {
+            event.preventDefault();
+            // Update the hash in the URL only if it's different
+            if (window.location.hash !== itemHash) {
+                window.history.pushState(null, '', itemHash);
+                window.dispatchEvent(new HashChangeEvent('hashchange'));
+            }
+            // Scroll to the target element if it exists and autoScrollTo is enabled
+            if (isAutoScrollTo) {
+                const targetElement = document.querySelector(itemHash);
+                if (targetElement) {
+                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            }
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsxs(Fragment, { children: [jsx("a", { "aria-disabled": isDisabled, className: cx(anchorClasses.anchorItem, isActive && anchorClasses.anchorItemActive, isDisabled && anchorClasses.anchorItemDisabled, className), href: href, onClick: handleClick, tabIndex: isDisabled ? -1 : undefined, title: title, children: jsx(Typography, { color: "inherit", variant: "label-primary", children: name }) }), renderableChildren && (jsx("div", { className: anchorClasses.nested, children: renderableChildren.map((child) => (jsx(AnchorItem, { autoScrollTo: child.autoScrollTo, className: cx(level === 1 && anchorClasses.nestedLevel1, level === 2 && anchorClasses.nestedLevel2), disabled: child.disabled, href: child.href, id: child.id, level: level + 1, name: child.name, onClick: child.onClick, parentAutoScrollTo: isAutoScrollTo, parentDisabled: isDisabled, subAnchors: child.children, title: child.title }, child.id))) }))] }));
+}
+
+export { AnchorItem as default };