@blockle/blocks-react 3.2.0 → 3.3.0

package/dist/components/navigation/Tabs/tabs.css.js

@@ -0,0 +1,122 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers, tabIndicatorVars } from "@blockle/blocks-core";
+import { style, globalStyle } from "@vanilla-extract/css";
+setFileScope("src/components/navigation/Tabs/tabs.css.ts", "@blockle/blocks-react");
+const selectedTrigger = '[aria-selected="true"], [aria-current="page"]';
+const selected = '> :is([aria-selected="true"], [aria-current="page"])';
+const anchorName = "--blockle-tab";
+const anchorPositioning = "(anchor-name: --a) and (anchor-scope: --a)";
+const anchorCss = (properties) => properties;
+const list = style({
+  "@layer": {
+    [layers.molecule]: {
+      // The Tab indicator is positioned against this box
+      position: "relative",
+      display: "flex",
+      // One row that scrolls sideways, never wraps. The Tab indicator is a
+      // child, so it scrolls with the tabs.
+      overflowX: "auto",
+      "@supports": {
+        // Keeps another tab list's selected tab from anchoring this list's
+        // Tab indicator
+        [anchorPositioning]: anchorCss({ anchorScope: anchorName })
+      }
+    }
+  }
+});
+const navList = style({
+  "@layer": {
+    [layers.molecule]: {
+      display: "flex",
+      flexShrink: 0,
+      listStyle: "none",
+      margin: 0,
+      padding: 0
+    }
+  }
+});
+const indicator = style({
+  "@layer": {
+    [layers.molecule]: {
+      display: "none",
+      "@supports": {
+        [anchorPositioning]: anchorCss({
+          display: "block",
+          position: "absolute",
+          positionAnchor: anchorName,
+          left: `anchor(${anchorName} left)`,
+          width: `anchor-size(${anchorName} width)`,
+          bottom: 0,
+          height: tabIndicatorVars.thickness,
+          backgroundColor: tabIndicatorVars.color,
+          pointerEvents: "none"
+        })
+      },
+      // Moves only for users who haven't asked for less motion
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transitionProperty: "left, width",
+          transitionDuration: tabIndicatorVars.duration,
+          transitionTimingFunction: tabIndicatorVars.easing
+        }
+      },
+      selectors: {
+        // Nothing selected, nothing to point at
+        [`${list}:not(:has(${selectedTrigger})) > &`]: {
+          display: "none"
+        }
+      }
+    }
+  }
+});
+const tab = style({
+  "@layer": {
+    [layers.molecule]: {
+      position: "relative",
+      flexShrink: 0,
+      selectors: {
+        // Static bar under the selected tab. Without anchor positioning it is
+        // the only mark; the moving Tab indicator replaces it everywhere else.
+        [`&:has(${selected})::after`]: {
+          content: '""',
+          position: "absolute",
+          insetInline: 0,
+          insetBlockEnd: 0,
+          blockSize: tabIndicatorVars.thickness,
+          backgroundColor: tabIndicatorVars.color
+        }
+      },
+      "@supports": {
+        [anchorPositioning]: {
+          selectors: {
+            [`&:has(${selected})`]: anchorCss({ anchorName }),
+            [`&:has(${selected})::after`]: { content: "none" }
+          }
+        }
+      }
+    }
+  }
+});
+const insetRing = { outlineOffset: "-2px !important" };
+const trigger = style({
+  "@layer": {
+    [layers.molecule]: {
+      ":focus-visible": insetRing
+    }
+  }
+});
+const slot = style({});
+globalStyle(`${slot} :is(button, a, [tabindex]):focus-visible`, {
+  "@layer": {
+    [layers.molecule]: insetRing
+  }
+});
+endFileScope();
+export {
+  indicator,
+  list,
+  navList,
+  slot,
+  tab,
+  trigger
+};

package/dist/components/overlay/Dialog/Dialog.d.ts

