@zentauri-ui/zentauri-components 1.4.61 → 1.4.63

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -4,10 +4,7 @@ import type { RefObject } from "react";
 import { Dispatch, SetStateAction, useEffect } from "react";
 
 /** DOM events that can represent an “outside” press for closing overlays. */
-export type ClickOutsideEventType =
-  | "mousedown"
-  | "pointerdown"
-  | "touchstart";
+export type ClickOutsideEventType = "mousedown" | "pointerdown" | "touchstart";
 
 export type UseClickOutsideParams = {
   /** Called with `false` when a qualifying event target is outside `ref.current`. */

package/src/hooks/useClipboard/useClipboard.test.ts

@@ -66,7 +66,9 @@ describe("useClipboard", () => {
       const ok = await result.current.copy("z");
       expect(ok).toBe(false);
     });
-    expect(result.current.error?.message).toBe("Clipboard API is not available");
+    expect(result.current.error?.message).toBe(
+      "Clipboard API is not available",
+    );
     expect(result.current.copied).toBe(false);
   });
 

package/src/hooks/useClipboard/useClipboard.ts

@@ -56,8 +56,7 @@ export function useClipboard(resetDelay = 2000): UseClipboardResult {
         }
         return true;
       } catch (cause) {
-        const err =
-          cause instanceof Error ? cause : new Error(String(cause));
+        const err = cause instanceof Error ? cause : new Error(String(cause));
         setError(err);
         return false;
       }

package/src/hooks/useDisclosure/useDisclosure.test.ts

