@moontra/moonui-pro 2.20.1 → 2.20.2

package/src/components/ui/tabs-pro.tsx

@@ -0,0 +1,542 @@
+"use client"
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import { motion, AnimatePresence, type Variants } from "framer-motion";
+import { X, Plus, ChevronLeft, ChevronRight, MoreHorizontal, Loader2 } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+// Animation variants
+const contentVariants: Record<string, Variants> = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  slide: {
+    initial: { x: 20, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: -20, opacity: 0 },
+  },
+  scale: {
+    initial: { scale: 0.95, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 1.05, opacity: 0 },
+  },
+  flip: {
+    initial: { rotateY: 90, opacity: 0 },
+    animate: { rotateY: 0, opacity: 1 },
+    exit: { rotateY: -90, opacity: 0 },
+  },
+  morph: {
+    initial: { scale: 0.8, opacity: 0, filter: "blur(10px)" },
+    animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
+    exit: { scale: 1.2, opacity: 0, filter: "blur(10px)" },
+  },
+};
+
+// Tab item type
+interface TabItem {
+  value: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  closeable?: boolean;
+  disabled?: boolean;
+  content?: React.ReactNode;
+  lazy?: boolean;
+  tooltip?: string;
+}
+
+// Pro Tabs Root
+interface MoonUITabsProProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'orientation'> {
+  /** Visual variant */
+  variant?: "default" | "pills" | "underline" | "cards" | "minimal" | "gradient" | "glassmorphism" | "neon";
+  /** Animation mode */
+  animationMode?: "fade" | "slide" | "scale" | "flip" | "morph" | "none";
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Allow closing tabs */
+  closeable?: boolean;
+  /** Allow adding tabs */
+  addable?: boolean;
+  /** Allow reordering tabs */
+  draggable?: boolean;
+  /** Persist state to localStorage */
+  persistKey?: string;
+  /** Sync with URL */
+  urlSync?: boolean;
+  /** Lazy load tab content */
+  lazy?: boolean;
+  /** Tab items for dynamic tabs */
+  items?: TabItem[];
+  /** Callback when tabs change */
+  onTabsChange?: (items: TabItem[]) => void;
+  /** Callback when tab is closed */
+  onTabClose?: (value: string) => void;
+  /** Callback when tab is added */
+  onTabAdd?: () => void;
+  /** Loading state */
+  loading?: boolean;
+  /** Swipeable on mobile */
+  swipeable?: boolean;
+  /** Show scroll buttons */
+  scrollable?: boolean;
+  /** Analytics callback */
+  onAnalytics?: (event: string, data: any) => void;
+  /** Tab validation before switching */
+  onBeforeChange?: (from: string, to: string) => boolean | Promise<boolean>;
+  /** Keyboard shortcuts */
+  shortcuts?: boolean;
+  /** Max tabs */
+  maxTabs?: number;
+  /** Tab groups */
+  groups?: Array<{ label: string; tabs: string[] }>;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const MoonUITabsPro = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  MoonUITabsProProps
+>(({
+  variant = "default",
+  animationMode = "fade",
+  orientation = "horizontal",
+  closeable = false,
+  addable = false,
+  draggable = false,
+  persistKey,
+  urlSync = false,
+  lazy = false,
+  items: initialItems = [],
+  onTabsChange,
+  onTabClose,
+  onTabAdd,
+  loading = false,
+  swipeable = false,
+  scrollable = false,
+  onAnalytics,
+  onBeforeChange,
+  shortcuts = false,
+  maxTabs,
+  groups,
+  className,
+  children,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  ...props
+}, ref) => {
+  const [items, setItems] = React.useState<TabItem[]>(initialItems);
+  const [localValue, setLocalValue] = React.useState(() => {
+    // Check persistence
+    if (persistKey && typeof window !== 'undefined') {
+      const stored = localStorage.getItem(`tabs-${persistKey}`);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return parsed.activeTab || defaultValue || items[0]?.value;
+      }
+    }
+    // Check URL
+    if (urlSync && typeof window !== 'undefined') {
+      const params = new URLSearchParams(window.location.search);
+      const tabParam = params.get('tab');
+      if (tabParam) return tabParam;
+    }
+    return defaultValue || items[0]?.value;
+  });
+
+  const [loadedTabs, setLoadedTabs] = React.useState<Set<string>>(new Set());
+  const [isChanging, setIsChanging] = React.useState(false);
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+
+  const value = controlledValue !== undefined ? controlledValue : localValue;
+
+  // Handle value change
+  const handleValueChange = React.useCallback(async (newValue: string) => {
+    if (loading || isChanging) return;
+
+    // Validation
+    if (onBeforeChange) {
+      setIsChanging(true);
+      const canChange = await onBeforeChange(value || '', newValue);
+      setIsChanging(false);
+      if (!canChange) return;
+    }
+
+    setLocalValue(newValue);
+    onValueChange?.(newValue);
+
+    // Track lazy loading
+    if (lazy && !loadedTabs.has(newValue)) {
+      setLoadedTabs(prev => new Set([...prev, newValue]));
+    }
+
+    // Analytics
+    onAnalytics?.('tab_switch', { from: value, to: newValue });
+
+    // Persistence
+    if (persistKey && typeof window !== 'undefined') {
+      localStorage.setItem(`tabs-${persistKey}`, JSON.stringify({
+        activeTab: newValue,
+        tabs: items
+      }));
+    }
+
+    // URL sync
+    if (urlSync && typeof window !== 'undefined') {
+      const params = new URLSearchParams(window.location.search);
+      params.set('tab', newValue);
+      window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
+    }
+  }, [value, loading, isChanging, onBeforeChange, onValueChange, lazy, loadedTabs, onAnalytics, persistKey, items, urlSync]);
+
+  // Handle tab close
+  const handleTabClose = React.useCallback((tabValue: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    
+    const newItems = items.filter(item => item.value !== tabValue);
+    setItems(newItems);
+    onTabsChange?.(newItems);
+    onTabClose?.(tabValue);
+    onAnalytics?.('tab_close', { value: tabValue });
+
+    // If closing active tab, switch to first available
+    if (value === tabValue && newItems.length > 0) {
+      handleValueChange(newItems[0].value);
+    }
+  }, [items, value, onTabsChange, onTabClose, onAnalytics, handleValueChange]);
+
+  // Handle tab add
+  const handleTabAdd = React.useCallback(() => {
+    if (maxTabs && items.length >= maxTabs) {
+      onAnalytics?.('tab_add_blocked', { reason: 'max_tabs' });
+      return;
+    }
+
+    onTabAdd?.();
+    onAnalytics?.('tab_add', { count: items.length + 1 });
+  }, [items.length, maxTabs, onTabAdd, onAnalytics]);
+
+  // Keyboard shortcuts
+  React.useEffect(() => {
+    if (!shortcuts) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl/Cmd + number to switch tabs
+      if ((e.metaKey || e.ctrlKey) && e.key >= '1' && e.key <= '9') {
+        e.preventDefault();
+        const index = parseInt(e.key) - 1;
+        if (items[index]) {
+          handleValueChange(items[index].value);
+        }
+      }
+      // Ctrl/Cmd + W to close current tab
+      if ((e.metaKey || e.ctrlKey) && e.key === 'w' && closeable) {
+        e.preventDefault();
+        const currentTab = items.find(item => item.value === value);
+        if (currentTab?.closeable !== false) {
+          handleTabClose(value || '', new MouseEvent('click') as any);
+        }
+      }
+      // Ctrl/Cmd + T to add new tab
+      if ((e.metaKey || e.ctrlKey) && e.key === 't' && addable) {
+        e.preventDefault();
+        handleTabAdd();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [shortcuts, items, value, closeable, addable, handleValueChange, handleTabClose, handleTabAdd]);
+
+  // Scroll buttons
+  const scrollLeft = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollBy({ left: -200, behavior: 'smooth' });
+    }
+  };
+
+  const scrollRight = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollBy({ left: 200, behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className={cn(
+      "relative w-full",
+      variant === "gradient" && "bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-1",
+      variant === "glassmorphism" && "backdrop-blur-xl bg-white/10 dark:bg-black/10 border border-white/20 dark:border-white/10 rounded-lg p-1",
+      variant === "neon" && "bg-black rounded-lg p-1 shadow-[0_0_20px_rgba(139,92,246,0.3)]",
+      className
+    )}>
+      {loading && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-lg">
+          <Loader2 className="h-6 w-6 animate-spin text-primary" />
+        </div>
+      )}
+
+      <TabsPrimitive.Root
+        ref={ref}
+        value={value}
+        onValueChange={handleValueChange}
+        orientation={orientation}
+        {...props}
+      >
+        {/* If items are provided, render items-based tabs */}
+        {items.length > 0 ? (
+          <>
+            <div className={cn(
+              "relative flex items-center",
+              orientation === "vertical" && "flex-col items-start"
+            )}>
+              {/* Scroll button left */}
+              {scrollable && orientation === "horizontal" && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 absolute left-0 z-10"
+                  onClick={scrollLeft}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+              )}
+
+              {/* Tabs List */}
+              <div
+                ref={scrollRef}
+                className={cn(
+                  "flex-1 overflow-x-auto scrollbar-hide",
+                  scrollable && orientation === "horizontal" && "mx-10"
+                )}
+              >
+                <TabsPrimitive.List
+                  className={cn(
+                    "flex items-center gap-1",
+                    orientation === "vertical" && "flex-col items-start w-full",
+                    variant === "underline" && "border-b border-border"
+                  )}
+                >
+                  {items.map((item, index) => (
+                    <motion.div
+                      key={item.value}
+                      layout
+                      drag={draggable ? orientation === "horizontal" ? "x" : "y" : false}
+                      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
+                      dragElastic={0.2}
+                      whileDrag={{ scale: 1.05, zIndex: 50 }}
+                      className="relative"
+                    >
+                      <TabsPrimitive.Trigger
+                        value={item.value}
+                        disabled={item.disabled}
+                        className={cn(
+                          "relative inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                          // Variant styles
+                          variant === "default" && "data-[state=active]:bg-background data-[state=active]:shadow-sm",
+                          variant === "pills" && "rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                          variant === "underline" && "rounded-none border-b-2 border-transparent data-[state=active]:border-primary",
+                          variant === "cards" && "bg-muted/50 data-[state=active]:bg-background data-[state=active]:shadow-md",
+                          variant === "minimal" && "hover:bg-muted/50 data-[state=active]:bg-transparent data-[state=active]:underline",
+                          variant === "gradient" && "data-[state=active]:bg-gradient-to-r data-[state=active]:from-primary data-[state=active]:to-secondary data-[state=active]:text-white",
+                          variant === "glassmorphism" && "backdrop-blur-md data-[state=active]:bg-white/20 dark:data-[state=active]:bg-white/10",
+                          variant === "neon" && "text-purple-400 data-[state=active]:text-white data-[state=active]:shadow-[0_0_10px_rgba(139,92,246,0.8)]",
+                          orientation === "vertical" && "w-full justify-start"
+                        )}
+                      >
+                        {item.icon && <span className="mr-2">{item.icon}</span>}
+                        {item.label}
+                        {item.badge && <span className="ml-2">{item.badge}</span>}
+                        {closeable && item.closeable !== false && (
+                          <button
+                            onClick={(e) => handleTabClose(item.value, e)}
+                            className="ml-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        )}
+                      </TabsPrimitive.Trigger>
+
+                      {/* Active indicator animation */}
+                      {value === item.value && animationMode !== "none" && (
+                        <motion.div
+                          layoutId="active-tab"
+                          className={cn(
+                            "absolute inset-0 -z-10",
+                            variant === "default" && "bg-background shadow-sm rounded-md",
+                            variant === "pills" && "bg-primary rounded-full",
+                            variant === "underline" && "bottom-0 h-0.5 bg-primary"
+                          )}
+                          transition={{
+                            type: "spring",
+                            stiffness: 500,
+                            damping: 30
+                          }}
+                        />
+                      )}
+                    </motion.div>
+                  ))}
+
+                  {/* Add tab button */}
+                  {addable && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleTabAdd}
+                      className="h-8 w-8 p-0 ml-2"
+                      disabled={maxTabs ? items.length >= maxTabs : false}
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  )}
+                </TabsPrimitive.List>
+              </div>
+
+              {/* Scroll button right */}
+              {scrollable && orientation === "horizontal" && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 absolute right-0 z-10"
+                  onClick={scrollRight}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              )}
+
+              {/* Overflow menu for hidden tabs */}
+              {items.length > 5 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 ml-2">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    {items.slice(5).map(item => (
+                      <DropdownMenuItem
+                        key={item.value}
+                        onClick={() => handleValueChange(item.value)}
+                      >
+                        {item.icon && <span className="mr-2">{item.icon}</span>}
+                        {item.label}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+
+            {/* Tab contents with animations */}
+            {animationMode !== "none" ? (
+              <AnimatePresence mode="wait">
+                {items.map(item => {
+                  if (value !== item.value) return null;
+                  
+                  return (
+                    <TabsPrimitive.Content
+                      key={item.value}
+                      value={item.value}
+                      forceMount
+                      className="mt-4 focus-visible:outline-none"
+                    >
+                      <motion.div
+                        initial="initial"
+                        animate="animate"
+                        exit="exit"
+                        variants={contentVariants[animationMode]}
+                        transition={{ duration: 0.3 }}
+                      >
+                        {item.content || children}
+                      </motion.div>
+                    </TabsPrimitive.Content>
+                  );
+                })}
+              </AnimatePresence>
+            ) : (
+              items.map(item => (
+                <TabsPrimitive.Content
+                  key={item.value}
+                  value={item.value}
+                  className="mt-4 focus-visible:outline-none"
+                >
+                  {item.content || children}
+                </TabsPrimitive.Content>
+              ))
+            )}
+          </>
+        ) : (
+          /* Otherwise, render children-based tabs */
+          children
+        )}
+      </TabsPrimitive.Root>
+    </div>
+  );
+});
+
+MoonUITabsPro.displayName = "MoonUITabsPro";
+
+// Additional Pro Tab Components
+const MoonUITabsListPro = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+MoonUITabsListPro.displayName = "MoonUITabsListPro";
+
+const MoonUITabsTriggerPro = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+MoonUITabsTriggerPro.displayName = "MoonUITabsTriggerPro";
+
+const MoonUITabsContentPro = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+MoonUITabsContentPro.displayName = "MoonUITabsContentPro";
+
+export { 
+  MoonUITabsPro, 
+  MoonUITabsListPro,
+  MoonUITabsTriggerPro,
+  MoonUITabsContentPro,
+  type TabItem, 
+  type MoonUITabsProProps 
+};