draft-components 3.5.0 → 4.0.0

package/dist/components/menu/menu.d.ts

@@ -1,39 +1,35 @@
-import { ComponentPropsWithoutRef, JSX, KeyboardEventHandler, MouseEventHandler, ReactNode, RefCallback } from 'react';
-import { ButtonSize, ButtonStyle, ButtonTint } from '../button/index.js';
-import { PopoverAlignment, PopoverPlacement } from '../popover/index.js';
-import { MenuItemProps } from './menu-item.js';
+import { type ComponentProps, type MouseEventHandler, type KeyboardEventHandler, type RefCallback, type JSX } from 'react';
+import { type PopoverPlacement } from '../popover/index.js';
+import { MenuItem } from './menu-item.js';
 import { MenuSeparator } from './menu-separator.js';
-export type MenuButtonRenderFn = (props: {
+export type MenuOpenHandler = () => void;
+export type MenuCloseHandler = () => void;
+export type MenuApi = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export type MenuButtonRenderer = (props: {
     'ref': RefCallback<HTMLElement>;
     'id': string;
     'aria-haspopup': true;
-    'aria-expanded': boolean;
     'aria-controls': string;
+    'aria-expanded': boolean;
     'onClick': MouseEventHandler;
     'onKeyDown': KeyboardEventHandler;
-}, context: {
-    isOpen: boolean;
-    openMenu: () => void;
-    closeMenu: () => void;
 }) => JSX.Element;
-type MenuHTMLProps = ComponentPropsWithoutRef<'ul'>;
-export type MenuPlacement = PopoverPlacement;
-export type MenuAlignment = PopoverAlignment;
-export type MenuProps = {
+type MenuHTMLProps = ComponentProps<'div'>;
+type MenuBaseProps = {
     defaultIsOpen?: boolean;
-    placement?: MenuPlacement;
-    alignment?: MenuAlignment;
-    onOpen?: () => void;
-    onClose?: () => void;
-    button: ReactNode | MenuButtonRenderFn;
-    buttonClassName?: string;
-    buttonStyle?: ButtonStyle;
-    buttonSize?: ButtonSize;
-    buttonTint?: ButtonTint;
-} & MenuHTMLProps;
-export declare function Menu({ defaultIsOpen, placement, alignment, buttonClassName, buttonStyle, buttonSize, buttonTint, button, className, children, onOpen, onClose, onKeyDown, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    placement?: PopoverPlacement;
+    renderButton: MenuButtonRenderer;
+    onOpen?: MenuOpenHandler;
+    onClose?: MenuCloseHandler;
+};
+export type MenuProps = MenuBaseProps & Omit<MenuHTMLProps, keyof MenuBaseProps>;
+export declare function Menu({ defaultIsOpen, placement, className, children, renderButton, onClick, onKeyDown, onMouseOver, onOpen, onClose, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
-    var Item: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    var Item: typeof MenuItem;
     var Separator: typeof MenuSeparator;
 }
 export {};

package/dist/components/menu/menu.js

@@ -1,104 +1,98 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { KeyboardKeys } from '../../lib/keyboard-keys.js';
-import { Children, cloneElement, isValidElement, useId, useState, } from 'react';
-import { classNames, focusElement } from '../../lib/react-helpers.js';
-import { assertIfNullable } from '../../lib/helpers.js';
-import { Button } from '../button/index.js';
+import { useId, useState, } from 'react';
+import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
+import { KeyboardKey } from '../../lib/keyboard-key.js';
+import { useRefCallback } from '../../hooks/use-ref-callback.js';
 import { Popover } from '../popover/index.js';
 import { MenuItem } from './menu-item.js';
 import { MenuSeparator } from './menu-separator.js';
-export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonClassName = '', buttonStyle = 'filled', buttonSize = 'sm', buttonTint = 'gray', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
+export function Menu({ defaultIsOpen = false, placement = 'bottom-start', className, children, renderButton, onClick, onKeyDown, onMouseOver, onOpen, onClose, ...props }) {
     const id = useId();
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
-    const openMenu = () => {
+    const open = useRefCallback(() => {
         setIsOpen(true);
-        onOpen?.();
-    };
-    const closeMenu = () => {
+        if (typeof onOpen === 'function') {
+            onOpen();
+        }
+    });
+    const close = useRefCallback(() => {
         setIsOpen(false);
-        onClose?.();
-    };
-    const focusMenuButton = () => {
-        const menuButton = document.getElementById(buttonId);
-        assertIfNullable(menuButton, `Unable to get DOM element #${buttonId}`);
-        focusElement(menuButton);
-    };
+        if (typeof onClose === 'function') {
+            onClose();
+        }
+    });
     const focusNextMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        let index = menuItems.findIndex((el) => el === document.activeElement);
+        const menuitems = findMenuitems(menuId);
+        let index = menuitems.findIndex((el) => el === document.activeElement);
         index += 1;
-        if (index >= menuItems.length) {
+        if (index >= menuitems.length) {
             index = 0;
         }
-        focusElement(menuItems[index]);
+        tryToFocusElement(menuitems[index]);
     };
     const focusPrevMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        let index = menuItems.findIndex((el) => el === document.activeElement);
+        const menuitems = findMenuitems(menuId);
+        let index = menuitems.findIndex((el) => el === document.activeElement);
         index -= 1;
         if (index < 0) {
-            index = menuItems.length - 1;
+            index = menuitems.length - 1;
         }
-        focusElement(menuItems[index]);
+        tryToFocusElement(menuitems[index]);
     };
-    const focusFirstMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        focusElement(menuItems[0]);
+    const focusFirstMenuitem = () => {
+        const menuitems = findMenuitems(menuId);
+        tryToFocusElement(menuitems[0]);
     };
-    const focusLastMenuItem = () => {
-        const menuItems = getMenuItems(menuId);
-        focusElement(menuItems[menuItems.length - 1]);
+    const focusLastMenuitem = () => {
+        const menuitems = findMenuitems(menuId);
+        tryToFocusElement(menuitems[menuitems.length - 1]);
     };
-    const focusMenuItemByFirstChar = (char) => {
-        if (char.length > 1) {
+    const focusMenuitemByFirstChar = (char) => {
+        const search = char.toLowerCase();
+        const menuitems = findMenuitems(menuId);
+        if (menuitems.length === 0) {
             return;
         }
-        char = char.toLowerCase();
-        const menuItems = getMenuItems(menuId);
-        if (menuItems.length === 0) {
-            return;
-        }
-        const firstChars = menuItems.map((el) => {
-            if (el.textContent) {
-                return el.textContent[0].toLowerCase();
-            }
-            return '';
-        });
-        const activeMenuItemIndex = menuItems.findIndex((el) => el === document.activeElement);
-        let fromIndex = activeMenuItemIndex + 1;
-        if (fromIndex >= firstChars.length) {
+        const activeMenuitemIndex = menuitems.findIndex((el) => el === document.activeElement);
+        let fromIndex = activeMenuitemIndex + 1;
+        if (fromIndex >= menuitems.length) {
             fromIndex = 0;
         }
-        let index = firstChars.indexOf(char, fromIndex);
-        if (index === -1 && fromIndex !== 0) {
-            index = firstChars.indexOf(char);
-        }
-        focusElement(menuItems[index]);
+        const menuitem = menuitems.find((menuitem, index) => {
+            const label = (menuitem.textContent || '').trim().toLowerCase();
+            return index >= fromIndex && label.startsWith(search);
+        });
+        tryToFocusElement(menuitem);
     };
     const handleButtonClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
         if (isOpen) {
-            closeMenu();
+            close();
         }
         else {
-            openMenu();
+            open();
+            window.setTimeout(() => {
+                const menuElement = document.getElementById(menuId);
+                if (menuElement) {
+                    tryToFocusElement(menuElement);
+                }
+            });
         }
-        focusMenuButton();
-        event.preventDefault();
-        event.stopPropagation();
     };
     const handleButtonKeyDown = (event) => {
-        if (event.key === KeyboardKeys.ArrowUp
-            || event.key === KeyboardKeys.ArrowDown
-            || event.key === KeyboardKeys.Enter
-            || event.key === KeyboardKeys.Space) {
-            openMenu();
-            window.setTimeout(event.key === KeyboardKeys.ArrowUp
-                ? focusLastMenuItem
-                : focusFirstMenuItem);
+        if (event.key === KeyboardKey.ARROW_UP
+            || event.key === KeyboardKey.ARROW_DOWN
+            || event.key === KeyboardKey.ENTER
+            || event.key === KeyboardKey.SPACE) {
             event.preventDefault();
             event.stopPropagation();
+            open();
+            window.setTimeout(event.key === KeyboardKey.ARROW_UP
+                ? focusLastMenuitem
+                : focusFirstMenuitem);
         }
     };
     const handleMenuKeyDown = (event) => {
@@ -106,83 +100,94 @@ export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment =
             return;
         }
         let handled = false;
-        if (event.key === KeyboardKeys.ArrowUp) {
+        if (event.key === KeyboardKey.ARROW_UP) {
             focusPrevMenuItem();
             handled = true;
         }
-        else if (event.key === KeyboardKeys.ArrowDown) {
+        else if (event.key === KeyboardKey.ARROW_DOWN) {
             focusNextMenuItem();
             handled = true;
         }
-        else if (event.key === KeyboardKeys.Home) {
-            focusFirstMenuItem();
+        else if (event.key === KeyboardKey.HOME) {
+            focusFirstMenuitem();
             handled = true;
         }
-        else if (event.key === KeyboardKeys.End) {
-            focusLastMenuItem();
+        else if (event.key === KeyboardKey.END) {
+            focusLastMenuitem();
             handled = true;
         }
-        else if (event.key === KeyboardKeys.Tab) {
-            closeMenu();
-            if (event.shiftKey) {
-                focusMenuButton();
-                handled = true;
-            }
+        else if (event.key === KeyboardKey.TAB) {
+            close();
+            handled = true;
         }
         else if (event.key.match(/^\S$/)) {
-            focusMenuItemByFirstChar(event.key);
+            focusMenuitemByFirstChar(event.key);
             handled = true;
         }
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
-        onKeyDown?.(event);
+        if (typeof onKeyDown === 'function') {
+            onKeyDown(event);
+        }
     };
-    const renderAnchor = ({ ref }) => {
-        if (typeof button === 'function') {
-            return button({
-                ref,
-                'id': buttonId,
-                'aria-haspopup': true,
-                'aria-expanded': isOpen,
-                'aria-controls': menuId,
-                'onClick': handleButtonClick,
-                'onKeyDown': handleButtonKeyDown,
-            }, {
-                isOpen,
-                openMenu,
-                closeMenu,
-            });
+    const handleMenuMouseOver = (event) => {
+        const menuitem = findTargetMenuitem(event.currentTarget, event.target);
+        if (menuitem && !menuitem.disabled) {
+            tryToFocusElement(menuitem);
+        }
+        if (typeof onMouseOver === 'function') {
+            onMouseOver(event);
         }
-        return (_jsx(Button, { "data-testid": "menu-button", ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, className: buttonClassName, buttonStyle: buttonStyle, size: buttonSize, tint: buttonTint, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, children: button }));
     };
-    return (_jsx(Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: _jsx("ul", { ...props, className: classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: Children.map(children, (child) => {
-                if (isMenuItem(child)) {
-                    const props = child.props;
-                    const onClick = (event) => {
-                        props.onClick?.(event);
-                        closeMenu();
-                    };
-                    const onMouseEnter = (event) => {
-                        focusElement(event.currentTarget);
-                        props.onMouseEnter?.(event);
-                    };
-                    return cloneElement(child, { onClick, onMouseEnter });
-                }
-                return child;
-            }) }) }));
+    const handleMenuClick = (event) => {
+        const menuitem = findTargetMenuitem(event.currentTarget, event.target);
+        if (menuitem && !menuitem.disabled) {
+            close();
+        }
+        if (typeof onClick === 'function') {
+            onClick(event);
+        }
+    };
+    const renderAnchor = ({ ref }) => {
+        return renderButton({
+            ref,
+            'id': buttonId,
+            'aria-haspopup': true,
+            'aria-expanded': isOpen,
+            'aria-controls': menuId,
+            'onClick': handleButtonClick,
+            'onKeyDown': handleButtonKeyDown,
+        });
+    };
+    return (_jsx(Popover, { id: menuId, role: "menu", className: classNames(className, 'dc-menu'), "aria-labelledby": buttonId, tabIndex: 0, placement: placement, isOpen: isOpen, onClose: close, renderAnchor: renderAnchor, onClick: handleMenuClick, onKeyDown: handleMenuKeyDown, onMouseOver: handleMenuMouseOver, children: children }));
 }
 Menu.Item = MenuItem;
 Menu.Separator = MenuSeparator;
-function isMenuItem(el) {
-    return isValidElement(el) && el.type === MenuItem;
-}
-function getMenuItems(menuId) {
+function findMenuitems(menuId) {
     const menuEl = window.document.getElementById(menuId);
     if (!menuEl) {
         return [];
     }
-    const nodes = menuEl.querySelectorAll('button[role="menuitem"]:not(:disabled), button[role="menuitemradio"]:not(:disabled)');
-    return Array.from(nodes);
+    const selectors = [
+        'button[role="menuitem"]:not(:disabled)',
+        'button[role="menuitemradio"]:not(:disabled)',
+    ];
+    const elements = menuEl.querySelectorAll(selectors.join(','));
+    return Array.from(elements);
+}
+function findTargetMenuitem(menuEl, target) {
+    if (target instanceof Element) {
+        let element = target;
+        while (element && element !== menuEl) {
+            if (element instanceof HTMLButtonElement
+                && (element.role === 'menuitem' || element.role === 'menuitemradio')) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+    }
+    return null;
 }
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAML,KAAK,EACL,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAmD,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAoCpD,MAAM,UAAU,IAAI,CAAC,EACnB,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,cAAc,EAC1B,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,SAAS,EACT,WAAW,EACX,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACE;IACV,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,eAAe,MAAM,EAAE,CAAC;IACzC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEpD,MAAM,IAAI,GAAG,cAAc,CAAC,GAAG,EAAE;QAC/B,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,MAAM,EAAE,CAAC;QACX,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,EAAE;QAChC,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAClC,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC;QACvE,KAAK,IAAI,CAAC,CAAC;QACX,IAAI,KAAK,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YAC9B,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;QACD,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC;QACvE,KAAK,IAAI,CAAC,CAAC;QACX,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,KAAK,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/B,CAAC;QACD,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,CAAC,IAAY,EAAE,EAAE;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAClC,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,MAAM,mBAAmB,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC;QACvF,IAAI,SAAS,GAAG,mBAAmB,GAAG,CAAC,CAAC;QACxC,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YAClC,SAAS,GAAG,CAAC,CAAC;QAChB,CAAC;QAED,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YAClD,MAAM,KAAK,GAAG,CAAC,QAAQ,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YAChE,OAAO,KAAK,IAAI,SAAS,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QACH,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAmC,CAAC,KAAK,EAAE,EAAE;QAClE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,EAAE,CAAC;QACV,CAAC;aAAM,CAAC;YACN,IAAI,EAAE,CAAC;YACP,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;gBACpD,IAAI,WAAW,EAAE,CAAC;oBAChB,iBAAiB,CAAC,WAAW,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAsC,CAAC,KAAK,EAAE,EAAE;QACvE,IACE,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ;eAC/B,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,UAAU;eACpC,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,KAAK;eAC/B,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,KAAK,EAClC,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,EAAE,CAAC;YACP,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ;gBAClD,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,kBAAkB,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;QACxE,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ,EAAE,CAAC;YACvC,iBAAiB,EAAE,CAAC;YACpB,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,UAAU,EAAE,CAAC;YAChD,iBAAiB,EAAE,CAAC;YACpB,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YAC1C,kBAAkB,EAAE,CAAC;YACrB,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;YACzC,iBAAiB,EAAE,CAAC;YACpB,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;YACzC,KAAK,EAAE,CAAC;YACR,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnC,wBAAwB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACpC,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;QACD,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;YACpC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAsC,CAAC,KAAK,EAAE,EAAE;QACvE,MAAM,QAAQ,GAAG,kBAAkB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YACnC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;QACD,IAAI,OAAO,WAAW,KAAK,UAAU,EAAE,CAAC;YACtC,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAsC,CAAC,KAAK,EAAE,EAAE;QACnE,MAAM,QAAQ,GAAG,kBAAkB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YACnC,KAAK,EAAE,CAAC;QACV,CAAC;QACD,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAwB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;QACpD,OAAO,YAAY,CAAC;YAClB,GAAG;YACH,IAAI,EAAE,QAAQ;YACd,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,MAAM;YACvB,eAAe,EAAE,MAAM;YACvB,SAAS,EAAE,iBAAiB;YAC5B,WAAW,EAAE,mBAAmB;SACjC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,MAAM,EACV,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,qBAC1B,QAAQ,EACzB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,EACd,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,iBAAiB,EAC5B,WAAW,EAAE,mBAAmB,YAE/B,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AACD,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AACrB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;AAE/B,SAAS,aAAa,CAAC,MAAc;IACnC,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,SAAS,GAAG;QAChB,wCAAwC;QACxC,6CAA6C;KAC9C,CAAC;IACF,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAoB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACjF,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAe,EAAE,MAAmB;IAC9D,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;QAC9B,IAAI,OAAO,GAAmB,MAAM,CAAC;QACrC,OAAO,OAAO,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;YACrC,IACE,OAAO,YAAY,iBAAiB;mBACjC,CAAC,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,EACpE,CAAC;gBACD,OAAO,OAAO,CAAC;YACjB,CAAC;YACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;QAClC,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/components/nav-list/index.js

@@ -1,3 +1,4 @@
 export * from './nav-list.js';
 export * from './nav-list-item.js';
 export * from './nav-list-title.js';
+//# sourceMappingURL=index.js.map

package/dist/components/nav-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/nav-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/components/nav-list/nav-list-item.d.ts

@@ -1,13 +1,14 @@
-import { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
-type NavListItemHTMLProps = ComponentPropsWithoutRef<'a'>;
-export type NavListItemRenderFn = (props: {
+import { type ComponentProps, type JSX, type ReactNode } from 'react';
+export type NavListItemRenderer = (props: {
     className: string;
     children: JSX.Element;
 }) => ReactNode;
-export type NavListItemProps = {
+type NavListItemHTMLProps = ComponentProps<'a'>;
+type NavListItemBaseProps = {
     icon?: ReactNode;
     badge?: string | number;
-    renderAs?: NavListItemRenderFn;
-} & NavListItemHTMLProps;
+    renderAs?: NavListItemRenderer;
+};
+export type NavListItemProps = NavListItemBaseProps & Omit<NavListItemHTMLProps, keyof NavListItemBaseProps>;
 export declare function NavListItem({ className, icon, badge, children, renderAs, ...props }: NavListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/nav-list/nav-list-item.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Badge } from '../badge/index.js';
 export function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
@@ -13,3 +14,4 @@ export function NavListItem({ className, icon, badge, children, renderAs, ...pro
     }
     return _jsx("li", { className: "dc-nav-list__item", children: content });
 }
+//# sourceMappingURL=nav-list-item.js.map

package/dist/components/nav-list/nav-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-list-item.js","sourceRoot":"","sources":["../../../src/components/nav-list/nav-list-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAmB1C,MAAM,UAAU,WAAW,CAAC,EAC1B,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACS;IACjB,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACjD,QAAQ,GAAG,CACT,8BACG,IAAI,IAAI,IAAI,IAAI,CACf,eAAK,SAAS,EAAC,mBAAmB,aAC/B,IAAI,EACJ,GAAG,IACA,CACP,EACD,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,EAClD,KAAK,IAAI,IAAI,IAAI,CAChB,wCAEE,KAAC,KAAK,IAAC,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAS,IACpD,CACJ,IACA,CACJ,CAAC;IAEF,IAAI,OAAO,CAAC;IACZ,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9C,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,eAAO,KAAK,EAAE,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAK,CAAC;IAC/D,CAAC;IAED,OAAO,aAAI,SAAS,EAAC,mBAAmB,YAAE,OAAO,GAAM,CAAC;AAC1D,CAAC"}

package/dist/components/nav-list/nav-list-title.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-type NavListTitleHTMLProps = ComponentPropsWithoutRef<'li'>;
-type NavListTitleBaseProps = Omit<NavListTitleHTMLProps, 'children'>;
-export type NavListTitleProps = {
+import { type ComponentProps, type ReactNode } from 'react';
+type NavListTitleHTMLProps = ComponentProps<'li'>;
+type NavListTitleBaseProps = {
     children: ReactNode;
-} & NavListTitleBaseProps;
+};
+export type NavListTitleProps = NavListTitleBaseProps & Omit<NavListTitleHTMLProps, keyof NavListTitleBaseProps>;
 export declare function NavListTitle({ className, children, ...props }: NavListTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/nav-list/nav-list-title.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export function NavListTitle({ className, children, ...props }) {
     return (_jsx("li", { ...props, className: classNames('dc-nav-list__title', className), children: children }));
 }
+//# sourceMappingURL=nav-list-title.js.map

package/dist/components/nav-list/nav-list-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-list-title.js","sourceRoot":"","sources":["../../../src/components/nav-list/nav-list-title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACU;IAClB,OAAO,CACL,gBAAQ,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,YAClE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}

package/dist/components/nav-list/nav-list.css

@@ -1,10 +1,10 @@
 .dc-nav-list {
-  --dc-nav-list-title-color: var(--dc-secondary-text-color);
-  --dc-nav-link-text-color: var(--dc-primary-text-color);
-  --dc-nav-link-bg: transparent;
-  --dc-nav-link-bg-hover: var(--dc-bg-transparent-2);
-  --dc-nav-link-bg-active: var(--dc-bg-transparent-2);
-  --dc-nav-link-focus-ring-color: var(--dc-focus-ring-color);
+  --list-title-color: var(--dc-text-color-secondary);
+  --link-color: var(--dc-text-color-primary);
+  --link-background: transparent;
+  --link-background-hover: var(--dc-background-color-2);
+  --link-background-active: var(--dc-background-color-2);
+  --link-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
 }
@@ -23,7 +23,7 @@
 
 .dc-nav-list__title {
   font: 500 var(--dc-text-xs);
-  color: var(--dc-nav-list-title-color);
+  color: var(--list-title-color);
 }
 
 * + .dc-nav-list__title {
@@ -39,20 +39,20 @@
   align-items: center;
   height: 36px;
   font: var(--dc-text-sm);
-  color: var(--dc-nav-link-text-color);
-  text-decoration: none;
+  color: var(--link-color);
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
   border-radius: 8px;
 }
 
 .dc-nav-link:hover {
-  background: var(--dc-nav-link-bg-hover);
+  background: var(--link-background-hover);
 }
 
 .dc-nav-link:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--dc-nav-link-focus-ring-color);
+  box-shadow: 0 0 0 2px var(--link-focus-ring-color);
 }
 
 .dc-nav-link:focus:not(:focus-visible) {
@@ -63,7 +63,7 @@
 .dc-nav-link[aria-current="page"],
 .dc-nav-link[aria-current="step"],
 .dc-nav-link[aria-current="true"] {
-  background: var(--dc-nav-link-bg-active);
+  background: var(--link-background-active);
 }
 
 .dc-nav-link__icon {

package/dist/components/nav-list/nav-list.d.ts

@@ -1,5 +1,11 @@
-import { ComponentPropsWithoutRef } from 'react';
-type NavListHTMLProps = ComponentPropsWithoutRef<'nav'>;
+import { type ComponentProps } from 'react';
+import { NavListItem } from './nav-list-item.js';
+import { NavListTitle } from './nav-list-title.js';
+type NavListHTMLProps = ComponentProps<'nav'>;
 export type NavListProps = NavListHTMLProps;
 export declare function NavList({ className, children, ...props }: NavListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavList {
+    var Title: typeof NavListTitle;
+    var Item: typeof NavListItem;
+}
 export {};

package/dist/components/nav-list/nav-list.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
+import {} from 'react';
+import { NavListItem } from './nav-list-item.js';
+import { NavListTitle } from './nav-list-title.js';
 export function NavList({ className, children, ...props }) {
     return (_jsx("nav", { ...props, className: classNames('dc-nav-list', className), children: _jsx("ul", { className: "dc-nav-list__items", children: children }) }));
 }
+NavList.Title = NavListTitle;
+NavList.Item = NavListItem;
+//# sourceMappingURL=nav-list.js.map

package/dist/components/nav-list/nav-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-list.js","sourceRoot":"","sources":["../../../src/components/nav-list/nav-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMnD,MAAM,UAAU,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACK;IACb,OAAO,CACL,iBAAS,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,YAC7D,aAAI,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAM,GAC9C,CACP,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;AAC7B,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC"}

package/dist/components/password-input/index.js

@@ -1 +1,2 @@
 export * from './password-input.js';
+//# sourceMappingURL=index.js.map

package/dist/components/password-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/password-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/password-input/password-input.css

@@ -1,45 +1,15 @@
 .dc-password-input {
-  --dc-password-input-toggle-color: var(--dc-control-secondary-text-color);
-  --dc-password-input-toggle-color-hover: var(--dc-control-primary-text-color);
-  --dc-password-input-toggle-bg: none;
-  --dc-password-input-toggle-bg-hover: var(--dc-bg-transparent-2);
-
   padding-right: 0;
   color-scheme: light;
 }
 
-.dc-password-input > input {
-  padding-right: calc(var(--dc-input-padding-x) / 2);
+.dc-password-input input {
+  padding-right: calc(var(--padding-x) / 2);
 }
 
 .dc-password-input__toggle-button {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: var(--dc-input-height);
+  width: var(--height);
   height: 100%;
-  padding: 0;
-  color: inherit;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: var(--dc-password-input-toggle-bg);
-  border: none;
-  border-radius: calc(var(--dc-input-border-radius) - 1px);
-}
-
-.dc-password-input__toggle-button:not(:disabled):focus,
-.dc-password-input__toggle-button:not(:disabled):hover {
-  color: var(--dc-password-input-toggle-color-hover);
-  background: var(--dc-password-input-toggle-bg-hover);
-  outline: none;
-}
-
-.dc-password-input__toggle-button:focus:not(:focus-visible, :hover) {
-  color: var(--dc-password-input-toggle-color);
-  background: var(--dc-password-input-toggle-bg);
 }
 
 .dark .dc-password-input,

package/dist/components/password-input/password-input.d.ts

@@ -1,11 +1,12 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import { TextInputProps } from '../text-input/index.js';
-export type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'slotRight'>;
-export type PasswordInputProps = {
+import { type MouseEventHandler, type ReactNode } from 'react';
+import { type TextInputProps } from '../text-input/index.js';
+type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'slotRight'>;
+export type PasswordInputProps = PasswordInputBaseProps & {
     loading?: boolean;
     defaultVisible?: boolean;
     getTooltipText?: (visible: boolean) => ReactNode;
     renderToggleButtonIcon?: (visible: boolean) => ReactNode;
     onClickToggleButton?: MouseEventHandler<HTMLButtonElement>;
-} & PasswordInputBaseProps;
-export declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+export declare function PasswordInput({ className, loading, defaultVisible, getTooltipText, renderToggleButtonIcon, onClickToggleButton, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export {};