@djangocfg/ui-core 2.1.147 → 2.1.149

package/README.md

@@ -44,7 +44,7 @@ pnpm add @djangocfg/ui-core
 ### Specialized (13)
 `ButtonGroup` `Empty` `Spinner` `Preloader` `Kbd` `TokenIcon` `InputGroup` `Item` `ImageWithFallback` `OgImage` `CopyButton` `CopyField` `StaticPagination`
 
-## Hooks (10)
+## Hooks (13)
 
 | Hook | Description |
 |------|-------------|
@@ -58,6 +58,47 @@ pnpm add @djangocfg/ui-core
 | `useToast` / `toast` | Toast notifications (Sonner) |
 | `useEventListener` | Event bus |
 | `useDebugTools` | Debug utilities |
+| `useHotkey` | Keyboard shortcuts (react-hotkeys-hook) |
+| `useBrowserDetect` | Browser detection (Chrome, Safari, in-app browsers, etc.) |
+| `useDeviceDetect` | Device detection (mobile, tablet, desktop, OS, etc.) |
+
+## Dialog Service
+
+Universal dialog service to replace native `window.alert`, `window.confirm`, `window.prompt` with beautiful shadcn dialogs.
+
+```tsx
+import { DialogProvider, useDialog, dialog } from '@djangocfg/ui-core/lib/dialog-service';
+
+// Wrap your app with DialogProvider
+function App() {
+  return (
+    <DialogProvider>
+      <YourApp />
+    </DialogProvider>
+  );
+}
+
+// Use via React hook
+function Component() {
+  const { alert, confirm, prompt } = useDialog();
+
+  const handleDelete = async () => {
+    const confirmed = await confirm({
+      title: 'Delete item?',
+      message: 'This action cannot be undone.',
+      variant: 'destructive',
+    });
+    if (confirmed) {
+      // Delete...
+    }
+  };
+}
+
+// Or use globally from anywhere (vanilla JS, libraries, etc.)
+dialog.alert({ message: 'Hello!' });
+const ok = await dialog.confirm({ message: 'Are you sure?' });
+const name = await dialog.prompt({ message: 'Enter your name:' });
+```
 
 ## Usage
 
@@ -110,6 +151,7 @@ import '@djangocfg/ui-core/styles/globals';
 | `@djangocfg/ui-core/components` | Components only |
 | `@djangocfg/ui-core/hooks` | Hooks only |
 | `@djangocfg/ui-core/lib` | Utilities (cn, etc.) |
+| `@djangocfg/ui-core/lib/dialog-service` | Dialog service |
 | `@djangocfg/ui-core/styles` | CSS |
 
 ## What's NOT included (use ui-nextjs)
@@ -122,7 +164,6 @@ These features require Next.js or browser storage APIs:
 - `Pagination`, `SSRPagination` — uses next/link
 - `DropdownMenu` — uses next/link
 - `DownloadButton` — uses localStorage
-- `useLocalStorage`, `useSessionStorage` — browser storage
 - `useTheme` — uses next-themes
 - `useQueryParams`, `useCfgRouter` — uses next/router
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.147",
+  "version": "2.1.149",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -48,6 +48,11 @@
       "import": "./src/lib/index.ts",
       "require": "./src/lib/index.ts"
     },
+    "./lib/dialog-service": {
+      "types": "./src/lib/dialog-service/index.ts",
+      "import": "./src/lib/dialog-service/index.ts",
+      "require": "./src/lib/dialog-service/index.ts"
+    },
     "./styles": "./src/styles/index.css",
     "./styles/globals": "./src/styles/globals.css",
     "./styles/theme": "./src/styles/theme.css",
@@ -66,7 +71,8 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.147",
+    "@djangocfg/i18n": "^2.1.149",
+    "react-device-detect": "^2.2.3",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -122,13 +128,14 @@
     "react-sticky-box": "^2.0.5",
     "recharts": "2.15.4",
     "sonner": "2.0.7",
+    "react-hotkeys-hook": "^4.6.1",
     "tailwind-merge": "^3.3.1",
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.147",
+    "@djangocfg/i18n": "^2.1.149",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.147",
+    "@djangocfg/typescript-config": "^2.1.149",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/country-select.tsx

@@ -4,7 +4,6 @@ import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
 import * as React from 'react';
 import { countries, getEmojiFlag, type TCountryCode } from 'countries-list';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { cn } from '../lib/utils';
 import { Badge } from './badge';
 import { Button } from './button';
