@djangocfg/ui-nextjs 1.4.47 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "1.4.47",
+  "version": "2.1.1",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,15 +58,15 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.46",
-    "@djangocfg/ui-core": "^1.0.2",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@djangocfg/api": "^2.1.1",
+    "@djangocfg/ui-core": "^1.0.4",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "next": "^15.5.7",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-hook-form": "7.65.0",
     "tailwindcss": "^4.1.14",
     "zod": "^4.1.13",
@@ -76,6 +76,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@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",
@@ -98,7 +99,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.46",
+    "@djangocfg/typescript-config": "^2.1.1",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/components/breadcrumb.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cn } from "@djangocfg/ui-core/lib"
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
 import Link from "next/link"
 
 const Breadcrumb = React.forwardRef<
@@ -100,7 +100,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRightIcon />}
+    {children ?? <ChevronRight />}
   </li>
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
@@ -115,7 +115,7 @@ const BreadcrumbEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 )

package/src/components/dropdown-menu.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { cn } from "@djangocfg/ui-core/lib"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import { Check, ChevronRight, Circle } from "lucide-react"
 import Link from "next/link"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
@@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto" />
+    <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -126,7 +126,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -149,7 +149,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-2 w-2 fill-current" />
+        <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

package/src/components/markdown/MarkdownMessage.tsx

@@ -40,6 +40,8 @@ export interface MarkdownMessageProps {
   className?: string;
   /** Whether the message is from the user (affects styling) */
   isUser?: boolean;
+  /** Use compact size (text-xs instead of text-sm) */
+  isCompact?: boolean;
 }
 
 // Code block component with copy functionality
@@ -90,39 +92,45 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser }) => {
 };
 
 // Custom components for markdown in chat
