@djangocfg/ui-nextjs 2.1.178 → 2.1.180

package/README.md

@@ -2,6 +2,8 @@
 
 Next.js UI library extending `@djangocfg/ui-core` with 69+ components built on Radix UI + Tailwind CSS v4.
 
+All navigation components are **locale-aware** via `next-intl` — links automatically include the locale prefix (e.g. `/ru/dashboard`).
+
 **Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
 
 **[Live Demo & Props](https://djangocfg.com/demo/)**
@@ -12,12 +14,15 @@ Next.js UI library extending `@djangocfg/ui-core` with 69+ components built on R
 pnpm add @djangocfg/ui-nextjs
 ```
 
+Peer dependencies: `next`, `next-intl`, `react`, `tailwindcss`.
+
 ## Architecture
 
 ```
 @djangocfg/ui-nextjs
 ├── Re-exports everything from @djangocfg/ui-core (60 components, 13 hooks)
-├── + Next.js specific components (11)
+├── + Next.js locale-aware components (11)
+├── + Navigation hooks (useNavigation, useRouter, usePathname)
 ├── + Browser storage hooks (2)
 ├── + Blocks, Theme, Animations
 ```
@@ -25,7 +30,7 @@ pnpm add @djangocfg/ui-nextjs
 | Package | Use Case |
 |---------|----------|
 | `@djangocfg/ui-core` | Electron, Vite, CRA, any React app |
-| `@djangocfg/ui-nextjs` | Next.js apps (includes ui-core + extras) |
+| `@djangocfg/ui-nextjs` | Next.js apps (includes ui-core + locale-aware navigation) |
 
 ## Components
 
@@ -34,25 +39,27 @@ All components from `@djangocfg/ui-core` are re-exported.
 
 ### Next.js Specific (11)
 
-| Component | Why Next.js |
+| Component | Description |
 |-----------|-------------|
-| `NextLink` | Styled `next/link` wrapper |
-| `NextButtonLink` | Button-styled `next/link` with variants |
-| `Sidebar` | Uses `next/link` for navigation |
-| `Breadcrumb` | Uses `next/link` |
-| `BreadcrumbNavigation` | Uses `next/link` |
-| `NavigationMenu` | Uses `next/link` |
-| `Menubar` | Uses `next/link` |
-| `DropdownMenu` | Uses `next/link` |
-| `Pagination` | Uses `next/link` |
-| `SSRPagination` | Uses `next/link` + server components |
+| `NextLink` | Locale-aware link wrapper |
+| `NextButtonLink` | Button-styled locale-aware link with variants |
+| `Sidebar` | Locale-aware navigation sidebar |
+| `Breadcrumb` | Locale-aware breadcrumbs |
+| `BreadcrumbNavigation` | High-level breadcrumb component |
+| `NavigationMenu` | Locale-aware navigation menu |
+| `Menubar` | Locale-aware menubar |
+| `DropdownMenu` | Menu with locale-aware link items |
+| `Pagination` | Locale-aware page links |
+| `SSRPagination` | Server-compatible pagination |
 | `DownloadButton` | Uses `localStorage` for auth |
 
+All link-based components use `next-intl` internally — no configuration needed.
+
 ### MultiSelect Pro
 `MultiSelectPro` `MultiSelectProAsync` — Advanced multi-select with async loading
 
 ### Blocks (7)
-`Hero` `SuperHero` `FeatureSection` `CTASection` `NewsletterSection` `StatsSection` `TestimonialSection`
+`Hero` `SuperHero` `SplitHero` `ArticleCard` `FeatureSection` `CTASection` `StatsSection`
 
 ```tsx
 import { Hero } from '@djangocfg/ui-nextjs/blocks';
@@ -60,6 +67,24 @@ import { Hero } from '@djangocfg/ui-nextjs/blocks';
 
 ## Hooks
 
+### Navigation (locale-aware)
+
+| Hook | Description |
+|------|-------------|
+| `useNavigation` | Returns `{ router, pathname, redirect }` — all locale-aware |
+| `useRouter` | Locale-aware router (`router.push('/page')` → `/ru/page`) |
+| `usePathname` | Current pathname without locale prefix |
+
+```tsx
+import { useNavigation } from '@djangocfg/ui-nextjs/hooks';
+
+function MyComponent() {
+  const { router, pathname } = useNavigation();
+  // pathname: "/dashboard" (not "/ru/dashboard")
+  // router.push('/settings') → navigates to /ru/settings
+}
+```
+
 ### From ui-core (13)
 
 | Hook | Description |
@@ -78,14 +103,13 @@ import { Hero } from '@djangocfg/ui-nextjs/blocks';
 | `useBrowserDetect` | Browser detection |
 | `useDeviceDetect` | Device detection |
 
-### Next.js Specific (2)
+### Next.js Specific (3)
 
 | Hook | Description |
 |------|-------------|
 | `useResolvedTheme` | Light/dark theme resolution (next-themes) |
 | `useLocalStorage` | Persistent state in localStorage |
-
-Note: `useSessionStorage` is also available in ui-core.
+| `useSessionStorage` | Persistent state in sessionStorage |
 
 ## Dialog Service
 
@@ -102,20 +126,23 @@ See ui-core README for full documentation.
 ```tsx
 import {
   Button, Card, Input,  // from ui-core
-  NextButtonLink, Sidebar  // Next.js specific
+  NextButtonLink, Sidebar  // Next.js locale-aware
 } from '@djangocfg/ui-nextjs';
-import { useLocalStorage } from '@djangocfg/ui-nextjs/hooks';
+import { useNavigation, useLocalStorage } from '@djangocfg/ui-nextjs/hooks';
 
 function Example() {
+  const { router, pathname } = useNavigation();
   const [saved, setSaved] = useLocalStorage('form', null);
 
   return (
     <Sidebar>
       <Card>
         <Input placeholder="Email" />
-        <Button>Submit</Button>
-        <NextButtonLink href="/dashboard" variant="outline">
-          Go to Dashboard
+        <Button onClick={() => router.push('/dashboard')}>
+          Submit
+        </Button>
+        <NextButtonLink href="/docs" variant="outline">
+          Documentation
         </NextButtonLink>
       </Card>
     </Sidebar>
@@ -129,7 +156,7 @@ function Example() {
 import { NextButtonLink } from '@djangocfg/ui-nextjs';
 import { ArrowLeft, Settings } from 'lucide-react';
 
-// Basic
+// Basic — automatically gets locale prefix
 <NextButtonLink href="/dashboard">Dashboard</NextButtonLink>
 
 // With variants
@@ -147,6 +174,11 @@ import { ArrowLeft, Settings } from 'lucide-react';
 <NextButtonLink href="/page" prefetch={false} replace scroll={false}>
   Navigate
 </NextButtonLink>
+
+// With locale override
+<NextButtonLink href="/docs" locale="en">
+  English Docs
+</NextButtonLink>
 ```
 
 ## Styling
@@ -185,6 +217,7 @@ mediaLog.buffer(buffered, duration);
 | `@djangocfg/ui-nextjs/blocks` | Landing page blocks |
 | `@djangocfg/ui-nextjs/lib` | Logger, utilities |
 | `@djangocfg/ui-nextjs/theme` | ThemeProvider, ThemeToggle |
+| `@djangocfg/ui-nextjs/animations` | Background animations |
 | `@djangocfg/ui-nextjs/styles` | CSS |
 
 ## Theme
@@ -210,9 +243,10 @@ function App({ children }) {
 
 ## Requirements
 
-- Next.js >= 15
+- Next.js >= 16
 - React >= 19
 - Tailwind CSS >= 4
+- next-intl >= 4
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.178",
+  "version": "2.1.180",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -80,15 +80,16 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.178",
-    "@djangocfg/ui-core": "^2.1.178",
-    "@djangocfg/ui-tools": "^2.1.178",
+    "@djangocfg/api": "^2.1.180",
+    "@djangocfg/ui-core": "^2.1.180",
+    "@djangocfg/ui-tools": "^2.1.180",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "next": "^16.0.10",
+    "next-intl": "^4.8.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.69.0",
@@ -104,13 +105,14 @@
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.178",
+    "@djangocfg/typescript-config": "^2.1.180",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",
     "class-variance-authority": "^0.7.1",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",
+    "next-intl": "^4.8.3",
     "typescript": "^5.9.3",
     "zustand": "^5.0.9"
   },

package/src/blocks/ArticleCard.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import moment from 'moment';
 
 import {
-    Badge, ButtonLink, Card, CardContent, CardDescription, CardHeader, CardTitle
+    Badge, Card, CardContent, CardDescription, CardHeader, CardTitle
 } from '@djangocfg/ui-core/components';
+
+import { NextButtonLink as ButtonLink } from '../components/next-link';
 import { cn } from '@djangocfg/ui-core/lib';
 
 export type ArticleType = 'security' | 'release' | 'announcement' | 'feature';

package/src/blocks/Hero.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { ButtonLink } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { NextButtonLink as ButtonLink } from '../components/next-link';
+
 interface HeroProps {
   title: string;
   subtitle?: string;

package/src/blocks/SplitHero/SplitHeroContent.tsx

@@ -2,8 +2,9 @@
 
 import React from 'react';
 import { ArrowRight, Sparkles } from 'lucide-react';
-import { ButtonLink } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
+
+import { NextButtonLink as ButtonLink } from '../../components/next-link';
 import type { SplitHeroBadge, SplitHeroAction, SplitHeroFeature } from './types';
 
 interface SplitHeroContentProps {

package/src/blocks/SuperHero.tsx

@@ -4,8 +4,10 @@ import { ArrowRight, Sparkles, Wand2 } from 'lucide-react';
 import React from 'react';
 
 import {
-    Button, ButtonLink, CopyButton, Sticky, Tooltip, TooltipContent, TooltipTrigger
+    Button, CopyButton, Sticky, Tooltip, TooltipContent, TooltipTrigger
 } from '@djangocfg/ui-core/components';
+
+import { NextButtonLink as ButtonLink } from '../components/next-link';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { AnimatedBackground, BackgroundVariant} from '../animations';

package/src/components/breadcrumb-navigation.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from '../lib/navigation';
 import React from 'react';
 
 // cn is available for future use

package/src/components/breadcrumb.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from '../lib/navigation';
 import * as React from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';

package/src/components/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Check, ChevronRight, Circle } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from '../lib/navigation';
 import * as React from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';

package/src/components/next-link.tsx

@@ -1,19 +1,22 @@
 'use client';
 
 import * as React from 'react';
-import Link from 'next/link';
-import type { LinkProps } from 'next/link';
+import type { LinkProps as NextLinkBaseProps } from 'next/link';
+import { Link } from '../lib/navigation';
 import { buttonVariants } from '@djangocfg/ui-core/components';
 import type { VariantProps } from 'class-variance-authority';
 import { cn } from '@djangocfg/ui-core/lib';
 
+type IntlLinkProps = React.ComponentProps<typeof Link>;
+
 // ============================================================================
 // NextLink - Styled Next.js Link (text link style)
 // ============================================================================
 
 export interface NextLinkProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>,
-    LinkProps {
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NextLinkBaseProps>,
+    NextLinkBaseProps {
+  locale?: string;
   children?: React.ReactNode;
 }
 
@@ -29,7 +32,7 @@ export interface NextLinkProps
 const NextLink = React.forwardRef<HTMLAnchorElement, NextLinkProps>(
   ({ children, ...props }, ref) => {
     return (
-      <Link ref={ref} {...props}>
+      <Link ref={ref} {...props as IntlLinkProps}>
         {children}
       </Link>
     );
@@ -42,9 +45,10 @@ NextLink.displayName = 'NextLink';
 // ============================================================================
 
 export interface NextButtonLinkProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>,
-    LinkProps,
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NextLinkBaseProps>,
+    NextLinkBaseProps,
     VariantProps<typeof buttonVariants> {
+  locale?: string;
   children?: React.ReactNode;
 }
 
@@ -75,7 +79,7 @@ const NextButtonLink = React.forwardRef<HTMLAnchorElement, NextButtonLinkProps>(
       <Link
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
-        {...props}
+        {...props as IntlLinkProps}
       >
         {children}
       </Link>

package/src/components/pagination.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from '../lib/navigation';
 import * as React from 'react';
 
 import { ButtonProps, buttonVariants} from '@djangocfg/ui-core/components';

package/src/components/sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { cva, VariantProps } from 'class-variance-authority';
 import { PanelLeft } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from '../lib/navigation';
 import * as React from 'react';
 
 import {

package/src/components/ssr-pagination.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
+import { usePathname } from '../lib/navigation';
 import React from 'react';
 
 import { useIsMobile } from '@djangocfg/ui-core/hooks';

package/src/hooks/index.ts

@@ -5,6 +5,10 @@
 
 'use client';
 
+// Locale-aware navigation hooks (next-intl)
+export { useRouter, usePathname } from '../lib/navigation';
+export { useNavigation } from './useNavigation';
+
 // Theme hook (standalone, no provider required)
 export { useResolvedTheme } from './useResolvedTheme';
 export type { ResolvedTheme } from './useResolvedTheme';

package/src/hooks/useNavigation.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useRouter, usePathname, redirect } from '../lib/navigation';
+
+/**
+ * Locale-aware navigation hook.
+ *
+ * Returns router, pathname (without locale prefix), and redirect —
+ * all automatically scoped to the current locale.
+ *
+ * @example
+ * const { router, pathname } = useNavigation();
+ * router.push('/dashboard'); // → /ru/dashboard when locale is "ru"
+ */
+export function useNavigation() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return { router, pathname, redirect };
+}

package/src/lib/navigation.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal navigation utilities for ui-nextjs
+ *
+ * Uses next-intl's createNavigation() to produce locale-aware
+ * Link, usePathname, useRouter, etc.
+ *
+ * These are used internally by ui-nextjs components (breadcrumb, pagination, sidebar, etc.)
+ * so that all links automatically include the locale prefix.
+ */
+import { createNavigation } from 'next-intl/navigation';
+
+export const {
+  Link,
+  usePathname,
+  useRouter,
+  redirect,
+} = createNavigation();