@helpwave/hightide 0.1.24 → 0.1.26

package/dist/components/utils/FocusTrap.mjs

@@ -0,0 +1,229 @@
+"use client";
+
+// src/components/utils/FocusTrap.tsx
+import { useRef as useRef2 } from "react";
+import { useImperativeHandle } from "react";
+import { forwardRef } from "react";
+
+// src/hooks/focus/useFocusTrap.ts
+import { useCallback, useEffect as useEffect2, useId, useRef, useState as useState2 } from "react";
+
+// src/hooks/focus/useIsMounted.ts
+import { useEffect, useLayoutEffect, useState } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect : useEffect;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
+
+// src/hooks/focus/useFocusTrap.ts
+var createFocusGuard = () => {
+  const div = document.createElement("div");
+  Object.assign(div.style, {
+    opacity: "0",
+    outline: "none",
+    boxShadow: "none",
+    position: "fixed",
+    pointerEvents: "none",
+    touchAction: "none"
+  });
+  div.tabIndex = 0;
+  div.setAttribute("data-hw-focus-guard", "");
+  document.body.appendChild(div);
+  return div;
+};
+function getContainedFocusableElements(element) {
+  return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+}
+var FocusTrapService = class {
+  constructor() {
+    // The last entry is always the active one
+    this.listeners = [];
+    this.onFocusIn = (event) => {
+      const active = this.getActive();
+      if (!active || !active.container.current) return;
+      const { container } = active;
+      if (!container.current.contains(event.target)) {
+        this.focusElement();
+      }
+    };
+  }
+  getActive() {
+    if (this.listeners.length === 0) return void 0;
+    return this.listeners[this.listeners.length - 1];
+  }
+  focusElement() {
+    const active = this.getActive();
+    if (!active) return;
+    const { container, initialFocusElement } = active;
+    const containerElement = container.current;
+    if (initialFocusElement?.current) {
+      initialFocusElement.current.focus();
+    } else {
+      const elements = getContainedFocusableElements(containerElement);
+      if (elements && elements.length > 0) {
+        const first = elements.item(0);
+        first.focus();
+      } else {
+        containerElement.focus();
+      }
+    }
+  }
+  removeGuards() {
+    document.querySelectorAll("[data-hw-focus-guard]").forEach((node) => node.remove());
+  }
+  addGuards() {
+    document.body.insertAdjacentElement("afterbegin", createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", createFocusGuard());
+  }
+  activate() {
+    document.addEventListener("focusin", this.onFocusIn);
+    this.addGuards();
+  }
+  deactivate() {
+    document.removeEventListener("focusin", this.onFocusIn);
+    this.removeGuards();
+  }
+  register(listener) {
+    this.listeners.push(listener);
+    if (this.listeners.length === 1) {
+      this.activate();
+    }
+    const active = listener;
+    this.listeners.forEach((listener2) => {
+      const { focus, pause } = listener2;
+      if (listener2 === active) {
+        focus();
+      } else {
+        pause();
+      }
+    });
+  }
+  unregister(id) {
+    const index = this.listeners.findIndex((trap) => trap.id === id);
+    if (index !== -1) {
+      const isActive = index === this.listeners.length - 1;
+      const listener = this.listeners[index];
+      this.listeners = this.listeners.filter((listener2) => listener2.id !== id);
+      if (isActive) {
+        this.deactivate();
+        listener.focusLast();
+        const active = this.getActive();
+        this.listeners.forEach((listener2) => {
+          const { pause, unpause } = listener2;
+          if (listener2 === active) {
+            unpause();
+          } else {
+            pause();
+          }
+        });
+        if (this.listeners.length > 0) {
+          this.activate();
+        }
+      }
+    } else {
+      console.warn(`Unable to unregister id ${id}: not found`);
+    }
+  }
+};
+var service = new FocusTrapService();
+var useFocusTrap = ({
+  container,
+  active = true,
+  initialFocus,
+  focusFirst = true
+}) => {
+  const lastFocusRef = useRef(null);
+  const [paused, setPaused] = useState2(false);
+  const isMounted = useIsMounted();
+  const id = useId();
+  const focusElement = useCallback(() => {
+    const containerElement = container.current;
+    if (initialFocus?.current) {
+      initialFocus.current.focus();
+    } else {
+      const elements = getContainedFocusableElements(containerElement);
+      if (elements && elements.length > 0) {
+        const first = elements.item(0);
+        first.focus();
+      } else {
+        containerElement.focus();
+      }
+    }
+  }, [container, initialFocus]);
+  useEffect2(() => {
+    if (active && isMounted) {
+      let pause = function() {
+        setPaused(true);
+      }, unpause = function() {
+        setPaused(false);
+        if (!container.current.contains(document.activeElement)) {
+          focusElement();
+        }
+      }, focus = function() {
+        focusElement();
+        setPaused(false);
+      }, focusLast = function() {
+        lastFocusRef.current?.focus();
+      };
+      if (!lastFocusRef.current) {
+        lastFocusRef.current = document.activeElement;
+      }
+      service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
+      return () => {
+        service.unregister(id);
+        lastFocusRef.current = void 0;
+      };
+    }
+  }, [active, container, focusElement, id, initialFocus, isMounted]);
+  useEffect2(() => {
+    if (active && !paused && isMounted) {
+      let onKeyDown = function(event) {
+        const key = event.key;
+        const elements = getContainedFocusableElements(containerElement);
+        const active2 = document.activeElement;
+        const index = [...elements].findIndex((value) => value === active2);
+        if (index === -1 || event.altKey || event.ctrlKey || event.metaKey) {
+          return;
+        }
+        if (key === "Tab") {
+          const next = event.shiftKey ? -1 : 1;
+          const nextIndex = (index + next + elements.length) % elements.length;
+          const nextElement = elements[nextIndex];
+          nextElement.focus();
+          event.preventDefault();
+        }
+      };
+      const containerElement = container.current;
+      containerElement.addEventListener("keydown", onKeyDown);
+      return () => {
+        containerElement.removeEventListener("keydown", onKeyDown);
+      };
+    }
+  }, [active, paused, isMounted, container, initialFocus, focusFirst, focusElement]);
+};
+
+// src/components/utils/FocusTrap.tsx
+import { jsx } from "react/jsx-runtime";
+var FocusTrap = forwardRef(function FocusTrap2({
+  active = true,
+  initialFocus,
+  focusFirst = false,
+  ...props
+}, forwardedRef) {
+  const innerRef = useRef2(null);
+  useImperativeHandle(forwardedRef, () => innerRef.current);
+  useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
+  return /* @__PURE__ */ jsx("div", { ref: innerRef, ...props });
+});
+export {
+  FocusTrap
+};
+//# sourceMappingURL=FocusTrap.mjs.map

package/dist/components/utils/FocusTrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/utils/FocusTrap.tsx","../../../src/hooks/focus/useFocusTrap.ts","../../../src/hooks/focus/useIsMounted.ts"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, MutableRefObject } from 'react'\nimport { useRef } from 'react'\nimport { useImperativeHandle } from 'react'\nimport { forwardRef } from 'react'\nimport { useFocusTrap } from '@/src/hooks/focus/useFocusTrap'\n\nexport type FocusTrapProps = HTMLAttributes<HTMLDivElement> & {\n  active?: boolean,\n  initialFocus?: MutableRefObject<HTMLElement>,\n  /**\n   * Whether to focus the first element when the initialFocus isn't provided\n   *\n   * Focuses the container instead\n   */\n  focusFirst?: boolean,\n}\n\n/**\n * A wrapper for the useFocusTrap hook that directly renders it to a div\n */\nexport const FocusTrap = forwardRef<HTMLDivElement, FocusTrapProps>(function FocusTrap({\n                                                                                         active = true,\n                                                                                         initialFocus,\n                                                                                         focusFirst = false,\n                                                                                         ...props\n                                                                                       }, forwardedRef) {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(forwardedRef, () => innerRef.current)\n\n  useFocusTrap({ container: innerRef, active, initialFocus, focusFirst })\n\n  return (\n    <div ref={innerRef} {...props}/>\n  )\n})","'use client'\n\nimport type { MutableRefObject } from 'react'\nimport { useCallback, useEffect, useId, useRef, useState } from 'react'\nimport { useIsMounted } from '@/src/hooks/focus/useIsMounted'\n\nconst createFocusGuard = () => {\n  const div = document.createElement('div')\n  Object.assign(div.style, {\n    opacity: '0',\n    outline: 'none',\n    boxShadow: 'none',\n    position: 'fixed',\n    pointerEvents: 'none',\n    touchAction: 'none',\n  })\n  div.tabIndex = 0\n  div.setAttribute('data-hw-focus-guard', '')\n  document.body.appendChild(div)\n  return div\n}\n\nfunction getContainedFocusableElements(element: HTMLElement) {\n  return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n}\n\ntype ListenerType = {\n  id: string,\n  pause: () => void,\n  unpause: () => void,\n  focus: () => void,\n  focusLast: () => void,\n  container: MutableRefObject<HTMLElement>,\n  initialFocusElement: MutableRefObject<HTMLElement>,\n}\n\nclass FocusTrapService {\n  // The last entry is always the active one\n  private listeners: ListenerType[] = []\n\n  public getActive(): ListenerType | undefined {\n    if (this.listeners.length === 0) return undefined\n    return this.listeners[this.listeners.length - 1]\n  }\n\n  private focusElement() {\n    const active = this.getActive()\n    if(!active) return\n    const { container, initialFocusElement } = active\n    const containerElement = container.current\n    // Try in the following order\n    // 1. Focus the initial element\n    // 2. Focus the first focusable element in the container\n    // 3. Focus the container\n    if (initialFocusElement?.current) {\n      initialFocusElement.current.focus()\n    } else {\n      const elements = getContainedFocusableElements(containerElement)\n      if (elements && elements.length > 0) {\n        const first = elements.item(0) as HTMLElement\n        first.focus()\n      } else {\n        containerElement.focus()\n      }\n    }\n  }\n\n  private onFocusIn = (event: FocusEvent) => {\n    const active = this.getActive()\n    if(!active || !active.container.current) return\n    const { container } = active\n    if (!container.current.contains(event.target as HTMLElement)) {\n      this.focusElement()\n    }\n  }\n\n  private removeGuards() {\n    document.querySelectorAll('[data-hw-focus-guard]').forEach((node) => node.remove())\n  }\n\n  private addGuards() {\n    document.body.insertAdjacentElement('afterbegin', createFocusGuard())\n    document.body.insertAdjacentElement('beforeend', createFocusGuard())\n  }\n\n  private activate() {\n    document.addEventListener('focusin', this.onFocusIn)\n    this.addGuards()\n  }\n\n  private deactivate() {\n    document.removeEventListener('focusin', this.onFocusIn)\n    this.removeGuards()\n  }\n\n  register(listener: ListenerType) {\n    this.listeners.push(listener)\n    if (this.listeners.length === 1) {\n      this.activate()\n    }\n    const active = listener\n    this.listeners.forEach((listener) => {\n      const { focus, pause } = listener\n      if (listener === active) {\n        focus()\n      } else {\n        pause()\n      }\n    })\n  }\n\n  unregister(id: string) {\n    const index = this.listeners.findIndex(trap => trap.id === id)\n    if (index !== -1) {\n      const isActive = index === this.listeners.length - 1\n      const listener = this.listeners[index]\n      this.listeners = this.listeners.filter(listener => listener.id !== id)\n      if (isActive) {\n        // Deactivate all focus traps\n        this.deactivate()\n        // Focus last element in previous focus context\n        listener.focusLast()\n        // Activate and pause remaining focus traps\n        const active = this.getActive()\n        this.listeners.forEach((listener) => {\n          const { pause, unpause } = listener\n          if (listener === active) {\n            unpause()\n          } else {\n            pause()\n          }\n        })\n        // Reactivate\n        if (this.listeners.length > 0) {\n          this.activate()\n        }\n      }\n    } else {\n      console.warn(`Unable to unregister id ${id}: not found`)\n    }\n  }\n}\n\nconst service = new FocusTrapService()\n\nexport type UseFocusTrapProps = {\n  container: MutableRefObject<HTMLElement>,\n  active?: boolean,\n  initialFocus?: MutableRefObject<HTMLElement>,\n  /**\n   * Whether to focus the first element when the initialFocus isn't provided\n   *\n   * Focuses the container instead\n   */\n  focusFirst?: boolean,\n}\n\nexport const useFocusTrap = ({\n                               container,\n                               active = true,\n                               initialFocus,\n                               focusFirst = true,\n                             }: UseFocusTrapProps) => {\n  const lastFocusRef = useRef<HTMLElement | null>(null)\n  const [paused, setPaused] = useState(false)\n  const isMounted = useIsMounted()\n  const id = useId()\n\n  const focusElement = useCallback(() => {\n    const containerElement = container.current\n    // Try in the following order\n    // 1. Focus the initial element\n    // 2. Focus the first focusable element in the container\n    // 3. Focus the container\n    if (initialFocus?.current) {\n      initialFocus.current.focus()\n    } else {\n      const elements = getContainedFocusableElements(containerElement)\n      if (elements && elements.length > 0) {\n        const first = elements.item(0) as HTMLElement\n        first.focus()\n      } else {\n        containerElement.focus()\n      }\n    }\n  }, [container, initialFocus])\n\n  useEffect(() => {\n    if (active && isMounted) {\n      if (!lastFocusRef.current) {\n        lastFocusRef.current = document.activeElement as HTMLElement\n      }\n\n      function pause() {\n        setPaused(true)\n      }\n\n      function unpause() {\n        setPaused(false)\n        if (!container.current.contains(document.activeElement as HTMLElement)) {\n          focusElement()\n        }\n      }\n\n      function focus() {\n        focusElement()\n        setPaused(false)\n      }\n\n      function focusLast() {\n        lastFocusRef.current?.focus()\n      }\n\n      service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus })\n      return () => {\n        service.unregister(id)\n        lastFocusRef.current = undefined\n      }\n    }\n  }, [active, container, focusElement, id, initialFocus, isMounted])\n\n  useEffect(() => {\n    if (active && !paused && isMounted) {\n      const containerElement = container.current\n\n      function onKeyDown(event: KeyboardEvent) {\n        const key = event.key\n        const elements = getContainedFocusableElements(containerElement)\n        const active = document.activeElement as HTMLElement\n        const index = [...elements].findIndex(value => value === active)\n        if (index === -1 || event.altKey || event.ctrlKey || event.metaKey) {\n          return\n        }\n        if (key === 'Tab') {\n          const next = event.shiftKey ? -1 : 1\n          const nextIndex = (index + next + elements.length) % elements.length\n          const nextElement = elements[nextIndex] as HTMLElement\n          nextElement.focus()\n          event.preventDefault()\n        }\n      }\n\n      // Register and unregister the listeners\n      containerElement.addEventListener('keydown', onKeyDown)\n      return () => {\n        containerElement.removeEventListener('keydown', onKeyDown)\n      }\n    }\n  }, [active, paused, isMounted, container, initialFocus, focusFirst, focusElement])\n}","'use client'\n\nimport { useEffect, useLayoutEffect, useState } from 'react'\n\nconst isClient = typeof window !== 'undefined' && typeof document !== 'undefined'\nconst useIsomorphicEffect = isClient ? useLayoutEffect : useEffect\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false)\n\n  useIsomorphicEffect(() => {\n    setIsMounted(true)\n    return () => {\n      setIsMounted(false)\n    }\n  }, [])\n  return isMounted\n}"],"mappings":"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","names":["useRef","useEffect","useState","listener","useState","useEffect","active","FocusTrap","useRef"]}

