@retinalabsllc/zairusjs 1.0.9 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -886,12 +886,21 @@ interface UniversalDriveViewProps {
886
886
  uploadQueue: UploadQueueJob[];
887
887
  isLoading: boolean;
888
888
  searchQuery: string;
889
+ currentPage: number;
890
+ totalPages: number;
889
891
  onSearchChange: (val: string) => void;
890
892
  onNavigateFolder: (folderId: string | null) => void;
891
893
  onCreateFolder: (name: string) => Promise<void>;
892
894
  onUploadFiles: (files: FileList) => Promise<void>;
893
895
  onMoveToTrash: (ids: string[]) => Promise<void>;
894
896
  onClearUploadQueue?: () => void;
897
+ onPageChange: (page: number) => void;
898
+ onCopyItems: (ids: string[]) => void;
899
+ onCutItems: (ids: string[]) => void;
900
+ onPasteItems: () => Promise<void>;
901
+ clipboardCount: number;
902
+ onOpenFile: (item: DriveItem) => void;
903
+ onShareItems: (items: DriveItem[]) => void;
895
904
  }
896
905
  declare const UniversalDriveView: React.FC<UniversalDriveViewProps>;
897
906
 
package/dist/index.d.ts CHANGED
@@ -886,12 +886,21 @@ interface UniversalDriveViewProps {
886
886
  uploadQueue: UploadQueueJob[];
887
887
  isLoading: boolean;
888
888
  searchQuery: string;
889
+ currentPage: number;
890
+ totalPages: number;
889
891
  onSearchChange: (val: string) => void;
890
892
  onNavigateFolder: (folderId: string | null) => void;
891
893
  onCreateFolder: (name: string) => Promise<void>;
892
894
  onUploadFiles: (files: FileList) => Promise<void>;
893
895
  onMoveToTrash: (ids: string[]) => Promise<void>;
894
896
  onClearUploadQueue?: () => void;
897
+ onPageChange: (page: number) => void;
898
+ onCopyItems: (ids: string[]) => void;
899
+ onCutItems: (ids: string[]) => void;
900
+ onPasteItems: () => Promise<void>;
901
+ clipboardCount: number;
902
+ onOpenFile: (item: DriveItem) => void;
903
+ onShareItems: (items: DriveItem[]) => void;
895
904
  }
896
905
  declare const UniversalDriveView: React.FC<UniversalDriveViewProps>;
897
906
 
package/dist/index.js CHANGED
@@ -3328,21 +3328,27 @@ var FileIconMapper = ({ type, mimeType }) => {
3328
3328
  return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.ImageIcon, size: 18, className: "text-black" });
3329
3329
  }
3330
3330
  if (type === "VIDEO" || mime.startsWith("video/")) {
3331
- return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.Video01Icon, size: 18, className: "text-black" });
3331
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.FileVideoIcon, size: 18, className: "text-black" });
3332
3332
  }
3333
3333
  if (type === "AUDIO" || mime.startsWith("audio/")) {
3334
- return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.HeadphonesIcon, size: 18, className: "text-black" });
3334
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.FileAudioIcon, size: 18, className: "text-black" });
3335
3335
  }
3336
3336
  if (type === "CODE" || mime.includes("json") || mime.includes("javascript") || mime.includes("html")) {
3337
- return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.CodeIcon, size: 18, className: "text-black" });
3337
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.DocumentCodeIcon, size: 18, className: "text-black" });
3338
3338
  }
3339
3339
  if (type === "ARCHIVE" || mime.includes("zip") || mime.includes("tar") || mime.includes("rar")) {
3340
- return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.Archive01Icon, size: 18, className: "text-black" });
3340
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.FileZipIcon, size: 18, className: "text-black" });
3341
3341
  }
3342
- if (type === "DOC" || type === "PDF" || type === "TXT" || mime.includes("word") || mime.includes("pdf") || mime.includes("text")) {
3343
- return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.Note01Icon, size: 18, className: "text-black" });
3342
+ if (type === "DOC" || mime.includes("word")) {
3343
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.Doc01Icon, size: 18, className: "text-black" });
3344
3344
  }
3345
- return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.FileIcon, size: 18, className: "text-black" });
3345
+ if (type === "PDF" || mime.includes("pdf")) {
3346
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.Pdf01Icon, size: 18, className: "text-black" });
3347
+ }
3348
+ if (type === "TXT" || mime.includes("text/plain")) {
3349
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.Txt01Icon, size: 18, className: "text-black" });
3350
+ }
3351
+ return /* @__PURE__ */ import_react63.default.createElement(import_react64.HugeiconsIcon, { icon: import_core_free_icons21.FileEmpty02Icon, size: 18, className: "text-black" });
3346
3352
  };
3347
3353
 
3348
3354
  // src/components/UniversalDriveView.tsx
