@wethegit/react-hooks/dist/react-hooks.js

A collection of helpers for use in React projects.

import { useRef as v, useState as a, useEffect as f, useCallback as g, useMemo as p, createContext as y, useContext as b } from "react";
import { jsx as w } from "react/jsx-runtime";
var R = /* @__PURE__ */ ((e) => (e.ENTERED = "entered", e.EXITED = "exited", e.EXITING = "exiting", e.ENTERING = "entering", e.MOUNTED = "mounted", e))(R || {});
function M({
  initial: e = !1,
  duration: t = 300,
  isVisible: o = !1
}) {
  const s = v(e), [r, n] = a(
    s.current ? "entered" : "exited"
    /* EXITED */
  ), u = typeof t == "number" ? t : t.enter, d = typeof t == "number" ? t : t.exit, i = v(void 0);
  return f(() => {
    clearTimeout(i.current), r === "mounted" ? i.current = setTimeout(() => {
      n(
        "entering"
        /* ENTERING */
      );
    }, 100) : r === "entering" ? i.current = setTimeout(() => {
      n(
        "entered"
        /* ENTERED */
      );
    }, u) : r === "exiting" && (i.current = setTimeout(() => {
      n(
        "exited"
        /* EXITED */
      );
    }, d));
  }, [u, d, r]), f(() => {
    if (s.current) {
      s.current = !1;
      return;
    }
    n((c) => {
      if (o) {
        if (c === "exited" || c === "exiting")
          return "mounted";
      } else if (c !== "exited" && c !== "exiting")
        return "exiting";
      return c;
    });
  }, [o]), {
    render: r !== "exited",
    animate: r === "entering" || r === "entered",
    currentDuration: r === "entering" ? u : d,
    state: r
  };
}
var D = /* @__PURE__ */ ((e) => (e.Idle = "idle", e.Pending = "pending", e.Success = "success", e.Error = "error", e))(D || {});
function T(e, t = !1) {
  const [o, s] = a(
    "idle"
    /* Idle */
  ), [r, n] = a(null), [u, d] = a(null), i = g(() => {
    s(
      "pending"
      /* Pending */
    ), e().then((c) => {
      n(c), s(
        "success"
        /* Success */
      );
    }).catch((c) => {
      d(c), s(
        "error"
        /* Error */
      );
    });
  }, [e]);
  return f(() => {
    t || i();
  }, [t, i]), { run: i, data: r, status: o, error: u };
}
function L(e = 0, t = !1, o = !1) {
  const [s, r] = a(!1), [n, u] = a(), d = p(
    () => typeof e == "number" ? { threshold: e } : e,
    [e]
  ), i = g(
    ([l], E) => {
      const h = l.isIntersecting || o && l.boundingClientRect.top < 0;
      r(h), t && h && E.unobserve(l.target);
    },
    [t, o]
  ), c = p(() => {
    if (typeof IntersectionObserver == "function")
      return new IntersectionObserver(i, d);
  }, [d, i]);
  return f(() => {
    if (!(!n || !c))
      return c.observe(n), () => {
        c && c.unobserve(n);
      };
  }, [c, n]), [u, s, n];
}
function k(e) {
  const [t, o] = a(null);
  return f(() => {
    const s = window.matchMedia(e), r = () => {
      o(s.matches);
    };
    return s.addEventListener("change", r), r(), () => {
      s.removeEventListener("change", r);
    };
  }, [e]), t;
}
function m(e, t) {
  const [o, s] = a(null), r = g(
    (n) => {
      window.localStorage.setItem(e, JSON.stringify(n)), s(n);
    },
    [e]
  );
  return f(() => {
    const n = window.matchMedia(t), u = n.matches;
    u ? r(u) : s((i) => {
      if (i === null) {
        const c = localStorage.getItem(e);
        return c === null ? u : JSON.parse(c);
      }
      return i;
    });
    const d = (i) => {
      r(i.matches);
    };
    return n.addEventListener("change", d), () => {
      n.removeEventListener("change", d);
    };
  }, [t, e, r]), [o, r];
}
function P(e, t) {
  const o = p(() => `use-local-storage:${e}`, [e]), [s, r] = a(null);
  return f(() => {
    if (s === null) {
      const n = window.localStorage.getItem(o);
      if (n === null) {
        r(t);
        return;
      }
      r(JSON.parse(n));
    }
    window.localStorage.setItem(o, JSON.stringify(s));
  }, [t, o, s]), [s, r];
}
function C(e) {
  const t = () => {
    if (!window) return;
    const o = document.body.getAttribute("style");
    o && document.body.setAttribute("style", o.replace("overflow: hidden;", ""));
  };
  f(() => (e ? document.body.style.overflow = "hidden" : t(), () => t()), [e]);
}
const x = y({});
function U({
  children: e,
  globalClassNames: t
}) {
  const [o, s] = m(
    "user-prefs:prefers-color-scheme",
    "(prefers-color-scheme: dark)"
  ), [r, n] = m(
    "user-prefs:prefers-reduced-data",
    "(prefers-reduced-data: reduce)"
  ), [u, d] = m(
    "user-prefs:prefers-reduced-motion",
    "(prefers-reduced-motion: reduce)"
  );
  return f(() => {
    document.body.classList[u ? "add" : "remove"](
      t?.prefersReducedMotion || "is-reduced-motion"
    );
  }, [t?.prefersReducedMotion, u]), f(() => {
    document.body.classList[r ? "add" : "remove"](
      t?.prefersReducedData || "is-reduced-data"
    );
  }, [t?.prefersReducedData, r]), f(() => {
    document.body.classList[o ? "add" : "remove"](
      t?.prefersDarkColorScheme || "is-dark-color-scheme"
    );
  }, [t?.prefersDarkColorScheme, o]), /* @__PURE__ */ w(
    x.Provider,
    {
      value: {
        prefersDarkColorScheme: o,
        setPrefersDarkColorScheme: s,
        prefersReducedData: r,
        setPrefersReducedData: n,
        prefersReducedMotion: u,
        setPrefersReducedMotion: d
      },
      children: e
    }
  );
}
function J() {
  return b(x);
}
export {
  R as AnimatePresenceState,
  D as Status,
  U as UserPreferencesProvider,
  M as useAnimatePresence,
  T as useAsync,
  L as useInView,
  k as useMediaQuery,
  m as usePersistedMediaQuery,
  P as usePersistedState,
  C as usePreventScroll,
  J as useUserPrefs
};