package/dist/components/utils/Transition.d.mts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { PropsWithBagFunctionOrChildren } from '../../utils/bagFunctions.mjs';
+
+type TransitionBag = {
+    isOpen: boolean;
+    isTransitioning: boolean;
+    isUsingReducedMotion: boolean;
+    data: {
+        [key: `data-${string}`]: string | undefined;
+    };
+    handlers: {
+        onTransitionEnd?: () => void;
+        onAnimationEnd?: () => void;
+        onTransitionCancel?: () => void;
+    };
+};
+type TransitionWrapperProps = PropsWithBagFunctionOrChildren<TransitionBag> & {
+    show: boolean;
+    includeAnimation?: boolean;
+};
+/**
+ * Only use when you have a transition happening
+ */
+declare function Transition({ children, show, includeAnimation, }: TransitionWrapperProps): React.ReactNode;
+
+export { Transition, type TransitionWrapperProps };

package/dist/components/utils/Transition.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { PropsWithBagFunctionOrChildren } from '../../utils/bagFunctions.js';
+
+type TransitionBag = {
+    isOpen: boolean;
+    isTransitioning: boolean;
+    isUsingReducedMotion: boolean;
+    data: {
+        [key: `data-${string}`]: string | undefined;
+    };
+    handlers: {
+        onTransitionEnd?: () => void;
+        onAnimationEnd?: () => void;
+        onTransitionCancel?: () => void;
+    };
+};
+type TransitionWrapperProps = PropsWithBagFunctionOrChildren<TransitionBag> & {
+    show: boolean;
+    includeAnimation?: boolean;
+};
+/**
+ * Only use when you have a transition happening
+ */
+declare function Transition({ children, show, includeAnimation, }: TransitionWrapperProps): React.ReactNode;
+
+export { Transition, type TransitionWrapperProps };

