@djangocfg/ui-nextjs 2.1.89 → 2.1.91

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/ui-nextjs
 
-Next.js UI library extending `@djangocfg/ui-core` with 70+ components built on Radix UI + Tailwind CSS v4.
+Next.js UI library extending `@djangocfg/ui-core` with 69+ components built on Radix UI + Tailwind CSS v4.
 
 **Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
 
@@ -16,10 +16,10 @@ pnpm add @djangocfg/ui-nextjs
 
 ```
 @djangocfg/ui-nextjs
-├── Re-exports everything from @djangocfg/ui-core (61 components, 10 hooks)
-├── + Next.js specific components (10)
+├── Re-exports everything from @djangocfg/ui-core (60 components, 10 hooks)
+├── + Next.js specific components (9)
 ├── + Browser storage hooks (5)
-├── + Blocks, Tools, Theme, Animations
+├── + Blocks, Theme, Animations
 ```
 
 | Package | Use Case |
@@ -29,10 +29,10 @@ pnpm add @djangocfg/ui-nextjs
 
 ## Components
 
-### From ui-core (61)
+### From ui-core (60)
 All components from `@djangocfg/ui-core` are re-exported.
 
-### Next.js Specific (10)
+### Next.js Specific (9)
 
 | Component | Why Next.js |
 |-----------|-------------|
@@ -45,7 +45,6 @@ All components from `@djangocfg/ui-core` are re-exported.
 | `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
@@ -57,13 +56,6 @@ All components from `@djangocfg/ui-core` are re-exported.
 import { Hero } from '@djangocfg/ui-nextjs/blocks';
 ```
 
-### Tools (7)
-`JsonTree` `PrettyCode` `Mermaid` `LottiePlayer` `AudioPlayer` `VideoPlayer` `ImageViewer`
-
-```tsx
-import { PrettyCode, AudioPlayer, VideoPlayer } from '@djangocfg/ui-nextjs/tools';
-```
-
 ## Hooks
 
 ### From ui-core (10)
