@dust-tt/sparkle 0.2.490 → 0.2.491

package/src/stories/InteractiveImageGrid.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { InteractiveImageGrid } from "@sparkle/components/InteractiveImageGrid";
+
+import { Citation } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Citation",
+  component: Citation,
+} satisfies Meta<typeof Citation>;
+
+export default meta;
+
+const images = [
+  {
+    alt: "Example of a loading interactive image",
+    isLoading: true,
+    title: "Example of a loading interactive image",
+  },
+  {
+    alt: "Example of an interactive image",
+    downloadUrl: "https://dust.tt/static/droidavatar/Droid_Lime_2.jpg",
+    imageUrl: "https://dust.tt/static/droidavatar/Droid_Lime_2.jpg",
+    title: "Example of an interactive image",
+  },
+  {
+    alt: "Example of an interactive image",
+    downloadUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+    imageUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+    title: "Example of an interactive image",
+  },
+  {
+    alt: "Example of an interactive image",
+    downloadUrl: "https://dust.tt/static/droidavatar/Droid_Lime_4.jpg",
+    imageUrl: "https://dust.tt/static/droidavatar/Droid_Lime_4.jpg",
+    title: "Example of an interactive image",
+  },
+  {
+    alt: "Example of an interactive image",
+    downloadUrl: "https://dust.tt/static/droidavatar/Droid_Lime_5.jpg",
+    imageUrl: "https://dust.tt/static/droidavatar/Droid_Lime_5.jpg",
+    title: "Example of an interactive image",
+  },
+  {
+    alt: "Example of an interactive image",
+    downloadUrl: "https://dust.tt/static/droidavatar/Droid_Lime_6.jpg",
+    imageUrl: "https://dust.tt/static/droidavatar/Droid_Lime_6.jpg",
+    title: "Example of an interactive image",
+  },
+  {
+    alt: "Example of an interactive PNG image",
+    downloadUrl: "https://dust.tt/static/DustHorizontalIcon.png",
+    imageUrl: "https://dust.tt/static/DustHorizontalIcon.png",
+    title: "Example of an interactive image",
+  },
+];
+
+export const InteractiveImageExample = () => (
+  <div className="s-flex s-flex-col s-gap-8">
+    <div className="s-w-[700px]">
+      <h2>Interactive Image Grid</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>
+);

package/src/styles/global.css

@@ -22,6 +22,36 @@
   }
 }
 
+@layer utilities {
+  .s-checkerboard {
+    background-image: linear-gradient(
+        45deg,
+        var(--tw-checker-color) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--tw-checker-color) 75%
+      ),
+      linear-gradient(
+        45deg,
+        var(--tw-checker-color) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--tw-checker-color) 75%
+      );
+    background-size: 40px 40px;
+    background-position:
+      0 0,
+      20px 20px;
+    background-color: theme("colors.white"); /* Base color */
+    --tw-checker-color: theme("colors.gray.50"); /* Pattern color */
+  }
+
+  .s-dark .s-checkerboard {
+    background-color: theme("colors.black"); /* Dark mode base color */
+    --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
+  }
+}
+
 .s-blinking-cursor > :not(pre):last-child::after {
   content: "";
   width: 8px;

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

@@ -1,11 +0,0 @@
-import React from "react";
-interface InteractiveImageProps {
-    alt: string;
-    downloadUrl?: string;
-    imageUrl?: string;
-    isLoading?: boolean;
-    title: string;
-}
-export declare function InteractiveImage({ alt, downloadUrl, imageUrl, isLoading, ...props }: InteractiveImageProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=InteractiveImage.d.ts.map

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

@@ -1 +0,0 @@
-{"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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,WAAW,EACX,QAAQ,EACR,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA2DvB"}

package/dist/esm/components/InteractiveImage.js

@@ -1,73 +0,0 @@
-import { __assign, __awaiter, __generator, __read, __rest } from "tslib";
-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, downloadUrl = _a.downloadUrl, _b = _a.size, size = _b === void 0 ? "xs" : _b, title = _a.title;
-    var handleDownload = React.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var link;
-        return __generator(this, function (_a) {
-            if (!downloadUrl) {
-                return [2 /*return*/];
-            }
-            link = document.createElement("a");
-            link.href = downloadUrl;
-            link.download = title;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            return [2 /*return*/];
-        });
-    }); }, [downloadUrl, 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, downloadUrl = _a.downloadUrl, imageUrl = _a.imageUrl, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, props = __rest(_a, ["alt", "downloadUrl", "imageUrl", "isLoading"]);
-    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]);
-    return (React.createElement(Dialog, { open: isZoomed, onOpenChange: handleZoomToggle },
-        React.createElement(DialogTrigger, { asChild: true },
-            React.createElement("div", { className: "s-aspect-square s-h-80 s-w-80" },
-                React.createElement(ImagePreview, __assign({ alt: alt, downloadUrl: downloadUrl !== null && downloadUrl !== void 0 ? downloadUrl : imageUrl, isLoading: isLoading, onClick: function (e) {
-                        if (isLoading) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            return;
-                        }
-                        handleZoomToggle();
-                    }, imageUrl: imageUrl }, 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", "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, { downloadUrl: downloadUrl !== null && downloadUrl !== void 0 ? downloadUrl : imageUrl, title: props.title, size: "md" }))),
-                React.createElement("div", { className: "s-relative s-w-full" },
-                    React.createElement("img", { src: imageUrl, 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: "md" })));
-}
-function ImagePreview(_a) {
-    var alt = _a.alt, downloadUrl = _a.downloadUrl, imageUrl = _a.imageUrl, isLoading = _a.isLoading, onClick = _a.onClick, title = _a.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,
-        React.createElement("img", { src: imageUrl, alt: alt, className: "s-h-full s-w-full s-rounded-2xl s-object-cover" }),
-        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, { downloadUrl: downloadUrl, title: title, size: "xs" }))))));
-}
-//# sourceMappingURL=InteractiveImage.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"InteractiveImage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/InteractiveImage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,uBAAuB,yBAwBnC,CAAC"}