package/dist/components/utils/Transition.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/utils/Transition.tsx
+var Transition_exports = {};
+__export(Transition_exports, {
+  Transition: () => Transition
+});
+module.exports = __toCommonJS(Transition_exports);
+var import_react = require("react");
+
+// src/utils/bagFunctions.ts
+var resolve = (children, bag) => {
+  if (typeof children === "function") {
+    return children(bag);
+  }
+  return children ?? void 0;
+};
+var BagFunctionUtil = {
+  resolve
+};
+
+// src/components/utils/Transition.tsx
+function Transition({
+  children,
+  show,
+  includeAnimation = true
+}) {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react.useState)(!isOpen);
+  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
+  (0, import_react.useEffect)(() => {
+    setIsOpen(show);
+    setIsTransitioning(true);
+  }, [show]);
+  const onAnimationEnd = () => setIsTransitioning(false);
+  const bag = {
+    isOpen,
+    isTransitioning,
+    isUsingReducedMotion,
+    data: {
+      "data-open": isOpen && !isTransitioning ? "" : void 0,
+      "data-opening": isOpen && isTransitioning ? "" : void 0,
+      "data-closing": !isOpen && isTransitioning ? "" : void 0,
+      "data-closed": !isOpen && !isTransitioning ? "" : void 0
+    },
+    handlers: {
+      onTransitionEnd: () => setIsTransitioning(false),
+      onTransitionCancel: () => setIsTransitioning(false),
+      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
+    }
+  };
+  return BagFunctionUtil.resolve(children, bag);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Transition
+});
+//# sourceMappingURL=Transition.js.map

