@dust-tt/sparkle 0.2.491 → 0.2.492

package/dist/sparkle.css

@@ -969,8 +969,8 @@ select {
   bottom: 0.25rem;
 }
 
-.s-bottom-4 {
-  bottom: 1rem;
+.s-bottom-3 {
+  bottom: 0.75rem;
 }
 
 .s-bottom-6 {
@@ -1029,10 +1029,6 @@ select {
   right: 0.75rem;
 }
 
-.s-right-4 {
-  right: 1rem;
-}
-
 .s-right-6 {
   right: 1.5rem;
 }
@@ -1061,10 +1057,6 @@ select {
   top: 0.75rem;
 }
 
-.s-top-4 {
-  top: 1rem;
-}
-
 .s-top-6 {
   top: 1.5rem;
 }
@@ -1435,10 +1427,18 @@ select {
   height: 200px;
 }
 
+.s-h-\[240px\] {
+  height: 240px;
+}
+
 .s-h-\[30\%\] {
   height: 30%;
 }
 
+.s-h-\[32px\] {
+  height: 32px;
+}
+
 .s-h-\[340px\] {
   height: 340px;
 }
@@ -1668,6 +1668,10 @@ select {
   width: 250px;
 }
 
+.s-w-\[300px\] {
+  width: 300px;
+}
+
 .s-w-\[350px\] {
   width: 350px;
 }
@@ -1676,6 +1680,10 @@ select {
   width: 380px;
 }
 
+.s-w-\[3px\] {
+  width: 3px;
+}
+
 .s-w-\[420px\] {
   width: 420px;
 }
@@ -1738,10 +1746,6 @@ select {
   min-width: 0px;
 }
 
-.s-min-w-\[1024px\] {
-  min-width: 1024px;
-}
-
 .s-min-w-\[20px\] {
   min-width: 20px;
 }
@@ -1916,6 +1920,28 @@ select {
   animation: s-breathing 3s infinite ease-in-out;
 }
 
+@keyframes s-cursor-blink {
+  0% {
+    opacity: 1;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.s-animate-cursor-blink {
+  animation: s-cursor-blink 0.9s infinite;;
+}
+
 @keyframes s-pulse {
   50% {
     opacity: .5;
@@ -2040,6 +2066,10 @@ select {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.s-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .s-grid-cols-8 {
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
@@ -2368,6 +2398,10 @@ select {
   border-radius: 0.375rem;
 }
 
+.s-rounded-none {
+  border-radius: 0px;
+}
+
 .s-rounded-sm {
   border-radius: 0.125rem;
 }
@@ -2390,6 +2424,10 @@ select {
   border-width: 1px;
 }
 
+.s-border-0 {
+  border-width: 0px;
+}
+
 .s-border-b {
   border-bottom-width: 1px;
 }
@@ -2822,6 +2860,11 @@ select {
   background-color: rgb(233 247 255 / var(--tw-bg-opacity));
 }
 
+.s-bg-brand-support-golden {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 250 224 / var(--tw-bg-opacity));
+}
+
 .s-bg-brand-support-green {
   --tw-bg-opacity: 1;
   background-color: rgb(254 255 240 / var(--tw-bg-opacity));
@@ -2892,6 +2935,11 @@ select {
   background-color: rgb(4 20 10 / var(--tw-bg-opacity));
 }
 
+.s-bg-foreground {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
+}
+
 .s-bg-golden-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 239 168 / var(--tw-bg-opacity));
@@ -4251,6 +4299,10 @@ select {
   padding-right: 0.75rem;
 }
 
+.s-pr-5 {
+  padding-right: 1.25rem;
+}
+
 .s-pr-8 {
   padding-right: 2rem;
 }
@@ -4990,6 +5042,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.s-shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .s-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -5007,6 +5065,12 @@ select {
   outline-offset: 2px;
 }
 
+.s-ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .s-ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5249,10 +5313,14 @@ select {
     opacity: 1;
   }
 
-  90% {
+  60% {
     opacity: 1;
   }
 
+  70% {
+    opacity: 0;
+  }
+
   100% {
     opacity: 0;
   }
@@ -8597,10 +8665,18 @@ select {
 }
 
 @media (min-width: 640px) {
+  .sm\:s-h-full {
+    height: 100%;
+  }
+
   .sm\:s-max-w-3xl {
     max-width: 48rem;
   }
 
+  .sm\:s-max-w-full {
+    max-width: 100%;
+  }
+
   .sm\:s-max-w-md {
     max-width: 28rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.491",
+  "version": "0.2.492",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Dialog.tsx

@@ -4,7 +4,13 @@ import { FocusScope } from "@radix-ui/react-focus-scope";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 
-import { Button, Checkbox, Label, ScrollArea } from "@sparkle/components";
+import {
+  Button,
+  ButtonProps,
+  Checkbox,
+  Label,
+  ScrollArea,
+} from "@sparkle/components";
 import { XMarkIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
@@ -29,13 +35,14 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DIALOG_SIZES = ["md", "lg", "xl"] as const;
+const DIALOG_SIZES = ["md", "lg", "xl", "full"] as const;
 type DialogSizeType = (typeof DIALOG_SIZES)[number];
 
 const sizeClasses: Record<DialogSizeType, string> = {
   md: "sm:s-max-w-md",
   lg: "sm:s-max-w-xl",
   xl: "sm:s-max-w-3xl",
+  full: "sm:s-max-w-full sm:s-h-full",
 };
 
 const dialogVariants = cva(
@@ -90,12 +97,16 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 interface NewDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  buttonSize?: ButtonProps["size"];
+  buttonVariant?: ButtonProps["variant"];
   hideButton?: boolean;
 }
 
 const DialogHeader = ({
   className,
   children,
+  buttonSize = "mini",
+  buttonVariant = "ghost",
   hideButton = false,
   ...props
 }: NewDialogHeaderProps) => (
@@ -108,7 +119,9 @@ const DialogHeader = ({
   >
     {children}
     <DialogClose asChild className="s-absolute s-right-3 s-top-3">
-      {!hideButton && <Button icon={XMarkIcon} variant="ghost" size="mini" />}
+      {!hideButton && (
+        <Button icon={XMarkIcon} variant={buttonVariant} size={buttonSize} />
+      )}
     </DialogClose>
   </div>
 );

package/src/components/InteractiveImageGrid.tsx

@@ -1,11 +1,17 @@
 import React from "react";
 
-import { Button, Spinner } from "@sparkle/components/";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+  Spinner,
+} from "@sparkle/components/";
 import {
   ArrowDownOnSquareIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  XMarkIcon,
 } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
@@ -53,7 +59,7 @@ const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(
         ref={ref}
         onClick={onClick}
         className={cn(
-          "s-group/preview s-relative",
+          "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"
         )}
@@ -113,14 +119,13 @@ interface InteractiveImageGridProps {
   }[];
 }
 
-const InteractiveImageGrid = React.forwardRef<
-  HTMLDivElement,
-  InteractiveImageGridProps
->(({ className, images }, ref) => {
+function InteractiveImageGrid({
+  className,
+  images,
+}: InteractiveImageGridProps) {
   const [currentImageIndex, setCurrentImageIndex] = React.useState<
     number | null
   >(null);
-  const [isZoomed, setIsZoomed] = React.useState(false);
   const [imageLoaded, setImageLoaded] = React.useState(false);
 
   const handleNext = React.useCallback(() => {
@@ -157,7 +162,7 @@ const InteractiveImageGrid = React.forwardRef<
   );
 
   React.useEffect(() => {
-    if (!isZoomed) {
+    if (currentImageIndex === null) {
       return;
     }
 
@@ -167,72 +172,64 @@ const InteractiveImageGrid = React.forwardRef<
         handleNext();
       } else if (e.key === "ArrowLeft") {
         handlePrevious();
-      } else if (e.key === "Escape") {
-        setIsZoomed(false);
-        setCurrentImageIndex(null);
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isZoomed, handleNext, handlePrevious]);
+  }, [currentImageIndex, handleNext, handlePrevious]);
 
   return (
-    <div ref={ref} className={cn("s-@container", className)}>
-      {images.length === 1 ? (
-        <div className="s-h-80 s-w-80">
-          <ImagePreview
-            image={images[0]}
-            onClick={() => {
-              setCurrentImageIndex(0);
-              setIsZoomed(true);
-            }}
-            onDownload={async (e) => {
-              e.stopPropagation();
-              await handleDownload(images[0].downloadUrl, images[0].title);
-            }}
-          />
-        </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);
-                setIsZoomed(true);
-              }}
-              onDownload={async (e) => {
-                e.stopPropagation();
-                await handleDownload(image.downloadUrl, image.title);
-              }}
-            />
-          ))}
-        </div>
-      )}
-
-      {isZoomed && currentImageIndex !== null && (
-        <div
-          className={cn(
-            "s-fixed s-inset-0 s-z-50 s-flex s-items-center s-justify-center",
-            "s-bg-white/95 dark:s-bg-gray-900/95"
-          )}
-        >
-          <div className="s-relative s-flex s-h-full s-w-full s-flex-col">
-            {/* Top bar */}
-            <div className="s-absolute s-right-4 s-top-4 s-z-10 s-flex s-gap-2">
-              <Button
-                variant="outline"
-                size="md"
-                icon={XMarkIcon}
-                tooltip="Close"
+    <Dialog
+      open={currentImageIndex !== null}
+      onOpenChange={(open) => !open && setCurrentImageIndex(null)}
+    >
+      <DialogTrigger asChild>
+        <div className={cn("s-@container", className)}>
+          {images.length === 1 ? (
+            <div className="s-h-80 s-w-80">
+              <ImagePreview
+                image={images[0]}
                 onClick={() => {
-                  setIsZoomed(false);
-                  setCurrentImageIndex(null);
+                  setCurrentImageIndex(0);
+                }}
+                onDownload={async (e) => {
+                  e.stopPropagation();
+                  await handleDownload(images[0].downloadUrl, images[0].title);
                 }}
               />
             </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="full"
+        className="s-rounded-none s-border-0 s-bg-white/95 s-p-0 s-shadow-none s-outline-none s-ring-0 dark:s-bg-gray-900/95"
+      >
+        {currentImageIndex !== null && (
+          <div className="s-relative s-flex s-h-full s-w-full s-flex-col">
+            {/* Top bar */}
+            <DialogHeader
+              buttonVariant="outline"
+              buttonSize="md"
+              className="s-h-6"
+            />
 
             {/* Main content */}
             <div className="s-flex s-flex-1 s-items-center s-justify-center">
@@ -255,7 +252,7 @@ const InteractiveImageGrid = React.forwardRef<
                     src={images[currentImageIndex].imageUrl}
                     alt={images[currentImageIndex].alt}
                     className={cn(
-                      "s-max-h-[90vh] s-min-h-[50vh] s-w-auto s-min-w-[1024px]",
+                      "s-max-h-[90vh] s-min-h-[50vh] s-w-auto s-min-w-[50vh]",
                       "s-checkerboard s-object-contain"
                     )}
                     onLoad={() => setImageLoaded(true)}
@@ -279,7 +276,7 @@ const InteractiveImageGrid = React.forwardRef<
             {!images[currentImageIndex].isLoading && (
               <>
                 {imageLoaded ? (
-                  <div className="s-absolute s-bottom-4 s-right-4 s-z-10">
+                  <div className="s-absolute s-bottom-3 s-right-3 s-z-10">
                     <Button
                       variant="outline"
                       size="md"
@@ -299,11 +296,11 @@ const InteractiveImageGrid = React.forwardRef<
               </>
             )}
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </DialogContent>
+    </Dialog>
   );
-});
+}
 
 InteractiveImageGrid.displayName = "InteractiveImageGrid";
 

package/src/stories/InteractiveImageGrid.stories.tsx

@@ -62,9 +62,17 @@ export const InteractiveImageExample = () => (
       <h2>Interactive Image Grid</h2>
       <InteractiveImageGrid images={images} />
     </div>
+    <div className="s-w-[300px]">
+      <h2>Interactive Image Grid with small width</h2>
+      <InteractiveImageGrid images={images} />
+    </div>
     <div className="s-w-[700px]">
       <h2>Interactive Image Grid with 1 image</h2>
       <InteractiveImageGrid images={images.slice(1, 2)} />
     </div>
+    <div className="s-w-[700px]">
+      <h2>Interactive Image Grid with 1 image (loading)</h2>
+      <InteractiveImageGrid images={images.slice(0, 1)} />
+    </div>
   </div>
 );