@protonradio/proton-ui 0.10.11 → 0.10.12

package/dist/useBreakpoint-B-Q9Hjyn.mjs

@@ -0,0 +1,43 @@
+import { useLayoutEffect as r, useState as c, useCallback as a, useEffect as w } from "react";
+function m(t = !0) {
+  r(() => {
+    if (!t) return;
+    const n = window.getComputedStyle(document.body).overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = n;
+    };
+  }, [t]);
+}
+function h({
+  duration: t = 200,
+  onClose: n,
+  overlayRef: e
+}) {
+  const [o, s] = c(!1), d = a(() => {
+    s(!0), e != null && e.current && e.current.classList.add("proton-ScreenOverlay__fade-out"), setTimeout(() => {
+      n == null || n(), s(!1);
+    }, t);
+  }, [t, n, e]);
+  return {
+    isClosing: o,
+    handleClose: d
+  };
+}
+function l(t, n = "down") {
+  const e = n === "down" ? `(max-width: ${t}px)` : `(min-width: ${t}px)`, [o, s] = c(
+    () => typeof window < "u" ? window.matchMedia(e).matches : !1
+  );
+  return w(() => {
+    if (typeof window > "u") return;
+    const d = window.matchMedia(e), u = (i) => {
+      s(i.matches);
+    };
+    return d.addEventListener("change", u), () => d.removeEventListener("change", u);
+  }, [e]), o;
+}
+export {
+  h as a,
+  l as b,
+  m as u
+};
+//# sourceMappingURL=useBreakpoint-B-Q9Hjyn.mjs.map