package/dist/components/utils/Transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/utils/Transition.tsx","../../../src/utils/bagFunctions.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport type { PropsWithBagFunctionOrChildren } from '@/src/utils/bagFunctions'\nimport { BagFunctionUtil } from '@/src/utils/bagFunctions'\n\ntype TransitionBag = {\n  isOpen: boolean,\n  isTransitioning: boolean,\n  isUsingReducedMotion: boolean,\n  data: { [key: `data-${string}`]: string | undefined },\n  handlers: {\n    onTransitionEnd?: () => void,\n    onAnimationEnd?: () => void,\n    onTransitionCancel?: () => void,\n  },\n}\n\nexport type TransitionWrapperProps = PropsWithBagFunctionOrChildren<TransitionBag> & {\n  show: boolean,\n  includeAnimation?: boolean,\n}\n\n/**\n * Only use when you have a transition happening\n */\nexport function Transition({\n                             children,\n                             show,\n                             includeAnimation = true,\n                           }: TransitionWrapperProps) {\n  const [isOpen, setIsOpen] = useState<boolean>(show)\n  const [isTransitioning, setIsTransitioning] = useState<boolean>(!isOpen)\n\n  const isUsingReducedMotion = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ?\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches : true\n\n  useEffect(() => {\n    setIsOpen(show)\n    setIsTransitioning(true)\n  }, [show])\n\n  const onAnimationEnd = () => setIsTransitioning(false)\n\n  const bag: TransitionBag = {\n    isOpen,\n    isTransitioning,\n    isUsingReducedMotion,\n    data: {\n      'data-open': (isOpen && !isTransitioning) ? '' : undefined,\n      'data-opening': (isOpen && isTransitioning) ? '' : undefined,\n      'data-closing': (!isOpen && isTransitioning) ? '' : undefined,\n      'data-closed': (!isOpen && !isTransitioning) ? '' : undefined,\n    },\n    handlers: {\n      onTransitionEnd: () => setIsTransitioning(false),\n      onTransitionCancel: () => setIsTransitioning(false),\n      onAnimationEnd: includeAnimation ? onAnimationEnd : undefined,\n    }\n  }\n\n  return BagFunctionUtil.resolve(children, bag)\n}","import type { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type BagFunctionOrNode<T> = BagFunction<T> | ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?:  BagFunctionOrNode<T> }\n\nconst resolve = <T>(children:  BagFunctionOrNode<T>, bag: T): ReactNode => {\n  if (typeof children === 'function') {\n    return (children as BagFunction<T>)(bag)\n  }\n\n  return children ?? undefined\n}\n\nexport const BagFunctionUtil = {\n  resolve\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC;;;ACUpC,IAAM,UAAU,CAAI,UAAiC,QAAsB;AACzE,MAAI,OAAO,aAAa,YAAY;AAClC,WAAQ,SAA4B,GAAG;AAAA,EACzC;AAEA,SAAO,YAAY;AACrB;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AACF;;;ADIO,SAAS,WAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA,mBAAmB;AACrB,GAA2B;AACpD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,IAAI;AAClD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAkB,CAAC,MAAM;AAEvE,QAAM,uBAAuB,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aACzF,OAAO,WAAW,kCAAkC,EAAE,UAAU;AAElE,8BAAU,MAAM;AACd,cAAU,IAAI;AACd,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,iBAAiB,MAAM,mBAAmB,KAAK;AAErD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,aAAc,UAAU,CAAC,kBAAmB,KAAK;AAAA,MACjD,gBAAiB,UAAU,kBAAmB,KAAK;AAAA,MACnD,gBAAiB,CAAC,UAAU,kBAAmB,KAAK;AAAA,MACpD,eAAgB,CAAC,UAAU,CAAC,kBAAmB,KAAK;AAAA,IACtD;AAAA,IACA,UAAU;AAAA,MACR,iBAAiB,MAAM,mBAAmB,KAAK;AAAA,MAC/C,oBAAoB,MAAM,mBAAmB,KAAK;AAAA,MAClD,gBAAgB,mBAAmB,iBAAiB;AAAA,IACtD;AAAA,EACF;AAEA,SAAO,gBAAgB,QAAQ,UAAU,GAAG;AAC9C;","names":[]}

package/dist/components/utils/Transition.mjs

@@ -0,0 +1,50 @@
+// src/components/utils/Transition.tsx
+import { useEffect, useState } from "react";
+
+// src/utils/bagFunctions.ts
+var resolve = (children, bag) => {
+  if (typeof children === "function") {
+    return children(bag);
+  }
+  return children ?? void 0;
+};
+var BagFunctionUtil = {
+  resolve
+};
+
+// src/components/utils/Transition.tsx
+function Transition({
+  children,
+  show,
+  includeAnimation = true
+}) {
+  const [isOpen, setIsOpen] = useState(show);
+  const [isTransitioning, setIsTransitioning] = useState(!isOpen);
+  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
+  useEffect(() => {
+    setIsOpen(show);
+    setIsTransitioning(true);
+  }, [show]);
+  const onAnimationEnd = () => setIsTransitioning(false);
+  const bag = {
+    isOpen,
+    isTransitioning,
+    isUsingReducedMotion,
+    data: {
+      "data-open": isOpen && !isTransitioning ? "" : void 0,
+      "data-opening": isOpen && isTransitioning ? "" : void 0,
+      "data-closing": !isOpen && isTransitioning ? "" : void 0,
+      "data-closed": !isOpen && !isTransitioning ? "" : void 0
+    },
+    handlers: {
+      onTransitionEnd: () => setIsTransitioning(false),
+      onTransitionCancel: () => setIsTransitioning(false),
+      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
+    }
+  };
+  return BagFunctionUtil.resolve(children, bag);
+}
+export {
+  Transition
+};
+//# sourceMappingURL=Transition.mjs.map

package/dist/components/utils/Transition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/utils/Transition.tsx","../../../src/utils/bagFunctions.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport type { PropsWithBagFunctionOrChildren } from '@/src/utils/bagFunctions'\nimport { BagFunctionUtil } from '@/src/utils/bagFunctions'\n\ntype TransitionBag = {\n  isOpen: boolean,\n  isTransitioning: boolean,\n  isUsingReducedMotion: boolean,\n  data: { [key: `data-${string}`]: string | undefined },\n  handlers: {\n    onTransitionEnd?: () => void,\n    onAnimationEnd?: () => void,\n    onTransitionCancel?: () => void,\n  },\n}\n\nexport type TransitionWrapperProps = PropsWithBagFunctionOrChildren<TransitionBag> & {\n  show: boolean,\n  includeAnimation?: boolean,\n}\n\n/**\n * Only use when you have a transition happening\n */\nexport function Transition({\n                             children,\n                             show,\n                             includeAnimation = true,\n                           }: TransitionWrapperProps) {\n  const [isOpen, setIsOpen] = useState<boolean>(show)\n  const [isTransitioning, setIsTransitioning] = useState<boolean>(!isOpen)\n\n  const isUsingReducedMotion = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ?\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches : true\n\n  useEffect(() => {\n    setIsOpen(show)\n    setIsTransitioning(true)\n  }, [show])\n\n  const onAnimationEnd = () => setIsTransitioning(false)\n\n  const bag: TransitionBag = {\n    isOpen,\n    isTransitioning,\n    isUsingReducedMotion,\n    data: {\n      'data-open': (isOpen && !isTransitioning) ? '' : undefined,\n      'data-opening': (isOpen && isTransitioning) ? '' : undefined,\n      'data-closing': (!isOpen && isTransitioning) ? '' : undefined,\n      'data-closed': (!isOpen && !isTransitioning) ? '' : undefined,\n    },\n    handlers: {\n      onTransitionEnd: () => setIsTransitioning(false),\n      onTransitionCancel: () => setIsTransitioning(false),\n      onAnimationEnd: includeAnimation ? onAnimationEnd : undefined,\n    }\n  }\n\n  return BagFunctionUtil.resolve(children, bag)\n}","import type { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type BagFunctionOrNode<T> = BagFunction<T> | ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?:  BagFunctionOrNode<T> }\n\nconst resolve = <T>(children:  BagFunctionOrNode<T>, bag: T): ReactNode => {\n  if (typeof children === 'function') {\n    return (children as BagFunction<T>)(bag)\n  }\n\n  return children ?? undefined\n}\n\nexport const BagFunctionUtil = {\n  resolve\n}"],"mappings":";AAAA,SAAS,WAAW,gBAAgB;;;ACUpC,IAAM,UAAU,CAAI,UAAiC,QAAsB;AACzE,MAAI,OAAO,aAAa,YAAY;AAClC,WAAQ,SAA4B,GAAG;AAAA,EACzC;AAEA,SAAO,YAAY;AACrB;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AACF;;;ADIO,SAAS,WAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA,mBAAmB;AACrB,GAA2B;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,IAAI;AAClD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAkB,CAAC,MAAM;AAEvE,QAAM,uBAAuB,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aACzF,OAAO,WAAW,kCAAkC,EAAE,UAAU;AAElE,YAAU,MAAM;AACd,cAAU,IAAI;AACd,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,iBAAiB,MAAM,mBAAmB,KAAK;AAErD,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,aAAc,UAAU,CAAC,kBAAmB,KAAK;AAAA,MACjD,gBAAiB,UAAU,kBAAmB,KAAK;AAAA,MACnD,gBAAiB,CAAC,UAAU,kBAAmB,KAAK;AAAA,MACpD,eAAgB,CAAC,UAAU,CAAC,kBAAmB,KAAK;AAAA,IACtD;AAAA,IACA,UAAU;AAAA,MACR,iBAAiB,MAAM,mBAAmB,KAAK;AAAA,MAC/C,oBAAoB,MAAM,mBAAmB,KAAK;AAAA,MAClD,gBAAgB,mBAAmB,iBAAiB;AAAA,IACtD;AAAA,EACF;AAEA,SAAO,gBAAgB,QAAQ,UAAU,GAAG;AAC9C;","names":[]}

package/dist/hooks/focus/useFocusGuards.d.mts

@@ -0,0 +1,3 @@
+declare const useFocusGuards: () => void;
+
+export { useFocusGuards };

package/dist/hooks/focus/useFocusGuards.d.ts

@@ -0,0 +1,3 @@
+declare const useFocusGuards: () => void;
+
+export { useFocusGuards };

package/dist/hooks/focus/useFocusGuards.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/focus/useFocusGuards.ts
+var useFocusGuards_exports = {};
+__export(useFocusGuards_exports, {
+  useFocusGuards: () => useFocusGuards
+});
+module.exports = __toCommonJS(useFocusGuards_exports);
+var import_react = require("react");
+var selectorName = "data-hw-focus-guard";
+function FocusGuard() {
+  const element = document.createElement("div");
+  element.setAttribute(selectorName, "");
+  element.tabIndex = 0;
+  element.style.border = "none";
+  element.style.outline = "none";
+  element.style.boxShadow = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+var FocusGuardsService = class _FocusGuardsService {
+  constructor() {
+    this.count = 0;
+  }
+  static getInstance() {
+    if (!_FocusGuardsService.instance) {
+      _FocusGuardsService.instance = new _FocusGuardsService();
+    }
+    return _FocusGuardsService.instance;
+  }
+  add() {
+    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
+    this.count++;
+  }
+  remove() {
+    if (this.count === 1) {
+      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
+    }
+    this.count--;
+  }
+};
+var useFocusGuards = () => {
+  (0, import_react.useEffect)(() => {
+    FocusGuardsService.getInstance().add();
+    return () => {
+      FocusGuardsService.getInstance().remove();
+    };
+  }, []);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFocusGuards
+});
+//# sourceMappingURL=useFocusGuards.js.map

package/dist/hooks/focus/useFocusGuards.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/focus/useFocusGuards.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nconst selectorName = 'data-hw-focus-guard'\n\nfunction FocusGuard() {\n  const element = document.createElement('div')\n  element.setAttribute(selectorName, '')\n  element.tabIndex = 0\n  element.style.border = 'none'\n  element.style.outline = 'none'\n  element.style.boxShadow = 'none'\n  element.style.opacity = '0'\n  element.style.position = 'fixed'\n  element.style.pointerEvents = 'none'\n  return element\n}\n\nclass FocusGuardsService {\n  private count: number = 0\n\n  private static instance: FocusGuardsService\n\n  private constructor() {}\n\n  static getInstance(): FocusGuardsService {\n    if (!FocusGuardsService.instance) {\n      FocusGuardsService.instance = new FocusGuardsService()\n    }\n    return FocusGuardsService.instance\n  }\n\n  add() {\n    const edgeGuards = document.querySelectorAll(`[${selectorName}]`)\n    document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? FocusGuard())\n    document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? FocusGuard())\n    this.count++\n  }\n\n  remove() {\n    if (this.count === 1) {\n      document.querySelectorAll(`[${selectorName}]`)\n        .forEach((node) => node.remove())\n    }\n    this.count--\n  }\n}\n\nexport const useFocusGuards = () => {\n  useEffect(() => {\n    FocusGuardsService.getInstance().add()\n    return () => {\n      FocusGuardsService.getInstance().remove()\n    }\n  }, [])\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,IAAM,eAAe;AAErB,SAAS,aAAa;AACpB,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,UAAQ,aAAa,cAAc,EAAE;AACrC,UAAQ,WAAW;AACnB,UAAQ,MAAM,SAAS;AACvB,UAAQ,MAAM,UAAU;AACxB,UAAQ,MAAM,YAAY;AAC1B,UAAQ,MAAM,UAAU;AACxB,UAAQ,MAAM,WAAW;AACzB,UAAQ,MAAM,gBAAgB;AAC9B,SAAO;AACT;AAEA,IAAM,qBAAN,MAAM,oBAAmB;AAAA,EAKf,cAAc;AAJtB,SAAQ,QAAgB;AAAA,EAID;AAAA,EAEvB,OAAO,cAAkC;AACvC,QAAI,CAAC,oBAAmB,UAAU;AAChC,0BAAmB,WAAW,IAAI,oBAAmB;AAAA,IACvD;AACA,WAAO,oBAAmB;AAAA,EAC5B;AAAA,EAEA,MAAM;AACJ,UAAM,aAAa,SAAS,iBAAiB,IAAI,YAAY,GAAG;AAChE,aAAS,KAAK,sBAAsB,cAAc,WAAW,CAAC,KAAK,WAAW,CAAC;AAC/E,aAAS,KAAK,sBAAsB,aAAa,WAAW,CAAC,KAAK,WAAW,CAAC;AAC9E,SAAK;AAAA,EACP;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,UAAU,GAAG;AACpB,eAAS,iBAAiB,IAAI,YAAY,GAAG,EAC1C,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AAAA,IACpC;AACA,SAAK;AAAA,EACP;AACF;AAEO,IAAM,iBAAiB,MAAM;AAClC,8BAAU,MAAM;AACd,uBAAmB,YAAY,EAAE,IAAI;AACrC,WAAO,MAAM;AACX,yBAAmB,YAAY,EAAE,OAAO;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}