@@ -135,7 +127,6 @@ mediaLog.buffer(buffered, duration);
 | `@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, Media players |
 | `@djangocfg/ui-nextjs/lib` | Logger, utilities |
 | `@djangocfg/ui-nextjs/theme` | ThemeProvider, ThemeToggle |
 | `@djangocfg/ui-nextjs/styles` | CSS |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.89",
+  "version": "2.1.91",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -36,10 +36,7 @@
     ".": "./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",
@@ -58,8 +55,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.89",
-    "@djangocfg/ui-core": "^2.1.89",
+    "@djangocfg/api": "^2.1.91",
+    "@djangocfg/ui-core": "^2.1.91",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -74,16 +71,10 @@
     "zustand": "^5.0.9"
   },
   "dependencies": {
+    "@djangocfg/ui-tools": "^2.1.91",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.4",
-    "@rjsf/core": "^6.1.2",
-    "@rjsf/utils": "^6.1.2",
-    "@rjsf/validator-ajv8": "^6.1.2",
-    "@vidstack/react": "next",
-    "@wavesurfer/react": "^1.0.12",
     "@web3icons/react": "^4.0.26",
     "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
@@ -91,26 +82,16 @@
     "cytoscape-cose-bilkent": "^4.1.0",
     "input-otp": "1.4.2",
     "libphonenumber-js": "^1.12.24",
-    "media-icons": "next",
-    "mermaid": "^11.12.0",
     "next-themes": "^0.4.6",
-    "prism-react-renderer": "^2.4.1",
     "react-chartjs-2": "^5.3.0",
     "react-device-detect": "^2.2.3",
     "react-hotkeys-hook": "^5.2.1",
-    "react-json-tree": "^0.20.0",
-    "react-lottie-player": "^2.1.0",
-    "react-markdown": "10.1.0",
     "react-sticky-box": "^2.0.5",
-    "react-zoom-pan-pinch": "^3.7.0",
     "recharts": "2.15.4",
-    "remark-gfm": "4.0.1",
-    "sonner": "2.0.7",
-    "vidstack": "next",
-    "wavesurfer.js": "^7.12.1"
+    "sonner": "2.0.7"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.89",
+    "@djangocfg/typescript-config": "^2.1.91",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/blocks/SplitHero/SplitHeroMedia.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { cn } from '@djangocfg/ui-core/lib';
-import { VideoPlayer } from '../../tools/VideoPlayer';
+import { VideoPlayer } from '@djangocfg/ui-tools';
 import type { SplitHeroMedia as SplitHeroMediaType } from './types';
 
 interface SplitHeroMediaProps {

package/src/components/index.ts

@@ -8,11 +8,9 @@ export * from '@djangocfg/ui-core/components';
 // ============================================================================
 
 // Navigation Components (Next.js)
-export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from './navigation-menu';
 export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb';
 export { BreadcrumbNavigation } from './breadcrumb-navigation';
 export type { BreadcrumbItem as BreadcrumbNavigationItem, BreadcrumbNavigationProps } from './breadcrumb-navigation';
-export { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from './menubar';
 
 // Interactive Components (Next.js)
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu';
@@ -23,9 +21,6 @@ export { SSRPagination } from './ssr-pagination';
 export { StaticPagination, useDRFPaginationInfo, useDRFPagination } from './pagination-static';
 export type { DRFPaginatedResponse } from './pagination-static';
 
-// Phone Input (uses DropdownMenu)
-export { PhoneInput } from './phone-input';
-
 // Sidebar (Next.js)
 export {
   Sidebar,
@@ -53,38 +48,3 @@ export {
   SidebarTrigger,
   useSidebar,
 } from './sidebar';
-
-// Download Button (uses localStorage for auth token)
-export { DownloadButton } from './button-download';
-export type { DownloadButtonProps } from './button-download';
-
-// Sonner Toast (Next.js specific)
-export { Toaster as SonnerToaster } from './sonner';
-
-// MultiSelect Pro (advanced component)
-export { MultiSelectPro } from './multi-select-pro';
-export type {
-  MultiSelectProOption,
-  MultiSelectProProps,
-  MultiSelectProGroup,
-  MultiSelectProRef,
-  AnimationConfig,
-  ResponsiveConfig
-} from './multi-select-pro';
-export { MultiSelectProAsync } from './multi-select-pro/async';
-export type {
-  MultiSelectProAsyncOption,
-  MultiSelectProAsyncProps,
-  MultiSelectProAsyncGroup,
-  MultiSelectProAsyncRef,
-} from './multi-select-pro/async';
-export { createOption, createOptions } from './multi-select-pro/helpers';
-export type { OptionBuilderConfig } from './multi-select-pro/helpers';
-
-// Markdown Components
-export { MarkdownMessage } from './markdown';
-export type { MarkdownMessageProps } from './markdown';
-
-// OTP Components (Smart OTP input with validation)
-export { OTPInput, InputOTPGroup, InputOTPSlot, InputOTPSeparator, useSmartOTP } from './otp';
-export type { OTPInputProps, OTPValidationMode, OTPPasteBehavior, OTPValidator } from './otp';

package/src/hooks/index.ts

@@ -7,12 +7,6 @@ export * from '@djangocfg/ui-core/hooks';
 // Next.js/Browser specific hooks
 // ============================================================================
 
-// Storage hooks (browser localStorage/sessionStorage)
-export { useLocalStorage } from './useLocalStorage';
-export type { UseLocalStorageOptions } from './useLocalStorage';
-export { useSessionStorage } from './useSessionStorage';
-export type { UseSessionStorageOptions } from './useSessionStorage';
-
 // Theme hook (standalone, no provider required)
 export { useResolvedTheme } from './useResolvedTheme';
 export type { ResolvedTheme } from './useResolvedTheme';

package/src/index.ts

@@ -1,5 +1,5 @@
 // ============================================================================
-// @djangocfg/ui - Main Export File
+// @djangocfg/ui-nextjs - Main Export File
 // ============================================================================
 
 // Re-export everything from components
@@ -14,14 +14,5 @@ export * from './blocks';
 // Re-export animations
 export * from './animations';
 
-// Re-export lib utilities
-export * from './lib';
-
-// Re-export tools
-export * from './tools';
-
 // Re-export theme
-export * from './theme';
-
-// Re-export stores
-export * from './stores';
+export * from './theme';

package/src/components/button-download.tsx

@@ -1,277 +0,0 @@
-"use client"
-
-import { AlertCircle, CheckCircle2, Download, Loader2 } from 'lucide-react';
-import * as React from 'react';
-
-import { Button, ButtonProps} from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useLocalStorage } from '../hooks/useLocalStorage';
-
-// Token key used by the API client
-const TOKEN_KEY = "auth_token"
-
-export interface DownloadButtonProps extends Omit<ButtonProps, 'onClick'> {
-  /**
-   * URL to download from
-   */
-  url: string
-
-  /**
-   * Optional filename override. If not provided, will try to extract from Content-Disposition header
-   */
-  filename?: string
-
-  /**
-   * Optional callback when download starts
-   */
-  onDownloadStart?: () => void
-
-  /**
-   * Optional callback when download completes
-   */
-  onDownloadComplete?: (filename: string) => void
-
-  /**
-   * Optional callback when download fails
-   */
-  onDownloadError?: (error: Error) => void
-
-  /**
-   * Use fetch API for download (allows progress tracking and auth headers)
-   * Default: true
-   */
-  useFetch?: boolean
-
-  /**
-   * Show download status icons (loading, success, error)
-   * Default: true
-   */
-  showStatus?: boolean
-
-  /**
-   * Auto-reset status after success/error (in ms)
-   * Default: 2000
-   */
-  statusResetDelay?: number
-
-  /**
-   * Method for download (GET or POST)
-   * Default: GET
-   */
-  method?: 'GET' | 'POST'
-
-  /**
-   * Optional request body for POST requests
-   */
-  body?: any
-}
-
-type DownloadStatus = 'idle' | 'downloading' | 'success' | 'error'
-
-const DownloadButton = React.forwardRef<HTMLButtonElement, DownloadButtonProps>(
-  (
-    {
-      url,
-      filename,
-      onDownloadStart,
-      onDownloadComplete,
-      onDownloadError,
-      useFetch = true,
-      showStatus = true,
-      statusResetDelay = 2000,
-      method = 'GET',
-      body,
-      children,
-      disabled,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const [status, setStatus] = React.useState<DownloadStatus>('idle')
-    const resetTimeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
-
-    // Get auth token from localStorage
-    const [token] = useLocalStorage<string>(TOKEN_KEY, '')
-
-    // Clean up timeout on unmount
-    React.useEffect(() => {
-      return () => {
-        if (resetTimeoutRef.current) {
-          clearTimeout(resetTimeoutRef.current)
-        }
-      }
-    }, [])
-
-    /**
-     * Extract filename from Content-Disposition header
-     */
-    const extractFilename = (headers: Headers): string | null => {
-      const disposition = headers.get('Content-Disposition')
-      if (!disposition) return null
-
-      // Try to match: filename*=UTF-8''example.txt or filename="example.txt"
-      const filenameMatch = disposition.match(/filename\*?=(?:UTF-8'')?["']?([^"';]+)["']?/i)
-      if (filenameMatch && filenameMatch[1]) {
-        return decodeURIComponent(filenameMatch[1])
-      }
-
-      return null
-    }
-
-    /**
-     * Trigger browser download for blob
-     */
-    const triggerDownload = (blob: Blob, downloadFilename: string) => {
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = downloadFilename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      window.URL.revokeObjectURL(url)
-    }
-
-    /**
-     * Reset status after delay
-     */
-    const scheduleStatusReset = () => {
-      if (resetTimeoutRef.current) {
-        clearTimeout(resetTimeoutRef.current)
-      }
-      resetTimeoutRef.current = setTimeout(() => {
-        setStatus('idle')
-      }, statusResetDelay)
-    }
-
-    /**
-     * Download using fetch API (supports auth, progress, error handling)
-     */
-    const downloadWithFetch = async () => {
-      try {
-        setStatus('downloading')
-        onDownloadStart?.()
-
-        const headers: HeadersInit = {}
-
-        // Add authorization header if token is available
-        if (token) {
-          headers['Authorization'] = `Bearer ${token}`
-        }
-
-        const options: RequestInit = {
-          method,
-          headers,
-        }
-
-        if (method === 'POST' && body) {
-          options.body = JSON.stringify(body)
-          options.headers = {
-            ...options.headers,
-            'Content-Type': 'application/json',
-          }
-        }
-
-        const response = await fetch(url, options)
-
-        if (!response.ok) {
-          throw new Error(`Download failed: ${response.status} ${response.statusText}`)
-        }
-
-        const blob = await response.blob()
-
-        // Determine filename
-        const downloadFilename =
-          filename ||
-          extractFilename(response.headers) ||
-          `download-${Date.now()}.bin`
-
-        // Trigger download
-        triggerDownload(blob, downloadFilename)
-
-        setStatus('success')
-        onDownloadComplete?.(downloadFilename)
-        scheduleStatusReset()
-      } catch (error) {
-        console.error('Download error:', error)
-        setStatus('error')
-        onDownloadError?.(error as Error)
-        scheduleStatusReset()
-      }
-    }
-
-    /**
-     * Simple download using window.open (fallback)
-     */
-    const downloadWithWindowOpen = () => {
-      try {
-        setStatus('downloading')
-        onDownloadStart?.()
-        window.open(url, '_blank')
-
-        // We can't really track success/failure with window.open
-        // So just assume success after a short delay
-        setTimeout(() => {
-          setStatus('success')
-          onDownloadComplete?.(filename || 'file')
-          scheduleStatusReset()
-        }, 500)
-      } catch (error) {
-        console.error('Download error:', error)
-        setStatus('error')
-        onDownloadError?.(error as Error)
-        scheduleStatusReset()
-      }
-    }
-
-    /**
-     * Handle download click
-     */
-    const handleDownload = () => {
-      if (status === 'downloading') return
-
-      if (useFetch) {
-        downloadWithFetch()
-      } else {
-        downloadWithWindowOpen()
-      }
-    }
-
-    /**
-     * Render status icon
-     */
-    const renderStatusIcon = () => {
-      if (!showStatus) return null
-
-      switch (status) {
-        case 'downloading':
-          return <Loader2 className="animate-spin" />
-        case 'success':
-          return <CheckCircle2 className="text-green-600" />
-        case 'error':
-          return <AlertCircle className="text-red-600" />
-        default:
-          return <Download />
-      }
-    }
-
-    return (
-      <Button
-        ref={ref}
-        onClick={handleDownload}
-        disabled={disabled || status === 'downloading'}
-        className={cn(className)}
-        {...props}
-      >
-        {renderStatusIcon()}
-        {children}
-      </Button>
-    )
-  }
-)
-
-DownloadButton.displayName = "DownloadButton"
-
-export { DownloadButton }