@djangocfg/ui-nextjs 2.1.4 → 2.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,10 +58,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.4",
-    "@djangocfg/ui-core": "^1.0.4",
+    "@djangocfg/api": "^2.1.6",
+    "@djangocfg/ui-core": "^2.1.6",
     "@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": "^15.5.7",
@@ -69,13 +70,9 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "7.65.0",
     "tailwindcss": "^4.1.14",
-    "zod": "^4.1.13",
-    "consola": "^3.4.2"
+    "zod": "^4.1.13"
   },
   "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "libphonenumber-js": "^1.12.24",
-    "sonner": "2.0.7",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
@@ -83,26 +80,30 @@
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
+    "@vidstack/react": "next",
     "@web3icons/react": "^4.0.26",
     "chart.js": "^4.5.0",
+    "class-variance-authority": "^0.7.1",
     "cytoscape": "^3.33.1",
     "cytoscape-cose-bilkent": "^4.1.0",
+    "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-hotkeys-hook": "^5.2.1",
     "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",
+    "remark-gfm": "4.0.1",
+    "sonner": "2.0.7",
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.4",
+    "@djangocfg/typescript-config": "^2.1.6",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/components/markdown/MarkdownMessage.tsx

@@ -5,10 +5,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Mermaid from '../../tools/Mermaid';
 import PrettyCode from '../../tools/PrettyCode';
-import { Button } from '@djangocfg/ui-core/components';
-import { useCopy } from '@djangocfg/ui-core/hooks';
-import { useTheme } from '../../hooks/useTheme';
-import { Copy } from 'lucide-react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import type { Components } from 'react-markdown';
 
 // Helper function to extract text content from React children