package/dist/hooks/focus/useFocusGuards.mjs

@@ -0,0 +1,50 @@
+// src/hooks/focus/useFocusGuards.ts
+import { useEffect } from "react";
+var selectorName = "data-hw-focus-guard";
+function FocusGuard() {
+  const element = document.createElement("div");
+  element.setAttribute(selectorName, "");
+  element.tabIndex = 0;
+  element.style.border = "none";
+  element.style.outline = "none";
+  element.style.boxShadow = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+var FocusGuardsService = class _FocusGuardsService {
+  constructor() {
+    this.count = 0;
+  }
+  static getInstance() {
+    if (!_FocusGuardsService.instance) {
+      _FocusGuardsService.instance = new _FocusGuardsService();
+    }
+    return _FocusGuardsService.instance;
+  }
+  add() {
+    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
+    this.count++;
+  }
+  remove() {
+    if (this.count === 1) {
+      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
+    }
+    this.count--;
+  }
+};
+var useFocusGuards = () => {
+  useEffect(() => {
+    FocusGuardsService.getInstance().add();
+    return () => {
+      FocusGuardsService.getInstance().remove();
+    };
+  }, []);
+};
+export {
+  useFocusGuards
+};
+//# sourceMappingURL=useFocusGuards.mjs.map

package/dist/hooks/focus/useFocusGuards.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/focus/useFocusGuards.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nconst selectorName = 'data-hw-focus-guard'\n\nfunction FocusGuard() {\n  const element = document.createElement('div')\n  element.setAttribute(selectorName, '')\n  element.tabIndex = 0\n  element.style.border = 'none'\n  element.style.outline = 'none'\n  element.style.boxShadow = 'none'\n  element.style.opacity = '0'\n  element.style.position = 'fixed'\n  element.style.pointerEvents = 'none'\n  return element\n}\n\nclass FocusGuardsService {\n  private count: number = 0\n\n  private static instance: FocusGuardsService\n\n  private constructor() {}\n\n  static getInstance(): FocusGuardsService {\n    if (!FocusGuardsService.instance) {\n      FocusGuardsService.instance = new FocusGuardsService()\n    }\n    return FocusGuardsService.instance\n  }\n\n  add() {\n    const edgeGuards = document.querySelectorAll(`[${selectorName}]`)\n    document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? FocusGuard())\n    document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? FocusGuard())\n    this.count++\n  }\n\n  remove() {\n    if (this.count === 1) {\n      document.querySelectorAll(`[${selectorName}]`)\n        .forEach((node) => node.remove())\n    }\n    this.count--\n  }\n}\n\nexport const useFocusGuards = () => {\n  useEffect(() => {\n    FocusGuardsService.getInstance().add()\n    return () => {\n      FocusGuardsService.getInstance().remove()\n    }\n  }, [])\n}"],"mappings":";AAAA,SAAS,iBAAiB;AAE1B,IAAM,eAAe;AAErB,SAAS,aAAa;AACpB,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,UAAQ,aAAa,cAAc,EAAE;AACrC,UAAQ,WAAW;AACnB,UAAQ,MAAM,SAAS;AACvB,UAAQ,MAAM,UAAU;AACxB,UAAQ,MAAM,YAAY;AAC1B,UAAQ,MAAM,UAAU;AACxB,UAAQ,MAAM,WAAW;AACzB,UAAQ,MAAM,gBAAgB;AAC9B,SAAO;AACT;AAEA,IAAM,qBAAN,MAAM,oBAAmB;AAAA,EAKf,cAAc;AAJtB,SAAQ,QAAgB;AAAA,EAID;AAAA,EAEvB,OAAO,cAAkC;AACvC,QAAI,CAAC,oBAAmB,UAAU;AAChC,0BAAmB,WAAW,IAAI,oBAAmB;AAAA,IACvD;AACA,WAAO,oBAAmB;AAAA,EAC5B;AAAA,EAEA,MAAM;AACJ,UAAM,aAAa,SAAS,iBAAiB,IAAI,YAAY,GAAG;AAChE,aAAS,KAAK,sBAAsB,cAAc,WAAW,CAAC,KAAK,WAAW,CAAC;AAC/E,aAAS,KAAK,sBAAsB,aAAa,WAAW,CAAC,KAAK,WAAW,CAAC;AAC9E,SAAK;AAAA,EACP;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,UAAU,GAAG;AACpB,eAAS,iBAAiB,IAAI,YAAY,GAAG,EAC1C,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AAAA,IACpC;AACA,SAAK;AAAA,EACP;AACF;AAEO,IAAM,iBAAiB,MAAM;AAClC,YAAU,MAAM;AACd,uBAAmB,YAAY,EAAE,IAAI;AACrC,WAAO,MAAM;AACX,yBAAmB,YAAY,EAAE,OAAO;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}

