@a13y/react 0.1.1 → 0.1.3

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { A as AccessibleButtonProps, P as PressEvent, U as UseAccessibleButtonProps, a as UseAccessibleButtonReturn, u as useAccessibleButton } from '../use-accessible-button-B0syf-Az.js';
-import { AriaRole } from 'react';
+import { AriaRole, RefObject } from 'react';
 
 /**
  * @a13y/react - useAccessibleDialog
@@ -722,4 +722,146 @@ type RequireLabel<T> = T & {
     label: string;
 };
 
-export { type DialogBackdropProps, type DialogContainerProps, type DialogDescriptionProps, type DialogTitleProps, type FieldConfig, type FieldProps, type FieldValidator, type FormConfig, type FormState, type FormValidator, type NavigableItemProps, type RequireLabel, type UseAccessibleDialogProps, type UseAccessibleDialogReturn, type UseAccessibleFormReturn, type UseFocusTrapProps, type UseFocusTrapReturn, type UseFormFieldProps, type UseFormFieldReturn, type UseKeyboardNavigationProps, type UseKeyboardNavigationReturn, useAccessibleDialog, useAccessibleForm, useFocusTrap, useFormField, useKeyboardNavigation };
+/**
+ * useId Hook
+ * Generates unique IDs for accessibility attributes
+ * Provides backward compatibility for React < 18
+ */
+/**
+ * Generates a unique ID for accessibility attributes
+ * @param prefix - Optional prefix for the ID
+ * @returns A unique ID string
+ *
+ * @example
+ * ```tsx
+ * const tooltipId = useId('tooltip');
+ * // Returns: "tooltip-1"
+ * ```
+ */
+declare function useId(prefix?: string): string;
+
+/**
+ * useReducedMotion Hook
+ * Detects user's preference for reduced motion
+ */
+/**
+ * Detects if the user prefers reduced motion
+ * @returns true if the user prefers reduced motion
+ *
+ * @example
+ * ```tsx
+ * const prefersReducedMotion = useReducedMotion();
+ *
+ * <div style={{
+ *   transition: prefersReducedMotion ? 'none' : 'all 0.3s ease'
+ * }}>
+ *   Content
+ * </div>
+ * ```
+ */
+declare function useReducedMotion(): boolean;
+
+/**
+ * useClickOutside Hook
+ * Detects clicks outside of a referenced element
+ */
+
+/**
+ * Calls a handler when user clicks outside of the referenced element
+ * @param ref - React ref to the element
+ * @param handler - Function to call when clicking outside
+ * @param enabled - Whether the hook is enabled (default: true)
+ *
+ * @example
+ * ```tsx
+ * const menuRef = useRef<HTMLDivElement>(null);
+ * useClickOutside(menuRef, () => setIsOpen(false));
+ *
+ * <div ref={menuRef}>
+ *   Menu content
+ * </div>
+ * ```
+ */
+declare function useClickOutside(ref: RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+
+/**
+ * useMediaQuery Hook
+ * Tracks the state of a CSS media query
+ */
+/**
+ * Tracks whether a media query matches
+ * @param query - CSS media query string
+ * @returns true if the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery('(max-width: 768px)');
+ * const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+ *
+ * {isMobile ? <MobileView /> : <DesktopView />}
+ * ```
+ */
+declare function useMediaQuery(query: string): boolean;
+
+/**
+ * useAriaLive Hook
+ * Manages ARIA live regions for dynamic announcements
+ */
+type AriaLivePoliteness = 'polite' | 'assertive' | 'off';
+interface UseAriaLiveReturn {
+    /** Sets a message to be announced */
+    setMessage: (message: string) => void;
+    /** Clears the current message */
+    clearMessage: () => void;
+    /** Current message */
+    message: string;
+    /** Props to spread on the live region element */
+    liveRegionProps: {
+        role: 'status' | 'alert';
+        'aria-live': AriaLivePoliteness;
+        'aria-atomic': 'true';
+        'aria-relevant': 'additions text';
+    };
+}
+/**
+ * Creates a managed ARIA live region
+ * @param politeness - How urgently the message should be announced
+ * @returns Object with message management functions and props
+ *
+ * @example
+ * ```tsx
+ * const { setMessage, liveRegionProps } = useAriaLive('polite');
+ *
+ * <button onClick={() => setMessage('Item added to cart')}>
+ *   Add to cart
+ * </button>
+ *
+ * <div {...liveRegionProps} className="sr-only">
+ *   {message}
+ * </div>
+ * ```
+ */
+declare function useAriaLive(politeness?: AriaLivePoliteness): UseAriaLiveReturn;
+
+/**
+ * useAnnounce Hook
+ * Provides a simple way to make screen reader announcements
+ */
+
+/**
+ * Creates a function to announce messages to screen readers
+ * @returns Function to announce messages
+ *
+ * @example
+ * ```tsx
+ * const announce = useAnnounce();
+ *
+ * const handleAddToCart = () => {
+ *   addItem(item);
+ *   announce('Item added to cart', 'polite');
+ * };
+ * ```
+ */
+declare function useAnnounce(): (message: string, politeness?: AriaLivePoliteness) => void;
+
+export { type AriaLivePoliteness, type DialogBackdropProps, type DialogContainerProps, type DialogDescriptionProps, type DialogTitleProps, type FieldConfig, type FieldProps, type FieldValidator, type FormConfig, type FormState, type FormValidator, type NavigableItemProps, type RequireLabel, type UseAccessibleDialogProps, type UseAccessibleDialogReturn, type UseAccessibleFormReturn, type UseAriaLiveReturn, type UseFocusTrapProps, type UseFocusTrapReturn, type UseFormFieldProps, type UseFormFieldReturn, type UseKeyboardNavigationProps, type UseKeyboardNavigationReturn, useAccessibleDialog, useAccessibleForm, useAnnounce, useAriaLive, useClickOutside, useFocusTrap, useFormField, useId, useKeyboardNavigation, useMediaQuery, useReducedMotion };

package/dist/hooks/index.js

@@ -642,7 +642,155 @@ var useFormField = (props) => {
     fieldRef
   };
 };
