@raystack/apsara 0.56.6 → 1.0.0-rc.0

package/dist/components/{dropdown-menu → menu}/cell.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from 'react';
 export type CellBaseProps = {
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 };
 export type CellProps = HTMLAttributes<HTMLDivElement> & CellBaseProps & {
-    type?: "select" | "item";
+    type?: 'select' | 'item';
 };
 export declare const Cell: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CellBaseProps & {
     type?: "select" | "item" | undefined;

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

@@ -0,0 +1 @@
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../components/menu/cell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GACpD,aAAa,GAAG;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEJ,eAAO,MAAM,IAAI;;kDAahB,CAAC"}

package/dist/components/menu/cell.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from 'class-variance-authority';
+import { forwardRef } from 'react';
+import styles from './cell.module.css.js';
+
+const Cell = forwardRef(({ className, children, leadingIcon, trailingIcon, type = 'item', ...props }, ref) => (jsxs("div", { ref: ref, ...props, className: cx(styles.cell, className), children: [leadingIcon && jsx("span", { className: styles.leadingIcon, children: leadingIcon }), children, trailingIcon && (jsx("span", { className: styles.trailingIcon, children: trailingIcon }))] })));
+Cell.displayName = 'Menu.Cell';
+
+export { Cell };
+//# sourceMappingURL=cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","sources":["../../../components/menu/cell.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\nimport styles from './cell.module.css';\n\nexport type CellBaseProps = {\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\nexport type CellProps = HTMLAttributes<HTMLDivElement> &\n  CellBaseProps & {\n    type?: 'select' | 'item';\n  };\n\nexport const Cell = forwardRef<HTMLDivElement, CellProps>(\n  (\n    { className, children, leadingIcon, trailingIcon, type = 'item', ...props },\n    ref\n  ) => (\n    <div ref={ref} {...props} className={cx(styles.cell, className)}>\n      {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}\n      {children}\n      {trailingIcon && (\n        <span className={styles.trailingIcon}>{trailingIcon}</span>\n      )}\n    </div>\n  )\n);\nCell.displayName = 'Menu.Cell';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAaa,MAAA,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG,MAEHA,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAM,GAAA,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAC5D,QAAA,EAAA,CAAA,WAAW,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,EAAA,CAAQ,EACxE,QAAQ,EACR,YAAY,KACXA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,YAAY,YAAG,YAAY,EAAA,CAAQ,CAC5D,CACG,EAAA,CAAA,CACP,EACD;AACF,IAAI,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/{dropdown-menu → menu}/cell.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"cell":"cell-module_cell__S6yRs","leadingIcon":"cell-module_leadingIcon__2uCcQ","trailingIcon":"cell-module_trailingIcon__NUfVO"};
+var styles = {"cell":"cell-module_cell__CFvDx","leadingIcon":"cell-module_leadingIcon__-xf2e","trailingIcon":"cell-module_trailingIcon__IJxNx"};
 
 exports.default = styles;
 //# sourceMappingURL=cell.module.css.cjs.map

package/dist/components/menu/cell.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"cell":"cell-module_cell__CFvDx","leadingIcon":"cell-module_leadingIcon__-xf2e","trailingIcon":"cell-module_trailingIcon__IJxNx"};
+
+export { styles as default };
+//# sourceMappingURL=cell.module.css.js.map

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

@@ -0,0 +1,2 @@
+export { Menu } from './menu';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/menu/menu-content.cjs

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var menu_module = require('./menu.module.css.cjs');
+var menuRoot = require('./menu-root.cjs');
+var utils = require('./utils.cjs');
+
+const MenuContent = React.forwardRef(({ className, children, searchPlaceholder = 'Search...', render, finalFocus, style, sideOffset = 4, align = 'start', onFocus, ...positionerProps }, ref) => {
+    const { autocomplete, inputValue, onInputValueChange, inputRef, isInitialRender, parent } = menuRoot.useMenuContext();
+    const focusInput = React.useCallback(() => {
+        if (document?.activeElement !== inputRef?.current)
+            inputRef?.current?.focus();
+    }, [inputRef]);
+    const highlightedItem = React.useRef([-1, 'none']);
+    const containerRef = React.useRef(null);
+    const highlightFirstItem = React.useCallback(() => {
+        if (!isInitialRender?.current)
+            return;
+        isInitialRender.current = false;
+        const item = containerRef.current?.querySelector('[role="option"]');
+        if (!item)
+            return;
+        item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+    }, [isInitialRender]);
+    const checkAndOpenSubMenu = React.useCallback(() => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item || !utils.isElementSubMenuTrigger(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ARROW_RIGHT);
+    }, []);
+    const checkAndCloseSubMenu = React.useCallback((e) => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item ||
+            !utils.isElementSubMenuTrigger(item) ||
+            !utils.isElementSubMenuOpen(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ESCAPE);
+        e.stopPropagation();
+    }, []);
+    const blurStaleMenuItem = React.useCallback((index) => {
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[index];
+        if (!item ||
+            !utils.isElementSubMenuTrigger(item) ||
+            !utils.isElementSubMenuOpen(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ESCAPE);
+        item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+    }, []);
+    return (jsxRuntime.jsx(react.Menu.Portal, { children: jsxRuntime.jsx(react.Menu.Positioner, { className: menu_module.default.positioner, sideOffset: sideOffset, align: align, ...positionerProps, children: jsxRuntime.jsx(react.Menu.Popup, { ref: ref, className: classVarianceAuthority.cx(menu_module.default.content, autocomplete && menu_module.default.comboboxContainer, className), style: style, render: render, finalFocus: finalFocus, role: autocomplete ? 'dialog' : 'menu', onFocus: autocomplete || parent?.autocomplete
+                    ? e => {
+                        focusInput();
+                        e.stopPropagation();
+                        highlightFirstItem();
+                        onFocus?.(e);
+                    }
+                    : undefined, children: autocomplete ? (jsxRuntime.jsxs(react.Autocomplete.Root, { inline: true, open: true, value: inputValue, onValueChange: (value) => onInputValueChange?.(value), autoHighlight: !!inputValue?.length, mode: 'none', loopFocus: false, onItemHighlighted: (value, eventDetails) => {
+                        if (highlightedItem.current[1] === 'pointer' &&
+                            eventDetails.reason === 'keyboard') {
+                            // focus moved using keyboard after using pointer
+                            blurStaleMenuItem(highlightedItem.current[0]);
+                        }
+                        highlightedItem.current = [
+                            eventDetails.index,
+                            eventDetails.reason
+                        ];
+                    }, children: [jsxRuntime.jsx(react.Autocomplete.Input, { placeholder: searchPlaceholder, className: menu_module.default.comboboxInput, ref: inputRef, onPointerEnter: e => {
+                                focusInput();
+                            }, onKeyDown: e => {
+                                if (e.key === 'ArrowLeft')
+                                    return;
+                                if (e.key === 'Escape')
+                                    return checkAndCloseSubMenu(e);
+                                if (e.key === 'ArrowRight' || e.key === 'Enter')
+                                    checkAndOpenSubMenu();
+                                e.stopPropagation();
+                            }, tabIndex: -1 }), jsxRuntime.jsx(react.Autocomplete.List, { className: menu_module.default.comboboxContent, ref: containerRef, children: children })] })) : (children) }) }) }));
+});
+MenuContent.displayName = 'Menu.Content';
+const MenuSubContent = React.forwardRef(({ ...props }, ref) => jsxRuntime.jsx(MenuContent, { ref: ref, sideOffset: 2, ...props }));
+MenuSubContent.displayName = 'Menu.SubContent';
+
+exports.MenuContent = MenuContent;
+exports.MenuSubContent = MenuSubContent;
+//# sourceMappingURL=menu-content.cjs.map

