@arolariu/components 0.1.0 → 0.1.2

package/src/lib/utils.ts

@@ -1,10 +1,10 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Helper function that merges tailwindcss
- * class names in the given input array.
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Helper function that merges tailwindcss
+ * class names in the given input array.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/dist/hooks/use-mobile.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}

package/dist/hooks/use-mobile.js

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-    const [isMobile, setIsMobile] = useState(void 0);
-    useEffect(()=>{
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = ()=>{
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener("change", onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        return ()=>mql.removeEventListener("change", onChange);
-    }, []);
-    return !!isMobile;
-}
-export { useIsMobile };
-
-//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks\\use-mobile.js","sources":["webpack://@arolariu/components/./src/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width.\r\n *\r\n * This hook uses a media query to check if the viewport width is less than the defined\r\n * mobile breakpoint (768px). It updates the state when the window size changes.\r\n *\r\n * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,\r\n *                   false otherwise.\r\n *\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *\r\n *   return (\r\n *     <div>\r\n *       {isMobile ? 'Mobile View' : 'Desktop View'}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\r\n    undefined,\r\n  );\r\n\r\n  React.useEffect(() => {\r\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return !!isMobile;\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","undefined","mql","window","onChange"],"mappings":";AAEA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAC9BC;IAGFD,UAAgB;QACd,MAAME,MAAMC,OAAO,UAAU,CAAC,CAAC,YAAY,EAAEP,oBAAoB,EAAE,GAAG,CAAC;QACvE,MAAMQ,WAAW;YACfL,YAAYI,OAAO,UAAU,GAAGP;QAClC;QACAM,IAAI,gBAAgB,CAAC,UAAUE;QAC/BL,YAAYI,OAAO,UAAU,GAAGP;QAChC,OAAO,IAAMM,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACN;AACX"}