package/dist/hooks/{useFocusManagement.js → focus/useFocusManagement.js}

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/hooks/useFocusManagement.ts
+// src/hooks/focus/useFocusManagement.ts
 var useFocusManagement_exports = {};
 __export(useFocusManagement_exports, {
   useFocusManagement: () => useFocusManagement

package/dist/hooks/focus/useFocusManagement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/focus/useFocusManagement.ts"],"sourcesContent":["import { useCallback } from 'react'\n\nexport function useFocusManagement() {\n  const getFocusableElements = useCallback((): HTMLElement[] => {\n    return Array.from(\n      document.querySelectorAll(\n        'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])'\n      )\n    ).filter(\n      (el): el is HTMLElement =>\n        el instanceof HTMLElement &&\n        !el.hasAttribute('disabled') &&\n        !el.hasAttribute('hidden') &&\n        el.tabIndex !== -1\n    )\n  }, [])\n\n  const getNextFocusElement = useCallback((): HTMLElement | undefined => {\n    const elements = getFocusableElements()\n    if(elements.length === 0) {\n      return undefined\n    }\n    let nextElement = elements[0]\n    if(document.activeElement instanceof HTMLElement) {\n      const currentIndex = elements.indexOf(document.activeElement)\n      nextElement = elements[(currentIndex + 1) % elements.length]\n    }\n    return nextElement\n  }, [getFocusableElements])\n\n  const focusNext = useCallback(() => {\n    const nextElement = getNextFocusElement()\n    nextElement?.focus()\n  }, [getNextFocusElement])\n\n  const getPreviousFocusElement = useCallback((): HTMLElement | undefined => {\n    const elements = getFocusableElements()\n    if(elements.length === 0) {\n      return undefined\n    }\n    let previousElement = elements[0]\n    if(document.activeElement instanceof HTMLElement) {\n      const currentIndex = elements.indexOf(document.activeElement)\n      if(currentIndex === 0) {\n        previousElement = elements[elements.length - 1]\n      } else {\n        previousElement = elements[currentIndex - 1]\n      }\n    }\n    return previousElement\n  }, [getFocusableElements])\n\n  const focusPrevious = useCallback(() => {\n    const previousElement = getPreviousFocusElement()\n    if (previousElement) previousElement.focus()\n  }, [getPreviousFocusElement])\n\n  return {\n    getFocusableElements,\n    getNextFocusElement,\n    getPreviousFocusElement,\n    focusNext,\n    focusPrevious,\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAErB,SAAS,qBAAqB;AACnC,QAAM,2BAAuB,0BAAY,MAAqB;AAC5D,WAAO,MAAM;AAAA,MACX,SAAS;AAAA,QACP;AAAA,MACF;AAAA,IACF,EAAE;AAAA,MACA,CAAC,OACC,cAAc,eACd,CAAC,GAAG,aAAa,UAAU,KAC3B,CAAC,GAAG,aAAa,QAAQ,KACzB,GAAG,aAAa;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAA+B;AACrE,UAAM,WAAW,qBAAqB;AACtC,QAAG,SAAS,WAAW,GAAG;AACxB,aAAO;AAAA,IACT;AACA,QAAI,cAAc,SAAS,CAAC;AAC5B,QAAG,SAAS,yBAAyB,aAAa;AAChD,YAAM,eAAe,SAAS,QAAQ,SAAS,aAAa;AAC5D,oBAAc,UAAU,eAAe,KAAK,SAAS,MAAM;AAAA,IAC7D;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,gBAAY,0BAAY,MAAM;AAClC,UAAM,cAAc,oBAAoB;AACxC,iBAAa,MAAM;AAAA,EACrB,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,8BAA0B,0BAAY,MAA+B;AACzE,UAAM,WAAW,qBAAqB;AACtC,QAAG,SAAS,WAAW,GAAG;AACxB,aAAO;AAAA,IACT;AACA,QAAI,kBAAkB,SAAS,CAAC;AAChC,QAAG,SAAS,yBAAyB,aAAa;AAChD,YAAM,eAAe,SAAS,QAAQ,SAAS,aAAa;AAC5D,UAAG,iBAAiB,GAAG;AACrB,0BAAkB,SAAS,SAAS,SAAS,CAAC;AAAA,MAChD,OAAO;AACL,0BAAkB,SAAS,eAAe,CAAC;AAAA,MAC7C;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,oBAAgB,0BAAY,MAAM;AACtC,UAAM,kBAAkB,wBAAwB;AAChD,QAAI,gBAAiB,iBAAgB,MAAM;AAAA,EAC7C,GAAG,CAAC,uBAAuB,CAAC;AAE5B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/hooks/{useFocusManagement.mjs → focus/useFocusManagement.mjs}

@@ -1,4 +1,4 @@
-// src/hooks/useFocusManagement.ts
+// src/hooks/focus/useFocusManagement.ts
 import { useCallback } from "react";
 function useFocusManagement() {
   const getFocusableElements = useCallback(() => {

package/dist/hooks/focus/useFocusManagement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/focus/useFocusManagement.ts"],"sourcesContent":["import { useCallback } from 'react'\n\nexport function useFocusManagement() {\n  const getFocusableElements = useCallback((): HTMLElement[] => {\n    return Array.from(\n      document.querySelectorAll(\n        'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])'\n      )\n    ).filter(\n      (el): el is HTMLElement =>\n        el instanceof HTMLElement &&\n        !el.hasAttribute('disabled') &&\n        !el.hasAttribute('hidden') &&\n        el.tabIndex !== -1\n    )\n  }, [])\n\n  const getNextFocusElement = useCallback((): HTMLElement | undefined => {\n    const elements = getFocusableElements()\n    if(elements.length === 0) {\n      return undefined\n    }\n    let nextElement = elements[0]\n    if(document.activeElement instanceof HTMLElement) {\n      const currentIndex = elements.indexOf(document.activeElement)\n      nextElement = elements[(currentIndex + 1) % elements.length]\n    }\n    return nextElement\n  }, [getFocusableElements])\n\n  const focusNext = useCallback(() => {\n    const nextElement = getNextFocusElement()\n    nextElement?.focus()\n  }, [getNextFocusElement])\n\n  const getPreviousFocusElement = useCallback((): HTMLElement | undefined => {\n    const elements = getFocusableElements()\n    if(elements.length === 0) {\n      return undefined\n    }\n    let previousElement = elements[0]\n    if(document.activeElement instanceof HTMLElement) {\n      const currentIndex = elements.indexOf(document.activeElement)\n      if(currentIndex === 0) {\n        previousElement = elements[elements.length - 1]\n      } else {\n        previousElement = elements[currentIndex - 1]\n      }\n    }\n    return previousElement\n  }, [getFocusableElements])\n\n  const focusPrevious = useCallback(() => {\n    const previousElement = getPreviousFocusElement()\n    if (previousElement) previousElement.focus()\n  }, [getPreviousFocusElement])\n\n  return {\n    getFocusableElements,\n    getNextFocusElement,\n    getPreviousFocusElement,\n    focusNext,\n    focusPrevious,\n  }\n}"],"mappings":";AAAA,SAAS,mBAAmB;AAErB,SAAS,qBAAqB;AACnC,QAAM,uBAAuB,YAAY,MAAqB;AAC5D,WAAO,MAAM;AAAA,MACX,SAAS;AAAA,QACP;AAAA,MACF;AAAA,IACF,EAAE;AAAA,MACA,CAAC,OACC,cAAc,eACd,CAAC,GAAG,aAAa,UAAU,KAC3B,CAAC,GAAG,aAAa,QAAQ,KACzB,GAAG,aAAa;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAA+B;AACrE,UAAM,WAAW,qBAAqB;AACtC,QAAG,SAAS,WAAW,GAAG;AACxB,aAAO;AAAA,IACT;AACA,QAAI,cAAc,SAAS,CAAC;AAC5B,QAAG,SAAS,yBAAyB,aAAa;AAChD,YAAM,eAAe,SAAS,QAAQ,SAAS,aAAa;AAC5D,oBAAc,UAAU,eAAe,KAAK,SAAS,MAAM;AAAA,IAC7D;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,YAAY,YAAY,MAAM;AAClC,UAAM,cAAc,oBAAoB;AACxC,iBAAa,MAAM;AAAA,EACrB,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,0BAA0B,YAAY,MAA+B;AACzE,UAAM,WAAW,qBAAqB;AACtC,QAAG,SAAS,WAAW,GAAG;AACxB,aAAO;AAAA,IACT;AACA,QAAI,kBAAkB,SAAS,CAAC;AAChC,QAAG,SAAS,yBAAyB,aAAa;AAChD,YAAM,eAAe,SAAS,QAAQ,SAAS,aAAa;AAC5D,UAAG,iBAAiB,GAAG;AACrB,0BAAkB,SAAS,SAAS,SAAS,CAAC;AAAA,MAChD,OAAO;AACL,0BAAkB,SAAS,eAAe,CAAC;AAAA,MAC7C;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,kBAAkB,wBAAwB;AAChD,QAAI,gBAAiB,iBAAgB,MAAM;AAAA,EAC7C,GAAG,CAAC,uBAAuB,CAAC;AAE5B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}