@djangocfg/ui-core 2.1.281 → 2.1.282

package/README.md

@@ -76,6 +76,7 @@ Default **`TooltipContent`** styling uses semantic **popover** tokens (`bg-popov
 | `useIsPhone()` | `< 640px` — phones only |
 | `useIsMobile()` | `< 768px` — phones + small tablets |
 | `useIsTabletOrBelow()` | `< 1024px` — phones + tablets |
+| `useBodyScrollLock(locked)` | Lock body scroll while `locked=true`; counter-based (multi-consumer safe), iOS-safe via `position: fixed` fallback |
 | `useCopy` | Copy to clipboard |
 | `useCountdown` | Countdown timer |
 | `useDebounce` | Debounce values |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.281",
+  "version": "2.1.282",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -86,7 +86,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.281",
+    "@djangocfg/i18n": "^2.1.282",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -148,9 +148,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.281",
+    "@djangocfg/i18n": "^2.1.282",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.281",
+    "@djangocfg/typescript-config": "^2.1.282",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export { useDebounce } from './useDebounce';
 export { useDebugTools } from './useDebugTools';
 export { useEventListener, events } from './useEventsBus';
 export { useIsMobile, useIsPhone, useIsTabletOrBelow, BREAKPOINTS } from './useMobile';
+export { useBodyScrollLock } from './useBodyScrollLock';
 export type { Breakpoint } from './useMobile';
 export { useMediaQuery, BREAKPOINTS as MEDIA_BREAKPOINTS } from './useMediaQuery';
 export { useCopy } from './useCopy';

package/src/hooks/useBodyScrollLock.ts

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useDeviceDetect } from './useDeviceDetect';
+
+/**
+ * useBodyScrollLock — locks body scroll while `locked` is true.
+ *
+ * Safe to use from multiple components concurrently: a module-scope counter
+ * tracks active locks and only releases the lock when the last caller unmounts
+ * (or passes `locked=false`).
+ *
+ * Strategy:
+ *  - iOS Safari: pin body in place with `position: fixed; top: -scrollY` and
+ *    restore scroll on release. `overflow: hidden` alone is ignored on iOS.
+ *  - Other browsers: `body.overflow = 'hidden'` plus a `paddingRight`
+ *    compensator for the disappearing scrollbar so layout doesn't shift.
+ *    We intentionally do NOT touch `html.overflow` — that removes the
+ *    scrolling container for `position: sticky` descendants and breaks
+ *    sticky navbars while the lock is active.
+ *
+ * @example
+ * useBodyScrollLock(isMobile && drawerOpen);
+ */
+
+let lockCount = 0;
+interface SavedState {
+  bodyOverflow: string;
+  bodyPaddingRight: string;
+  bodyPosition: string;
+  bodyTop: string;
+  bodyWidth: string;
+  scrollY: number;
+  iosMode: boolean;
+}
+let saved: SavedState | null = null;
+
+function getScrollbarWidth(): number {
+  if (typeof window === 'undefined') return 0;
+  return window.innerWidth - document.documentElement.clientWidth;
+}
+
+function applyLock(iosMode: boolean) {
+  const body = document.body;
+  const scrollY = window.scrollY;
+
+  saved = {
+    bodyOverflow: body.style.overflow,
+    bodyPaddingRight: body.style.paddingRight,
+    bodyPosition: body.style.position,
+    bodyTop: body.style.top,
+    bodyWidth: body.style.width,
+    scrollY,
+    iosMode,
+  };
+
+  if (iosMode) {
+    // iOS Safari ignores `overflow: hidden` on body — pin body in place and
+    // remember scroll position so we can restore it on release.
+    body.style.position = 'fixed';
+    body.style.top = `-${scrollY}px`;
+    body.style.width = '100%';
+    body.style.overflow = 'hidden';
+  } else {
+    // Avoid touching `html.overflow`: it breaks `position: sticky` ancestors
+    // (they lose their scrolling container and fall back to static flow).
+    const scrollbarWidth = getScrollbarWidth();
+    if (scrollbarWidth > 0) {
+      const current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${current + scrollbarWidth}px`;
+    }
+    body.style.overflow = 'hidden';
+  }
+}
+
+function releaseLock() {
+  if (!saved) return;
+  const body = document.body;
+  const { iosMode, scrollY } = saved;
+
+  body.style.overflow = saved.bodyOverflow;
+  body.style.paddingRight = saved.bodyPaddingRight;
+  body.style.position = saved.bodyPosition;
+  body.style.top = saved.bodyTop;
+  body.style.width = saved.bodyWidth;
+
+  if (iosMode) {
+    window.scrollTo(0, scrollY);
+  }
+
+  saved = null;
+}
+
+export function useBodyScrollLock(locked: boolean): void {
+  const device = useDeviceDetect();
+
+  useEffect(() => {
+    if (!locked) return;
+    if (typeof document === 'undefined') return;
+
+    if (lockCount === 0) {
+      applyLock(device.isIOS);
+    }
+    lockCount += 1;
+
+    return () => {
+      lockCount = Math.max(0, lockCount - 1);
+      if (lockCount === 0) {
+        releaseLock();
+      }
+    };
+  }, [locked, device.isIOS]);
+}

package/src/styles/utilities.css

@@ -4,6 +4,27 @@
  * Compatible with Tailwind CSS v4
  */
 
+/**
+ * Display font utility — for marketing headlines and large numeric stats.
+ *
+ * The font itself is NOT shipped here. Apps pick their own display font and
+ * expose it as `--font-display` on <html> (via `next/font`, `@font-face`, or
+ * equivalent). If the variable is missing, falls back to the system UI stack.
+ *
+ * @example (next/font in an app layout)
+ *   const display = Plus_Jakarta_Sans({ weight: ['700', '800'], variable: '--font-display' });
+ *   <html className={display.variable}>
+ *
+ * @example (usage)
+ *   <h1 className="font-display text-7xl font-black tracking-tight">Ship fast.</h1>
+ */
+.font-display {
+  font-family: var(--font-display), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-feature-settings: 'ss01', 'ss03';
+  letter-spacing: -0.035em;
+  padding-bottom: 0.08em;
+}
+
 /**
  * Screen Reader Only
  * Hides content visually but keeps it accessible to screen readers