@djangocfg/ui-nextjs 2.1.252 → 2.1.254

package/README.md

@@ -26,7 +26,7 @@ Peer dependencies: `next`, `next-intl`, `react`, `tailwindcss`.
 
 ```
 @djangocfg/ui-nextjs
-├── Re-exports everything from @djangocfg/ui-core (60 components, 13 hooks)
+├── Re-exports everything from @djangocfg/ui-core (components + hooks)
 ├── + Next.js locale-aware components (11)
 ├── + Navigation hooks (useNavigation, useRouter, usePathname)
 ├── + Browser storage hooks (2)
@@ -49,7 +49,7 @@ All components from `@djangocfg/ui-core` are re-exported.
 |-----------|-------------|
 | `NextLink` | Locale-aware link wrapper |
 | `NextButtonLink` | Button-styled locale-aware link with variants |
-| `Sidebar` | Locale-aware navigation sidebar |
+| `Sidebar` | Locale-aware collapsible sidebar; `SidebarTrigger` shows an OS-aware tooltip (`⌘+B` / `Ctrl+B`); `SidebarMenuButton` accepts `tooltip` for icon-rail hints |
 | `Breadcrumb` | Locale-aware breadcrumbs |
 | `BreadcrumbNavigation` | High-level breadcrumb component |
 | `NavigationMenu` | Locale-aware navigation menu |
@@ -91,12 +91,15 @@ function MyComponent() {
 }
 ```
 
-### From ui-core (13)
+### From ui-core (re-exported)
+
+All hooks from `@djangocfg/ui-core/hooks` are available. Common examples:
 
 | Hook | Description |
 |------|-------------|
 | `useMediaQuery` | Responsive breakpoints |
 | `useIsMobile` | Mobile detection |
+| `useShortcutModLabel` | `⌘` vs `Ctrl` labels for shortcut tooltips |
 | `useCopy` | Copy to clipboard |
 | `useCountdown` | Countdown timer |
 | `useDebounce` | Debounce values |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.252",
+  "version": "2.1.254",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -85,11 +85,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.252",
-    "@djangocfg/i18n": "^2.1.252",
-    "@djangocfg/nextjs": "^2.1.252",
-    "@djangocfg/ui-core": "^2.1.252",
-    "@djangocfg/ui-tools": "^2.1.252",
+    "@djangocfg/api": "^2.1.254",
+    "@djangocfg/i18n": "^2.1.254",
+    "@djangocfg/nextjs": "^2.1.254",
+    "@djangocfg/ui-core": "^2.1.254",
+    "@djangocfg/ui-tools": "^2.1.254",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -112,7 +112,7 @@
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.252",
+    "@djangocfg/typescript-config": "^2.1.254",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",

package/src/components/sidebar.tsx

@@ -20,7 +20,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@djangocfg/ui-core/components';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { useIsMobile, useShortcutModLabel } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 import { Slot } from '@radix-ui/react-slot';
 
@@ -300,7 +300,7 @@ const Sidebar = React.forwardRef<
               "relative flex h-full w-full flex-col overflow-hidden text-sidebar-foreground",
               variant === "floating"
                 ? "rounded-lg border border-sidebar-border bg-sidebar shadow"
-                : "bg-zinc-50/90 dark:bg-sidebar",
+                : "bg-sidebar",
             )}
           >
             {/* Full-height vertical accent on the seam (gradient runs top → bottom, not along X) */}
@@ -328,23 +328,33 @@ const SidebarTrigger = React.forwardRef<
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar()
+  const mod = useShortcutModLabel()
+  const isMobile = useIsMobile()
+  const hint = isMobile ? "Toggle sidebar" : `Toggle sidebar (${mod}+B)`
 
   return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
+    <Tooltip delayDuration={400}>
+      <TooltipTrigger asChild>
+        <Button
+          ref={ref}
+          data-sidebar="trigger"
+          variant="ghost"
+          size="icon"
+          className={cn("h-7 w-7", className)}
+          onClick={(event) => {
+            onClick?.(event)
+            toggleSidebar()
+          }}
+          {...props}
+        >
+          <PanelLeft />
+          <span className="sr-only">{hint}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="center" sideOffset={6} className="max-w-[16rem]">
+        {hint}
+      </TooltipContent>
+    </Tooltip>
   )
 })
 SidebarTrigger.displayName = "SidebarTrigger"
@@ -523,7 +533,8 @@ const SidebarGroupLabel = React.forwardRef<
       data-sidebar="group-label"
       className={cn(
         "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:-mt-8 group-data-[state=collapsed]:group-data-[collapsible=icon]:opacity-0",
+        // Collapsed rail: label is visually hidden but was still hit-testing; -mt-8 overlaps the last nav row.
+        "group-data-[state=collapsed]:group-data-[collapsible=icon]:pointer-events-none group-data-[state=collapsed]:group-data-[collapsible=icon]:-mt-8 group-data-[state=collapsed]:group-data-[collapsible=icon]:opacity-0",
         className
       )}
       {...props}
@@ -678,11 +689,8 @@ const SidebarMenuButton = React.forwardRef<
       return buttonContent
     }
 
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      }
-    }
+    const tooltipContentProps: React.ComponentProps<typeof TooltipContent> =
+      typeof tooltip === "string" ? { children: tooltip } : { ...tooltip }
 
     return (
       <Tooltip>
@@ -690,8 +698,10 @@ const SidebarMenuButton = React.forwardRef<
         <TooltipContent
           side="right"
           align="center"
+          sideOffset={8}
+          avoidCollisions={false}
           hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
+          {...tooltipContentProps}
         />
       </Tooltip>
     )