package/dist/useBreakpoint-B-Q9Hjyn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint-B-Q9Hjyn.mjs","sources":["../src/hooks/useLockBodyScroll.tsx","../src/hooks/useIsClosing.tsx","../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useLayoutEffect } from \"react\";\r\n\r\n/**\r\n * A React hook that prevents body scrolling while a component is mounted.\r\n * Useful for modals, overlays, and other components that should prevent background scrolling.\r\n */\r\nexport function useLockBodyScroll(isActive: boolean = true) {\r\n  useLayoutEffect(() => {\r\n    if (!isActive) return;\r\n\r\n    // Get original body overflow\r\n    const originalStyle = window.getComputedStyle(document.body).overflow;\r\n    // Prevent scrolling on mount\r\n    document.body.style.overflow = \"hidden\";\r\n    // Re-enable scrolling when component unmounts\r\n    return () => {\r\n      document.body.style.overflow = originalStyle;\r\n    };\r\n  }, [isActive]); // Empty array ensures effect is only run on mount and unmount\r\n}\r\n","import { useState, useCallback, RefObject } from \"react\";\r\n\r\ninterface UseIsClosingOptions {\r\n  /**\r\n   * Duration of the closing animation in milliseconds\r\n   * @default 200\r\n   */\r\n  duration?: number;\r\n  /**\r\n   * Callback to run after the closing animation completes\r\n   */\r\n  onClose?: () => void;\r\n  /**\r\n   * When passed, the fade-out class will be added to @ScreenOverlay on close\r\n   */\r\n  overlayRef?: RefObject<HTMLElement>;\r\n}\r\n\r\n/**\r\n * Hook to manage the closing animation state of a component\r\n * @interface UseIsClosingOptions\r\n * @returns Object containing isClosing state and handleClose function\r\n */\r\nexport function useIsClosing({\r\n  duration = 200,\r\n  onClose,\r\n  overlayRef,\r\n}: UseIsClosingOptions) {\r\n  const [isClosing, setIsClosing] = useState(false);\r\n\r\n  const handleClose = useCallback(() => {\r\n    setIsClosing(true);\r\n\r\n    // Add fade-out class to overlay if ref is provided\r\n    if (overlayRef?.current) {\r\n      overlayRef.current.classList.add(\"proton-ScreenOverlay__fade-out\");\r\n    }\r\n\r\n    setTimeout(() => {\r\n      onClose?.();\r\n      setIsClosing(false);\r\n    }, duration);\r\n  }, [duration, onClose, overlayRef]);\r\n\r\n  return {\r\n    isClosing,\r\n    handleClose,\r\n  };\r\n}\r\n","import { useState } from \"react\";\r\n\r\nimport { useEffect } from \"react\";\r\nimport { Breakpoint } from \"../constants\";\r\n\r\ntype BreakpointDirection = \"up\" | \"down\";\r\n\r\nexport function useBreakpoint(\r\n  breakpoint: Breakpoint,\r\n  direction: BreakpointDirection = \"down\"\r\n) {\r\n  const query =\r\n    direction === \"down\"\r\n      ? `(max-width: ${breakpoint}px)`\r\n      : `(min-width: ${breakpoint}px)`;\r\n\r\n  const [matches, setMatches] = useState(() =>\r\n    typeof window !== \"undefined\" ? window.matchMedia(query).matches : false\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (typeof window === \"undefined\") return;\r\n\r\n    const mediaQuery = window.matchMedia(query);\r\n    const handler = (event: MediaQueryListEvent) => {\r\n      setMatches(event.matches);\r\n    };\r\n\r\n    mediaQuery.addEventListener(\"change\", handler);\r\n    return () => mediaQuery.removeEventListener(\"change\", handler);\r\n  }, [query]);\r\n\r\n  return matches;\r\n}\r\n"],"names":["useLockBodyScroll","isActive","useLayoutEffect","originalStyle","useIsClosing","duration","onClose","overlayRef","isClosing","setIsClosing","useState","handleClose","useCallback","useBreakpoint","breakpoint","direction","query","matches","setMatches","useEffect","mediaQuery","handler","event"],"mappings":";AAMgB,SAAAA,EAAkBC,IAAoB,IAAM;AAC1D,EAAAC,EAAgB,MAAM;AACpB,QAAI,CAACD,EAAU;AAGf,UAAME,IAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAEpD,oBAAA,KAAK,MAAM,WAAW,UAExB,MAAM;AACF,eAAA,KAAK,MAAM,WAAWA;AAAA,IAAA;AAAA,EACjC,GACC,CAACF,CAAQ,CAAC;AACf;ACIO,SAASG,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,YAAAC;AACF,GAAwB;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAcC,EAAY,MAAM;AACpC,IAAAH,EAAa,EAAI,GAGbF,KAAA,QAAAA,EAAY,WACHA,EAAA,QAAQ,UAAU,IAAI,gCAAgC,GAGnE,WAAW,MAAM;AACL,MAAAD,KAAA,QAAAA,KACVG,EAAa,EAAK;AAAA,OACjBJ,CAAQ;AAAA,EACV,GAAA,CAACA,GAAUC,GAASC,CAAU,CAAC;AAE3B,SAAA;AAAA,IACL,WAAAC;AAAA,IACA,aAAAG;AAAA,EAAA;AAEJ;ACzCgB,SAAAE,EACdC,GACAC,IAAiC,QACjC;AACA,QAAMC,IACJD,MAAc,SACV,eAAeD,CAAU,QACzB,eAAeA,CAAU,OAEzB,CAACG,GAASC,CAAU,IAAIR;AAAA,IAAS,MACrC,OAAO,SAAW,MAAc,OAAO,WAAWM,CAAK,EAAE,UAAU;AAAA,EAAA;AAGrE,SAAAG,EAAU,MAAM;AACV,QAAA,OAAO,SAAW,IAAa;AAE7B,UAAAC,IAAa,OAAO,WAAWJ,CAAK,GACpCK,IAAU,CAACC,MAA+B;AAC9C,MAAAJ,EAAWI,EAAM,OAAO;AAAA,IAAA;AAGf,WAAAF,EAAA,iBAAiB,UAAUC,CAAO,GACtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAAA,GAC5D,CAACL,CAAK,CAAC,GAEHC;AACT;"}