@@ -3353,17 +3359,40 @@ var UniversalDriveView = ({
3353
3359
  uploadQueue,
3354
3360
  isLoading,
3355
3361
  searchQuery,
3362
+ currentPage,
3363
+ totalPages,
3356
3364
  onSearchChange,
3357
3365
  onNavigateFolder,
3358
3366
  onCreateFolder,
3359
3367
  onUploadFiles,
3360
3368
  onMoveToTrash,
3361
- onClearUploadQueue
3369
+ onClearUploadQueue,
3370
+ onPageChange,
3371
+ onCopyItems,
3372
+ onCutItems,
3373
+ onPasteItems,
3374
+ clipboardCount,
3375
+ onOpenFile,
3376
+ onShareItems
3362
3377
  }) => {
3363
- const [viewLayout, setViewLayout] = (0, import_react65.useState)("list");
3364
3378
  const [selectedIds, setSelectedIds] = (0, import_react65.useState)([]);
3365
3379
  const [isNewFolderModalOpen, setIsNewFolderModalOpen] = (0, import_react65.useState)(false);
3366
3380
  const [newFolderName, setNewFolderName] = (0, import_react65.useState)("");
3381
+ const [isCreatingFolder, setIsCreatingFolder] = (0, import_react65.useState)(false);
3382
+ const [localSearch, setLocalSearch] = (0, import_react65.useState)(searchQuery);
3383
+ const [isSearching, setIsSearching] = (0, import_react65.useState)(false);
3384
+ const [loadingFolderId, setLoadingFolderId] = (0, import_react65.useState)(null);
3385
+ (0, import_react65.useEffect)(() => {
3386
+ if (localSearch !== searchQuery) setIsSearching(true);
3387
+ const delay = setTimeout(() => {
3388
+ onSearchChange(localSearch);
3389
+ setIsSearching(false);
3390
+ }, 3e3);
3391
+ return () => clearTimeout(delay);
3392
+ }, [localSearch, onSearchChange, searchQuery]);
3393
+ (0, import_react65.useEffect)(() => {
3394
+ if (!isLoading) setLoadingFolderId(null);
3395
+ }, [isLoading]);
3367
3396
  const formatBytes = (bytes) => {
3368
3397
  const num = Number(bytes);
3369
3398
  if (num === 0) return "0 Bytes";
@@ -3379,87 +3408,63 @@ var UniversalDriveView = ({
3379
3408
  year: "numeric"
3380
3409
  });
3381
3410
  };
3382
- const handleItemSelection = (id, e) => {
3383
- e.stopPropagation();
3384
- setSelectedIds(
3385
- (prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
3386
- );
3387
- };
3388
- const handleSelectAll = () => {
3389
- if (selectedIds.length === items.length) {
3390
- setSelectedIds([]);
3411
+ const handleRowClick = (id, e) => {
3412
+ if (e.ctrlKey || e.metaKey) {
3413
+ setSelectedIds((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]);
3391
3414
  } else {
3392
- setSelectedIds(items.map((i) => i.id));
3415
+ setSelectedIds([id]);
3393
3416
  }
3394
3417
  };
3418
+ const handleSelectAll = () => {
3419
+ if (selectedIds.length === items.length && items.length > 0) setSelectedIds([]);
3420
+ else setSelectedIds(items.map((i) => i.id));
3421
+ };
3395
3422
  const handleItemDoubleClick = (item) => {
3396
3423
  if (item.type === "FOLDER") {
3424
+ setLoadingFolderId(item.id);
3397
3425
  setSelectedIds([]);
3398
3426
  onNavigateFolder(item.id);
3427
+ } else {
3428
+ onOpenFile(item);
3399
3429
  }
3400
3430
  };
3431
+ const handleRightClickSelect = (e, itemId) => {
3432
+ e.preventDefault();
3433
+ setSelectedIds([itemId]);
3434
+ };
3401
3435
  const handleCreateFolderSubmit = async (e) => {
3402
3436
  e.preventDefault();
3403
- if (!newFolderName.trim()) return;
3437
+ if (!newFolderName.trim() || isCreatingFolder) return;
3438
+ setIsCreatingFolder(true);
3404
3439
  await onCreateFolder(newFolderName.trim());
3405
3440
  setNewFolderName("");
3441
+ setIsCreatingFolder(false);
3406
3442
  setIsNewFolderModalOpen(false);
3407
3443
  };
3408
- const handleBulkDelete = async () => {
3409
- if (selectedIds.length === 0) return;
3410
- await onMoveToTrash(selectedIds);
3411
- setSelectedIds([]);
3412
- };
3413
3444
  const activeJobs = uploadQueue.filter((j) => j.status === "UPLOADING" || j.status === "PENDING");
3414
- const completedCount = uploadQueue.filter((j) => j.status === "COMPLETED").length;
3415
- const totalJobs = uploadQueue.length;
3416
- const globalProgress = totalJobs > 0 ? Math.round(uploadQueue.reduce((acc, job) => acc + job.progress, 0) / (totalJobs * 100) * 100) : 0;
3417
- return /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col gap-6 max-w-4xl w-full mx-auto p-6 bg-white rounded-2xl animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react65.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-neutral-100" }, /* @__PURE__ */ import_react65.default.createElement("div", null, /* @__PURE__ */ import_react65.default.createElement("h1", { className: "text-xl text-black tracking-tight mb-1" }, "Files & Workspace Storage"), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-xs text-neutral-500" }, "Secure sandboxed storage framework optimized for workspace data.")), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-2 shrink-0" }, /* @__PURE__ */ import_react65.default.createElement(
3418
- "button",
3419
- {
3420
- onClick: () => setViewLayout("list"),
3421
- className: `p-2 border rounded-full transition-all outline-none ${viewLayout === "list" ? "bg-neutral-100 border-neutral-200 text-black" : "bg-white border-neutral-100 text-neutral-400 hover:text-black"}`
3422
- },
3423
- /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.ListViewIcon, size: 14 })
3424
- ), /* @__PURE__ */ import_react65.default.createElement(
3425
- "button",
3426
- {
3427
- onClick: () => setViewLayout("grid"),
3428
- className: `p-2 border rounded-full transition-all outline-none ${viewLayout === "grid" ? "bg-neutral-100 border-neutral-200 text-black" : "bg-white border-neutral-100 text-neutral-400 hover:text-black"}`
3429
- },
3430
- /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.GridViewIcon, size: 14 })
3431
- ), /* @__PURE__ */ import_react65.default.createElement(
3432
- "button",
3433
- {
3434
- onClick: () => setIsNewFolderModalOpen(true),
3435
- className: "flex items-center gap-2 px-4 py-2 border border-neutral-100 rounded-full text-xs text-black hover:bg-neutral-50 transition-colors outline-none"
3436
- },
3437
- /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.FolderAddIcon, size: 14 }),
3438
- " New Folder"
3439
- ), /* @__PURE__ */ import_react65.default.createElement("label", { className: "flex items-center gap-2 px-4 py-2 bg-black text-white rounded-full text-xs cursor-pointer hover:bg-neutral-900 transition-colors select-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Upload02Icon, size: 14, className: "text-white" }), " Upload Files", /* @__PURE__ */ import_react65.default.createElement(
3445
+ const globalProgress = uploadQueue.length > 0 ? Math.round(uploadQueue.reduce((acc, job) => acc + job.progress, 0) / (uploadQueue.length * 100) * 100) : 0;
3446
+ const selectedItemsData = items.filter((i) => selectedIds.includes(i.id));
3447
+ return /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col gap-6 max-w-5xl w-full mx-auto p-6 bg-white rounded-2xl animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react65.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-neutral-100" }, /* @__PURE__ */ import_react65.default.createElement("div", null, /* @__PURE__ */ import_react65.default.createElement("h1", { className: "text-xl text-black tracking-tight mb-1" }, "Drive"), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-xs text-neutral-500" }, "Secure cloud storage optimized for your workspace.")), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-2 shrink-0" }, selectedIds.length > 0 && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => {
3448
+ onShareItems(selectedItemsData);
3449
+ }, title: "Share", className: "p-2.5 bg-neutral-50 text-neutral-500 hover:text-black hover:bg-neutral-100 rounded-full transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Share01Icon, size: 18 })), /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => {
3450
+ onCopyItems(selectedIds);
3451
+ setSelectedIds([]);
3452
+ }, title: "Copy", className: "p-2.5 bg-neutral-50 text-neutral-500 hover:text-black hover:bg-neutral-100 rounded-full transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Copy01Icon, size: 18 })), /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => {
3453
+ onCutItems(selectedIds);
3454
+ setSelectedIds([]);
3455
+ }, title: "Cut", className: "p-2.5 bg-neutral-50 text-neutral-500 hover:text-black hover:bg-neutral-100 rounded-full transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Scissor01Icon, size: 18 })), /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-px h-6 bg-neutral-200 mx-1" })), clipboardCount > 0 && /* @__PURE__ */ import_react65.default.createElement("button", { onClick: onPasteItems, title: `Paste ${clipboardCount} items`, className: "p-2.5 bg-black text-white hover:bg-neutral-800 rounded-full transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.FilePasteIcon, size: 18 })), /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => setIsNewFolderModalOpen(true), title: "New Folder", className: "p-2.5 bg-neutral-50 text-neutral-500 hover:text-black hover:bg-neutral-100 rounded-full transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.FolderAddIcon, size: 18 })), /* @__PURE__ */ import_react65.default.createElement("label", { title: "Upload Files", className: "p-2.5 bg-neutral-50 text-neutral-500 hover:text-black hover:bg-neutral-100 rounded-full cursor-pointer transition-all" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Upload02Icon, size: 18 }), /* @__PURE__ */ import_react65.default.createElement("input", { type: "file", multiple: true, className: "hidden", onChange: (e) => e.target.files && onUploadFiles(e.target.files) })))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-full sm:max-w-xs relative" }, /* @__PURE__ */ import_react65.default.createElement(
3440
3456
  "input",
