@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/docs-kit/utils/constants.mjs

@@ -0,0 +1,16 @@
+const s = "https://tucu-ui.netlify.app", t = "https://www.npmjs.com/package/@e-burgos/tucu-ui", _ = "https://github.com/e-burgos/tucu-ui", c = `${s}/`, o = `${s}/design-system/layout-system`, e = `${s}/design-system`, S = `${s}/design-system/theming-guide`, n = `${s}/form-system`, i = `${s}/features/icons-system`, O = `${s}/features/hooks-utilities`, I = `${s}/components/blockchain`, L = `${s}/features/accessibility`, U = "https://tailwindcss.com/docs";
+export {
+  L as ACCESSIBILITY_DOCS_URL,
+  I as BLOCKCHAIN_DOCS_URL,
+  e as DESIGN_SYSTEM_DOCS_URL,
+  s as DOCUMENTATION_URL,
+  n as FORM_SYSTEM_DOCS_URL,
+  _ as GITHUB_URL,
+  O as HOOKS_UTILITIES_DOCS_URL,
+  i as ICONS_SYSTEM_DOCS_URL,
+  c as INTRODUCTION_DOCS_URL,
+  o as LAYOUT_SYSTEM_DOCS_URL,
+  t as NPM_PACKAGE_URL,
+  U as TAILWIND_UTILITIES_DOCS_URL,
+  S as THEMING_DOCS_URL
+};

package/hooks/use-anchor-scroll.mjs

@@ -0,0 +1,23 @@
+import { useEffect as s } from "react";
+const a = () => (s(() => {
+  const e = (r) => {
+    const n = r.target.closest('a[href^="#"]');
+    if (n) {
+      const t = n.getAttribute("href");
+      if (t && t.startsWith("#")) {
+        r.preventDefault();
+        const c = t.substring(1), o = document.getElementById(c);
+        o && o.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }
+    }
+  };
+  return document.addEventListener("click", e), () => {
+    document.removeEventListener("click", e);
+  };
+}, []), null);
+export {
+  a as useAnchorScroll
+};

package/hooks/use-breakpoint.mjs

@@ -0,0 +1,14 @@
+import o from "react-use/lib/factory/createBreakpoint";
+const t = {
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1440,
+  "3xl": 1780,
+  "4xl": 2160
+}, r = o(t);
+export {
+  r as useBreakpoint
+};

package/hooks/use-element-size.mjs

@@ -0,0 +1,19 @@
+import { useState as i, useCallback as h } from "react";
+import { useEventListener as n, useIsomorphicLayoutEffect as r } from "./use-event-listener.mjs";
+function d() {
+  const [e, s] = i(null), [f, o] = i({
+    width: 0,
+    height: 0
+  }), t = h(() => {
+    o({
+      width: e?.offsetWidth || 0,
+      height: e?.offsetHeight || 0
+    });
+  }, [e?.offsetHeight, e?.offsetWidth]);
+  return n("resize", t), r(() => {
+    t();
+  }, [e?.offsetHeight, e?.offsetWidth]), [s, f];
+}
+export {
+  d as useElementSize
+};

package/hooks/use-event-listener.mjs

@@ -0,0 +1,19 @@
+import { useLayoutEffect as i, useEffect as f, useRef as d } from "react";
+const E = typeof window < "u" ? i : f;
+function v(t, r, s, n) {
+  const u = d(r);
+  E(() => {
+    u.current = r;
+  }, [r]), f(() => {
+    const e = s?.current ?? window;
+    if (!(e && e.addEventListener)) return;
+    const c = (o) => u.current(o);
+    return e.addEventListener(t, c, n), () => {
+      e.removeEventListener(t, c, n);
+    };
+  }, [t, s, n]);
+}
+export {
+  v as useEventListener,
+  E as useIsomorphicLayoutEffect
+};

package/hooks/use-grid-switcher.mjs

@@ -0,0 +1,8 @@
+import { create as e } from "zustand";
+const o = e((r) => ({
+  isGridCompact: !1,
+  setIsGridCompact: (t) => r({ isGridCompact: t })
+}));
+export {
+  o as useGridSwitcher
+};

package/hooks/use-is-mobile.mjs

@@ -0,0 +1,9 @@
+import { useBreakpoint as o } from "./use-breakpoint.mjs";
+const t = () => {
+  const e = o();
+  return { isMobile: ["xs", "sm", "md"].indexOf(e) !== -1 };
+};
+export {
+  t as default,
+  t as useIsMobile
+};

package/hooks/use-is-mounted.mjs

@@ -0,0 +1,8 @@
+import { useState as u, useEffect as o } from "react";
+function s() {
+  const [e, t] = u(!1);
+  return o(() => t(!0), []), e;
+}
+export {
+  s as useIsMounted
+};

package/hooks/use-lock-body-scroll.mjs

@@ -0,0 +1,12 @@
+import { useEffect as o } from "react";
+function m(e) {
+  o(() => {
+    const t = document.documentElement.style.paddingRight, n = window.innerWidth - document.documentElement.clientWidth;
+    return e ? (document.documentElement.style.paddingRight = `${n}px`, window.document.documentElement.style.overflow = "hidden") : document.documentElement.style.removeProperty("overflow"), () => {
+      document.documentElement.style.paddingRight = t;
+    };
+  }, [e]);
+}
+export {
+  m as useLockBodyScroll
+};

package/hooks/use-scrollable-slider.mjs

