@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/overlay/DropdownMenuSubmenu.cjs

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const Icon = require("../data/Icon.cjs");
+const dropdownMenuContext = require("./dropdownMenuContext.cjs");
+const modalStack = require("./modalStack.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const MENU_ITEM_CLASS = "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50";
+const MENU_HEADER_CLASS = "select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground";
+function MenuItemIcon({
+  icon,
+  iconColor
+}) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-flex shrink-0",
+      style: iconColor ? { color: iconColor } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon } })
+    }
+  );
+}
+function MenuLeaf({ item }) {
+  const menu = react.useContext(dropdownMenuContext.MenuContext);
+  const tree = react$1.useFloatingTree();
+  const listItem = react$1.useListItem();
+  const isActive = listItem.index === menu.activeIndex;
+  const activate = () => {
+    if (item.disabled) return;
+    item.onSelect();
+    tree == null ? void 0 : tree.events.emit("click");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: listItem.ref,
+      type: "button",
+      role: "menuitem",
+      tabIndex: isActive ? 0 : -1,
+      disabled: item.disabled,
+      title: item.title,
+      className: MENU_ITEM_CLASS,
+      ...menu.getItemProps({
+        onClick: activate,
+        onFocus: () => menu.setHasFocusInside(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            activate();
+          }
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItemIcon, { icon: item.icon, iconColor: item.iconColor }),
+        item.label
+      ]
+    }
+  );
+}
+function MenuSubmenu({ item }) {
+  const parent = react.useContext(dropdownMenuContext.MenuContext);
+  const tree = react$1.useFloatingTree();
+  const nodeId = react$1.useFloatingNodeId();
+  const parentId = react$1.useFloatingParentNodeId();
+  const listItem = react$1.useListItem();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [activeIndex, setActiveIndex] = react.useState(null);
+  const [hasFocusInside, setHasFocusInside] = react.useState(false);
+  const elementsRef = react.useRef([]);
+  const floatingZ = modalStack.useFloatingZIndex();
+  const { refs, floatingStyles, context } = react$1.useFloating({
+    // nodeId is always defined inside the FloatingTree; guard for the type only.
+    ...nodeId ? { nodeId } : {},
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "right-start",
+    middleware: [
+      react$1.offset({ mainAxis: 0, alignmentAxis: -4 }),
+      react$1.flip({ padding: 8 }),
+      react$1.shift({ padding: 8 })
+    ],
+    whileElementsMounted: react$1.autoUpdate
+  });
+  const hover = react$1.useHover(context, {
+    delay: { open: 75 },
+    handleClose: react$1.safePolygon()
+  });
+  const click = react$1.useClick(context, { toggle: false });
+  const role = react$1.useRole(context, { role: "menu" });
+  const dismiss = react$1.useDismiss(context, { escapeKey: false, bubbles: true });
+  const listNav = react$1.useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: true,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([
+    hover,
+    click,
+    role,
+    dismiss,
+    listNav
+  ]);
+  modalStack.useEscapeLayer(isOpen, () => setIsOpen(false));
+  react.useEffect(() => {
+    if (!tree) return;
+    const closeAll = () => setIsOpen(false);
+    const closeSiblings = (event) => {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    };
+    tree.events.on("click", closeAll);
+    tree.events.on("menuopen", closeSiblings);
+    return () => {
+      tree.events.off("click", closeAll);
+      tree.events.off("menuopen", closeSiblings);
+    };
+  }, [tree, nodeId, parentId]);
+  react.useEffect(() => {
+    if (isOpen && tree) tree.events.emit("menuopen", { parentId, nodeId });
+  }, [isOpen, tree, nodeId, parentId]);
+  const isActive = listItem.index === parent.activeIndex;
+  const referenceRef = react$1.useMergeRefs([refs.setReference, listItem.ref]);
+  const ariaLabel = typeof item.label === "string" ? item.label : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.FloatingNode, { id: nodeId, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: referenceRef,
+        type: "button",
+        role: "menuitem",
+        tabIndex: isActive ? 0 : -1,
+        disabled: item.disabled,
+        title: item.title,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "data-focus-inside": hasFocusInside ? "" : void 0,
+        className: MENU_ITEM_CLASS,
+        ...parent.getItemProps(
+          // Merge the parent's roving-tabindex props with this trigger's own
+          // reference props (open on hover/click/ArrowRight). Both prop-getters
+          // return an opaque prop bag; the cast bridges the two getter
+          // signatures (getReferenceProps -> getItemProps parameter).
+          getReferenceProps({
+            onFocus: () => {
+              setHasFocusInside(false);
+              parent.setHasFocusInside(true);
+            }
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MenuItemIcon, { icon: item.icon, iconColor: item.iconColor }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "ml-auto shrink-0 opacity-60" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dropdownMenuContext.MenuContext.Provider,
+      {
+        value: {
+          getItemProps,
+          activeIndex,
+          setActiveIndex,
+          setHasFocusInside,
+          isOpen
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingList, { elementsRef, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.FloatingFocusManager,
+          {
+            context,
+            modal: false,
+            initialFocus: -1,
+            returnFocus: false,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: refs.setFloating,
+                role: "menu",
+                "aria-label": ariaLabel,
+                style: { ...floatingStyles, zIndex: floatingZ },
+                className: dropdownMenuContext.MENU_POPOVER_CLASS,
+                ...getFloatingProps(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { items: item.children ?? [] })
+              }
+            )
+          }
+        ) }) })
+      }
+    )
+  ] });
+}
+function MenuItemList({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item, index) => {
+    var _a;
+    const showHeader = item.group != null && item.group !== ((_a = items[index - 1]) == null ? void 0 : _a.group);
+    const hasChildren = !!item.children && item.children.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: MENU_HEADER_CLASS, children: item.group }),
+      hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(MenuSubmenu, { item }) : /* @__PURE__ */ jsxRuntime.jsx(MenuLeaf, { item })
+    ] }, index);
+  }) });
+}
+exports.MenuItemList = MenuItemList;
+//# sourceMappingURL=DropdownMenuSubmenu.cjs.map

