@djangocfg/ui-nextjs 2.1.251 → 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.251",
+  "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.251",
-    "@djangocfg/i18n": "^2.1.251",
-    "@djangocfg/nextjs": "^2.1.251",
-    "@djangocfg/ui-core": "^2.1.251",
-    "@djangocfg/ui-tools": "^2.1.251",
+    "@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.251",
+    "@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

@@ -6,17 +6,27 @@ import { Link } from '../lib/navigation';
 import * as React from 'react';
 
 import {
-    Button, Input, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle,
-    Skeleton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  Input,
+  Separator,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  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';
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "min(80vw, 320px)"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
@@ -187,27 +197,37 @@ const Sidebar = React.forwardRef<
     }
 
     if (isMobile) {
+      const drawerSide = side === "right" ? "right" : "left"
       return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="!w-[--sidebar-width] p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-                backgroundColor: "hsl(var(--sidebar-background))",
-              } as React.CSSProperties
-            }
-            side={side}
+        <div ref={ref} className={cn("contents", className)} {...props}>
+          <Drawer
+            open={openMobile}
+            onOpenChange={setOpenMobile}
+            direction={drawerSide}
+            shouldScaleBackground={false}
           >
-            <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-            </SheetHeader>
-            <div className="flex h-full w-full flex-col" style={{ backgroundColor: "hsl(var(--sidebar-background))" }}>{children}</div>
-          </SheetContent>
-        </Sheet>
+            <DrawerContent
+              direction={drawerSide}
+              data-sidebar="sidebar"
+              data-mobile="true"
+              className={cn(
+                "flex h-[100dvh] max-h-[100dvh] min-h-0 !w-[min(80vw,320px)] max-w-[min(80vw,320px)] flex-col gap-0 border-sidebar-border/60 p-0 text-sidebar-foreground shadow-xl",
+                drawerSide === "left" ? "border-r" : "border-l",
+              )}
+              style={
+                {
+                  backgroundColor: "hsl(var(--sidebar-background))",
+                } as React.CSSProperties
+              }
+            >
+              <DrawerHeader className="sr-only">
+                <DrawerTitle>Sidebar</DrawerTitle>
+                <DrawerDescription>Mobile navigation sidebar.</DrawerDescription>
+              </DrawerHeader>
+              <div className="flex min-h-0 flex-1 flex-col overflow-hidden">{children}</div>
+            </DrawerContent>
+          </Drawer>
+        </div>
       )
     }
 
@@ -266,10 +286,7 @@ const Sidebar = React.forwardRef<
             // Adjust the padding for floating and inset variants.
             variant === "floating" || variant === "inset"
               ? "p-2"
-              : cn(
-                  side === "left" && "border-r",
-                  side === "right" && "border-l"
-                ),
+              : undefined,
             className
           )}
           style={{
@@ -280,11 +297,24 @@ const Sidebar = React.forwardRef<
           <div
             data-sidebar="sidebar"
             className={cn(
-              "flex h-full w-full flex-col bg-sidebar",
-              variant === "floating" && "rounded-lg border border-sidebar-border shadow"
+              "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-sidebar",
             )}
           >
-            {children}
+            {/* Full-height vertical accent on the seam (gradient runs top → bottom, not along X) */}
+            {variant === "sidebar" && (
+              <div
+                aria-hidden
+                className={cn(
+                  "pointer-events-none absolute inset-y-0 right-0 z-[1] w-px",
+                  "bg-[linear-gradient(180deg,hsl(var(--sidebar-border)_/_0.02)_0%,hsl(var(--sidebar-border)_/_0.22)_18%,hsl(var(--sidebar-border)_/_0.4)_50%,hsl(var(--sidebar-border)_/_0.2)_82%,hsl(var(--sidebar-border)_/_0.03)_100%)]",
+                  "dark:bg-[linear-gradient(180deg,hsl(var(--sidebar-border)_/_0.08)_0%,hsl(var(--sidebar-border)_/_0.34)_22%,hsl(var(--sidebar-border)_/_0.55)_50%,hsl(var(--sidebar-border)_/_0.28)_78%,hsl(var(--sidebar-border)_/_0.06)_100%)]"
+                )}
+              />
+            )}
+            <div className="relative z-0 flex min-h-0 flex-1 flex-col">{children}</div>
           </div>
         </div>
       </div>
@@ -298,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"
@@ -332,7 +372,6 @@ const SidebarRail = React.forwardRef<
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
-      title="Toggle Sidebar"
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
         "group-data-[side=left]:cursor-w-resize group-data-[side=right]:cursor-e-resize",
@@ -494,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}
@@ -649,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>
@@ -661,8 +698,10 @@ const SidebarMenuButton = React.forwardRef<
         <TooltipContent
           side="right"
           align="center"
+          sideOffset={8}
+          avoidCollisions={false}
           hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
+          {...tooltipContentProps}
         />
       </Tooltip>
     )
@@ -709,11 +748,11 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "pointer-events-none absolute right-1 flex h-4 min-w-4 select-none items-center justify-center rounded-md px-1 text-[10px] font-medium tabular-nums leading-none text-muted-foreground/75",
+      "peer-hover/menu-button:text-muted-foreground peer-data-[active=true]/menu-button:text-foreground/65",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
+      "peer-data-[size=lg]/menu-button:top-2",
       "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden",
       className
     )}

package/src/theme/ThemeToggle.tsx

@@ -71,7 +71,6 @@ export function ThemeToggle({ className, size = 'auto' }: ThemeToggleProps) {
       size="icon"
       onClick={toggleTheme}
       className={cn(buttonSize, className)}
-      title={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} theme`}
     >
       {resolvedTheme === 'light' ? (
         <Sun className={iconSize} />