+var idCounter = 0;
+function useId3(prefix = "a13y") {
+  const idRef = useRef(void 0);
+  if (!idRef.current) {
+    idRef.current = `${prefix}-${++idCounter}`;
+  }
+  return idRef.current;
+}
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    return mediaQuery.matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleClickOutside = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [ref, handler, enabled]);
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const mediaQuery = window.matchMedia(query);
+    return mediaQuery.matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, [query]);
+  return matches;
+}
+function useAriaLive(politeness = "polite") {
+  const [message, setMessage] = useState("");
+  const timeoutRef = useRef(void 0);
+  const clearMessage = () => {
+    setMessage("");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+  const setMessageWithClear = (newMessage) => {
+    setMessage(newMessage);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setMessage("");
+    }, 5e3);
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    setMessage: setMessageWithClear,
+    clearMessage,
+    message,
+    liveRegionProps: {
+      role: politeness === "assertive" ? "alert" : "status",
+      "aria-live": politeness,
+      "aria-atomic": "true",
+      "aria-relevant": "additions text"
+    }
+  };
+}
+function useAnnounce() {
+  const regionRef = useRef(null);
+  useEffect(() => {
+    if (!regionRef.current) {
+      const region = document.createElement("div");
+      region.setAttribute("role", "status");
+      region.setAttribute("aria-live", "polite");
+      region.setAttribute("aria-atomic", "true");
+      region.style.position = "absolute";
+      region.style.left = "-10000px";
+      region.style.width = "1px";
+      region.style.height = "1px";
+      region.style.overflow = "hidden";
+      document.body.appendChild(region);
+      regionRef.current = region;
+    }
+    return () => {
+      if (regionRef.current) {
+        document.body.removeChild(regionRef.current);
+        regionRef.current = null;
+      }
+    };
+  }, []);
+  const announce3 = useCallback(
+    (message, politeness = "polite") => {
+      if (!regionRef.current) return;
+      regionRef.current.setAttribute("aria-live", politeness);
+      regionRef.current.textContent = "";
+      setTimeout(() => {
+        if (regionRef.current) {
+          regionRef.current.textContent = message;
+        }
+      }, 100);
+      setTimeout(() => {
+        if (regionRef.current) {
+          regionRef.current.textContent = "";
+        }
+      }, 5100);
+    },
+    []
+  );
+  return announce3;
+}
 
-export { useAccessibleButton, useAccessibleDialog, useAccessibleForm, useFocusTrap, useFormField, useKeyboardNavigation };
+export { useAccessibleButton, useAccessibleDialog, useAccessibleForm, useAnnounce, useAriaLive, useClickOutside, useFocusTrap, useFormField, useId3 as useId, useKeyboardNavigation, useMediaQuery, useReducedMotion };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map