package/dist/overlay/DropdownMenuSubmenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSubmenu.cjs","sources":["../../src/overlay/DropdownMenuSubmenu.tsx"],"sourcesContent":["import { Fragment, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  offset,\n  safePolygon,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListItem,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  type UseInteractionsReturn,\n} from \"@floating-ui/react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronRight } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\n\n// Shared item surfaces so a leaf renders identically in the root menu or a\n// flyout submenu.\nconst MENU_ITEM_CLASS =\n  \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\";\nconst MENU_HEADER_CLASS =\n  \"select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\";\n\nfunction MenuItemIcon({\n  icon,\n  iconColor,\n}: {\n  icon: string | StaticIconComponent | undefined;\n  iconColor: string | undefined;\n}) {\n  if (!icon) return null;\n  return (\n    <span\n      className=\"inline-flex shrink-0\"\n      style={iconColor ? { color: iconColor } : undefined}\n    >\n      <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />\n    </span>\n  );\n}\n\nfunction MenuLeaf({ item }: { item: DropdownMenuItem }) {\n  const menu = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const listItem = useListItem();\n  const isActive = listItem.index === menu.activeIndex;\n\n  const activate = () => {\n    if (item.disabled) return;\n    item.onSelect();\n    // A selection closes every open level; each menu subscribes to \"click\".\n    tree?.events.emit(\"click\");\n  };\n\n  return (\n    <button\n      ref={listItem.ref}\n      type=\"button\"\n      role=\"menuitem\"\n      tabIndex={isActive ? 0 : -1}\n      disabled={item.disabled}\n      title={item.title}\n      className={MENU_ITEM_CLASS}\n      {...menu.getItemProps({\n        onClick: activate,\n        onFocus: () => menu.setHasFocusInside(true),\n        onKeyDown: (event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            activate();\n          }\n        },\n      })}\n    >\n      <MenuItemIcon icon={item.icon} iconColor={item.iconColor} />\n      {item.label}\n    </button>\n  );\n}\n\nfunction MenuSubmenu({ item }: { item: DropdownMenuItem }) {\n  const parent = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const parentId = useFloatingParentNodeId();\n  const listItem = useListItem();\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [hasFocusInside, setHasFocusInside] = useState(false);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n\n  const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: \"right-start\",\n    middleware: [\n      offset({ mainAxis: 0, alignmentAxis: -4 }),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, {\n    delay: { open: 75 },\n    handleClose: safePolygon(),\n  });\n  // Hover opens the flyout for mouse users; click/tap also opens it (touch and\n  // keyboard) but never toggles it shut — leaving via safePolygon or selecting a\n  // leaf is what closes it.\n  const click = useClick(context, { toggle: false });\n  const role = useRole(context, { role: \"menu\" });\n  // Escape is owned by useEscapeLayer (below) so it dismisses one menu level at\n  // a time and cooperates with modals; useDismiss keeps outside-press dismissal.\n  const dismiss = useDismiss(context, { escapeKey: false, bubbles: true });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    nested: true,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    hover,\n    click,\n    role,\n    dismiss,\n    listNav,\n  ]);\n\n  useEscapeLayer(isOpen, () => setIsOpen(false));\n\n  useEffect(() => {\n    if (!tree) return;\n    const closeAll = () => setIsOpen(false);\n    const closeSiblings = (event: {\n      nodeId: string;\n      parentId: string | null;\n    }) => {\n      if (event.nodeId !== nodeId && event.parentId === parentId) {\n        setIsOpen(false);\n      }\n    };\n    tree.events.on(\"click\", closeAll);\n    tree.events.on(\"menuopen\", closeSiblings);\n    return () => {\n      tree.events.off(\"click\", closeAll);\n      tree.events.off(\"menuopen\", closeSiblings);\n    };\n  }, [tree, nodeId, parentId]);\n\n  useEffect(() => {\n    if (isOpen && tree) tree.events.emit(\"menuopen\", { parentId, nodeId });\n  }, [isOpen, tree, nodeId, parentId]);\n\n  const isActive = listItem.index === parent.activeIndex;\n  const referenceRef = useMergeRefs([refs.setReference, listItem.ref]);\n  const ariaLabel = typeof item.label === \"string\" ? item.label : undefined;\n\n  return (\n    <FloatingNode id={nodeId}>\n      <button\n        ref={referenceRef}\n        type=\"button\"\n        role=\"menuitem\"\n        tabIndex={isActive ? 0 : -1}\n        disabled={item.disabled}\n        title={item.title}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        data-focus-inside={hasFocusInside ? \"\" : undefined}\n        className={MENU_ITEM_CLASS}\n        {...parent.getItemProps(\n          // Merge the parent's roving-tabindex props with this trigger's own\n          // reference props (open on hover/click/ArrowRight). Both prop-getters\n          // return an opaque prop bag; the cast bridges the two getter\n          // signatures (getReferenceProps -> getItemProps parameter).\n          getReferenceProps({\n            onFocus: () => {\n              setHasFocusInside(false);\n              parent.setHasFocusInside(true);\n            },\n          }) as unknown as Parameters<UseInteractionsReturn[\"getItemProps\"]>[0],\n        )}\n      >\n        <MenuItemIcon icon={item.icon} iconColor={item.iconColor} />\n        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n        <Icon icon={UiChevronRight} className=\"ml-auto shrink-0 opacity-60\" />\n      </button>\n      <MenuContext.Provider\n        value={{\n          getItemProps,\n          activeIndex,\n          setActiveIndex,\n          setHasFocusInside,\n          isOpen,\n        }}\n      >\n        <FloatingList elementsRef={elementsRef}>\n          {isOpen && (\n            <FloatingPortal>\n              <FloatingFocusManager\n                context={context}\n                modal={false}\n                initialFocus={-1}\n                returnFocus={false}\n              >\n                <div\n                  ref={refs.setFloating}\n                  role=\"menu\"\n                  aria-label={ariaLabel}\n                  style={{ ...floatingStyles, zIndex: floatingZ }}\n                  className={MENU_POPOVER_CLASS}\n                  {...getFloatingProps()}\n                >\n                  <MenuItemList items={item.children ?? []} />\n                </div>\n              </FloatingFocusManager>\n            </FloatingPortal>\n          )}\n        </FloatingList>\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n}\n\n/**\n * Renders one menu level: a leaf `menuitem` button, or a submenu trigger when\n * the item has `children`. A group header renders above the first item of each\n * contiguous group (headers are not focusable, so keyboard navigation stays\n * dense over the interactive items). Must be rendered inside a `FloatingList`\n * whose `elementsRef` backs the enclosing menu's list navigation.\n */\nexport function MenuItemList({ items }: { items: DropdownMenuItem[] }) {\n  return (\n    <>\n      {items.map((item, index) => {\n        const showHeader =\n          item.group != null && item.group !== items[index - 1]?.group;\n        const hasChildren = !!item.children && item.children.length > 0;\n        return (\n          <Fragment key={index}>\n            {showHeader && (\n              <div role=\"presentation\" className={MENU_HEADER_CLASS}>\n                {item.group}\n              </div>\n            )}\n            {hasChildren ? (\n              <MenuSubmenu item={item} />\n            ) : (\n              <MenuLeaf item={item} />\n            )}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["jsx","Icon","useContext","MenuContext","useFloatingTree","useListItem","jsxs","useFloatingNodeId","useFloatingParentNodeId","useState","useRef","useFloatingZIndex","useFloating","offset","flip","shift","autoUpdate","useHover","safePolygon","useClick","useRole","useDismiss","useListNavigation","useInteractions","useEscapeLayer","useEffect","useMergeRefs","FloatingNode","UiChevronRight","FloatingList","FloatingPortal","FloatingFocusManager","MENU_POPOVER_CLASS","Fragment"],"mappings":"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"}

