@djangocfg/ui-core 2.1.252 → 2.1.254

package/README.md

@@ -39,6 +39,8 @@ pnpm add @djangocfg/ui-core
 ### Overlay (7)
 `Dialog` `AlertDialog` `Sheet` `Drawer` `Popover` `HoverCard` `Tooltip`
 
+Default **`TooltipContent`** styling uses semantic **popover** tokens (`bg-popover`, `text-popover-foreground`, `border-border`, shadow) — not `primary` — so hints read as neutral floating UI.
+
 ### Feedback (5)
 `Toaster` `Alert` `Progress` `Badge` `Avatar`
 
@@ -51,7 +53,7 @@ pnpm add @djangocfg/ui-core
 ### Specialized (13)
 `ButtonGroup` `Empty` `Spinner` `Preloader` `Kbd` `TokenIcon` `InputGroup` `Item` `ImageWithFallback` `OgImage` `CopyButton` `CopyField` `StaticPagination`
 
-## Hooks (16)
+## Hooks (17)
 
 | Hook | Description |
 |------|-------------|
@@ -68,6 +70,7 @@ pnpm add @djangocfg/ui-core
 | `useEventListener` | Event bus |
 | `useDebugTools` | Debug utilities |
 | `useHotkey` | Keyboard shortcuts (react-hotkeys-hook) |
+| `useShortcutModLabel()` | Returns `⌘` or `Ctrl` for shortcut hints (Apple vs Windows/Linux); pairs with `metaKey \|\| ctrlKey` handlers |
 | `useBrowserDetect` | Browser detection (Chrome, Safari, in-app browsers, etc.) |
 | `useDeviceDetect` | Device detection (mobile, tablet, desktop, OS, etc.) |
 | `useResolvedTheme` | Current resolved theme (light/dark/system) |

package/package.json

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

package/src/components/tooltip.tsx

@@ -21,7 +21,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-150 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[200] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/hooks/index.ts

@@ -25,6 +25,7 @@ export { useStoredValue } from './useStoredValue';
 export type { UseStoredValueOptions, StorageType } from './useStoredValue';
 export { useHotkey, useHotkeysContext, HotkeysProvider, isHotkeyPressed } from './useHotkey';
 export type { UseHotkeyOptions, HotkeyCallback, Keys, HotkeyRefType } from './useHotkey';
+export { useShortcutModLabel } from './useShortcutModLabel';
 export { useBrowserDetect } from './useBrowserDetect';
 export type { BrowserInfo } from './useBrowserDetect';
 export { useDeviceDetect } from './useDeviceDetect';

package/src/hooks/useShortcutModLabel.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+const noopSubscribe = () => () => {};
+
+/**
+ * Apple platforms use Meta (⌘) for “primary” shortcuts; Windows/Linux use Ctrl.
+ * Matches typical `event.metaKey || event.ctrlKey` handling in app hotkeys.
+ */
+function isAppleLikeClient(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  if (/Mac|iPhone|iPad|iPod/i.test(ua)) return true;
+  // iPadOS 13+ may report as MacIntel with touch
+  if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) return true;
+  return false;
+}
+
+/**
+ * Modifier label for shortcut hints (e.g. tooltips): `⌘` on Apple, `Ctrl` elsewhere.
+ * SSR / first server snapshot returns `Ctrl` to match `getServerSnapshot`.
+ */
+export function useShortcutModLabel(): '⌘' | 'Ctrl' {
+  return useSyncExternalStore(noopSubscribe, () => (isAppleLikeClient() ? '⌘' : 'Ctrl'), () => 'Ctrl');
+}

package/src/styles/theme/tokens.css

@@ -39,6 +39,8 @@
 
   /* Sidebar colors */
   --color-sidebar-background: hsl(var(--sidebar-background));
+  /* Shorthand used by shadcn sidebar (`bg-sidebar` / `text-sidebar`) — same surface as sidebar-background */
+  --color-sidebar: hsl(var(--sidebar-background));
   --color-sidebar-foreground: hsl(var(--sidebar-foreground));
   --color-sidebar-primary: hsl(var(--sidebar-primary));
   --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));