@malilion/block-ui-react 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Block UI Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,46 @@
-# Temporary Holding Version
+# @malilion/block-ui-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Block / pixel / crafting game-style React components: inventory, crafting, HUD, cards, forms, and more.
+
+## Install
+
+```bash
+pnpm add @malilion/block-ui-react
+```
+
+This installs `@malilion/block-ui-tokens`, `@malilion/block-ui-themes` and `@malilion/block-ui-icons`. Peer dependencies: `react` and `react-dom` ^18.2 or ^19.
+
+## Usage
+
+```tsx
+import { BlockUIProvider, BlockButton } from "@malilion/block-ui-react";
+import "@malilion/block-ui-react/styles.css";
+
+function App() {
+  return (
+    <BlockUIProvider theme="grassland">
+      <BlockButton variant="grass">Mine!</BlockButton>
+    </BlockUIProvider>
+  );
+}
+```
+
+Import components from the package root:
+
+```tsx
+import { InventoryGrid, InventorySlot, ItemStack, QuestCard } from "@malilion/block-ui-react";
+```
+
+## Themes
+
+`BlockUIProvider` accepts `grassland`, `cave`, `deepslate`, `nether`, and `end`.
+
+## Styles
+
+Load the bundled stylesheet once:
+
+```tsx
+import "@malilion/block-ui-react/styles.css";
+```
+
+That file includes design tokens and theme CSS.

package/dist/components/actions/BlockButton/BlockButton.d.ts

@@ -0,0 +1,7 @@
+import type { BlockButtonProps } from "./BlockButton.types";
+/**
+ * Chunky block button with a pixel bevel. Disabled and loading buttons stay
+ * focusable via `aria-disabled` but never fire `onClick`.
+ */
+export declare const BlockButton: import("react").ForwardRefExoticComponent<BlockButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=BlockButton.d.ts.map

package/dist/components/actions/BlockButton/BlockButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockButton/BlockButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,WAAW,gHAyDtB,CAAC"}

package/dist/components/actions/BlockButton/BlockButton.js