@@ -34,11 +33,11 @@ export interface CountrySelectProps {
   multiple?: boolean;
   /** Display variant: dropdown (popover) or inline (scrollable list) */
   variant?: CountrySelectVariant;
-  /** Placeholder text */
+  /** Placeholder text (default: "Select country...") */
   placeholder?: string;
-  /** Search placeholder text */
+  /** Search placeholder text (default: "Search...") */
   searchPlaceholder?: string;
-  /** Empty results text */
+  /** Empty results text (default: "No countries found") */
   emptyText?: string;
   /** Additional CSS class */
   className?: string;
@@ -58,6 +57,10 @@ export interface CountrySelectProps {
   maxHeight?: number;
   /** Show search input */
   showSearch?: boolean;
+  /** Custom label for selected count (receives count as param). Example: (count) => `${count} selected` */
+  selectedCountLabel?: (count: number) => string;
+  /** Custom label for "more items" badge (receives count as param). Example: (count) => `+${count} more` */
+  moreItemsLabel?: (count: number) => string;
 }
 
 /**
@@ -125,15 +128,16 @@ export function CountrySelect({
   excludedCountries,
   maxHeight = 300,
   showSearch = true,
+  selectedCountLabel = (count: number) => `${count} selected`,
+  moreItemsLabel = (count: number) => `+${count} more`,
 }: CountrySelectProps) {
-  const t = useTypedT<I18nTranslations>()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
 
-  // Resolve translations
-  const resolvedPlaceholder = placeholder ?? t('ui.select.placeholder')
-  const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
-  const resolvedEmptyText = emptyText ?? t('ui.select.noResults')
+  // Resolve defaults
+  const resolvedPlaceholder = placeholder ?? 'Select country...'
+  const resolvedSearchPlaceholder = searchPlaceholder ?? 'Search...'
+  const resolvedEmptyText = emptyText ?? 'No countries found'
 
   // Build country options
   const allCountries = React.useMemo<CountryOption[]>(() => {
@@ -214,12 +218,12 @@ export function CountrySelect({
         {/* Selected count */}
         {multiple && selectedCountries.length > 0 && (
           <p className="text-sm text-muted-foreground">
-            {selectedCountries.length} {t('ui.table.selected')}
+            {selectedCountLabel(selectedCountries.length)}
           </p>
         )}
 
         {/* Country list */}
