@moontra/moonui-pro 2.20.2 → 2.20.4

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

@@ -1,542 +0,0 @@
-"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 
-};

package/src/components/ui/tabs.tsx

@@ -1,54 +0,0 @@
-"use client"
-
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "../../lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = 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}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = 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}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = 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}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/textarea.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../../lib/utils"
-
-export interface MoonUITextareaProProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const MoonUITextareaPro = React.forwardRef<HTMLTextAreaElement, MoonUITextareaProProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-MoonUITextareaPro.displayName = "MoonUITextareaPro"
-
-export { MoonUITextareaPro  };
-
-// Backward compatibility exports
-export { MoonUITextareaPro as Textarea }