@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/ui/collapsible.tsx

@@ -3,56 +3,371 @@
 import * as React from "react"
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 import { cva, type VariantProps } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import { 
+  ChevronDown, 
+  ChevronRight,
+  ChevronUp,
+  Loader2, 
+  ExternalLink, 
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
+  Info,
+  Clock,
+  Hash
+} from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
 /**
- * Collapsible (Daraltılabilir) Bileşeni
+ * MoonUICollapsiblePro - Advanced Collapsible Component
  * 
- * İçeriği genişletilip daraltılabilen hafif bir bileşendir.
- * Tema sistemiyle tam entegre, erişilebilir ve özelleştirilebilir.
+ * 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
  */
 
-const MoonUICollapsiblePro = CollapsiblePrimitive.Root
+// 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";
 
-const MoonUIcollapsibleTriggerVariantsPro = cva(
-  "flex w-full items-center justify-between transition-all",
+// 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",
-        ghost: "text-foreground hover:bg-accent/10 rounded",
-        outline: "text-foreground border border-border rounded-t-md hover:bg-accent/5",
+        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: {
-        sm: "text-xs py-2 px-3",
-        default: "text-sm py-3 px-4",
-        md: "text-base py-4 px-4",
-        lg: "text-lg py-5 px-5",
+        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: "default",
+      size: "md",
     },
   }
 )
 
-interface CollapsibleTriggerProps 
+interface MoonUICollapsibleTriggerProProps 
   extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
-    VariantProps<typeof MoonUIcollapsibleTriggerVariantsPro> {}
+    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>,
-  CollapsibleTriggerProps
->(({ className, children, variant, size, asChild, ...props }, ref) => {
-  // asChild kullanıldığında otomatik ikon eklemeyi atla
+  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(MoonUIcollapsibleTriggerVariantsPro({ variant, size }), className)}
+        className={cn(collapsibleTriggerVariants({ variant: finalVariant, size: finalSize }), className)}
         asChild={asChild}
         {...props}
       >
@@ -64,72 +379,253 @@ const MoonUICollapsibleTriggerPro = React.forwardRef<
   return (
     <CollapsiblePrimitive.Trigger
       ref={ref}
-      className={cn(MoonUIcollapsibleTriggerVariantsPro({ variant, size }), className)}
+      className={cn(
+        collapsibleTriggerVariants({ variant: finalVariant, size: finalSize }),
+        "[&[data-state=open]>.chevron]:rotate-180",
+        "[&[data-state=open]]:text-primary",
+        className
+      )}
       {...props}
     >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 ml-auto transition-transform duration-200 [&[data-state=open]]:rotate-180" />
+      {/* 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 = CollapsiblePrimitive.Trigger.displayName
+MoonUICollapsibleTriggerPro.displayName = "MoonUICollapsibleTriggerPro"
 
-const MoonUIcollapsibleContentVariantsPro = cva(
-  "overflow-hidden transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
+// Enhanced Content component with animations
+const collapsibleContentVariants = cva(
+  "overflow-hidden transition-all",
   {
     variants: {
       variant: {
         default: "text-muted-foreground",
-        ghost: "text-muted-foreground rounded-b",
-        outline: "text-muted-foreground border border-t-0 border-border rounded-b-md",
+        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: {
-        sm: "text-xs",
-        default: "text-sm",
+        xs: "text-xs",
+        sm: "text-sm",
         md: "text-base",
         lg: "text-lg",
+        xl: "text-xl"
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 )
 
-interface CollapsibleContentProps 
+interface MoonUICollapsibleContentProProps 
   extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
-    VariantProps<typeof MoonUIcollapsibleContentVariantsPro> {}
+    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>,
-  CollapsibleContentProps
->(({ className, children, variant, size, ...props }, ref) => (
-  <CollapsiblePrimitive.Content
-    ref={ref}
-    className={cn(MoonUIcollapsibleContentVariantsPro({ variant, size }), className)}
-    {...props}
-  >
-    <div className="p-4">{children}</div>
-  </CollapsiblePrimitive.Content>
-))
-MoonUICollapsibleContentPro.displayName = CollapsiblePrimitive.Content.displayName
+  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 = MoonUIcollapsibleTriggerVariantsPro
+export const collapsibleTriggerVariantsInternal = collapsibleTriggerVariants
 export const CollapsibleTriggerInternal = MoonUICollapsibleTriggerPro
-export const collapsibleContentVariantsInternal = MoonUIcollapsibleContentVariantsPro
+export const collapsibleContentVariantsInternal = collapsibleContentVariants
 export const CollapsibleContentInternal = MoonUICollapsibleContentPro
 
 // Pro exports  
-export { MoonUICollapsiblePro, MoonUIcollapsibleTriggerVariantsPro, MoonUICollapsibleTriggerPro, MoonUIcollapsibleContentVariantsPro, MoonUICollapsibleContentPro }
+export { 
+  MoonUICollapsiblePro, 
+  collapsibleTriggerVariants as MoonUIcollapsibleTriggerVariantsPro,
+  MoonUICollapsibleTriggerPro, 
+  collapsibleContentVariants as MoonUIcollapsibleContentVariantsPro,
+  MoonUICollapsibleContentPro 
+}
 
 // Clean exports (without MoonUI prefix for easier usage)
-export { MoonUICollapsiblePro as Collapsible, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUICollapsibleContentPro as CollapsibleContent }
+export { 
+  MoonUICollapsiblePro as Collapsible, 
+  collapsibleTriggerVariants,
+  MoonUICollapsibleTriggerPro as CollapsibleTrigger, 
+  collapsibleContentVariants,
+  MoonUICollapsibleContentPro as CollapsibleContent 
+}
 
+// Type exports
 export type {
-  CollapsibleTriggerProps,
-  CollapsibleContentProps
+  MoonUICollapsibleProProps,
+  MoonUICollapsibleTriggerProProps,
+  MoonUICollapsibleContentProProps,
+  CollapsibleSize,
+  CollapsibleVariant,
+  AnimationMode,
+  BadgeVariant
 }