@a13y/react 0.1.0

package/dist/components/index.js

@@ -0,0 +1,849 @@
+import { useState, useRef, useEffect, useCallback, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+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 AccessibleButton = (props) => {
+  const {
+    children,
+    label,
+    onPress,
+    disabled = false,
+    variant = "primary",
+    className = "",
+    type = "button"
+  } = props;
+  const { buttonProps } = useAccessibleButton({
+    label,
+    onPress,
+    isDisabled: disabled
+  });
+  const baseStyles = "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+  const variantStyles = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-blue-600",
+    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:outline-gray-500",
+    danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600",
+    ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:outline-gray-500"
+  };
+  const combinedClassName = `${baseStyles} ${variantStyles[variant]} ${className}`.trim();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...buttonProps,
+      type,
+      className: combinedClassName,
+      style: {
+        padding: "0.5rem 1rem",
+        borderRadius: "0.375rem",
+        border: "none",
+        cursor: disabled ? "not-allowed" : "pointer"
+      },
+      children
+    }
+  );
+};
+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 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 AccessibleMenu = (props) => {
+  const { label, trigger, items, className = "", menuClassName = "" } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const { buttonProps: triggerProps } = useAccessibleButton({
+    label,
+    onPress: () => setIsOpen(!isOpen)
+  });
+  const { trapRef } = useFocusTrap({
+    isActive: isOpen,
+    onEscape: () => setIsOpen(false),
+    restoreFocus: true
+  });
+  const { getItemProps } = useKeyboardNavigation({
+    orientation: "vertical",
+    loop: true
+  });
+  const handleItemPress = (item) => {
+    if (item.disabled) {
+      return;
+    }
+    item.onPress();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...triggerProps,
+        className,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        style: {
+          padding: "0.5rem 1rem",
+          border: "1px solid #d1d5db",
+          borderRadius: "0.375rem",
+          backgroundColor: "white",
+          cursor: "pointer",
+          fontSize: "0.875rem",
+          fontWeight: 500
+        },
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: trapRef,
+        role: "menu",
+        "aria-orientation": "vertical",
+        className: menuClassName,
+        style: {
+          position: "absolute",
+          top: "calc(100% + 0.25rem)",
+          left: 0,
+          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
+        },
+        children: items.map((item, index) => {
+          const itemProps = getItemProps(index);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ...itemProps,
+              role: "menuitem",
+              disabled: item.disabled,
+              onClick: () => handleItemPress(item),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                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";
+                }
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    )
+  ] });
+};
+var AccessibleModal = (props) => {
+  const {
+    isOpen,
+    onClose,
+    title,
+    children,
+    footer,
+    size = "md",
+    closeOnBackdropClick = false,
+    className = ""
+  } = props;
+  const { dialogProps, titleProps, backdropProps, close } = useAccessibleDialog({
+    isOpen,
+    onClose,
+    title,
+    role: "dialog",
+    isModal: true,
+    closeOnBackdropClick
+  });
+  if (!isOpen) {
+    return null;
+  }
+  const sizeStyles = {
+    sm: { maxWidth: "24rem" },
+    md: { maxWidth: "32rem" },
+    lg: { maxWidth: "48rem" },
+    xl: { maxWidth: "64rem" },
+    full: { maxWidth: "95vw", maxHeight: "95vh" }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    backdropProps && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...backdropProps,
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          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 25px 50px -12px rgba(0, 0, 0, 0.25)",
+          width: "90vw",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 51,
+          ...sizeStyles[size]
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "1.5rem",
+                borderBottom: "1px solid #e5e7eb",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    ...titleProps,
+                    style: {
+                      fontSize: "1.25rem",
+                      fontWeight: 600,
+                      margin: 0
+                    },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: close,
+                    "aria-label": "Close modal",
+                    style: {
+                      padding: "0.5rem",
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      fontSize: "1.25rem",
+                      lineHeight: 1,
+                      color: "#6b7280",
+                      borderRadius: "0.25rem"
+                    },
+                    children: "\u2715"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: "1.5rem"
+              },
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "1.5rem",
+                borderTop: "1px solid #e5e7eb",
+                display: "flex",
+                gap: "0.75rem",
+                justifyContent: "flex-end"
+              },
+              children: footer
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var AccessibleTabs = (props) => {
+  const {
+    tabs,
+    defaultTab = 0,
+    selectedTab: controlledTab,
+    onTabChange,
+    className = "",
+    panelClassName = ""
+  } = props;
+  const isControlled = controlledTab !== void 0;
+  const [uncontrolledTab, setUncontrolledTab] = useState(defaultTab);
+  const selectedIndex = isControlled ? controlledTab : uncontrolledTab;
+  const { getItemProps, setCurrentIndex } = useKeyboardNavigation({
+    orientation: "horizontal",
+    loop: false,
+    currentIndex: selectedIndex,
+    onNavigate: (index) => {
+      if (tabs[index]?.disabled) {
+        return;
+      }
+      if (!isControlled) {
+        setUncontrolledTab(index);
+      }
+      onTabChange?.(index);
+    }
+  });
+  const handleTabClick = (index) => {
+    if (tabs[index]?.disabled) {
+      return;
+    }
+    setCurrentIndex(index);
+    if (!isControlled) {
+      setUncontrolledTab(index);
+    }
+    onTabChange?.(index);
+  };
+  const selectedTab = tabs[selectedIndex];
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        style: {
+          display: "flex",
+          borderBottom: "2px solid #e5e7eb",
+          gap: "0.25rem"
+        },
+        children: tabs.map((tab, index) => {
+          const itemProps = getItemProps(index);
+          const isSelected = index === selectedIndex;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ...itemProps,
+              id: `tab-${tab.id}`,
+              role: "tab",
+              "aria-selected": isSelected,
+              "aria-controls": `panel-${tab.id}`,
+              disabled: tab.disabled,
+              onClick: () => handleTabClick(index),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                padding: "0.75rem 1rem",
+                border: "none",
+                background: "transparent",
+                cursor: tab.disabled ? "not-allowed" : "pointer",
+                fontSize: "0.875rem",
+                fontWeight: isSelected ? 600 : 400,
+                color: tab.disabled ? "#9ca3af" : isSelected ? "#2563eb" : "#6b7280",
+                borderBottom: isSelected ? "2px solid #2563eb" : "none",
+                marginBottom: "-2px",
+                opacity: tab.disabled ? 0.5 : 1,
+                transition: "color 0.2s"
+              },
+              children: [
+                tab.icon && /* @__PURE__ */ jsx("span", { children: tab.icon }),
+                /* @__PURE__ */ jsx("span", { children: tab.label })
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    selectedTab && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `panel-${selectedTab.id}`,
+        role: "tabpanel",
+        "aria-labelledby": `tab-${selectedTab.id}`,
+        className: panelClassName,
+        style: {
+          padding: "1.5rem"
+        },
+        children: selectedTab.content
+      }
+    )
+  ] });
+};
+
+export { AccessibleButton, AccessibleDialog, AccessibleMenu, AccessibleModal, AccessibleTabs };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map