@@ -0,0 +1,61 @@
+import { cx } from "../../../utils/cx.js";
+import BlockButton_module_default from "./BlockButton.module.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/BlockButton/BlockButton.tsx
+/**
+* Chunky block button with a pixel bevel. Disabled and loading buttons stay
+* focusable via `aria-disabled` but never fire `onClick`.
+*/
+var BlockButton = forwardRef(function BlockButton({ variant = "stone", size = "md", loading = false, fullWidth = false, disabled = false, startIcon, endIcon, className, children, type = "button", onClick, ...rest }, ref) {
+	const inactive = disabled || loading;
+	const handleClick = (event) => {
+		if (inactive) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		"data-material": variant,
+		"data-size": size,
+		"data-loading": loading || void 0,
+		"aria-disabled": inactive || void 0,
+		"aria-busy": loading || void 0,
+		className: cx(BlockButton_module_default.button, BlockButton_module_default[size], fullWidth && BlockButton_module_default.fullWidth, className),
+		onClick: handleClick,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: BlockButton_module_default.content,
+			children: [
+				startIcon ? /* @__PURE__ */ jsx("span", {
+					className: BlockButton_module_default.icon,
+					children: startIcon
+				}) : null,
+				children !== void 0 && children !== null ? /* @__PURE__ */ jsx("span", {
+					className: BlockButton_module_default.label,
+					children
+				}) : null,
+				endIcon ? /* @__PURE__ */ jsx("span", {
+					className: BlockButton_module_default.icon,
+					children: endIcon
+				}) : null
+			]
+		}), loading ? /* @__PURE__ */ jsxs("span", {
+			className: BlockButton_module_default.loader,
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {})
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { BlockButton };
+
+//# sourceMappingURL=BlockButton.js.map

package/dist/components/actions/BlockButton/BlockButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockButton.js","names":["styles"],"sources":["../../../../src/components/actions/BlockButton/BlockButton.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockButton.module.css\";\nimport type { BlockButtonProps } from \"./BlockButton.types\";\n\n/**\n * Chunky block button with a pixel bevel. Disabled and loading buttons stay\n * focusable via `aria-disabled` but never fire `onClick`.\n */\nexport const BlockButton = forwardRef<HTMLButtonElement, BlockButtonProps>(function BlockButton(\n  {\n    variant = \"stone\",\n    size = \"md\",\n    loading = false,\n    fullWidth = false,\n    disabled = false,\n    startIcon,\n    endIcon,\n    className,\n    children,\n    type = \"button\",\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const inactive = disabled || loading;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (inactive) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-material={variant}\n      data-size={size}\n      data-loading={loading || undefined}\n      aria-disabled={inactive || undefined}\n      aria-busy={loading || undefined}\n      className={cx(styles.button, styles[size], fullWidth && styles.fullWidth, className)}\n      onClick={handleClick}\n      {...rest}\n    >\n      <span className={styles.content}>\n        {startIcon ? <span className={styles.icon}>{startIcon}</span> : null}\n        {children !== undefined && children !== null ? (\n          <span className={styles.label}>{children}</span>\n        ) : null}\n        {endIcon ? <span className={styles.icon}>{endIcon}</span> : null}\n      </span>\n      {loading ? (\n        <span className={styles.loader} aria-hidden=\"true\">\n          <span />\n          <span />\n          <span />\n        </span>\n      ) : null}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;AASA,IAAa,cAAc,WAAgD,SAAS,YAClF,EACE,UAAU,SACV,OAAO,MACP,UAAU,OACV,YAAY,OACZ,WAAW,OACX,WACA,SACA,WACA,UACA,OAAO,UACP,SACA,GAAG,QAEL,KACA;CACA,MAAM,WAAW,YAAY;CAE7B,MAAM,eAAe,UAAyC;EAC5D,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EACA,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,UAAD;EACO;EACC;EACN,iBAAe;EACf,aAAW;EACX,gBAAc,WAAW,KAAA;EACzB,iBAAe,YAAY,KAAA;EAC3B,aAAW,WAAW,KAAA;EACtB,WAAW,GAAGA,2BAAO,QAAQA,2BAAO,OAAO,aAAaA,2BAAO,WAAW,SAAS;EACnF,SAAS;EACT,GAAI;EAVN,UAAA,CAYE,qBAAC,QAAD;GAAM,WAAWA,2BAAO;GAAxB,UAAA;IACG,YAAY,oBAAC,QAAD;KAAM,WAAWA,2BAAO;KAAO,UAAA;IAAgB,CAAA,IAAI;IAC/D,aAAa,KAAA,KAAa,aAAa,OACtC,oBAAC,QAAD;KAAM,WAAWA,2BAAO;KAAQ;IAAe,CAAA,IAC7C;IACH,UAAU,oBAAC,QAAD;KAAM,WAAWA,2BAAO;KAAO,UAAA;IAAc,CAAA,IAAI;GACxD;EACL,CAAA,GAAA,UACC,qBAAC,QAAD;GAAM,WAAWA,2BAAO;GAAQ,eAAY;GAA5C,UAAA;IACE,oBAAC,QAAD,CAAO,CAAA;IACP,oBAAC,QAAD,CAAO,CAAA;IACP,oBAAC,QAAD,CAAO,CAAA;GACH;EACJ,CAAA,IAAA,IACE;;AAEZ,CAAC"}

package/dist/components/actions/BlockButton/BlockButton.module.js

@@ -0,0 +1,26 @@
+//#region src/components/actions/BlockButton/BlockButton.module.css
+var button = "block-button-dbOrt";
+var sm = "block-sm-fTVx2";
+var md = "block-md-yglho";
+var lg = "block-lg-DPca2";
+var fullWidth = "block-fullWidth-g8535";
+var content = "block-content-tbocr";
+var icon = "block-icon-jyqDB";
+var label = "block-label-S1ftj";
+var loader = "block-loader-uAd1d";
+var BlockButton_module_default = {
+	button,
+	sm,
+	md,
+	lg,
+	fullWidth,
+	content,
+	icon,
+	label,
+	loader,
+	"block-blink": "block-block-blink-od4kR"
+};
+//#endregion
+export { button, content, BlockButton_module_default as default, fullWidth, icon, label, lg, loader, md, sm };
+
+//# sourceMappingURL=BlockButton.module.js.map

package/dist/components/actions/BlockButton/BlockButton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockButton.module.js","names":[],"sources":["../../../../src/components/actions/BlockButton/BlockButton.module.css"],"sourcesContent":[".button {\n  --button-height: var(--block-size-control-md);\n  --button-padding: var(--block-space-4);\n  --button-font-size: var(--block-font-size-lg);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--button-height);\n  min-width: var(--button-height);\n  padding: 0 var(--button-padding);\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--button-font-size);\n  font-weight: var(--block-font-weight-bold);\n  line-height: 1;\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--block-mat-on);\n  text-shadow: var(--block-mat-text-shadow);\n  background-color: var(--block-mat);\n  border: var(--block-border-width) solid var(--block-border);\n  border-radius: var(--block-radius-none);\n  box-shadow:\n    inset 0 3px 0 var(--block-mat-light),\n    inset 3px 0 0 var(--block-mat-light),\n    inset 0 -4px 0 var(--block-mat-dark),\n    inset -3px 0 0 var(--block-mat-dark);\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    transform var(--block-duration-instant) var(--block-ease-step),\n    filter var(--block-duration-instant) var(--block-ease-step);\n}\n\n.button:hover:not([aria-disabled=\"true\"]) {\n  transform: translateY(-2px);\n  filter: brightness(1.1);\n}\n\n.button:active:not([aria-disabled=\"true\"]) {\n  transform: translateY(2px);\n  filter: brightness(0.95);\n  box-shadow:\n    inset 0 4px 0 var(--block-mat-dark),\n    inset 3px 0 0 var(--block-mat-dark),\n    inset 0 -2px 0 var(--block-mat-light);\n}\n\n.button:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  filter: saturate(0.25) brightness(0.7);\n}\n\n.button[data-loading] {\n  cursor: progress;\n  filter: none;\n}\n\n.sm {\n  --button-height: var(--block-size-control-sm);\n  --button-padding: var(--block-space-3);\n  --button-font-size: var(--block-font-size-sm);\n}\n\n.md {\n  --button-height: var(--block-size-control-md);\n}\n\n.lg {\n  --button-height: var(--block-size-control-lg);\n  --button-padding: var(--block-space-6);\n  --button-font-size: var(--block-font-size-xl);\n}\n\n.fullWidth {\n  display: flex;\n  width: 100%;\n}\n\n.content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-2);\n}\n\n/* Hide the label visually but keep it as the accessible name. */\n.button[data-loading] .content {\n  opacity: 0;\n}\n\n.icon {\n  display: inline-flex;\n  filter: drop-shadow(1px 1px 0 var(--block-border));\n}\n\n.label {\n  /* Pixel fonts sit high; nudge for optical centering. */\n  padding-top: 2px;\n}\n\n.loader {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n\n.loader span {\n  width: 6px;\n  height: 6px;\n  background-color: currentColor;\n  animation: block-blink 480ms steps(1, end) infinite;\n}\n\n.loader span:nth-child(2) {\n  animation-delay: 160ms;\n}\n\n.loader span:nth-child(3) {\n  animation-delay: 320ms;\n}\n"],"mappings":""}

