@dust-tt/sparkle 0.2.481-rc2 → 0.2.481-rc4

package/dist/esm/components/InteractiveImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveImage.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,UAAU,qBAAqB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAsCvB"}
+{"version":3,"file":"InteractiveImage.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqD1B,UAAU,qBAAqB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAsDvB"}

package/dist/esm/components/InteractiveImage.js

@@ -3,9 +3,41 @@ import React from "react";
 import { Dialog, DialogContent, DialogTrigger, IconButton, Spinner, } from "../components";
 import { ArrowDownOnSquareIcon } from "../icons/app";
 import { cn } from "../lib/utils";
+function DownloadButton(_a) {
+    var _this = this;
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "xs" : _b, src = _a.src, title = _a.title;
+    var handleDownload = React.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var link;
+        return __generator(this, function (_a) {
+            if (!src) {
+                return [2 /*return*/];
+            }
+            link = document.createElement("a");
+            link.href = src;
+            link.download = title;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            return [2 /*return*/];
+        });
+    }); }, [src, title]);
+    return (React.createElement(IconButton, { icon: ArrowDownOnSquareIcon, className: cn("s-text-white", className), tooltip: "Download", size: size, onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        e.stopPropagation(); // Prevent image zoom.
+                        return [4 /*yield*/, handleDownload()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); } }));
+}
 export function InteractiveImage(_a) {
     var alt = _a.alt, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, src = _a.src, props = __rest(_a, ["alt", "isLoading", "src"]);
     var _c = __read(React.useState(false), 2), isZoomed = _c[0], setIsZoomed = _c[1];
+    var _d = __read(React.useState(false), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
     var handleZoomToggle = React.useCallback(function () {
         setIsZoomed(!isZoomed);
     }, [isZoomed]);
@@ -20,46 +52,22 @@ export function InteractiveImage(_a) {
                         }
                         handleZoomToggle();
                     }, src: src }, props)))),
-        React.createElement(DialogContent, { className: cn("s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0", "focus:s-outline-none focus:s-ring-0"), size: "xl" },
-            React.createElement("img", { src: src, alt: alt, className: "s-object-contain" }))));
+        React.createElement(DialogContent, { className: cn("s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0", "focus:s-outline-none focus:s-ring-0", "s-rounded-none s-bg-transparent s-shadow-none"), size: "xl" },
+            React.createElement("div", { className: "s-flex s-flex-col" },
+                React.createElement("div", { className: "s-flex s-justify-end" }, imageLoaded && (React.createElement(DownloadButton, { src: src, title: props.title, size: "sm" }))),
+                React.createElement("div", { className: "s-relative s-w-full" },
+                    React.createElement("img", { src: src, alt: alt, className: "s-w-full s-object-contain", onLoad: function () { return setImageLoaded(true); } }))))));
 }
 function LoadingImage() {
     return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
-        React.createElement(Spinner, { variant: "dark", size: "sm" })));
+        React.createElement(Spinner, { variant: "dark", size: "md" })));
 }
 function ImagePreview(_a) {
-    var _this = this;
     var isLoading = _a.isLoading, onClick = _a.onClick, alt = _a.alt, src = _a.src, title = _a.title;
-    var handleDownload = React.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var link;
-        return __generator(this, function (_a) {
-            if (!src) {
-                return [2 /*return*/];
-            }
-            link = document.createElement("a");
-            link.href = src;
-            link.download = title;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            return [2 /*return*/];
-        });
-    }); }, [src, title]);
-    return (React.createElement("div", { onClick: onClick, className: cn("s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl s-bg-muted-background dark:s-bg-muted-background-night", !isLoading && "s-cursor-pointer") }, isLoading ? (React.createElement(LoadingImage, null)) : (React.createElement(React.Fragment, null,
+    return (React.createElement("div", { onClick: onClick, className: cn("s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl", "s-bg-muted-background dark:s-bg-muted-background-night", !isLoading && "s-cursor-pointer") }, isLoading ? (React.createElement(LoadingImage, null)) : (React.createElement(React.Fragment, null,
         React.createElement("img", { src: src, alt: alt, className: "s-h-full s-w-full s-rounded-2xl s-object-cover" }),
-        React.createElement("div", { className: "s-absolute s-inset-0 s-bg-black s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-40" }),
-        React.createElement("div", { className: "s-absolute s-right-3 s-top-3 s-z-10 s-flex s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-100" },
-            React.createElement(IconButton, { icon: ArrowDownOnSquareIcon, className: "s-text-white", tooltip: "Download", size: "xs", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                e.stopPropagation(); // Prevent image zoom.
-                                return [4 /*yield*/, handleDownload()];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); } }))))));
+        React.createElement("div", { className: cn("s-absolute s-inset-0 s-bg-gradient-to-b", "s-from-black/40 s-via-transparent s-to-black/40", "s-opacity-0 s-transition-opacity s-duration-200", "group-hover/preview:s-opacity-100") }),
+        React.createElement("div", { className: cn("s-absolute s-right-3 s-top-3 s-z-10 s-flex", "s-opacity-0 s-transition-opacity s-duration-200", "group-hover/preview:s-opacity-100") },
+            React.createElement(DownloadButton, { src: src, title: title, size: "xs" }))))));
 }
 //# sourceMappingURL=InteractiveImage.js.map

