@a13y/react 0.1.0

package/dist/patterns/index.js

@@ -0,0 +1,1170 @@
+import { createContext, useContext, useState, useEffect, useRef, useCallback, useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { announce } from '@a13y/core/runtime/announce';
+
+var useFocusTrap = (props) => {
+  const { isActive, onEscape, restoreFocus = true, autoFocus = true } = props;
+  const trapRef = useRef(null);
+  const focusTrapRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  useEffect(() => {
+    if (!isActive || !trapRef.current) {
+      return;
+    }
+    if (restoreFocus) {
+      previousFocusRef.current = document.activeElement;
+    }
+    import('@a13y/core/runtime/focus').then(({ createFocusTrap }) => {
+      if (!trapRef.current) {
+        return;
+      }
+      const options = {
+        returnFocus: false,
+        onEscape
+      };
+      if (autoFocus) {
+        options.initialFocus = void 0;
+      }
+      const trap = createFocusTrap(trapRef.current, options);
+      trap.activate();
+      focusTrapRef.current = trap;
+      {
+        import('@a13y/devtools/runtime/validators').then(({ focusValidator }) => {
+          if (trapRef.current) {
+            focusValidator.validateFocusTrap(trapRef.current, true);
+          }
+        });
+      }
+    });
+    return () => {
+      if (focusTrapRef.current) {
+        focusTrapRef.current.deactivate();
+        focusTrapRef.current = null;
+      }
+      if (restoreFocus && previousFocusRef.current) {
+        previousFocusRef.current.focus();
+        {
+          import('@a13y/devtools/runtime/validators').then(({ focusValidator }) => {
+            if (previousFocusRef.current) {
+              focusValidator.expectFocusRestoration(
+                previousFocusRef.current,
+                "focus trap deactivation"
+              );
+            }
+          });
+        }
+      }
+    };
+  }, [isActive, onEscape, restoreFocus, autoFocus]);
+  return {
+    trapRef
+  };
+};
+
+// src/hooks/use-accessible-dialog.ts
+var useAccessibleDialog = (props) => {
+  const {
+    isOpen,
+    onClose,
+    title,
+    description,
+    role = "dialog",
+    isModal = true,
+    closeOnBackdropClick = true
+  } = props;
+  {
+    if (!title || title.trim().length === 0) {
+      throw new Error(
+        '@a13y/react [useAccessibleDialog]: "title" prop is required for accessibility'
+      );
+    }
+  }
+  const dialogRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const { trapRef } = useFocusTrap({
+    isActive: isOpen,
+    onEscape: onClose,
+    restoreFocus: true,
+    autoFocus: true
+  });
+  useEffect(() => {
+    if (dialogRef.current && trapRef.current !== dialogRef.current) {
+      trapRef.current = dialogRef.current;
+    }
+  }, [trapRef]);
+  useEffect(() => {
+    if (!isOpen || !isModal) {
+      return;
+    }
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen, isModal]);
+  useEffect(() => {
+    if (isOpen) {
+      import('@a13y/devtools/runtime/invariants').then(
+        ({ assertHasAccessibleName, assertValidAriaAttributes }) => {
+          if (dialogRef.current) {
+            assertHasAccessibleName(dialogRef.current, "useAccessibleDialog");
+            assertValidAriaAttributes(dialogRef.current);
+          }
+        }
+      );
+    }
+  }, [isOpen]);
+  const dialogProps = {
+    ref: dialogRef,
+    role,
+    "aria-labelledby": titleId,
+    "aria-describedby": description ? descriptionId : void 0,
+    "aria-modal": isModal,
+    tabIndex: -1
+  };
+  const titleProps = {
+    id: titleId
+  };
+  const descriptionProps = description ? { id: descriptionId } : null;
+  const backdropProps = closeOnBackdropClick && isModal ? {
+    onClick: onClose,
+    "aria-hidden": true
+  } : null;
+  return {
+    dialogProps,
+    titleProps,
+    descriptionProps,
+    backdropProps,
+    close: onClose
+  };
+};
+var AccessibleDialog = (props) => {
+  const {
+    isOpen,
+    onClose,
+    title,
+    children,
+    description,
+    role = "dialog",
+    showCloseButton = true,
+    className = "",
+    backdropClassName = ""
+  } = props;
+  const { dialogProps, titleProps, descriptionProps, backdropProps, close } = useAccessibleDialog({
+    isOpen,
+    onClose,
+    title,
+    description,
+    role,
+    isModal: true,
+    closeOnBackdropClick: true
+  });
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    backdropProps && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...backdropProps,
+        className: backdropClassName,
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 50
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogProps.ref,
+        role: dialogProps.role,
+        "aria-labelledby": dialogProps["aria-labelledby"],
+        "aria-describedby": dialogProps["aria-describedby"],
+        "aria-modal": dialogProps["aria-modal"],
+        tabIndex: dialogProps.tabIndex,
+        className,
+        style: {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          backgroundColor: "white",
+          borderRadius: "0.5rem",
+          boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+          padding: "1.5rem",
+          maxWidth: "32rem",
+          width: "90vw",
+          maxHeight: "90vh",
+          overflow: "auto",
+          zIndex: 51
+        },
+        children: [
+          showCloseButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              "aria-label": "Close dialog",
+              style: {
+                position: "absolute",
+                top: "1rem",
+                right: "1rem",
+                padding: "0.5rem",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                fontSize: "1.25rem",
+                lineHeight: 1,
+                color: "#6b7280"
+              },
+              children: "\u2715"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              ...titleProps,
+              style: {
+                fontSize: "1.25rem",
+                fontWeight: 600,
+                marginBottom: description ? "0.5rem" : "1rem",
+                paddingRight: showCloseButton ? "2rem" : 0
+              },
+              children: title
+            }
+          ),
+          descriptionProps && description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...descriptionProps,
+              style: {
+                fontSize: "0.875rem",
+                color: "#6b7280",
+                marginBottom: "1rem"
+              },
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { children })
+        ]
+      }
+    )
+  ] });
+};
+var DialogStackContext = createContext(null);
+var useDialogStack = () => {
+  const context = useContext(DialogStackContext);
+  if (!context) {
+    throw new Error("useDialogStack must be used within DialogStackProvider");
+  }
+  return context;
+};
+var DialogStackProvider = (props) => {
+  const { children, baseZIndex = 1e3, zIndexIncrement = 10 } = props;
+  const [stack, setStack] = useState([]);
+  const push = (dialog) => {
+    const zIndex = baseZIndex + stack.length * zIndexIncrement;
+    setStack((prev) => [...prev, { ...dialog, zIndex }]);
+  };
+  const pop = () => {
+    setStack((prev) => {
+      const newStack = [...prev];
+      const dialog = newStack.pop();
+      dialog?.onClose();
+      return newStack;
+    });
+  };
+  const close = (id) => {
+    setStack((prev) => {
+      const index = prev.findIndex((d) => d.id === id);
+      if (index === -1) return prev;
+      const closedDialogs = prev.slice(index);
+      for (const d of closedDialogs) {
+        d.onClose();
+      }
+      return prev.slice(0, index);
+    });
+  };
+  const closeAll = () => {
+    for (const d of stack) {
+      d.onClose();
+    }
+    setStack([]);
+  };
+  useEffect(() => {
+    if (stack.length > 0) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [stack.length]);
+  const contextValue = {
+    push,
+    pop,
+    close,
+    closeAll,
+    depth: stack.length
+  };
+  return /* @__PURE__ */ jsxs(DialogStackContext.Provider, { value: contextValue, children: [
+    children,
+    stack.map((dialog) => /* @__PURE__ */ jsx("div", { style: { zIndex: dialog.zIndex }, children: /* @__PURE__ */ jsx(
+      AccessibleDialog,
+      {
+        isOpen: true,
+        onClose: () => close(dialog.id),
+        title: dialog.title,
+        description: dialog.description,
+        backdropClassName: "dialog-stack-backdrop",
+        children: dialog.content
+      }
+    ) }, dialog.id))
+  ] });
+};
+var InfiniteList = (props) => {
+  const {
+    items,
+    loadMore,
+    hasMore,
+    isLoading,
+    renderItem,
+    getItemKey,
+    loadingIndicator,
+    emptyState,
+    "aria-label": ariaLabel,
+    threshold = 200,
+    className = ""
+  } = props;
+  const [previousCount, setPreviousCount] = useState(items.length);
+  const sentinelRef = useRef(null);
+  const listRef = useRef(null);
+  useEffect(() => {
+    if (items.length > previousCount && !isLoading) {
+      const newItemsCount = items.length - previousCount;
+      announce(
+        `${newItemsCount} new item${newItemsCount === 1 ? "" : "s"} loaded. Total: ${items.length}`,
+        { politeness: "polite", delay: 500 }
+      );
+      setPreviousCount(items.length);
+    }
+  }, [items.length, previousCount, isLoading]);
+  useEffect(() => {
+    if (isLoading) {
+      announce("Loading more items", { politeness: "polite" });
+    }
+  }, [isLoading]);
+  useEffect(() => {
+    if (!hasMore || isLoading || !sentinelRef.current) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const sentinel = entries[0];
+        if (sentinel?.isIntersecting) {
+          loadMore();
+        }
+      },
+      {
+        root: null,
+        rootMargin: `${threshold}px`,
+        threshold: 0
+      }
+    );
+    observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [hasMore, isLoading, loadMore, threshold]);
+  if (items.length === 0 && !isLoading) {
+    return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyState || /* @__PURE__ */ jsx("p", { children: "No items to display" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: listRef, className, children: [
+    /* @__PURE__ */ jsx("div", { role: "list", "aria-label": ariaLabel, "aria-busy": isLoading, children: items.map((item, index) => /* @__PURE__ */ jsx("div", { role: "listitem", children: renderItem(item, index) }, getItemKey(item, index))) }),
+    isLoading && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": "Loading more items",
+        style: {
+          padding: "1rem",
+          textAlign: "center"
+        },
+        children: loadingIndicator || /* @__PURE__ */ jsx("span", { children: "Loading..." })
+      }
+    ),
+    hasMore && !isLoading && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: "1px", visibility: "hidden" } }),
+    !hasMore && items.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        style: {
+          padding: "1rem",
+          textAlign: "center",
+          color: "#6b7280",
+          fontSize: "0.875rem"
+        },
+        children: [
+          "End of list. Total: ",
+          items.length,
+          " items."
+        ]
+      }
+    )
+  ] });
+};
+var useAccessibleButton = (props) => {
+  const { label, onPress, isDisabled = false, role = "button", elementType = "button" } = props;
+  const buttonRef = useRef(null);
+  const isPressedRef = useRef(false);
+  useEffect(() => {
+    {
+      import('@a13y/devtools/runtime/invariants').then(
+        ({ assertHasAccessibleName, assertKeyboardAccessible }) => {
+          if (buttonRef.current) {
+            assertHasAccessibleName(buttonRef.current, "useAccessibleButton");
+            assertKeyboardAccessible(buttonRef.current, "useAccessibleButton");
+          }
+        }
+      );
+    }
+  }, []);
+  const handlePress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      onPress(event);
+    },
+    [onPress, isDisabled]
+  );
+  const handlePointerDown = useCallback(
+    (event) => {
+      if (isDisabled) {
+        event.preventDefault();
+        return;
+      }
+      isPressedRef.current = true;
+      handlePress({ type: "mouse" });
+    },
+    [handlePress, isDisabled]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress({ type: "keyboard", key: event.key });
+      }
+    },
+    [handlePress, isDisabled]
+  );
+  const buttonProps = {
+    role,
+    tabIndex: isDisabled ? -1 : 0,
+    "aria-label": label,
+    "aria-disabled": isDisabled ? true : void 0,
+    disabled: elementType === "button" ? isDisabled : void 0,
+    onPointerDown: handlePointerDown,
+    onKeyDown: handleKeyDown
+  };
+  return {
+    buttonProps,
+    isPressed: isPressedRef.current
+  };
+};
+var useKeyboardNavigation = (props) => {
+  const {
+    orientation,
+    loop = false,
+    onNavigate,
+    defaultIndex = 0,
+    currentIndex: controlledIndex
+  } = props;
+  const isControlled = controlledIndex !== void 0;
+  const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex);
+  const currentIndex = isControlled ? controlledIndex : uncontrolledIndex;
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const containerRef = useRef(null);
+  const setCurrentIndex = useCallback(
+    (index) => {
+      if (!isControlled) {
+        setUncontrolledIndex(index);
+      }
+      onNavigate?.(index);
+      const element = itemsRef.current.get(index);
+      if (element) {
+        element.focus();
+      }
+    },
+    [isControlled, onNavigate]
+  );
+  const navigate = useCallback(
+    (direction) => {
+      const itemCount = itemsRef.current.size;
+      if (itemCount === 0) {
+        return;
+      }
+      let nextIndex = currentIndex;
+      switch (direction) {
+        case "forward":
+          nextIndex = currentIndex + 1;
+          if (nextIndex >= itemCount) {
+            nextIndex = loop ? 0 : itemCount - 1;
+          }
+          break;
+        case "backward":
+          nextIndex = currentIndex - 1;
+          if (nextIndex < 0) {
+            nextIndex = loop ? itemCount - 1 : 0;
+          }
+          break;
+        case "first":
+          nextIndex = 0;
+          break;
+        case "last":
+          nextIndex = itemCount - 1;
+          break;
+      }
+      if (nextIndex !== currentIndex) {
+        setCurrentIndex(nextIndex);
+      }
+    },
+    [currentIndex, loop, setCurrentIndex]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      const { key } = event;
+      let direction = null;
+      if (key === "ArrowRight") {
+        if (orientation === "horizontal" || orientation === "both") {
+          direction = "forward";
+        }
+      } else if (key === "ArrowLeft") {
+        if (orientation === "horizontal" || orientation === "both") {
+          direction = "backward";
+        }
+      } else if (key === "ArrowDown") {
+        if (orientation === "vertical" || orientation === "both") {
+          direction = "forward";
+        }
+      } else if (key === "ArrowUp") {
+        if (orientation === "vertical" || orientation === "both") {
+          direction = "backward";
+        }
+      } else if (key === "Home") {
+        direction = "first";
+      } else if (key === "End") {
+        direction = "last";
+      }
+      if (direction) {
+        event.preventDefault();
+        navigate(direction);
+      }
+    },
+    [orientation, navigate]
+  );
+  const getItemProps = useCallback(
+    (index) => {
+      return {
+        ref: (element) => {
+          if (element) {
+            itemsRef.current.set(index, element);
+          } else {
+            itemsRef.current.delete(index);
+          }
+        },
+        tabIndex: index === currentIndex ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        "data-index": index
+      };
+    },
+    [currentIndex, handleKeyDown]
+  );
+  useEffect(() => {
+    {
+      import('@a13y/devtools/runtime/validators').then(({ keyboardValidator }) => {
+        if (containerRef.current) {
+          keyboardValidator.validateContainer(containerRef.current);
+        }
+        const container = Array.from(itemsRef.current.values())[0]?.parentElement;
+        if (container) {
+          keyboardValidator.validateRovingTabindex(container);
+        }
+      });
+    }
+  }, []);
+  const containerProps = {
+    role: "toolbar",
+    "aria-orientation": orientation
+  };
+  return {
+    currentIndex,
+    setCurrentIndex,
+    getItemProps,
+    containerProps
+  };
+};
+var NestedMenu = (props) => {
+  const { label, trigger, items, className = "" } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [openSubmenuId, setOpenSubmenuId] = useState(null);
+  const { buttonProps } = useAccessibleButton({
+    label,
+    onPress: () => setIsOpen(!isOpen)
+  });
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        setIsOpen(false);
+        setOpenSubmenuId(null);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...buttonProps,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        className,
+        style: {
+          padding: "0.5rem 1rem",
+          border: "1px solid #d1d5db",
+          borderRadius: "0.375rem",
+          backgroundColor: "white",
+          cursor: "pointer"
+        },
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      MenuLevel,
+      {
+        items,
+        onClose: () => setIsOpen(false),
+        openSubmenuId,
+        onSubmenuChange: setOpenSubmenuId,
+        depth: 0
+      }
+    )
+  ] });
+};
+var MenuLevel = (props) => {
+  const { items, onClose, openSubmenuId, onSubmenuChange, depth } = props;
+  const menuRef = useRef(null);
+  const { getItemProps, setCurrentIndex } = useKeyboardNavigation({
+    orientation: "vertical",
+    loop: true
+  });
+  const handleItemKeyDown = (e, item) => {
+    if (e.key === "ArrowRight" && item.submenu) {
+      e.preventDefault();
+      e.stopPropagation();
+      onSubmenuChange(item.id);
+    }
+    if (e.key === "ArrowLeft" && depth > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      onSubmenuChange(null);
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (item.submenu) {
+        onSubmenuChange(item.id);
+      } else if (item.onPress && !item.disabled) {
+        item.onPress();
+        onClose();
+      }
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    if (item.submenu) {
+      onSubmenuChange(openSubmenuId === item.id ? null : item.id);
+    } else if (item.onPress) {
+      item.onPress();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      role: "menu",
+      "aria-orientation": "vertical",
+      style: {
+        position: depth === 0 ? "absolute" : "absolute",
+        top: depth === 0 ? "calc(100% + 0.25rem)" : 0,
+        left: depth === 0 ? 0 : "100%",
+        minWidth: "12rem",
+        backgroundColor: "white",
+        border: "1px solid #e5e7eb",
+        borderRadius: "0.375rem",
+        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+        padding: "0.25rem",
+        zIndex: 50 + depth
+      },
+      children: items.map((item, index) => {
+        const itemProps = getItemProps(index);
+        const hasSubmenu = !!item.submenu;
+        const isSubmenuOpen = openSubmenuId === item.id;
+        return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ...itemProps,
+              role: "menuitem",
+              "aria-haspopup": hasSubmenu ? "true" : void 0,
+              "aria-expanded": hasSubmenu ? isSubmenuOpen : void 0,
+              disabled: item.disabled,
+              onClick: () => handleItemClick(item),
+              onKeyDown: (e) => handleItemKeyDown(e, item),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "0.75rem",
+                width: "100%",
+                padding: "0.5rem 0.75rem",
+                border: "none",
+                background: "transparent",
+                textAlign: "left",
+                fontSize: "0.875rem",
+                cursor: item.disabled ? "not-allowed" : "pointer",
+                borderRadius: "0.25rem",
+                color: item.disabled ? "#9ca3af" : "#111827",
+                opacity: item.disabled ? 0.5 : 1
+              },
+              onMouseEnter: (e) => {
+                if (!item.disabled) {
+                  e.currentTarget.style.backgroundColor = "#f3f4f6";
+                  setCurrentIndex(index);
+                  if (hasSubmenu) {
+                    onSubmenuChange(item.id);
+                  }
+                }
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                  /* @__PURE__ */ jsx("span", { children: item.label })
+                ] }),
+                hasSubmenu && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B6" })
+              ]
+            }
+          ),
+          hasSubmenu && isSubmenuOpen && item.submenu && /* @__PURE__ */ jsx(
+            MenuLevel,
+            {
+              items: item.submenu,
+              onClose,
+              openSubmenuId: null,
+              onSubmenuChange: () => {
+              },
+              depth: depth + 1
+            }
+          )
+        ] }, item.id);
+      })
+    }
+  );
+};
+var VirtualizedList = (props) => {
+  const {
+    items,
+    itemHeight,
+    height,
+    renderItem,
+    getItemKey,
+    "aria-label": ariaLabel,
+    overscan = 3,
+    className = "",
+    emptyState
+  } = props;
+  const [scrollTop, setScrollTop] = useState(0);
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 0 });
+  const containerRef = useRef(null);
+  const previousRangeRef = useRef({ start: 0, end: 0 });
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + height) / itemHeight) + overscan
+  );
+  const visibleItems = items.slice(startIndex, endIndex + 1);
+  useEffect(() => {
+    const newRange = { start: startIndex, end: endIndex };
+    const rangeChanged = Math.abs(newRange.start - previousRangeRef.current.start) > 10 || Math.abs(newRange.end - previousRangeRef.current.end) > 10;
+    if (rangeChanged && items.length > 0) {
+      setVisibleRange(newRange);
+      previousRangeRef.current = newRange;
+      const message = `Showing items ${newRange.start + 1} to ${newRange.end + 1} of ${items.length}`;
+      announce(message, { politeness: "polite", delay: 300 });
+    }
+  }, [startIndex, endIndex, items.length]);
+  const handleScroll = (e) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  };
+  const handleKeyDown = (e) => {
+    if (!containerRef.current) return;
+    const scrollAmount = itemHeight * 5;
+    switch (e.key) {
+      case "PageDown":
+        e.preventDefault();
+        containerRef.current.scrollBy({ top: scrollAmount, behavior: "smooth" });
+        break;
+      case "PageUp":
+        e.preventDefault();
+        containerRef.current.scrollBy({ top: -scrollAmount, behavior: "smooth" });
+        break;
+      case "Home":
+        e.preventDefault();
+        containerRef.current.scrollTo({ top: 0, behavior: "smooth" });
+        break;
+      case "End":
+        e.preventDefault();
+        containerRef.current.scrollTo({ top: totalHeight, behavior: "smooth" });
+        break;
+    }
+  };
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyState || /* @__PURE__ */ jsx("p", { children: "No items to display" }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "list",
+      "aria-label": ariaLabel,
+      tabIndex: 0,
+      className,
+      onScroll: handleScroll,
+      onKeyDown: handleKeyDown,
+      style: {
+        height: `${height}px`,
+        overflow: "auto",
+        position: "relative",
+        outline: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { height: `${totalHeight}px`, position: "relative" }, children: visibleItems.map((item, virtualIndex) => {
+          const actualIndex = startIndex + virtualIndex;
+          const itemStyle = {
+            position: "absolute",
+            top: `${actualIndex * itemHeight}px`,
+            left: 0,
+            right: 0,
+            height: `${itemHeight}px`
+          };
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "listitem",
+              "aria-setsize": items.length,
+              "aria-posinset": actualIndex + 1,
+              style: itemStyle,
+              children: renderItem(item, actualIndex)
+            },
+            getItemKey(item, actualIndex)
+          );
+        }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              left: "-10000px",
+              width: "1px",
+              height: "1px",
+              overflow: "hidden"
+            },
+            children: `Showing items ${visibleRange.start + 1} to ${visibleRange.end + 1} of ${items.length}`
+          }
+        )
+      ]
+    }
+  );
+};
+var WizardContext = createContext(null);
+var useWizard = () => {
+  const context = useContext(WizardContext);
+  if (!context) {
+    throw new Error("useWizard must be used within Wizard component");
+  }
+  return context;
+};
+var Wizard = (props) => {
+  const { steps, onComplete, onCancel, initialStep = 0, className = "" } = props;
+  const [currentStep, setCurrentStep] = useState(initialStep);
+  const [validationError, setValidationError] = useState(null);
+  const [visitedSteps, setVisitedSteps] = useState(/* @__PURE__ */ new Set([initialStep]));
+  const totalSteps = steps.length;
+  const step = steps[currentStep] ?? steps[0];
+  if (currentStep < 0 || currentStep >= totalSteps) {
+    setCurrentStep(0);
+  }
+  const isLastStep = currentStep === totalSteps - 1;
+  const canGoPrevious = currentStep > 0;
+  const canGoNext = currentStep < totalSteps - 1;
+  const validateCurrentStep = () => {
+    if (!step.validate) return true;
+    const result = step.validate();
+    if (result === true) {
+      setValidationError(null);
+      return true;
+    }
+    setValidationError(result);
+    announce(`Validation error: ${result}`, { politeness: "assertive" });
+    return false;
+  };
+  const goToStep = (index) => {
+    if (index < 0 || index >= totalSteps) return;
+    if (index > currentStep && !validateCurrentStep()) {
+      return;
+    }
+    setCurrentStep(index);
+    setVisitedSteps((prev) => /* @__PURE__ */ new Set([...prev, index]));
+    setValidationError(null);
+    const newStep = steps[index];
+    if (newStep) {
+      announce(
+        `Step ${index + 1} of ${totalSteps}: ${newStep.label}${newStep.optional ? " (optional)" : ""}`,
+        { politeness: "polite" }
+      );
+    }
+  };
+  const next = () => {
+    if (!canGoNext) return;
+    if (validateCurrentStep()) {
+      goToStep(currentStep + 1);
+    }
+  };
+  const previous = () => {
+    if (!canGoPrevious) return;
+    goToStep(currentStep - 1);
+  };
+  const handleComplete = () => {
+    if (validateCurrentStep()) {
+      announce("Wizard completed", { politeness: "polite" });
+      onComplete();
+    }
+  };
+  const contextValue = {
+    currentStep,
+    totalSteps,
+    step,
+    next,
+    previous,
+    goToStep,
+    canGoNext,
+    canGoPrevious,
+    isLastStep,
+    validationError
+  };
+  return /* @__PURE__ */ jsx(WizardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className, style: { maxWidth: "48rem", margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsx("nav", { "aria-label": "Wizard progress", children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          marginBottom: "2rem",
+          padding: 0,
+          listStyle: "none"
+        },
+        children: steps.map((s, index) => {
+          const isActive = index === currentStep;
+          const isCompleted = visitedSteps.has(index) && index < currentStep;
+          const isClickable = visitedSteps.has(index) || index === currentStep;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => isClickable && goToStep(index),
+                    "aria-current": isActive ? "step" : void 0,
+                    disabled: !isClickable,
+                    style: {
+                      width: "2.5rem",
+                      height: "2.5rem",
+                      borderRadius: "50%",
+                      border: `2px solid ${isActive || isCompleted ? "#2563eb" : "#d1d5db"}`,
+                      backgroundColor: isCompleted ? "#2563eb" : isActive ? "white" : "#f3f4f6",
+                      color: isCompleted ? "white" : isActive ? "#2563eb" : "#9ca3af",
+                      fontWeight: 600,
+                      cursor: isClickable ? "pointer" : "not-allowed",
+                      marginBottom: "0.5rem"
+                    },
+                    children: isCompleted ? "\u2713" : index + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "0.875rem",
+                      color: isActive ? "#2563eb" : "#6b7280",
+                      fontWeight: isActive ? 600 : 400,
+                      textAlign: "center"
+                    },
+                    children: [
+                      s.label,
+                      s.optional && /* @__PURE__ */ jsx("span", { style: { display: "block", fontSize: "0.75rem", color: "#9ca3af" }, children: "(Optional)" })
+                    ]
+                  }
+                )
+              ]
+            },
+            s.id
+          );
+        })
+      }
+    ) }),
+    validationError && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "assertive",
+        style: {
+          padding: "0.75rem",
+          marginBottom: "1rem",
+          backgroundColor: "#fef2f2",
+          border: "1px solid #fecaca",
+          borderRadius: "0.375rem",
+          color: "#991b1b"
+        },
+        children: validationError
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        "aria-labelledby": `step-${step.id}-label`,
+        style: { marginBottom: "2rem" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              id: `step-${step.id}-label`,
+              style: { fontSize: "1.5rem", fontWeight: 600, marginBottom: "1rem" },
+              children: step.label
+            }
+          ),
+          step.content
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: "1rem"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+            onCancel && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                style: {
+                  padding: "0.5rem 1rem",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "0.375rem",
+                  backgroundColor: "white",
+                  cursor: "pointer"
+                },
+                children: "Cancel"
+              }
+            ),
+            canGoPrevious && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: previous,
+                style: {
+                  padding: "0.5rem 1rem",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "0.375rem",
+                  backgroundColor: "white",
+                  cursor: "pointer"
+                },
+                children: "\u2190 Previous"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: isLastStep ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleComplete,
+              style: {
+                padding: "0.5rem 1.5rem",
+                border: "none",
+                borderRadius: "0.375rem",
+                backgroundColor: "#2563eb",
+                color: "white",
+                fontWeight: 600,
+                cursor: "pointer"
+              },
+              children: "Complete"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: next,
+              disabled: !canGoNext,
+              style: {
+                padding: "0.5rem 1.5rem",
+                border: "none",
+                borderRadius: "0.375rem",
+                backgroundColor: "#2563eb",
+                color: "white",
+                fontWeight: 600,
+                cursor: canGoNext ? "pointer" : "not-allowed",
+                opacity: canGoNext ? 1 : 0.5
+              },
+              children: "Next \u2192"
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+};
+
+export { DialogStackProvider, InfiniteList, NestedMenu, VirtualizedList, Wizard, useDialogStack, useWizard };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map