dune-react 0.0.4 → 0.0.5

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

@@ -0,0 +1,280 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import Cropper from "react-easy-crop";
+import { Pencil, Search, Upload, Check, Loader2 } from "lucide-react";
+import { cn } from "../../utils/css-utils.js";
+import { withEditable } from "./core/with-editable.js";
+import { image } from "./core/fields.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 "./use-upload.js";
+const createImage = (url) => new Promise((resolve, reject) => {
+  const image2 = new Image();
+  image2.addEventListener("load", () => resolve(image2));
+  image2.addEventListener("error", (error) => reject(error));
+  image2.setAttribute("crossOrigin", "anonymous");
+  image2.src = url;
+});
+const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
+  const image2 = await createImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const maxSize = Math.max(image2.width, image2.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(image2, safeArea / 2 - image2.width * 0.5, safeArea / 2 - image2.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 + image2.width * 0.5 - pixelCrop.x),
+    Math.round(0 - safeArea / 2 + image2.height * 0.5 - pixelCrop.y)
+  );
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
+  });
+};
+const LIBRARY_IMAGES = [
+  "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=300&fit=crop",
+  "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=300&fit=crop",
+  "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=400&h=300&fit=crop",
+  "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&h=300&fit=crop",
+  "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=400&h=300&fit=crop",
+  "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop",
+  "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop"
+];
+function CompoundImageBase(props) {
+  return /* @__PURE__ */ jsx("img", { src: props.src, alt: props.alt, className: cn("block h-full w-full object-cover", props.className) });
+}
+function ImageEditDialog({
+  open,
+  onOpenChange,
+  initialData,
+  onSave
+}) {
+  const [tab, setTab] = useState("library");
+  const [alt, setAlt] = useState(initialData.alt ?? "");
+  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-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
+              /* @__PURE__ */ jsx(Slider, { 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-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
+              /* @__PURE__ */ jsx(Slider, { 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: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: LIBRARY_IMAGES.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: image.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-base/index.d.ts

@@ -0,0 +1,23 @@
+export { CompoundBadge, type CompoundBadgeProps } from "./badge";
+export { CompoundButton, type CompoundButtonProps } from "./button";
+export { CompoundCard, type CompoundCardProps } from "./card";
+export { CompoundContainer, type CompoundContainerProps, type SectionStyle, type OverlayStyle } from "./container";
+export { CompoundContent, type CompoundContentProps } from "./content";
+export { CompoundField, type CompoundFieldProps, fieldTypes, type FieldTypes } from "./field";
+export { CompoundForm, type CompoundFormProps, formMethods, type FormMethods } from "./form";
+export { CompoundImage, type CompoundImageProps } from "./image";
+export { CompoundArticleCard, type CompoundArticleCardProps } from "./article-card";
+export { ImageUploadField } from "./image-upload-field";
+export { ActionField } from "./action-field";
+export { ErrorBoundary } from "./error-boundary";
+export { GradientText, type GradientTextProps } from "./gradient-text";
+export { InlineEditable } from "./inline-editable";
+export { type IconName, type Feature, type ActionType, type Action, resolveActionUrl, } from "./core/types";
+export { withEditable } from "./core/with-editable";
+export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuckGetSelectorForId, type PuckComponentInfo, } from "./core/hooks";
+export { findComponentById, getRandomAdjective } from "./core/utils";
+export { icon, action, actionDefaults, button, buttons, badge, image, images, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";
+export { EditorContextProvider, useEditorContext } from "./editor-context";
+export { AutoField } from "./fields/auto-field";
+export { type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields/types";
+export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";

package/dist/components/puck-base/inline-editable.d.ts

@@ -0,0 +1,14 @@
+interface InlineEditableProps {
+    value: string;
+    componentId: string;
+    propPath: string;
+    className?: string;
+    tag?: string;
+}
+/**
+ * 数组项字段的行内编辑文本组件。
+ * 编辑器模式：contentEditable 元素，注册到 Puck overlay，失焦时同步到 Puck 状态。
+ * 非编辑器模式：渲染纯文本。
+ */
+export declare function InlineEditable(props: InlineEditableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/puck-base/inline-editable.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement, useRef, useEffect, useCallback } from "react";
+import { registerOverlayPortal } from "@puckeditor/core";
+import { useEditorContext } from "./editor-context.js";
+import { usePuckDispatch } from "./core/hooks.js";
+import set from "../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
+import { findComponentById } from "./core/utils.js";
+function InlineEditableEditor({
+  value,
+  componentId,
+  propPath,
+  className,
+  tag = "span"
+}) {
+  const dispatch = usePuckDispatch();
+  const elRef = useRef(null);
+  useEffect(() => {
+    if (!elRef.current) return;
+    return registerOverlayPortal(elRef.current, { disableDrag: true });
+  }, []);
+  const handleBlur = useCallback(
+    (e) => {
+      const newValue = e.currentTarget.textContent || "";
+      if (newValue === value) return;
+      dispatch({
+        type: "setData",
+        data: (prevData) => {
+          const newData = JSON.parse(JSON.stringify(prevData));
+          const component = findComponentById(newData, componentId);
+          if (component) {
+            set(component.props, propPath, newValue);
+          }
+          return newData;
+        }
+      });
+    },
+    [value, componentId, propPath, dispatch]
+  );
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      e.currentTarget.blur();
+    }
+  }, []);
+  return createElement(
+    tag,
+    {
+      ref: elRef,
+      className,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown
+    },
+    value
+  );
+}
+function InlineEditable(props) {
+  const { isEditor } = useEditorContext();
+  if (!isEditor) {
+    return createElement(
+      props.tag || "span",
+      { className: props.className },
+      props.value
+    );
+  }
+  return /* @__PURE__ */ jsx(InlineEditableEditor, { ...props });
+}
+export {
+  InlineEditable
+};

package/dist/components/puck-base/use-upload.d.ts

@@ -0,0 +1,42 @@
+import { type DragEvent, type ChangeEvent } from "react";
+export type UploadStatus = "idle" | "uploading" | "success" | "error";
+export interface UploadFileItem {
+    id: string;
+    file: File;
+    status: UploadStatus;
+    progress: number;
+    url?: string;
+    error?: string;
+}
+export interface UseUploadOptions {
+    onSuccess?: (url: string) => void;
+    onError?: (error: string) => void;
+    prefix?: string;
+    maxSize?: number;
+    accept?: string[];
+}
+export default function useUpload(options?: UseUploadOptions): {
+    fileItem: UploadFileItem | null;
+    isDragging: boolean;
+    isUploading: boolean;
+    upload: (file: File) => Promise<string | null>;
+    abort: () => void;
+    clear: () => void;
+    open: () => void;
+    getInputProps: () => {
+        ref: import("react").MutableRefObject<HTMLInputElement | null>;
+        type: "file";
+        accept: string;
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        style: {
+            readonly display: "none";
+        };
+    };
+    getDropzoneProps: () => {
+        onDragEnter: (e: DragEvent) => void;
+        onDragLeave: (e: DragEvent) => void;
+        onDragOver: (e: DragEvent) => void;
+        onDrop: (e: DragEvent) => void;
+        onClick: () => void;
+    };
+};

package/dist/components/puck-base/use-upload.js

@@ -0,0 +1,192 @@
+import { useState, useRef, useCallback } from "react";
+function joinDomain(path) {
+  if (!path) return "";
+  if (path.startsWith("http")) return path;
+  const domain = (process.env.NEXT_PUBLIC_DOMAIN || "").replace(/\/$/, "");
+  return `${domain}/${path}`;
+}
+function useUpload(options = {}) {
+  const {
+    onSuccess,
+    onError,
+    prefix = "user-assets",
+    maxSize,
+    accept = ["image/*"]
+  } = options;
+  const [fileItem, setFileItem] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const xhrRef = useRef(null);
+  const inputRef = useRef(null);
+  const checkAccept = useCallback(
+    (file) => {
+      if (!accept || accept.length === 0) return true;
+      return accept.some((type) => {
+        if (type.endsWith("/*")) {
+          return file.type.startsWith(type.replace("/*", "/"));
+        }
+        return file.type === type || file.name.endsWith(type);
+      });
+    },
+    [accept]
+  );
+  const upload = useCallback(
+    async (file) => {
+      if (!checkAccept(file)) {
+        const msg = `File type not accepted: ${file.type}`;
+        onError == null ? void 0 : onError(msg);
+        return null;
+      }
+      if (maxSize && file.size > maxSize) {
+        const msg = `File too large: ${(file.size / 1024 / 1024).toFixed(1)}MB`;
+        onError == null ? void 0 : onError(msg);
+        return null;
+      }
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const item = { id, file, status: "uploading", progress: 0 };
+      setFileItem(item);
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("prefix", prefix);
+      return new Promise((resolve) => {
+        const xhr = new XMLHttpRequest();
+        xhrRef.current = xhr;
+        xhr.upload.addEventListener("progress", (e) => {
+          if (e.lengthComputable) {
+            const progress = Math.round(e.loaded / e.total * 100);
+            setFileItem(
+              (prev) => prev ? { ...prev, progress } : prev
+            );
+          }
+        });
+        xhr.addEventListener("load", () => {
+          xhrRef.current = null;
+          if (xhr.status >= 200 && xhr.status < 300) {
+            try {
+              const res = JSON.parse(xhr.responseText);
+              if (res.success) {
+                const url = joinDomain(res.msg);
+                setFileItem(
+                  (prev) => prev ? { ...prev, status: "success", progress: 100, url } : prev
+                );
+                onSuccess == null ? void 0 : onSuccess(url);
+                resolve(url);
+              } else {
+                const errMsg = res.errMsg || "Upload failed";
+                setFileItem(
+                  (prev) => prev ? { ...prev, status: "error", error: errMsg } : prev
+                );
+                onError == null ? void 0 : onError(errMsg);
+                resolve(null);
+              }
+            } catch {
+              setFileItem(
+                (prev) => prev ? { ...prev, status: "error", error: "Invalid response" } : prev
+              );
+              onError == null ? void 0 : onError("Invalid response");
+              resolve(null);
+            }
+          } else {
+            const errMsg = `HTTP ${xhr.status}`;
+            setFileItem(
+              (prev) => prev ? { ...prev, status: "error", error: errMsg } : prev
+            );
+            onError == null ? void 0 : onError(errMsg);
+            resolve(null);
+          }
+        });
+        xhr.addEventListener("error", () => {
+          xhrRef.current = null;
+          setFileItem(
+            (prev) => prev ? { ...prev, status: "error", error: "Network error" } : prev
+          );
+          onError == null ? void 0 : onError("Network error");
+          resolve(null);
+        });
+        xhr.open("POST", "/api/common/upload");
+        xhr.send(formData);
+      });
+    },
+    [checkAccept, maxSize, prefix, onSuccess, onError]
+  );
+  const abort = useCallback(() => {
+    var _a;
+    (_a = xhrRef.current) == null ? void 0 : _a.abort();
+    xhrRef.current = null;
+    setFileItem(null);
+  }, []);
+  const clear = useCallback(() => {
+    abort();
+    setFileItem(null);
+  }, [abort]);
+  const open = useCallback(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  const handleInputChange = useCallback(
+    (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file) upload(file);
+      e.target.value = "";
+    },
+    [upload]
+  );
+  const getInputProps = useCallback(
+    () => ({
+      ref: inputRef,
+      type: "file",
+      accept: accept == null ? void 0 : accept.join(","),
+      onChange: handleInputChange,
+      style: { display: "none" }
+    }),
+    [accept, handleInputChange]
+  );
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file) upload(file);
+    },
+    [upload]
+  );
+  const getDropzoneProps = useCallback(
+    () => ({
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onClick: open
+    }),
+    [handleDragEnter, handleDragLeave, handleDragOver, handleDrop, open]
+  );
+  return {
+    fileItem,
+    isDragging,
+    isUploading: (fileItem == null ? void 0 : fileItem.status) === "uploading",
+    upload,
+    abort,
+    clear,
+    open,
+    getInputProps,
+    getDropzoneProps
+  };
+}
+export {
+  useUpload as default
+};

package/dist/components/puck-block/banner-sections/announcement-banner-1/announcement-banner.d.ts

@@ -0,0 +1,10 @@
+export interface AnnouncementBannerProps {
+    text: string;
+    linkText?: string;
+    linkUrl?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    align?: "left" | "center" | "right";
+    size?: "small" | "default";
+}
+export declare const AnnouncementBanner: ({ text, linkText, linkUrl, backgroundColor, textColor, align, size, }: AnnouncementBannerProps) => import("react/jsx-runtime").JSX.Element;