3441
3457
  {
3442
- type: "file",
3443
- multiple: true,
3444
- className: "hidden",
3445
- onChange: (e) => e.target.files && onUploadFiles(e.target.files)
3446
- }
3447
- )))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-full sm:max-w-xs" }, /* @__PURE__ */ import_react65.default.createElement(
3448
- TextInput,
3449
- {
3450
- placeholder: "Search workspace files...",
3451
- value: searchQuery,
3452
- onChange: onSearchChange
3458
+ type: "text",
3459
+ placeholder: "Search Drive...",
3460
+ className: "w-full pl-4 pr-10 py-2.5 text-xs bg-neutral-50 border border-neutral-100 rounded-full outline-none focus:border-black transition-colors",
3461
+ value: localSearch,
3462
+ onChange: (e) => setLocalSearch(e.target.value)
3453
3463
  }
3454
- )), selectedIds.length > 0 && /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-3 bg-neutral-50 border border-neutral-100 px-4 py-2 rounded-full animate-in fade-in slide-in-from-top-2 duration-200" }, /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 uppercase" }, selectedIds.length, " Selected"), /* @__PURE__ */ import_react65.default.createElement(
3455
- "button",
3456
- {
3457
- onClick: handleBulkDelete,
3458
- className: "text-neutral-500 hover:text-red-600 p-1 rounded-full transition-colors outline-none flex items-center gap-1.5 text-xs"
3459
- },
3460
- /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Delete02Icon, size: 14 }),
3461
- " Move to Trash"
3462
- ))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-1.5 overflow-x-auto text-xs py-1 border-b border-neutral-50 text-neutral-400 whitespace-nowrap tracking-wide" }, folderBreadcrumbs.map((crumb, idx) => /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, { key: idx }, idx > 0 && /* @__PURE__ */ import_react65.default.createElement("span", null, "/"), /* @__PURE__ */ import_react65.default.createElement(
3464
+ ), isSearching && /* @__PURE__ */ import_react65.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Loading03Icon, size: 14, className: "animate-spin text-neutral-400" }))), selectedIds.length > 0 && /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-3 bg-neutral-50 border border-neutral-100 px-4 py-2 rounded-full animate-in fade-in duration-200" }, /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 uppercase" }, selectedIds.length, " Selected"), /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => {
3465
+ onMoveToTrash(selectedIds);
3466
+ setSelectedIds([]);
3467
+ }, className: "text-neutral-500 hover:text-red-600 p-1 flex items-center gap-1.5 text-xs outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Delete02Icon, size: 14 }), " Trash"))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-1.5 overflow-x-auto text-xs py-1 border-b border-neutral-50 text-neutral-400 whitespace-nowrap" }, folderBreadcrumbs.map((crumb, idx) => /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, { key: idx }, idx > 0 && /* @__PURE__ */ import_react65.default.createElement("span", null, "/"), /* @__PURE__ */ import_react65.default.createElement(
3463
3468
  "button",
3464
3469
  {
3465
3470
  onClick: () => {
@@ -3469,91 +3474,47 @@ var UniversalDriveView = ({
3469
3474
  className: `hover:text-black transition-colors outline-none ${idx === folderBreadcrumbs.length - 1 ? "text-black" : ""}`
3470
3475
  },
3471
3476
  crumb.name
3472
- )))), !isLoading && items.length === 0 && /* @__PURE__ */ import_react65.default.createElement("div", { className: "py-20 text-center flex flex-col items-center justify-center border border-dashed border-neutral-100 rounded-xl" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.FolderIcon, size: 40, className: "text-neutral-200 mb-3" }), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-xs text-neutral-400" }, "This directory path is completely empty.")), !isLoading && items.length > 0 && viewLayout === "list" && /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-full overflow-x-auto select-none" }, /* @__PURE__ */ import_react65.default.createElement("table", { className: "w-full text-left border-collapse min-w-125" }, /* @__PURE__ */ import_react65.default.createElement("thead", null, /* @__PURE__ */ import_react65.default.createElement("tr", { className: "border-b border-neutral-100" }, /* @__PURE__ */ import_react65.default.createElement("th", { className: "w-10 p-3" }, /* @__PURE__ */ import_react65.default.createElement(
3473
- "input",
3474
- {
3475
- type: "checkbox",
3476
- checked: selectedIds.length === items.length,
3477
- onChange: handleSelectAll,
3478
- className: "rounded border-neutral-200 focus:ring-0 outline-none cursor-pointer"
3479
- }
3480
- )), /* @__PURE__ */ import_react65.default.createElement("th", { className: "text-[11px] uppercase tracking-[0.2em] text-neutral-400 p-3" }, "Name"), /* @__PURE__ */ import_react65.default.createElement("th", { className: "text-[11px] uppercase tracking-[0.2em] text-neutral-400 p-3" }, "Modified"), /* @__PURE__ */ import_react65.default.createElement("th", { className: "text-[11px] uppercase tracking-[0.2em] text-neutral-400 p-3 text-right" }, "Size"))), /* @__PURE__ */ import_react65.default.createElement("tbody", { className: "divide-y divide-neutral-50" }, items.map((item) => {
3477
+ )))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-full overflow-x-auto select-none flex-1 relative min-h-75" }, /* @__PURE__ */ import_react65.default.createElement("table", { className: "w-full text-left border-collapse min-w-full relative z-10" }, /* @__PURE__ */ import_react65.default.createElement("thead", null, /* @__PURE__ */ import_react65.default.createElement("tr", { className: "border-b border-neutral-100 bg-white" }, /* @__PURE__ */ import_react65.default.createElement("th", { className: "w-10 p-3" }, /* @__PURE__ */ import_react65.default.createElement("input", { type: "checkbox", checked: selectedIds.length === items.length && items.length > 0, onChange: handleSelectAll, className: "rounded border-neutral-200 focus:ring-0 cursor-pointer" })), /* @__PURE__ */ import_react65.default.createElement("th", { className: "text-[11px] uppercase tracking-[0.2em] text-neutral-400 p-3" }, "Name"), /* @__PURE__ */ import_react65.default.createElement("th", { className: "text-[11px] uppercase tracking-[0.2em] text-neutral-400 p-3" }, "Modified"), /* @__PURE__ */ import_react65.default.createElement("th", { className: "text-[11px] uppercase tracking-[0.2em] text-neutral-400 p-3 text-right" }, "Size"))), /* @__PURE__ */ import_react65.default.createElement("tbody", { className: "divide-y divide-neutral-50" }, items.length === 0 && !isLoading && /* @__PURE__ */ import_react65.default.createElement("tr", null, /* @__PURE__ */ import_react65.default.createElement("td", { colSpan: 4, className: "py-24 text-center" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex flex-col items-center justify-center" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.FolderIcon, size: 40, className: "text-neutral-200 mb-3" }), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-xs text-neutral-400" }, "This directory is empty.")))), items.map((item) => {
3481
3478
  const isChecked = selectedIds.includes(item.id);
