@arolariu/components 0.1.2 → 0.2.0

package/dist/hooks/useWindowSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.tsx"],"names":[],"mappings":"AAAA,cAAc;AAQd,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,IAAI,cAAc,CAmC9C"}
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.tsx"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,IAAI,cAAc,CA+B9C"}

package/dist/hooks/useWindowSize.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 "use client";
+import { useEffect, useState } from "react";
 const MOBILE_BREAKPOINT = 768;
 function useWindowSize() {
     const [windowSize, setWindowSize] = useState({

package/dist/hooks/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks\\useWindowSize.js","sources":["webpack://@arolariu/components/./src/hooks/useWindowSize.tsx"],"sourcesContent":["/** @format */\n\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\ntype WindowSize = {\n  width: number | null;\n  height: number | null;\n};\n\ntype HookReturnType = Readonly<{\n  windowSize: WindowSize;\n  isMobile: boolean;\n  isDesktop: boolean;\n}>;\n\n/**\n * Client hook to get the window size and whether the window is mobile or desktop.\n * @returns An object containing the window size and whether the window is mobile or desktop.\n *@example\n * ```tsx\n * function MyComponent() {\n *   const { windowSize, isMobile, isDesktop } = useWindowSize();\n *\n *   return (\n *     <div>\n *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>\n *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useWindowSize(): HookReturnType {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: null,\n    height: null,\n  });\n\n  useEffect(() => {\n    /**\n     * This function updates the window size.\n     * It is created inside of useEffect and has a short lifespan.\n     * After it is attached to the window object, it will be garbage collected\n     *  when the component unmounts or the window is resized.\n     */\n    function __handleResize__() {\n      setWindowSize({\n        width: globalThis.window.innerWidth,\n        height: globalThis.window.innerHeight,\n      });\n    }\n\n    globalThis.window.addEventListener(\"resize\", __handleResize__);\n    __handleResize__(); // Call the function once to get the initial window size\n    return () =>\n      globalThis.window.removeEventListener(\"resize\", __handleResize__);\n  }, []); // Empty array ensures that effect is only run on mount\n\n  return {\n    windowSize,\n    isMobile:\n      typeof windowSize.width === \"number\" &&\n      windowSize.width < MOBILE_BREAKPOINT,\n    isDesktop:\n      typeof windowSize.width === \"number\" &&\n      windowSize.width >= MOBILE_BREAKPOINT,\n  } as const;\n}\n"],"names":["MOBILE_BREAKPOINT","useWindowSize","windowSize","setWindowSize","useState","useEffect","__handleResize__","globalThis"],"mappings":";AAEA;AAIA,MAAMA,oBAAoB;AA8BnB,SAASC;IACd,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAqB;QACvD,OAAO;QACP,QAAQ;IACV;IAEAC,UAAU;QAOR,SAASC;YACPH,cAAc;gBACZ,OAAOI,WAAW,MAAM,CAAC,UAAU;gBACnC,QAAQA,WAAW,MAAM,CAAC,WAAW;YACvC;QACF;QAEAA,WAAW,MAAM,CAAC,gBAAgB,CAAC,UAAUD;QAC7CA;QACA,OAAO,IACLC,WAAW,MAAM,CAAC,mBAAmB,CAAC,UAAUD;IACpD,GAAG,EAAE;IAEL,OAAO;QACLJ;QACA,UACE,AAA4B,YAA5B,OAAOA,WAAW,KAAK,IACvBA,WAAW,KAAK,GAAGF;QACrB,WACE,AAA4B,YAA5B,OAAOE,WAAW,KAAK,IACvBA,WAAW,KAAK,IAAIF;IACxB;AACF"}
+{"version":3,"file":"hooks\\useWindowSize.js","sources":["webpack://@arolariu/components/./src/hooks/useWindowSize.tsx"],"sourcesContent":["\r\n\r\nimport {useEffect, useState} from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\ntype WindowSize = {\r\n  width: number | null;\r\n  height: number | null;\r\n};\r\n\r\ntype HookReturnType = Readonly<{\r\n  windowSize: WindowSize;\r\n  isMobile: boolean;\r\n  isDesktop: boolean;\r\n}>;\r\n\r\n/**\r\n * Client hook to get the window size and whether the window is mobile or desktop.\r\n * @returns An object containing the window size and whether the window is mobile or desktop.\r\n *@example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const { windowSize, isMobile, isDesktop } = useWindowSize();\r\n *\r\n *   return (\r\n *     <div>\r\n *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>\r\n *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useWindowSize(): HookReturnType {\r\n  const [windowSize, setWindowSize] = useState<WindowSize>({\r\n    width: null,\r\n    height: null,\r\n  });\r\n\r\n  useEffect(() => {\r\n    /**\r\n     * This function updates the window size.\r\n     * It is created inside of useEffect and has a short lifespan.\r\n     * After it is attached to the window object, it will be garbage collected\r\n     *  when the component unmounts or the window is resized.\r\n     */\r\n    function __handleResize__() {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setWindowSize({\r\n        width: globalThis.window.innerWidth,\r\n        height: globalThis.window.innerHeight,\r\n      });\r\n    }\r\n\r\n    globalThis.window.addEventListener(\"resize\", __handleResize__);\r\n    __handleResize__(); // Call the function once to get the initial window size\r\n    return () => globalThis.window.removeEventListener(\"resize\", __handleResize__);\r\n  }, []); // Empty array ensures that effect is only run on mount\r\n\r\n  return {\r\n    windowSize,\r\n    isMobile: typeof windowSize.width === \"number\" && windowSize.width < MOBILE_BREAKPOINT,\r\n    isDesktop: typeof windowSize.width === \"number\" && windowSize.width >= MOBILE_BREAKPOINT,\r\n  } as const;\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useWindowSize","windowSize","setWindowSize","useState","useEffect","__handleResize__","globalThis"],"mappings":";;AAIA,MAAMA,oBAAoB;AA8BnB,SAASC;IACd,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAqB;QACvD,OAAO;QACP,QAAQ;IACV;IAEAC,UAAU;QAOR,SAASC;YAEPH,cAAc;gBACZ,OAAOI,WAAW,MAAM,CAAC,UAAU;gBACnC,QAAQA,WAAW,MAAM,CAAC,WAAW;YACvC;QACF;QAEAA,WAAW,MAAM,CAAC,gBAAgB,CAAC,UAAUD;QAC7CA;QACA,OAAO,IAAMC,WAAW,MAAM,CAAC,mBAAmB,CAAC,UAAUD;IAC/D,GAAG,EAAE;IAEL,OAAO;QACLJ;QACA,UAAU,mBAAOA,WAAW,KAAK,IAAiBA,WAAW,KAAK,GAAGF;QACrE,WAAW,mBAAOE,WAAW,KAAK,IAAiBA,WAAW,KAAK,IAAIF;IACzE;AACF"}

package/dist/index.css

@@ -490,7 +490,7 @@
   }
 
   .sr-only {
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border-width: 0;
     width: 1px;
@@ -3494,7 +3494,7 @@
 
   .transition {
     transition-duration: var(--tw-duration, var(--default-transition-duration));
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   }