package/dist/components/actions/BlockButton/BlockButton.types.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export declare const blockButtonVariants: readonly ["grass", "stone", "dirt", "wood", "diamond", "emerald", "gold", "redstone", "obsidian"];
+export type BlockButtonVariant = (typeof blockButtonVariants)[number];
+export type BlockButtonSize = "sm" | "md" | "lg";
+export interface BlockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Block material. @default "stone" */
+    variant?: BlockButtonVariant;
+    /** @default "md" */
+    size?: BlockButtonSize;
+    /** Shows a pixel loader, sets `aria-busy` and blocks repeated clicks. */
+    loading?: boolean;
+    /** Stretch to the container width. */
+    fullWidth?: boolean;
+    /** Icon rendered before the label. */
+    startIcon?: ReactNode;
+    /** Icon rendered after the label. */
+    endIcon?: ReactNode;
+}
+//# sourceMappingURL=BlockButton.types.d.ts.map

package/dist/components/actions/BlockButton/BlockButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockButton/BlockButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,eAAO,MAAM,mBAAmB,mGAUtB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,uCAAuC;IACvC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB"}

package/dist/components/actions/BlockButton/BlockButton.types.js

@@ -0,0 +1,16 @@
+//#region src/components/actions/BlockButton/BlockButton.types.ts
+var blockButtonVariants = [
+	"grass",
+	"stone",
+	"dirt",
+	"wood",
+	"diamond",
+	"emerald",
+	"gold",
+	"redstone",
+	"obsidian"
+];
+//#endregion
+export { blockButtonVariants };
+
+//# sourceMappingURL=BlockButton.types.js.map

package/dist/components/actions/BlockButton/BlockButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockButton.types.js","names":[],"sources":["../../../../src/components/actions/BlockButton/BlockButton.types.ts"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\n\nexport const blockButtonVariants = [\n  \"grass\",\n  \"stone\",\n  \"dirt\",\n  \"wood\",\n  \"diamond\",\n  \"emerald\",\n  \"gold\",\n  \"redstone\",\n  \"obsidian\",\n] as const;\n\nexport type BlockButtonVariant = (typeof blockButtonVariants)[number];\n\nexport type BlockButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface BlockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Block material. @default \"stone\" */\n  variant?: BlockButtonVariant;\n  /** @default \"md\" */\n  size?: BlockButtonSize;\n  /** Shows a pixel loader, sets `aria-busy` and blocks repeated clicks. */\n  loading?: boolean;\n  /** Stretch to the container width. */\n  fullWidth?: boolean;\n  /** Icon rendered before the label. */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. */\n  endIcon?: ReactNode;\n}\n"],"mappings":";AAEA,IAAa,sBAAsB;CACjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/actions/BlockButton/index.d.ts