3482
3479
  return /* @__PURE__ */ import_react65.default.createElement(
3483
3480
  "tr",
3484
3481
  {
3485
3482
  key: item.id,
3483
+ onClick: (e) => handleRowClick(item.id, e),
3486
3484
  onDoubleClick: () => handleItemDoubleClick(item),
3487
- className: `hover:bg-neutral-50/70 transition-colors cursor-pointer group ${isChecked ? "bg-neutral-50/40" : ""}`
3485
+ onContextMenu: (e) => handleRightClickSelect(e, item.id),
3486
+ className: `hover:bg-neutral-50/70 transition-colors cursor-pointer group ${isChecked ? "bg-neutral-50" : ""}`
3488
3487
  },
3489
- /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3", onClick: (e) => handleItemSelection(item.id, e) }, /* @__PURE__ */ import_react65.default.createElement(
3490
- "input",
3491
- {
3492
- type: "checkbox",
3493
- checked: isChecked,
3494
- onChange: (e) => handleItemSelection(item.id, e),
3495
- className: "rounded border-neutral-200 focus:ring-0 outline-none cursor-pointer"
3496
- }
3497
- )),
3498
- /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3 flex items-center gap-3 min-w-0" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-8 h-8 shrink-0 bg-neutral-100 rounded-lg flex items-center justify-center" }, /* @__PURE__ */ import_react65.default.createElement(FileIconMapper, { type: item.type, mimeType: item.mimeType })), /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-xs text-black truncate pr-4" }, item.name)),
3488
+ /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react65.default.createElement("input", { type: "checkbox", checked: isChecked, onChange: () => handleRowClick(item.id, { ctrlKey: true }), className: "rounded border-neutral-200 cursor-pointer" })),
3489
+ /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3 flex items-center gap-3 min-w-0" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-8 h-8 shrink-0 bg-neutral-100 rounded-lg flex items-center justify-center relative" }, loadingFolderId === item.id ? /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Loading03Icon, size: 14, className: "animate-spin text-black" }) : /* @__PURE__ */ import_react65.default.createElement(FileIconMapper, { type: item.type, mimeType: item.mimeType })), /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-xs text-black truncate pr-4" }, item.name)),
3499
3490
  /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3 text-xs text-neutral-500 whitespace-nowrap" }, formatDate3(item.updatedAt)),