package/dist/esm/stories/InteractiveImage.stories.js

@@ -1,17 +0,0 @@
-import React from "react";
-import { InteractiveImage } from "../components/InteractiveImage";
-import { Citation } from "../index_with_tw_base";
-var meta = {
-    title: "Components/Citation",
-    component: Citation,
-};
-export default meta;
-export var InteractiveImageExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-8" },
-    "Example of interactive image",
-    React.createElement("h2", null, "Loading"),
-    React.createElement(InteractiveImage, { alt: "Example of a loading interactive image", isLoading: true, title: "Example of a loading interactive image" }),
-    React.createElement("h2", null, "Loaded"),
-    React.createElement(InteractiveImage, { alt: "Example of an interactive image", downloadUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", imageUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", title: "Example of an interactive image" }),
-    React.createElement("h3", null, "With 4:3 aspect ratio"),
-    React.createElement(InteractiveImage, { alt: "Example of a 4:3 aspect ratio interactive image", downloadUrl: "https://upload.wikimedia.org/wikipedia/commons/d/de/Aspect-ratio-4x3.svg", imageUrl: "https://upload.wikimedia.org/wikipedia/commons/d/de/Aspect-ratio-4x3.svg", title: "Example of a 4:3 aspect ratio interactive image" }))); };
-//# sourceMappingURL=InteractiveImage.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InteractiveImage.stories.js","sourceRoot":"","sources":["../../../src/stories/InteractiveImage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,6BAAK,SAAS,EAAC,2BAA2B;;IAExC,0CAAgB;IAChB,oBAAC,gBAAgB,IACf,GAAG,EAAC,wCAAwC,EAC5C,SAAS,EAAE,IAAI,EACf,KAAK,EAAC,wCAAwC,GAC9C;IACF,yCAAe;IACf,oBAAC,gBAAgB,IACf,GAAG,EAAC,iCAAiC,EACrC,WAAW,EAAC,qDAAqD,EACjE,QAAQ,EAAC,qDAAqD,EAC9D,KAAK,EAAC,iCAAiC,GACvC;IACF,wDAA8B;IAC9B,oBAAC,gBAAgB,IACf,GAAG,EAAC,iDAAiD,EACrD,WAAW,EAAC,0EAA0E,EACtF,QAAQ,EAAC,0EAA0E,EACnF,KAAK,EAAC,iDAAiD,GACvD,CACE,CACP,EAxB4C,CAwB5C,CAAC"}

package/src/components/InteractiveImage.tsx

