@becklyn/next 2.1.4 → 3.0.0

package/dist/cjs/lib/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+type Query = `(min-width: ${number}px)` | `(max-width: ${number}px)` | `(min-width: ${number}px) and (max-width: ${number}px)`;
+/**
+ * Hook to track media query state
+ * @param query - The media query string (e.g., "(min-width: 1024px)")
+ * @returns boolean indicating if the media query matches
+ */
+export declare const useMediaQuery: (query: Query) => boolean;
+export {};
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/cjs/lib/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../lib/useMediaQuery.ts"],"names":[],"mappings":"AAIA,KAAK,KAAK,GACJ,eAAe,MAAM,KAAK,GAC1B,eAAe,MAAM,KAAK,GAC1B,eAAe,MAAM,uBAAuB,MAAM,KAAK,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,OAqC5C,CAAC"}

package/dist/cjs/lib/useMediaQuery.js

@@ -0,0 +1,41 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = void 0;
+const react_1 = require("react");
+/**
+ * Hook to track media query state
+ * @param query - The media query string (e.g., "(min-width: 1024px)")
+ * @returns boolean indicating if the media query matches
+ */
+const useMediaQuery = (query) => {
+    // Default to false for SSR to prevent hydration mismatch
+    const [matches, setMatches] = (0, react_1.useState)(false);
+    const currentMatches = (0, react_1.useRef)(matches);
+    (0, react_1.useEffect)(() => {
+        // Only run on client side
+        if (typeof window === "undefined") {
+            return;
+        }
+        const mediaQuery = window.matchMedia(query);
+        // Set initial value
+        setMatches(mediaQuery.matches);
+        currentMatches.current = mediaQuery.matches;
+        // Create event listener
+        const handleChange = (event) => {
+            const newMatch = event.matches;
+            if (newMatch !== currentMatches.current) {
+                setMatches(newMatch);
+                currentMatches.current = newMatch;
+            }
+        };
+        // Add event listener
+        mediaQuery.addEventListener("change", handleChange);
+        // Cleanup
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+        };
+    }, [query]);
+    return matches;
+};
+exports.useMediaQuery = useMediaQuery;

package/dist/es/lib/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+type Query = `(min-width: ${number}px)` | `(max-width: ${number}px)` | `(min-width: ${number}px) and (max-width: ${number}px)`;
+/**
+ * Hook to track media query state
+ * @param query - The media query string (e.g., "(min-width: 1024px)")
+ * @returns boolean indicating if the media query matches
+ */
+export declare const useMediaQuery: (query: Query) => boolean;
+export {};
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/es/lib/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../lib/useMediaQuery.ts"],"names":[],"mappings":"AAIA,KAAK,KAAK,GACJ,eAAe,MAAM,KAAK,GAC1B,eAAe,MAAM,KAAK,GAC1B,eAAe,MAAM,uBAAuB,MAAM,KAAK,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,OAqC5C,CAAC"}

package/dist/es/lib/useMediaQuery.js

@@ -0,0 +1,41 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = void 0;
+const react_1 = require("react");
+/**
+ * Hook to track media query state
+ * @param query - The media query string (e.g., "(min-width: 1024px)")
+ * @returns boolean indicating if the media query matches
+ */
+const useMediaQuery = (query) => {
+    // Default to false for SSR to prevent hydration mismatch
+    const [matches, setMatches] = (0, react_1.useState)(false);
+    const currentMatches = (0, react_1.useRef)(matches);
+    (0, react_1.useEffect)(() => {
+        // Only run on client side
+        if (typeof window === "undefined") {
+            return;
+        }
+        const mediaQuery = window.matchMedia(query);
+        // Set initial value
+        setMatches(mediaQuery.matches);
+        currentMatches.current = mediaQuery.matches;
+        // Create event listener
+        const handleChange = (event) => {
+            const newMatch = event.matches;
+            if (newMatch !== currentMatches.current) {
+                setMatches(newMatch);
+                currentMatches.current = newMatch;
+            }
+        };
+        // Add event listener
+        mediaQuery.addEventListener("change", handleChange);
+        // Cleanup
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+        };
+    }, [query]);
+    return matches;
+};
+exports.useMediaQuery = useMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@becklyn/next",
-    "version": "2.1.4",
+    "version": "3.0.0",
     "license": "MIT",
     "homepage": "https://github.com/Becklyn-Studios/ts-libs/tree/main/packages/next",
     "repository": {

package/scss/mixins.scss

@@ -1,5 +1,4 @@
 @forward "./animation.scss";
-@forward "./breakpoints.scss";
 @forward "./interaction.scss";
 @forward "./sizing.scss";
 @forward "./fill.scss";

package/scss/breakpoints.scss

@@ -1,23 +0,0 @@
-@mixin tablet {
-    @media (min-width: 744px) {
-        @content;
-    }
-}
-
-@mixin large-tablet {
-    @media (min-width: 1024px) {
-        @content;
-    }
-}
-
-@mixin desktop {
-    @media (min-width: 1440px) {
-        @content;
-    }
-}
-
-@mixin large-desktop {
-    @media (min-width: 1920px) {
-        @content;
-    }
-}