3500
- /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3 text-xs text-neutral-500 text-right whitespace-nowrap" }, item.type === "FOLDER" ? "\u2014" : formatBytes(item.size))
3501
- );
3502
- })))), !isLoading && items.length > 0 && viewLayout === "grid" && /* @__PURE__ */ import_react65.default.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 select-none" }, items.map((item) => {
3503
- const isChecked = selectedIds.includes(item.id);
3504
- return /* @__PURE__ */ import_react65.default.createElement(
3505
- "div",
3506
- {
3507
- key: item.id,
3508
- onDoubleClick: () => handleItemDoubleClick(item),
3509
- onClick: (e) => handleItemSelection(item.id, e),
3510
- className: `p-4 border rounded-xl flex flex-col gap-3 relative hover:border-black/30 cursor-pointer group transition-all ${isChecked ? "bg-neutral-50 border-black/30" : "bg-white border-neutral-100"}`
3511
- },
3512
- /* @__PURE__ */ import_react65.default.createElement("div", { className: "absolute top-3 left-3 opacity-0 group-hover:opacity-100 checked:opacity-100 transition-opacity", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react65.default.createElement(
3513
- "input",
3514
- {
3515
- type: "checkbox",
3516
- checked: isChecked,
3517
- onChange: (e) => handleItemSelection(item.id, e),
3518
- className: "rounded border-neutral-200 focus:ring-0 outline-none cursor-pointer"
3519
- }
3520
- )),
3521
- /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-10 h-10 bg-neutral-100 rounded-xl flex items-center justify-center mx-auto mt-2 shrink-0" }, /* @__PURE__ */ import_react65.default.createElement(FileIconMapper, { type: item.type, mimeType: item.mimeType })),
3522
- /* @__PURE__ */ import_react65.default.createElement("div", { className: "text-center min-w-0 px-1" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "text-xs text-black truncate w-full block" }, item.name), /* @__PURE__ */ import_react65.default.createElement("div", { className: "text-[10px] text-neutral-400 tracking-wide mt-0.5 whitespace-nowrap" }, item.type === "FOLDER" ? "Folder" : formatBytes(item.size)))
3491
+ /* @__PURE__ */ import_react65.default.createElement("td", { className: "p-3 text-xs text-neutral-500 text-right whitespace-nowrap" }, formatBytes(item.size))
3523
3492
  );
