dune-react 0.0.31 → 0.0.32

package/dist/components/puck-core/index.d.ts

@@ -1,4 +1,4 @@
-export { ImageUploadField } from "./fields/image-upload-field";
+export { MediaUploadField } from "./fields/media-upload-field";
 export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps, } from "./fields";
 export { type IconName, type Feature, type ActionType, type Action, resolveActionUrl, } from "./core/types";
 export { withEditable } from "./core/with-editable";
@@ -10,4 +10,4 @@ export { SectionWrapper, type SectionWrapperProps } from "./section-wrapper";
 export { EditorContextProvider, useEditorContext } from "./core/context/editor-context";
 export { SectionIdProvider, useSectionId } from "./core/context/section-id-context";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";
-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 { icon, action, actionDefaults, button, buttons, badge, media, medias, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderMediaUrl, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";

package/dist/components/shadcn/tabs.d.ts

@@ -7,4 +7,5 @@ declare const tabsListVariants: (props?: ({
 declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react/jsx-runtime").JSX.Element;
 declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+declare function TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator, tabsListVariants };

package/dist/components/shadcn/tabs.js

@@ -22,7 +22,7 @@ function Tabs({
   );
 }
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -56,7 +56,7 @@ function TabsTrigger({ className, ...props }) {
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
@@ -71,7 +71,24 @@ function TabsContent({ className, ...props }) {
     Tabs$1.Panel,
     {
       "data-slot": "tabs-content",
-      className: cn("flex-1 outline-none", className),
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+function TabsIndicator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Indicator,
+    {
+      "data-slot": "tabs-indicator",
+      className: cn(
+        "absolute bottom-0 h-0.5 rounded-full bg-foreground transition-all duration-200 ease-out",
+        "group-data-vertical/tabs:bottom-auto group-data-vertical/tabs:left-0 group-data-vertical/tabs:h-auto group-data-vertical/tabs:w-0.5",
+        className
+      ),
+      style: {
+        transitionProperty: "left, right, top, bottom, width, height"
+      },
       ...props
     }
   );
@@ -79,6 +96,7 @@ function TabsContent({ className, ...props }) {
 export {
   Tabs,
   TabsContent,
+  TabsIndicator,
   TabsList,
   TabsTrigger,
   tabsListVariants

package/dist/components/shadcn/video-iframe.d.ts

@@ -1,6 +1,7 @@
 interface VideoIframeProps {
     video: string;
     className?: string;
+    autoplay?: boolean;
 }
-export declare function VideoIframe({ video, className }: VideoIframeProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoIframe({ video, className, autoplay }: VideoIframeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/shadcn/video-iframe.js

@@ -3,16 +3,17 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../utils/css-utils.js";
 import { CgSpinner } from "../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
-function getEmbedUrl(url) {
+function getEmbedUrl(url, autoplay = true) {
+  const ap = autoplay ? "?autoplay=1" : "";
   const ytMatch = url.match(
-    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
+    /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
   );
-  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}${ap}`;
   const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
-  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}${ap}`;
   return url;
 }
-function VideoIframe({ video, className }) {
+function VideoIframe({ video, className, autoplay = true }) {
   const [loaded, setLoaded] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-video w-full", className), children: [
     !loaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(CgSpinner, { className: "size-8 animate-spin text-muted-foreground" }) }),
@@ -20,7 +21,7 @@ function VideoIframe({ video, className }) {
       "iframe",
       {
         className: "size-full",
-        src: getEmbedUrl(video),
+        src: getEmbedUrl(video, autoplay),
         allow: "autoplay; fullscreen",
         allowFullScreen: true,
         onLoad: () => setLoaded(true)

package/dist/index.js

@@ -139,7 +139,8 @@ import { CompoundContainer } from "./components/puck-base/container.js";
 import { CompoundContent } from "./components/puck-base/content.js";
 import { CompoundField, fieldTypes } from "./components/puck-base/field.js";
 import { CompoundForm, formMethods } from "./components/puck-base/form.js";
-import { CompoundImage } from "./components/puck-base/image.js";
+import { CompoundMedia } from "./components/puck-base/media.js";
+import { CompoundSocialLinks } from "./components/puck-base/social-links.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/shadcn/context-menu.js";
 import { Cover } from "./components/ui-block/cover/index.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/shadcn/dialog.js";
@@ -153,7 +154,6 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./components/shadcn/form.js";
 import { GradientText } from "./components/puck-base/gradient-text.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/shadcn/hover-card.js";
-import { ImageUploadField } from "./components/puck-core/fields/image-upload-field.js";
 import { InlineEditable } from "./components/puck-core/inline-editable.js";
 import { Input } from "./components/shadcn/input.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/shadcn/input-group.js";
@@ -162,6 +162,7 @@ import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup,
 import { Kbd, KbdGroup } from "./components/shadcn/kbd.js";
 import { Label } from "./components/shadcn/label.js";
 import { LayoutTextFlip } from "./components/shadcn/layout-text-flip.js";
+import { MediaUploadField } from "./components/puck-core/fields/media-upload-field.js";
 import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/shadcn/menubar.js";
 import { MobileNav, MobileNavHeader, MobileNavMenu, MobileNavToggle, NavBody, NavItems, Navbar, NavbarButton, NavbarLogo } from "./components/shadcn/resizable-navbar.js";
 import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/shadcn/native-select.js";
@@ -186,7 +187,7 @@ import { Spinner } from "./components/shadcn/spinner.js";
 import { Spotlight } from "./components/ui-block/spotlight/index.js";
 import { Switch } from "./components/shadcn/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/shadcn/table.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./components/shadcn/tabs.js";
+import { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, tabsListVariants } from "./components/shadcn/tabs.js";
 import { Textarea } from "./components/shadcn/textarea.js";
 import { Toaster } from "./components/shadcn/sonner.js";
 import { Toggle, toggleVariants } from "./components/shadcn/toggle.js";
@@ -207,7 +208,7 @@ import { filterEmptyValues } from "./utils/utils-common.js";
 import { findComponentById, getRandomAdjective } from "./components/puck-core/core/utils.js";
 import { formatLargeNumber, getUrlWithParams } from "./utils/utils-api.js";
 import { formatTimeAgo, formatTimeString, getTimeDetails, getTimestamp, sleep, timeAgo } from "./utils/utils-time.js";
-import { getPlaceholderImageUrl, imageField, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, imagesField } from "./components/puck-core/core/props/media.js";
+import { getPlaceholderMediaUrl, mediaField, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, mediasField } from "./components/puck-core/core/props/media.js";
 import { nanoid } from "./utils/utils-random.js";
 import { usePuckAppState, usePuckConfig, usePuckDispatch, usePuckGetSelectorForId, usePuckHistory } from "./components/puck-core/core/hooks.js";
 import { withEditable } from "./components/puck-core/core/with-editable.js";
@@ -325,7 +326,8 @@ export {
   CompoundContent,
   CompoundField,
   CompoundForm,
-  CompoundImage,
+  CompoundMedia,
+  CompoundSocialLinks,
   default15 as ContactCardsGridConf,
   default16 as ContactLinksFooterConf,
   default17 as ContactModalConf,
@@ -438,7 +440,6 @@ export {
   default40 as ImageCarouselConf,
   default41 as ImageTestimonialCarouselConf,
   default42 as ImageTestimonialConf,
-  ImageUploadField,
   default43 as InfoCardsMediaConf,
   InlineEditable,
   default44 as InlineImageHeroConf,
@@ -475,6 +476,7 @@ export {
   default47 as MarqueeTestimonialConf,
   default48 as MasonryGridConf,
   default49 as MasonryTestimonialConf,
+  MediaUploadField,
   default50 as MegaMenuNavbarConf,
   Menubar,
   MenubarCheckboxItem,
@@ -645,6 +647,7 @@ export {
   TableRow,
   Tabs,
   TabsContent,
+  TabsIndicator,
   TabsList,
   TabsTrigger,
   default95 as TeamCarouselConf,
@@ -715,21 +718,21 @@ export {
   formatTimeString,
   getBase64Client,
   getComponentDefaultProps,
-  getPlaceholderImageUrl,
+  getPlaceholderMediaUrl,
   getRandomAdjective,
   getTimeDetails,
   getTimestamp,
   getUrlWithParams,
   headingField as heading,
   iconField as icon,
-  imageField as image,
-  image16x9Placeholder,
-  image1x1Placeholder,
-  image9x16Placeholder,
-  imagesField as images,
   isValidFileSize,
   isValidFileType,
   liquidGlass,
+  mediaField as media,
+  media16x9Placeholder,
+  media1x1Placeholder,
+  media9x16Placeholder,
+  mediasField as medias,
   nanoid,
   navigationMenuTriggerStyle,
   padding,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dune-react",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "license": "MIT",
   "type": "module",
   "scripts": {

package/dist/components/puck-base/image.d.ts

@@ -1,6 +0,0 @@
-export interface CompoundImageProps {
-    src: string;
-    alt?: string;
-    className?: string;
-}
-export declare const CompoundImage: (props: CompoundImageProps) => import("react/jsx-runtime").JSX.Element;

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 {};