@djangocfg/ui-nextjs 2.1.41 → 2.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.41",
+  "version": "2.1.43",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.41",
-    "@djangocfg/ui-core": "^2.1.41",
+    "@djangocfg/api": "^2.1.43",
+    "@djangocfg/ui-core": "^2.1.43",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -106,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.41",
+    "@djangocfg/typescript-config": "^2.1.43",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/animations/AnimatedBackground.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useMemo } from 'react';
+
 import { cn } from '@djangocfg/ui-core/lib';
 
 export type BackgroundVariant =

package/src/blocks/ArticleCard.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import moment from 'moment';
+
+import {
+    Badge, ButtonLink, Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, ButtonLink } from '@djangocfg/ui-core/components';
 
 export type ArticleType = 'security' | 'release' | 'announcement' | 'feature';
 
@@ -35,12 +39,7 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({
   className,
 }) => {
   const config = typeConfig[type];
-
-  const formattedDate = new Date(date).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  const formattedDate = moment(date).format('MMMM D, YYYY');
 
   return (
     <Card className={cn(

package/src/blocks/ArticleList.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import moment from 'moment';
+
 import { cn } from '@djangocfg/ui-core/lib';
+
 import { ArticleCard, ArticleType } from './ArticleCard';
 
 export interface Article {
@@ -30,18 +33,16 @@ export const ArticleList: React.FC<ArticleListProps> = ({
   columns = 2,
   className,
 }) => {
-  // Sort by date, newest first
-  const sortedArticles = [...articles].sort(
-    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
-  );
-
-  // Separate featured and regular articles
-  const featuredArticles = showFeatured
-    ? sortedArticles.filter((a) => a.featured)
-    : [];
-  const regularArticles = showFeatured
-    ? sortedArticles.filter((a) => !a.featured)
-    : sortedArticles;
+  // Sort by date, newest first, and separate featured/regular articles
+  const { featuredArticles, regularArticles } = useMemo(() => {
+    const sorted = [...articles].sort(
+      (a, b) => moment(b.date).valueOf() - moment(a.date).valueOf()
+    );
+    return {
+      featuredArticles: showFeatured ? sorted.filter((a) => a.featured) : [],
+      regularArticles: showFeatured ? sorted.filter((a) => !a.featured) : sorted,
+    };
+  }, [articles, showFeatured]);
 
   const gridCols = {
     1: 'grid-cols-1',

package/src/blocks/FeatureSection.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
+import {
+    Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 interface Feature {
@@ -11,12 +13,14 @@ interface Feature {
 }
 
 interface FeatureSectionProps {
-  title: string;
+  title?: string;
   subtitle?: string;
   features: Feature[];
-  columns?: 1 | 2 | 3 | 4;
+  columns?: 1 | 2 | 3 | 4 | 6;
   className?: string;
-  background?: 'dark' | 'card' | 'gradient';
+  background?: 'dark' | 'card' | 'gradient' | 'none';
+  /** Compact variant: smaller icons, no cards, minimal spacing */
+  variant?: 'default' | 'compact';
 }
 
 export const FeatureSection: React.FC<FeatureSectionProps> = ({
@@ -25,9 +29,24 @@ export const FeatureSection: React.FC<FeatureSectionProps> = ({
   features,
   columns = 3,
   className,
-  background = 'dark'
+  background = 'dark',
+  variant = 'default'
 }) => {
   const getGridClasses = () => {
+    if (variant === 'compact') {
+      switch (columns) {
+        case 2:
+          return 'grid-cols-2';
+        case 3:
+          return 'grid-cols-2 md:grid-cols-3';
+        case 4:
+          return 'grid-cols-2 md:grid-cols-4';
+        case 6:
+          return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6';
+        default:
+          return 'grid-cols-2 md:grid-cols-3';
+      }
+    }
     switch (columns) {
       case 1:
         return 'grid-cols-1 max-w-2xl mx-auto';
@@ -37,6 +56,8 @@ export const FeatureSection: React.FC<FeatureSectionProps> = ({
         return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
       case 4:
         return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4';
+      case 6:
+        return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6';
       default:
         return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
     }
@@ -50,24 +71,75 @@ export const FeatureSection: React.FC<FeatureSectionProps> = ({
         return 'bg-card';
       case 'gradient':
         return 'bg-gradient-to-b from-background to-muted/20';
+      case 'none':
+        return '';
       default:
         return 'bg-background';
     }
   };
 
+  // Compact variant render
+  if (variant === 'compact') {
+    return (
+      <section className={cn('py-12 md:py-16', getBackgroundClasses(), className)}>
+        <div className="container max-w-5xl mx-auto px-4">
+          {(title || subtitle) && (
+            <div className="text-center mb-8">
+              {title && (
+                <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-2">
+                  {title}
+                </h2>
+              )}
+              {subtitle && (
+                <p className="text-sm text-muted-foreground max-w-2xl mx-auto">
+                  {subtitle}
+                </p>
+              )}
+            </div>
+          )}
+          <div className={cn('grid gap-4', getGridClasses())}>
+            {features.map((feature, index) => (
+              <div key={index} className="text-center p-4">
+                {feature.icon && (
+                  <div
+                    className={cn(
+                      'w-10 h-10 mx-auto mb-3 rounded-lg flex items-center justify-center',
+                      feature.gradient || 'bg-primary/10 text-primary'
+                    )}
+                  >
+                    <div className="[&>svg]:w-5 [&>svg]:h-5">
+                      {feature.icon}
+                    </div>
+                  </div>
+                )}
+                <h3 className="font-medium text-sm mb-1">{feature.title}</h3>
+                <p className="text-xs text-muted-foreground">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Default variant render
   return (
     <section className={cn('py-12 sm:py-16 lg:py-24', getBackgroundClasses(), className)}>
       <div className="w-full px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-12 sm:mb-16">
-          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-4 sm:mb-6">
-            {title}
-          </h2>
-          {subtitle && (
-            <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-2">
-              {subtitle}
-            </p>
-          )}
-        </div>
+        {(title || subtitle) && (
+          <div className="text-center mb-12 sm:mb-16">
+            {title && (
+              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-4 sm:mb-6">
+                {title}
+              </h2>
+            )}
+            {subtitle && (
+              <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-2">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
 
         <div className={cn('grid gap-6 sm:gap-8', getGridClasses())}>
           {features.map((feature, index) => (

package/src/blocks/SuperHero.tsx

@@ -3,9 +3,12 @@
 import { ArrowRight, Sparkles, Wand2 } from 'lucide-react';
 import React from 'react';
 
+import {
+    Button, ButtonLink, CopyButton, Sticky, Tooltip, TooltipContent, TooltipTrigger
+} from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
-import { Button, ButtonLink, Sticky, Tooltip, TooltipTrigger, TooltipContent, CopyButton } from '@djangocfg/ui-core/components';
-import { AnimatedBackground, type BackgroundVariant } from '../animations';
+
+import { AnimatedBackground, BackgroundVariant} from '../animations';
 import { ForceTheme } from '../theme';
 
 interface HeroFeature {
@@ -105,6 +108,9 @@ export const SuperHero: React.FC<SuperHeroProps> = ({
     if (codeCommand) return [codeCommand];
     return [];
   }, [codeCommand, codeCommands]);
+
+  // Pre-compute title lines to avoid repeated split in JSX
+  const titleLines = React.useMemo(() => title.split('\n'), [title]);
   
   // Show background switcher in development mode or if explicitly enabled
   const isDevelopment = process.env.NODE_ENV === 'development';
@@ -141,10 +147,10 @@ export const SuperHero: React.FC<SuperHeroProps> = ({
 
           {/* Enhanced Main Title */}
           <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-foreground mb-6 leading-tight">
-            {title.split('\n').map((line, index) => (
+            {titleLines.map((line, index) => (
               <React.Fragment key={index}>
                 {line}
-                {index < title.split('\n').length - 1 && <br />}
+                {index < titleLines.length - 1 && <br />}
               </React.Fragment>
             ))}
             {titleGradient && (

package/src/components/breadcrumb-navigation.tsx

@@ -1,15 +1,12 @@
-import React from 'react';
 import Link from 'next/link';
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
 import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
+    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
+    BreadcrumbSeparator
 } from './breadcrumb';
-import { cn } from '@djangocfg/ui-core/lib';
 
 export interface BreadcrumbItem {
   /** Display text for the breadcrumb */

package/src/components/breadcrumb.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cn } from "@djangocfg/ui-core/lib"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-import Link from "next/link"
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { Slot } from '@radix-ui/react-slot';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

package/src/components/button-download.tsx

@@ -1,10 +1,12 @@
 "use client"
 
-import * as React from "react"
-import { Loader2, Download, CheckCircle2, AlertCircle } from "lucide-react"
-import { Button, type ButtonProps } from "@djangocfg/ui-core/components"
-import { cn } from "@djangocfg/ui-core/lib"
-import { useLocalStorage } from "../hooks/useLocalStorage"
+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"

package/src/components/dropdown-menu.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { cn } from "@djangocfg/ui-core/lib"
-import { Check, ChevronRight, Circle } from "lucide-react"
-import Link from "next/link"
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 

package/src/components/markdown/MarkdownMessage.tsx

@@ -3,10 +3,13 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import Mermaid from '../../tools/Mermaid';
-import PrettyCode from '../../tools/PrettyCode';
+
 import { CopyButton } from '@djangocfg/ui-core/components';
+
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
+import Mermaid from '../../tools/Mermaid';
+import PrettyCode from '../../tools/PrettyCode';
+
 import type { Components } from 'react-markdown';
 
 // Helper function to extract text content from React children

package/src/components/menubar.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { cn } from "@djangocfg/ui-core/lib"
-import { Check, ChevronRight, Circle } from "lucide-react"
-import Link from "next/link"
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
 
 function MenubarMenu({
   ...props

package/src/components/multi-select-pro/async.tsx

@@ -13,25 +13,15 @@
 
 "use client"
 
-import * as React from "react"
-import { Check, ChevronsUpDown, X, XCircle, Loader2 } from "lucide-react"
-import { cva } from "class-variance-authority"
-import { cn } from "@djangocfg/ui-core/lib"
+import { cva } from 'class-variance-authority';
+import { Check, ChevronsUpDown, Loader2, X, XCircle } from 'lucide-react';
+import * as React from 'react';
+
 import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Badge,
-  Separator,
-} from "@djangocfg/ui-core/components"
+    Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList,
+    CommandSeparator, Popover, PopoverContent, PopoverTrigger, Separator
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 
 // ==================== TYPES ====================
 

package/src/components/multi-select-pro/index.tsx

@@ -1,24 +1,14 @@
 "use client"
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Check, ChevronsUpDown, X, XCircle } from "lucide-react"
-import { cn } from "@djangocfg/ui-core/lib"
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Check, ChevronsUpDown, X, XCircle } from 'lucide-react';
+import * as React from 'react';
+
 import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Badge,
-  Separator,
-} from "@djangocfg/ui-core/components"
+    Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList,
+    CommandSeparator, Popover, PopoverContent, PopoverTrigger, Separator
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 
 // ==================== TYPES ====================
 

package/src/components/navigation-menu.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-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 { ChevronDown } from "lucide-react"
-import Link from "next/link"
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

package/src/components/otp/index.tsx

@@ -1,14 +1,12 @@
 'use client'
 
-import * as React from 'react'
-import { cn } from '@djangocfg/ui-core'
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from '@djangocfg/ui-core'
-import { MinusIcon } from 'lucide-react'
-import { useSmartOTP, createPasteHandler } from './use-otp-input'
+import { MinusIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn, InputOTP, InputOTPGroup, InputOTPSlot } from '@djangocfg/ui-core';
+
+import { createPasteHandler, useSmartOTP } from './use-otp-input';
+
 import type { SmartOTPProps } from './types'
 
 /**

package/src/components/otp/use-otp-input.ts

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useCallback, useMemo, useEffect } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
 import type {
   SmartOTPProps,
   UseSmartOTPReturn,

package/src/components/pagination-static.tsx

@@ -37,20 +37,17 @@
 
 "use client"
 
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
-import { cn } from '@djangocfg/ui-core/lib';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
+
 import { Button } from '@djangocfg/ui-core/components';
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+
 import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
+    Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,
+    PaginationNext, PaginationPrevious
 } from './pagination';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 /**
  * DRF Pagination Response type

package/src/components/pagination.tsx

@@ -1,8 +1,9 @@
-import * as React from "react"
-import { cn } from "@djangocfg/ui-core/lib"
-import { type ButtonProps, buttonVariants } from "@djangocfg/ui-core/components"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
-import Link from "next/link"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
+import { ButtonProps, buttonVariants} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav

package/src/components/phone-input.tsx

@@ -1,16 +1,17 @@
 "use client"
 
-import * as React from "react"
-import { AsYouType, parsePhoneNumberFromString, CountryCode, getCountries, getCountryCallingCode } from 'libphonenumber-js'
-import { Input, Button } from "@djangocfg/ui-core/components"
-import { cn } from "@djangocfg/ui-core/lib"
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./dropdown-menu"
-import { ChevronDown, Search } from "lucide-react"
+    AsYouType, CountryCode, getCountries, getCountryCallingCode, parsePhoneNumberFromString
+} from 'libphonenumber-js';
+import { ChevronDown, Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Button, Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import {
+    DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger
+} from './dropdown-menu';
 
 // Generate country flag emoji from country code
 const getCountryFlag = (countryCode: CountryCode): string => {

package/src/components/sidebar.tsx

@@ -1,27 +1,17 @@
 "use client"
 
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { useIsMobile } from "@djangocfg/ui-core/hooks"
-import { cn } from "@djangocfg/ui-core/lib"
+import { cva, VariantProps } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
 import {
-  Button,
-  Input,
-  Separator,
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  Skeleton,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@djangocfg/ui-core/components"
-import { PanelLeft } from "lucide-react"
-import Link from "next/link"
+    Button, Input, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle,
+    Skeleton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
+} from '@djangocfg/ui-core/components';
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+import { Slot } from '@radix-ui/react-slot';
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7

package/src/components/sonner.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
 
 type ToasterProps = React.ComponentProps<typeof Sonner>