3524
- })), activeJobs.length > 0 && /* @__PURE__ */ import_react65.default.createElement("div", { className: "fixed bottom-6 right-6 w-80 bg-white border border-neutral-200 shadow-2xl rounded-xl z-100 overflow-hidden flex flex-col animate-in slide-in-from-bottom-4 duration-300" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "p-4 border-b border-neutral-100 bg-neutral-50 flex items-center justify-between" }, /* @__PURE__ */ import_react65.default.createElement("div", null, /* @__PURE__ */ import_react65.default.createElement("h4", { className: "text-xs text-black" }, "Uploading Elements"), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-[10px] text-neutral-500 mt-0.5" }, "Uploading ", completedCount + 1, " of ", totalJobs, " (", globalProgress, "%)")), onClearUploadQueue && activeJobs.length === 0 && /* @__PURE__ */ import_react65.default.createElement("button", { onClick: onClearUploadQueue, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Cancel01Icon, size: 14 }))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-full h-1 bg-neutral-100 relative" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "h-full bg-black transition-all duration-300", style: { width: `${globalProgress}%` } })), /* @__PURE__ */ import_react65.default.createElement("div", { className: "max-h-40 overflow-y-auto divide-y divide-neutral-50 p-2" }, uploadQueue.map((job) => /* @__PURE__ */ import_react65.default.createElement("div", { key: job.id, className: "flex items-center justify-between p-2 text-[11px] gap-4" }, /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-black truncate flex-1 pr-2" }, job.name), /* @__PURE__ */ import_react65.default.createElement("div", { className: "shrink-0 whitespace-nowrap flex items-center gap-2" }, job.status === "COMPLETED" ? /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Tick01Icon, size: 12, className: "text-green-600" }) : job.status === "FAILED" ? /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-red-600 text-[10px]" }, "Failed") : /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-neutral-500 text-[10px]" }, job.progress, "%")))))), isNewFolderModalOpen && /* @__PURE__ */ import_react65.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "absolute inset-0 bg-black/20 backdrop-blur-sm", onClick: () => setIsNewFolderModalOpen(false) }), /* @__PURE__ */ import_react65.default.createElement(
3525
- "form",
3493
+ }))), isLoading && /* @__PURE__ */ import_react65.default.createElement("div", { className: "absolute inset-0 top-12 z-20 bg-white/60 backdrop-blur-[1px] flex items-start justify-center pt-20" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Loading03Icon, className: "animate-spin text-neutral-400", size: 24 }))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center justify-between pt-4 border-t border-neutral-100" }, /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] uppercase" }, "Page ", currentPage, " of ", Math.max(1, totalPages)), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage <= 1 || isLoading, className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black disabled:opacity-30 transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react65.default.createElement("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages || isLoading, className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black disabled:opacity-30 transition-all outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.ArrowRight01Icon, size: 14 })))), activeJobs.length > 0 && /* @__PURE__ */ import_react65.default.createElement("div", { className: "fixed bottom-6 right-6 w-80 bg-white border border-neutral-200 shadow-2xl rounded-xl z-100 overflow-hidden flex flex-col animate-in slide-in-from-bottom-4 duration-300" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "p-4 border-b border-neutral-100 bg-neutral-50 flex items-center justify-between" }, /* @__PURE__ */ import_react65.default.createElement("div", null, /* @__PURE__ */ import_react65.default.createElement("h4", { className: "text-xs text-black font-medium" }, "Processing Elements"), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-[10px] text-neutral-500 mt-0.5" }, "Processing ", activeJobs.length, " active streams")), onClearUploadQueue && activeJobs.length === 0 && /* @__PURE__ */ import_react65.default.createElement("button", { onClick: onClearUploadQueue, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Cancel01Icon, size: 14 }))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "w-full h-1 bg-neutral-100 relative" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "h-full transition-all duration-500 ease-out", style: { width: `${globalProgress}%`, background: "linear-gradient(to right, #f64b4d, #ffa360)" } })), /* @__PURE__ */ import_react65.default.createElement("div", { className: "max-h-40 overflow-y-auto divide-y divide-neutral-50 p-2" }, uploadQueue.map((job) => /* @__PURE__ */ import_react65.default.createElement("div", { key: job.id, className: "flex items-center justify-between p-2 text-[11px] gap-4" }, /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-black truncate flex-1 pr-2" }, job.name), /* @__PURE__ */ import_react65.default.createElement("div", { className: "shrink-0 whitespace-nowrap flex items-center gap-2" }, job.status === "COMPLETED" ? /* @__PURE__ */ import_react65.default.createElement(import_react66.HugeiconsIcon, { icon: import_core_free_icons22.Tick01Icon, size: 12, className: "text-green-600" }) : job.status === "FAILED" ? /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-red-600 text-[10px]" }, "Failed") : /* @__PURE__ */ import_react65.default.createElement("span", { className: "text-neutral-500 text-[10px]" }, job.progress, "%")))))), isNewFolderModalOpen && /* @__PURE__ */ import_react65.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react65.default.createElement("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-sm", onClick: () => !isCreatingFolder && setIsNewFolderModalOpen(false) }), /* @__PURE__ */ import_react65.default.createElement("form", { onSubmit: handleCreateFolderSubmit, className: "relative w-full max-w-sm bg-white shadow-2xl rounded-2xl p-8 flex flex-col gap-6 animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react65.default.createElement("div", null, /* @__PURE__ */ import_react65.default.createElement("h3", { className: "text-lg text-black tracking-tight mb-1" }, "Create Directory"), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-[11px] text-neutral-400" }, "Name your new folder structure.")), /* @__PURE__ */ import_react65.default.createElement(
3494
+ TextInput,
3495
+ {
3496
+ placeholder: "Folder name (e.g., Q3 Invoices)",
3497
+ value: newFolderName,
3498
+ onChange: setNewFolderName
3499
+ }
3500
+ ), /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center justify-end gap-3 mt-2" }, /* @__PURE__ */ import_react65.default.createElement(
3501
+ "button",
3526
3502
  {
3527
- onSubmit: handleCreateFolderSubmit,
3528
- className: "relative w-80 bg-white border border-neutral-100 shadow-2xl rounded-2xl p-6 flex flex-col gap-4 animate-in zoom-in-95 duration-200"
3503
+ type: "button",
3504
+ onClick: () => setIsNewFolderModalOpen(false),
3505
+ disabled: isCreatingFolder,
3506
+ className: "px-6 py-2.5 text-xs text-neutral-500 hover:bg-neutral-50 rounded-full outline-none disabled:opacity-50 transition-colors"
3529
3507
  },