package/dist/components/menu/menu-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-content.cjs","sources":["../../../components/menu/menu-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  Menu as MenuPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, KeyboardEvent, useCallback, useRef } from 'react';\nimport styles from './menu.module.css';\nimport { useMenuContext } from './menu-root';\nimport {\n  dispatchKeyboardEvent,\n  isElementSubMenuOpen,\n  isElementSubMenuTrigger,\n  KEYCODES\n} from './utils';\n\nexport interface MenuContentProps\n  extends Omit<\n      MenuPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    MenuPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(\n  (\n    {\n      className,\n      children,\n      searchPlaceholder = 'Search...',\n      render,\n      finalFocus,\n      style,\n      sideOffset = 4,\n      align = 'start',\n      onFocus,\n      ...positionerProps\n    },\n    ref\n  ) => {\n    const {\n      autocomplete,\n      inputValue,\n      onInputValueChange,\n      inputRef,\n      isInitialRender,\n      parent\n    } = useMenuContext();\n\n    const focusInput = useCallback(() => {\n      if (document?.activeElement !== inputRef?.current)\n        inputRef?.current?.focus();\n    }, [inputRef]);\n    const highlightedItem = useRef<\n      [index: number, reason: 'keyboard' | 'pointer' | 'none']\n    >([-1, 'none']);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const highlightFirstItem = useCallback(() => {\n      if (!isInitialRender?.current) return;\n      isInitialRender.current = false;\n      const item = containerRef.current?.querySelector('[role=\"option\"]');\n      if (!item) return;\n      item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));\n    }, [isInitialRender]);\n\n    const checkAndOpenSubMenu = useCallback(() => {\n      if (highlightedItem.current[0] === -1) return;\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[highlightedItem.current[0]];\n      if (!item || !isElementSubMenuTrigger(item)) return;\n      dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);\n    }, []);\n\n    const checkAndCloseSubMenu = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (highlightedItem.current[0] === -1) return;\n        const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n        const item = items?.[highlightedItem.current[0]];\n        if (\n          !item ||\n          !isElementSubMenuTrigger(item) ||\n          !isElementSubMenuOpen(item)\n        )\n          return;\n        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n        e.stopPropagation();\n      },\n      []\n    );\n\n    const blurStaleMenuItem = useCallback((index: number) => {\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[index];\n      if (\n        !item ||\n        !isElementSubMenuTrigger(item) ||\n        !isElementSubMenuOpen(item)\n      )\n        return;\n      dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n      item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));\n    }, []);\n\n    return (\n      <MenuPrimitive.Portal>\n        <MenuPrimitive.Positioner\n          className={styles.positioner}\n          sideOffset={sideOffset}\n          align={align}\n          {...positionerProps}\n        >\n          <MenuPrimitive.Popup\n            ref={ref}\n            className={cx(\n              styles.content,\n              autocomplete && styles.comboboxContainer,\n              className\n            )}\n            style={style}\n            render={render}\n            finalFocus={finalFocus}\n            role={autocomplete ? 'dialog' : 'menu'}\n            onFocus={\n              autocomplete || parent?.autocomplete\n                ? e => {\n                    focusInput();\n                    e.stopPropagation();\n                    highlightFirstItem();\n                    onFocus?.(e);\n                  }\n                : undefined\n            }\n          >\n            {autocomplete ? (\n              <AutocompletePrimitive.Root\n                inline\n                open\n                value={inputValue}\n                onValueChange={(value: string) => onInputValueChange?.(value)}\n                autoHighlight={!!inputValue?.length}\n                mode='none'\n                loopFocus={false}\n                onItemHighlighted={(value, eventDetails) => {\n                  if (\n                    highlightedItem.current[1] === 'pointer' &&\n                    eventDetails.reason === 'keyboard'\n                  ) {\n                    // focus moved using keyboard after using pointer\n                    blurStaleMenuItem(highlightedItem.current[0]);\n                  }\n                  highlightedItem.current = [\n                    eventDetails.index,\n                    eventDetails.reason\n                  ];\n                }}\n              >\n                <AutocompletePrimitive.Input\n                  placeholder={searchPlaceholder}\n                  className={styles.comboboxInput}\n                  ref={inputRef}\n                  onPointerEnter={e => {\n                    focusInput();\n                  }}\n                  onKeyDown={e => {\n                    if (e.key === 'ArrowLeft') return;\n                    if (e.key === 'Escape') return checkAndCloseSubMenu(e);\n                    if (e.key === 'ArrowRight' || e.key === 'Enter')\n                      checkAndOpenSubMenu();\n                    e.stopPropagation();\n                  }}\n                  tabIndex={-1}\n                />\n                <AutocompletePrimitive.List\n                  className={styles.comboboxContent}\n                  ref={containerRef}\n                >\n                  {children}\n                </AutocompletePrimitive.List>\n              </AutocompletePrimitive.Root>\n            ) : (\n              children\n            )}\n          </MenuPrimitive.Popup>\n        </MenuPrimitive.Positioner>\n      </MenuPrimitive.Portal>\n    );\n  }\n);\nMenuContent.displayName = 'Menu.Content';\n\nexport const MenuSubContent = forwardRef<HTMLDivElement, MenuContentProps>(\n  ({ ...props }, ref) => <MenuContent ref={ref} sideOffset={2} {...props} />\n);\nMenuSubContent.displayName = 'Menu.SubContent';\n"],"names":[],"mappings":";;;;;;;;;;;AA0Ba;AAgBT;AASA;AACE;AACE;AACJ;;AAIA;AAEA;;;AAEE;;AAEA;;AACA;AACF;AAEA;;;;AAGE;AACA;;AACA;;AAGF;;;;AAII;AACA;;;;AAMA;;;AAMJ;;AAEE;AACA;;;;AAMA;AACA;;AAGF;;AAsBgB;;AAEA;AACA;;;AAeF;AAEE;;;;;AAMA;AACA;;;AASA;AACF;AAEE;;AACA;AAAwB;;AAEtB;;AAEJ;AAiBhB;AAEF;AAEO;AAGP;;;"}

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

@@ -0,0 +1,7 @@
+import { Menu as MenuPrimitive } from '@base-ui/react';
+export interface MenuContentProps extends Omit<MenuPrimitive.Positioner.Props, 'render' | 'className' | 'style'>, MenuPrimitive.Popup.Props {
+    searchPlaceholder?: string;
+}
+export declare const MenuContent: import("react").ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuSubContent: import("react").ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=menu-content.d.ts.map

package/dist/components/menu/menu-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-content.d.ts","sourceRoot":"","sources":["../../../components/menu/menu-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,IAAI,IAAI,aAAa,EACtB,MAAM,gBAAgB,CAAC;AAYxB,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,CAAC,UAAU,CAAC,KAAK,EAC9B,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC,EACD,aAAa,CAAC,KAAK,CAAC,KAAK;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,0HAoKvB,CAAC;AAGF,eAAO,MAAM,cAAc,0HAE1B,CAAC"}

package/dist/components/menu/menu-content.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Menu, Autocomplete } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { forwardRef, useCallback, useRef } from 'react';
+import styles from './menu.module.css.js';
+import { useMenuContext } from './menu-root.js';
+import { isElementSubMenuTrigger, dispatchKeyboardEvent, isElementSubMenuOpen, KEYCODES } from './utils.js';
+
+const MenuContent = forwardRef(({ className, children, searchPlaceholder = 'Search...', render, finalFocus, style, sideOffset = 4, align = 'start', onFocus, ...positionerProps }, ref) => {
+    const { autocomplete, inputValue, onInputValueChange, inputRef, isInitialRender, parent } = useMenuContext();
+    const focusInput = useCallback(() => {
+        if (document?.activeElement !== inputRef?.current)
+            inputRef?.current?.focus();
+    }, [inputRef]);
+    const highlightedItem = useRef([-1, 'none']);
+    const containerRef = useRef(null);
+    const highlightFirstItem = useCallback(() => {
+        if (!isInitialRender?.current)
+            return;
+        isInitialRender.current = false;
+        const item = containerRef.current?.querySelector('[role="option"]');
+        if (!item)
+            return;
+        item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+    }, [isInitialRender]);
+    const checkAndOpenSubMenu = useCallback(() => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item || !isElementSubMenuTrigger(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+    }, []);
+    const checkAndCloseSubMenu = useCallback((e) => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item ||
+            !isElementSubMenuTrigger(item) ||
+            !isElementSubMenuOpen(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+        e.stopPropagation();
+    }, []);
+    const blurStaleMenuItem = useCallback((index) => {
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[index];
+        if (!item ||
+            !isElementSubMenuTrigger(item) ||
+            !isElementSubMenuOpen(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+        item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+    }, []);
+    return (jsx(Menu.Portal, { children: jsx(Menu.Positioner, { className: styles.positioner, sideOffset: sideOffset, align: align, ...positionerProps, children: jsx(Menu.Popup, { ref: ref, className: cx(styles.content, autocomplete && styles.comboboxContainer, className), style: style, render: render, finalFocus: finalFocus, role: autocomplete ? 'dialog' : 'menu', onFocus: autocomplete || parent?.autocomplete
+                    ? e => {
+                        focusInput();
+                        e.stopPropagation();
+                        highlightFirstItem();
+                        onFocus?.(e);
+                    }
+                    : undefined, children: autocomplete ? (jsxs(Autocomplete.Root, { inline: true, open: true, value: inputValue, onValueChange: (value) => onInputValueChange?.(value), autoHighlight: !!inputValue?.length, mode: 'none', loopFocus: false, onItemHighlighted: (value, eventDetails) => {
+                        if (highlightedItem.current[1] === 'pointer' &&
+                            eventDetails.reason === 'keyboard') {
+                            // focus moved using keyboard after using pointer
+                            blurStaleMenuItem(highlightedItem.current[0]);
+                        }
+                        highlightedItem.current = [
+                            eventDetails.index,
+                            eventDetails.reason
+                        ];
+                    }, children: [jsx(Autocomplete.Input, { placeholder: searchPlaceholder, className: styles.comboboxInput, ref: inputRef, onPointerEnter: e => {
+                                focusInput();
+                            }, onKeyDown: e => {
+                                if (e.key === 'ArrowLeft')
+                                    return;
+                                if (e.key === 'Escape')
+                                    return checkAndCloseSubMenu(e);
+                                if (e.key === 'ArrowRight' || e.key === 'Enter')
+                                    checkAndOpenSubMenu();
+                                e.stopPropagation();
+                            }, tabIndex: -1 }), jsx(Autocomplete.List, { className: styles.comboboxContent, ref: containerRef, children: children })] })) : (children) }) }) }));
+});
+MenuContent.displayName = 'Menu.Content';
+const MenuSubContent = forwardRef(({ ...props }, ref) => jsx(MenuContent, { ref: ref, sideOffset: 2, ...props }));
+MenuSubContent.displayName = 'Menu.SubContent';
+
+export { MenuContent, MenuSubContent };
+//# sourceMappingURL=menu-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-content.js","sources":["../../../components/menu/menu-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  Menu as MenuPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, KeyboardEvent, useCallback, useRef } from 'react';\nimport styles from './menu.module.css';\nimport { useMenuContext } from './menu-root';\nimport {\n  dispatchKeyboardEvent,\n  isElementSubMenuOpen,\n  isElementSubMenuTrigger,\n  KEYCODES\n} from './utils';\n\nexport interface MenuContentProps\n  extends Omit<\n      MenuPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    MenuPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(\n  (\n    {\n      className,\n      children,\n      searchPlaceholder = 'Search...',\n      render,\n      finalFocus,\n      style,\n      sideOffset = 4,\n      align = 'start',\n      onFocus,\n      ...positionerProps\n    },\n    ref\n  ) => {\n    const {\n      autocomplete,\n      inputValue,\n      onInputValueChange,\n      inputRef,\n      isInitialRender,\n      parent\n    } = useMenuContext();\n\n    const focusInput = useCallback(() => {\n      if (document?.activeElement !== inputRef?.current)\n        inputRef?.current?.focus();\n    }, [inputRef]);\n    const highlightedItem = useRef<\n      [index: number, reason: 'keyboard' | 'pointer' | 'none']\n    >([-1, 'none']);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const highlightFirstItem = useCallback(() => {\n      if (!isInitialRender?.current) return;\n      isInitialRender.current = false;\n      const item = containerRef.current?.querySelector('[role=\"option\"]');\n      if (!item) return;\n      item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));\n    }, [isInitialRender]);\n\n    const checkAndOpenSubMenu = useCallback(() => {\n      if (highlightedItem.current[0] === -1) return;\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[highlightedItem.current[0]];\n      if (!item || !isElementSubMenuTrigger(item)) return;\n      dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);\n    }, []);\n\n    const checkAndCloseSubMenu = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (highlightedItem.current[0] === -1) return;\n        const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n        const item = items?.[highlightedItem.current[0]];\n        if (\n          !item ||\n          !isElementSubMenuTrigger(item) ||\n          !isElementSubMenuOpen(item)\n        )\n          return;\n        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n        e.stopPropagation();\n      },\n      []\n    );\n\n    const blurStaleMenuItem = useCallback((index: number) => {\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[index];\n      if (\n        !item ||\n        !isElementSubMenuTrigger(item) ||\n        !isElementSubMenuOpen(item)\n      )\n        return;\n      dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n      item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));\n    }, []);\n\n    return (\n      <MenuPrimitive.Portal>\n        <MenuPrimitive.Positioner\n          className={styles.positioner}\n          sideOffset={sideOffset}\n          align={align}\n          {...positionerProps}\n        >\n          <MenuPrimitive.Popup\n            ref={ref}\n            className={cx(\n              styles.content,\n              autocomplete && styles.comboboxContainer,\n              className\n            )}\n            style={style}\n            render={render}\n            finalFocus={finalFocus}\n            role={autocomplete ? 'dialog' : 'menu'}\n            onFocus={\n              autocomplete || parent?.autocomplete\n                ? e => {\n                    focusInput();\n                    e.stopPropagation();\n                    highlightFirstItem();\n                    onFocus?.(e);\n                  }\n                : undefined\n            }\n          >\n            {autocomplete ? (\n              <AutocompletePrimitive.Root\n                inline\n                open\n                value={inputValue}\n                onValueChange={(value: string) => onInputValueChange?.(value)}\n                autoHighlight={!!inputValue?.length}\n                mode='none'\n                loopFocus={false}\n                onItemHighlighted={(value, eventDetails) => {\n                  if (\n                    highlightedItem.current[1] === 'pointer' &&\n                    eventDetails.reason === 'keyboard'\n                  ) {\n                    // focus moved using keyboard after using pointer\n                    blurStaleMenuItem(highlightedItem.current[0]);\n                  }\n                  highlightedItem.current = [\n                    eventDetails.index,\n                    eventDetails.reason\n                  ];\n                }}\n              >\n                <AutocompletePrimitive.Input\n                  placeholder={searchPlaceholder}\n                  className={styles.comboboxInput}\n                  ref={inputRef}\n                  onPointerEnter={e => {\n                    focusInput();\n                  }}\n                  onKeyDown={e => {\n                    if (e.key === 'ArrowLeft') return;\n                    if (e.key === 'Escape') return checkAndCloseSubMenu(e);\n                    if (e.key === 'ArrowRight' || e.key === 'Enter')\n                      checkAndOpenSubMenu();\n                    e.stopPropagation();\n                  }}\n                  tabIndex={-1}\n                />\n                <AutocompletePrimitive.List\n                  className={styles.comboboxContent}\n                  ref={containerRef}\n                >\n                  {children}\n                </AutocompletePrimitive.List>\n              </AutocompletePrimitive.Root>\n            ) : (\n              children\n            )}\n          </MenuPrimitive.Popup>\n        </MenuPrimitive.Positioner>\n      </MenuPrimitive.Portal>\n    );\n  }\n);\nMenuContent.displayName = 'Menu.Content';\n\nexport const MenuSubContent = forwardRef<HTMLDivElement, MenuContentProps>(\n  ({ ...props }, ref) => <MenuContent ref={ref} sideOffset={2} {...props} />\n);\nMenuSubContent.displayName = 'Menu.SubContent';\n"],"names":[],"mappings":";;;;;;;;;AA0Ba;AAgBT;AASA;AACE;AACE;AACJ;;AAIA;AAEA;;;AAEE;;AAEA;;AACA;AACF;AAEA;;;;AAGE;AACA;;AACA;;AAGF;;;;AAII;AACA;;;;AAMA;;;AAMJ;;AAEE;AACA;;;;AAMA;AACA;;AAGF;;AAsBgB;;AAEA;AACA;;;AAeF;AAEE;;;;;AAMA;AACA;;;AASA;AACF;AAEE;;AACA;AAAwB;;AAEtB;;AAEJ;AAiBhB;AAEF;AAEO;AAGP;;"}

package/dist/components/menu/menu-item.cjs

@@ -0,0 +1,30 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var React = require('react');
+var cell = require('./cell.cjs');
+var menuRoot = require('./menu-root.cjs');
+var utils = require('./utils.cjs');
+
+const MenuItem = React.forwardRef(({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {
+    const { autocomplete, inputValue, shouldFilter } = menuRoot.useMenuContext();
+    const cell$1 = render ?? (jsxRuntime.jsx(cell.Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon }));
+    // In auto mode, hide items that don't match the search value
+    if (shouldFilter && !utils.getMatch(value, children, inputValue)) {
+        return null;
+    }
+    if (autocomplete) {
+        return (jsxRuntime.jsx(react.Autocomplete.Item, { ref: ref, value: value, render: jsxRuntime.jsx(react.Menu.Item, { render: cell$1 }), ...props, children: children }));
+    }
+    return (jsxRuntime.jsx(react.Menu.Item, { ref: ref, render: cell$1, ...props, onFocus: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            e.preventBaseUIHandler();
+        }, children: children }));
+});
+MenuItem.displayName = 'Menu.Item';
+
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=menu-item.cjs.map

package/dist/components/menu/menu-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.cjs","sources":["../../../components/menu/menu-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  Menu as MenuPrimitive\n} from '@base-ui/react';\nimport { forwardRef } from 'react';\nimport { Cell, CellBaseProps } from './cell';\nimport { useMenuContext } from './menu-root';\nimport { getMatch } from './utils';\n\nexport interface MenuItemProps extends MenuPrimitive.Item.Props, CellBaseProps {\n  value?: string;\n}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  ({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {\n    const { autocomplete, inputValue, shouldFilter } = useMenuContext();\n\n    const cell = render ?? (\n      <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />\n    );\n\n    // In auto mode, hide items that don't match the search value\n    if (shouldFilter && !getMatch(value, children, inputValue)) {\n      return null;\n    }\n\n    if (autocomplete) {\n      return (\n        <AutocompletePrimitive.Item\n          ref={ref}\n          value={value}\n          render={<MenuPrimitive.Item render={cell} />}\n          {...props}\n        >\n          {children}\n        </AutocompletePrimitive.Item>\n      );\n    }\n\n    return (\n      <MenuPrimitive.Item\n        ref={ref}\n        render={cell}\n        {...props}\n        onFocus={e => {\n          e.stopPropagation();\n          e.preventDefault();\n          e.preventBaseUIHandler();\n        }}\n      >\n        {children}\n      </MenuPrimitive.Item>\n    );\n  }\n);\nMenuItem.displayName = 'Menu.Item';\n"],"names":[],"mappings":";;;;;;;;;;AAea;;AAIT;;AAKA;AACE;;;AAIA;;;;;;AAqBE;AAKN;AAEF;;"}

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

@@ -0,0 +1,7 @@
+import { Menu as MenuPrimitive } from '@base-ui/react';
+import { CellBaseProps } from './cell';
+export interface MenuItemProps extends MenuPrimitive.Item.Props, CellBaseProps {
+    value?: string;
+}
+export declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=menu-item.d.ts.map

package/dist/components/menu/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../components/menu/menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,IAAI,IAAI,aAAa,EACtB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAQ,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI7C,MAAM,WAAW,aAAc,SAAQ,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,uHAyCpB,CAAC"}

package/dist/components/menu/menu-item.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Autocomplete, Menu } from '@base-ui/react';
+import { forwardRef } from 'react';
+import { Cell } from './cell.js';
+import { useMenuContext } from './menu-root.js';
+import { getMatch } from './utils.js';
+
+const MenuItem = forwardRef(({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {
+    const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+    const cell = render ?? (jsx(Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon }));
+    // In auto mode, hide items that don't match the search value
+    if (shouldFilter && !getMatch(value, children, inputValue)) {
+        return null;
+    }
+    if (autocomplete) {
+        return (jsx(Autocomplete.Item, { ref: ref, value: value, render: jsx(Menu.Item, { render: cell }), ...props, children: children }));
+    }
+    return (jsx(Menu.Item, { ref: ref, render: cell, ...props, onFocus: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            e.preventBaseUIHandler();
+        }, children: children }));
+});
+MenuItem.displayName = 'Menu.Item';
+
+export { MenuItem };
+//# sourceMappingURL=menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","sources":["../../../components/menu/menu-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  Menu as MenuPrimitive\n} from '@base-ui/react';\nimport { forwardRef } from 'react';\nimport { Cell, CellBaseProps } from './cell';\nimport { useMenuContext } from './menu-root';\nimport { getMatch } from './utils';\n\nexport interface MenuItemProps extends MenuPrimitive.Item.Props, CellBaseProps {\n  value?: string;\n}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  ({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {\n    const { autocomplete, inputValue, shouldFilter } = useMenuContext();\n\n    const cell = render ?? (\n      <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />\n    );\n\n    // In auto mode, hide items that don't match the search value\n    if (shouldFilter && !getMatch(value, children, inputValue)) {\n      return null;\n    }\n\n    if (autocomplete) {\n      return (\n        <AutocompletePrimitive.Item\n          ref={ref}\n          value={value}\n          render={<MenuPrimitive.Item render={cell} />}\n          {...props}\n        >\n          {children}\n        </AutocompletePrimitive.Item>\n      );\n    }\n\n    return (\n      <MenuPrimitive.Item\n        ref={ref}\n        render={cell}\n        {...props}\n        onFocus={e => {\n          e.stopPropagation();\n          e.preventDefault();\n          e.preventBaseUIHandler();\n        }}\n      >\n        {children}\n      </MenuPrimitive.Item>\n    );\n  }\n);\nMenuItem.displayName = 'Menu.Item';\n"],"names":[],"mappings":";;;;;;;;AAea;;AAIT;;AAKA;AACE;;;AAIA;;;;;;AAqBE;AAKN;AAEF;;"}

package/dist/components/menu/menu-misc.cjs

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var menu = require('@base-ui/react/menu');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var menu_module = require('./menu.module.css.cjs');
+var menuRoot = require('./menu-root.cjs');
+
+const MenuGroup = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return jsxRuntime.jsx(React.Fragment, { children: children });
+    }
+    return (jsxRuntime.jsx(menu.Menu.Group, { ref: ref, className: classVarianceAuthority.cx(className), ...props, children: children }));
+});
+MenuGroup.displayName = 'Menu.Group';
+const MenuLabel = React.forwardRef(({ className, ...props }, ref) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsxRuntime.jsx(menu.Menu.GroupLabel, { ref: ref, className: classVarianceAuthority.cx(menu_module.default.label, className), ...props }));
+});
+MenuLabel.displayName = 'Menu.Label';
+const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { ref: ref, role: 'separator', className: classVarianceAuthority.cx(menu_module.default.separator, className), ...props }));
+});
+MenuSeparator.displayName = 'Menu.Separator';
+const MenuEmptyState = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(menu_module.default.empty, className), ...props, children: children })));
+MenuEmptyState.displayName = 'Menu.EmptyState';
+
+exports.MenuEmptyState = MenuEmptyState;
+exports.MenuGroup = MenuGroup;
+exports.MenuLabel = MenuLabel;
+exports.MenuSeparator = MenuSeparator;
+//# sourceMappingURL=menu-misc.cjs.map