@@ -52,32 +50,24 @@ interface CodeBlockProps {
 }
 
 const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser }) => {
-  const { copyToClipboard } = useCopy();
-  const theme = useTheme();
-
-  const handleCopy = () => {
-    copyToClipboard(code, "Code copied to clipboard!");
-  };
+  const theme = useResolvedTheme();
 
   return (
     <div className="relative group my-3">
       {/* Copy button */}
-      <Button
+      <CopyButton
+        value={code}
         variant="ghost"
-        size="sm"
-        onClick={handleCopy}
         className={`
           absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-          h-8 w-8 p-0
+          h-8 w-8
           ${isUser
             ? 'hover:bg-white/20 text-white'
             : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
           }
         `}
         title="Copy code"
-      >
-        <Copy className="h-4 w-4" />
-      </Button>
+      />
 
       {/* Code content */}
       <PrettyCode
@@ -195,24 +185,19 @@ const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean =
       console.warn('CodeBlock failed, using fallback:', error);
       return (
         <div className="relative group my-3">
-          <Button
+          <CopyButton
+            value={codeContent}
             variant="ghost"
-            size="sm"
-            onClick={() => {
-              navigator.clipboard.writeText(codeContent);
-            }}
             className={`
               absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-              h-8 w-8 p-0
+              h-8 w-8
               ${isUser
                 ? 'hover:bg-white/20 text-white'
                 : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground'
               }
             `}
             title="Copy code"
-          >
-            <Copy className="h-4 w-4" />
-          </Button>
+          />
           <pre className={`
             p-3 rounded text-xs font-mono overflow-x-auto
             ${isUser

package/src/components/sidebar.tsx

@@ -440,7 +440,9 @@ const SidebarFooter = React.forwardRef<
 })
 SidebarFooter.displayName = "SidebarFooter"
 
-const SidebarSeparator = React.forwardRef<
+const SidebarSeparator: React.ForwardRefExoticComponent<
+  React.ComponentProps<typeof Separator> & React.RefAttributes<React.ElementRef<typeof Separator>>
+> = React.forwardRef<
   React.ElementRef<typeof Separator>,
   React.ComponentProps<typeof Separator>
 >(({ className, ...props }, ref) => {

package/src/components/ssr-pagination.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { usePathname } from 'next/navigation';
-import Link from 'next/link';
 import { cn } from '@djangocfg/ui-core/lib';
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
 import { useQueryParams } from '../hooks';
@@ -29,7 +28,6 @@ interface SSRPaginationProps {
   baseUrl?: string;
   pathname?: string;
   preserveQuery?: boolean;
-  prefetch?: boolean;
 }
 
 export const SSRPagination: React.FC<SSRPaginationProps> = ({
@@ -45,7 +43,6 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
   baseUrl,
   pathname: propPathname,
   preserveQuery = true,
-  prefetch = true,
 }) => {
   const queryParams = useQueryParams();
   const pathname = usePathname();
@@ -186,17 +183,10 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
         <PaginationContent>
           {/* Previous Button */}
           <PaginationItem>
-            {actualHasPreviousPage ? (
-              <Link href={getPageUrl(actualCurrentPage - 1)} prefetch={prefetch} passHref legacyBehavior>
-                <PaginationPrevious />
-              </Link>
-            ) : (
-              <PaginationPrevious 
-                href="#" 
-                className="pointer-events-none opacity-50"
-                onClick={(e) => e.preventDefault()}
-              />
-            )}
+            <PaginationPrevious
+              href={actualHasPreviousPage ? getPageUrl(actualCurrentPage - 1) : undefined}
+              className={!actualHasPreviousPage ? "pointer-events-none opacity-50" : undefined}
+            />
           </PaginationItem>
 
           {/* Page Numbers */}
@@ -205,28 +195,22 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
               {page === 'ellipsis' ? (
                 <PaginationEllipsis />
               ) : (
-                <Link href={getPageUrl(page)} prefetch={prefetch} passHref legacyBehavior>
-                  <PaginationLink isActive={page === actualCurrentPage}>
-                    {page}
-                  </PaginationLink>
-                </Link>
+                <PaginationLink
+                  href={getPageUrl(page)}
+                  isActive={page === actualCurrentPage}
+                >
+                  {page}
+                </PaginationLink>
               )}
             </PaginationItem>
           ))}
 
           {/* Next Button */}
           <PaginationItem>
-            {hasNextPage ? (
-              <Link href={getPageUrl(actualCurrentPage + 1)} prefetch={prefetch} passHref legacyBehavior>
-                <PaginationNext />
-              </Link>
-            ) : (
-              <PaginationNext 
-                href="#" 
-                className="pointer-events-none opacity-50"
-                onClick={(e) => e.preventDefault()}
-              />
-            )}
+            <PaginationNext
+              href={hasNextPage ? getPageUrl(actualCurrentPage + 1) : undefined}
+              className={!hasNextPage ? "pointer-events-none opacity-50" : undefined}
+            />
           </PaginationItem>
         </PaginationContent>
       </Pagination>

package/src/hooks/index.ts

@@ -11,9 +11,14 @@ export * from '@djangocfg/ui-core/hooks';
 export { useLocalStorage } from './useLocalStorage';
 export { useSessionStorage } from './useSessionStorage';
 
-// Theme hook (uses next-themes)
-export { useTheme } from './useTheme';
+// Theme hook (standalone, no provider required)
+export { useResolvedTheme } from './useResolvedTheme';
+export type { ResolvedTheme } from './useResolvedTheme';
 
 // Next.js router hooks
 export { useQueryParams } from './useQueryParams';
 export { useCfgRouter } from './useCfgRouter';
+
+// Keyboard shortcuts
+export { useHotkey, useHotkeysContext, HotkeysProvider, isHotkeyPressed } from './useHotkey';
+export type { UseHotkeyOptions, HotkeyCallback, Keys } from './useHotkey';

package/src/hooks/useHotkey.ts

@@ -0,0 +1,103 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useHotkeys, Options as HotkeysOptions } from 'react-hotkeys-hook';
+import type { HotkeyCallback, Keys } from 'react-hotkeys-hook';
+
+/**
+ * Options for the useHotkey hook
+ */
+export interface UseHotkeyOptions extends Omit<HotkeysOptions, 'enabled'> {
+  /** Whether the hotkey is enabled (default: true) */
+  enabled?: boolean;
+  /** Scope for the hotkey - useful for context-specific shortcuts */
+  scope?: string;
+  /** Only trigger when focus is within a specific element */
+  scopes?: string[];
+  /** Prevent default browser behavior */
+  preventDefault?: boolean;
+  /** Enable in input fields and textareas */
+  enableOnFormTags?: boolean | readonly ('input' | 'textarea' | 'select')[];
+  /** Enable when contentEditable element is focused */
+  enableOnContentEditable?: boolean;
+  /** Split key for multiple hotkey combinations (default: ',') */
+  splitKey?: string;
+  /** Key up/down events */
+  keyup?: boolean;
+  keydown?: boolean;
+  /** Description for the hotkey (useful for help dialogs) */
+  description?: string;
+}
+
+/**
+ * Simple wrapper hook for react-hotkeys-hook
+ *
+ * @example
+ * // Single key
+ * useHotkey('escape', () => closeModal());
+ *
+ * @example
+ * // Key combination
+ * useHotkey('ctrl+s', (e) => {
+ *   e.preventDefault();
+ *   saveDocument();
+ * });
+ *
+ * @example
+ * // Multiple keys (any of them will trigger)
+ * useHotkey(['ArrowLeft', '['], () => goToPrevious());
+ * useHotkey(['ArrowRight', ']'], () => goToNext());
+ *
+ * @example
+ * // With options
+ * useHotkey('/', () => focusSearch(), {
+ *   preventDefault: true,
+ *   enableOnFormTags: false,
+ *   description: 'Focus search input'
+ * });
+ *
+ * @example
+ * // Scoped hotkeys
+ * useHotkey('delete', () => deleteItem(), { scopes: ['list-view'] });
+ *
+ * @param keys - Hotkey or array of hotkeys (e.g., 'ctrl+s', 'ArrowLeft', ['[', 'ArrowLeft'])
+ * @param callback - Function to call when hotkey is pressed
+ * @param options - Configuration options
+ * @returns Ref to attach to element for scoped hotkeys
+ */
+export function useHotkey<T extends HTMLElement = HTMLElement>(
+  keys: Keys,
+  callback: HotkeyCallback,
+  options: UseHotkeyOptions = {}
+): RefObject<T | null> {
+  const {
+    enabled = true,
+    preventDefault = false,
+    enableOnFormTags = false,
+    enableOnContentEditable = false,
+    description: _description,
+    ...restOptions
+  } = options;
+
+  return useHotkeys<T>(
+    keys,
+    (event, handler) => {
+      if (preventDefault) {
+        event.preventDefault();
+      }
+      callback(event, handler);
+    },
+    {
+      enabled,
+      enableOnFormTags,
+      enableOnContentEditable,
+      ...restOptions,
+    }
+  );
+}
+
+// Re-export useful utilities from react-hotkeys-hook
+export { useHotkeysContext, HotkeysProvider, isHotkeyPressed } from 'react-hotkeys-hook';
+
+// Re-export types
+export type { HotkeyCallback, Keys } from 'react-hotkeys-hook';

package/src/hooks/{useTheme.ts → useResolvedTheme.ts}

@@ -2,56 +2,67 @@
 
 import { useEffect, useState } from 'react';
 
-export type Theme = 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
 
 /**
- * Hook to detect and track the current theme
- * Supports both manual theme switching and system preference
+ * Hook to detect the current resolved theme (light or dark)
+ *
+ * Standalone hook - doesn't require ThemeProvider.
+ * Detects theme from:
+ * 1. 'dark' class on html element
+ * 2. System preference (prefers-color-scheme)
+ *
+ * For full theme control (setTheme, toggleTheme), use useThemeContext instead.
+ *
+ * @example
+ * ```tsx
+ * const theme = useResolvedTheme(); // 'light' | 'dark'
+ * ```
  */
-export const useTheme = (): Theme => {
-  const [theme, setTheme] = useState<Theme>('light');
-  
+export const useResolvedTheme = (): ResolvedTheme => {
+  const [theme, setTheme] = useState<ResolvedTheme>('light');
+
   useEffect(() => {
-    const checkTheme = (): Theme => {
-      // Check if dark class is applied to html element (manual theme)
+    const checkTheme = (): ResolvedTheme => {
+      // Check if dark class is applied to html element
       if (document.documentElement.classList.contains('dark')) {
         return 'dark';
       }
-      
+
       // Check system preference
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         return 'dark';
       }
-      
+
       return 'light';
     };
-    
+
     // Set initial theme
     setTheme(checkTheme());
-    
-    // Listen for manual theme changes (class changes on html element)
+
+    // Listen for class changes on html element
     const observer = new MutationObserver(() => {
       setTheme(checkTheme());
     });
-    
+
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['class']
     });
-    
+
     // Listen for system theme changes
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleMediaChange = () => {
       setTheme(checkTheme());
     };
-    
+
     mediaQuery.addEventListener('change', handleMediaChange);
-    
+
     return () => {
       observer.disconnect();
       mediaQuery.removeEventListener('change', handleMediaChange);
     };
   }, []);
-  
+
   return theme;
 };

package/src/theme/ThemeProvider.tsx

@@ -1,82 +1,76 @@
 /**
  * ThemeProvider - Universal theme management
  *
- * Provides theme context for the entire application with localStorage persistence.
+ * Re-exports next-themes ThemeProvider with sensible defaults.
+ * Supports light, dark, and system themes with localStorage persistence.
+ *
+ * @example
+ * ```tsx
+ * // In app/layout.tsx
+ * import { ThemeProvider } from '@djangocfg/ui-nextjs';
+ *
+ * <ThemeProvider
+ *   attribute="class"
+ *   defaultTheme="system"
+ *   enableSystem
+ * >
+ *   {children}
+ * </ThemeProvider>
+ * ```
  */
 
 'use client';
 
-import React, { createContext, useContext, useEffect, ReactNode } from 'react';
-import { useLocalStorage } from '../hooks/useLocalStorage';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────
-
-type Theme = 'light' | 'dark';
-
-interface ThemeContextValue {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Create Context
-// ─────────────────────────────────────────────────────────────────────────
+import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
+import type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';
 
-const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
-
-// ─────────────────────────────────────────────────────────────────────────
-// Provider Component
-// ─────────────────────────────────────────────────────────────────────────
-
-interface ThemeProviderProps {
-  children: ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-}
+// Re-export types
+export type Theme = 'light' | 'dark' | 'system';
+export type ThemeProviderProps = NextThemesProviderProps;
 
+/**
+ * ThemeProvider wraps next-themes with sensible defaults
+ */
 export function ThemeProvider({
   children,
-  defaultTheme = 'light',
-  storageKey = 'theme'
+  attribute = 'class',
+  defaultTheme = 'system',
+  enableSystem = true,
+  disableTransitionOnChange = true,
+  ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useLocalStorage<Theme>(storageKey, defaultTheme);
+  return (
+    <NextThemesProvider
+      attribute={attribute}
+      defaultTheme={defaultTheme}
+      enableSystem={enableSystem}
+      disableTransitionOnChange={disableTransitionOnChange}
+      {...props}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
 
-  useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove('light', 'dark');
-    root.classList.add(theme);
-  }, [theme]);
+/**
+ * Hook to access theme context
+ * Returns theme, setTheme, resolvedTheme, systemTheme, and themes
+ */
+export function useThemeContext() {
+  const { theme, setTheme, resolvedTheme, systemTheme, themes } = useNextTheme();
 
   const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    // Toggle between light and dark (ignore system)
+    const currentResolved = resolvedTheme || 'light';
+    setTheme(currentResolved === 'light' ? 'dark' : 'light');
   };
 
-  const value: ThemeContextValue = {
-    theme,
+  return {
+    theme: theme as Theme | undefined,
     setTheme,
+    resolvedTheme: resolvedTheme as 'light' | 'dark' | undefined,
+    systemTheme: systemTheme as 'light' | 'dark' | undefined,
+    themes,
     toggleTheme,
   };
-
-  return (
-    <ThemeContext.Provider value={value}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Custom Hook
-// ─────────────────────────────────────────────────────────────────────────
-
-export function useThemeContext(): ThemeContextValue {
-  const context = useContext(ThemeContext);
-
-  if (context === undefined) {
-    throw new Error('useThemeContext must be used within ThemeProvider');
-  }
-
-  return context;
 }

package/src/theme/ThemeToggle.tsx

@@ -1,8 +1,8 @@
 /**
  * ThemeToggle - Theme switcher component
  *
- * Switches between light and dark themes by toggling the 'dark' class on the html element.
- * Uses localStorage to persist the user's theme preference.
+ * Switches between light and dark themes.
+ * Must be used within ThemeProvider.
  *
  * @example
  * ```tsx
@@ -20,17 +20,21 @@ import { Button } from '@djangocfg/ui-core/components';
 import { useThemeContext } from './ThemeProvider';
 
 export function ThemeToggle() {
-  const { theme, toggleTheme } = useThemeContext();
-  const [isMounted, setIsMounted] = useState(false);
+  const { resolvedTheme, toggleTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
 
-  // Prevent hydration mismatch by only rendering after mount
+  // Prevent hydration mismatch
   useEffect(() => {
-    setIsMounted(true);
+    setMounted(true);
   }, []);
 
-  // Don't render anything during SSR
-  if (!isMounted) {
-    return null;
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="h-9 w-9" disabled>
+        <Sun className="h-4 w-4" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    );
   }
 
   return (
@@ -39,9 +43,9 @@ export function ThemeToggle() {
       size="icon"
       onClick={toggleTheme}
       className="h-9 w-9"
-      title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+      title={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} theme`}
     >
-      {theme === 'light' ? (
+      {resolvedTheme === 'light' ? (
         <Sun className="h-4 w-4" />
       ) : (
         <Moon className="h-4 w-4" />

package/src/theme/index.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider, useThemeContext } from './ThemeProvider';
+export type { Theme, ThemeProviderProps } from './ThemeProvider';
 export { ThemeToggle } from './ThemeToggle';
-export { ForceTheme } from './ForceTheme';
+export { ForceTheme } from './ForceTheme';