@djangocfg/layouts 1.2.45 → 1.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.45",
+  "version": "1.2.47",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.45",
-    "@djangocfg/og-image": "^1.2.45",
-    "@djangocfg/ui": "^1.2.45",
+    "@djangocfg/api": "^1.2.47",
+    "@djangocfg/og-image": "^1.2.47",
+    "@djangocfg/ui": "^1.2.47",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.45",
+    "@djangocfg/typescript-config": "^1.2.47",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-20T05:41:09.881Z
+ * Last updated: 2025-11-20T16:20:04.792Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.45"
+    "version": "1.2.47"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.45"
+    "version": "1.2.47"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.45"
+    "version": "1.2.47"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.45"
+    "version": "1.2.47"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.45"
+    "version": "1.2.47"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.45"
+    "version": "1.2.47"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.45"
+    "version": "1.2.47"
   }
 ];
 

package/src/layouts/UILayout/config/components/forms.config.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import {
   Button,
+  ButtonLink,
   DownloadButton,
   Input,
   Checkbox,
@@ -56,22 +57,45 @@ export const FORM_COMPONENTS: ComponentConfig[] = [
   {
     name: 'Button',
     category: 'forms',
-    description: 'Interactive button with multiple variants and sizes',
-    importPath: "import { Button } from '@djangocfg/ui';",
-    example: `<Button variant="default">Click me</Button>
+    description: 'Interactive button with multiple variants, sizes, and loading state. Use ButtonLink for navigation.',
+    importPath: "import { Button, ButtonLink } from '@djangocfg/ui';",
+    example: `// Variants
+<Button variant="default">Click me</Button>
 <Button variant="destructive">Delete</Button>
 <Button variant="outline">Outline</Button>
 <Button variant="ghost">Ghost</Button>
+
+// Sizes
 <Button size="sm">Small</Button>
-<Button size="lg">Large</Button>`,
+<Button size="lg">Large</Button>
+
+// Loading state
+<Button loading={true}>Saving...</Button>
+<Button loading={false}>Save</Button>
+
+// ButtonLink for navigation with Next.js Link
+<ButtonLink href="/dashboard">Go to Dashboard</ButtonLink>
+<ButtonLink href="/settings" variant="outline">Settings</ButtonLink>`,
     preview: (
-      <div className="flex flex-wrap gap-3">
-        <Button variant="default">Click me</Button>
-        <Button variant="destructive">Delete</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button size="sm">Small</Button>
-        <Button size="lg">Large</Button>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-wrap gap-3">
+          <Button variant="default">Click me</Button>
+          <Button variant="destructive">Delete</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="ghost">Ghost</Button>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Button size="sm">Small</Button>
+          <Button size="lg">Large</Button>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Button loading={true}>Saving...</Button>
+          <Button loading={false}>Save</Button>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <ButtonLink href="#">Go to Dashboard</ButtonLink>
+          <ButtonLink href="#" variant="outline">Settings</ButtonLink>
+        </div>
       </div>
     ),
   },

package/src/layouts/UILayout/config/components/navigation.config.tsx

@@ -37,7 +37,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
   {
     name: 'NavigationMenu',
     category: 'navigation',
-    description: 'Accessible navigation menu with dropdown support',
+    description: 'Accessible navigation menu with dropdown support and Next.js router integration',
     importPath: `import {
   NavigationMenu,
   NavigationMenuContent,
@@ -53,6 +53,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
       <NavigationMenuContent>
         <ul className="grid gap-3 p-6 md:w-[400px]">
           <li>
+            {/* NavigationMenuLink with href uses Next.js Link automatically */}
             <NavigationMenuLink href="/">
               <div className="text-sm font-medium">Welcome</div>
               <p className="text-sm text-muted-foreground">
@@ -64,6 +65,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
       </NavigationMenuContent>
     </NavigationMenuItem>
     <NavigationMenuItem>
+      {/* Direct link with client-side navigation */}
       <NavigationMenuLink href="/docs">
         Documentation
       </NavigationMenuLink>
@@ -102,7 +104,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
   {
     name: 'Breadcrumb',
     category: 'navigation',
-    description: 'Navigation breadcrumbs showing current page hierarchy',
+    description: 'Navigation breadcrumbs showing current page hierarchy with Next.js router support',
     importPath: `import {
   Breadcrumb,
   BreadcrumbItem,
@@ -114,6 +116,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
     example: `<Breadcrumb>
   <BreadcrumbList>
     <BreadcrumbItem>
+      {/* BreadcrumbLink with href automatically uses Next.js Link */}
       <BreadcrumbLink href="/">Home</BreadcrumbLink>
     </BreadcrumbItem>
     <BreadcrumbSeparator />
@@ -122,6 +125,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
     </BreadcrumbItem>
     <BreadcrumbSeparator />
     <BreadcrumbItem>
+      {/* Current page - not a link */}
       <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
     </BreadcrumbItem>
   </BreadcrumbList>
@@ -208,7 +212,7 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
   {
     name: 'Pagination',
     category: 'navigation',
-    description: 'Page navigation with previous/next controls',
+    description: 'Page navigation with previous/next controls and Next.js router support',
     importPath: `import {
   Pagination,
   PaginationContent,
@@ -221,22 +225,23 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
     example: `<Pagination>
   <PaginationContent>
     <PaginationItem>
-      <PaginationPrevious href="#" />
+      {/* Previous/Next with href automatically use Next.js Link */}
+      <PaginationPrevious href="/page/1" />
     </PaginationItem>
     <PaginationItem>
-      <PaginationLink href="#" isActive>1</PaginationLink>
+      <PaginationLink href="/page/1" isActive>1</PaginationLink>
     </PaginationItem>
     <PaginationItem>
-      <PaginationLink href="#">2</PaginationLink>
+      <PaginationLink href="/page/2">2</PaginationLink>
     </PaginationItem>
     <PaginationItem>
-      <PaginationLink href="#">3</PaginationLink>
+      <PaginationLink href="/page/3">3</PaginationLink>
     </PaginationItem>
     <PaginationItem>
       <PaginationEllipsis />
     </PaginationItem>
     <PaginationItem>
-      <PaginationNext href="#" />
+      <PaginationNext href="/page/2" />
     </PaginationItem>
   </PaginationContent>
 </Pagination>`,

package/src/layouts/UILayout/config/components/overlay.config.tsx

@@ -466,7 +466,7 @@ export const OVERLAY_COMPONENTS: ComponentConfig[] = [
   {
     name: 'DropdownMenu',
     category: 'overlay',
-    description: 'Dropdown menu for actions and options',
+    description: 'Dropdown menu for actions and options with Next.js router support',
     importPath: `import {
   DropdownMenu,
   DropdownMenuContent,
@@ -483,9 +483,15 @@ export const OVERLAY_COMPONENTS: ComponentConfig[] = [
   <DropdownMenuContent className="w-56">
     <DropdownMenuLabel>My Account</DropdownMenuLabel>
     <DropdownMenuSeparator />
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Billing</DropdownMenuItem>
-    <DropdownMenuItem>Settings</DropdownMenuItem>
+    {/* DropdownMenuItem with href automatically uses Next.js Link */}
+    <DropdownMenuItem href="/profile">Profile</DropdownMenuItem>
+    <DropdownMenuItem href="/billing">Billing</DropdownMenuItem>
+    <DropdownMenuItem href="/settings">Settings</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    {/* Without href - for actions */}
+    <DropdownMenuItem onClick={() => console.log('Logout')}>
+      Logout
+    </DropdownMenuItem>
   </DropdownMenuContent>
 </DropdownMenu>`,
     preview: (
@@ -506,7 +512,7 @@ export const OVERLAY_COMPONENTS: ComponentConfig[] = [
   {
     name: 'Menubar',
     category: 'overlay',
-    description: 'Application menubar with multiple menu groups',
+    description: 'Application menubar with multiple menu groups and Next.js router support',
     importPath: `import {
   Menubar,
   MenubarContent,
@@ -519,19 +525,21 @@ export const OVERLAY_COMPONENTS: ComponentConfig[] = [
   <MenubarMenu>
     <MenubarTrigger>File</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>New Tab</MenubarItem>
-      <MenubarItem>New Window</MenubarItem>
+      {/* MenubarItem with href automatically uses Next.js Link */}
+      <MenubarItem href="/new">New Tab</MenubarItem>
+      <MenubarItem href="/window">New Window</MenubarItem>
       <MenubarSeparator />
-      <MenubarItem>Share</MenubarItem>
+      <MenubarItem href="/share">Share</MenubarItem>
       <MenubarSeparator />
-      <MenubarItem>Print</MenubarItem>
+      {/* Without href - for actions */}
+      <MenubarItem onClick={() => window.print()}>Print</MenubarItem>
     </MenubarContent>
   </MenubarMenu>
   <MenubarMenu>
     <MenubarTrigger>Edit</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>Undo</MenubarItem>
-      <MenubarItem>Redo</MenubarItem>
+      <MenubarItem onClick={() => document.execCommand('undo')}>Undo</MenubarItem>
+      <MenubarItem onClick={() => document.execCommand('redo')}>Redo</MenubarItem>
     </MenubarContent>
   </MenubarMenu>
 </Menubar>`,

package/src/layouts/UILayout/config/components/specialized.config.tsx

@@ -25,41 +25,66 @@ export const SPECIALIZED_COMPONENTS: ComponentConfig[] = [
   {
     name: 'Sidebar',
     category: 'specialized',
-    description: 'Full-featured sidebar navigation component (23KB) with collapsible groups and icons',
-    importPath: `import { Sidebar } from '@djangocfg/ui';`,
-    example: `// Note: Sidebar is a complex component used in layouts
-// See DashboardLayout in the Layouts section for full implementation
+    description: 'Full-featured sidebar navigation component (23KB) with collapsible groups, icons, and Next.js router support',
+    importPath: `import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@djangocfg/ui';`,
+    example: `// SidebarMenuButton with href automatically uses Next.js Link
+<Sidebar>
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupLabel>Main</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton href="/" isActive tooltip="Dashboard">
+              <HomeIcon />
+              <span>Dashboard</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton href="/users" tooltip="Users">
+              <UsersIcon />
+              <span>Users</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
 
-<Sidebar
-  menuGroups={[
-    {
-      label: "Main",
-      items: [
-        {
-          icon: <HomeIcon />,
-          label: "Dashboard",
-          href: "/",
-          isActive: true
-        },
-        {
-          icon: <UsersIcon />,
-          label: "Users",
-          href: "/users"
-        },
-      ]
-    },
-    {
-      label: "Settings",
-      items: [
-        {
-          icon: <SettingsIcon />,
-          label: "Preferences",
-          href: "/settings"
-        },
-      ]
-    }
-  ]}
-/>`,
+    <SidebarGroup>
+      <SidebarGroupLabel>Settings</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton href="/settings">
+              <SettingsIcon />
+              <span>Preferences</span>
+            </SidebarMenuButton>
+            {/* Submenu items also support href */}
+            <SidebarMenuSub>
+              <SidebarMenuSubItem>
+                <SidebarMenuSubButton href="/settings/profile">
+                  Profile
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>`,
     preview: (
       <div className="p-6 border rounded-md bg-muted/50">
         <p className="text-sm text-muted-foreground mb-4">