@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/timeline/index.tsx

@@ -0,0 +1,333 @@
+"use client"
+
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Badge } from '../ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Button } from '../ui/button'
+import { 
+  Clock, 
+  CheckCircle2, 
+  AlertCircle, 
+  XCircle,
+  Circle,
+  Calendar,
+  User,
+  MessageCircle,
+  Paperclip,
+  ExternalLink,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '@moontra/moonui'
+
+export interface TimelineEvent {
+  id: string
+  title: string
+  description?: string
+  date: Date
+  type: 'success' | 'warning' | 'error' | 'info' | 'pending'
+  user?: {
+    name: string
+    avatar?: string
+    email?: string
+  }
+  metadata?: {
+    location?: string
+    duration?: string
+    tags?: string[]
+    attachments?: number
+    comments?: number
+    externalLink?: string
+  }
+  icon?: React.ReactNode
+  color?: string
+}
+
+export interface TimelineProps {
+  events: TimelineEvent[]
+  onEventClick?: (event: TimelineEvent) => void
+  className?: string
+  showUserInfo?: boolean
+  showMetadata?: boolean
+  showRelativeTime?: boolean
+  groupByDate?: boolean
+  orientation?: 'vertical' | 'horizontal'
+  compact?: boolean
+  interactive?: boolean
+}
+
+const EVENT_COLORS = {
+  success: 'bg-green-500 border-green-500',
+  warning: 'bg-yellow-500 border-yellow-500',
+  error: 'bg-red-500 border-red-500',
+  info: 'bg-blue-500 border-blue-500',
+  pending: 'bg-gray-400 border-gray-400'
+}
+
+const EVENT_ICONS = {
+  success: <CheckCircle2 className="h-4 w-4 text-white" />,
+  warning: <AlertCircle className="h-4 w-4 text-white" />,
+  error: <XCircle className="h-4 w-4 text-white" />,
+  info: <Circle className="h-4 w-4 text-white" />,
+  pending: <Clock className="h-4 w-4 text-white" />
+}
+
+const EVENT_TEXT_COLORS = {
+  success: 'text-green-700',
+  warning: 'text-yellow-700',
+  error: 'text-red-700',
+  info: 'text-blue-700',
+  pending: 'text-gray-700'
+}
+
+export function Timeline({
+  events,
+  onEventClick,
+  className,
+  showUserInfo = true,
+  showMetadata = true,
+  showRelativeTime = true,
+  groupByDate = false,
+  orientation = 'vertical',
+  compact = false,
+  interactive = true
+}: TimelineProps) {
+  const sortedEvents = [...events].sort((a, b) => b.date.getTime() - a.date.getTime())
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  }
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    })
+  }
+
+  const getRelativeTime = (date: Date) => {
+    const now = new Date()
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+    
+    if (diffInSeconds < 60) {
+      return 'Just now'
+    } else if (diffInSeconds < 3600) {
+      const minutes = Math.floor(diffInSeconds / 60)
+      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+    } else if (diffInSeconds < 86400) {
+      const hours = Math.floor(diffInSeconds / 3600)
+      return `${hours} hour${hours > 1 ? 's' : ''} ago`
+    } else if (diffInSeconds < 2592000) {
+      const days = Math.floor(diffInSeconds / 86400)
+      return `${days} day${days > 1 ? 's' : ''} ago`
+    } else {
+      return formatDate(date)
+    }
+  }
+
+  const getInitials = (name: string) => {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase()
+  }
+
+  const groupEventsByDate = (events: TimelineEvent[]) => {
+    const groups: { [key: string]: TimelineEvent[] } = {}
+    
+    events.forEach(event => {
+      const dateKey = formatDate(event.date)
+      if (!groups[dateKey]) {
+        groups[dateKey] = []
+      }
+      groups[dateKey].push(event)
+    })
+    
+    return groups
+  }
+
+  const handleEventClick = (event: TimelineEvent) => {
+    if (interactive && onEventClick) {
+      onEventClick(event)
+    }
+  }
+
+  const renderEvent = (event: TimelineEvent, index: number, isLast: boolean) => {
+    const eventColor = event.color || EVENT_COLORS[event.type]
+    const eventIcon = event.icon || EVENT_ICONS[event.type]
+    const textColor = EVENT_TEXT_COLORS[event.type]
+
+    return (
+      <div
+        key={event.id}
+        className={cn(
+          "relative flex gap-4",
+          compact ? "pb-4" : "pb-8",
+          interactive && "cursor-pointer hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
+        )}
+        onClick={() => handleEventClick(event)}
+      >
+        {/* Timeline Line */}
+        {orientation === 'vertical' && (
+          <div className="flex flex-col items-center">
+            <div className={cn(
+              "flex items-center justify-center w-8 h-8 rounded-full border-2 bg-background",
+              eventColor
+            )}>
+              {eventIcon}
+            </div>
+            {!isLast && (
+              <div className="w-0.5 h-full bg-border mt-2" />
+            )}
+          </div>
+        )}
+
+        {/* Event Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1">
+              <h4 className={cn(
+                "font-medium text-sm",
+                compact ? "mb-1" : "mb-2"
+              )}>
+                {event.title}
+              </h4>
+              {event.description && (
+                <p className={cn(
+                  "text-muted-foreground text-sm",
+                  compact ? "mb-1" : "mb-2"
+                )}>
+                  {event.description}
+                </p>
+              )}
+            </div>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              {showRelativeTime ? (
+                <span>{getRelativeTime(event.date)}</span>
+              ) : (
+                <span>{formatTime(event.date)}</span>
+              )}
+              <Badge variant="outline" className={cn("text-xs", textColor)}>
+                {event.type}
+              </Badge>
+            </div>
+          </div>
+
+          {/* User Info */}
+          {showUserInfo && event.user && (
+            <div className="flex items-center gap-2 mb-2">
+              <Avatar className="h-6 w-6">
+                <AvatarImage src={event.user.avatar} />
+                <AvatarFallback className="text-xs">
+                  {getInitials(event.user.name)}
+                </AvatarFallback>
+              </Avatar>
+              <span className="text-sm text-muted-foreground">
+                {event.user.name}
+              </span>
+            </div>
+          )}
+
+          {/* Metadata */}
+          {showMetadata && event.metadata && (
+            <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+              {event.metadata.duration && (
+                <div className="flex items-center gap-1">
+                  <Clock className="h-3 w-3" />
+                  <span>{event.metadata.duration}</span>
+                </div>
+              )}
+              {event.metadata.location && (
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-3 w-3" />
+                  <span>{event.metadata.location}</span>
+                </div>
+              )}
+              {event.metadata.comments && event.metadata.comments > 0 && (
+                <div className="flex items-center gap-1">
+                  <MessageCircle className="h-3 w-3" />
+                  <span>{event.metadata.comments}</span>
+                </div>
+              )}
+              {event.metadata.attachments && event.metadata.attachments > 0 && (
+                <div className="flex items-center gap-1">
+                  <Paperclip className="h-3 w-3" />
+                  <span>{event.metadata.attachments}</span>
+                </div>
+              )}
+              {event.metadata.externalLink && (
+                <div className="flex items-center gap-1">
+                  <ExternalLink className="h-3 w-3" />
+                  <span>View details</span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Tags */}
+          {event.metadata?.tags && event.metadata.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-2">
+              {event.metadata.tags.map((tag, tagIndex) => (
+                <Badge key={tagIndex} variant="secondary" className="text-xs">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const renderGroupedEvents = () => {
+    const groups = groupEventsByDate(sortedEvents)
+    
+    return Object.entries(groups).map(([date, events], groupIndex) => (
+      <div key={date} className="mb-8">
+        <div className="sticky top-0 bg-background/80 backdrop-blur-sm border-b p-2 mb-4">
+          <h3 className="font-medium text-sm text-muted-foreground">{date}</h3>
+        </div>
+        {events.map((event, index) => renderEvent(event, index, index === events.length - 1))}
+      </div>
+    ))
+  }
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Clock className="h-5 w-5" />
+          Timeline
+        </CardTitle>
+        <CardDescription>
+          {sortedEvents.length} event{sortedEvents.length !== 1 ? 's' : ''} tracked
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {sortedEvents.length > 0 ? (
+          <div className={cn(
+            "space-y-0",
+            orientation === 'horizontal' && "flex overflow-x-auto gap-6"
+          )}>
+            {groupByDate 
+              ? renderGroupedEvents()
+              : sortedEvents.map((event, index) => 
+                  renderEvent(event, index, index === sortedEvents.length - 1)
+                )
+            }
+          </div>
+        ) : (
+          <div className="text-center py-8">
+            <Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+            <p className="text-muted-foreground">No events to display</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default Timeline

package/src/components/ui/animated-button.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import * as React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Check, X, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const animatedButtonVariants = cva(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface AnimatedButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof animatedButtonVariants> {
+  state?: "idle" | "loading" | "success" | "error";
+  loadingText?: string;
+  successText?: string;
+  errorText?: string;
+}
+
+const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      state = "idle",
+      loadingText = "Loading...",
+      successText = "Success!",
+      errorText = "Error!",
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [buttonWidth, setButtonWidth] = React.useState<number | "auto">("auto");
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+    React.useEffect(() => {
+      if (buttonRef.current && state === "idle") {
+        setButtonWidth(buttonRef.current.offsetWidth);
+      }
+    }, [state, children]);
+
+    const isDisabled = disabled || state !== "idle";
+
+    const contentVariants = {
+      idle: { opacity: 1, y: 0 },
+      loading: { opacity: 0, y: 10 },
+      success: { opacity: 0, y: 10 },
+      error: { opacity: 0, y: 10 },
+    };
+
+    const iconVariants = {
+      hidden: { opacity: 0, scale: 0.8, y: -10 },
+      visible: { opacity: 1, scale: 1, y: 0 },
+    };
+
+    return (
+      <motion.button
+        ref={(el) => {
+          buttonRef.current = el;
+          if (ref) {
+            if (typeof ref === "function") ref(el);
+            else ref.current = el;
+          }
+        }}
+        className={cn(animatedButtonVariants({ variant, size, className }))}
+        disabled={isDisabled}
+        animate={{
+          width: state !== "idle" ? buttonWidth : "auto",
+        }}
+        transition={{ duration: 0.2 }}
+        {...props}
+      >
+        <AnimatePresence mode="wait">
+          {state === "idle" && (
+            <motion.span
+              key="idle"
+              variants={contentVariants}
+              initial="loading"
+              animate="idle"
+              exit="loading"
+              transition={{ duration: 0.2 }}
+              className="inline-flex items-center"
+            >
+              {children}
+            </motion.span>
+          )}
+
+          {state === "loading" && (
+            <motion.span
+              key="loading"
+              className="inline-flex items-center gap-2"
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.2 }}
+            >
+              <Loader2 className="h-4 w-4 animate-spin" />
+              {loadingText}
+            </motion.span>
+          )}
+
+          {state === "success" && (
+            <motion.span
+              key="success"
+              className="inline-flex items-center gap-2"
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.2 }}
+            >
+              <motion.div
+                variants={iconVariants}
+                initial="hidden"
+                animate="visible"
+                transition={{ duration: 0.3, delay: 0.1 }}
+              >
+                <Check className="h-4 w-4" />
+              </motion.div>
+              {successText}
+            </motion.span>
+          )}
+
+          {state === "error" && (
+            <motion.span
+              key="error"
+              className="inline-flex items-center gap-2"
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.2 }}
+            >
+              <motion.div
+                variants={iconVariants}
+                initial="hidden"
+                animate="visible"
+                transition={{ duration: 0.3, delay: 0.1 }}
+                animate={{
+                  x: [0, -2, 2, -2, 2, 0],
+                }}
+                transition={{
+                  duration: 0.4,
+                  delay: 0.1,
+                }}
+              >
+                <X className="h-4 w-4" />
+              </motion.div>
+              {errorText}
+            </motion.span>
+          )}
+        </AnimatePresence>
+      </motion.button>
+    );
+  }
+);
+
+AnimatedButton.displayName = "AnimatedButton";
+
+export { AnimatedButton, animatedButtonVariants };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden",
+  {
+    variants: {
+      size: {
+        default: "h-10 w-10",
+        xs: "h-6 w-6",
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16",
+        "2xl": "h-20 w-20",
+      },
+      radius: {
+        default: "rounded-full",
+        sm: "rounded-md",
+        lg: "rounded-xl",
+        full: "rounded-full",
+        none: "rounded-none",
+      },
+      variant: {
+        default: "",
+        ring: "ring-2 ring-gray-300 dark:ring-gray-600",
+        ringOffset: "ring-2 ring-gray-300 dark:ring-gray-600 ring-offset-2 ring-offset-background dark:ring-offset-gray-950",
+        border: "border-2 border-gray-200 dark:border-gray-800"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      radius: "default",
+      variant: "default"
+    },
+  }
+);
+
+export interface AvatarProps 
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarVariants> {}
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size, radius, variant, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(avatarVariants({ size, radius, variant }), className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// Avatar Group Component for displaying multiple avatars
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  limit?: number;
+  avatars: React.ReactNode[];
+  overlapOffset?: number;
+}
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
+    const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
+    const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center", className)}
+        {...props}
+      >
+        <div className="flex">
+          {visibleAvatars.map((avatar, index) => (
+            <div 
+              key={index} 
+              className="relative"
+              style={{ 
+                marginLeft: index === 0 ? 0 : `${overlapOffset}px`,
+                zIndex: visibleAvatars.length - index 
+              }}
+            >
+              {avatar}
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div 
+              className="relative z-0"
+              style={{ marginLeft: `${overlapOffset}px` }}
+            >
+              <Avatar variant="border">
+                <AvatarFallback>
+                  +{remainingCount}
+                </AvatarFallback>
+              </Avatar>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };