@djangocfg/ui-nextjs 2.1.42 → 2.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.42",
+  "version": "2.1.44",
   "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.42",
-    "@djangocfg/ui-core": "^2.1.42",
+    "@djangocfg/api": "^2.1.44",
+    "@djangocfg/ui-core": "^2.1.44",
     "@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.42",
+    "@djangocfg/typescript-config": "^2.1.44",
     "@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/SplitHero/SplitHero.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { SplitHeroContent } from './SplitHeroContent';
+import { SplitHeroMedia } from './SplitHeroMedia';
+import type { SplitHeroProps } from './types';
+
+const MAX_WIDTH_CLASSES = {
+  sm: 'max-w-3xl',
+  md: 'max-w-4xl',
+  lg: 'max-w-5xl',
+  xl: 'max-w-6xl',
+  full: 'max-w-7xl',
+};
+
+const BACKGROUND_CLASSES = {
+  none: '',
+  muted: 'bg-muted/30',
+  gradient: 'bg-gradient-to-br from-primary/5 via-background to-secondary/5',
+};
+
+export const SplitHero: React.FC<SplitHeroProps> = ({
+  badge,
+  title,
+  titleGradient,
+  subtitle,
+  features,
+  primaryAction,
+  secondaryAction,
+  media,
+  layout = 'text-left',
+  mobileOrder = 'text-first',
+  align = 'center',
+  maxWidth = 'xl',
+  background = 'none',
+  className,
+}) => {
+  const isTextLeft = layout === 'text-left';
+  const isMediaFirst = mobileOrder === 'media-first';
+
+  return (
+    <section
+      className={cn(
+        'py-12 md:py-16 lg:py-20',
+        BACKGROUND_CLASSES[background],
+        className
+      )}
+    >
+      <div className={cn('mx-auto px-4', MAX_WIDTH_CLASSES[maxWidth])}>
+        <div
+          className={cn(
+            'grid gap-8 lg:gap-12 items-center',
+            media ? 'lg:grid-cols-2' : 'lg:grid-cols-1 max-w-3xl mx-auto'
+          )}
+        >
+          {/* Content - order changes based on layout and mobile settings */}
+          <div
+            className={cn(
+              // Desktop order based on layout
+              isTextLeft ? 'lg:order-1' : 'lg:order-2',
+              // Mobile order based on mobileOrder
+              isMediaFirst ? 'order-2' : 'order-1'
+            )}
+          >
+            <SplitHeroContent
+              badge={badge}
+              title={title}
+              titleGradient={titleGradient}
+              subtitle={subtitle}
+              features={features}
+              primaryAction={primaryAction}
+              secondaryAction={secondaryAction}
+              align={align}
+            />
+          </div>
+
+          {/* Media */}
+          {media && (
+            <div
+              className={cn(
+                // Desktop order based on layout
+                isTextLeft ? 'lg:order-2' : 'lg:order-1',
+                // Mobile order based on mobileOrder
+                isMediaFirst ? 'order-1' : 'order-2'
+              )}
+            >
+              <SplitHeroMedia media={media} />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/blocks/SplitHero/SplitHeroContent.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import React from 'react';
+import { ArrowRight, Sparkles } from 'lucide-react';
+import { ButtonLink } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import type { SplitHeroBadge, SplitHeroAction, SplitHeroFeature } from './types';
+
+interface SplitHeroContentProps {
+  badge?: SplitHeroBadge;
+  title: string;
+  titleGradient?: string;
+  subtitle?: string;
+  features?: SplitHeroFeature[];
+  primaryAction?: SplitHeroAction;
+  secondaryAction?: SplitHeroAction;
+  align?: 'top' | 'center' | 'bottom';
+  className?: string;
+}
+
+export const SplitHeroContent: React.FC<SplitHeroContentProps> = ({
+  badge,
+  title,
+  titleGradient,
+  subtitle,
+  features = [],
+  primaryAction,
+  secondaryAction,
+  align = 'center',
+  className,
+}) => {
+  const alignClasses = {
+    top: 'justify-start',
+    center: 'justify-center',
+    bottom: 'justify-end',
+  };
+
+  return (
+    <div className={cn('flex flex-col', alignClasses[align], className)}>
+      {/* Badge */}
+      {badge && (
+        <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4 w-fit border border-primary/20">
+          {badge.icon || <Sparkles className="w-3.5 h-3.5" />}
+          {badge.text}
+        </div>
+      )}
+
+      {/* Title */}
+      <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-4 leading-tight">
+        {title}
+        {titleGradient && (
+          <>
+            {' '}
+            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              {titleGradient}
+            </span>
+          </>
+        )}
+      </h1>
+
+      {/* Subtitle */}
+      {subtitle && (
+        <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
+          {subtitle}
+        </p>
+      )}
+
+      {/* Features */}
+      {features.length > 0 && (
+        <div className="flex flex-wrap gap-3 mb-6">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 text-sm text-muted-foreground"
+            >
+              {feature.icon && (
+                <span className="text-primary">{feature.icon}</span>
+              )}
+              <span>{feature.text}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Actions */}
+      {(primaryAction || secondaryAction) && (
+        <div className="flex flex-wrap gap-3">
+          {primaryAction && (
+            <ButtonLink
+              href={primaryAction.href || '#'}
+              onClick={primaryAction.onClick}
+              variant={primaryAction.variant || 'default'}
+              size="lg"
+              className="group"
+            >
+              {primaryAction.label}
+              {primaryAction.icon || (
+                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+              )}
+            </ButtonLink>
+          )}
+          {secondaryAction && (
+            <ButtonLink
+              href={secondaryAction.href || '#'}
+              onClick={secondaryAction.onClick}
+              variant={secondaryAction.variant || 'outline'}
+              size="lg"
+            >
+              {secondaryAction.label}
+              {secondaryAction.icon}
+            </ButtonLink>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/blocks/SplitHero/SplitHeroMedia.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { cn } from '@djangocfg/ui-core/lib';
+import { VideoPlayer } from '../../tools/VideoPlayer';
+import type { SplitHeroMedia as SplitHeroMediaType } from './types';
+
+interface SplitHeroMediaProps {
+  media: SplitHeroMediaType;
+  className?: string;
+}
+
+export const SplitHeroMedia: React.FC<SplitHeroMediaProps> = ({
+  media,
+  className,
+}) => {
+  const containerClass = cn(
+    'relative w-full rounded-xl overflow-hidden',
+    className
+  );
+
+  switch (media.type) {
+    case 'image':
+      return (
+        <div className={containerClass}>
+          <div className="relative aspect-[4/3] w-full">
+            <Image
+              src={media.src}
+              alt={media.alt || ''}
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+            />
+          </div>
+        </div>
+      );
+
+    case 'video':
+      return (
+        <div className={containerClass}>
+          <VideoPlayer
+            source={{
+              url: media.url,
+              title: media.title,
+              poster: media.poster,
+            }}
+            theme="modern"
+            aspectRatio={16 / 9}
+            autoplay={media.autoplay}
+            muted={media.muted ?? media.autoplay}
+          />
+        </div>
+      );
+
+    case 'custom':
+      return (
+        <div className={containerClass}>
+          {media.content}
+        </div>
+      );
+
+    default:
+      return null;
+  }
+};

package/src/blocks/SplitHero/index.ts

@@ -0,0 +1,13 @@
+export { SplitHero } from './SplitHero';
+export { SplitHeroContent } from './SplitHeroContent';
+export { SplitHeroMedia } from './SplitHeroMedia';
+export type {
+  SplitHeroProps,
+  SplitHeroMedia as SplitHeroMediaType,
+  SplitHeroMediaImage,
+  SplitHeroMediaVideo,
+  SplitHeroMediaCustom,
+  SplitHeroBadge,
+  SplitHeroAction,
+  SplitHeroFeature,
+} from './types';

package/src/blocks/SplitHero/types.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react';
+
+export interface SplitHeroBadge {
+  icon?: ReactNode;
+  text: string;
+}
+
+export interface SplitHeroAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  icon?: ReactNode;
+  variant?: 'default' | 'outline' | 'ghost' | 'secondary';
+}
+
+export interface SplitHeroFeature {
+  icon?: ReactNode;
+  text: string;
+}
+
+/** Image media type */
+export interface SplitHeroMediaImage {
+  type: 'image';
+  src: string;
+  alt?: string;
+}
+
+/** Video media type - uses VideoPlayer */
+export interface SplitHeroMediaVideo {
+  type: 'video';
+  url: string;
+  title?: string;
+  poster?: string;
+  autoplay?: boolean;
+  muted?: boolean;
+}
+
+/** Custom component media type */
+export interface SplitHeroMediaCustom {
+  type: 'custom';
+  content: ReactNode;
+}
+
+export type SplitHeroMedia = SplitHeroMediaImage | SplitHeroMediaVideo | SplitHeroMediaCustom;
+
+export interface SplitHeroProps {
+  /** Badge above title */
+  badge?: SplitHeroBadge;
+  /** Main title */
+  title: string;
+  /** Gradient part of title (optional) */
+  titleGradient?: string;
+  /** Subtitle text */
+  subtitle?: string;
+  /** Feature list */
+  features?: SplitHeroFeature[];
+  /** Primary CTA button */
+  primaryAction?: SplitHeroAction;
+  /** Secondary CTA button */
+  secondaryAction?: SplitHeroAction;
+  /** Media content - image, video, or custom component */
+  media?: SplitHeroMedia;
+  /** Layout direction */
+  layout?: 'text-left' | 'text-right';
+  /** Mobile stack order */
+  mobileOrder?: 'media-first' | 'text-first';
+  /** Content vertical alignment */
+  align?: 'top' | 'center' | 'bottom';
+  /** Container max width */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Background style */
+  background?: 'none' | 'muted' | 'gradient';
+  /** Custom className */
+  className?: string;
+}

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/blocks/index.ts

@@ -4,6 +4,7 @@ export * from './CTASection';
 export * from './FeatureSection';
 export * from './Hero';
 export * from './NewsletterSection';
+export * from './SplitHero';
 export * from './StatsSection';
 export * from './SuperHero';
 export * from './TestimonialSection';

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 */