cherry-styled-components 0.2.12 → 0.2.14

package/dist/utils/use-lock-body-scroll.js

@@ -0,0 +1,25 @@
+"use client";
+"use client";
+import { useEffect } from "react";
+//#region src/lib/utils/use-lock-body-scroll.tsx
+var lockCount = 0;
+var previousOverflow = "";
+/**
+* Freezes body scrolling while `isLocked` is true. Safe to nest: the body is
+* restored only when every active lock has been released.
+*/ function useLockBodyScroll(isLocked) {
+	useEffect(() => {
+		if (!isLocked) return;
+		if (lockCount === 0) {
+			previousOverflow = document.body.style.overflow;
+			document.body.style.overflow = "hidden";
+		}
+		lockCount += 1;
+		return () => {
+			lockCount -= 1;
+			if (lockCount === 0) document.body.style.overflow = previousOverflow;
+		};
+	}, [isLocked]);
+}
+//#endregion
+export { useLockBodyScroll };

package/dist/utils/use-media-query.d.ts

@@ -0,0 +1,14 @@
+import { Breakpoints } from './theme';
+/**
+ * Subscribes to a media query. Returns `false` on the server and during the
+ * first client render so hydration matches, then re-renders with the real
+ * match. Pass a full media query string, e.g. "(max-width: 991px)".
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * True while the viewport is narrower than the named breakpoint, i.e. the
+ * inverse of the `mq()` helper's min-width query. Handy for behavior (not
+ * styling) that has to change below a breakpoint, such as a side panel turning
+ * into a full-screen modal.
+ */
+export declare function useBelowBreakpoint(size: keyof Breakpoints): boolean;

package/dist/utils/use-media-query.js

@@ -0,0 +1,28 @@
+"use client";
+"use client";
+import { breakpoints } from "./theme.js";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/lib/utils/use-media-query.tsx
+/**
+* Subscribes to a media query. Returns `false` on the server and during the
+* first client render so hydration matches, then re-renders with the real
+* match. Pass a full media query string, e.g. "(max-width: 991px)".
+*/ function useMediaQuery(query) {
+	const subscribe = useCallback((onChange) => {
+		const mediaQuery = window.matchMedia(query);
+		mediaQuery.addEventListener("change", onChange);
+		return () => mediaQuery.removeEventListener("change", onChange);
+	}, [query]);
+	const getSnapshot = useCallback(() => window.matchMedia(query).matches, [query]);
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+/**
+* True while the viewport is narrower than the named breakpoint, i.e. the
+* inverse of the `mq()` helper's min-width query. Handy for behavior (not
+* styling) that has to change below a breakpoint, such as a side panel turning
+* into a full-screen modal.
+*/ function useBelowBreakpoint(size) {
+	return useMediaQuery(`(max-width: ${breakpoints[size] - 1}px)`);
+}
+//#endregion
+export { useBelowBreakpoint, useMediaQuery };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -20,6 +20,7 @@
   "homepage": "https://cherry.al",
   "repository": "https://github.com/cherry-design-system/styled-components",
   "license": "MIT",
+  "packageManager": "pnpm@11.20.0",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -40,6 +41,7 @@
     "build": "vite build",
     "build:demo": "vite build --mode demo",
     "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "screenshots": "node scripts/screenshot-previews.cjs"
   },
   "dependencies": {
@@ -53,14 +55,14 @@
   "devDependencies": {
     "@swc/plugin-styled-components": "^12.15.0",
     "@types/node": "^26.1.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@typescript/typescript6": "^6.0.2",
     "@vitejs/plugin-react-swc": "^4.3.3",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "next": "^16.2.12",
-    "playwright-core": "^1.62.0",
+    "next": "^16.3.0",
+    "playwright-core": "^1.62.1",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -68,7 +70,7 @@
     "sharp": "^0.35.3",
     "styled-components": "^6.4.4",
     "typescript": "^7.0.2",
-    "vite": "^8.1.5",
+    "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3"
   }
 }