@djangocfg/ui-nextjs 2.1.144 → 2.1.145

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +34 -3
  2. package/package.json +5 -5
  3. package/src/components/index.ts +4 -0
  4. package/src/components/next-link.tsx +87 -0
package/README.md CHANGED
@@ -17,7 +17,7 @@ pnpm add @djangocfg/ui-nextjs
17
17
  ```
18
18
  @djangocfg/ui-nextjs
19
19
  ├── Re-exports everything from @djangocfg/ui-core (60 components, 10 hooks)
20
- ├── + Next.js specific components (9)
20
+ ├── + Next.js specific components (11)
21
21
  ├── + Browser storage hooks (5)
22
22
  ├── + Blocks, Theme, Animations
23
23
  ```
@@ -32,10 +32,12 @@ pnpm add @djangocfg/ui-nextjs
32
32
  ### From ui-core (60)
33
33
  All components from `@djangocfg/ui-core` are re-exported.
34
34
 
35
- ### Next.js Specific (9)
35
+ ### Next.js Specific (11)
36
36
 
37
37
  | Component | Why Next.js |
38
38
  |-----------|-------------|
39
+ | `NextLink` | Styled `next/link` wrapper |
40
+ | `NextButtonLink` | Button-styled `next/link` with variants |
39
41
  | `Sidebar` | Uses `next/link` for navigation |
40
42
  | `Breadcrumb` | Uses `next/link` |
41
43
  | `BreadcrumbNavigation` | Uses `next/link` |
@@ -76,7 +78,7 @@ import { Hero } from '@djangocfg/ui-nextjs/blocks';
76
78
  ```tsx
77
79
  import {
78
80
  Button, Card, Input, // from ui-core
79
- Sidebar, useLocalStorage // Next.js specific
81
+ NextButtonLink, Sidebar, useLocalStorage // Next.js specific
80
82
  } from '@djangocfg/ui-nextjs';
81
83
 
82
84
  function Example() {
@@ -87,12 +89,41 @@ function Example() {
87
89
  <Card>
88
90
  <Input placeholder="Email" />
89
91
  <Button>Submit</Button>
92
+ <NextButtonLink href="/dashboard" variant="outline">
93
+ Go to Dashboard
94
+ </NextButtonLink>
90
95
  </Card>
91
96
  </Sidebar>
92
97
  );
93
98
  }
94
99
  ```
95
100
 
101
+ ### NextButtonLink Examples
102
+
103
+ ```tsx
104
+ import { NextButtonLink } from '@djangocfg/ui-nextjs';
105
+ import { ArrowLeft, Settings } from 'lucide-react';
106
+
107
+ // Basic
108
+ <NextButtonLink href="/dashboard">Dashboard</NextButtonLink>
109
+
110
+ // With variants
111
+ <NextButtonLink href="/settings" variant="outline" size="sm">
112
+ <Settings className="h-4 w-4 mr-2" />
113
+ Settings
114
+ </NextButtonLink>
115
+
116
+ // Icon button (back navigation)
117
+ <NextButtonLink href="/list" variant="ghost" size="icon">
118
+ <ArrowLeft className="h-4 w-4" />
119
+ </NextButtonLink>
120
+
121
+ // With Next.js Link props
122
+ <NextButtonLink href="/page" prefetch={false} replace scroll={false}>
123
+ Navigate
124
+ </NextButtonLink>
125
+ ```
126
+
96
127
  ## Styling
97
128
 