@@ -0,0 +1,39 @@
+import { useRef as c, useEffect as L } from "react";
+import { useLocation as p } from "react-router-dom";
+function B(f = "/") {
+  const a = p().pathname, i = c(null), o = c(null), n = c(null);
+  function h() {
+    const t = i.current.offsetWidth;
+    i.current.scrollLeft += t / 2, o.current.classList.remove("opacity-0", "invisible");
+  }
+  function d() {
+    const t = i.current.offsetWidth;
+    i.current.scrollLeft -= t / 2, n.current.classList.remove("opacity-0", "invisible");
+  }
+  return L(() => {
+    const t = i.current, l = o.current, e = n.current;
+    r();
+    function r() {
+      const s = t.offsetWidth;
+      t.scrollWidth > s ? e?.classList.remove("opacity-0", "invisible") : e?.classList.add("opacity-0", "invisible");
+    }
+    function v() {
+      const s = t.scrollLeft, u = t.offsetWidth;
+      t.scrollWidth - s === u ? (e?.classList.add("opacity-0", "invisible"), l?.classList.remove("opacity-0", "invisible")) : e?.classList.remove("opacity-0", "invisible"), s === 0 ? (l?.classList.add("opacity-0", "invisible"), e?.classList.remove("opacity-0", "invisible")) : l?.classList.remove("opacity-0", "invisible");
+    }
+    return window.addEventListener("resize", r), t.addEventListener("scroll", v), () => {
+      window.removeEventListener("resize", r), t.removeEventListener("scroll", v);
+    };
+  }, []), L(() => {
+    a === f && d();
+  }, [a, f]), {
+    sliderEl: i,
+    sliderPrevBtn: o,
+    sliderNextBtn: n,
+    scrollToTheRight: h,
+    scrollToTheLeft: d
+  };
+}
+export {
+  B as useScrollableSlider
+};

package/hooks/use-toast-store.mjs

@@ -0,0 +1,19 @@
+import { create as r } from "zustand";
+const d = r((t, a) => ({
+  toasts: [],
+  setToasts: (s) => t({ toasts: s }),
+  addToast: (s) => {
+    const i = !!a().toasts.find((o) => o.id === s.id);
+    s.id && (s.timeout = s?.timeout || 3e3, s.open = !0, s.dismissing = !1), i || t((o) => ({
+      toasts: [...o.toasts, s]
+    }));
+  },
+  dismissToast: (s) => t((e) => s ? {
+    toasts: e.toasts.filter((i) => i.id !== s)
+  } : {
+    toasts: []
+  })
+}));
+export {
+  d as useToastStore
+};

package/hooks/use-window-scroll.mjs

@@ -0,0 +1,55 @@
+import { useState as X, useRef as Y, useEffect as E } from "react";
+function S() {
+  const [m, v] = X(() => {
+    if (typeof window > "u")
+      return { x: 0, y: 0 };
+    const d = window.scrollX || window.pageXOffset || 0, o = window.scrollY || window.pageYOffset || 0, i = document.documentElement.scrollLeft || 0, c = document.documentElement.scrollTop || 0, e = document.body.scrollLeft || 0, t = document.body.scrollTop || 0;
+    return {
+      x: Math.max(d, i, e),
+      y: Math.max(o, c, t)
+    };
+  }), w = Y([]);
+  return E(() => {
+    const d = () => {
+      const e = window.scrollX || window.pageXOffset || 0, t = window.scrollY || window.pageYOffset || 0, r = document.documentElement.scrollLeft || 0, a = document.documentElement.scrollTop || 0, y = document.body.scrollLeft || 0, h = document.body.scrollTop || 0;
+      let f = Math.max(e, r, y), u = Math.max(t, a, h);
+      const p = Array.from(document.querySelectorAll("*")).filter(
+        (s) => {
+          const n = s, l = window.getComputedStyle(n);
+          return l.overflow === "auto" || l.overflow === "scroll" || l.overflowY === "auto" || l.overflowY === "scroll" || l.overflowX === "auto" || l.overflowX === "scroll" ? n.scrollHeight > n.clientHeight || n.scrollWidth > n.clientWidth : !1;
+        }
+      );
+      for (const s of p) {
+        const n = s.scrollTop, l = s.scrollLeft;
+        n > u && (u = n), l > f && (f = l);
+      }
+      return { x: f, y: u };
+    }, o = () => {
+      v(d());
+    };
+    o();
+    const i = setTimeout(o, 100);
+    window.addEventListener("scroll", o, { passive: !0 }), document.addEventListener("scroll", o, {
+      passive: !0,
+      capture: !0
+    });
+    const c = Array.from(document.querySelectorAll("*")).filter(
+      (e) => {
+        const t = e, r = window.getComputedStyle(t);
+        return r.overflow === "auto" || r.overflow === "scroll" || r.overflowY === "auto" || r.overflowY === "scroll" || r.overflowX === "auto" || r.overflowX === "scroll" ? t.scrollHeight > t.clientHeight || t.scrollWidth > t.clientWidth : !1;
+      }
+    );
+    return w.current = c, c.forEach((e) => {
+      e.addEventListener("scroll", o, {
+        passive: !0
+      });
+    }), () => {
+      window.removeEventListener("scroll", o), document.removeEventListener("scroll", o, { capture: !0 }), w.current.forEach((e) => {
+        e.removeEventListener("scroll", o);
+      }), clearTimeout(i);
+    };
+  }, []), m;
+}
+export {
+  S as useWindowScroll
+};