@@ -1,190 +0,0 @@
-import React from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-  IconButton,
-  Spinner,
-} from "@sparkle/components/";
-import { ArrowDownOnSquareIcon } from "@sparkle/icons/app";
-import { cn } from "@sparkle/lib/utils";
-
-interface DownloadButtonProps {
-  className?: string;
-  downloadUrl?: string;
-  size?: "xs" | "sm" | "md";
-  title: string;
-}
-
-function DownloadButton({
-  className,
-  downloadUrl,
-  size = "xs",
-  title,
-}: DownloadButtonProps) {
-  const handleDownload = React.useCallback(async () => {
-    if (!downloadUrl) {
-      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);
-  }, [downloadUrl, 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;
-  downloadUrl?: string;
-  imageUrl?: string;
-  isLoading?: boolean;
-  title: string;
-}
-
-export function InteractiveImage({
-  alt,
-  downloadUrl,
-  imageUrl,
-  isLoading = false,
-  ...props
-}: InteractiveImageProps) {
-  const [isZoomed, setIsZoomed] = React.useState(false);
-  const [imageLoaded, setImageLoaded] = React.useState(false);
-
-  const handleZoomToggle = React.useCallback(() => {
-    setIsZoomed(!isZoomed);
-  }, [isZoomed]);
-
-  return (
-    <Dialog open={isZoomed} onOpenChange={handleZoomToggle}>
-      <DialogTrigger asChild>
-        <div className="s-aspect-square s-h-80 s-w-80">
-          <ImagePreview
-            alt={alt}
-            downloadUrl={downloadUrl ?? imageUrl}
-            isLoading={isLoading}
-            onClick={(e) => {
-              if (isLoading) {
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-              }
-              handleZoomToggle();
-            }}
-            imageUrl={imageUrl}
-            {...props}
-          />
-        </div>
-      </DialogTrigger>
-      <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"
-      >
-        <div className="s-flex s-flex-col">
-          <div className="s-flex s-justify-end">
-            {imageLoaded && (
-              <DownloadButton
-                downloadUrl={downloadUrl ?? imageUrl}
-                title={props.title}
-                size="md"
-              />
-            )}
-          </div>
-          <div className="s-relative s-w-full">
-            <img
-              src={imageUrl}
-              alt={alt}
-              className="s-w-full s-object-contain"
-              onLoad={() => setImageLoaded(true)}
-            />
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function LoadingImage() {
-  return (
-    <div className="s-flex s-h-full s-w-full s-items-center s-justify-center">
-      <Spinner variant="dark" size="md" />
-    </div>
-  );
-}
-
-type ImagePreviewProps = InteractiveImageProps & {
-  onClick?: (e: React.MouseEvent) => void;
-};
-
-function ImagePreview({
-  alt,
-  downloadUrl,
-  imageUrl,
-  isLoading,
-  onClick,
-  title,
-}: ImagePreviewProps) {
-  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",
-        !isLoading && "s-cursor-pointer"
-      )}
-    >
-      {isLoading ? (
-        <LoadingImage />
-      ) : (
-        <>
-          <img
-            src={imageUrl}
-            alt={alt}
-            className="s-h-full s-w-full s-rounded-2xl s-object-cover"
-          />
-          {/* Dark overlay on hover */}
-          <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={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 downloadUrl={downloadUrl} title={title} size="xs" />
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/src/stories/InteractiveImage.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-
-import { InteractiveImage } from "@sparkle/components/InteractiveImage";
-
-import { Citation } from "../index_with_tw_base";
-
-const meta = {
-  title: "Components/Citation",
-  component: Citation,
-} satisfies Meta<typeof Citation>;
-
-export default meta;
-
-export const InteractiveImageExample = () => (
-  <div className="s-flex s-flex-col s-gap-8">
-    Example of interactive image
-    <h2>Loading</h2>
-    <InteractiveImage
-      alt="Example of a loading interactive image"
-      isLoading={true}
-      title="Example of a loading interactive image"
-    />
-    <h2>Loaded</h2>
-    <InteractiveImage
-      alt="Example of an interactive image"
-      downloadUrl="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg"
-      imageUrl="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg"
-      title="Example of an interactive image"
-    />
-    <h3>With 4:3 aspect ratio</h3>
-    <InteractiveImage
-      alt="Example of a 4:3 aspect ratio interactive image"
-      downloadUrl="https://upload.wikimedia.org/wikipedia/commons/d/de/Aspect-ratio-4x3.svg"
-      imageUrl="https://upload.wikimedia.org/wikipedia/commons/d/de/Aspect-ratio-4x3.svg"
-      title="Example of a 4:3 aspect ratio interactive image"
-    />
-  </div>
-);