package/dist/esm/components/InteractiveImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveImage.js","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InteractiveImage.js","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -2311,6 +2311,10 @@ select {
   border-radius: 0.375rem;
 }
 
+.s-rounded-none {
+  border-radius: 0px;
+}
+
 .s-rounded-sm {
   border-radius: 0.125rem;
 }
@@ -2674,11 +2678,6 @@ select {
   background-color: rgb(255 255 255 / 0.8);
 }
 
-.s-bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
 .s-bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 235 255 / var(--tw-bg-opacity));
@@ -3563,6 +3562,10 @@ select {
   background-color: rgb(169 184 169 / var(--tw-bg-opacity));
 }
 
+.s-bg-transparent {
+  background-color: transparent;
+}
+
 .s-bg-violet-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(237 233 254 / var(--tw-bg-opacity));
@@ -3697,6 +3700,10 @@ select {
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
+.s-bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
 .s-bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -3709,6 +3716,12 @@ select {
   background-image: linear-gradient(90deg, #7AC6FF, #1C91FF, #a855f7, #4BABFF, #0A6CC6);
 }
 
+.s-from-black\/40 {
+  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .s-from-cyan-500 {
   --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
@@ -3826,6 +3839,11 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), #04140A var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.s-via-transparent {
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .s-via-warning-950 {
   --tw-gradient-to: rgb(34 10 4 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #220A04 var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -3835,6 +3853,10 @@ select {
   --tw-gradient-via-position: 50%;
 }
 
+.s-to-black\/40 {
+  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
+}
+
 .s-to-blue-500 {
   --tw-gradient-to: #1C91FF var(--tw-gradient-to-position);
 }
@@ -4899,6 +4921,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);
@@ -5811,10 +5839,6 @@ select {
   opacity: 1;
 }
 
-.s-group\/preview:hover .group-hover\/preview\:s-opacity-40 {
-  opacity: 0.4;
-}
-
 .s-group\/tree:hover .group-hover\/tree\:s-opacity-100 {
   opacity: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.481-rc2",
+  "version": "0.2.481-rc4",
   "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/InteractiveImage.tsx

@@ -10,6 +10,47 @@ import {
 import { ArrowDownOnSquareIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
+interface DownloadButtonProps {
+  className?: string;
+  size?: "xs" | "sm";
+  src?: string;
+  title: string;
+}
+
+function DownloadButton({
+  className,
+  size = "xs",
+  src,
+  title,
+}: DownloadButtonProps) {
+  const handleDownload = React.useCallback(async () => {
+    if (!src) {
+      return;
+    }
+
+    // Create a hidden link and click it.
+    const link = document.createElement("a");
+    link.href = src;
+    link.download = title;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [src, title]);
+
+  return (
+    <IconButton
+      icon={ArrowDownOnSquareIcon}
+      className={cn("s-text-white", className)}
+      tooltip="Download"
+      size={size}
+      onClick={async (e) => {
+        e.stopPropagation(); // Prevent image zoom.
+        await handleDownload();
+      }}
+    />
+  );
+}
+
 interface InteractiveImageProps {
   alt: string;
   isLoading?: boolean;
@@ -24,6 +65,7 @@ export function InteractiveImage({
   ...props
 }: InteractiveImageProps) {
   const [isZoomed, setIsZoomed] = React.useState(false);
+  const [imageLoaded, setImageLoaded] = React.useState(false);
 
   const handleZoomToggle = React.useCallback(() => {
     setIsZoomed(!isZoomed);
@@ -52,11 +94,26 @@ export function InteractiveImage({
       <DialogContent
         className={cn(
           "s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0",
-          "focus:s-outline-none focus:s-ring-0"
+          "focus:s-outline-none focus:s-ring-0",
+          "s-rounded-none s-bg-transparent s-shadow-none"
         )}
         size="xl"
       >
-        <img src={src} alt={alt} className="s-object-contain" />
+        <div className="s-flex s-flex-col">
+          <div className="s-flex s-justify-end">
+            {imageLoaded && (
+              <DownloadButton src={src} title={props.title} size="sm" />
+            )}
+          </div>
+          <div className="s-relative s-w-full">
+            <img
+              src={src}
+              alt={alt}
+              className="s-w-full s-object-contain"
+              onLoad={() => setImageLoaded(true)}
+            />
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   );
@@ -65,7 +122,7 @@ export function InteractiveImage({
 function LoadingImage() {
   return (
     <div className="s-flex s-h-full s-w-full s-items-center s-justify-center">
-      <Spinner variant="dark" size="sm" />
+      <Spinner variant="dark" size="md" />
     </div>
   );
 }
@@ -81,25 +138,12 @@ function ImagePreview({
   src,
   title,
 }: ImagePreviewProps) {
-  const handleDownload = React.useCallback(async () => {
-    if (!src) {
-      return;
-    }
-
-    // Create a hidden link and click it.
-    const link = document.createElement("a");
-    link.href = src;
-    link.download = title;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }, [src, title]);
-
   return (
     <div
       onClick={onClick}
       className={cn(
-        "s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl s-bg-muted-background dark:s-bg-muted-background-night",
+        "s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl",
+        "s-bg-muted-background dark:s-bg-muted-background-night",
         !isLoading && "s-cursor-pointer"
       )}
     >
@@ -113,19 +157,23 @@ function ImagePreview({
             className="s-h-full s-w-full s-rounded-2xl s-object-cover"
           />
           {/* Dark overlay on hover */}
-          <div className="s-absolute s-inset-0 s-bg-black s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-40" />
+          <div
+            className={cn(
+              "s-absolute s-inset-0 s-bg-gradient-to-b",
+              "s-from-black/40 s-via-transparent s-to-black/40",
+              "s-opacity-0 s-transition-opacity s-duration-200",
+              "group-hover/preview:s-opacity-100"
+            )}
+          />
           {/* Icon container - only visible on hover */}
-          <div className="s-absolute s-right-3 s-top-3 s-z-10 s-flex s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-100">
-            <IconButton
-              icon={ArrowDownOnSquareIcon}
-              className="s-text-white"
-              tooltip="Download"
-              size="xs"
-              onClick={async (e) => {
-                e.stopPropagation(); // Prevent image zoom.
-                await handleDownload();
-              }}
-            />
+          <div
+            className={cn(
+              "s-absolute s-right-3 s-top-3 s-z-10 s-flex",
+              "s-opacity-0 s-transition-opacity s-duration-200",
+              "group-hover/preview:s-opacity-100"
+            )}
+          >
+            <DownloadButton src={src} title={title} size="xs" />
           </div>
         </>
       )}