@djangocfg/ui-nextjs 1.4.45

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Reforms.ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,152 @@
+# @djangocfg/ui-nextjs
+
+Next.js UI library extending `@djangocfg/ui-core` with 70+ components built on Radix UI + Tailwind CSS v4.
+
+**Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
+
+**[Live Demo & Props](https://djangocfg.com/demo/ui/)**
+
+## Install
+
+```bash
+pnpm add @djangocfg/ui-nextjs
+```
+
+## Architecture
+
+```
+@djangocfg/ui-nextjs
+├── Re-exports everything from @djangocfg/ui-core (61 components, 10 hooks)
+├── + Next.js specific components (10)
+├── + Browser storage hooks (5)
+├── + Blocks, Tools, Theme, Animations
+```
+
+| Package | Use Case |
+|---------|----------|
+| `@djangocfg/ui-core` | Electron, Vite, CRA, any React app |
+| `@djangocfg/ui-nextjs` | Next.js apps (includes ui-core + extras) |
+
+## Components
+
+### From ui-core (61)
+All components from `@djangocfg/ui-core` are re-exported.
+
+### Next.js Specific (10)
+
+| Component | Why Next.js |
+|-----------|-------------|
+| `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 |
+| `DownloadButton` | Uses `localStorage` for auth |
+| `SonnerToaster` | Sonner toast integration |
+
+### MultiSelect Pro
+`MultiSelectPro` `MultiSelectProAsync` — Advanced multi-select with async loading
+
+### Blocks (7)
+`Hero` `SuperHero` `FeatureSection` `CTASection` `NewsletterSection` `StatsSection` `TestimonialSection`
+
+```tsx
+import { Hero } from '@djangocfg/ui-nextjs/blocks';
+```
+
+### Tools (4)
+`JsonTree` `PrettyCode` `Mermaid` `LottiePlayer`
+
+```tsx
+import { PrettyCode } from '@djangocfg/ui-nextjs/tools';
+```
+
+## Hooks
+
+### From ui-core (10)
+`useMediaQuery` `useIsMobile` `useCopy` `useCountdown` `useDebounce` `useDebouncedCallback` `useImageLoader` `useToast` `useEventListener` `useDebugTools`
+
+### Next.js/Browser Specific (5)
+
+| Hook | Description |
+|------|-------------|
+| `useLocalStorage` | Persistent state in localStorage |
+| `useSessionStorage` | Session-scoped state |
+| `useTheme` | Light/dark theme (next-themes) |
+| `useQueryParams` | URL query params (next/router) |
+| `useCfgRouter` | Enhanced Next.js router |
+
+## Usage
+
+```tsx
+import {
+  Button, Card, Input,  // from ui-core
+  Sidebar, useLocalStorage  // Next.js specific
+} from '@djangocfg/ui-nextjs';
+
+function Example() {
+  const [saved, setSaved] = useLocalStorage('form', null);
+
+  return (
+    <Sidebar>
+      <Card>
+        <Input placeholder="Email" />
+        <Button>Submit</Button>
+      </Card>
+    </Sidebar>
+  );
+}
+```
+
+## Styling
+
+```tsx
+// Import global styles
+import '@djangocfg/ui-nextjs/styles/globals';
+```
+
+## Exports
+
+| Path | Content |
+|------|---------|
+| `@djangocfg/ui-nextjs` | All components & hooks |
+| `@djangocfg/ui-nextjs/components` | Components only |
+| `@djangocfg/ui-nextjs/hooks` | Hooks only |
+| `@djangocfg/ui-nextjs/blocks` | Landing page blocks |
+| `@djangocfg/ui-nextjs/tools` | JsonTree, Mermaid, etc. |
+| `@djangocfg/ui-nextjs/theme` | ThemeProvider, ThemeToggle |
+| `@djangocfg/ui-nextjs/styles` | CSS |
+
+## Theme
+
+```tsx
+import { ThemeProvider, ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+
+function App({ children }) {
+  return (
+    <ThemeProvider>
+      {children}
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
+```
+
+## Tailwind v4 Notes
+
+- Arbitrary values (`h-[80px]`) may not work — use inline styles
+- Opacity modifiers (`bg-background/80`) broken with HSL — use inline styles
+- Define spacing/z-index in `@theme` block
+
+## Requirements
+
+- Next.js >= 15
+- React >= 19
+- Tailwind CSS >= 4
+
+---
+
+**[Full documentation & examples](https://djangocfg.com/demo/ui/)**

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@djangocfg/ui-nextjs",
+  "version": "1.4.45",
+  "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
+  "keywords": [
+    "ui-components",
+    "react",
+    "radix-ui",
+    "tailwindcss",
+    "design-system",
+    "component-library",
+    "typescript",
+    "nextjs",
+    "django",
+    "shadcn",
+    "charts",
+    "forms"
+  ],
+  "author": {
+    "name": "DjangoCFG",
+    "url": "https://djangocfg.com"
+  },
+  "homepage": "https://djangocfg.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/markolofsen/django-cfg.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/markolofsen/django-cfg/issues"
+  },
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components": "./src/components/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./layouts": "./src/layouts/index.ts",
+    "./blocks": "./src/blocks/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./tools": "./src/tools/index.ts",
+    "./animations": "./src/animations/index.ts",
+    "./theme": "./src/theme/index.ts",
+    "./types": "./src/types/index.ts",
+    "./types/*": "./src/types/*",
+    "./global": "./src/global.d.ts",
+    "./styles": "./src/styles/index.css"
+  },
+  "files": [
+    "src",
+    "tailwind.config.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "lint": "eslint .",
+    "check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@djangocfg/api": "^1.4.45",
+    "lucide-react": "^0.545.0",
+    "moment": "^2.30.1",
+    "next": "^15.5.7",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "7.65.0",
+    "tailwindcss": "^4.1.14",
+    "zod": "^4.1.13",
+    "consola": "^3.4.2"
+  },
+  "dependencies": {
+    "@djangocfg/ui-core": "^1.0.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@rjsf/core": "^6.1.2",
+    "@rjsf/utils": "^6.1.2",
+    "@rjsf/validator-ajv8": "^6.1.2",
+    "@web3icons/react": "^4.0.26",
+    "chart.js": "^4.5.0",
+    "cytoscape": "^3.33.1",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "mermaid": "^11.12.0",
+    "next-themes": "^0.4.6",
+    "prism-react-renderer": "^2.4.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-json-tree": "^0.20.0",
+    "react-lottie-player": "^2.1.0",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1",
+    "react-sticky-box": "^2.0.5",
+    "recharts": "2.15.4",
+    "@vidstack/react": "next",
+    "media-icons": "next",
+    "vidstack": "next"
+  },
+  "devDependencies": {
+    "@djangocfg/typescript-config": "^1.4.45",
+    "@types/node": "^24.7.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
+    "eslint": "^9.37.0",
+    "tailwindcss-animate": "1.0.7",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}