package/dist/overlay/DropdownMenuSubmenu.d.ts

@@ -0,0 +1,12 @@
+import { DropdownMenuItem } from './DropdownMenu';
+/**
+ * Renders one menu level: a leaf `menuitem` button, or a submenu trigger when
+ * the item has `children`. A group header renders above the first item of each
+ * contiguous group (headers are not focusable, so keyboard navigation stays
+ * dense over the interactive items). Must be rendered inside a `FloatingList`
+ * whose `elementsRef` backs the enclosing menu's list navigation.
+ */
+export declare function MenuItemList({ items }: {
+    items: DropdownMenuItem[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownMenuSubmenu.d.ts.map

package/dist/overlay/DropdownMenuSubmenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSubmenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenuSubmenu.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAwNvD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,2CAwBpE"}

package/dist/overlay/DropdownMenuSubmenu.js

@@ -0,0 +1,210 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useContext, useState, useRef, useEffect } from "react";
+import { useFloatingTree, useFloatingNodeId, useFloatingParentNodeId, useListItem, useFloating, autoUpdate, offset, flip, shift, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useInteractions, useMergeRefs, FloatingNode, FloatingList, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
+import { Icon } from "../data/Icon.js";
+import { MenuContext, MENU_POPOVER_CLASS } from "./dropdownMenuContext.js";
+import { useFloatingZIndex, useEscapeLayer } from "./modalStack.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
+const MENU_ITEM_CLASS = "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50";
+const MENU_HEADER_CLASS = "select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground";
+function MenuItemIcon({
+  icon,
+  iconColor
+}) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex shrink-0",
+      style: iconColor ? { color: iconColor } : void 0,
+      children: /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon } })
+    }
+  );
+}
+function MenuLeaf({ item }) {
+  const menu = useContext(MenuContext);
+  const tree = useFloatingTree();
+  const listItem = useListItem();
+  const isActive = listItem.index === menu.activeIndex;
+  const activate = () => {
+    if (item.disabled) return;
+    item.onSelect();
+    tree == null ? void 0 : tree.events.emit("click");
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: listItem.ref,
+      type: "button",
+      role: "menuitem",
+      tabIndex: isActive ? 0 : -1,
+      disabled: item.disabled,
+      title: item.title,
+      className: MENU_ITEM_CLASS,
+      ...menu.getItemProps({
+        onClick: activate,
+        onFocus: () => menu.setHasFocusInside(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            activate();
+          }
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(MenuItemIcon, { icon: item.icon, iconColor: item.iconColor }),
+        item.label
+      ]
+    }
+  );
+}
+function MenuSubmenu({ item }) {
+  const parent = useContext(MenuContext);
+  const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
+  const parentId = useFloatingParentNodeId();
+  const listItem = useListItem();
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [hasFocusInside, setHasFocusInside] = useState(false);
+  const elementsRef = useRef([]);
+  const floatingZ = useFloatingZIndex();
+  const { refs, floatingStyles, context } = useFloating({
+    // nodeId is always defined inside the FloatingTree; guard for the type only.
+    ...nodeId ? { nodeId } : {},
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "right-start",
+    middleware: [
+      offset({ mainAxis: 0, alignmentAxis: -4 }),
+      flip({ padding: 8 }),
+      shift({ padding: 8 })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  const hover = useHover(context, {
+    delay: { open: 75 },
+    handleClose: safePolygon()
+  });
+  const click = useClick(context, { toggle: false });
+  const role = useRole(context, { role: "menu" });
+  const dismiss = useDismiss(context, { escapeKey: false, bubbles: true });
+  const listNav = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: true,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    hover,
+    click,
+    role,
+    dismiss,
+    listNav
+  ]);
+  useEscapeLayer(isOpen, () => setIsOpen(false));
+  useEffect(() => {
+    if (!tree) return;
+    const closeAll = () => setIsOpen(false);
+    const closeSiblings = (event) => {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    };
+    tree.events.on("click", closeAll);
+    tree.events.on("menuopen", closeSiblings);
+    return () => {
+      tree.events.off("click", closeAll);
+      tree.events.off("menuopen", closeSiblings);
+    };
+  }, [tree, nodeId, parentId]);
+  useEffect(() => {
+    if (isOpen && tree) tree.events.emit("menuopen", { parentId, nodeId });
+  }, [isOpen, tree, nodeId, parentId]);
+  const isActive = listItem.index === parent.activeIndex;
+  const referenceRef = useMergeRefs([refs.setReference, listItem.ref]);
+  const ariaLabel = typeof item.label === "string" ? item.label : void 0;
+  return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: referenceRef,
+        type: "button",
+        role: "menuitem",
+        tabIndex: isActive ? 0 : -1,
+        disabled: item.disabled,
+        title: item.title,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "data-focus-inside": hasFocusInside ? "" : void 0,
+        className: MENU_ITEM_CLASS,
+        ...parent.getItemProps(
+          // Merge the parent's roving-tabindex props with this trigger's own
+          // reference props (open on hover/click/ArrowRight). Both prop-getters
+          // return an opaque prop bag; the cast bridges the two getter
+          // signatures (getReferenceProps -> getItemProps parameter).
+          getReferenceProps({
+            onFocus: () => {
+              setHasFocusInside(false);
+              parent.setHasFocusInside(true);
+            }
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsx(MenuItemIcon, { icon: item.icon, iconColor: item.iconColor }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ jsx(Icon, { icon: UiChevronRight, className: "ml-auto shrink-0 opacity-60" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MenuContext.Provider,
+      {
+        value: {
+          getItemProps,
+          activeIndex,
+          setActiveIndex,
+          setHasFocusInside,
+          isOpen
+        },
+        children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+          FloatingFocusManager,
+          {
+            context,
+            modal: false,
+            initialFocus: -1,
+            returnFocus: false,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: refs.setFloating,
+                role: "menu",
+                "aria-label": ariaLabel,
+                style: { ...floatingStyles, zIndex: floatingZ },
+                className: MENU_POPOVER_CLASS,
+                ...getFloatingProps(),
+                children: /* @__PURE__ */ jsx(MenuItemList, { items: item.children ?? [] })
+              }
+            )
+          }
+        ) }) })
+      }
+    )
+  ] });
+}
+function MenuItemList({ items }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item, index) => {
+    var _a;
+    const showHeader = item.group != null && item.group !== ((_a = items[index - 1]) == null ? void 0 : _a.group);
+    const hasChildren = !!item.children && item.children.length > 0;
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      showHeader && /* @__PURE__ */ jsx("div", { role: "presentation", className: MENU_HEADER_CLASS, children: item.group }),
+      hasChildren ? /* @__PURE__ */ jsx(MenuSubmenu, { item }) : /* @__PURE__ */ jsx(MenuLeaf, { item })
+    ] }, index);
+  }) });
+}
+export {
+  MenuItemList
+};
+//# sourceMappingURL=DropdownMenuSubmenu.js.map