-// Base size: text-sm (14px) for consistency
-const createMarkdownComponents = (isUser: boolean = false): Components => ({
+// Base size: text-sm (14px) for normal, text-xs (12px) for compact
+const createMarkdownComponents = (isUser: boolean = false, isCompact: boolean = false): Components => {
+  // Text size classes based on compact mode
+  const textSize = isCompact ? 'text-xs' : 'text-sm';
+  const headingBase = isCompact ? 'text-sm' : 'text-base';
+  const headingSm = isCompact ? 'text-xs' : 'text-sm';
+
+  return {
   // Headings - scaled for chat context
   h1: ({ children }) => (
-    <h1 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h1>
+    <h1 className={`${headingBase} font-bold mb-2 mt-3 first:mt-0`}>{children}</h1>
   ),
   h2: ({ children }) => (
-    <h2 className="text-sm font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+    <h2 className={`${headingSm} font-bold mb-2 mt-3 first:mt-0`}>{children}</h2>
   ),
   h3: ({ children }) => (
-    <h3 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h3>
+    <h3 className={`${headingSm} font-semibold mb-1 mt-2 first:mt-0`}>{children}</h3>
   ),
   h4: ({ children }) => (
-    <h4 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h4>
+    <h4 className={`${headingSm} font-semibold mb-1 mt-2 first:mt-0`}>{children}</h4>
   ),
   h5: ({ children }) => (
-    <h5 className="text-sm font-medium mb-1 mt-2 first:mt-0">{children}</h5>
+    <h5 className={`${headingSm} font-medium mb-1 mt-2 first:mt-0`}>{children}</h5>
   ),
   h6: ({ children }) => (
-    <h6 className="text-sm font-medium mb-1 mt-2 first:mt-0">{children}</h6>
+    <h6 className={`${headingSm} font-medium mb-1 mt-2 first:mt-0`}>{children}</h6>
   ),
 
   // Paragraphs - compact spacing for chat
   p: ({ children }) => (
-    <p className="text-sm mb-2 last:mb-0 leading-relaxed break-words">{children}</p>
+    <p className={`${textSize} mb-2 last:mb-0 leading-relaxed break-words`}>{children}</p>
   ),
 
   // Lists - compact
   ul: ({ children }) => (
-    <ul className="list-disc list-inside mb-2 space-y-1 text-sm">{children}</ul>
+    <ul className={`list-disc list-inside mb-2 space-y-1 ${textSize}`}>{children}</ul>
   ),
   ol: ({ children }) => (
-    <ol className="list-decimal list-inside mb-2 space-y-1 text-sm">{children}</ol>
+    <ol className={`list-decimal list-inside mb-2 space-y-1 ${textSize}`}>{children}</ol>
   ),
   li: ({ children }) => (
     <li className="break-words">{children}</li>
@@ -132,7 +140,7 @@ const createMarkdownComponents = (isUser: boolean = false): Components => ({
   a: ({ href, children }) => (
     <a
       href={href}
-      className="text-sm text-primary underline hover:text-primary/80 transition-colors break-all"
+      className={`${textSize} text-primary underline hover:text-primary/80 transition-colors break-all`}
       target={href?.startsWith('http') ? '_blank' : undefined}
       rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
     >
@@ -239,7 +247,7 @@ const createMarkdownComponents = (isUser: boolean = false): Components => ({
 
   // Blockquotes
   blockquote: ({ children }) => (
-    <blockquote className="text-sm border-l-2 border-border pl-3 my-2 italic text-muted-foreground break-words">
+    <blockquote className={`${textSize} border-l-2 border-border pl-3 my-2 italic text-muted-foreground break-words`}>
       {children}
     </blockquote>
   ),
@@ -247,7 +255,7 @@ const createMarkdownComponents = (isUser: boolean = false): Components => ({
   // Tables - compact for chat
   table: ({ children }) => (
     <div className="overflow-x-auto my-3">
-      <table className="min-w-full text-sm border-collapse">
+      <table className={`min-w-full ${textSize} border-collapse`}>
         {children}
       </table>
     </div>
@@ -282,7 +290,7 @@ const createMarkdownComponents = (isUser: boolean = false): Components => ({
   em: ({ children }) => (
     <em className="italic">{children}</em>
   ),
-});
+};};
 
 /**
  * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
@@ -306,13 +314,17 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   content,
   className = "",
   isUser = false,
+  isCompact = false,
 }) => {
-  const components = React.useMemo(() => createMarkdownComponents(isUser), [isUser]);
+  const components = React.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
+
+  const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
+  const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
 
   return (
     <div
       className={`
-        prose prose-sm max-w-none break-words overflow-hidden text-sm
+        prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
         ${isUser ? 'prose-invert' : 'dark:prose-invert'}
         ${className}
       `}

package/src/components/menubar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { cn } from "@djangocfg/ui-core/lib"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import { Check, ChevronRight, Circle } from "lucide-react"
 import Link from "next/link"
 
 function MenubarMenu({
@@ -82,7 +82,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
 ))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
@@ -178,7 +178,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -200,7 +200,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-4 w-4 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}

package/src/components/navigation-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { cn } from "@djangocfg/ui-core/lib"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 import Link from "next/link"
 
 const NavigationMenu = React.forwardRef<
@@ -56,7 +56,7 @@ const NavigationMenuTrigger = React.forwardRef<
     {...props}
   >
     {children}{" "}
-    <ChevronDownIcon
+    <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />

package/src/components/sidebar.tsx

@@ -20,7 +20,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@djangocfg/ui-core/components"
-import { ViewVerticalIcon } from "@radix-ui/react-icons"
+import { PanelLeft } from "lucide-react"
 import Link from "next/link"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
@@ -322,7 +322,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <ViewVerticalIcon />
+      <PanelLeft />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )

package/src/styles/index.css

@@ -1,2 +1,8 @@
 /* Re-export styles from ui-core */
 @import '@djangocfg/ui-core/styles';
+
+/**
+ * Tailwind v4 Source Detection for UI-NextJS Package
+ * Scan Next.js specific components (sidebar, etc.)
+ */
+@source "../**/*.{ts,tsx}";