@djangocfg/ui-nextjs 2.1.1 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,7 +58,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.1",
+    "@djangocfg/api": "^2.1.3",
     "@djangocfg/ui-core": "^1.0.4",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
@@ -73,6 +73,9 @@
     "consola": "^3.4.2"
   },
   "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",
@@ -99,7 +102,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.1",
+    "@djangocfg/typescript-config": "^2.1.3",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/blocks/SuperHero.tsx

@@ -1,11 +1,10 @@
 "use client"
 
-import { ArrowRight, Sparkles, Wand2, Copy, Check } from 'lucide-react';
+import { ArrowRight, Sparkles, Wand2 } from 'lucide-react';
 import React from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
-import { Button, ButtonLink, Sticky, Tooltip, TooltipTrigger, TooltipContent } from '@djangocfg/ui-core/components';
-import { useCopy } from '@djangocfg/ui-core/hooks';
+import { Button, ButtonLink, Sticky, Tooltip, TooltipTrigger, TooltipContent, CopyButton } from '@djangocfg/ui-core/components';
 import { AnimatedBackground, type BackgroundVariant } from '../animations';
 import { ForceTheme } from '../theme';
 
@@ -45,7 +44,10 @@ interface SuperHeroProps {
   backgroundVariant?: BackgroundVariant;
   backgroundIntensity?: 'subtle' | 'medium' | 'strong';
   showBackgroundSwitcher?: boolean;
+  /** Single command (for backwards compatibility) */
   codeCommand?: string;
+  /** Array of commands to display with copy buttons */
+  codeCommands?: string[];
   className?: string;
 }
 
@@ -90,12 +92,19 @@ export const SuperHero: React.FC<SuperHeroProps> = ({
   backgroundIntensity = 'medium',
   showBackgroundSwitcher = false,
   codeCommand,
+  codeCommands,
   className
 }) => {
   const [currentVariant, setCurrentVariant] = React.useState<BackgroundVariant>(backgroundVariant);
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [heroTheme, setHeroTheme] = React.useState<'light' | 'dark'>('dark');
-  const { copyToClipboard } = useCopy();
+
+  // Merge codeCommand (deprecated) with codeCommands for backwards compatibility
+  const commands = React.useMemo(() => {
+    if (codeCommands && codeCommands.length > 0) return codeCommands;
+    if (codeCommand) return [codeCommand];
+    return [];
+  }, [codeCommand, codeCommands]);
   
   // Show background switcher in development mode or if explicitly enabled
   const isDevelopment = process.env.NODE_ENV === 'development';
@@ -153,18 +162,26 @@ export const SuperHero: React.FC<SuperHeroProps> = ({
             {subtitle}
           </p>
 
-          {/* Code Command */}
-          {codeCommand && (
-            <div className="flex justify-center mb-8">
-              <div className="inline-flex items-center gap-3 px-6 py-3 bg-background/50 backdrop-blur-md border border-primary/20 rounded-xl shadow-lg hover:border-primary/40 transition-colors group cursor-pointer"
-                   onClick={() => copyToClipboard(codeCommand, 'Command copied!')}>
-                <code className="font-mono text-lg text-primary font-semibold">
-                  {codeCommand}
-                </code>
-                <div className="p-1.5 rounded-md bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
-                  <Copy className="w-4 h-4" />
+          {/* Code Commands */}
+          {commands.length > 0 && (
+            <div className="flex flex-col items-center gap-2 mb-8">
+              {commands.map((cmd, index) => (
+                <div
+                  key={index}
+                  className="inline-flex items-center gap-3 px-6 py-3 bg-background/50 backdrop-blur-md border border-primary/20 rounded-xl shadow-lg hover:border-primary/40 transition-colors group"
+                >
+                  <span className="text-muted-foreground font-mono text-sm select-none">$</span>
+                  <code className="font-mono text-lg text-primary font-semibold">
+                    {cmd}
+                  </code>
+                  <CopyButton
+                    value={cmd}
+                    variant="ghost"
+                    className="p-1.5 h-auto rounded-md bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
+                    iconClassName="w-4 h-4"
+                  />
                 </div>
-              </div>
+              ))}
             </div>
           )}