98
129
  ```tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djangocfg/ui-nextjs",
3
- "version": "2.1.144",
3
+ "version": "2.1.145",
4
4
  "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
5
5
  "keywords": [
6
6
  "ui-components",
@@ -80,9 +80,9 @@
80
80
  "check": "tsc --noEmit"
81
81
  },
82
82
  "peerDependencies": {
83
- "@djangocfg/api": "^2.1.144",
84
- "@djangocfg/ui-core": "^2.1.144",
85
- "@djangocfg/ui-tools": "^2.1.144",
83
+ "@djangocfg/api": "^2.1.145",
84
+ "@djangocfg/ui-core": "^2.1.145",
85
+ "@djangocfg/ui-tools": "^2.1.145",
86
86
  "@types/react": "^19.1.0",
87
87
  "@types/react-dom": "^19.1.0",
88
88
  "consola": "^3.4.2",
@@ -106,7 +106,7 @@
106
106
  "react-hotkeys-hook": "^5.2.1"
107
107
  },
108
108
  "devDependencies": {
109
- "@djangocfg/typescript-config": "^2.1.144",
109
+ "@djangocfg/typescript-config": "^2.1.145",
110
110
  "@radix-ui/react-dropdown-menu": "^2.1.16",
111
111
  "@radix-ui/react-slot": "^1.2.4",
112
112
  "@types/node": "^24.7.2",
package/src/components/index.ts CHANGED
@@ -8,6 +8,10 @@
8
8
  // Re-export all base components from ui-core
9
9
  export * from '@djangocfg/ui-core/components';
10
10
 
11
+ // Link Components (Next.js)
12
+ export { NextLink, NextButtonLink } from './next-link';
13
+ export type { NextLinkProps, NextButtonLinkProps } from './next-link';
14
+
11
15
  // Navigation Components (Next.js)
12
16
  export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb';
13
17
  export { BreadcrumbNavigation } from './breadcrumb-navigation';
package/src/components/next-link.tsx ADDED
@@ -0,0 +1,87 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import Link from 'next/link';
5
+ import type { LinkProps } from 'next/link';
6
+ import { buttonVariants } from '@djangocfg/ui-core/components';
7
+ import type { VariantProps } from 'class-variance-authority';
8
+ import { cn } from '@djangocfg/ui-core/lib';
9
+
10
+ // ============================================================================
11
+ // NextLink - Styled Next.js Link (text link style)
12
+ // ============================================================================
13
+
14
+ export interface NextLinkProps
15
+ extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>,
16
+ LinkProps {
17
+ children?: React.ReactNode;
18
+ }
19
+
20
+ /**
21
+ * NextLink - Next.js Link with no additional styling
22
+ *
23
+ * Use this for regular navigation links. For button-styled links, use NextButtonLink.
24
+ *
25
+ * @example
26
+ * <NextLink href="/about">About</NextLink>
27
+ * <NextLink href="/docs" className="text-primary hover:underline">Docs</NextLink>
28
+ */
29
+ const NextLink = React.forwardRef<HTMLAnchorElement, NextLinkProps>(
30
+ ({ children, ...props }, ref) => {
31
+ return (
32
+ <Link ref={ref} {...props}>
33
+ {children}
34
+ </Link>
35
+ );
36
+ }
37
+ );
38
+ NextLink.displayName = 'NextLink';
39
+
40
+ // ============================================================================
41
+ // NextButtonLink - Button styled Next.js Link
42
+ // ============================================================================
43
+
44
+ export interface NextButtonLinkProps
45
+ extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>,
46
+ LinkProps,
47
+ VariantProps<typeof buttonVariants> {
48
+ children?: React.ReactNode;
49
+ }
50
+
51
+ /**
52
+ * NextButtonLink - A button styled link using Next.js Link component
53
+ *
54
+ * Supports all Next.js Link props (prefetch, replace, scroll, etc.)
55
+ * and all Button variant props (variant, size).
56
+ *
57
+ * @example
58
+ * // Basic usage
59
+ * <NextButtonLink href="/dashboard">Dashboard</NextButtonLink>
60
+ *
61
+ * // With variants
62
+ * <NextButtonLink href="/settings" variant="outline" size="sm">Settings</NextButtonLink>
63
+ *
64
+ * // Icon button
65
+ * <NextButtonLink href="/back" variant="ghost" size="icon">
66
+ * <ArrowLeft className="h-4 w-4" />
67
+ * </NextButtonLink>
68
+ *
69
+ * // With Next.js Link props
70
+ * <NextButtonLink href="/page" prefetch={false} replace>Go</NextButtonLink>
71
+ */
72
+ const NextButtonLink = React.forwardRef<HTMLAnchorElement, NextButtonLinkProps>(
73
+ ({ className, variant, size, children, ...props }, ref) => {
74
+ return (
75
+ <Link
76
+ className={cn(buttonVariants({ variant, size, className }))}
77
+ ref={ref}
78
+ {...props}
79
+ >
80
+ {children}
81
+ </Link>
82
+ );
83
+ }
84
+ );
85
+ NextButtonLink.displayName = 'NextButtonLink';
86
+
87
+ export { NextLink, NextButtonLink };