@djangocfg/ui-nextjs 2.1.251 → 2.1.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.251",
+  "version": "2.1.252",
   "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.252",
+    "@djangocfg/i18n": "^2.1.252",
+    "@djangocfg/nextjs": "^2.1.252",
+    "@djangocfg/ui-core": "^2.1.252",
+    "@djangocfg/ui-tools": "^2.1.252",
     "@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.252",
     "@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,8 +6,19 @@ 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 { cn } from '@djangocfg/ui-core/lib';
@@ -16,7 +27,6 @@ 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-zinc-50/90 dark: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>
@@ -332,7 +362,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",
@@ -709,11 +738,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} />