-        <ScrollArea style={{ maxHeight }} className="rounded-md border">
+        <ScrollArea style={{ height: maxHeight }} className="rounded-md border">
           <div className="p-1">
             {filteredCountries.length === 0 ? (
               <p className="text-sm text-muted-foreground text-center py-4">
@@ -306,7 +310,7 @@ export function CountrySelect({
               className="ml-1 rounded-full hover:bg-muted-foreground/20"
               onClick={(e) => handleRemove(country.code, e)}
               disabled={disabled}
-              aria-label={t('ui.actions.remove', { item: country.name })}
+              aria-label={`Remove ${country.name}`}
             >
               <X className="h-3 w-3" />
             </button>
@@ -314,12 +318,12 @@ export function CountrySelect({
         ))}
         {remaining > 0 && (
           <Badge variant="outline" className="text-xs">
-            {t('ui.select.moreItems', { count: remaining })}
+            {moreItemsLabel(remaining)}
           </Badge>
         )}
       </div>
     )
-  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, t, multiple, handleRemove])
+  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel])
 
   return (
     <Popover

package/src/hooks/index.ts

@@ -19,3 +19,9 @@ export { useResolvedTheme } from './useResolvedTheme';
 export type { ResolvedTheme } from './useResolvedTheme';
 export { useLocalStorage } from './useLocalStorage';
 export { useSessionStorage } from './useSessionStorage';
+export { useHotkey, useHotkeysContext, HotkeysProvider, isHotkeyPressed } from './useHotkey';
+export type { UseHotkeyOptions, HotkeyCallback, Keys, HotkeyRefType } from './useHotkey';
+export { useBrowserDetect } from './useBrowserDetect';
+export type { BrowserInfo } from './useBrowserDetect';
+export { useDeviceDetect } from './useDeviceDetect';
+export type { DeviceDetectResult } from './useDeviceDetect';

package/src/hooks/useBrowserDetect.ts

@@ -0,0 +1,330 @@
+/**
+ * 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;
+
+  // Additional browsers
+  isComet: boolean; // Perplexity's Comet browser (Chromium-based, supports push)
+  isOperaMini: boolean; // Opera Mini (does NOT support push notifications)
+  isIE: boolean; // Internet Explorer (does NOT support push notifications)
+
+  // In-App Browsers (WebViews) - typically do NOT support push notifications
+  isFacebookInApp: boolean; // Facebook's in-app browser
+  isInstagramInApp: boolean; // Instagram's in-app browser
+  isTikTokInApp: boolean; // TikTok's in-app browser
+  isSnapchatInApp: boolean; // Snapchat's in-app browser
+  isWeChatInApp: boolean; // WeChat's in-app browser
+  isThreadsInApp: boolean; // Threads' in-app browser
+  isLinkedInInApp: boolean; // LinkedIn's in-app browser (uses Chrome WebView - supports push on Android)
+  isTwitterInApp: boolean; // Twitter/X's in-app browser (uses Chrome WebView - supports push on Android)
+  isInAppBrowser: boolean; // Any in-app browser detected
+  isWebView: boolean; // Generic WebView detection
+
+  // Browser name
+  browserName: string;
+
+  // Engine
+  isWebKit: boolean; // Safari's engine
+  isBlink: boolean; // Chromium's engine
+  isGecko: boolean; // Firefox's engine
+
+  // Push notification support
+  /**
+   * Whether the browser supports Web Push Notifications.
+   * Returns false for browsers known to NOT support push:
+   * - Opera Mini (no service worker support)
+   * - Internet Explorer (deprecated, no Push API)
+   * - UC Browser (unreliable push support)
+   * - In-App browsers (Facebook, Instagram, TikTok, Snapchat, etc.)
+   * - Generic WebViews (except Twitter/LinkedIn on Android which use Chrome WebView)
+   *
+   * Note: Comet (Perplexity) is Chromium-based and DOES support push notifications.
+   * Note: This is a browser-level check. For full push support,
+   * also check 'serviceWorker' in navigator && 'PushManager' in window
+   */
+  supportsPushNotifications: boolean;
+
+  // iOS specific
+  isIOSBrowser: boolean; // Any browser on iOS (all use WebKit, limited push support)
+
+  // For debugging
+  userAgent: string;
+}
+
+const defaultBrowserInfo: BrowserInfo = {
+  isChrome: false,
+  isChromium: false,
+  isSafari: false,
+  isFirefox: false,
+  isEdge: false,
+  isOpera: false,
+  isBrave: false,
+  isArc: false,
+  isVivaldi: false,
+  isYandex: false,
+  isSamsungBrowser: false,
+  isUCBrowser: false,
+  isComet: false,
+  isOperaMini: false,
+  isIE: false,
+  isFacebookInApp: false,
+  isInstagramInApp: false,
+  isTikTokInApp: false,
+  isSnapchatInApp: false,
+  isWeChatInApp: false,
+  isThreadsInApp: false,
+  isLinkedInInApp: false,
+  isTwitterInApp: false,
+  isInAppBrowser: false,
+  isWebView: false,
+  browserName: 'unknown',
+  isWebKit: false,
+  isBlink: false,
+  isGecko: false,
+  supportsPushNotifications: false,
+  isIOSBrowser: false,
+  userAgent: '',
+};
+
+/**
+ * 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 defaultBrowserInfo;
+    }
+
+    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');
+
+    // Comet Browser (Perplexity's AI browser, Chromium-based)
+    const isComet = ua.includes('comet') || ua.includes('perplexity');
+
+    // Opera Mini (does NOT support service workers or push)
+    const isOperaMini = ua.includes('opera mini') || ua.includes('opios');
+
+    // Internet Explorer (deprecated, no Push API support)
+    const isIE = ua.includes('msie') || ua.includes('trident/');
+
+    // In-App Browsers Detection
+    const isFacebookInApp = ua.includes('fban') || ua.includes('fbav') || ua.includes('fb_iab');
+    const isInstagramInApp = ua.includes('instagram');
+    const isTikTokInApp = ua.includes('tiktok') || ua.includes('bytedancewebview') || ua.includes('bytelocale');
+    const isSnapchatInApp = ua.includes('snapchat');
+    const isWeChatInApp = ua.includes('micromessenger');
+    const isThreadsInApp = ua.includes('barcelona');
+    const isLinkedInInApp = ua.includes('linkedinapp');
+    const isTwitterInApp = ua.includes('twitter');
+    const isPinterestInApp = ua.includes('pinterest');
+    const isTelegramInApp = ua.includes('telegram');
+    const isLineInApp = ua.includes('line/');
+    const isKakaoInApp = ua.includes('kakaotalk');
+
+    // Generic WebView detection
+    const isWebView = ua.includes('wv)') ||
+                     ua.includes('webview') ||
+                     ua.includes('; wv') ||
+                     (ua.includes('iphone') && !ua.includes('safari')) ||
+                     (ua.includes('ipad') && !ua.includes('safari'));
+
+    // Aggregate: Any in-app browser
+    const isInAppBrowser = isFacebookInApp ||
+                          isInstagramInApp ||
+                          isTikTokInApp ||
+                          isSnapchatInApp ||
+                          isWeChatInApp ||
+                          isThreadsInApp ||
+                          isLinkedInInApp ||
+                          isTwitterInApp ||
+                          isPinterestInApp ||
+                          isTelegramInApp ||
+                          isLineInApp ||
+                          isKakaoInApp;
+
+    // iOS detection
+    const isIOSBrowser = ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod');
+
+    // Opera (modern Chromium-based)
+    const isOpera = (ua.includes('opr/') || ua.includes('opera')) && !isOperaMini;
+
+    // Chrome
+    const isChrome = ua.includes('chrome') &&
+                    !isEdge &&
+                    !isOpera &&
+                    !isYandex &&
+                    !isSamsungBrowser &&
+                    !isVivaldi &&
+                    !isArc &&
+                    !isBrave &&
+                    !isComet;
+
+    // Firefox
+    const isFirefox = ua.includes('firefox') && !ua.includes('seamonkey');
+
+    // Safari (real Safari)
+    const hasSafariUA = ua.includes('safari');
+    const hasChrome = ua.includes('chrome') || ua.includes('crios');
+    const hasVersion = ua.includes('version/');
+    const isSafari = hasSafariUA && !hasChrome && hasVersion;
+
+    // Chromium detection
+    const isChromium = hasChrome ||
+                      isEdge ||
+                      isOpera ||
+                      isYandex ||
+                      isSamsungBrowser ||
+                      isVivaldi ||
+                      isArc ||
+                      isBrave ||
+                      isUCBrowser ||
+                      isComet;
+
+    // Engine detection
+    const isWebKit = !isChromium && isSafari;
+    const isBlink = isChromium;
+    const isGecko = isFirefox;
+
+    // Determine browser name
+    let browserName = 'unknown';
+    if (isFacebookInApp) browserName = 'Facebook In-App';
+    else if (isInstagramInApp) browserName = 'Instagram In-App';
+    else if (isTikTokInApp) browserName = 'TikTok In-App';
+    else if (isSnapchatInApp) browserName = 'Snapchat In-App';
+    else if (isWeChatInApp) browserName = 'WeChat In-App';
+    else if (isThreadsInApp) browserName = 'Threads In-App';
+    else if (isLinkedInInApp) browserName = 'LinkedIn In-App';
+    else if (isTwitterInApp) browserName = 'Twitter In-App';
+    else if (isPinterestInApp) browserName = 'Pinterest In-App';
+    else if (isTelegramInApp) browserName = 'Telegram In-App';
+    else if (isLineInApp) browserName = 'Line In-App';
+    else if (isKakaoInApp) browserName = 'KakaoTalk In-App';
+    else if (isComet) browserName = 'Comet';
+    else if (isOperaMini) browserName = 'Opera Mini';
+    else if (isIE) browserName = 'Internet Explorer';
+    else 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';
+    else if (isWebView) browserName = 'WebView';
+
+    // Determine push notification support
+    const browserBlocksPush = isOperaMini ||
+                             isIE ||
+                             isUCBrowser ||
+                             isFacebookInApp ||
+                             isInstagramInApp ||
+                             isTikTokInApp ||
+                             isSnapchatInApp ||
+                             isWeChatInApp ||
+                             isThreadsInApp ||
+                             isPinterestInApp ||
+                             isTelegramInApp ||
+                             isLineInApp ||
+                             isKakaoInApp ||
+                             isWebView;
+
+    const twitterLinkedInAndroid = (isTwitterInApp || isLinkedInInApp) && !isIOSBrowser;
+    const supportsPushNotifications = !browserBlocksPush || twitterLinkedInAndroid;
+
+    return {
+      isChrome,
+      isChromium,
+      isSafari,
+      isFirefox,
+      isEdge,
+      isOpera,
+      isBrave,
+      isArc,
+      isVivaldi,
+      isYandex,
+      isSamsungBrowser,
+      isUCBrowser,
+      isComet,
+      isOperaMini,
+      isIE,
+      isFacebookInApp,
+      isInstagramInApp,
+      isTikTokInApp,
+      isSnapchatInApp,
+      isWeChatInApp,
+      isThreadsInApp,
+      isLinkedInInApp,
+      isTwitterInApp,
+      isInAppBrowser,
+      isWebView,
+      browserName,
+      isWebKit,
+      isBlink,
+      isGecko,
+      supportsPushNotifications,
+      isIOSBrowser,
+      userAgent: window.navigator.userAgent,
+    };
+  }, []);
+}