@djangocfg/ui-nextjs 2.1.30 → 2.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.30",
+  "version": "2.1.31",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.30",
-    "@djangocfg/ui-core": "^2.1.30",
+    "@djangocfg/api": "^2.1.31",
+    "@djangocfg/ui-core": "^2.1.31",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -106,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.30",
+    "@djangocfg/typescript-config": "^2.1.31",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/hooks/index.ts

@@ -26,3 +26,7 @@ export type { UseHotkeyOptions, HotkeyCallback, Keys } from './useHotkey';
 // Device detection
 export { useDeviceDetect } from './useDeviceDetect';
 export type { DeviceDetectResult } from './useDeviceDetect';
+
+// Browser detection (advanced - detects Chromium browsers correctly)
+export { useBrowserDetect } from './useBrowserDetect';
+export type { BrowserInfo } from './useBrowserDetect';

package/src/hooks/useBrowserDetect.ts

@@ -0,0 +1,182 @@
+/**
+ * Advanced browser detection hook
+ *
+ * Detects modern browsers including Chromium-based browsers that may
+ * incorrectly report as Safari (Arc, Brave, Vivaldi, Comet, etc.)
+ */
+
+'use client';
+
+import { useMemo } from 'react';
+
+export interface BrowserInfo {
+  // Core browser types
+  isChrome: boolean;
+  isChromium: boolean; // Any Chromium-based browser
+  isSafari: boolean; // Real Safari (WebKit on macOS/iOS)
+  isFirefox: boolean;
+  isEdge: boolean;
+  isOpera: boolean;
+
+  // Modern Chromium-based browsers
+  isBrave: boolean;
+  isArc: boolean;
+  isVivaldi: boolean;
+  isYandex: boolean;
+  isSamsungBrowser: boolean;
+  isUCBrowser: boolean;
+
+  // Browser name
+  browserName: string;
+
+  // Engine
+  isWebKit: boolean; // Safari's engine
+  isBlink: boolean; // Chromium's engine
+  isGecko: boolean; // Firefox's engine
+
+  // For debugging
+  userAgent: string;
+}
+
+/**
+ * Detect browser with improved accuracy for Chromium-based browsers
+ *
+ * @example
+ * ```tsx
+ * const browser = useBrowserDetect();
+ *
+ * if (browser.isSafari && !browser.isChromium) {
+ *   // Real Safari
+ * }
+ *
+ * if (browser.isChromium) {
+ *   // Any Chromium-based browser (Chrome, Edge, Brave, Arc, etc.)
+ * }
+ * ```
+ */
+export function useBrowserDetect(): BrowserInfo {
+  return useMemo(() => {
+    if (typeof window === 'undefined') {
+      return {
+        isChrome: false,
+        isChromium: false,
+        isSafari: false,
+        isFirefox: false,
+        isEdge: false,
+        isOpera: false,
+        isBrave: false,
+        isArc: false,
+        isVivaldi: false,
+        isYandex: false,
+        isSamsungBrowser: false,
+        isUCBrowser: false,
+        browserName: 'unknown',
+        isWebKit: false,
+        isBlink: false,
+        isGecko: false,
+        userAgent: '',
+      };
+    }
+
+    const ua = window.navigator.userAgent.toLowerCase();
+
+    // Check for specific browsers first (most specific to least specific)
+
+    // Edge (Chromium-based)
+    const isEdge = ua.includes('edg/') || ua.includes('edge/');
+
+    // Brave (check for Brave-specific API)
+    const isBrave = !!(window.navigator as any).brave;
+
+    // Arc (check for Arc-specific markers in UA)
+    const isArc = ua.includes('arc/');
+
+    // Vivaldi
+    const isVivaldi = ua.includes('vivaldi');
+
+    // Yandex Browser
+    const isYandex = ua.includes('yabrowser');
+
+    // Samsung Internet
+    const isSamsungBrowser = ua.includes('samsungbrowser');
+
+    // UC Browser
+    const isUCBrowser = ua.includes('ucbrowser') || ua.includes('uc browser');
+
+    // Opera (modern Chromium-based)
+    const isOpera = ua.includes('opr/') || ua.includes('opera');
+
+    // Chrome (not Edge, not other Chromium browsers)
+    const isChrome = ua.includes('chrome') &&
+                    !isEdge &&
+                    !isOpera &&
+                    !isYandex &&
+                    !isSamsungBrowser &&
+                    !isVivaldi &&
+                    !isArc &&
+                    !isBrave;
+
+    // Firefox
+    const isFirefox = ua.includes('firefox') && !ua.includes('seamonkey');
+
+    // Safari (real Safari, not Chromium pretending to be Safari)
+    // Safari will have 'safari' in UA but NOT 'chrome' or 'chromium'
+    // Real Safari uses WebKit engine
+    // Additional check: Safari has 'version/' in UA, Chromium browsers don't combine it with Safari
+    const hasSafariUA = ua.includes('safari');
+    const hasChrome = ua.includes('chrome') || ua.includes('crios');
+    const hasVersion = ua.includes('version/'); // Real Safari includes Version/XX.X
+    const isSafari = hasSafariUA && !hasChrome && hasVersion;
+
+    // Chromium detection (any browser using Chromium/Blink engine)
+    // If it has "chrome" in UA or is one of the known Chromium browsers
+    const isChromium = hasChrome ||
+                      isEdge ||
+                      isOpera ||
+                      isYandex ||
+                      isSamsungBrowser ||
+                      isVivaldi ||
+                      isArc ||
+                      isBrave ||
+                      isUCBrowser;
+
+    // Engine detection
+    const isWebKit = !isChromium && isSafari;
+    const isBlink = isChromium;
+    const isGecko = isFirefox;
+
+    // Determine browser name
+    let browserName = 'unknown';
+    if (isBrave) browserName = 'Brave';
+    else if (isArc) browserName = 'Arc';
+    else if (isVivaldi) browserName = 'Vivaldi';
+    else if (isYandex) browserName = 'Yandex';
+    else if (isSamsungBrowser) browserName = 'Samsung Internet';
+    else if (isUCBrowser) browserName = 'UC Browser';
+    else if (isEdge) browserName = 'Edge';
+    else if (isOpera) browserName = 'Opera';
+    else if (isChrome) browserName = 'Chrome';
+    else if (isSafari) browserName = 'Safari';
+    else if (isFirefox) browserName = 'Firefox';
+
+    return {
+      isChrome,
+      isChromium,
+      isSafari,
+      isFirefox,
+      isEdge,
+      isOpera,
+      isBrave,
+      isArc,
+      isVivaldi,
+      isYandex,
+      isSamsungBrowser,
+      isUCBrowser,
+      browserName,
+      isWebKit,
+      isBlink,
+      isGecko,
+      userAgent: window.navigator.userAgent,
+    };
+  }, []);
+}