@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/components/ui/accordion.tsx

@@ -1,581 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown, Loader2, Hash, ExternalLink, Search, Play, Pause } from "lucide-react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-// Type definitions
-type AccordionSize = "sm" | "md" | "lg";
-type AccordionVariant = "default" | "bordered" | "elevated" | "gradient" | "glassmorphism";
-type AnimationMode = "spring" | "smooth" | "fade" | "bounce";
-
-// CVA definitions for variant styles
-const accordionItemVariants = cva(
-  "group relative overflow-visible transition-all duration-300 ease-out",
-  {
-    variants: {
-      variant: {
-        default: "border-b border-border/40 dark:border-border/30 mt-1",
-        bordered: "border border-border/60 rounded-lg mb-2 mt-3 dark:border-border/40",
-        elevated: "border border-border/40 rounded-lg mb-3 mt-3 shadow-lg hover:shadow-xl dark:border-border/30 dark:shadow-gray-900/20",
-        gradient: "border-0 rounded-lg mb-3 mt-3 bg-gradient-to-r from-primary/5 via-accent/5 to-secondary/5 dark:from-primary/10 dark:via-accent/10 dark:to-secondary/10",
-        glassmorphism: "border border-white/20 rounded-lg mb-3 mt-3 backdrop-blur-md bg-white/10 dark:bg-black/10 dark:border-white/10"
-      },
-      size: {
-        sm: "text-sm",
-        md: "text-base", 
-        lg: "text-lg"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
-  }
-)
-
-const accordionTriggerVariants = cva(
-  "flex flex-1 items-center gap-3 font-medium transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group",
-  {
-    variants: {
-      variant: {
-        default: "hover:text-primary dark:hover:text-primary/90",
-        bordered: "hover:text-primary hover:bg-primary/5 dark:hover:text-primary/90 dark:hover:bg-primary/10",
-        elevated: "hover:text-primary hover:bg-primary/5 dark:hover:text-primary/90 dark:hover:bg-primary/10",
-        gradient: "hover:text-primary",
-        glassmorphism: "hover:text-primary hover:bg-white/10 dark:hover:bg-white/5"
-      },
-      size: {
-        sm: "py-3 px-4 min-h-[3rem]",
-        md: "py-4 px-5 min-h-[3.5rem]",
-        lg: "py-5 px-6 min-h-[4rem]"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
-  }
-)
-
-// Root Accordion component
-interface MoonUIAccordionProBaseProps {
-  /** Accordion size */
-  size?: AccordionSize;
-  /** Accordion visual variant */
-  variant?: AccordionVariant;
-  /** Animation mode */
-  animationMode?: AnimationMode;
-  /** Auto-expand based on URL hash */
-  autoExpandFromHash?: boolean;
-  /** Search term highlighting */
-  searchTerm?: string;
-  /** Analytics tracking callback */
-  onItemToggle?: (itemId: string, isOpen: boolean) => void;
-  /** Additional className */
-  className?: string;
-  /** Children elements */
-  children?: React.ReactNode;
-  /** Disabled state */
-  disabled?: boolean;
-  /** HTML dir attribute */
-  dir?: "ltr" | "rtl";
-  /** Orientation */
-  orientation?: "vertical" | "horizontal";
-}
-
-interface MoonUIAccordionProSingleProps extends MoonUIAccordionProBaseProps {
-  type: "single";
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  collapsible?: boolean;
-}
-
-interface MoonUIAccordionProMultipleProps extends MoonUIAccordionProBaseProps {
-  type: "multiple";
-  value?: string[];
-  defaultValue?: string[];
-  onValueChange?: (value: string[]) => void;
-}
-
-type MoonUIAccordionProProps = MoonUIAccordionProSingleProps | MoonUIAccordionProMultipleProps;
-
-const MoonUIAccordionPro = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Root>,
-  MoonUIAccordionProProps
->((props, ref) => {
-  const {
-    className, 
-    size = "md", 
-    variant = "default", 
-    animationMode = "smooth",
-    autoExpandFromHash = false,
-    searchTerm,
-    onItemToggle,
-    children,
-    type = "single",
-    value,
-    defaultValue,
-    onValueChange,
-    orientation,
-    disabled,
-    dir,
-    ...rest
-  } = props;
-  
-  const collapsible = props.type === "single" ? (props as MoonUIAccordionProSingleProps).collapsible ?? true : undefined;
-  // Auto-expand based on URL hash
-  React.useEffect(() => {
-    if (autoExpandFromHash && typeof window !== 'undefined') {
-      const hash = window.location.hash.replace('#', '');
-      if (hash) {
-        const element = document.getElementById(hash);
-        if (element) {
-          // Find and open accordion item
-          const accordionItem = element.closest('[data-accordion-item]');
-          if (accordionItem) {
-            const trigger = accordionItem.querySelector('[data-state]');
-            if (trigger && trigger.getAttribute('data-state') === 'closed') {
-              (trigger as HTMLElement).click();
-            }
-          }
-        }
-      }
-    }
-  }, [autoExpandFromHash]);
-
-  // Analytics wrapper function
-  const handleValueChange = React.useCallback((newValue: any) => {
-    // Track item toggle for analytics
-    if (onItemToggle && newValue) {
-      if (Array.isArray(newValue)) {
-        newValue.forEach((v: string) => onItemToggle(v, true));
-      } else {
-        onItemToggle(newValue, true);
-      }
-    }
-    // Call original onValueChange
-    onValueChange?.(newValue);
-  }, [onItemToggle, onValueChange]);
-
-  // Prepare AccordionPrimitive props
-  const accordionProps = type === "single" 
-    ? {
-        type: "single" as const,
-        value: value as string,
-        defaultValue: defaultValue as string,
-        onValueChange: handleValueChange,
-        collapsible
-      }
-    : {
-        type: "multiple" as const,
-        value: value as string[],
-        defaultValue: defaultValue as string[],
-        onValueChange: handleValueChange
-      };
-
-  return (
-    <AccordionPrimitive.Root
-      ref={ref}
-      {...accordionProps}
-      orientation={orientation}
-      disabled={disabled}
-      dir={dir}
-      className={cn(
-        "w-full",
-        // Styles based on animation modes
-        animationMode === "spring" && "[&_[data-state=open]]:animate-[accordion-down_0.3s_cubic-bezier(0.34,1.56,0.64,1)]",
-        animationMode === "bounce" && "[&_[data-state=open]]:animate-[accordion-down_0.4s_cubic-bezier(0.68,-0.55,0.265,1.55)]",
-        animationMode === "fade" && "[&_[data-state=open]]:animate-[accordion-down_0.2s_ease-in-out]",
-        className
-      )}
-      {...rest}
-    >
-      {/* Provide search term context */}
-      <AccordionContext.Provider value={{ size, variant, animationMode, searchTerm, onItemToggle }}>
-        {children}
-      </AccordionContext.Provider>
-    </AccordionPrimitive.Root>
-  )
-})
-MoonUIAccordionPro.displayName = "MoonUIAccordionPro"
-
-// Context definition
-const AccordionContext = React.createContext<{
-  size?: AccordionSize;
-  variant?: AccordionVariant;
-  animationMode?: AnimationMode;
-  searchTerm?: string;
-  onItemToggle?: (itemId: string, isOpen: boolean) => void;
-}>({});
-
-// Accordion Item component
-interface MoonUIAccordionItemProProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
-  /** Loading state */
-  loading?: boolean;
-  /** Progress percentage (0-100) */
-  progress?: number;
-  /** Badge content */
-  badge?: React.ReactNode;
-  /** Badge variant */
-  badgeVariant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
-  /** Completion status */
-  completed?: boolean;
-  /** Lazy loading - load content only when opened */
-  lazy?: boolean;
-}
-
-const MoonUIAccordionItemPro = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  MoonUIAccordionItemProProps
->(({ className, loading, progress, badge, badgeVariant = "default", completed, lazy, children, ...props }, ref) => {
-  const { size, variant, onItemToggle } = React.useContext(AccordionContext);
-  const [hasBeenOpened, setHasBeenOpened] = React.useState(!lazy);
-  
-  // Progress ring calculation
-  const progressOffset = progress ? 188.4 - (188.4 * progress) / 100 : 188.4;
-
-  // Listen for accordion open/close
-  React.useEffect(() => {
-    if (lazy && !hasBeenOpened) {
-      const item = document.querySelector(`[data-state="open"][value="${props.value}"]`);
-      if (item) {
-        setHasBeenOpened(true);
-      }
-    }
-  }, [lazy, hasBeenOpened, props.value]);
-
-  return (
-    <AccordionPrimitive.Item
-      ref={ref}
-      data-accordion-item
-      className={cn(
-        accordionItemVariants({ variant, size }),
-        loading && "opacity-60 pointer-events-none",
-        completed && "border-success/40 bg-success/5 dark:border-success/30 dark:bg-success/10",
-        className
-      )}
-      {...props}
-    >
-      {/* Progress indicator */}
-      {progress !== undefined && (
-        <div className="absolute top-2 right-2 w-6 h-6">
-          <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-50">
-          <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 dark:bg-green-600",
-            badgeVariant === "warning" && "bg-amber-500 text-white dark:bg-amber-600",
-            badgeVariant === "danger" && "bg-red-500 text-white dark:bg-red-600"
-          )}>
-            {badge}
-          </div>
-        </div>
-      )}
-
-      {/* Completion indicator */}
-      {completed && (
-        <div className="absolute top-3 right-3 w-5 h-5 bg-success text-success-foreground rounded-full flex items-center justify-center">
-          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-          </svg>
-        </div>
-      )}
-
-      {/* Loading spinner */}
-      {loading && (
-        <div className="absolute top-1/2 right-4 -translate-y-1/2">
-          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-        </div>
-      )}
-
-      {lazy && !hasBeenOpened ? (
-        <div className="p-4 text-muted-foreground">
-          <Play className="h-4 w-4 inline mr-2" />
-          Click to load content...
-        </div>
-      ) : (
-        children
-      )}
-    </AccordionPrimitive.Item>
-  )
-})
-MoonUIAccordionItemPro.displayName = "MoonUIAccordionItemPro"
-
-// Accordion Trigger component
-interface MoonUIAccordionTriggerProProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
-  /** Icon to show on the left */
-  leftIcon?: React.ReactNode;
-  /** Icon to show on the right (excluding chevron) */
-  rightIcon?: React.ReactNode;
-  /** Subtitle / description */
-  description?: string;
-  /** Keyboard shortcut */
-  shortcut?: string;
-  /** External link indicator */
-  external?: boolean;
-  /** Custom chevron icon */
-  customChevron?: React.ReactNode;
-  /** Hide chevron */
-  hideChevron?: boolean;
-}
-
-const MoonUIAccordionTriggerPro = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  MoonUIAccordionTriggerProProps
->(({ 
-  className, 
-  children, 
-  leftIcon, 
-  rightIcon, 
-  description, 
-  shortcut, 
-  external,
-  customChevron,
-  hideChevron,
-  ...props 
-}, ref) => {
-  const { size, variant, searchTerm } = React.useContext(AccordionContext);
-
-  // Text highlighting function
-  const highlightText = (text: string, searchTerm?: string) => {
-    if (!searchTerm || typeof text !== 'string') return text;
-    
-    const regex = new RegExp(`(${searchTerm})`, 'gi');
-    const parts = text.split(regex);
-    
-    return parts.map((part, index) => 
-      part.toLowerCase() === searchTerm.toLowerCase() ? (
-        <mark key={index} className="bg-yellow-200 dark:bg-yellow-800 text-foreground px-0.5 rounded">
-          {part}
-        </mark>
-      ) : (
-        part
-      )
-    );
-  };
-
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        ref={ref}
-        className={cn(
-          accordionTriggerVariants({ variant, size }),
-          "[&[data-state=open]>.chevron]:rotate-180",
-          "[&[data-state=open]]:text-primary dark:[&[data-state=open]]:text-primary/90",
-          className
-        )}
-        {...props}
-      >
-        {/* Left icon */}
-        {leftIcon && (
-          <span className="text-muted-foreground group-hover:text-primary transition-colors">
-            {leftIcon}
-          </span>
-        )}
-
-        {/* Main content */}
-        <div className="flex-1 text-left">
-          <div className="flex items-center gap-2">
-            {/* Main title */}
-            <span className="font-medium">
-              {typeof children === 'string' ? highlightText(children, searchTerm) : 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">
-              {typeof description === 'string' ? highlightText(description, searchTerm) : description}
-            </div>
-          )}
-        </div>
-
-        {/* Right side - icons and shortcut */}
-        <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 group-hover:text-primary transition-colors">
-              {rightIcon}
-            </span>
-          )}
-          
-          {/* Chevron */}
-          {!hideChevron && (
-            <span className="chevron transition-transform duration-200 text-muted-foreground">
-              {customChevron || <ChevronDown className="h-4 w-4" />}
-            </span>
-          )}
-        </div>
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-})
-MoonUIAccordionTriggerPro.displayName = "MoonUIAccordionTriggerPro"
-
-// Accordion Content component
-interface MoonUIAccordionContentProProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
-  /** Content loading state */
-  contentLoading?: boolean;
-  /** Dynamic content loading function */
-  loadContent?: () => Promise<React.ReactNode>;
-  /** Remove padding */
-  noPadding?: boolean;
-}
-
-const MoonUIAccordionContentPro = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  MoonUIAccordionContentProProps
->(({ className, children, contentLoading, loadContent, noPadding, ...props }, ref) => {
-  const { size, variant, animationMode } = React.useContext(AccordionContext);
-  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]);
-
-  return (
-    <AccordionPrimitive.Content
-      ref={ref}
-      className={cn(
-        "overflow-hidden transition-all",
-        "text-muted-foreground",
-        // Animation modes
-        animationMode === "spring" && "data-[state=closed]:animate-[accordion-up_0.3s_cubic-bezier(0.34,1.56,0.64,1)] data-[state=open]:animate-[accordion-down_0.3s_cubic-bezier(0.34,1.56,0.64,1)]",
-        animationMode === "bounce" && "data-[state=closed]:animate-[accordion-up_0.4s_cubic-bezier(0.68,-0.55,0.265,1.55)] data-[state=open]:animate-[accordion-down_0.4s_cubic-bezier(0.68,-0.55,0.265,1.55)]",
-        animationMode === "fade" && "data-[state=closed]:animate-[accordion-up_0.2s_ease-in-out] data-[state=open]:animate-[accordion-down_0.2s_ease-in-out]",
-        animationMode === "smooth" && "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-        className
-      )}
-      {...props}
-    >
-      <div className={cn(
-        !noPadding && size === "sm" && "px-4 pb-3",
-        !noPadding && size === "md" && "px-5 pb-4",
-        !noPadding && size === "lg" && "px-6 pb-5",
-        // Variant-based background colors
-        variant === "elevated" && "bg-muted/20",
-        variant === "glassmorphism" && "bg-white/5 dark:bg-black/5"
-      )}>
-        {(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>
-    </AccordionPrimitive.Content>
-  )
-})
-MoonUIAccordionContentPro.displayName = "MoonUIAccordionContentPro"
-
-// Hooks
-export const useAccordionAnalytics = () => {
-  const [analytics, setAnalytics] = React.useState<Record<string, { openCount: number, lastOpened: Date }>>({});
-
-  const trackItemOpen = React.useCallback((itemId: string) => {
-    setAnalytics(prev => ({
-      ...prev,
-      [itemId]: {
-        openCount: (prev[itemId]?.openCount || 0) + 1,
-        lastOpened: new Date()
-      }
-    }));
-  }, []);
-
-  return { analytics, trackItemOpen };
-};
-
-// Internal aliases for Pro component usage
-export const AccordionInternal = MoonUIAccordionPro
-export const AccordionItemInternal = MoonUIAccordionItemPro  
-export const AccordionTriggerInternal = MoonUIAccordionTriggerPro
-export const AccordionContentInternal = MoonUIAccordionContentPro
-
-// Pro exports
-export { 
-  MoonUIAccordionPro, 
-  MoonUIAccordionItemPro, 
-  MoonUIAccordionTriggerPro, 
-  MoonUIAccordionContentPro 
-}
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { 
-  MoonUIAccordionPro as Accordion, 
-  MoonUIAccordionItemPro as AccordionItem, 
-  MoonUIAccordionTriggerPro as AccordionTrigger, 
-  MoonUIAccordionContentPro as AccordionContent 
-}
-
-// Type exports
-export type { 
-  AccordionSize, 
-  AccordionVariant, 
-  AnimationMode,
-  MoonUIAccordionProProps,
-  MoonUIAccordionProBaseProps,
-  MoonUIAccordionProSingleProps,
-  MoonUIAccordionProMultipleProps,
-  MoonUIAccordionItemProProps,
-  MoonUIAccordionTriggerProProps,
-  MoonUIAccordionContentProProps
-}