@@ -48,8 +48,7 @@ describe("useDisclosure", () => {
   it("should be controlled when open prop is defined", () => {
     const onOpenChange = vi.fn();
     const { result, rerender } = renderHook(
-      ({ open }: { open: boolean }) =>
-        useDisclosure({ open, onOpenChange }),
+      ({ open }: { open: boolean }) => useDisclosure({ open, onOpenChange }),
       { initialProps: { open: false } },
     );
     expect(result.current.isOpen).toBe(false);

package/src/hooks/useDocumentTitle/useDocumentTitle.test.ts

@@ -6,9 +6,7 @@ import { useDocumentTitle } from "./useDocumentTitle";
 describe("useDocumentTitle", () => {
   it("should set document title from title prop", () => {
     document.title = "Original";
-    const { unmount } = renderHook(() =>
-      useDocumentTitle({ title: "Page A" }),
-    );
+    const { unmount } = renderHook(() => useDocumentTitle({ title: "Page A" }));
     expect(document.title).toBe("Page A");
     unmount();
     expect(document.title).toBe("Original");

package/src/hooks/useFocusManagement/useFocusManagement.test.tsx

@@ -42,4 +42,12 @@ describe("useFocusManagement", () => {
     fireEvent.keyDown(window, { key: "Escape" });
     expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
+
+  it("should return focus inside the overlay when focus moves outside without Tab", () => {
+    render(<Modal initialOpen />);
+    const outsideButton = screen.getByTestId("after");
+    outsideButton.focus();
+    expect(outsideButton).not.toHaveFocus();
+    expect(screen.getByRole("button", { name: "first" })).toHaveFocus();
+  });
 });

package/src/hooks/useFocusManagement/useFocusManagement.ts

@@ -1,39 +1,60 @@
 "use client";
 
 import type { RefObject } from "react";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { useBodyScrollLock } from "../useBodyScrollLock";
 
-const FOCUSABLE_SELECTOR =
-  'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+function getFocusableElements(
+  root: HTMLElement,
+  focusableSelector: string,
+): HTMLElement[] {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(focusableSelector),
+  ).filter((element) => {
+    if (element.getAttribute("aria-hidden") === "true") {
+      return false;
+    }
+    if (typeof window === "undefined") {
+      return true;
+    }
+    const style = getComputedStyle(element);
+    if (style.visibility === "hidden" || style.display === "none") {
+      return false;
+    }
+    return true;
+  });
+}
 
 /**
- * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, and focus trapping.
- *
- * - Delegates scroll locking to {@link useBodyScrollLock} while `open` is true.
- * - Listens for `Escape` on `window` and calls `setOpen(false)`.
- * - When `open` becomes true, focuses the first visible focusable inside `contentRef`, or the container itself.
- * - Traps focus within `contentRef` via a capturing `focusin` listener on `document` that redirects focus back inside.
- * - On close/unmount of the open effect, restores focus to the element that was focused before the trap ran.
- *
- * @param params.open - Whether the overlay is visible.
- * @param params.setOpen - Setter used for Escape and cleanup paths.
- * @param params.contentRef - Root of the dialog/drawer content (must point at a focusable container or include focusables).
- * @param params.focusableSelector - Query selector for tabbable elements; defaults to a common interactive set.
+ * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, focus trapping with circular Tab cycling, and restoring focus after close.
  */
 export const useFocusManagement = ({
   open,
   setOpen,
   contentRef,
+  triggerRef,
   focusableSelector = FOCUSABLE_SELECTOR,
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
-  contentRef: RefObject<HTMLDivElement | null>;
+  contentRef: RefObject<HTMLElement | null>;
+  /** Last modal trigger control; used when focus cannot be inferred at open time. */
+  triggerRef?: RefObject<HTMLElement | null>;
   focusableSelector?: string;
 }) => {
   useBodyScrollLock(open);
 
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -47,31 +68,138 @@ export const useFocusManagement = ({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!open) {
       return;
     }
-    const node = contentRef.current;
-    if (!node) {
-      return;
-    }
-    const focusables = Array.from(
-      node.querySelectorAll<HTMLElement>(focusableSelector),
-    ).filter((element) => element.offsetParent !== null || element === node);
-    const target = focusables[0] ?? node;
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    target.focus();
+
+    let cancelled = false;
+    let rafId = 0;
+    let trapInstalled = false;
+
+    const detachTrap = () => {
+      if (!trapInstalled) {
+        return;
+      }
+      trapInstalled = false;
+      document.removeEventListener("focusin", handleFocusIn, true);
+      document.removeEventListener("keydown", handleTabKeyDown, true);
+    };
+
+    let trapRoot: HTMLElement | null = null;
 
     const handleFocusIn = (event: FocusEvent) => {
-      if (!node.contains(event.target as Node)) {
-        event.stopPropagation();
-        target.focus();
+      const node = trapRoot;
+      if (!node) {
+        return;
+      }
+      const focused = event.target;
+      if (!(focused instanceof Node)) {
+        return;
       }
+      if (node.contains(focused)) {
+        return;
+      }
+      const list = getFocusableElements(node, focusableSelector);
+      const redirectTarget = list[0] ?? node;
+      redirectTarget.focus({ preventScroll: true });
     };
-    document.addEventListener("focusin", handleFocusIn);
+
+    const handleTabKeyDown = (event: KeyboardEvent) => {
+      const node = trapRoot;
+      if (!node) {
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const list = getFocusableElements(node, focusableSelector);
+      if (list.length === 0) {
+        event.preventDefault();
+        node.focus({ preventScroll: true });
+        return;
+      }
+      const first = list[0];
+      const last = list[list.length - 1];
+      if (!first || !last) {
+        return;
+      }
+      const activeElement = document.activeElement as HTMLElement | undefined;
+
+      if (!activeElement || !node.contains(activeElement)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus({ preventScroll: true });
+        return;
+      }
+
+      if (event.shiftKey && activeElement === first) {
+        event.preventDefault();
+        last.focus({ preventScroll: true });
+        return;
+      }
+      if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus({ preventScroll: true });
+      }
+    };
+
+    const installTrap = () => {
+      if (cancelled) {
+        return;
+      }
+      const node = contentRef.current;
+      if (!node) {
+        rafId = requestAnimationFrame(installTrap);
+        return;
+      }
+
+      trapRoot = node;
+
+      const active = document.activeElement;
+      if (
+        active instanceof HTMLElement &&
+        active !== document.body &&
+        !node.contains(active)
+      ) {
+        previousFocusRef.current = active;
+      } else {
+        previousFocusRef.current = triggerRef?.current ?? null;
+      }
+
+      const focusables = getFocusableElements(node, focusableSelector);
+      const initialFocus = focusables[0] ?? node;
+      initialFocus.focus({ preventScroll: true });
+
+      document.addEventListener("focusin", handleFocusIn, true);
+      document.addEventListener("keydown", handleTabKeyDown, true);
+      trapInstalled = true;
+    };
+
+    installTrap();
+
     return () => {
-      document.removeEventListener("focusin", handleFocusIn);
-      previouslyFocused?.focus?.();
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+      detachTrap();
+      trapRoot = null;
+
+      const fallbackTrigger =
+        triggerRef?.current &&
+        document.body.contains(triggerRef.current) &&
+        typeof triggerRef.current.focus === "function"
+          ? triggerRef.current
+          : null;
+
+      const toRestore = previousFocusRef.current ?? fallbackTrigger;
+      previousFocusRef.current = null;
+
+      if (
+        toRestore &&
+        typeof toRestore.focus === "function" &&
+        document.body.contains(toRestore)
+      ) {
+        toRestore.focus({ preventScroll: true });
+      }
     };
-  }, [contentRef, open]);
+  }, [open, contentRef, triggerRef, focusableSelector]);
 };

package/src/hooks/useInView/useInView.test.ts

@@ -34,7 +34,12 @@ describe("useInView", () => {
     expect(result.current[1]).toBe(false);
     act(() => {
       lastCallback?.(
-        [{ isIntersecting: true, target: el } as unknown as IntersectionObserverEntry],
+        [
+          {
+            isIntersecting: true,
+            target: el,
+          } as unknown as IntersectionObserverEntry,
+        ],
         {} as IntersectionObserver,
       );
     });

package/src/hooks/useLocalStorage/index.ts

@@ -1,4 +1 @@
-export {
-  useLocalStorage,
-  type UseLocalStorageResult,
-} from "./useLocalStorage";
+export { useLocalStorage, type UseLocalStorageResult } from "./useLocalStorage";

package/src/hooks/useLocalStorage/useLocalStorage.test.ts

@@ -14,27 +14,21 @@ describe("useLocalStorage", () => {
   it("should read existing JSON value on mount", () => {
     const key = `${keyPrefix}-read`;
     localStorage.setItem(key, JSON.stringify({ count: 2 }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     const value = result.current[0];
     expect(value).toEqual({ count: 2 });
   });
 
   it("should fall back to initialValue when key missing", () => {
     const key = `${keyPrefix}-missing`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     const value = result.current[0];
     expect(value).toEqual({ count: 0 });
   });
 
   it("should persist setValue and support functional updates", () => {
     const key = `${keyPrefix}-set`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { count: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { count: 0 }));
     act(() => {
       result.current[1]({ count: 5 });
     });
@@ -49,9 +43,7 @@ describe("useLocalStorage", () => {
   it("should remove key and reset to initialValue", () => {
     const key = `${keyPrefix}-remove`;
     localStorage.setItem(key, JSON.stringify({ ok: true }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { ok: false }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { ok: false }));
     const remove = result.current[2];
     act(() => {
       remove();
@@ -62,9 +54,7 @@ describe("useLocalStorage", () => {
 
   it("should reconcile when storage event fires for same key", () => {
     const key = `${keyPrefix}-storage`;
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { v: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { v: 0 }));
     act(() => {
       window.dispatchEvent(
         new StorageEvent("storage", {
@@ -74,16 +64,14 @@ describe("useLocalStorage", () => {
         }),
       );
     });
-    const value= result.current[0];
+    const value = result.current[0];
     expect(value).toEqual({ v: 99 });
   });
 
   it("should reset to initial when storage event clears key", () => {
     const key = `${keyPrefix}-cleared`;
     localStorage.setItem(key, JSON.stringify({ v: 1 }));
-    const { result } = renderHook(() =>
-      useLocalStorage(key, { v: 0 }),
-    );
+    const { result } = renderHook(() => useLocalStorage(key, { v: 0 }));
     act(() => {
       window.dispatchEvent(
         new StorageEvent("storage", {
@@ -93,7 +81,7 @@ describe("useLocalStorage", () => {
         }),
       );
     });
-    const value= result.current[0];
+    const value = result.current[0];
     expect(value).toEqual({ v: 0 });
   });
 });

package/src/hooks/useLocalStorage/useLocalStorage.ts

@@ -41,15 +41,15 @@ export function useLocalStorage<T>(
   key: string,
   initialValue: T,
 ): UseLocalStorageResult<T> {
-  const [stored, setStored] = useState<T>(() =>
-    readValue(key, initialValue),
-  );
+  const [stored, setStored] = useState<T>(() => readValue(key, initialValue));
 
   const setValue = useCallback(
     (value: T | ((previous: T) => T)) => {
       setStored((previous) => {
         const next =
-          typeof value === "function" ? (value as (p: T) => T)(previous) : value;
+          typeof value === "function"
+            ? (value as (p: T) => T)(previous)
+            : value;
         try {
           if (typeof window !== "undefined") {
             window.localStorage.setItem(key, JSON.stringify(next));

package/src/hooks/useMediaQuery/useMediaQuery.ts

@@ -12,10 +12,7 @@ import { useEffect, useState } from "react";
  * @param defaultValue - Value to use before hydration or when `matchMedia` is unavailable (default `false`).
  * @returns Current `matches` boolean for the query.
  */
-export function useMediaQuery(
-  query: string,
-  defaultValue = false,
-): boolean {
+export function useMediaQuery(query: string, defaultValue = false): boolean {
   const [matches, setMatches] = useState(defaultValue);
 
   useEffect(() => {

package/src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.test.ts

@@ -21,7 +21,9 @@ describe("usePrefersReducedMotion", () => {
         }) as unknown as MediaQueryList,
     );
     const { result } = renderHook(() => usePrefersReducedMotion());
-    expect(matchMediaSpy).toHaveBeenCalledWith("(prefers-reduced-motion: reduce)");
+    expect(matchMediaSpy).toHaveBeenCalledWith(
+      "(prefers-reduced-motion: reduce)",
+    );
     expect(result.current).toBe(true);
   });
 });

package/src/hooks/useResizeObserver/index.ts

@@ -1,4 +1 @@
-export {
-  useResizeObserver,
-  type ElementSize,
-} from "./useResizeObserver";
+export { useResizeObserver, type ElementSize } from "./useResizeObserver";

package/src/hooks/useSessionStorage/useSessionStorage.test.ts

@@ -19,18 +19,14 @@ describe("useSessionStorage", () => {
   it("should apply stored value from sessionStorage after mount", async () => {
     const key = `${keyPrefix}-hydrate`;
     sessionStorage.setItem(key, JSON.stringify("stored"));
-    const { result } = renderHook(() =>
-      useSessionStorage(key, "initial"),
-    );
+    const { result } = renderHook(() => useSessionStorage(key, "initial"));
     await flushEffects();
     expect(result.current[0]).toBe("stored");
   });
 
   it("should persist setValue to sessionStorage", async () => {
     const key = `${keyPrefix}-persist`;
-    const { result } = renderHook(() =>
-      useSessionStorage(key, { n: 0 }),
-    );
+    const { result } = renderHook(() => useSessionStorage(key, { n: 0 }));
     await flushEffects();
     act(() => {
       result.current[1]({ n: 3 });

package/src/hooks/useSessionStorage/useSessionStorage.ts

@@ -47,7 +47,9 @@ export function useSessionStorage<T>(
     (value: T | ((previous: T) => T)) => {
       setStored((previous) => {
         const next =
-          typeof value === "function" ? (value as (p: T) => T)(previous) : value;
+          typeof value === "function"
+            ? (value as (p: T) => T)(previous)
+            : value;
         try {
           if (typeof window !== "undefined") {
             window.sessionStorage.setItem(key, JSON.stringify(next));
@@ -74,7 +76,7 @@ export function useSessionStorage<T>(
 
   useEffect(() => {
     const next = readValue(key, initialValue);
-  
+
     setStored((prev) => {
       return JSON.stringify(prev) === JSON.stringify(next) ? prev : next;
     });

package/src/hooks/useThrottledCallback/useThrottledCallback.ts

@@ -13,9 +13,10 @@ import { useCallback, useEffect, useRef } from "react";
  * @param intervalMs - Minimum milliseconds between invocations.
  * @returns Throttled function with the same call signature as `callback`.
  */
-export function useThrottledCallback<
-  T extends (...args: any[]) => void,
->(callback: T, intervalMs: number): T {
+export function useThrottledCallback<T extends (...args: any[]) => void>(
+  callback: T,
+  intervalMs: number,
+): T {
   const callbackRef = useRef(callback);
   const lastRunRef = useRef(0);
 

package/src/hooks/useWindowSize/useWindowSize.ts

@@ -26,7 +26,10 @@ export function useWindowSize(): WindowSize {
 
   useEffect(() => {
     const onResize = () => {
-      setSize({ width: window.innerWidth || 0, height: window.innerHeight || 0 });
+      setSize({
+        width: window.innerWidth || 0,
+        height: window.innerHeight || 0,
+      });
     };
     onResize();
     window.addEventListener("resize", onResize);

package/src/lib/utils.ts

@@ -10,7 +10,7 @@ export const clampPage = (page: number, pageCount: number): number => {
     return 1;
   }
   return Math.min(pageCount, Math.max(1, Math.floor(page)));
-}
+};
 
 export const range = (from: number, to: number): number[] => {
   const out: number[] = [];
@@ -18,8 +18,8 @@ export const range = (from: number, to: number): number[] => {
     out.push(i);
   }
   return out;
-}
+};
 
 export const clamp = (value: number, min: number, max: number) => {
   return Math.min(max, Math.max(min, value));
-}
+};

package/src/ui/accordion/accordion.tsx

@@ -1,5 +1,10 @@
 // accordion.tsx — default static entry (no framer-motion on content)
-import { AccordionBase, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion-base";
+import {
+  AccordionBase,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion-base";
 import type { AccordionProps } from "./types";
 
 export function Accordion(props: AccordionProps) {

package/src/ui/accordion/animated/accordion-content-animated.tsx

@@ -16,10 +16,7 @@ export function AccordionContentAnimated({
   ref,
 }: AccordionContentAnimatedProps) {
   const itemValue = useAccordionItemValue("AccordionContent");
-  const {
-    isOpen,
-    size,
-  } = useAccordionContext("AccordionContent");
+  const { isOpen, size } = useAccordionContext("AccordionContent");
   const open = isOpen(itemValue);
   const panelId = `${itemValue}-panel`;
   const transitionConfig = accordionContentTransitionPresets[transitionVariant];

package/src/ui/accordion/animated/index.ts

@@ -3,5 +3,8 @@
 export { Accordion } from "./accordion-root-animated";
 export { AccordionItem, AccordionTrigger } from "../accordion-base";
 export { AccordionContentAnimated } from "./accordion-content-animated";
-export type { AccordionAnimatedProps, AccordionContentAnimatedProps } from "./types";
+export type {
+  AccordionAnimatedProps,
+  AccordionContentAnimatedProps,
+} from "./types";
 export { accordionContentTransitionPresets } from "./animations";

package/src/ui/accordion/animated/types.ts

@@ -1,7 +1,11 @@
-import type { AccordionBaseProps, AccordionContentProps, AccordionTransition } from "../types";
+import type {
+  AccordionBaseProps,
+  AccordionContentProps,
+  AccordionTransition,
+} from "../types";
 
 export type AccordionAnimatedProps = AccordionBaseProps;
 
 export type AccordionContentAnimatedProps = AccordionContentProps & {
   transitionVariant?: AccordionTransition;
-};
+};

package/src/ui/alert/alert-base.tsx

@@ -9,7 +9,12 @@ import {
 
 import { cn } from "../../lib/utils";
 
-import type { AlertBaseProps, AlertProps, AlertSectionProps, AlertSize } from "./types";
+import type {
+  AlertBaseProps,
+  AlertProps,
+  AlertSectionProps,
+  AlertSize,
+} from "./types";
 import {
   alertDescriptionVariants,
   alertTitleVariants,

package/src/ui/alert/alert.tsx

@@ -4,6 +4,6 @@ import type { AlertProps } from "./types";
 
 export const Alert = (props: AlertProps) => {
   return <AlertBase {...props} />;
-}
+};
 
-Alert.displayName = "Alert";
+Alert.displayName = "Alert";

package/src/ui/alert/animated/index.ts

@@ -1,3 +1,3 @@
 export { AlertAnimated } from "./alert-animated";
-export type { AlertAnimatedProps} from "./types";
-export { alertAnimationPresets } from "./animations";
+export type { AlertAnimatedProps } from "./types";
+export { alertAnimationPresets } from "./animations";

package/src/ui/alert/animated/types.ts

@@ -13,4 +13,4 @@ export type AlertPresetMotionProps = Pick<
 export type AlertAnimationPresets = Record<
   AlertAnimation,
   AlertPresetMotionProps
->;
+>;

package/src/ui/alert/types.ts

@@ -4,7 +4,7 @@ import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
 import type { alertVariants } from "./variants";
 
 export type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
-export type AlertAppearance = VariantProps<typeof alertVariants>["appearance"]; 
+export type AlertAppearance = VariantProps<typeof alertVariants>["appearance"];
 export type AlertSize = VariantProps<typeof alertVariants>["size"];
 
 export interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
@@ -18,11 +18,9 @@ export interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
   as?: ElementType;
 }
 
-
 export type AlertSectionProps = {
   className?: string;
   children?: ReactNode;
 };
 
 export type AlertProps = Omit<AlertBaseProps, "as">;
-