@@ -0,0 +1,4 @@
+export { BlockButton } from "./BlockButton";
+export { blockButtonVariants } from "./BlockButton.types";
+export type { BlockButtonProps, BlockButtonSize, BlockButtonVariant } from "./BlockButton.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/BlockButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/actions/BlockMenu/BlockMenu.d.ts

@@ -0,0 +1,9 @@
+import type { BlockMenuProps } from "./BlockMenu.types";
+/**
+ * Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys
+ * move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose
+ * and Escape closes — focus always returns to the trigger. The menu renders in
+ * the provider's overlay layer, so scroll containers (tables) never clip it.
+ */
+export declare const BlockMenu: import("react").ForwardRefExoticComponent<BlockMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BlockMenu.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKvE;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2GAqPpB,CAAC"}

package/dist/components/actions/BlockMenu/BlockMenu.js

@@ -0,0 +1,211 @@
+import { cx } from "../../../utils/cx.js";
+import { usePortalContainer } from "../../../provider/context.js";
+import { BlockButton } from "../BlockButton/BlockButton.js";
+import IconButton_module_default from "../IconButton/IconButton.module.js";
+import { useAnchoredPosition } from "../../../hooks/useAnchoredPosition.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import BlockMenu_module_default from "./BlockMenu.module.js";
+import { isMenuItem, typeaheadIndex } from "./BlockMenu.utils.js";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ChevronDownIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/BlockMenu/BlockMenu.tsx
+/**
+* Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys
+* move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose
+* and Escape closes — focus always returns to the trigger. The menu renders in
+* the provider's overlay layer, so scroll containers (tables) never clip it.
+*/
+var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant = "stone", size = "md", icon, iconOnly = false, align = "start", placement = "bottom", disabled = false, onOpenChange, className, ...rest }, ref) {
+	const baseId = useId();
+	const triggerId = `${baseId}-trigger`;
+	const menuId = `${baseId}-menu`;
+	const container = usePortalContainer();
+	const rootRef = useRef(null);
+	const menuRef = useRef(null);
+	const triggerRef = useRef(null);
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const [open, setOpenState] = useState(false);
+	const [focusTarget, setFocusTarget] = useState(null);
+	const position = useAnchoredPosition(triggerRef, menuRef, open, {
+		side: placement,
+		align: align === "end" ? "end" : "start",
+		gap: 4
+	});
+	const isInside = (node) => Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));
+	const menuItems = items.filter(isMenuItem);
+	const enabledIndexes = menuItems.flatMap((item, index) => item.disabled ? [] : [index]);
+	const setOpen = (next) => {
+		setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const openMenu = (target) => {
+		if (disabled || enabledIndexes.length === 0) return;
+		setOpen(true);
+		setFocusTarget(target);
+	};
+	const closeMenu = (returnFocus) => {
+		setOpen(false);
+		setFocusTarget(null);
+		if (returnFocus) triggerRef.current?.focus();
+	};
+	const focusItem = (index) => {
+		const item = menuItems[index];
+		if (item) itemRefs.current.get(item.id)?.focus();
+	};
+	useEffect(() => {
+		if (!open || focusTarget === null || !position) return;
+		const index = focusTarget === "first" ? enabledIndexes[0] : focusTarget === "last" ? enabledIndexes[enabledIndexes.length - 1] : focusTarget;
+		if (index !== void 0) focusItem(index);
+	}, [
+		open,
+		focusTarget,
+		position !== null
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!isInside(event.target)) closeMenu(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [open]);
+	const choose = (item) => {
+		if (item.disabled) return;
+		closeMenu(true);
+		item.onSelect?.();
+		onSelect?.(item.id);
+	};
+	const onTriggerKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			openMenu("first");
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			openMenu("last");
+		}
+	};
+	const onMenuKeyDown = (event) => {
+		const current = menuItems.findIndex((item) => itemRefs.current.get(item.id) === document.activeElement);
+		const position = enabledIndexes.indexOf(current);
+		const count = enabledIndexes.length;
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = enabledIndexes[(position + 1) % count];
+				break;
+			case "ArrowUp":
+				next = enabledIndexes[(position - 1 + count) % count];
+				break;
+			case "Home":
+				next = enabledIndexes[0];
+				break;
+			case "End":
+				next = enabledIndexes[count - 1];
+				break;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				closeMenu(true);
+				return;
+			case "Tab":
+				closeMenu(true);
+				return;
+			default: if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {
+				const match = typeaheadIndex(menuItems, current, event.key);
+				if (match >= 0) next = match;
+			}
+		}
+		if (next === void 0) return;
+		event.preventDefault();
+		focusItem(next);
+	};
+	const onMenuBlur = (event) => {
+		if (!isInside(event.relatedTarget)) closeMenu(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(ref, rootRef),
+		className: cx(BlockMenu_module_default.root, className),
+		"data-open": open || void 0,
+		...rest,
+		children: [/* @__PURE__ */ jsx(BlockButton, {
+			ref: triggerRef,
+			id: triggerId,
+			variant,
+			size,
+			disabled,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-controls": menuId,
+			"aria-label": iconOnly ? label : void 0,
+			title: iconOnly ? label : void 0,
+			startIcon: iconOnly ? void 0 : icon,
+			endIcon: iconOnly ? void 0 : /* @__PURE__ */ jsx("span", {
+				className: BlockMenu_module_default.chevron,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+			}),
+			className: cx(iconOnly && IconButton_module_default.iconButton),
+			onClick: () => open ? closeMenu(false) : openMenu("first"),
+			onKeyDown: onTriggerKeyDown,
+			children: iconOnly ? /* @__PURE__ */ jsx("span", {
+				className: IconButton_module_default.icon,
+				"aria-hidden": "true",
+				children: icon
+			}) : label
+		}), container ? createPortal(/* @__PURE__ */ jsx("div", {
+			ref: menuRef,
+			id: menuId,
+			role: "menu",
+			tabIndex: -1,
+			"aria-labelledby": triggerId,
+			hidden: !open,
+			"data-align": align,
+			"data-placement": position?.side ?? placement,
+			className: BlockMenu_module_default.menu,
+			style: position?.style,
+			onKeyDown: onMenuKeyDown,
+			onBlur: onMenuBlur,
+			children: items.map((entry, index) => {
+				if (!isMenuItem(entry)) return /* @__PURE__ */ jsx("div", {
+					role: "separator",
+					className: BlockMenu_module_default.separator
+				}, entry.id ?? `separator-${index}`);
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (element) => {
+						if (element) itemRefs.current.set(entry.id, element);
+						else itemRefs.current.delete(entry.id);
+					},
+					type: "button",
+					role: "menuitem",
+					tabIndex: -1,
+					"aria-disabled": entry.disabled || void 0,
+					"data-danger": entry.danger || void 0,
+					className: BlockMenu_module_default.item,
+					onClick: () => choose(entry),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: BlockMenu_module_default.icon,
+							"aria-hidden": "true",
+							children: entry.icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: BlockMenu_module_default.label,
+							children: entry.label
+						}),
+						entry.shortcut ? /* @__PURE__ */ jsx("kbd", {
+							className: BlockMenu_module_default.shortcut,
+							"aria-hidden": "true",
+							children: entry.shortcut
+						}) : null
+					]
+				}, entry.id);
+			})
+		}), container) : null]
+	});
+});
+//#endregion
+export { BlockMenu };
+
+//# sourceMappingURL=BlockMenu.js.map

