@dust-tt/sparkle 0.6.0 → 0.7.1

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="square"
+              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="square"
+                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/ListItem.tsx

@@ -96,17 +96,85 @@ export function ListGroup({ children, className }: ListGroupProps) {
 type ListItemSectionProps = {
   children: ReactNode;
   className?: string;
+  size?: "xs" | "sm";
+  action?: ReactNode;
+  onClick?: () => void;
 };
 
-export function ListItemSection({ children, className }: ListItemSectionProps) {
+const listItemSectionVariants = cva("", {
+  variants: {
+    size: {
+      xs: "s-heading-xs s-uppercase s-pb-2 s-pt-4 s-text-muted-foreground dark:s-text-muted-foreground-night",
+      sm: "s-heading-sm s-bg-muted-background s-p-2 dark:s-bg-muted-background-night/50 s-text-foreground dark:s-text-foreground-night",
+    },
+    interactive: {
+      true: cn(
+        "s-cursor-pointer s-transition s-duration-200",
+        "active:s-bg-primary-100 dark:active:s-bg-primary-100-night"
+      ),
+      false: "",
+    },
+    isHovered: {
+      true: "hover:s-bg-primary-100 hover:dark:s-bg-primary-100-night active:s-bg-primary-150 active:dark:s-bg-primary-150-night",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+    interactive: false,
+    isHovered: false,
+  },
+});
+
+export function ListItemSection({
+  children,
+  className,
+  size = "xs",
+  action,
+  onClick,
+}: ListItemSectionProps) {
+  const [isHoveringAction, setIsHoveringAction] = React.useState(false);
+  const [isHoveringMain, setIsHoveringMain] = React.useState(false);
+
   return (
-    <h3
+    <div
       className={cn(
-        "s-pb-2 s-pt-6 s-text-xs s-font-semibold s-uppercase s-tracking-wide s-text-muted-foreground dark:s-text-muted-foreground-night",
+        listItemSectionVariants({
+          size,
+          interactive: !!onClick,
+          isHovered: !!onClick && isHoveringMain && !isHoveringAction,
+        }),
+        "s-group/section-item s-flex s-items-center s-justify-between",
         className
       )}
+      onClick={onClick}
+      onMouseEnter={() => {
+        setIsHoveringMain(true);
+      }}
+      onMouseLeave={() => {
+        setIsHoveringMain(false);
+        setIsHoveringAction(false);
+      }}
     >
-      {children}
-    </h3>
+      <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
+        {children}
+      </div>
+      {action && (
+        <div
+          className="s-flex s-gap-1"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onMouseEnter={() => {
+            setIsHoveringAction(true);
+          }}
+          onMouseLeave={() => {
+            setIsHoveringAction(false);
+          }}
+        >
+          {action}
+        </div>
+      )}
+    </div>
   );
 }

package/src/components/NavigationList.tsx

@@ -130,6 +130,7 @@ const NavigationListItem = React.forwardRef<
 
     const shouldShowStatusDot = status !== "idle";
     const counterValue = count && count > 0 ? count : undefined;
+    const shouldHideStatusIndicators = Boolean(moreMenu && selected);
 
     return (
       <div
@@ -166,26 +167,28 @@ const NavigationListItem = React.forwardRef<
             {icon && <Icon visual={icon} size="xs" className="s-m-0.5" />}
             {avatar}
             {label && (
-              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
+              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-focus-within/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
                 {label}
               </span>
             )}
-            {counterValue && (
+            {counterValue !== undefined && !shouldHideStatusIndicators && (
               <Counter
                 value={counterValue}
                 size="xs"
                 variant="outline"
                 className={cn(
                   "s-flex-shrink-0 s-translate-x-0.5",
-                  moreMenu && "group-hover/menu-item:s-hidden"
+                  moreMenu &&
+                    "group-hover/menu-item:s-hidden group-focus-within/menu-item:s-hidden"
                 )}
               />
             )}
-            {shouldShowStatusDot && (
+            {shouldShowStatusDot && !shouldHideStatusIndicators && (
               <div
                 className={cn(
                   "s-heading-xs s-flex s-flex-shrink-0 s-items-center s-justify-center s-rounded-full",
-                  moreMenu && "group-hover/menu-item:s-hidden",
+                  moreMenu &&
+                    "group-hover/menu-item:s-hidden group-focus-within/menu-item:s-hidden",
                   getStatusDotColor()
                 )}
               />
@@ -213,7 +216,7 @@ const NavigationListItemAction = React.forwardRef<
       data-sidebar="menu-action"
       className={cn(
         "s-absolute s-right-2 s-top-1.5 s-opacity-0 s-transition-opacity",
-        "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100 group-data-[selected=true]/menu-item:s-opacity-100",
+        "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100",
         className
       )}
       {...props}
@@ -384,32 +387,34 @@ const NavigationListCollapsibleSection = React.forwardRef<
   ) => {
     const isCollapsible = type !== "static";
     const labelElement = (
-      <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
-        <div className={collapseableStyles({ variant, isCollapsible })}>
-          {label}
-        </div>
-        {action && (
-          <div
-            className={cn(
-              "s-m-1.5 s-flex s-gap-1 s-pr-0.5 s-transition-opacity",
-              actionOnHover
-                ? "s-opacity-0 hover:s-opacity-100 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100"
-                : "s-opacity-100"
-            )}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            {action}
-          </div>
+      <div className={collapseableStyles({ variant, isCollapsible })}>
+        {label}
+      </div>
+    );
+
+    const actionElement = action && (
+      <div
+        className={cn(
+          "s-m-1.5 s-flex s-gap-1 s-pr-0.5 s-transition-opacity",
+          actionOnHover
+            ? "s-opacity-0 hover:s-opacity-100 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100"
+            : "s-opacity-100"
         )}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {action}
       </div>
     );
 
     if (type === "static") {
       return (
         <div ref={ref} className={className} {...props}>
-          {labelElement}
+          <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
+            {labelElement}
+            {actionElement}
+          </div>
           <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
         </div>
       );
@@ -425,7 +430,10 @@ const NavigationListCollapsibleSection = React.forwardRef<
     if (type === "collapseAndScroll") {
       return (
         <Collapsible ref={ref} className={className} {...collapsibleProps}>
-          <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+          <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
+            <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+            {actionElement}
+          </div>
           <CollapsibleContent>
             <ScrollArea>
               <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
@@ -439,7 +447,10 @@ const NavigationListCollapsibleSection = React.forwardRef<
     // type === "collapse" (default collapsible behavior)
     return (
       <Collapsible ref={ref} className={className} {...collapsibleProps}>
-        <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+        <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
+          <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+          {actionElement}
+        </div>
         <CollapsibleContent>
           <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
         </CollapsibleContent>

package/src/components/Sheet.tsx

@@ -191,7 +191,7 @@ const SheetHeader = ({
     {...props}
   >
     {children}
-    <SheetClose asChild className="s-absolute s-right-3">
+    <SheetClose asChild className="s-absolute s-right-3 s-top-4">
       {!hideButton && <Button icon={XMarkIcon} variant="ghost" size="sm" />}
     </SheetClose>
   </div>