@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/ui/accordion.tsx

@@ -2,72 +2,580 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import { ChevronDown, Loader2, Hash, ExternalLink, Search, Play, Pause } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
-const MoonUIAccordionPro = AccordionPrimitive.Root
+// 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>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b border-gray-200 dark:border-gray-800", className)}
-    {...props}
-  />
-))
-MoonUIAccordionItemPro.displayName = "MoonUIAccordionItemPro"
+  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;
 
-const MoonUIAccordionTriggerPro = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
+  // 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(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all dark:text-gray-100",
-        "hover:underline hover:text-primary dark:hover:text-primary-400",
-        "[&[data-state=open]>svg]:rotate-180",
+        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}
     >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 opacity-70 group-hover:opacity-100" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
+      {/* 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>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm text-gray-700 dark:text-gray-300 transition-all", 
-      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
-    {...props}
-  >
-    <div className="pb-4 pt-0">{children}</div>
-  </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 AccordionItemInternal = MoonUIAccordionItemPro  
 export const AccordionTriggerInternal = MoonUIAccordionTriggerPro
 export const AccordionContentInternal = MoonUIAccordionContentPro
 
 // Pro exports
-export { MoonUIAccordionPro, MoonUIAccordionItemPro, MoonUIAccordionTriggerPro, MoonUIAccordionContentPro }
+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 }
+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
+}

package/src/components/ui/avatar.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva, type VariantProps } from "class-variance-authority";

package/src/components/ui/badge.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";

package/src/components/ui/breadcrumb.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";