@malilion/block-ui-react 0.1.0 → 0.2.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,GACnB,MAAM,mBAAmB,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from "./BlockButton";
 export * from "./IconButton";
+export * from "./BlockMenu";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/actions/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/actions/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}

package/dist/components/display/BlockTable/BlockTable.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement, type RefAttributes } from "react";
+import type { BlockTableProps } from "./BlockTable.types";
+/**
+ * Data table with a block frame, optional sorting (click a header to cycle
+ * ascending → descending → unsorted), striping and a horizontal scroll region.
+ */
+export declare const BlockTable: <T>(props: BlockTableProps<T> & RefAttributes<HTMLTableElement>) => ReactElement;
+//# sourceMappingURL=BlockTable.d.ts.map

package/dist/components/display/BlockTable/BlockTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AA+I1E;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAkC,CAAC,CAAC,EACzD,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,KACxD,YAAY,CAAC"}

package/dist/components/display/BlockTable/BlockTable.js

@@ -0,0 +1,92 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import BlockTable_module_default from "./BlockTable.module.js";
+import { nextSort, readField, sortRows } from "./BlockTable.utils.js";
+import { forwardRef, useId } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/BlockTable/BlockTable.tsx
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+function BlockTableInner({ columns, rows, getRowKey = (_row, index) => index, caption, hideCaption = false, sort, defaultSort = null, onSortChange, manualSort = false, striped = false, size = "md", stickyHeader = false, emptyState = "No data", wrapperClassName, className, ...rest }, ref) {
+	const captionId = useId();
+	const [activeSort, setSort] = useControllableState({
+		value: sort,
+		defaultValue: defaultSort,
+		onChange: onSortChange
+	});
+	const visibleRows = manualSort ? rows : sortRows(rows, columns, activeSort);
+	const hasWidths = columns.some((column) => column.width);
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		"aria-labelledby": captionId,
+		tabIndex: 0,
+		className: cx(BlockTable_module_default.wrapper, stickyHeader && BlockTable_module_default.sticky, wrapperClassName),
+		children: /* @__PURE__ */ jsxs("table", {
+			ref,
+			"data-size": size,
+			"data-striped": striped || void 0,
+			className: cx(BlockTable_module_default.table, className),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					id: captionId,
+					className: cx(BlockTable_module_default.caption, hideCaption && "block-visually-hidden"),
+					children: caption
+				}),
+				hasWidths ? /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", {
+					className: column.width ? BlockTable_module_default.col : void 0,
+					style: column.width ? { "--block-table-col-width": column.width } : void 0
+				}, column.key)) }) : null,
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+					const direction = activeSort?.key === column.key ? activeSort.direction : void 0;
+					return /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						"data-align": column.align ?? "start",
+						"aria-sort": column.sortable && direction ? ARIA_SORT[direction] : void 0,
+						className: BlockTable_module_default.headerCell,
+						children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: BlockTable_module_default.sortButton,
+							"data-direction": direction,
+							onClick: () => setSort(nextSort(activeSort, column.key)),
+							children: [/* @__PURE__ */ jsx("span", { children: column.header }), /* @__PURE__ */ jsx("span", {
+								className: BlockTable_module_default.sortIcon,
+								"aria-hidden": "true",
+								children: direction === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
+							})]
+						}) : column.header
+					}, column.key);
+				}) }) }),
+				/* @__PURE__ */ jsx("tbody", { children: visibleRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: columns.length,
+					className: BlockTable_module_default.empty,
+					children: emptyState
+				}) }) : visibleRows.map((row, index) => /* @__PURE__ */ jsx("tr", {
+					className: BlockTable_module_default.row,
+					children: columns.map((column) => {
+						const content = column.cell ? column.cell(row, index) : readField(row, column.key);
+						const Cell = column.rowHeader ? "th" : "td";
+						return /* @__PURE__ */ jsx(Cell, {
+							scope: column.rowHeader ? "row" : void 0,
+							"data-align": column.align ?? "start",
+							className: cx(BlockTable_module_default.cell, column.rowHeader && BlockTable_module_default.rowHeader),
+							children: content
+						}, column.key);
+					})
+				}, getRowKey(row, index))) })
+			]
+		})
+	});
+}
+/**
+* Data table with a block frame, optional sorting (click a header to cycle
+* ascending → descending → unsorted), striping and a horizontal scroll region.
+*/
+var BlockTable = forwardRef(BlockTableInner);
+//#endregion
+export { BlockTable };
+
+//# sourceMappingURL=BlockTable.js.map