package/dist/components/actions/BlockMenu/BlockMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.js","names":["styles","iconButtonStyles"],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport { BlockButton } from \"../BlockButton/BlockButton\";\nimport iconButtonStyles from \"../IconButton/IconButton.module.css\";\nimport styles from \"./BlockMenu.module.css\";\nimport type { BlockMenuItem, BlockMenuProps } from \"./BlockMenu.types\";\nimport { isMenuItem, typeaheadIndex } from \"./BlockMenu.utils\";\n\ntype FocusTarget = \"first\" | \"last\" | number;\n\n/**\n * Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys\n * move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose\n * and Escape closes — focus always returns to the trigger. The menu renders in\n * the provider's overlay layer, so scroll containers (tables) never clip it.\n */\nexport const BlockMenu = forwardRef<HTMLDivElement, BlockMenuProps>(function BlockMenu(\n  {\n    label,\n    items,\n    onSelect,\n    variant = \"stone\",\n    size = \"md\",\n    icon,\n    iconOnly = false,\n    align = \"start\",\n    placement = \"bottom\",\n    disabled = false,\n    onOpenChange,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const baseId = useId();\n  const triggerId = `${baseId}-trigger`;\n  const menuId = `${baseId}-menu`;\n  const container = usePortalContainer();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef(new Map<string, HTMLButtonElement>());\n  const [open, setOpenState] = useState(false);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget | null>(null);\n\n  const position = useAnchoredPosition(triggerRef, menuRef, open, {\n    side: placement,\n    align: align === \"end\" ? \"end\" : \"start\",\n    gap: 4,\n  });\n  const isInside = (node: Node | null) =>\n    Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));\n\n  const menuItems = items.filter(isMenuItem);\n  const enabledIndexes = menuItems.flatMap((item, index) => (item.disabled ? [] : [index]));\n\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const openMenu = (target: FocusTarget) => {\n    if (disabled || enabledIndexes.length === 0) return;\n    setOpen(true);\n    setFocusTarget(target);\n  };\n\n  const closeMenu = (returnFocus: boolean) => {\n    setOpen(false);\n    setFocusTarget(null);\n    if (returnFocus) triggerRef.current?.focus();\n  };\n\n  const focusItem = (index: number) => {\n    const item = menuItems[index];\n    if (item) itemRefs.current.get(item.id)?.focus();\n  };\n\n  useEffect(() => {\n    if (!open || focusTarget === null || !position) return;\n    const index =\n      focusTarget === \"first\"\n        ? enabledIndexes[0]\n        : focusTarget === \"last\"\n          ? enabledIndexes[enabledIndexes.length - 1]\n          : focusTarget;\n    if (index !== undefined) focusItem(index);\n    // Focus once the menu is open and positioned, or when the target changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, focusTarget, position !== null]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!isInside(event.target as Node)) closeMenu(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const choose = (item: BlockMenuItem) => {\n    if (item.disabled) return;\n    closeMenu(true);\n    item.onSelect?.();\n    onSelect?.(item.id);\n  };\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      openMenu(\"first\");\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      openMenu(\"last\");\n    }\n  };\n\n  const onMenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = menuItems.findIndex(\n      (item) => itemRefs.current.get(item.id) === document.activeElement,\n    );\n    const position = enabledIndexes.indexOf(current);\n    const count = enabledIndexes.length;\n    let next: number | undefined;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = enabledIndexes[(position + 1) % count];\n        break;\n      case \"ArrowUp\":\n        next = enabledIndexes[(position - 1 + count) % count];\n        break;\n      case \"Home\":\n        next = enabledIndexes[0];\n        break;\n      case \"End\":\n        next = enabledIndexes[count - 1];\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        event.stopPropagation();\n        closeMenu(true);\n        return;\n      case \"Tab\":\n        // The menu lives in the overlay layer at the end of the page: hand focus back to the\n        // trigger first so the browser's Tab continues from the trigger's place in the page.\n        closeMenu(true);\n        return;\n      default:\n        if (event.key.length === 1 && /\\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {\n          const match = typeaheadIndex(menuItems, current, event.key);\n          if (match >= 0) next = match;\n        }\n    }\n    if (next === undefined) return;\n    event.preventDefault();\n    focusItem(next);\n  };\n\n  const onMenuBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!isInside(event.relatedTarget as Node | null)) closeMenu(false);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(ref, rootRef)}\n      className={cx(styles.root, className)}\n      data-open={open || undefined}\n      {...rest}\n    >\n      <BlockButton\n        ref={triggerRef}\n        id={triggerId}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={menuId}\n        aria-label={iconOnly ? label : undefined}\n        title={iconOnly ? label : undefined}\n        startIcon={iconOnly ? undefined : icon}\n        endIcon={\n          iconOnly ? undefined : (\n            <span className={styles.chevron} aria-hidden=\"true\">\n              <ChevronDownIcon size={16} />\n            </span>\n          )\n        }\n        className={cx(iconOnly && iconButtonStyles.iconButton)}\n        onClick={() => (open ? closeMenu(false) : openMenu(\"first\"))}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {iconOnly ? (\n          <span className={iconButtonStyles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : (\n          label\n        )}\n      </BlockButton>\n      {container\n        ? createPortal(\n            <div\n              ref={menuRef}\n              id={menuId}\n              role=\"menu\"\n              tabIndex={-1}\n              aria-labelledby={triggerId}\n              hidden={!open}\n              data-align={align}\n              data-placement={position?.side ?? placement}\n              className={styles.menu}\n              style={position?.style}\n              onKeyDown={onMenuKeyDown}\n              onBlur={onMenuBlur}\n            >\n              {items.map((entry, index) => {\n                if (!isMenuItem(entry)) {\n                  return (\n                    <div\n                      key={entry.id ?? `separator-${index}`}\n                      role=\"separator\"\n                      className={styles.separator}\n                    />\n                  );\n                }\n                return (\n                  <button\n                    key={entry.id}\n                    ref={(element) => {\n                      if (element) itemRefs.current.set(entry.id, element);\n                      else itemRefs.current.delete(entry.id);\n                    }}\n                    type=\"button\"\n                    role=\"menuitem\"\n                    tabIndex={-1}\n                    aria-disabled={entry.disabled || undefined}\n                    data-danger={entry.danger || undefined}\n                    className={styles.item}\n                    onClick={() => choose(entry)}\n                  >\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {entry.icon}\n                    </span>\n                    <span className={styles.label}>{entry.label}</span>\n                    {entry.shortcut ? (\n                      <kbd className={styles.shortcut} aria-hidden=\"true\">\n                        {entry.shortcut}\n                      </kbd>\n                    ) : null}\n                  </button>\n                );\n              })}\n            </div>,\n            container,\n          )\n        : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/actions/BlockMenu/BlockMenu.module.js