package/dist/overlay/DropdownMenuSubmenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSubmenu.js","sources":["../../src/overlay/DropdownMenuSubmenu.tsx"],"sourcesContent":["import { Fragment, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  offset,\n  safePolygon,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListItem,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  type UseInteractionsReturn,\n} from \"@floating-ui/react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronRight } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\n\n// Shared item surfaces so a leaf renders identically in the root menu or a\n// flyout submenu.\nconst MENU_ITEM_CLASS =\n  \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\";\nconst MENU_HEADER_CLASS =\n  \"select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\";\n\nfunction MenuItemIcon({\n  icon,\n  iconColor,\n}: {\n  icon: string | StaticIconComponent | undefined;\n  iconColor: string | undefined;\n}) {\n  if (!icon) return null;\n  return (\n    <span\n      className=\"inline-flex shrink-0\"\n      style={iconColor ? { color: iconColor } : undefined}\n    >\n      <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />\n    </span>\n  );\n}\n\nfunction MenuLeaf({ item }: { item: DropdownMenuItem }) {\n  const menu = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const listItem = useListItem();\n  const isActive = listItem.index === menu.activeIndex;\n\n  const activate = () => {\n    if (item.disabled) return;\n    item.onSelect();\n    // A selection closes every open level; each menu subscribes to \"click\".\n    tree?.events.emit(\"click\");\n  };\n\n  return (\n    <button\n      ref={listItem.ref}\n      type=\"button\"\n      role=\"menuitem\"\n      tabIndex={isActive ? 0 : -1}\n      disabled={item.disabled}\n      title={item.title}\n      className={MENU_ITEM_CLASS}\n      {...menu.getItemProps({\n        onClick: activate,\n        onFocus: () => menu.setHasFocusInside(true),\n        onKeyDown: (event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            activate();\n          }\n        },\n      })}\n    >\n      <MenuItemIcon icon={item.icon} iconColor={item.iconColor} />\n      {item.label}\n    </button>\n  );\n}\n\nfunction MenuSubmenu({ item }: { item: DropdownMenuItem }) {\n  const parent = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const parentId = useFloatingParentNodeId();\n  const listItem = useListItem();\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [hasFocusInside, setHasFocusInside] = useState(false);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n\n  const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: \"right-start\",\n    middleware: [\n      offset({ mainAxis: 0, alignmentAxis: -4 }),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, {\n    delay: { open: 75 },\n    handleClose: safePolygon(),\n  });\n  // Hover opens the flyout for mouse users; click/tap also opens it (touch and\n  // keyboard) but never toggles it shut — leaving via safePolygon or selecting a\n  // leaf is what closes it.\n  const click = useClick(context, { toggle: false });\n  const role = useRole(context, { role: \"menu\" });\n  // Escape is owned by useEscapeLayer (below) so it dismisses one menu level at\n  // a time and cooperates with modals; useDismiss keeps outside-press dismissal.\n  const dismiss = useDismiss(context, { escapeKey: false, bubbles: true });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    nested: true,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    hover,\n    click,\n    role,\n    dismiss,\n    listNav,\n  ]);\n\n  useEscapeLayer(isOpen, () => setIsOpen(false));\n\n  useEffect(() => {\n    if (!tree) return;\n    const closeAll = () => setIsOpen(false);\n    const closeSiblings = (event: {\n      nodeId: string;\n      parentId: string | null;\n    }) => {\n      if (event.nodeId !== nodeId && event.parentId === parentId) {\n        setIsOpen(false);\n      }\n    };\n    tree.events.on(\"click\", closeAll);\n    tree.events.on(\"menuopen\", closeSiblings);\n    return () => {\n      tree.events.off(\"click\", closeAll);\n      tree.events.off(\"menuopen\", closeSiblings);\n    };\n  }, [tree, nodeId, parentId]);\n\n  useEffect(() => {\n    if (isOpen && tree) tree.events.emit(\"menuopen\", { parentId, nodeId });\n  }, [isOpen, tree, nodeId, parentId]);\n\n  const isActive = listItem.index === parent.activeIndex;\n  const referenceRef = useMergeRefs([refs.setReference, listItem.ref]);\n  const ariaLabel = typeof item.label === \"string\" ? item.label : undefined;\n\n  return (\n    <FloatingNode id={nodeId}>\n      <button\n        ref={referenceRef}\n        type=\"button\"\n        role=\"menuitem\"\n        tabIndex={isActive ? 0 : -1}\n        disabled={item.disabled}\n        title={item.title}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        data-focus-inside={hasFocusInside ? \"\" : undefined}\n        className={MENU_ITEM_CLASS}\n        {...parent.getItemProps(\n          // Merge the parent's roving-tabindex props with this trigger's own\n          // reference props (open on hover/click/ArrowRight). Both prop-getters\n          // return an opaque prop bag; the cast bridges the two getter\n          // signatures (getReferenceProps -> getItemProps parameter).\n          getReferenceProps({\n            onFocus: () => {\n              setHasFocusInside(false);\n              parent.setHasFocusInside(true);\n            },\n          }) as unknown as Parameters<UseInteractionsReturn[\"getItemProps\"]>[0],\n        )}\n      >\n        <MenuItemIcon icon={item.icon} iconColor={item.iconColor} />\n        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n        <Icon icon={UiChevronRight} className=\"ml-auto shrink-0 opacity-60\" />\n      </button>\n      <MenuContext.Provider\n        value={{\n          getItemProps,\n          activeIndex,\n          setActiveIndex,\n          setHasFocusInside,\n          isOpen,\n        }}\n      >\n        <FloatingList elementsRef={elementsRef}>\n          {isOpen && (\n            <FloatingPortal>\n              <FloatingFocusManager\n                context={context}\n                modal={false}\n                initialFocus={-1}\n                returnFocus={false}\n              >\n                <div\n                  ref={refs.setFloating}\n                  role=\"menu\"\n                  aria-label={ariaLabel}\n                  style={{ ...floatingStyles, zIndex: floatingZ }}\n                  className={MENU_POPOVER_CLASS}\n                  {...getFloatingProps()}\n                >\n                  <MenuItemList items={item.children ?? []} />\n                </div>\n              </FloatingFocusManager>\n            </FloatingPortal>\n          )}\n        </FloatingList>\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n}\n\n/**\n * Renders one menu level: a leaf `menuitem` button, or a submenu trigger when\n * the item has `children`. A group header renders above the first item of each\n * contiguous group (headers are not focusable, so keyboard navigation stays\n * dense over the interactive items). Must be rendered inside a `FloatingList`\n * whose `elementsRef` backs the enclosing menu's list navigation.\n */\nexport function MenuItemList({ items }: { items: DropdownMenuItem[] }) {\n  return (\n    <>\n      {items.map((item, index) => {\n        const showHeader =\n          item.group != null && item.group !== items[index - 1]?.group;\n        const hasChildren = !!item.children && item.children.length > 0;\n        return (\n          <Fragment key={index}>\n            {showHeader && (\n              <div role=\"presentation\" className={MENU_HEADER_CLASS}>\n                {item.group}\n              </div>\n            )}\n            {hasChildren ? (\n              <MenuSubmenu item={item} />\n            ) : (\n              <MenuLeaf item={item} />\n            )}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/overlay/Modal.cjs

