dune-react 0.0.31 → 0.0.33

package/dist/components/puck-base/image.js

@@ -1,360 +0,0 @@
-"use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from "react";
-import Cropper from "react-easy-crop";
-import { Pencil, Search, Upload, Loader2, Check } from "lucide-react";
-import { cn } from "../../utils/css-utils.js";
-import { withEditable } from "../puck-core/core/with-editable.js";
-import { Button } from "../shadcn/button.js";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../shadcn/dialog.js";
-import { Input } from "../shadcn/input.js";
-import { Label } from "../shadcn/label.js";
-import { ScrollArea } from "../shadcn/scroll-area.js";
-import { Slider } from "../shadcn/slider.js";
-import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
-import useUpload from "../puck-core/use-upload.js";
-import { useEditorContext } from "../puck-core/core/context/editor-context.js";
-import { imageField } from "../puck-core/core/props/media.js";
-const createImage = (url) => new Promise((resolve, reject) => {
-  const image = new Image();
-  image.addEventListener("load", () => resolve(image));
-  image.addEventListener("error", (error) => reject(error));
-  image.setAttribute("crossOrigin", "anonymous");
-  image.src = url;
-});
-const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
-  const image = await createImage(imageSrc);
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  const maxSize = Math.max(image.width, image.height);
-  const safeArea = 2 * (maxSize / 2 * Math.sqrt(2));
-  canvas.width = safeArea;
-  canvas.height = safeArea;
-  ctx.translate(safeArea / 2, safeArea / 2);
-  ctx.rotate(rotation * Math.PI / 180);
-  ctx.translate(-safeArea / 2, -safeArea / 2);
-  ctx.drawImage(
-    image,
-    safeArea / 2 - image.width * 0.5,
-    safeArea / 2 - image.height * 0.5
-  );
-  const data = ctx.getImageData(0, 0, safeArea, safeArea);
-  canvas.width = pixelCrop.width;
-  canvas.height = pixelCrop.height;
-  ctx.putImageData(
-    data,
-    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
-    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
-  );
-  return new Promise((resolve) => {
-    canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
-  });
-};
-const DEFAULT_LIBRARY_IMAGES = [];
-function CompoundImageBase(props) {
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: props.src,
-      alt: props.alt,
-      className: cn("block h-full w-full", props.className)
-    }
-  );
-}
-function ImageEditDialog({
-  open,
-  onOpenChange,
-  initialData,
-  onSave
-}) {
-  const [tab, setTab] = useState("library");
-  const [alt, setAlt] = useState(initialData.alt ?? "");
-  const [libraryImages, setLibraryImages] = useState(
-    DEFAULT_LIBRARY_IMAGES
-  );
-  const [isLoadingImages, setIsLoadingImages] = useState(false);
-  const { fetchLibraryImages } = useEditorContext();
-  useEffect(() => {
-    if (!open || !fetchLibraryImages) return;
-    setIsLoadingImages(true);
-    fetchLibraryImages().then((images) => {
-      if (images.length > 0) setLibraryImages(images);
-    }).catch(() => {
-    }).finally(() => setIsLoadingImages(false));
-  }, [open, fetchLibraryImages]);
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-  const [rotation, setRotation] = useState(0);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
-  const [selectedImg, setSelectedImg] = useState(null);
-  const replaceInputRef = useRef(null);
-  const handleClose = useCallback(() => {
-    onOpenChange(false);
-    setCrop({ x: 0, y: 0 });
-    setZoom(1);
-    setRotation(0);
-    setSelectedImg(null);
-  }, [onOpenChange]);
-  const { upload: uploadCrop, isUploading: isCropUploading } = useUpload({
-    onSuccess: (url) => {
-      onSave({ src: url, alt });
-      handleClose();
-    }
-  });
-  const { upload: uploadReplace, isUploading: isReplaceUploading } = useUpload({
-    onSuccess: (url) => {
-      onSave({ src: url, alt });
-      handleClose();
-    }
-  });
-  const handleCropSave = useCallback(async () => {
-    if (!croppedAreaPixels || !initialData.src) return;
-    try {
-      const croppedBlob = await getCroppedImg(
-        initialData.src,
-        croppedAreaPixels,
-        rotation
-      );
-      const file = new File([croppedBlob], "cropped-image.jpg", {
-        type: "image/jpeg"
-      });
-      await uploadCrop(file);
-    } catch (error) {
-      console.error("Crop failed:", error);
-    }
-  }, [croppedAreaPixels, initialData.src, rotation, uploadCrop]);
-  const handleFileReplace = useCallback(
-    (e) => {
-      var _a;
-      const file = (_a = e.target.files) == null ? void 0 : _a[0];
-      if (file) uploadReplace(file);
-      e.target.value = "";
-    },
-    [uploadReplace]
-  );
-  const handleLibraryDone = useCallback(() => {
-    if (!selectedImg) return;
-    onSave({ src: selectedImg, alt });
-    handleClose();
-  }, [selectedImg, alt, onSave, handleClose]);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => !o && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-lg flex-col gap-0 overflow-hidden p-0", children: [
-    /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 pt-5 pb-0", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: "Edit Image" }) }),
-    /* @__PURE__ */ jsxs(
-      Tabs,
-      {
-        value: tab,
-        onValueChange: (v) => setTab(v),
-        className: "flex flex-1 flex-col overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsxs(TabsList, { className: "mx-6 mt-3 bg-transparent", children: [
-            /* @__PURE__ */ jsxs(TabsTrigger, { value: "adjust", children: [
-              /* @__PURE__ */ jsx(Pencil, {}),
-              "Crop"
-            ] }),
-            /* @__PURE__ */ jsxs(TabsTrigger, { value: "library", children: [
-              /* @__PURE__ */ jsx(Search, {}),
-              "Library"
-            ] }),
-            /* @__PURE__ */ jsxs(TabsTrigger, { value: "upload", children: [
-              /* @__PURE__ */ jsx(Upload, {}),
-              "Upload"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex-1 overflow-hidden", children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", tab !== "adjust" && "hidden"), children: [
-              /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
-                Cropper,
-                {
-                  image: initialData.src,
-                  crop,
-                  zoom,
-                  rotation,
-                  aspect: 16 / 9,
-                  onCropChange: setCrop,
-                  onZoomChange: setZoom,
-                  onRotationChange: setRotation,
-                  onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 px-6 py-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
-                  /* @__PURE__ */ jsx(
-                    Slider,
-                    {
-                      className: "flex",
-                      value: [zoom],
-                      onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals),
-                      min: 1,
-                      max: 3,
-                      step: 0.1
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
-                  /* @__PURE__ */ jsx(
-                    Slider,
-                    {
-                      className: "flex",
-                      value: [rotation],
-                      onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals),
-                      min: 0,
-                      max: 360,
-                      step: 1
-                    }
-                  )
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "flex flex-col gap-3 px-6 py-4",
-                  tab !== "library" && "hidden"
-                ),
-                children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
-                  /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
-                ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
-                  const isSelected = selectedImg === src;
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setSelectedImg(src),
-                      className: `relative aspect-4/3 overflow-hidden rounded-lg border-2 transition-all ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-transparent hover:border-gray-300"}`,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            src,
-                            alt: "",
-                            className: "h-full w-full object-cover"
-                          }
-                        ),
-                        isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) })
-                      ]
-                    },
-                    src
-                  );
-                }) }) })
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex flex-col items-center justify-center gap-4 px-6 py-14",
-                  tab !== "upload" && "hidden"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-gray-400" }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "Upload a new image to replace the current one" }),
-                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Supports JPG, PNG, WebP formats" })
-                  ] }),
-                  /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "outline",
-                      size: "sm",
-                      onClick: () => {
-                        var _a;
-                        return (_a = replaceInputRef.current) == null ? void 0 : _a.click();
-                      },
-                      disabled: isReplaceUploading,
-                      children: [
-                        isReplaceUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
-                        "Choose File"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ref: replaceInputRef,
-                      type: "file",
-                      accept: "image/*",
-                      onChange: handleFileReplace,
-                      className: "hidden"
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "border-t px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(Label, { className: "flex-none", children: "Alt Text" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: alt,
-          onChange: (e) => setAlt(e.target.value),
-          placeholder: "Image description..."
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(DialogFooter, { className: "border-t px-6 py-3", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, children: "Cancel" }),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          size: "sm",
-          disabled: tab === "library" && !selectedImg || tab === "adjust" && isCropUploading,
-          onClick: () => {
-            if (tab === "library") handleLibraryDone();
-            else if (tab === "adjust") handleCropSave();
-            else if (tab === "upload") {
-              onSave({ alt });
-              handleClose();
-            }
-          },
-          children: [
-            isCropUploading && /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }),
-            "Done"
-          ]
-        }
-      )
-    ] })
-  ] }) });
-}
-const EditableImage = withEditable(CompoundImageBase, {
-  type: "image",
-  fields: imageField.objectFields
-});
-const CompoundImage = (props) => {
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [dialogData, setDialogData] = useState(null);
-  const [onSaveCallback, setOnSaveCallback] = useState(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      EditableImage,
-      {
-        ...props,
-        onEdit: (currentProps, onSave) => {
-          setDialogData(currentProps);
-          setOnSaveCallback(() => onSave);
-          setDialogOpen(true);
-        }
-      }
-    ),
-    dialogOpen && dialogData && onSaveCallback && /* @__PURE__ */ jsx(
-      ImageEditDialog,
-      {
-        open: dialogOpen,
-        onOpenChange: setDialogOpen,
-        initialData: dialogData,
-        onSave: onSaveCallback
-      }
-    )
-  ] });
-};
-export {
-  CompoundImage
-};

package/dist/components/puck-core/fields/image-upload-field.d.ts

@@ -1,7 +0,0 @@
-interface ImageUploadFieldProps {
-    name: string;
-    value: string;
-    onChange: (value: string) => void;
-}
-export declare function ImageUploadField({ name, value, onChange, }: ImageUploadFieldProps): import("react/jsx-runtime").JSX.Element;
-export {};