package/dist/components/menu/menu-misc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-misc.cjs","sources":["../../../components/menu/menu-misc.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cx } from 'class-variance-authority';\nimport { Fragment, forwardRef, HTMLAttributes, ReactNode } from 'react';\nimport styles from './menu.module.css';\nimport { useMenuContext } from './menu-root';\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuPrimitive.Group.Props>(\n  ({ className, children, ...props }, ref) => {\n    const { shouldFilter } = useMenuContext();\n\n    if (shouldFilter) {\n      return <Fragment>{children}</Fragment>;\n    }\n\n    return (\n      <MenuPrimitive.Group ref={ref} className={cx(className)} {...props}>\n        {children}\n      </MenuPrimitive.Group>\n    );\n  }\n);\nMenuGroup.displayName = 'Menu.Group';\n\nexport const MenuLabel = forwardRef<\n  HTMLDivElement,\n  MenuPrimitive.GroupLabel.Props\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <MenuPrimitive.GroupLabel\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nMenuLabel.displayName = 'Menu.Label';\n\nexport const MenuSeparator = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      role='separator'\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nMenuSeparator.displayName = 'Menu.Separator';\n\nexport const MenuEmptyState = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    children: ReactNode;\n  }\n>(({ className, children, ...props }, ref) => (\n  <div ref={ref} className={cx(styles.empty, className)} {...props}>\n    {children}\n  </div>\n));\nMenuEmptyState.displayName = 'Menu.EmptyState';\n"],"names":[],"mappings":";;;;;;;;;;AAQa;AAET;;AAGE;;;AAQJ;AAEF;AAEa;AAIX;;AAGE;;;AAUJ;AACA;AAEa;AAIX;;AAGE;;;AAWJ;AACA;AAEa;AAUb;;;;;"}

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const MenuGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuEmptyState: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=menu-misc.d.ts.map