@@ -9,7 +9,7 @@ export type DialogProps = {
     className?: string;
     size?: DialogTheme['variants']['size'];
     'aria-label'?: string;
-} & HTMLElementProps<HTMLDialogElement>;
+} & Omit<HTMLElementProps<HTMLDialogElement>, 'size'>;
 export declare const Dialog: React.FC<DialogProps>;
 export {};
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/components/overlay/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAInE,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkDxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAInE,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgDxC,CAAC"}

package/dist/components/overlay/Dialog/Dialog.js

@@ -4,7 +4,7 @@ import { classnames, composeRefs } from "@blockle/blocks-core";
 import { useRef } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { useModalDialog } from "../../../hooks/useModalDialog/useModalDialog.js";
-import { useModalOverlay, DialogContext } from "../useModalOverlay.js";
+import { useModalOverlay } from "../useModalOverlay.js";
 import { dialog } from "./dialog.css.js";
 const Dialog = ({
   children,
@@ -23,23 +23,25 @@ const Dialog = ({
     dialog: true,
     variants: { size }
   });
-  const { contextValue, closeRequestProps } = useModalOverlay(dialogRef, {
+  const closeRequestProps = useModalOverlay(dialogRef, {
     open,
     onRequestClose,
     onKeyDown,
     onKeyDownCapture,
     onCancel
   });
-  const { visible, onAnimationEnd } = useModalDialog(dialogRef, open);
+  const { visible, onAnimationEnd, openAttribute } = useModalDialog(
+    dialogRef,
+    open
+  );
   if (!visible) {
     return null;
   }
-  const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "dialog",
     {
       ref: composeRefs(ref, dialogRef),
-      open: dataOpen,
+      open: openAttribute,
       className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -47,7 +49,7 @@ const Dialog = ({
       ...closeRequestProps,
       children
     }
-  ) });
+  );
 };
 export {
   Dialog

package/dist/components/overlay/Drawer/Drawer.d.ts

@@ -10,7 +10,7 @@ export type DrawerProps = {
     className?: string;
     placement?: keyof typeof styles.placement;
     size?: DrawerTheme['variants']['size'];
-} & HTMLElementProps<HTMLDialogElement>;
+} & Omit<HTMLElementProps<HTMLDialogElement>, 'size'>;
 export declare const Drawer: React.FC<DrawerProps>;
 export {};
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/components/overlay/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;CACxC,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;CACxC,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuDxC,CAAC"}

package/dist/components/overlay/Drawer/Drawer.js

@@ -4,7 +4,7 @@ import { classnames, composeRefs } from "@blockle/blocks-core";
 import { useRef } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { useModalDialog } from "../../../hooks/useModalDialog/useModalDialog.js";
-import { useModalOverlay, DialogContext } from "../useModalOverlay.js";
+import { useModalOverlay } from "../useModalOverlay.js";
 import { drawer, placement } from "./drawer.css.js";
 const Drawer = ({
   open,
@@ -24,23 +24,25 @@ const Drawer = ({
     root: true,
     variants: { placement: placement$1, size }
   });
-  const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  const { contextValue, closeRequestProps } = useModalOverlay(dialogRef, {
+  const closeRequestProps = useModalOverlay(dialogRef, {
     open,
     onRequestClose,
     onKeyDown,
     onKeyDownCapture,
     onCancel
   });
-  const { visible, onAnimationEnd } = useModalDialog(dialogRef, open);
+  const { visible, onAnimationEnd, openAttribute } = useModalDialog(
+    dialogRef,
+    open
+  );
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "dialog",
     {
       ref: composeRefs(ref, dialogRef),
-      open: dataOpen,
+      open: openAttribute,
       className: classnames(
         drawer,
         placement[placement$1],
@@ -53,7 +55,7 @@ const Drawer = ({
       ...closeRequestProps,
       children
     }
-  ) });
+  );
 };
 export {
   Drawer

package/dist/components/overlay/Menu/Menu.d.ts

@@ -0,0 +1,52 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+import { PopoverProps } from '../Popover/Popover.js';
+type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export type MenuActionItem = {
+    type?: undefined;
+    label: React.ReactNode;
+    /**
+     * Text for typeahead, when `label` is not a plain string
+     */
+    textValue?: string;
+    onSelect: () => void;
+    disabled?: boolean;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
+};
+export type MenuSeparatorItem = {
+    type: 'separator';
+};
+export type MenuRadioItem = {
+    value: string;
+    label: React.ReactNode;
+    /**
+     * Text for typeahead, when `label` is not a plain string
+     */
+    textValue?: string;
+    disabled?: boolean;
+    endSlot?: React.ReactNode;
+};
+export type MenuRadioGroupItem = {
+    type: 'radio-group';
+    value: string;
+    onChange: (value: string) => void;
+    items: MenuRadioItem[];
+};
+export type MenuItem = MenuActionItem | MenuSeparatorItem | MenuRadioGroupItem;
+export type MenuProps = {
+    /**
+     * The trigger, usually a `Button` or `IconButton`
+     */
+    children: ReactElement;
+    items: MenuItem[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Side of the trigger to open on, and which of its edges to line up with
+     * @default 'bottom-start'
+     */
+    placement?: PopoverProps['placement'];
+} & Omit<HTMLElementProps<HTMLDivElement>, 'ref' | 'children'>;
+export declare const Menu: React.FC<MenuProps>;
+export {};
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/overlay/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Menu/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAc9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAenE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC;AAU/D,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyLpC,CAAC"}

package/dist/components/overlay/Menu/Menu.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { composeRefs, classnames } from "@blockle/blocks-core";
+import { Children, useId, useRef, useState, useEffect, isValidElement, cloneElement, Fragment as Fragment$1 } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { CheckIcon } from "../../../icons/icons.js";
+import { Popover } from "../Popover/Popover.js";
+import { isMenuNavigationKey, isTypeaheadKey, getEnabledItems, getNextIndex, getTypeaheadMatch, getItemText, getTextValue } from "./menu-utils.js";
+const TYPEAHEAD_RESET_MS = 500;
+function focusItem(list, which) {
+  const items = getEnabledItems(list);
+  items.at(which === "first" ? 0 : -1)?.focus();
+}
+const Menu = ({
+  children,
+  items,
+  open: openProp,
+  onOpenChange,
+  placement = "bottom-start",
+  className,
+  ...restProps
+}) => {
+  if (Children.count(children) !== 1) {
+    throw new Error("Menu component can only have one child");
+  }
+  const listId = useId();
+  const generatedTriggerId = useId();
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const searchRef = useRef("");
+  const searchTimeoutRef = useRef(void 0);
+  const initialFocus = useRef("first");
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== void 0;
+  const open = (isControlled ? openProp : internalOpen) && items.length > 0;
+  const listClassName = useComponentStyles("menu", { list: true }, false);
+  const setOpen = (next) => {
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onOpenChange?.(next);
+  };
+  const openAndFocus = (which) => {
+    if (items.length === 0) {
+      return;
+    }
+    initialFocus.current = which;
+    setOpen(true);
+  };
+  const closeMenu = () => {
+    setOpen(false);
+  };
+  const closeAndFocusTrigger = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const onRequestClose = (reason) => {
+    if (reason === "escape") {
+      closeAndFocusTrigger();
+    } else {
+      closeMenu();
+    }
+  };
+  useEffect(() => {
+    return () => window.clearTimeout(searchTimeoutRef.current);
+  }, []);
+  const child = Children.toArray(children)[0];
+  if (!isValidElement(child)) {
+    return null;
+  }
+  const trigger = child;
+  const triggerId = trigger.props.id ?? generatedTriggerId;
+  const onTriggerClick = (event) => {
+    trigger.props.onClick?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (!open) {
+      openAndFocus("first");
+    }
+  };
+  const onTriggerKeyDown = (event) => {
+    trigger.props.onKeyDown?.(event);
+    if (event.defaultPrevented || open) {
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      openAndFocus(event.key === "ArrowDown" ? "first" : "last");
+    }
+  };
+  const onListKeyDown = (event) => {
+    if (event.key === "Tab") {
+      closeAndFocusTrigger();
+      return;
+    }
+    const navigationKey = isMenuNavigationKey(event.key) ? event.key : null;
+    if (!navigationKey && !isTypeaheadKey(event)) {
+      return;
+    }
+    const enabled = getEnabledItems(listRef.current);
+    const current = enabled.indexOf(document.activeElement);
+    if (navigationKey) {
+      if (enabled.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      enabled[getNextIndex(navigationKey, current, enabled.length)]?.focus();
+      return;
+    }
+    if (event.key === " " && searchRef.current === "") {
+      return;
+    }
+    event.preventDefault();
+    window.clearTimeout(searchTimeoutRef.current);
+    searchRef.current += event.key;
+    searchTimeoutRef.current = window.setTimeout(() => {
+      searchRef.current = "";
+    }, TYPEAHEAD_RESET_MS);
+    enabled[getTypeaheadMatch(enabled.map(getItemText), current, searchRef.current)]?.focus();
+  };
+  const onPick = (select) => {
+    select();
+    closeAndFocusTrigger();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(trigger, {
+      ref: composeRefs(triggerRef, trigger.props.ref),
+      id: triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? listId : void 0,
+      onClick: onTriggerClick,
+      onKeyDown: onTriggerKeyDown
+    }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        ...restProps,
+        ref: listRef,
+        id: listId,
+        role: "menu",
+        "aria-labelledby": triggerId,
+        anchorElement: triggerRef,
+        open,
+        onRequestClose,
+        placement,
+        limitHeight: true,
+        className: classnames(listClassName, className),
+        onKeyDown: onListKeyDown,
+        children: /* @__PURE__ */ jsx(
+          MenuItems,
+          {
+            items,
+            listRef,
+            initialFocus: initialFocus.current,
+            onPick
+          }
+        )
+      }
+    )
+  ] });
+};
+const MenuItems = ({
+  items,
+  listRef,
+  initialFocus,
+  onPick
+}) => {
+  const separatorClassName = useComponentStyles(
+    "menu",
+    { separator: true },
+    false
+  );
+  useEffect(() => {
+    focusItem(listRef.current, initialFocus);
+  }, []);
+  return items.map((item, index) => {
+    if (item.type === "separator") {
+      return /* @__PURE__ */ jsx(
+        "hr",
+        {
+          className: separatorClassName
+        },
+        index
+      );
+    }
+    if (item.type === "radio-group") {
+      return (
+        // biome-ignore lint/suspicious/noArrayIndexKey: items have no id
+        /* @__PURE__ */ jsx(Fragment$1, { children: item.items.map((radio) => /* @__PURE__ */ jsx(
+          MenuRadio,
+          {
+            item: radio,
+            checked: radio.value === item.value,
+            onActivate: () => onPick(() => item.onChange(radio.value))
+          },
+          radio.value
+        )) }, index)
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      MenuItemButton,
+      {
+        role: "menuitem",
+        item,
+        onActivate: () => onPick(item.onSelect),
+        children: [
+          item.startSlot,
+          item.label,
+          item.endSlot
+        ]
+      },
+      index
+    );
+  });
+};
+const MenuItemButton = ({
+  role,
+  item,
+  onActivate,
+  children,
+  ...ariaProps
+}) => {
+  const className = useComponentStyles("menu", { item: true }, false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role,
+      tabIndex: -1,
+      "aria-disabled": item.disabled || void 0,
+      "data-text-value": getTextValue(item),
+      ...ariaProps,
+      className,
+      onClick: () => {
+        if (!item.disabled) {
+          onActivate();
+        }
+      },
+      onPointerMove: (event) => {
+        if (!item.disabled) {
+          event.currentTarget.focus();
+        }
+      },
+      children
+    }
+  );
+};
+const MenuRadio = ({ item, checked, onActivate }) => {
+  const indicatorClassName = useComponentStyles(
+    "menu",
+    { itemIndicator: true },
+    false
+  );
+  return /* @__PURE__ */ jsxs(
+    MenuItemButton,
+    {
+      role: "menuitemradio",
+      "aria-checked": checked,
+      item,
+      onActivate,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: indicatorClassName, "data-radio-indicator": "", children: checked && /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        item.label,
+        item.endSlot
+      ]
+    }
+  );
+};
+export {
+  Menu
+};

package/dist/components/overlay/Menu/menu-utils.d.ts

@@ -0,0 +1,33 @@
+export declare function getEnabledItems(list: HTMLElement | null): HTMLElement[];
+type MenuNavigationKey = 'ArrowDown' | 'ArrowUp' | 'Home' | 'End';
+export declare function isMenuNavigationKey(key: string): key is MenuNavigationKey;
+/**
+ * Returns the index to focus after `key`, wrapping at both ends. `current` is
+ * -1 when none of the items has focus.
+ */
+export declare function getNextIndex(key: MenuNavigationKey, current: number, count: number): number;
+/**
+ * The text an item takes part in typeahead with: its `textValue`, else its
+ * `label` when that is a string.
+ */
+export declare function getTextValue(item: {
+    label: React.ReactNode;
+    textValue?: string;
+}): string | undefined;
+export declare function getItemText(item: HTMLElement): string | undefined;
+export declare function isTypeaheadKey(event: {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}): boolean;
+/**
+ * Returns the index of the item to focus for `search`, or -1 for no match.
+ * `texts` holds each item's text, `undefined` for items without any. Typing
+ * the same character repeatedly cycles through the items starting with it,
+ * beginning after `current`. A longer search matches from `current` itself, so
+ * refining a search doesn't skip past the item already in focus.
+ */
+export declare function getTypeaheadMatch(texts: (string | undefined)[], current: number, search: string): number;
+export {};
+//# sourceMappingURL=menu-utils.d.ts.map

package/dist/components/overlay/Menu/menu-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Menu/menu-utils.ts"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,EAAE,CAMvE;AAED,KAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AAElE,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAIzE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,iBAAiB,EACtB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,GACZ,MAAM,CAWR;AAOD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,MAAM,GAAG,SAAS,CAIrB;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAEjE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB,GAAG,OAAO,CAIV;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,EAC7B,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,GACb,MAAM,CAgBR"}

package/dist/components/overlay/Menu/menu-utils.js

@@ -0,0 +1,54 @@
+const ENABLED_ITEM_SELECTOR = '[role^="menuitem"]:not([aria-disabled="true"])';
+function getEnabledItems(list) {
+  if (!list) {
+    return [];
+  }
+  return Array.from(list.querySelectorAll(ENABLED_ITEM_SELECTOR));
+}
+function isMenuNavigationKey(key) {
+  return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
+}
+function getNextIndex(key, current, count) {
+  switch (key) {
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    case "ArrowDown":
+      return (current + 1) % count;
+    case "ArrowUp":
+      return current <= 0 ? count - 1 : current - 1;
+  }
+}
+const TEXT_VALUE_ATTRIBUTE = "data-text-value";
+function getTextValue(item) {
+  return item.textValue ?? (typeof item.label === "string" ? item.label : void 0);
+}
+function getItemText(item) {
+  return item.getAttribute(TEXT_VALUE_ATTRIBUTE) ?? void 0;
+}
+function isTypeaheadKey(event) {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function getTypeaheadMatch(texts, current, search) {
+  const query = search.toLowerCase();
+  const repeated = query.length > 1 && [...query].every((c) => c === query[0]);
+  const prefix = repeated ? query.slice(0, 1) : query;
+  const start = repeated || query.length === 1 ? current + 1 : current;
+  for (let offset = 0; offset < texts.length; offset++) {
+    const index = ((start + offset) % texts.length + texts.length) % texts.length;
+    if (texts[index]?.toLowerCase().startsWith(prefix)) {
+      return index;
+    }
+  }
+  return -1;
+}
+export {
+  getEnabledItems,
+  getItemText,
+  getNextIndex,
+  getTextValue,
+  getTypeaheadMatch,
+  isMenuNavigationKey,
+  isTypeaheadKey
+};