@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/components/file-upload/index.tsx

@@ -0,0 +1,362 @@
+"use client"
+
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Progress } from './progress'
+import { Badge } from './badge'
+import { 
+  Upload, 
+  File, 
+  Image, 
+  X,
+  Download,
+  FileText,
+  Video,
+  Music,
+  Archive,
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { useDocsProAccess } from '@/components/docs/docs-pro-provider'
+import { useSubscription } from '../../hooks/use-subscription'
+
+export interface FileUploadProps {
+  accept?: string
+  multiple?: boolean
+  maxSize?: number // in MB
+  maxFiles?: number
+  onUpload?: (files: File[]) => Promise<void>
+  onRemove?: (file: File) => void
+  className?: string
+  disabled?: boolean
+  showPreview?: boolean
+  allowedTypes?: string[]
+}
+
+export interface UploadedFile {
+  file: File
+  id: string
+  status: 'uploading' | 'success' | 'error'
+  progress: number
+  error?: string
+  url?: string
+}
+
+const getFileIcon = (type: string) => {
+  if (type.startsWith('image/')) return <Image className="h-4 w-4" />
+  if (type.startsWith('video/')) return <Video className="h-4 w-4" />
+  if (type.startsWith('audio/')) return <Music className="h-4 w-4" />
+  if (type.includes('pdf')) return <FileText className="h-4 w-4" />
+  if (type.includes('zip') || type.includes('rar')) return <Archive className="h-4 w-4" />
+  return <File className="h-4 w-4" />
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+export function FileUpload({
+  accept = '*',
+  multiple = false,
+  maxSize = 10, // 10MB default
+  maxFiles = 5,
+  onUpload,
+  onRemove,
+  className,
+  disabled = false,
+  showPreview = true,
+  allowedTypes = []
+}: FileUploadProps) {
+  // Check if we're in docs mode or have pro access
+  const docsProAccess = useDocsProAccess()
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="py-12 text-center">
+          <div className="max-w-md mx-auto space-y-4">
+            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
+              <p className="text-muted-foreground text-sm mb-4">
+                File Upload is available exclusively to MoonUI Pro subscribers.
+              </p>
+              <div className="flex gap-3 justify-center">
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+  
+  const [files, setFiles] = React.useState<UploadedFile[]>([])
+  const [isDragOver, setIsDragOver] = React.useState(false)
+  const [isUploading, setIsUploading] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  const validateFile = (file: File): string | null => {
+    // Check file size
+    if (file.size > maxSize * 1024 * 1024) {
+      return `File size must be less than ${maxSize}MB`
+    }
+
+    // Check file type
+    if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
+      return `File type ${file.type} is not allowed`
+    }
+
+    return null
+  }
+
+  const handleFileSelect = async (selectedFiles: FileList | null) => {
+    if (!selectedFiles || disabled) return
+
+    const fileArray = Array.from(selectedFiles)
+    
+    // Check max files limit
+    if (files.length + fileArray.length > maxFiles) {
+      alert(`Maximum ${maxFiles} files allowed`)
+      return
+    }
+
+    const validFiles: UploadedFile[] = []
+    const invalidFiles: string[] = []
+
+    fileArray.forEach(file => {
+      const error = validateFile(file)
+      if (error) {
+        invalidFiles.push(`${file.name}: ${error}`)
+      } else {
+        validFiles.push({
+          file,
+          id: Math.random().toString(36).substr(2, 9),
+          status: 'uploading',
+          progress: 0
+        })
+      }
+    })
+
+    if (invalidFiles.length > 0) {
+      alert(invalidFiles.join('\n'))
+    }
+
+    if (validFiles.length === 0) return
+
+    setFiles(prev => [...prev, ...validFiles])
+    setIsUploading(true)
+
+    // Simulate upload process
+    if (onUpload) {
+      try {
+        await onUpload(validFiles.map(f => f.file))
+        
+        // Update all files to success
+        setFiles(prev => prev.map(f => 
+          validFiles.find(vf => vf.id === f.id) 
+            ? { ...f, status: 'success' as const, progress: 100 }
+            : f
+        ))
+      } catch (error) {
+        // Update all files to error
+        setFiles(prev => prev.map(f => 
+          validFiles.find(vf => vf.id === f.id) 
+            ? { ...f, status: 'error' as const, error: 'Upload failed' }
+            : f
+        ))
+      }
+    } else {
+      // Simulate progress
+      for (const validFile of validFiles) {
+        const interval = setInterval(() => {
+          setFiles(prev => prev.map(f => 
+            f.id === validFile.id && f.progress < 100
+              ? { ...f, progress: f.progress + 10 }
+              : f
+          ))
+        }, 100)
+
+        setTimeout(() => {
+          clearInterval(interval)
+          setFiles(prev => prev.map(f => 
+            f.id === validFile.id
+              ? { ...f, status: 'success' as const, progress: 100 }
+              : f
+          ))
+        }, 1000)
+      }
+    }
+
+    setIsUploading(false)
+  }
+
+  const handleRemove = (fileToRemove: UploadedFile) => {
+    setFiles(prev => prev.filter(f => f.id !== fileToRemove.id))
+    if (onRemove) {
+      onRemove(fileToRemove.file)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    handleFileSelect(e.dataTransfer.files)
+  }
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragOver(true)
+  }
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }
+
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click()
+    }
+  }
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Upload className="h-5 w-5" />
+          File Upload
+        </CardTitle>
+        <CardDescription>
+          {multiple ? `Upload up to ${maxFiles} files` : 'Upload a file'} (max {maxSize}MB each)
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Drop Zone */}
+        <div
+          className={cn(
+            "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
+            isDragOver ? "border-primary bg-primary/5" : "border-muted-foreground/25",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onClick={handleClick}
+        >
+          <Upload className="h-10 w-10 mx-auto mb-4 text-muted-foreground" />
+          <p className="text-sm text-muted-foreground mb-2">
+            Drag and drop files here, or click to select
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {accept === '*' ? 'Any file type' : `Accepted types: ${accept}`}
+          </p>
+        </div>
+
+        {/* File Input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={(e) => handleFileSelect(e.target.files)}
+          className="hidden"
+          disabled={disabled}
+        />
+
+        {/* File List */}
+        {files.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium">Uploaded Files ({files.length})</h4>
+            {files.map((uploadedFile) => (
+              <div key={uploadedFile.id} className="flex items-center gap-3 p-3 border rounded-lg">
+                <div className="flex-shrink-0">
+                  {getFileIcon(uploadedFile.file.type)}
+                </div>
+                
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <p className="text-sm font-medium truncate">{uploadedFile.file.name}</p>
+                    <Badge variant={uploadedFile.status === 'success' ? 'success' : uploadedFile.status === 'error' ? 'destructive' : 'secondary'}>
+                      {uploadedFile.status === 'uploading' && <Loader2 className="h-3 w-3 mr-1 animate-spin" />}
+                      {uploadedFile.status === 'success' && <CheckCircle2 className="h-3 w-3 mr-1" />}
+                      {uploadedFile.status === 'error' && <AlertCircle className="h-3 w-3 mr-1" />}
+                      {uploadedFile.status}
+                    </Badge>
+                  </div>
+                  
+                  <div className="flex items-center justify-between mt-1">
+                    <p className="text-xs text-muted-foreground">
+                      {formatFileSize(uploadedFile.file.size)}
+                    </p>
+                    {uploadedFile.status === 'uploading' && (
+                      <span className="text-xs text-muted-foreground">
+                        {uploadedFile.progress}%
+                      </span>
+                    )}
+                  </div>
+                  
+                  {uploadedFile.status === 'uploading' && (
+                    <Progress value={uploadedFile.progress} className="mt-2" />
+                  )}
+                  
+                  {uploadedFile.error && (
+                    <p className="text-xs text-destructive mt-1">{uploadedFile.error}</p>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-1">
+                  {uploadedFile.status === 'success' && showPreview && uploadedFile.file.type.startsWith('image/') && (
+                    <Button variant="ghost" size="sm">
+                      <Download className="h-4 w-4" />
+                    </Button>
+                  )}
+                  
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemove(uploadedFile)}
+                    disabled={uploadedFile.status === 'uploading'}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Upload Status */}
+        {isUploading && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Uploading files...
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FileUpload

package/src/components/floating-action-button/index.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import React, { useState } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { Plus, X, Lock, Sparkles } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Card, CardContent } from "../ui/card"
+import { Button } from "../ui/button"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export interface FloatingActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  actions?: Array<{
+    icon: React.ReactNode
+    label: string
+    onClick: () => void
+  }>
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left"
+  size?: "sm" | "default" | "lg"
+}
+
+const FloatingActionButtonInternal = React.forwardRef<HTMLButtonElement, FloatingActionButtonProps>(
+  ({ 
+    actions = [],
+    position = "bottom-right", 
+    size = "default",
+    className,
+    children,
+    onClick,
+    ...props 
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const sizeClasses = {
+      sm: "h-10 w-10",
+      default: "h-12 w-12",
+      lg: "h-14 w-14"
+    }
+
+    const positionClasses = {
+      "bottom-right": "bottom-4 right-4",
+      "bottom-left": "bottom-4 left-4",
+      "top-right": "top-4 right-4",
+      "top-left": "top-4 left-4"
+    }
+
+    const actionPositions = {
+      "bottom-right": { x: -60, y: 0 },
+      "bottom-left": { x: 60, y: 0 },
+      "top-right": { x: -60, y: 0 },
+      "top-left": { x: 60, y: 0 }
+    }
+
+    const handleMainClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (actions.length > 0) {
+        setIsOpen(!isOpen)
+      } else if (onClick) {
+        onClick(e)
+      }
+    }
+
+    return (
+      <div className={cn("fixed z-50", positionClasses[position])}>
+        {/* Action buttons */}
+        <AnimatePresence>
+          {isOpen && actions.length > 0 && (
+            <div className="absolute">
+              {actions.map((action, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ 
+                    scale: 0, 
+                    opacity: 0,
+                    x: 0,
+                    y: 0
+                  }}
+                  animate={{ 
+                    scale: 1, 
+                    opacity: 1,
+                    x: actionPositions[position].x,
+                    y: actionPositions[position].y * (index + 1) - 10
+                  }}
+                  exit={{ 
+                    scale: 0, 
+                    opacity: 0,
+                    x: 0,
+                    y: 0
+                  }}
+                  transition={{ 
+                    delay: index * 0.05,
+                    type: "spring",
+                    stiffness: 200,
+                    damping: 15
+                  }}
+                  className="absolute flex items-center gap-2"
+                  style={{
+                    transform: `translate(${position.includes('right') ? '0' : '0'}, ${position.includes('bottom') ? '0' : '0'})`
+                  }}
+                >
+                  {/* Label */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.8 }}
+                    transition={{ delay: (index + 1) * 0.05 }}
+                    className={cn(
+                      "px-2 py-1 bg-background/90 backdrop-blur-sm text-sm font-medium rounded-md shadow-sm border whitespace-nowrap",
+                      position.includes('right') ? 'mr-2' : 'ml-2'
+                    )}
+                  >
+                    {action.label}
+                  </motion.div>
+                  
+                  {/* Action button */}
+                  <button
+                    onClick={() => {
+                      action.onClick()
+                      setIsOpen(false)
+                    }}
+                    className={cn(
+                      "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      sizeClasses[size]
+                    )}
+                  >
+                    {action.icon}
+                  </button>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </AnimatePresence>
+
+        {/* Main FAB */}
+        <motion.button
+          ref={ref}
+          className={cn(
+            "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            sizeClasses[size],
+            className
+          )}
+          onClick={handleMainClick}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          animate={{ rotate: isOpen ? 45 : 0 }}
+          transition={{ duration: 0.2 }}
+          {...props}
+        >
+          {children || (actions.length > 0 ? <Plus className="h-5 w-5" /> : <Plus className="h-5 w-5" />)}
+        </motion.button>
+
+        {/* Backdrop */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="fixed inset-0 z-[-1]"
+              onClick={() => setIsOpen(false)}
+            />
+          )}
+        </AnimatePresence>
+      </div>
+    )
+  }
+)
+
+FloatingActionButtonInternal.displayName = "FloatingActionButtonInternal"
+
+export const FloatingActionButton = React.forwardRef<HTMLButtonElement, FloatingActionButtonProps>(
+  ({ className, ...props }, ref) => {
+    // Check if we're in docs mode or have pro access
+    const docsProAccess = { hasAccess: true } // Pro access assumed in package
+    const { hasProAccess, isLoading } = useSubscription()
+    
+    // In docs mode, always show the component
+    const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+    
+    // If not in docs mode and no pro access, show upgrade prompt
+    if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+      return (
+        <Card className={cn("w-fit", className)}>
+          <CardContent className="py-6 text-center">
+            <div className="space-y-4">
+              <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+                <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
+                <p className="text-muted-foreground text-xs mb-4">
+                  Floating Action Button is available exclusively to MoonUI Pro subscribers.
+                </p>
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )
+    }
+
+    return <FloatingActionButtonInternal className={className} ref={ref} {...props} />
+  }
+)
+
+FloatingActionButton.displayName = "FloatingActionButton"