package/dist/components/menu/menu-misc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-misc.d.ts","sourceRoot":"","sources":["../../../components/menu/menu-misc.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,eAAO,MAAM,SAAS,sJAcrB,CAAC;AAGF,eAAO,MAAM,SAAS,2JAiBpB,CAAC;AAGH,eAAO,MAAM,aAAa,2HAkBxB,CAAC;AAGH,eAAO,MAAM,cAAc;cAGb,SAAS;kDAMrB,CAAC"}

package/dist/components/menu/menu-misc.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Menu } from '@base-ui/react/menu';
+import { cx } from 'class-variance-authority';
+import { forwardRef, Fragment } from 'react';
+import styles from './menu.module.css.js';
+import { useMenuContext } from './menu-root.js';
+
+const MenuGroup = forwardRef(({ className, children, ...props }, ref) => {
+    const { shouldFilter } = useMenuContext();
+    if (shouldFilter) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx(Menu.Group, { ref: ref, className: cx(className), ...props, children: children }));
+});
+MenuGroup.displayName = 'Menu.Group';
+const MenuLabel = forwardRef(({ className, ...props }, ref) => {
+    const { shouldFilter } = useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsx(Menu.GroupLabel, { ref: ref, className: cx(styles.label, className), ...props }));
+});
+MenuLabel.displayName = 'Menu.Label';
+const MenuSeparator = forwardRef(({ className, ...props }, ref) => {
+    const { shouldFilter } = useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsx("div", { ref: ref, role: 'separator', className: cx(styles.separator, className), ...props }));
+});
+MenuSeparator.displayName = 'Menu.Separator';
+const MenuEmptyState = forwardRef(({ className, children, ...props }, ref) => (jsx("div", { ref: ref, className: cx(styles.empty, className), ...props, children: children })));
+MenuEmptyState.displayName = 'Menu.EmptyState';
+
+export { MenuEmptyState, MenuGroup, MenuLabel, MenuSeparator };
+//# sourceMappingURL=menu-misc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-misc.js","sources":["../../../components/menu/menu-misc.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cx } from 'class-variance-authority';\nimport { Fragment, forwardRef, HTMLAttributes, ReactNode } from 'react';\nimport styles from './menu.module.css';\nimport { useMenuContext } from './menu-root';\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuPrimitive.Group.Props>(\n  ({ className, children, ...props }, ref) => {\n    const { shouldFilter } = useMenuContext();\n\n    if (shouldFilter) {\n      return <Fragment>{children}</Fragment>;\n    }\n\n    return (\n      <MenuPrimitive.Group ref={ref} className={cx(className)} {...props}>\n        {children}\n      </MenuPrimitive.Group>\n    );\n  }\n);\nMenuGroup.displayName = 'Menu.Group';\n\nexport const MenuLabel = forwardRef<\n  HTMLDivElement,\n  MenuPrimitive.GroupLabel.Props\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <MenuPrimitive.GroupLabel\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nMenuLabel.displayName = 'Menu.Label';\n\nexport const MenuSeparator = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      role='separator'\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nMenuSeparator.displayName = 'Menu.Separator';\n\nexport const MenuEmptyState = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    children: ReactNode;\n  }\n>(({ className, children, ...props }, ref) => (\n  <div ref={ref} className={cx(styles.empty, className)} {...props}>\n    {children}\n  </div>\n));\nMenuEmptyState.displayName = 'Menu.EmptyState';\n"],"names":[],"mappings":";;;;;;;;AAQa;AAET;;AAGE;;;AAQJ;AAEF;AAEa;AAIX;;AAGE;;;AAUJ;AACA;AAEa;AAIX;;AAGE;;;AAWJ;AACA;AAEa;AAUb;;"}

package/dist/components/menu/menu-root.cjs

@@ -0,0 +1,103 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var React = require('react');
+
+/**
+ Root context to manage the Menu control
+ @remarks Only for internal usage.
+ */
+const MenuContext = React.createContext(undefined);
+const useMenuContext = () => {
+    const context = React.useContext(MenuContext);
+    if (!context)
+        return {};
+    const shouldFilter = !!(context?.autocomplete &&
+        context?.autocompleteMode === 'auto' &&
+        context?.inputValue?.length);
+    const shouldFilterParent = !!(context?.parent?.autocomplete &&
+        context?.parent?.autocompleteMode === 'auto' &&
+        context?.parent?.inputValue?.length);
+    return {
+        ...context,
+        shouldFilter,
+        parent: context?.parent && {
+            ...context.parent,
+            shouldFilter: shouldFilterParent
+        }
+    };
+};
+const MenuRoot = ({ autocomplete, autocompleteMode = 'auto', inputValue: providedInputValue, onInputValueChange, defaultInputValue = '', open: providedOpen, onOpenChange, defaultOpen = false, ...props }) => {
+    const [internalInputValue, setInternalInputValue] = React.useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const inputRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const isInitialRender = React.useRef(true);
+    const inputValue = providedInputValue ?? internalInputValue;
+    const setValue = React.useCallback((value) => {
+        setInternalInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleOpenChange = React.useCallback((value, eventDetails) => {
+        if (!value && autocomplete) {
+            setValue('');
+            isInitialRender.current = true;
+        }
+        setInternalOpen(value);
+        onOpenChange?.(value, eventDetails);
+    }, [onOpenChange, setValue, autocomplete]);
+    return (jsxRuntime.jsx(MenuContext.Provider, { value: {
+            autocomplete,
+            inputRef,
+            autocompleteMode,
+            inputValue,
+            onInputValueChange: setValue,
+            open: open,
+            isInitialRender,
+            contentRef
+        }, children: jsxRuntime.jsx(react.Menu.Root, { open: open, onOpenChange: handleOpenChange, loopFocus: false, modal: true, ...props }) }));
+};
+MenuRoot.displayName = 'Menu';
+const MenuSubMenu = ({ autocomplete, autocompleteMode = 'auto', inputValue: providedInputValue, onInputValueChange, defaultInputValue = '', open: providedOpen, onOpenChange, defaultOpen = false, ...props }) => {
+    const [internalInputValue, setInternalInputValue] = React.useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const parentContext = useMenuContext();
+    const inputRef = React.useRef(null);
+    const isInitialRender = React.useRef(true);
+    const contentRef = React.useRef(null);
+    const inputValue = providedInputValue ?? internalInputValue;
+    const setValue = React.useCallback((value) => {
+        setInternalInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleOpenChange = React.useCallback((value, eventDetails) => {
+        if (!value && autocomplete) {
+            setValue('');
+            isInitialRender.current = true;
+        }
+        setInternalOpen(value);
+        onOpenChange?.(value, eventDetails);
+    }, [onOpenChange, setValue, autocomplete]);
+    return (jsxRuntime.jsx(MenuContext.Provider, { value: {
+            autocomplete,
+            inputRef,
+            parent: parentContext,
+            autocompleteMode,
+            inputValue,
+            onInputValueChange: setValue,
+            open: open,
+            isInitialRender,
+            contentRef
+        }, children: jsxRuntime.jsx(react.Menu.SubmenuRoot, { loopFocus: false, open: open, onOpenChange: handleOpenChange, ...props }) }));
+};
+MenuSubMenu.displayName = 'Menu.SubMenu';
+
+exports.MenuContext = MenuContext;
+exports.MenuRoot = MenuRoot;
+exports.MenuSubMenu = MenuSubMenu;
+exports.useMenuContext = useMenuContext;
+//# sourceMappingURL=menu-root.cjs.map

package/dist/components/menu/menu-root.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-root.cjs","sources":["../../../components/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useRef,\n  useState\n} from 'react';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  inputValue?: string;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  contentRef?: React.RefObject<HTMLDivElement | null>;\n  isInitialRender?: React.RefObject<boolean>;\n  open?: boolean;\n}\n\ninterface MenuContextValue extends CommonProps {\n  parent?: CommonProps;\n  onInputValueChange?: (value: string) => void;\n}\n\ninterface UseMenuContextReturn extends MenuContextValue {\n  shouldFilter?: boolean;\n  parent?: CommonProps & {\n    shouldFilter?: boolean;\n  };\n}\n\n/**\n Root context to manage the Menu control\n @remarks Only for internal usage.\n */\nexport const MenuContext = createContext<MenuContextValue | undefined>(\n  undefined\n);\n\nexport const useMenuContext = (): UseMenuContextReturn => {\n  const context = useContext(MenuContext);\n  if (!context) return {};\n\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.inputValue?.length\n  );\n\n  const shouldFilterParent = !!(\n    context?.parent?.autocomplete &&\n    context?.parent?.autocompleteMode === 'auto' &&\n    context?.parent?.inputValue?.length\n  );\n\n  return {\n    ...context,\n    shouldFilter,\n    parent: context?.parent && {\n      ...context.parent,\n      shouldFilter: shouldFilterParent\n    }\n  };\n};\n\nexport interface MenuRootBaseProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: MenuPrimitive.Root.Props['onOpenChange'];\n  modal?: boolean;\n  loopFocus?: boolean;\n}\n\nexport interface NormalMenuRootProps extends MenuPrimitive.Root.Props {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  inputValue?: never;\n  onInputValueChange?: never;\n  defaultInputValue?: never;\n}\n\nexport interface AutocompleteMenuRootProps\n  extends MenuPrimitive.Root.Props,\n    CommonProps {\n  autocomplete: true;\n  onInputValueChange?: (value: string) => void;\n  defaultInputValue?: string;\n}\n\nexport type MenuRootProps = NormalMenuRootProps | AutocompleteMenuRootProps;\n\nexport const MenuRoot = ({\n  autocomplete,\n  autocompleteMode = 'auto',\n  inputValue: providedInputValue,\n  onInputValueChange,\n  defaultInputValue = '',\n  open: providedOpen,\n  onOpenChange,\n  defaultOpen = false,\n  ...props\n}: MenuRootProps) => {\n  const [internalInputValue, setInternalInputValue] =\n    useState(defaultInputValue);\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = providedOpen ?? internalOpen;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const isInitialRender = useRef(true);\n\n  const inputValue = providedInputValue ?? internalInputValue;\n\n  const setValue = useCallback(\n    (value: string) => {\n      setInternalInputValue(value);\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange]\n  );\n\n  const handleOpenChange: MenuPrimitive.Root.Props['onOpenChange'] =\n    useCallback(\n      (value: boolean, eventDetails: MenuPrimitive.Root.ChangeEventDetails) => {\n        if (!value && autocomplete) {\n          setValue('');\n          isInitialRender.current = true;\n        }\n        setInternalOpen(value);\n        onOpenChange?.(value, eventDetails);\n      },\n      [onOpenChange, setValue, autocomplete]\n    );\n\n  return (\n    <MenuContext.Provider\n      value={{\n        autocomplete,\n        inputRef,\n        autocompleteMode,\n        inputValue,\n        onInputValueChange: setValue,\n        open: open,\n        isInitialRender,\n        contentRef\n      }}\n    >\n      <MenuPrimitive.Root\n        open={open}\n        onOpenChange={handleOpenChange}\n        loopFocus={false}\n        modal\n        {...props}\n      />\n    </MenuContext.Provider>\n  );\n};\nMenuRoot.displayName = 'Menu';\n\nexport interface NormalMenuSubMenuProps\n  extends MenuPrimitive.SubmenuRoot.Props {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  inputValue?: never;\n  onInputValueChange?: never;\n  defaultInputValue?: never;\n}\n\nexport interface AutocompleteMenuSubMenuProps\n  extends MenuPrimitive.SubmenuRoot.Props {\n  autocomplete: true;\n  autocompleteMode?: 'auto' | 'manual';\n  inputValue?: string;\n  onInputValueChange?: (value: string) => void;\n  defaultInputValue?: string;\n}\n\nexport type MenuSubMenuProps =\n  | NormalMenuSubMenuProps\n  | AutocompleteMenuSubMenuProps;\n\nexport const MenuSubMenu = ({\n  autocomplete,\n  autocompleteMode = 'auto',\n  inputValue: providedInputValue,\n  onInputValueChange,\n  defaultInputValue = '',\n  open: providedOpen,\n  onOpenChange,\n  defaultOpen = false,\n  ...props\n}: MenuSubMenuProps) => {\n  const [internalInputValue, setInternalInputValue] =\n    useState(defaultInputValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = providedOpen ?? internalOpen;\n  const parentContext = useMenuContext();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isInitialRender = useRef(true);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const inputValue = providedInputValue ?? internalInputValue;\n\n  const setValue = useCallback(\n    (value: string) => {\n      setInternalInputValue(value);\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange]\n  );\n\n  const handleOpenChange: MenuPrimitive.Root.Props['onOpenChange'] =\n    useCallback(\n      (value: boolean, eventDetails: MenuPrimitive.Root.ChangeEventDetails) => {\n        if (!value && autocomplete) {\n          setValue('');\n          isInitialRender.current = true;\n        }\n        setInternalOpen(value);\n        onOpenChange?.(value, eventDetails);\n      },\n      [onOpenChange, setValue, autocomplete]\n    );\n\n  return (\n    <MenuContext.Provider\n      value={{\n        autocomplete,\n        inputRef,\n        parent: parentContext,\n        autocompleteMode,\n        inputValue,\n        onInputValueChange: setValue,\n        open: open,\n        isInitialRender,\n        contentRef\n      }}\n    >\n      <MenuPrimitive.SubmenuRoot\n        loopFocus={false}\n        open={open}\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </MenuContext.Provider>\n  );\n};\nMenuSubMenu.displayName = 'Menu.SubMenu';\n"],"names":[],"mappings":";;;;;;;AAiCA;;;AAGG;;AAKI;AACL;AACA;AAAc;AAEd;;AAGE;;AAKA;AACA;;AAIA;;AAEA;;AAEE;AACD;;AAEL;AA4Ba;;;AAeX;AACA;AACA;AACA;AAEA;AAEA;;AAGI;AACF;;AAOI;;AAEE;;;AAGF;;AAKN;;;;;AAOM;AACA;;;;AAcR;AACA;AAwBa;;;AAcX;AACA;AACA;AACA;AACA;AACA;AAEA;;AAGI;AACF;;AAOI;;AAEE;;;AAGF;;AAKN;;;AAKM;;;AAGA;AACA;;;;AAaR;AACA;;;;;"}