@dust-tt/sparkle 0.7.0 → 0.7.2

package/src/components/InteractiveImageGrid.tsx

@@ -1,140 +1,9 @@
 import React from "react";
 
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogTrigger,
-  Spinner,
-} from "@sparkle/components/";
-import {
-  ArrowDownOnSquareIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  XMarkIcon,
-} from "@sparkle/icons/app";
+import { ImagePreview } from "@sparkle/components/ImagePreview";
+import { ImageZoomDialog } from "@sparkle/components/ImageZoomDialog";
 import { cn } from "@sparkle/lib/utils";
 
-interface ImageLoadingStateProps {
-  className?: string;
-  size?: "sm" | "md" | "lg";
-}
-
-const ImageLoadingState = React.forwardRef<
-  HTMLDivElement,
-  ImageLoadingStateProps
->(({ className, size = "lg" }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-mx-auto s-flex s-aspect-square s-w-full s-min-w-[50vh]",
-        "s-max-w-[80vh] s-items-center s-justify-center",
-        "s-bg-muted-background dark:s-bg-muted-background-night",
-        className
-      )}
-    >
-      <Spinner variant="dark" size={size} />
-    </div>
-  );
-});
-
-ImageLoadingState.displayName = "ImageLoadingState";
-interface ImagePreviewProps {
-  image: {
-    alt: string;
-    downloadUrl?: string;
-    imageUrl?: string;
-    isLoading?: boolean;
-    title: string;
-  };
-  onClick: () => void;
-  onDownload: (e: React.MouseEvent) => Promise<void>;
-  onClose?: (e: React.MouseEvent) => void;
-}
-
-const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(
-  ({ image, onClick, onDownload, onClose }, ref) => {
-    return (
-      <div
-        ref={ref}
-        onClick={onClick}
-        className={cn(
-          "s-group/preview s-relative s-aspect-square",
-          "s-cursor-pointer s-overflow-hidden s-rounded-2xl",
-          "s-bg-muted-background dark:s-bg-muted-background-night"
-        )}
-      >
-        {image.isLoading ? (
-          <div className="s-flex s-h-full s-w-full s-items-center s-justify-center">
-            <Spinner variant="dark" size="md" />
-          </div>
-        ) : (
-          <>
-            <img
-              src={image.imageUrl}
-              alt={image.alt}
-              className="s-h-full s-w-full s-rounded-2xl s-object-cover"
-            />
-            {/* Blur overlay with filename - hidden by default, shown on hover */}
-            <div
-              className={cn(
-                "s-absolute s-inset-0 s-z-10",
-                "s-flex s-items-center s-justify-center",
-                "s-bg-primary-100/80 dark:s-bg-primary-100-night/80",
-                "s-backdrop-blur-sm",
-                "s-opacity-0 s-transition s-duration-200",
-                "group-hover/preview:s-opacity-100"
-              )}
-            >
-              <span
-                className={cn(
-                  "s-max-w-[90%] s-truncate s-px-2 s-text-center",
-                  "s-text-sm s-font-medium",
-                  "s-text-foreground dark:s-text-foreground-night"
-                )}
-              >
-                {image.title}
-              </span>
-            </div>
-            <div
-              className={cn(
-                "s-absolute s-right-1 s-top-1 s-z-10 s-flex",
-                "s-opacity-0 s-transition-opacity s-duration-200",
-                "group-hover/preview:s-opacity-100"
-              )}
-            >
-              {onClose && (
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  icon={XMarkIcon}
-                  className="s-text-white dark:s-text-white"
-                  tooltip="Remove"
-                  onClick={onClose}
-                />
-              )}
-              {!onClose && (
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  icon={ArrowDownOnSquareIcon}
-                  className="s-text-white dark:s-text-white"
-                  tooltip="Download"
-                  onClick={onDownload}
-                />
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    );
-  }
-);
-
-ImagePreview.displayName = "ImagePreview";
-
 const SIZE_CLASSES = {
   sm: "s-h-24 s-w-24",
   md: "s-h-48 s-w-48",
@@ -165,7 +34,6 @@ function InteractiveImageGrid({
   const [currentImageIndex, setCurrentImageIndex] = React.useState<
     number | null
   >(null);
-  const [imageLoaded, setImageLoaded] = React.useState(false);
 
   const handleNext = React.useCallback(() => {
     if (currentImageIndex === null) {
@@ -183,29 +51,12 @@ function InteractiveImageGrid({
     );
   }, [currentImageIndex, images.length]);
 
-  const handleDownload = React.useCallback(
-    async (downloadUrl?: string, title?: string) => {
-      if (!downloadUrl || !title) {
-        return;
-      }
-
-      // Create a hidden link and click it.
-      const link = document.createElement("a");
-      link.href = downloadUrl;
-      link.download = title;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    },
-    []
-  );
-
+  // Keyboard navigation for the zoomed image
   React.useEffect(() => {
     if (currentImageIndex === null) {
       return;
     }
 
-    // Only handle keyboard events if the image is zoomed.
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "ArrowRight") {
         handleNext();
@@ -218,126 +69,68 @@ function InteractiveImageGrid({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [currentImageIndex, handleNext, handlePrevious]);
 
+  const currentImage =
+    currentImageIndex !== null ? images[currentImageIndex] : null;
+
   return (
-    <Dialog
-      open={currentImageIndex !== null}
-      onOpenChange={(open) => !open && setCurrentImageIndex(null)}
-    >
-      <DialogTrigger asChild>
-        <div className={cn("s-@container", className)}>
-          {images.length === 1 ? (
-            <div className={SIZE_CLASSES[size]}>
+    <>
+      <div className={cn("s-@container", className)}>
+        {images.length === 1 ? (
+          <div className={SIZE_CLASSES[size]}>
+            <ImagePreview
+              imgSrc={images[0].imageUrl ?? ""}
+              alt={images[0].alt}
+              title={images[0].title}
+              downloadUrl={images[0].downloadUrl}
+              isLoading={images[0].isLoading}
+              onClick={() => setCurrentImageIndex(0)}
+              onClose={onClose ? () => onClose() : undefined}
+              variant="embedded"
+              titlePosition="center"
+              manageZoomDialog={false}
+            />
+          </div>
+        ) : (
+          <div className="s-grid s-grid-cols-2 s-gap-2 @xxs:s-grid-cols-3 @xs:s-grid-cols-4">
+            {images.map((image, idx) => (
               <ImagePreview
-                image={images[0]}
-                onClick={() => {
-                  setCurrentImageIndex(0);
-                }}
-                onDownload={async (e) => {
-                  e.stopPropagation();
-                  await handleDownload(images[0].downloadUrl, images[0].title);
-                }}
-                onClose={
-                  onClose
-                    ? (e) => {
-                        e.stopPropagation();
-                        onClose();
-                      }
-                    : undefined
-                }
-              />
-            </div>
-          ) : (
-            <div className="s-grid s-grid-cols-2 s-gap-2 @xxs:s-grid-cols-3 @xs:s-grid-cols-4">
-              {images.map((image, idx) => (
-                <ImagePreview
-                  key={idx}
-                  image={image}
-                  onClick={() => {
-                    setCurrentImageIndex(idx);
-                  }}
-                  onDownload={async (e) => {
-                    e.stopPropagation();
-                    await handleDownload(image.downloadUrl, image.title);
-                  }}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </DialogTrigger>
-      <DialogContent size="xl" className="s-max-w-[90vw] s-overflow-hidden s-p-3">
-        {currentImageIndex !== null && (
-          <div className="s-relative s-flex s-items-center s-justify-center s-gap-2">
-            {/* Previous button */}
-            {images.length > 1 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                icon={ChevronLeftIcon}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handlePrevious();
-                }}
+                key={idx}
+                imgSrc={image.imageUrl ?? ""}
+                alt={image.alt}
+                title={image.title}
+                downloadUrl={image.downloadUrl}
+                isLoading={image.isLoading}
+                onClick={() => setCurrentImageIndex(idx)}
+                variant="embedded"
+                titlePosition="center"
+                manageZoomDialog={false}
               />
-            )}
-
-            {/* Image container with overlay buttons */}
-            <div className="s-relative">
-              {images[currentImageIndex].isLoading ? (
-                <ImageLoadingState size="lg" />
-              ) : (
-                <>
-                  <img
-                    src={images[currentImageIndex].imageUrl}
-                    alt={images[currentImageIndex].alt}
-                    className="s-max-h-full s-max-w-full s-rounded-lg s-object-contain"
-                    onLoad={() => setImageLoaded(true)}
-                  />
-                  {/* Close button - top right of image */}
-                  <DialogClose asChild>
-                    <Button
-                      variant="outline"
-                      size="xs"
-                      icon={XMarkIcon}
-                      className="s-absolute s-right-2 s-top-2"
-                    />
-                  </DialogClose>
-                  {/* Download button - bottom right of image */}
-                  {imageLoaded && (
-                    <Button
-                      variant="outline"
-                      size="xs"
-                      icon={ArrowDownOnSquareIcon}
-                      tooltip="Download"
-                      className="s-absolute s-bottom-2 s-right-2"
-                      onClick={async () => {
-                        await handleDownload(
-                          images[currentImageIndex].downloadUrl,
-                          images[currentImageIndex].title
-                        );
-                      }}
-                    />
-                  )}
-                </>
-              )}
-            </div>
-
-            {/* Next button */}
-            {images.length > 1 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                icon={ChevronRightIcon}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleNext();
-                }}
-              />
-            )}
+            ))}
           </div>
         )}
-      </DialogContent>
-    </Dialog>
+      </div>
+      <ImageZoomDialog
+        open={currentImageIndex !== null}
+        onOpenChange={(open) => !open && setCurrentImageIndex(null)}
+        image={{
+          src: currentImage?.imageUrl ?? "",
+          alt: currentImage?.alt,
+          title: currentImage?.title,
+          downloadUrl: currentImage?.downloadUrl,
+          isLoading: currentImage?.isLoading,
+        }}
+        navigation={
+          images.length > 1
+            ? {
+                onPrevious: handlePrevious,
+                onNext: handleNext,
+                hasPrevious: true,
+                hasNext: true,
+              }
+            : undefined
+        }
+      />
+    </>
   );
 }
 

package/src/components/index.ts

@@ -44,7 +44,10 @@ export {
   ContentMessageInline,
 } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
-export type { ConversationListItemProps, ReplySectionProps } from "./ConversationListItem";
+export type {
+  ConversationListItemProps,
+  ReplySectionProps,
+} from "./ConversationListItem";
 export { ConversationListItem, ReplySection } from "./ConversationListItem";
 export {
   ConversationContainer,
@@ -115,6 +118,18 @@ export { Div3D, Hover3D } from "./Hover3D";
 export { Hoverable } from "./Hoverable";
 export { DoubleIcon, Icon } from "./Icon";
 export { IconButton } from "./IconButton";
+export type {
+  ImagePreviewProps,
+  ImagePreviewTitlePositionType,
+  ImagePreviewVariantType,
+} from "./ImagePreview";
+export {
+  IMAGE_PREVIEW_TITLE_POSITIONS,
+  IMAGE_PREVIEW_VARIANTS,
+  ImagePreview,
+} from "./ImagePreview";
+export type { ImageZoomDialogProps } from "./ImageZoomDialog";
+export { downloadFile, ImageZoomDialog } from "./ImageZoomDialog";
 export { Input } from "./Input";
 export { InteractiveImageGrid } from "./InteractiveImageGrid";
 export { Label } from "./Label";