package/dist/useBreakpoint-B8cmf0FU.js

@@ -0,0 +1,2 @@
+"use strict";const s=require("react");function r(t=!0){s.useLayoutEffect(()=>{if(!t)return;const n=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=n}},[t])}function a({duration:t=200,onClose:n,overlayRef:e}){const[c,u]=s.useState(!1),o=s.useCallback(()=>{u(!0),e!=null&&e.current&&e.current.classList.add("proton-ScreenOverlay__fade-out"),setTimeout(()=>{n==null||n(),u(!1)},t)},[t,n,e]);return{isClosing:c,handleClose:o}}function w(t,n="down"){const e=n==="down"?`(max-width: ${t}px)`:`(min-width: ${t}px)`,[c,u]=s.useState(()=>typeof window<"u"?window.matchMedia(e).matches:!1);return s.useEffect(()=>{if(typeof window>"u")return;const o=window.matchMedia(e),d=i=>{u(i.matches)};return o.addEventListener("change",d),()=>o.removeEventListener("change",d)},[e]),c}exports.useBreakpoint=w;exports.useIsClosing=a;exports.useLockBodyScroll=r;
+//# sourceMappingURL=useBreakpoint-B8cmf0FU.js.map

package/dist/useBreakpoint-B8cmf0FU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint-B8cmf0FU.js","sources":["../src/hooks/useLockBodyScroll.tsx","../src/hooks/useIsClosing.tsx","../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useLayoutEffect } from \"react\";\r\n\r\n/**\r\n * A React hook that prevents body scrolling while a component is mounted.\r\n * Useful for modals, overlays, and other components that should prevent background scrolling.\r\n */\r\nexport function useLockBodyScroll(isActive: boolean = true) {\r\n  useLayoutEffect(() => {\r\n    if (!isActive) return;\r\n\r\n    // Get original body overflow\r\n    const originalStyle = window.getComputedStyle(document.body).overflow;\r\n    // Prevent scrolling on mount\r\n    document.body.style.overflow = \"hidden\";\r\n    // Re-enable scrolling when component unmounts\r\n    return () => {\r\n      document.body.style.overflow = originalStyle;\r\n    };\r\n  }, [isActive]); // Empty array ensures effect is only run on mount and unmount\r\n}\r\n","import { useState, useCallback, RefObject } from \"react\";\r\n\r\ninterface UseIsClosingOptions {\r\n  /**\r\n   * Duration of the closing animation in milliseconds\r\n   * @default 200\r\n   */\r\n  duration?: number;\r\n  /**\r\n   * Callback to run after the closing animation completes\r\n   */\r\n  onClose?: () => void;\r\n  /**\r\n   * When passed, the fade-out class will be added to @ScreenOverlay on close\r\n   */\r\n  overlayRef?: RefObject<HTMLElement>;\r\n}\r\n\r\n/**\r\n * Hook to manage the closing animation state of a component\r\n * @interface UseIsClosingOptions\r\n * @returns Object containing isClosing state and handleClose function\r\n */\r\nexport function useIsClosing({\r\n  duration = 200,\r\n  onClose,\r\n  overlayRef,\r\n}: UseIsClosingOptions) {\r\n  const [isClosing, setIsClosing] = useState(false);\r\n\r\n  const handleClose = useCallback(() => {\r\n    setIsClosing(true);\r\n\r\n    // Add fade-out class to overlay if ref is provided\r\n    if (overlayRef?.current) {\r\n      overlayRef.current.classList.add(\"proton-ScreenOverlay__fade-out\");\r\n    }\r\n\r\n    setTimeout(() => {\r\n      onClose?.();\r\n      setIsClosing(false);\r\n    }, duration);\r\n  }, [duration, onClose, overlayRef]);\r\n\r\n  return {\r\n    isClosing,\r\n    handleClose,\r\n  };\r\n}\r\n","import { useState } from \"react\";\r\n\r\nimport { useEffect } from \"react\";\r\nimport { Breakpoint } from \"../constants\";\r\n\r\ntype BreakpointDirection = \"up\" | \"down\";\r\n\r\nexport function useBreakpoint(\r\n  breakpoint: Breakpoint,\r\n  direction: BreakpointDirection = \"down\"\r\n) {\r\n  const query =\r\n    direction === \"down\"\r\n      ? `(max-width: ${breakpoint}px)`\r\n      : `(min-width: ${breakpoint}px)`;\r\n\r\n  const [matches, setMatches] = useState(() =>\r\n    typeof window !== \"undefined\" ? window.matchMedia(query).matches : false\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (typeof window === \"undefined\") return;\r\n\r\n    const mediaQuery = window.matchMedia(query);\r\n    const handler = (event: MediaQueryListEvent) => {\r\n      setMatches(event.matches);\r\n    };\r\n\r\n    mediaQuery.addEventListener(\"change\", handler);\r\n    return () => mediaQuery.removeEventListener(\"change\", handler);\r\n  }, [query]);\r\n\r\n  return matches;\r\n}\r\n"],"names":["useLockBodyScroll","isActive","useLayoutEffect","originalStyle","useIsClosing","duration","onClose","overlayRef","isClosing","setIsClosing","useState","handleClose","useCallback","useBreakpoint","breakpoint","direction","query","matches","setMatches","useEffect","mediaQuery","handler","event"],"mappings":"sCAMgB,SAAAA,EAAkBC,EAAoB,GAAM,CAC1DC,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACD,EAAU,OAGf,MAAME,EAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE,SAEpD,gBAAA,KAAK,MAAM,SAAW,SAExB,IAAM,CACF,SAAA,KAAK,MAAM,SAAWA,CAAA,CACjC,EACC,CAACF,CAAQ,CAAC,CACf,CCIO,SAASG,EAAa,CAC3B,SAAAC,EAAW,IACX,QAAAC,EACA,WAAAC,CACF,EAAwB,CACtB,KAAM,CAACC,EAAWC,CAAY,EAAIC,WAAS,EAAK,EAE1CC,EAAcC,EAAAA,YAAY,IAAM,CACpCH,EAAa,EAAI,EAGbF,GAAA,MAAAA,EAAY,SACHA,EAAA,QAAQ,UAAU,IAAI,gCAAgC,EAGnE,WAAW,IAAM,CACLD,GAAA,MAAAA,IACVG,EAAa,EAAK,GACjBJ,CAAQ,CACV,EAAA,CAACA,EAAUC,EAASC,CAAU,CAAC,EAE3B,MAAA,CACL,UAAAC,EACA,YAAAG,CAAA,CAEJ,CCzCgB,SAAAE,EACdC,EACAC,EAAiC,OACjC,CACA,MAAMC,EACJD,IAAc,OACV,eAAeD,CAAU,MACzB,eAAeA,CAAU,MAEzB,CAACG,EAASC,CAAU,EAAIR,EAAA,SAAS,IACrC,OAAO,OAAW,IAAc,OAAO,WAAWM,CAAK,EAAE,QAAU,EAAA,EAGrEG,OAAAA,EAAAA,UAAU,IAAM,CACV,GAAA,OAAO,OAAW,IAAa,OAE7B,MAAAC,EAAa,OAAO,WAAWJ,CAAK,EACpCK,EAAWC,GAA+B,CAC9CJ,EAAWI,EAAM,OAAO,CAAA,EAGf,OAAAF,EAAA,iBAAiB,SAAUC,CAAO,EACtC,IAAMD,EAAW,oBAAoB,SAAUC,CAAO,CAAA,EAC5D,CAACL,CAAK,CAAC,EAEHC,CACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protonradio/proton-ui",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "description": "",
   "main": "./dist/proton-ui.umd.js",
   "module": "./dist/proton-ui.es.js",