@@ -0,0 +1,23 @@
+//#region src/components/actions/BlockMenu/BlockMenu.module.css
+var root = "block-root-YWJbx";
+var chevron = "block-chevron-KdTgQ";
+var menu = "block-menu-KgvDw";
+var item = "block-item-u39c-";
+var icon = "block-icon-OVCC3";
+var label = "block-label-r-rZl";
+var shortcut = "block-shortcut-5Sekq";
+var separator = "block-separator-xmDN6";
+var BlockMenu_module_default = {
+	root,
+	chevron,
+	menu,
+	item,
+	icon,
+	label,
+	shortcut,
+	separator
+};
+//#endregion
+export { chevron, BlockMenu_module_default as default, icon, item, label, menu, root, separator, shortcut };
+
+//# sourceMappingURL=BlockMenu.module.js.map

package/dist/components/actions/BlockMenu/BlockMenu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.module.js","names":[],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.module.css"],"sourcesContent":[".root {\n  position: relative;\n  display: inline-flex;\n}\n\n.chevron {\n  display: inline-flex;\n  transition: transform var(--block-duration-instant) var(--block-ease-step);\n}\n\n.root[data-open] .chevron {\n  transform: rotate(180deg);\n}\n\n.menu {\n  position: fixed;\n  top: var(--block-float-y, 0);\n  left: var(--block-float-x, 0);\n  z-index: var(--block-z-dropdown);\n  display: flex;\n  flex-direction: column;\n  min-width: max(var(--block-float-anchor-width, 0px), 200px);\n  max-width: min(320px, calc(100vw - var(--block-space-4)));\n  max-height: calc(100vh - var(--block-space-4));\n  overflow-y: auto;\n  padding: var(--block-space-1);\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel), var(--block-shadow-drop);\n}\n\n.menu[hidden] {\n  display: none;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  width: 100%;\n  min-height: var(--block-size-control-sm);\n  padding: var(--block-space-1) var(--block-space-2);\n  font: inherit;\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-medium);\n  text-align: left;\n  color: var(--block-text);\n  background: transparent;\n  border: var(--block-border-width-thin) solid transparent;\n  cursor: pointer;\n}\n\n.item:hover:not([aria-disabled]),\n.item:focus-visible {\n  background-color: var(--block-slot-hover);\n  border-color: var(--block-border);\n}\n\n.item:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: -3px;\n}\n\n.item[aria-disabled] {\n  color: var(--block-text-muted);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.item[data-danger] {\n  color: var(--block-redstone-light);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: 16px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.shortcut {\n  flex-shrink: 0;\n  margin-left: var(--block-space-3);\n  font-family: var(--block-font-mono);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.separator {\n  height: 4px;\n  margin: var(--block-space-1) 0;\n  background-color: var(--block-shadow-bevel-dark);\n  box-shadow: inset -2px -2px 0 var(--block-shadow-bevel-light);\n}\n"],"mappings":""}