@@ -15,6 +15,7 @@ const sizeClass = {
   md: "max-w-md",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
+  "2xl": "max-w-6xl",
   full: "max-w-[95vw]"
 };
 const DEFAULT_CONFIRM = {
@@ -37,6 +38,7 @@ function Modal({
   className,
   headerSlot,
   footer,
+  scrollBody = true,
   children
 }) {
   const dialogRef = react.useRef(null);
@@ -132,8 +134,18 @@ function Modal({
               ] }),
               subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-density-2", children: subtitle }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto px-density-4 py-density-3", children }),
-            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-4 py-density-3 border-t border-border", children: footer }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-slot": "modal-body",
+                className: utils.cn(
+                  "flex-1 px-density-4 py-density-3",
+                  scrollBody ? "overflow-auto" : "flex min-h-0 flex-col overflow-hidden"
+                ),
+                children
+              }
+            ),
+            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "modal-footer", className: "px-density-4 py-density-3 border-t border-border", children: footer }),
             confirming && /* @__PURE__ */ jsxRuntime.jsx(
               ConfirmClosePrompt,
               {

package/dist/overlay/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  full: \"max-w-[95vw]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEscapeLayer(\n    open,\n    () => {\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    },\n    closeOnEsc,\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Sits in the modal band of the centralized z-index scale; +depth keeps\n      // nested modals above their parent. Floating content (dropdowns, tooltips)\n      // computes its z relative to this via useFloatingZIndex so it clears the\n      // modal instead of rendering behind it.\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative flex w-full flex-col rounded-lg border border-border bg-background shadow-xl\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        // Inline maxHeight (not an arbitrary Tailwind class) so the panel stays\n        // viewport-bounded even when a consumer's Tailwind build can't generate\n        // the dvh utility — e.g. www aliases clicky-ui to source but scans the\n        // published dist. When expanded, fill the viewport.\n        style={{\n          maxHeight: \"calc(100dvh - 2rem)\",\n          ...(expanded ? { height: \"calc(100dvh - 2rem)\" } : {}),\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\" ? createPortal(overlay, document.body) : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","useEscapeLayer","_a","jsx","cn","zIndex","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","createPortal","Button"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /**\n   * Whether the body scrolls its overflow. Default `true`. Set `false` when the\n   * body owns a single fill-height child that scrolls internally (e.g. a\n   * DataTable with a sticky header): the body becomes a non-scrolling flex\n   * column, so only that child's own scroll region moves.\n   */\n  scrollBody?: boolean;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  \"2xl\": \"max-w-6xl\",\n  full: \"max-w-[95vw]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  scrollBody = true,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEscapeLayer(\n    open,\n    () => {\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    },\n    closeOnEsc,\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Sits in the modal band of the centralized z-index scale; +depth keeps\n      // nested modals above their parent. Floating content (dropdowns, tooltips)\n      // computes its z relative to this via useFloatingZIndex so it clears the\n      // modal instead of rendering behind it.\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative flex w-full flex-col rounded-lg border border-border bg-background shadow-xl\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        // Inline maxHeight (not an arbitrary Tailwind class) so the panel stays\n        // viewport-bounded even when a consumer's Tailwind build can't generate\n        // the dvh utility — e.g. www aliases clicky-ui to source but scans the\n        // published dist. When expanded, fill the viewport.\n        style={{\n          maxHeight: \"calc(100dvh - 2rem)\",\n          ...(expanded ? { height: \"calc(100dvh - 2rem)\" } : {}),\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={\n                    expanded ? \"Restore size\" : \"Expand to fullscreen\"\n                  }\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div\n          data-slot=\"modal-body\"\n          className={cn(\n            \"flex-1 px-density-4 py-density-3\",\n            scrollBody\n              ? \"overflow-auto\"\n              : \"flex min-h-0 flex-col overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div data-slot=\"modal-footer\" className=\"px-density-4 py-density-3 border-t border-border\">\n            {footer}\n          </div>\n        )}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={\n              confirmClose === true\n                ? DEFAULT_CONFIRM\n                : { ...DEFAULT_CONFIRM, ...confirmClose }\n            }\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\"\n    ? createPortal(overlay, document.body)\n    : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={\n        typeof options.title === \"string\" ? options.title : \"Confirm close\"\n      }\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">\n          {options.message}\n        </p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","useEscapeLayer","_a","jsx","cn","zIndex","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","createPortal","Button"],"mappings":";;;;;;;;;;;;AAsEA,MAAM,YAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,kBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAAe;AACb,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAC7C,QAAM,EAAE,MAAA,IAAUC,WAAAA,cAAc,IAAI;AACpC,QAAM,CAAC,UAAU,WAAW,IAAIC,MAAAA,SAAS,KAAK;AAG9C,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAS,KAAK;AAIlD,QAAM,eAAe,MAAM;AACzB,QAAI,4BAA4B,IAAI;AAAA,QAC/B,SAAA;AAAA,EACP;AAEAC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,kBAAY,KAAK;AACjB,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAITA,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,aAAc,eAAc,KAAK;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjBC,aAAAA;AAAAA,IACE;AAAA,IACA,MAAM;AAEJ,UAAI,0BAA0B,KAAK;AAAA,UAC9B,cAAA;AAAA,IACP;AAAA,IACA;AAAA,EAAA;AAGFD,QAAAA,UAAU,MAAM;;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,SAAS;AACtB,oBAAU,YAAV,mBAAmB;AACnB,WAAO,MAAA;;AAAM,cAAAE,MAAA,6BAAM,UAAN,gBAAAA,IAAA;AAAA;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,UACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA;AAAA,QAEA,UAAU,IAAI,gBAAgB;AAAA,MAAA;AAAA,MAMhC,OAAO,EAAE,QAAQC,OAAAA,OAAO,QAAQ,QAAQA,OAAAA,OAAO,UAAA;AAAA,MAC/C,SAAS,kBAAkB,eAAe;AAAA,MAC1C,MAAK;AAAA,MAEL,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAW;AAAA,UACX,cAAY,OAAO,UAAU,WAAW,QAAQ;AAAA,UAChD,WAAWF,MAAAA;AAAAA,YACT;AAAA,YACA,WAAW,UAAU,OAAO,UAAU,IAAI;AAAA,YAC1C;AAAA,UAAA;AAAA,UAMF,OAAO;AAAA,YACL,WAAW;AAAA,YACX,GAAI,WAAW,EAAE,QAAQ,0BAA0B,CAAA;AAAA,UAAC;AAAA,UAEtD,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEhB,UAAA;AAAA,aAAA,SAAS,YAAY,cAAc,cAAc,CAAC,cAClDE,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,cAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,gBAAA,QACCH,2BAAAA,IAAC,QAAG,WAAU,gCAAgC,iBAAM,IAEpDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,SAAA,CAAS;AAAA,gBAE1B;AAAA,gBACA,cACCA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,oBACpC,cACE,WAAW,iBAAiB;AAAA,oBAE9B,WAAU;AAAA,oBAEV,UAAAA,2BAAAA,IAACI,WAAA,EAAK,MAAM,WAAWC,aAAAA,qBAAqBC,0BAAA,CAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAG7D,CAAC,aACAN,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAW;AAAA,oBACX,WAAU;AAAA,oBAEV,UAAAA,2BAAAA,IAACI,KAAAA,MAAA,EAAK,MAAMG,QAAAA,QAAA,CAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACvB,GAEJ;AAAA,cACC,WAAWP,2BAAAA,IAAC,OAAA,EAAI,WAAU,gBAAgB,oBAAS,IAAS;AAAA,YAAA,GAC/D;AAAA,YAEFA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,aAAU;AAAA,gBACV,WAAWC,MAAAA;AAAAA,kBACT;AAAA,kBACA,aACI,kBACA;AAAA,gBAAA;AAAA,gBAGL;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,UACCD,2BAAAA,IAAC,OAAA,EAAI,aAAU,gBAAe,WAAU,oDACrC,UAAA,QACH;AAAA,YAED,cACCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SACE,iBAAiB,OACb,kBACA,EAAE,GAAG,iBAAiB,GAAG,aAAA;AAAA,gBAE/B,WAAW,MAAM;AACf,gCAAc,KAAK;AACnB,0BAAA;AAAA,gBACF;AAAA,gBACA,UAAU,MAAM,cAAc,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAQJ,SAAO,OAAO,aAAa,cACvBQ,SAAAA,aAAa,SAAS,SAAS,IAAI,IACnC;AACN;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACER,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cACE,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ;AAAA,MAEtD,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,MAElB,UAAAG,2BAAAA,KAAC,OAAA,EAAI,WAAU,uFACb,UAAA;AAAA,QAAAH,2BAAAA,IAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,QAAQ,OAAM;AAAA,QACrDA,2BAAAA,IAAC,KAAA,EAAE,WAAU,8CACV,kBAAQ,SACX;AAAA,QACAG,2BAAAA,KAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,UAAAH,2BAAAA,IAACS,OAAAA,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,UACxC,kBAAQ,YAAA,CACX;AAAA,UACAT,2BAAAA,IAACS,OAAAA,UAAO,SAAQ,eAAc,MAAK,MAAK,SAAS,WAC9C,UAAA,QAAQ,aAAA,CACX;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/overlay/Modal.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 /** Copy for the discard-confirmation prompt shown before a guarded close. */
 export type ConfirmCloseOptions = {
     /** Heading of the confirmation prompt. */
@@ -47,8 +47,15 @@ export type ModalProps = {
     headerSlot?: ReactNode;
     /** Footer content pinned below the scrollable body. */
     footer?: ReactNode;
+    /**
+     * Whether the body scrolls its overflow. Default `true`. Set `false` when the
+     * body owns a single fill-height child that scrolls internally (e.g. a
+     * DataTable with a sticky header): the body becomes a non-scrolling flex
+     * column, so only that child's own scroll region moves.
+     */
+    scrollBody?: boolean;
     /** Modal body content. */
     children: ReactNode;
 };
-export declare function Modal({ open, onClose, confirmClose, title, subtitle, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, children, }: ModalProps): import('react').ReactPortal | null;
+export declare function Modal({ open, onClose, confirmClose, title, subtitle, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, scrollBody, children, }: ModalProps): import('react').ReactPortal | null;
 //# sourceMappingURL=Modal.d.ts.map