package/dist/components/display/BlockTable/BlockTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.js","names":["styles"],"sources":["../../../../src/components/display/BlockTable/BlockTable.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useId,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type RefAttributes,\n} from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockTable.module.css\";\nimport type { BlockTableProps, BlockTableSort } from \"./BlockTable.types\";\nimport { nextSort, readField, sortRows } from \"./BlockTable.utils\";\n\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\n\nfunction BlockTableInner<T>(\n  {\n    columns,\n    rows,\n    getRowKey = (_row, index) => index,\n    caption,\n    hideCaption = false,\n    sort,\n    defaultSort = null,\n    onSortChange,\n    manualSort = false,\n    striped = false,\n    size = \"md\",\n    stickyHeader = false,\n    emptyState = \"No data\",\n    wrapperClassName,\n    className,\n    ...rest\n  }: BlockTableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  const captionId = useId();\n  const [activeSort, setSort] = useControllableState<BlockTableSort | null>({\n    value: sort,\n    defaultValue: defaultSort,\n    onChange: onSortChange,\n  });\n  const visibleRows = manualSort ? rows : sortRows(rows, columns, activeSort);\n  const hasWidths = columns.some((column) => column.width);\n\n  return (\n    <div\n      role=\"region\"\n      aria-labelledby={captionId}\n      // The wrapper scrolls horizontally on narrow screens, so keyboard users must be able to focus it.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n      className={cx(styles.wrapper, stickyHeader && styles.sticky, wrapperClassName)}\n    >\n      <table\n        ref={ref}\n        data-size={size}\n        data-striped={striped || undefined}\n        className={cx(styles.table, className)}\n        {...rest}\n      >\n        <caption\n          id={captionId}\n          className={cx(styles.caption, hideCaption && \"block-visually-hidden\")}\n        >\n          {caption}\n        </caption>\n        {hasWidths ? (\n          <colgroup>\n            {columns.map((column) => (\n              <col\n                key={column.key}\n                className={column.width ? styles.col : undefined}\n                style={\n                  column.width\n                    ? ({ \"--block-table-col-width\": column.width } as CSSProperties)\n                    : undefined\n                }\n              />\n            ))}\n          </colgroup>\n        ) : null}\n        <thead>\n          <tr>\n            {columns.map((column) => {\n              const direction = activeSort?.key === column.key ? activeSort.direction : undefined;\n              return (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  data-align={column.align ?? \"start\"}\n                  aria-sort={column.sortable && direction ? ARIA_SORT[direction] : undefined}\n                  className={styles.headerCell}\n                >\n                  {column.sortable ? (\n                    <button\n                      type=\"button\"\n                      className={styles.sortButton}\n                      data-direction={direction}\n                      onClick={() => setSort(nextSort(activeSort, column.key))}\n                    >\n                      <span>{column.header}</span>\n                      <span className={styles.sortIcon} aria-hidden=\"true\">\n                        {direction === \"desc\" ? (\n                          <ChevronDownIcon size={16} />\n                        ) : (\n                          <ChevronUpIcon size={16} />\n                        )}\n                      </span>\n                    </button>\n                  ) : (\n                    column.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {visibleRows.length === 0 ? (\n            <tr>\n              <td colSpan={columns.length} className={styles.empty}>\n                {emptyState}\n              </td>\n            </tr>\n          ) : (\n            visibleRows.map((row, index) => (\n              <tr key={getRowKey(row, index)} className={styles.row}>\n                {columns.map((column) => {\n                  const content = column.cell\n                    ? column.cell(row, index)\n                    : readField(row, column.key);\n                  const Cell = column.rowHeader ? \"th\" : \"td\";\n                  return (\n                    <Cell\n                      key={column.key}\n                      scope={column.rowHeader ? \"row\" : undefined}\n                      data-align={column.align ?? \"start\"}\n                      className={cx(styles.cell, column.rowHeader && styles.rowHeader)}\n                    >\n                      {content}\n                    </Cell>\n                  );\n                })}\n              </tr>\n            ))\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n/**\n * Data table with a block frame, optional sorting (click a header to cycle\n * ascending → descending → unsorted), striping and a horizontal scroll region.\n */\nexport const BlockTable = forwardRef(BlockTableInner) as <T>(\n  props: BlockTableProps<T> & RefAttributes<HTMLTableElement>,\n) => ReactElement;\n"],"mappings":"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"}

package/dist/components/display/BlockTable/BlockTable.module.js

@@ -0,0 +1,31 @@
+//#region src/components/display/BlockTable/BlockTable.module.css
+var wrapper = "block-wrapper-tQfa-";
+var table = "block-table-x1Qnx";
+var caption = "block-caption-T-Obe";
+var col = "block-col-L7kx6";
+var headerCell = "block-headerCell-LQKy8";
+var sticky = "block-sticky-M7fKZ";
+var cell = "block-cell-yLLKH";
+var rowHeader = "block-rowHeader-cYBI3";
+var row = "block-row-cNM95";
+var sortButton = "block-sortButton-Lr2ri";
+var sortIcon = "block-sortIcon-tm-Vg";
+var empty = "block-empty-B21lk";
+var BlockTable_module_default = {
+	wrapper,
+	table,
+	caption,
+	col,
+	headerCell,
+	sticky,
+	cell,
+	rowHeader,
+	row,
+	sortButton,
+	sortIcon,
+	empty
+};
+//#endregion
+export { caption, cell, col, BlockTable_module_default as default, empty, headerCell, row, rowHeader, sortButton, sortIcon, sticky, table, wrapper };
+
+//# sourceMappingURL=BlockTable.module.js.map