3530
- /* @__PURE__ */ import_react65.default.createElement("div", null, /* @__PURE__ */ import_react65.default.createElement("h3", { className: "text-sm text-black tracking-tight mb-1" }, "Create Virtual Directory"), /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-[11px] text-neutral-400" }, "Provide an alpha-numeric layout key for your root structure.")),
3531
- /* @__PURE__ */ import_react65.default.createElement(
3532
- TextInput,
3533
- {
3534
- placeholder: "Folder name (e.g., Financial Invoices)",
3535
- value: newFolderName,
3536
- onChange: setNewFolderName
3537
- }
3538
- ),
3539
- /* @__PURE__ */ import_react65.default.createElement("div", { className: "flex items-center justify-end gap-2 mt-2" }, /* @__PURE__ */ import_react65.default.createElement(
3540
- "button",
3541
- {
3542
- type: "button",
3543
- onClick: () => setIsNewFolderModalOpen(false),
3544
- className: "px-4 py-2 text-xs text-neutral-500 hover:bg-neutral-50 rounded-full transition-colors outline-none"
3545
- },
3546
- "Cancel"
3547
- ), /* @__PURE__ */ import_react65.default.createElement(
3548
- "button",
3549
- {
3550
- type: "submit",
3551
- disabled: !newFolderName.trim(),
3552
- className: "px-4 py-2 text-xs bg-black text-white rounded-full hover:bg-neutral-900 disabled:opacity-30 transition-all outline-none"
3553
- },
3554
- "Create Folder"
3555
- ))
3556
- )));
3508
+ "Cancel"
3509
+ ), /* @__PURE__ */ import_react65.default.createElement(
3510
+ ThreeDActionButton,
3511
+ {
3512
+ type: "submit",
3513
+ isLoading: isCreatingFolder,
3514
+ disabled: !newFolderName.trim()
3515
+ },
3516
+ "Create"
3517
+ )))));
3557
3518
  };
