@arolariu/components 0.1.1 → 0.2.0

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,29 @@
+type WindowSize = {
+    width: number | null;
+    height: number | null;
+};
+type HookReturnType = Readonly<{
+    windowSize: WindowSize;
+    isMobile: boolean;
+    isDesktop: boolean;
+}>;
+/**
+ * Client hook to get the window size and whether the window is mobile or desktop.
+ * @returns An object containing the window size and whether the window is mobile or desktop.
+ *@example
+ * ```tsx
+ * function MyComponent() {
+ *   const { windowSize, isMobile, isDesktop } = useWindowSize();
+ *
+ *   return (
+ *     <div>
+ *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>
+ *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useWindowSize(): HookReturnType;
+export {};
+//# sourceMappingURL=useWindowSize.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+const MOBILE_BREAKPOINT = 768;
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: null,
+        height: null
+    });
+    useEffect(()=>{
+        function __handleResize__() {
+            setWindowSize({
+                width: globalThis.window.innerWidth,
+                height: globalThis.window.innerHeight
+            });
+        }
+        globalThis.window.addEventListener("resize", __handleResize__);
+        __handleResize__();
+        return ()=>globalThis.window.removeEventListener("resize", __handleResize__);
+    }, []);
+    return {
+        windowSize,
+        isMobile: "number" == typeof windowSize.width && windowSize.width < MOBILE_BREAKPOINT,
+        isDesktop: "number" == typeof windowSize.width && windowSize.width >= MOBILE_BREAKPOINT
+    };
+}
+export { useWindowSize };
+
+//# sourceMappingURL=useWindowSize.js.map

package/dist/hooks/useWindowSize.js.map

@@ -0,0 +1 @@
+{"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));
   }