@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/ui/collapsible.tsx

@@ -1,631 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-import { cva, type VariantProps } from "class-variance-authority"
-import { 
-  ChevronDown, 
-  ChevronRight,
-  ChevronUp,
-  Loader2, 
-  ExternalLink, 
-  AlertCircle,
-  CheckCircle2,
-  XCircle,
-  Info,
-  Clock,
-  Hash
-} from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-/**
- * MoonUICollapsiblePro - Advanced Collapsible Component
- * 
- * A feature-rich collapsible component with professional features:
- * - Multiple visual variants (elevated, bordered, gradient, glassmorphism, card)
- * - Size options (xs, sm, md, lg, xl)
- * - Animation modes (spring, smooth, fade, bounce, slide)
- * - Loading states with skeletons
- * - Icon support (left/right icons, custom chevrons)
- * - Progress indicators
- * - Badge system with variants
- * - Lazy loading for performance
- * - Auto-collapse timer
- * - Keyboard shortcuts
- * - Analytics tracking
- * - Memory persistence
- * - Nested collapsibles support
- */
-
-// Type definitions
-type CollapsibleSize = "xs" | "sm" | "md" | "lg" | "xl";
-type CollapsibleVariant = "default" | "bordered" | "elevated" | "gradient" | "glassmorphism" | "card";
-type AnimationMode = "spring" | "smooth" | "fade" | "bounce" | "slide";
-type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
-
-// Enhanced Collapsible Root component  
-interface MoonUICollapsibleProProps {
-  /** Visual variant */
-  variant?: CollapsibleVariant;
-  /** Size preset */
-  size?: CollapsibleSize;
-  /** Animation mode */
-  animationMode?: AnimationMode;
-  /** Auto-collapse after X milliseconds */
-  autoCollapseAfter?: number;
-  /** Analytics tracking callback */
-  onToggleChange?: (isOpen: boolean) => void;
-  /** Memory persistence key */
-  persistKey?: string;
-  /** Loading state */
-  loading?: boolean;
-  /** Progress percentage (0-100) */
-  progress?: number;
-  /** Badge content */
-  badge?: React.ReactNode;
-  /** Badge variant */
-  badgeVariant?: BadgeVariant;
-  /** Custom keyboard shortcut */
-  shortcut?: string;
-  /** Lazy load content */
-  lazy?: boolean;
-  /** Additional className */
-  className?: string;
-  /** Control open state */
-  open?: boolean;
-  /** Default open state */
-  defaultOpen?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (open: boolean) => void;
-  /** Children elements */
-  children?: React.ReactNode;
-  /** Disabled state */
-  disabled?: boolean;
-}
-
-const MoonUICollapsiblePro = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Root>,
-  MoonUICollapsibleProProps
->(({ 
-  className, 
-  variant = "default",
-  size = "md",
-  animationMode = "smooth",
-  autoCollapseAfter,
-  onToggleChange,
-  persistKey,
-  loading,
-  progress,
-  badge,
-  badgeVariant = "default",
-  shortcut,
-  lazy,
-  open: controlledOpen,
-  defaultOpen,
-  onOpenChange,
-  children,
-  disabled
-}, ref) => {
-  const [localOpen, setLocalOpen] = React.useState(() => {
-    // Check memory persistence
-    if (persistKey && typeof window !== 'undefined') {
-      const stored = localStorage.getItem(`collapsible-${persistKey}`);
-      if (stored !== null) {
-        return stored === 'true';
-      }
-    }
-    return defaultOpen || false;
-  });
-
-  const [hasBeenOpened, setHasBeenOpened] = React.useState(!lazy);
-
-  const isOpen = controlledOpen !== undefined ? controlledOpen : localOpen;
-
-  const handleOpenChange = React.useCallback((open: boolean) => {
-    if (!loading) {
-      setLocalOpen(open);
-      onOpenChange?.(open);
-      onToggleChange?.(open);
-
-      // Persist state
-      if (persistKey && typeof window !== 'undefined') {
-        localStorage.setItem(`collapsible-${persistKey}`, String(open));
-      }
-
-      // Track lazy loading
-      if (lazy && open && !hasBeenOpened) {
-        setHasBeenOpened(true);
-      }
-
-      // Auto-collapse timer
-      if (open && autoCollapseAfter) {
-        setTimeout(() => {
-          setLocalOpen(false);
-          onOpenChange?.(false);
-          onToggleChange?.(false);
-        }, autoCollapseAfter);
-      }
-    }
-  }, [loading, onOpenChange, onToggleChange, persistKey, lazy, hasBeenOpened, autoCollapseAfter]);
-
-  // Keyboard shortcut handler
-  React.useEffect(() => {
-    if (shortcut) {
-      const handleKeyPress = (e: KeyboardEvent) => {
-        const keys = shortcut.toLowerCase().split('+');
-        const ctrlKey = keys.includes('ctrl') || keys.includes('cmd');
-        const shiftKey = keys.includes('shift');
-        const altKey = keys.includes('alt');
-        const key = keys[keys.length - 1];
-
-        if (
-          e.ctrlKey === ctrlKey &&
-          e.shiftKey === shiftKey &&
-          e.altKey === altKey &&
-          e.key.toLowerCase() === key
-        ) {
-          e.preventDefault();
-          handleOpenChange(!isOpen);
-        }
-      };
-
-      window.addEventListener('keydown', handleKeyPress);
-      return () => window.removeEventListener('keydown', handleKeyPress);
-    }
-  }, [shortcut, isOpen, handleOpenChange]);
-
-  // Progress ring calculation
-  const progressOffset = progress ? 188.4 - (188.4 * progress) / 100 : 188.4;
-
-  return (
-    <div className={cn(
-      "relative",
-      variant === "bordered" && "border border-border rounded-lg",
-      variant === "elevated" && "border border-border rounded-lg shadow-lg hover:shadow-xl transition-shadow",
-      variant === "gradient" && "rounded-lg bg-gradient-to-r from-primary/5 via-accent/5 to-secondary/5",
-      variant === "glassmorphism" && "rounded-lg backdrop-blur-md bg-white/10 border border-white/20",
-      variant === "card" && "border border-border rounded-lg bg-card",
-      loading && "opacity-60 pointer-events-none",
-      className
-    )}>
-      {/* Progress indicator */}
-      {progress !== undefined && (
-        <div className="absolute top-2 right-2 w-6 h-6 z-10">
-          <svg className="w-6 h-6 -rotate-90" viewBox="0 0 64 64">
-            <circle
-              cx="32"
-              cy="32"
-              r="30"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              className="text-muted-foreground/20"
-            />
-            <circle
-              cx="32"
-              cy="32"
-              r="30"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeDasharray="188.4"
-              strokeDashoffset={progressOffset}
-              strokeLinecap="round"
-              className="text-primary transition-all duration-500"
-            />
-          </svg>
-          <span className="absolute inset-0 flex items-center justify-center text-xs font-medium">
-            {Math.round(progress)}
-          </span>
-        </div>
-      )}
-
-      {/* Badge */}
-      {badge && (
-        <div className="absolute -top-3 right-4 z-20">
-          <div className={cn(
-            "text-xs px-2.5 py-1 rounded-full font-semibold shadow-md",
-            badgeVariant === "default" && "bg-background text-foreground border border-border",
-            badgeVariant === "primary" && "bg-primary text-primary-foreground",
-            badgeVariant === "secondary" && "bg-secondary text-secondary-foreground",
-            badgeVariant === "success" && "bg-green-500 text-white",
-            badgeVariant === "warning" && "bg-amber-500 text-white",
-            badgeVariant === "danger" && "bg-red-500 text-white",
-            badgeVariant === "info" && "bg-blue-500 text-white"
-          )}>
-            {badge}
-          </div>
-        </div>
-      )}
-
-      {/* Loading spinner */}
-      {loading && (
-        <div className="absolute top-1/2 right-4 -translate-y-1/2 z-10">
-          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-        </div>
-      )}
-
-      <CollapsiblePrimitive.Root
-        ref={ref}
-        open={isOpen}
-        onOpenChange={handleOpenChange}
-        disabled={disabled || loading}
-        className={cn(
-          "w-full",
-          animationMode === "spring" && "[&_[data-state=open]]:animate-[collapsible-down_0.3s_cubic-bezier(0.34,1.56,0.64,1)]",
-          animationMode === "bounce" && "[&_[data-state=open]]:animate-[collapsible-down_0.4s_cubic-bezier(0.68,-0.55,0.265,1.55)]",
-          animationMode === "fade" && "[&_[data-state=open]]:animate-[collapsible-down_0.2s_ease-in-out]",
-          animationMode === "slide" && "[&_[data-state=open]]:animate-[slide-down_0.3s_ease-out]"
-        )}
-      >
-        {/* Provide context for children */}
-        <CollapsibleContext.Provider value={{ 
-          variant, 
-          size, 
-          animationMode, 
-          lazy: lazy && !hasBeenOpened,
-          shortcut 
-        }}>
-          {children}
-        </CollapsibleContext.Provider>
-      </CollapsiblePrimitive.Root>
-    </div>
-  );
-});
-
-MoonUICollapsiblePro.displayName = "MoonUICollapsiblePro"
-
-// Context definition
-const CollapsibleContext = React.createContext<{
-  variant?: CollapsibleVariant;
-  size?: CollapsibleSize;
-  animationMode?: AnimationMode;
-  lazy?: boolean;
-  shortcut?: string;
-}>({});
-
-// Enhanced Trigger component with variants
-const collapsibleTriggerVariants = cva(
-  "flex w-full items-center gap-3 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "text-foreground hover:text-primary",
-        bordered: "text-foreground hover:text-primary hover:bg-primary/5 rounded-t-lg",
-        elevated: "text-foreground hover:text-primary hover:bg-primary/5 rounded-t-lg",
-        gradient: "text-foreground hover:text-primary",
-        glassmorphism: "text-foreground hover:text-primary hover:bg-white/10",
-        card: "text-foreground hover:text-primary hover:bg-accent/5 rounded-t-lg"
-      },
-      size: {
-        xs: "text-xs py-2 px-3 min-h-[2.5rem]",
-        sm: "text-sm py-2.5 px-3.5 min-h-[3rem]",
-        md: "text-base py-3 px-4 min-h-[3.5rem]",
-        lg: "text-lg py-4 px-5 min-h-[4rem]",
-        xl: "text-xl py-5 px-6 min-h-[4.5rem]"
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
-  }
-)
-
-interface MoonUICollapsibleTriggerProProps 
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
-    VariantProps<typeof collapsibleTriggerVariants> {
-  /** Icon to show on the left */
-  leftIcon?: React.ReactNode;
-  /** Icon to show on the right (excluding chevron) */
-  rightIcon?: React.ReactNode;
-  /** Subtitle / description */
-  description?: string;
-  /** External link indicator */
-  external?: boolean;
-  /** Custom chevron icon */
-  customChevron?: React.ReactNode;
-  /** Hide chevron */
-  hideChevron?: boolean;
-  /** Status indicator */
-  status?: "success" | "warning" | "error" | "info";
-}
-
-const MoonUICollapsibleTriggerPro = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
-  MoonUICollapsibleTriggerProProps
->(({ 
-  className, 
-  children, 
-  variant: triggerVariant, 
-  size: triggerSize, 
-  asChild,
-  leftIcon,
-  rightIcon,
-  description,
-  external,
-  customChevron,
-  hideChevron,
-  status,
-  ...props 
-}, ref) => {
-  const { variant, size, shortcut } = React.useContext(CollapsibleContext);
-  const finalVariant = triggerVariant || variant || "default";
-  const finalSize = triggerSize || size || "md";
-
-  // Status icon mapping
-  const statusIcon = status && {
-    success: <CheckCircle2 className="h-4 w-4 text-green-500" />,
-    warning: <AlertCircle className="h-4 w-4 text-amber-500" />,
-    error: <XCircle className="h-4 w-4 text-red-500" />,
-    info: <Info className="h-4 w-4 text-blue-500" />
-  }[status];
-
-  // If asChild, render minimal wrapper
-  if (asChild) {
-    return (
-      <CollapsiblePrimitive.Trigger
-        ref={ref}
-        className={cn(collapsibleTriggerVariants({ variant: finalVariant, size: finalSize }), className)}
-        asChild={asChild}
-        {...props}
-      >
-        {children}
-      </CollapsiblePrimitive.Trigger>
-    )
-  }
-
-  return (
-    <CollapsiblePrimitive.Trigger
-      ref={ref}
-      className={cn(
-        collapsibleTriggerVariants({ variant: finalVariant, size: finalSize }),
-        "[&[data-state=open]>.chevron]:rotate-180",
-        "[&[data-state=open]]:text-primary",
-        className
-      )}
-      {...props}
-    >
-      {/* Left icon */}
-      {leftIcon && (
-        <span className="text-muted-foreground">{leftIcon}</span>
-      )}
-
-      {/* Status icon */}
-      {statusIcon && !leftIcon && statusIcon}
-
-      {/* Main content */}
-      <div className="flex-1 text-left">
-        <div className="flex items-center gap-2">
-          {/* Main title */}
-          <span className="font-medium">{children}</span>
-          
-          {/* External link indicator */}
-          {external && (
-            <ExternalLink className="h-3 w-3 text-muted-foreground" />
-          )}
-        </div>
-        
-        {/* Description */}
-        {description && (
-          <div className="text-sm text-muted-foreground mt-1">
-            {description}
-          </div>
-        )}
-      </div>
-
-      {/* Right side elements */}
-      <div className="flex items-center gap-2">
-        {/* Keyboard shortcut */}
-        {shortcut && (
-          <kbd className="hidden sm:inline-flex h-6 px-2 items-center rounded border bg-muted text-xs font-medium text-muted-foreground">
-            {shortcut}
-          </kbd>
-        )}
-        
-        {/* Right icon */}
-        {rightIcon && (
-          <span className="text-muted-foreground">{rightIcon}</span>
-        )}
-        
-        {/* Chevron */}
-        {!hideChevron && (
-          <span className="chevron transition-transform duration-200 text-muted-foreground">
-            {customChevron || <ChevronDown className="h-4 w-4" />}
-          </span>
-        )}
-      </div>
-    </CollapsiblePrimitive.Trigger>
-  )
-})
-MoonUICollapsibleTriggerPro.displayName = "MoonUICollapsibleTriggerPro"
-
-// Enhanced Content component with animations
-const collapsibleContentVariants = cva(
-  "overflow-hidden transition-all",
-  {
-    variants: {
-      variant: {
-        default: "text-muted-foreground",
-        bordered: "text-muted-foreground border-x border-b border-border rounded-b-lg",
-        elevated: "text-muted-foreground bg-muted/20",
-        gradient: "text-muted-foreground",
-        glassmorphism: "text-muted-foreground bg-white/5",
-        card: "text-muted-foreground border-x border-b border-border rounded-b-lg bg-card/50"
-      },
-      size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-        xl: "text-xl"
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
-  }
-)
-
-interface MoonUICollapsibleContentProProps 
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
-    VariantProps<typeof collapsibleContentVariants> {
-  /** Content loading state */
-  contentLoading?: boolean;
-  /** Dynamic content loading function */
-  loadContent?: () => Promise<React.ReactNode>;
-  /** Remove padding */
-  noPadding?: boolean;
-  /** Custom padding */
-  padding?: string;
-}
-
-const MoonUICollapsibleContentPro = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Content>,
-  MoonUICollapsibleContentProProps
->(({ 
-  className, 
-  children, 
-  variant: contentVariant, 
-  size: contentSize,
-  contentLoading,
-  loadContent,
-  noPadding,
-  padding,
-  ...props 
-}, ref) => {
-  const { variant, size, animationMode, lazy } = React.useContext(CollapsibleContext);
-  const finalVariant = contentVariant || variant || "default";
-  const finalSize = contentSize || size || "md";
-  
-  const [dynamicContent, setDynamicContent] = React.useState<React.ReactNode>(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  // Dynamic content loading
-  React.useEffect(() => {
-    if (loadContent && !dynamicContent) {
-      setIsLoading(true);
-      loadContent()
-        .then(setDynamicContent)
-        .finally(() => setIsLoading(false));
-    }
-  }, [loadContent, dynamicContent]);
-
-  // Determine padding based on size
-  const defaultPadding = !noPadding && {
-    xs: "p-3",
-    sm: "p-3.5",
-    md: "p-4",
-    lg: "p-5",
-    xl: "p-6"
-  }[finalSize];
-
-  return (
-    <CollapsiblePrimitive.Content
-      ref={ref}
-      className={cn(
-        collapsibleContentVariants({ variant: finalVariant, size: finalSize }),
-        // Animation modes
-        animationMode === "spring" && "data-[state=closed]:animate-[collapsible-up_0.3s_cubic-bezier(0.34,1.56,0.64,1)] data-[state=open]:animate-[collapsible-down_0.3s_cubic-bezier(0.34,1.56,0.64,1)]",
-        animationMode === "bounce" && "data-[state=closed]:animate-[collapsible-up_0.4s_cubic-bezier(0.68,-0.55,0.265,1.55)] data-[state=open]:animate-[collapsible-down_0.4s_cubic-bezier(0.68,-0.55,0.265,1.55)]",
-        animationMode === "fade" && "data-[state=closed]:animate-[collapsible-up_0.2s_ease-in-out] data-[state=open]:animate-[collapsible-down_0.2s_ease-in-out]",
-        animationMode === "slide" && "data-[state=closed]:animate-[slide-up_0.3s_ease-out] data-[state=open]:animate-[slide-down_0.3s_ease-out]",
-        animationMode === "smooth" && "data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
-        className
-      )}
-      {...props}
-    >
-      <div className={cn(padding || defaultPadding)}>
-        {lazy ? (
-          <div className="flex items-center gap-2 py-4">
-            <Clock className="h-4 w-4 animate-pulse" />
-            <span className="text-sm">Click to load content...</span>
-          </div>
-        ) : (contentLoading || isLoading) ? (
-          <div className="flex items-center gap-2 py-4">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            <span className="text-sm">Loading content...</span>
-          </div>
-        ) : (
-          dynamicContent || children
-        )}
-      </div>
-    </CollapsiblePrimitive.Content>
-  )
-})
-MoonUICollapsibleContentPro.displayName = "MoonUICollapsibleContentPro"
-
-// Utility Hooks
-export const useCollapsibleAnalytics = () => {
-  const [analytics, setAnalytics] = React.useState<{
-    openCount: number;
-    lastOpened: Date | null;
-    totalTimeOpen: number;
-  }>({
-    openCount: 0,
-    lastOpened: null,
-    totalTimeOpen: 0
-  });
-
-  const trackOpen = React.useCallback(() => {
-    setAnalytics(prev => ({
-      ...prev,
-      openCount: prev.openCount + 1,
-      lastOpened: new Date()
-    }));
-  }, []);
-
-  const trackClose = React.useCallback(() => {
-    setAnalytics(prev => {
-      if (prev.lastOpened) {
-        const timeOpen = Date.now() - prev.lastOpened.getTime();
-        return {
-          ...prev,
-          totalTimeOpen: prev.totalTimeOpen + timeOpen,
-          lastOpened: null
-        };
-      }
-      return prev;
-    });
-  }, []);
-
-  return { analytics, trackOpen, trackClose };
-};
-
-// Internal aliases for Pro component usage
-export const CollapsibleInternal = MoonUICollapsiblePro
-export const collapsibleTriggerVariantsInternal = collapsibleTriggerVariants
-export const CollapsibleTriggerInternal = MoonUICollapsibleTriggerPro
-export const collapsibleContentVariantsInternal = collapsibleContentVariants
-export const CollapsibleContentInternal = MoonUICollapsibleContentPro
-
-// Pro exports  
-export { 
-  MoonUICollapsiblePro, 
-  collapsibleTriggerVariants as MoonUIcollapsibleTriggerVariantsPro,
-  MoonUICollapsibleTriggerPro, 
-  collapsibleContentVariants as MoonUIcollapsibleContentVariantsPro,
-  MoonUICollapsibleContentPro 
-}
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { 
-  MoonUICollapsiblePro as Collapsible, 
-  collapsibleTriggerVariants,
-  MoonUICollapsibleTriggerPro as CollapsibleTrigger, 
-  collapsibleContentVariants,
-  MoonUICollapsibleContentPro as CollapsibleContent 
-}
-
-// Type exports
-export type {
-  MoonUICollapsibleProProps,
-  MoonUICollapsibleTriggerProProps,
-  MoonUICollapsibleContentProProps,
-  CollapsibleSize,
-  CollapsibleVariant,
-  AnimationMode,
-  BadgeVariant
-}