3558
3519
 
3559
3520
  // src/components/AiApproveDecline.tsx
@@ -4540,7 +4501,7 @@ var ContentGridBlock = ({
4540
4501
  middleBottomCard,
4541
4502
  rightCards
4542
4503
  }) => {
4543
- return /* @__PURE__ */ import_react80.default.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ import_react80.default.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ import_react80.default.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "border border-neutral-100 rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[17px] text-black leading-snug mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ import_react80.default.createElement("span", { className: "mb-auto text-[11px] text-neutral-400 uppercase tracking-widest" }, leftCard.tag), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ import_react80.default.createElement("div", null, /* @__PURE__ */ import_react80.default.createElement("h4", { className: "text-[15px] text-black" }, leftCard.title), /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[13px] text-neutral-400" }, leftCard.subtitle)), /* @__PURE__ */ import_react80.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react80.default.createElement(import_image13.default, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "border border-neutral-100 rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ import_react80.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ import_react80.default.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ import_react80.default.createElement(import_image13.default, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ import_react80.default.createElement("span", { className: "text-sm text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-100 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ import_react80.default.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ import_react80.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[14px] text-black leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "border border-neutral-100 rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ import_react80.default.createElement("div", null, /* @__PURE__ */ import_react80.default.createElement("h4", { className: "text-[15px] text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ import_react80.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react80.default.createElement(import_image13.default, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[16px] text-black leading-snug mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ import_react80.default.createElement("span", { className: "text-[11px] text-neutral-400 uppercase tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ import_react80.default.createElement("div", { key: idx, className: "relative w-full h-80 rounded-3xl overflow-hidden group" }, /* @__PURE__ */ import_react80.default.createElement(
4504
+ return /* @__PURE__ */ import_react80.default.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ import_react80.default.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ import_react80.default.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "bg-amber-100 rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[17px] text-black leading-snug mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ import_react80.default.createElement("span", { className: "mb-auto text-[11px] text-neutral-400 uppercase tracking-widest" }, leftCard.tag), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ import_react80.default.createElement("div", null, /* @__PURE__ */ import_react80.default.createElement("h4", { className: "text-[15px] text-black" }, leftCard.title), /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[13px] text-neutral-400" }, leftCard.subtitle)), /* @__PURE__ */ import_react80.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react80.default.createElement(import_image13.default, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "bg-purple-100 rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ import_react80.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ import_react80.default.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ import_react80.default.createElement(import_image13.default, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ import_react80.default.createElement("span", { className: "text-sm text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-100 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ import_react80.default.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ import_react80.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[14px] text-black leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "border border-neutral-100 rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ import_react80.default.createElement("div", null, /* @__PURE__ */ import_react80.default.createElement("h4", { className: "text-[15px] text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ import_react80.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react80.default.createElement(import_image13.default, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react80.default.createElement("p", { className: "text-[16px] text-black leading-snug mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ import_react80.default.createElement("span", { className: "text-[11px] text-neutral-400 uppercase tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ import_react80.default.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ import_react80.default.createElement("div", { key: idx, className: "relative w-full h-80 rounded-3xl overflow-hidden group" }, /* @__PURE__ */ import_react80.default.createElement(
4544
4505
  ImageWithLoader2,
4545
4506
  {
4546
4507
  src: card.bgImageSrc,