package/dist/components/actions/BlockMenu/BlockMenu.types.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButtonSize, BlockButtonVariant } from "../BlockButton/BlockButton.types";
+export interface BlockMenuItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Keyboard shortcut hint shown on the right (display only). */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Redstone-colored destructive action. */
+    danger?: boolean;
+    onSelect?: () => void;
+    /** Text used for type-ahead when `label` is not a string. */
+    textValue?: string;
+}
+export interface BlockMenuSeparator {
+    type: "separator";
+    id?: string;
+}
+export type BlockMenuEntry = BlockMenuItem | BlockMenuSeparator;
+export interface BlockMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Trigger button text — also the menu's accessible name. */
+    label: string;
+    items: BlockMenuEntry[];
+    /** Called with the item id after any item is chosen. */
+    onSelect?: (id: string) => void;
+    /** Trigger material. @default "stone" */
+    variant?: BlockButtonVariant;
+    /** Trigger size. @default "md" */
+    size?: BlockButtonSize;
+    /** Icon before the trigger text, or the whole trigger when `iconOnly`. */
+    icon?: ReactNode;
+    /** Square icon trigger; `label` becomes its `aria-label`. */
+    iconOnly?: boolean;
+    /** Align the menu with the trigger's start or end edge. @default "start" */
+    align?: "start" | "end";
+    /** Open below or above the trigger. @default "bottom" */
+    placement?: "bottom" | "top";
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+//# sourceMappingURL=BlockMenu.types.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEhE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACtF,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,yCAAyC;IACzC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,yDAAyD;IACzD,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC"}