package/dist/components/display/BlockTable/BlockTable.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.module.js","names":[],"sources":["../../../../src/components/display/BlockTable/BlockTable.module.css"],"sourcesContent":[".wrapper {\n  max-width: 100%;\n  overflow-x: auto;\n  background-color: var(--block-surface);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n  scrollbar-width: thin;\n}\n\n.wrapper:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text);\n  font-variant-numeric: tabular-nums;\n}\n\n.caption {\n  padding: var(--block-space-2) var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-align: left;\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n  background-color: var(--block-surface-header);\n  border-bottom: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.col {\n  width: var(--block-table-col-width);\n}\n\n.headerCell {\n  padding: var(--block-space-2) var(--block-space-3);\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--block-text-muted);\n  background-color: var(--block-surface-alt);\n  border-bottom: var(--block-border-width) solid var(--block-border);\n}\n\n.sticky {\n  overflow: visible;\n}\n\n.sticky .headerCell {\n  position: sticky;\n  top: 0;\n  z-index: var(--block-z-sticky);\n}\n\n.cell {\n  padding: var(--block-space-2) var(--block-space-3);\n  border-bottom: var(--block-border-width-thin) solid var(--block-shadow-bevel-dark);\n  vertical-align: middle;\n}\n\n.table[data-size=\"sm\"] .headerCell,\n.table[data-size=\"sm\"] .cell {\n  padding: var(--block-space-1) var(--block-space-2);\n}\n\n.rowHeader {\n  font-weight: var(--block-font-weight-bold);\n  text-align: left;\n}\n\n.row:last-child .cell {\n  border-bottom: 0;\n}\n\n.table[data-striped] .row:nth-child(even) {\n  background-color: color-mix(in srgb, var(--block-surface-alt) 70%, transparent);\n}\n\n.row:hover {\n  background-color: var(--block-slot-hover);\n}\n\n.table [data-align=\"start\"] {\n  text-align: start;\n}\n\n.table [data-align=\"center\"] {\n  text-align: center;\n}\n\n.table [data-align=\"end\"] {\n  text-align: end;\n}\n\n.sortButton {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-1);\n  margin: calc(-1 * var(--block-space-1));\n  padding: var(--block-space-1);\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n  color: inherit;\n  background: none;\n  border: 0;\n  cursor: pointer;\n}\n\n.sortButton:hover,\n.sortButton[data-direction] {\n  color: var(--block-text);\n}\n\n.sortButton:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 0;\n}\n\n.sortIcon {\n  display: inline-flex;\n  opacity: 0.35;\n}\n\n.sortButton[data-direction] .sortIcon {\n  opacity: 1;\n}\n\n.empty {\n  padding: var(--block-space-6) var(--block-space-3);\n  text-align: center;\n  color: var(--block-text-muted);\n}\n"],"mappings":""}

package/dist/components/display/BlockTable/BlockTable.types.d.ts

@@ -0,0 +1,49 @@
+import type { Key, ReactNode, TableHTMLAttributes } from "react";
+export type BlockTableSortDirection = "asc" | "desc";
+export interface BlockTableSort {
+    key: string;
+    direction: BlockTableSortDirection;
+}
+export interface BlockTableColumn<T> {
+    /** Column id; also the default property read from each row. */
+    key: string;
+    header: ReactNode;
+    /** Custom cell content. Defaults to `row[key]`. */
+    cell?: (row: T, index: number) => ReactNode;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** CSS width, e.g. `"120px"` or `"20%"`. */
+    width?: string;
+    sortable?: boolean;
+    /** Value used for sorting. Defaults to `row[key]`. */
+    sortValue?: (row: T) => string | number | null | undefined;
+    /** Render this column's cells as row headers (`<th scope="row">`). */
+    rowHeader?: boolean;
+}
+export interface BlockTableProps<T> extends Omit<TableHTMLAttributes<HTMLTableElement>, "children"> {
+    columns: BlockTableColumn<T>[];
+    rows: T[];
+    /** Stable key for each row. @default the row index */
+    getRowKey?: (row: T, index: number) => Key;
+    /** Table caption — required as the table's accessible name. */
+    caption: ReactNode;
+    /** Keep the caption for screen readers only. */
+    hideCaption?: boolean;
+    /** Controlled sort; `null` means unsorted. */
+    sort?: BlockTableSort | null;
+    defaultSort?: BlockTableSort | null;
+    onSortChange?: (sort: BlockTableSort | null) => void;
+    /** Turn off built-in sorting (e.g. when rows are sorted on the server). */
+    manualSort?: boolean;
+    /** Alternate row shading. */
+    striped?: boolean;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Keep the header visible while the page scrolls. */
+    stickyHeader?: boolean;
+    /** Shown in place of rows when `rows` is empty. @default "No data" */
+    emptyState?: ReactNode;
+    /** Class for the scroll container around the table. */
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=BlockTable.types.d.ts.map

package/dist/components/display/BlockTable/BlockTable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTable.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/BlockTable/BlockTable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,uBAAuB,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC5C,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,CACX;IACC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,sDAAsD;IACtD,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IAC3C,+DAA+D;IAC/D,OAAO,EAAE,SAAS,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}