@moontra/moonui-pro 2.11.4 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.11.4",
+  "version": "2.12.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

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

@@ -45,6 +45,7 @@ import {
   DialogTitle 
 } from '../ui/dialog'
 import { useSubscription } from '../../hooks/use-subscription'
+import { useToast } from '../../use-toast'
 
 // Ana interface'ler ve type'lar
 export interface FileUploadProProps {
@@ -1371,6 +1372,7 @@ const FileUploadItem = ({
   onPauseResume?: () => void
   onPreview?: () => void
 }) => {
+  const { toast } = useToast()
   const canPauseResume = resumable && ['uploading', 'paused'].includes(file.status)
   const canPreview = showPreview && file.preview && ['image', 'video', 'audio'].includes(file.preview.type)
   
@@ -1388,23 +1390,35 @@ const FileUploadItem = ({
         variant === 'grid' && "p-4"
       )}
     >
-      {/* Selection Checkbox */}
-      {allowBulkOperations && (
+      {/* Selection Checkbox for grid variant only */}
+      {allowBulkOperations && variant === 'grid' && (
         <div className="absolute top-3 left-3 z-10">
           <input
             type="checkbox"
             checked={selected}
             onChange={(e) => onSelect?.(e.target.checked)}
-            className="rounded border-muted-foreground/25"
+            className="rounded border-muted-foreground/25 h-4 w-4"
           />
         </div>
       )}
       
+      {/* Checkbox for non-grid variants */}
+      {allowBulkOperations && variant !== 'grid' && (
+        <input
+          type="checkbox"
+          checked={selected}
+          onChange={(e) => onSelect?.(e.target.checked)}
+          className="rounded border-muted-foreground/25 h-4 w-4 mt-1 mr-3 float-left"
+        />
+      )}
+      
       {/* Preview/Thumbnail */}
       {showPreview && file.preview && (
         <div className={cn(
           "relative overflow-hidden rounded bg-muted/20",
-          variant === 'grid' ? "aspect-video mb-3" : "w-12 h-12 float-left mr-3"
+          variant === 'grid' ? "aspect-video mb-3" : 
+          variant === 'compact' ? "w-10 h-10 float-left mr-2" : 
+          "w-12 h-12 float-left mr-3"
         )}>
           {file.preview.type === 'image' && file.preview.thumbnail && (
             <img
@@ -1446,27 +1460,26 @@ const FileUploadItem = ({
         </div>
       )}
       
-      {/* File Info */}
-      <div className={cn(
-        "flex-1 min-w-0",
-        variant === 'grid' && "text-center",
-        allowBulkOperations && variant !== 'grid' && "ml-8" // Add margin when checkbox is present
-      )}>
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <h5 className={cn(
-              "font-medium truncate",
-              variant === 'compact' ? "text-sm" : "text-base"
-            )}>
-              {file.file.name}
-            </h5>
-            
-            {showMetadata && (
-              <div className={cn(
-                "flex items-center gap-2 mt-1 text-muted-foreground",
-                variant === 'compact' ? "text-xs" : "text-sm",
-                variant === 'grid' && "justify-center"
+        {/* File Info */}
+        <div className={cn(
+          "flex-1 min-w-0",
+          variant === 'grid' ? "text-center w-full" : "overflow-hidden"
+        )}>
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <h5 className={cn(
+                "font-medium truncate",
+                variant === 'compact' ? "text-sm" : "text-base"
               )}>
+                {file.file.name}
+              </h5>
+            
+              {showMetadata && (
+                <div className={cn(
+                  "flex items-center gap-2 mt-1 text-muted-foreground",
+                  variant === 'compact' ? "text-xs" : "text-sm",
+                  variant === 'grid' && "justify-center"
+                )}>
                 <span>{formatFileSize(file.file.size)}</span>
                 {file.preview?.dimensions && (
                   <>
@@ -1491,17 +1504,23 @@ const FileUploadItem = ({
               file.status === 'error' ? 'destructive' :
               file.status === 'paused' ? 'secondary' : 'secondary'
             }
-            className="flex-shrink-0"
+            size={variant === 'compact' ? 'sm' : 'md'}
+            className={cn(
+              "flex-shrink-0 whitespace-nowrap min-w-fit",
+              file.status === 'success' && "bg-green-500 hover:bg-green-600 text-white border-transparent"
+            )}
           >
-            {file.status === 'uploading' && <Loader2 className="h-3 w-3 mr-1 animate-spin" />}
-            {file.status === 'success' && <CheckCircle2 className="h-3 w-3 mr-1" />}
-            {file.status === 'error' && <AlertCircle className="h-3 w-3 mr-1" />}
-            {file.status === 'paused' && <Pause className="h-3 w-3 mr-1" />}
-            {file.status === 'pending' ? 'Pending' :
-             file.status === 'uploading' ? 'Uploading' :
-             file.status === 'paused' ? 'Paused' :
-             file.status === 'success' ? 'Completed' :
-             file.status === 'error' ? 'Error' : 'Cancelled'}
+            {file.status === 'uploading' && <Loader2 className={cn("h-3 w-3 animate-spin flex-shrink-0", variant !== 'compact' && "mr-1")} />}
+            {file.status === 'success' && <CheckCircle2 className={cn("h-3 w-3 flex-shrink-0", variant !== 'compact' && "mr-1")} />}
+            {file.status === 'error' && <AlertCircle className={cn("h-3 w-3 flex-shrink-0", variant !== 'compact' && "mr-1")} />}
+            {file.status === 'paused' && <Pause className={cn("h-3 w-3 flex-shrink-0", variant !== 'compact' && "mr-1")} />}
+            {variant !== 'compact' && (
+              file.status === 'pending' ? 'Pending' :
+              file.status === 'uploading' ? 'Uploading' :
+              file.status === 'paused' ? 'Paused' :
+              file.status === 'success' ? 'Done' :
+              file.status === 'error' ? 'Error' : 'Cancelled'
+            )}
           </Badge>
         </div>
         
@@ -1528,7 +1547,7 @@ const FileUploadItem = ({
         
         {/* Actions */}
         <div className={cn(
-          "flex items-center gap-1 mt-3",
+          "flex items-center gap-1 mt-3 clear-both",
           variant === 'grid' && "justify-center"
         )}>
           {canPauseResume && (
@@ -1562,6 +1581,13 @@ const FileUploadItem = ({
               variant="ghost"
               size="sm"
               className="h-7 px-2"
+              onClick={() => {
+                // Download file
+                const link = document.createElement('a')
+                link.href = file.preview?.url || URL.createObjectURL(file.file)
+                link.download = file.file.name
+                link.click()
+              }}
             >
               <Download className="h-3 w-3" />
             </Button>
@@ -1580,14 +1606,43 @@ const FileUploadItem = ({
                   Preview
                 </DropdownMenuItem>
               )}
-              <DropdownMenuItem>
+              <DropdownMenuItem onClick={async () => {
+                try {
+                  const url = file.result?.url || file.preview?.url || URL.createObjectURL(file.file)
+                  await navigator.clipboard.writeText(url)
+                  toast({
+                    title: "Link copied",
+                    description: "File link has been copied to clipboard",
+                  })
+                } catch (err) {
+                  console.error('Failed to copy link:', err)
+                  toast({
+                    title: "Failed to copy",
+                    description: "Could not copy link to clipboard",
+                    variant: "destructive"
+                  })
+                }
+              }}>
                 <Copy className="mr-2 h-4 w-4" />
                 Copy Link
               </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Share className="mr-2 h-4 w-4" />
-                Share
-              </DropdownMenuItem>
+              {navigator.share && (
+                <DropdownMenuItem onClick={async () => {
+                  try {
+                    await navigator.share({
+                      title: file.file.name,
+                      text: `Check out this file: ${file.file.name}`,
+                      url: file.result?.url || file.preview?.url || window.location.href,
+                      files: [file.file]
+                    })
+                  } catch (err) {
+                    console.log('Share cancelled or failed:', err)
+                  }
+                }}>
+                  <Share className="mr-2 h-4 w-4" />
+                  Share
+                </DropdownMenuItem>
+              )}
               <DropdownMenuItem onClick={onRemove} className="text-destructive">
                 <Trash2 className="mr-2 h-4 w-4" />
                 Delete