package/dist/components/actions/BlockMenu/BlockMenu.utils.d.ts

@@ -0,0 +1,10 @@
+import type { BlockMenuEntry, BlockMenuItem } from "./BlockMenu.types";
+export declare function isMenuItem(entry: BlockMenuEntry): entry is BlockMenuItem;
+/** Text an item answers to for type-ahead. */
+export declare function itemText(item: BlockMenuItem): string;
+/**
+ * Index of the next enabled item whose text starts with `char`, searching
+ * forward from the item after `from` and wrapping around.
+ */
+export declare function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number;
+//# sourceMappingURL=BlockMenu.utils.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvE,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,IAAI,aAAa,CAExE;AAED,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAGpD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAQzF"}

package/dist/components/actions/BlockMenu/BlockMenu.utils.js

@@ -0,0 +1,26 @@
+//#region src/components/actions/BlockMenu/BlockMenu.utils.ts
+function isMenuItem(entry) {
+	return !("type" in entry && entry.type === "separator");
+}
+/** Text an item answers to for type-ahead. */
+function itemText(item) {
+	if (item.textValue !== void 0) return item.textValue;
+	return typeof item.label === "string" || typeof item.label === "number" ? String(item.label) : "";
+}
+/**
+* Index of the next enabled item whose text starts with `char`, searching
+* forward from the item after `from` and wrapping around.
+*/
+function typeaheadIndex(items, from, char) {
+	const needle = char.toLowerCase();
+	for (let step = 1; step <= items.length; step += 1) {
+		const index = (from + step) % items.length;
+		const item = items[index];
+		if (item && !item.disabled && itemText(item).toLowerCase().startsWith(needle)) return index;
+	}
+	return -1;
+}
+//#endregion
+export { isMenuItem, itemText, typeaheadIndex };
+
+//# sourceMappingURL=BlockMenu.utils.js.map

package/dist/components/actions/BlockMenu/BlockMenu.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockMenu.utils.js","names":[],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"sourcesContent":["import type { BlockMenuEntry, BlockMenuItem } from \"./BlockMenu.types\";\n\nexport function isMenuItem(entry: BlockMenuEntry): entry is BlockMenuItem {\n  return !(\"type\" in entry && entry.type === \"separator\");\n}\n\n/** Text an item answers to for type-ahead. */\nexport function itemText(item: BlockMenuItem): string {\n  if (item.textValue !== undefined) return item.textValue;\n  return typeof item.label === \"string\" || typeof item.label === \"number\" ? String(item.label) : \"\";\n}\n\n/**\n * Index of the next enabled item whose text starts with `char`, searching\n * forward from the item after `from` and wrapping around.\n */\nexport function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number {\n  const needle = char.toLowerCase();\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (from + step) % items.length;\n    const item = items[index];\n    if (item && !item.disabled && itemText(item).toLowerCase().startsWith(needle)) return index;\n  }\n  return -1;\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAA+C;CACxE,OAAO,EAAE,UAAU,SAAS,MAAM,SAAS;AAC7C;;AAGA,SAAgB,SAAS,MAA6B;CACpD,IAAI,KAAK,cAAc,KAAA,GAAW,OAAO,KAAK;CAC9C,OAAO,OAAO,KAAK,UAAU,YAAY,OAAO,KAAK,UAAU,WAAW,OAAO,KAAK,KAAK,IAAI;AACjG;;;;;AAMA,SAAgB,eAAe,OAAwB,MAAc,MAAsB;CACzF,MAAM,SAAS,KAAK,YAAY;CAChC,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,MAAM,SAAS,OAAO,QAAQ,MAAM;EACpC,MAAM,OAAO,MAAM;EACnB,IAAI,QAAQ,CAAC,KAAK,YAAY,SAAS,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CACxF;CACA,OAAO;AACT"}

package/dist/components/actions/BlockMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockMenu } from "./BlockMenu";
+export type { BlockMenuEntry, BlockMenuItem, BlockMenuProps, BlockMenuSeparator, } from "./BlockMenu.types";
+//# sourceMappingURL=index.d.ts.map