dune-react 0.0.4 → 0.0.6

package/dist/components/puck-base/error-boundary.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorBoundary as m } from "../../node_modules/.pnpm/react-error-boundary@6.1.1_react@19.2.4/node_modules/react-error-boundary/dist/react-error-boundary.js";
+import { Button } from "../shadcn/button.js";
+function ErrorBoundary({ children }) {
+  return /* @__PURE__ */ jsx(m, { FallbackComponent: Fallback, children });
+}
+function Fallback({ error, resetErrorBoundary }) {
+  const message = error instanceof Error ? error.message : String(error);
+  console.log("error boundary triggered", message);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: "p-6 bg-red-500 text-white rounded-md flex flex-col gap-4 items-center justify-center",
+      children: [
+        /* @__PURE__ */ jsx("p", { children: "Something went wrong when rendering" }),
+        /* @__PURE__ */ jsx("pre", { children: message }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { onClick: () => resetErrorBoundary(), children: "Retry" }) })
+      ]
+    }
+  );
+}
+export {
+  ErrorBoundary
+};

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

@@ -0,0 +1,9 @@
+export declare const fieldTypes: readonly ["text", "number", "password", "date", "file"];
+export type FieldTypes = (typeof fieldTypes)[number];
+export interface CompoundFieldProps {
+    id?: string;
+    name: string;
+    label: string;
+    type: FieldTypes;
+}
+export declare const CompoundField: (props: CompoundFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Label } from "../shadcn/label.js";
+import { Input } from "../shadcn/input.js";
+const fieldTypes = [
+  "text",
+  "number",
+  "password",
+  "date",
+  "file"
+];
+const CompoundField = (props) => {
+  return /* @__PURE__ */ jsxs(Label, { className: "grid w-full max-w-sm items-center gap-1", children: [
+    props.label,
+    /* @__PURE__ */ jsx(Input, { id: props.id, name: props.name, type: props.type })
+  ] });
+};
+export {
+  CompoundField,
+  fieldTypes
+};

package/dist/components/puck-base/fields/auto-field.d.ts

@@ -0,0 +1,2 @@
+import type { AutoFieldProps } from "./types";
+export declare const AutoField: import("react").NamedExoticComponent<AutoFieldProps>;

package/dist/components/puck-base/fields/auto-field.js

@@ -0,0 +1,338 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { Input } from "../../shadcn/input.js";
+import { Textarea } from "../../shadcn/textarea.js";
+import { Label } from "../../shadcn/label.js";
+import { Switch } from "../../shadcn/switch.js";
+import { Button } from "../../shadcn/button.js";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../shadcn/select.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../shadcn/popover.js";
+import { ToggleGroup, ToggleGroupItem } from "../../shadcn/toggle-group.js";
+import { ChevronDownIcon, CheckIcon } from "lucide-react";
+const LARGE_SELECT_THRESHOLD = 200;
+const VIRTUAL_ITEM_HEIGHT = 32;
+const VIRTUAL_VIEWPORT_HEIGHT = 256;
+const VIRTUAL_OVERSCAN = 6;
+const RadioToggleField = memo(function RadioToggleField2({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  const isBooleanToggle = options.length === 2 && options.some((o) => o.value === true) && options.some((o) => o.value === false);
+  if (isBooleanToggle) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 mb-3 flex items-center justify-between rounded-xl p-3", children: [
+      /* @__PURE__ */ jsx(Label, { children: label }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: !!value,
+          onCheckedChange: (checked) => onChange(checked)
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        type: "single",
+        value: String(value ?? ""),
+        onValueChange: (val) => {
+          if (!val) return;
+          const opt = options.find((o) => String(o.value) === val);
+          if (opt) onChange(opt.value);
+        },
+        className: "justify-start",
+        children: options.map((opt) => /* @__PURE__ */ jsx(
+          ToggleGroupItem,
+          {
+            value: String(opt.value),
+            size: "sm",
+            children: opt.label
+          },
+          String(opt.value)
+        ))
+      }
+    )
+  ] });
+});
+const ObjectField = memo(function ObjectField2({
+  field,
+  name,
+  value,
+  onChange
+}) {
+  const objectFields = field.objectFields || {};
+  const label = field.label || name;
+  const objValue = value && typeof value === "object" ? value : {};
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-3", children: Object.entries(objectFields).map(([key, subField]) => /* @__PURE__ */ jsx(
+      AutoField,
+      {
+        field: subField,
+        name: key,
+        value: objValue[key],
+        onChange: (val) => onChange({ ...objValue, [key]: val })
+      },
+      key
+    )) })
+  ] });
+});
+const VirtualizedSelectField = memo(function VirtualizedSelectField2({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [scrollTop, setScrollTop] = useState(0);
+  const viewportRef = useRef(null);
+  const normalizedOptions = useMemo(
+    () => options.map((opt) => ({
+      ...opt,
+      stringValue: String(opt.value)
+    })),
+    [options]
+  );
+  const selectedString = String(value ?? "");
+  const filteredOptions = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return normalizedOptions;
+    return normalizedOptions.filter(
+      (opt) => opt.label.toLowerCase().includes(query) || opt.stringValue.toLowerCase().includes(query)
+    );
+  }, [normalizedOptions, search]);
+  const selectedLabel = useMemo(() => {
+    const selected = normalizedOptions.find(
+      (opt) => opt.stringValue === selectedString
+    );
+    return (selected == null ? void 0 : selected.label) ?? selectedString;
+  }, [normalizedOptions, selectedString]);
+  const totalHeight = filteredOptions.length * VIRTUAL_ITEM_HEIGHT;
+  const startIndex = Math.max(
+    0,
+    Math.floor(scrollTop / VIRTUAL_ITEM_HEIGHT) - VIRTUAL_OVERSCAN
+  );
+  const visibleCount = Math.ceil(VIRTUAL_VIEWPORT_HEIGHT / VIRTUAL_ITEM_HEIGHT) + VIRTUAL_OVERSCAN * 2;
+  const endIndex = Math.min(filteredOptions.length, startIndex + visibleCount);
+  const visibleOptions = filteredOptions.slice(startIndex, endIndex);
+  const handleSelect = useCallback(
+    (stringValue) => {
+      const selected = normalizedOptions.find(
+        (opt) => opt.stringValue === stringValue
+      );
+      onChange(selected ? selected.value : stringValue);
+      setOpen(false);
+    },
+    [normalizedOptions, onChange]
+  );
+  useEffect(() => {
+    if (!open || !viewportRef.current) return;
+    const selectedIndex = filteredOptions.findIndex(
+      (opt) => opt.stringValue === selectedString
+    );
+    if (selectedIndex < 0) return;
+    const targetTop = selectedIndex * VIRTUAL_ITEM_HEIGHT - VIRTUAL_VIEWPORT_HEIGHT / 2;
+    const clampedTop = Math.max(
+      0,
+      Math.min(targetTop, totalHeight - VIRTUAL_VIEWPORT_HEIGHT)
+    );
+    viewportRef.current.scrollTop = clampedTop;
+    setScrollTop(clampedTop);
+  }, [open, filteredOptions, selectedString, totalHeight]);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-between font-normal",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedLabel || "Select..." }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-60" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          className: "w-(--radix-popover-trigger-width) p-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: "Search options...",
+                className: "mb-2"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: viewportRef,
+                className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
+                style: {
+                  height: VIRTUAL_VIEWPORT_HEIGHT,
+                  WebkitOverflowScrolling: "touch"
+                },
+                onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+                children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: startIndex * VIRTUAL_ITEM_HEIGHT,
+                      left: 0,
+                      right: 0
+                    },
+                    children: visibleOptions.map((opt) => {
+                      const isSelected = opt.stringValue === selectedString;
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
+                          onClick: () => handleSelect(opt.stringValue),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+                            isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
+                          ]
+                        },
+                        opt.stringValue
+                      );
+                    })
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+const AutoField = memo(function AutoField2({
+  field,
+  name,
+  value,
+  onChange
+}) {
+  var _a, _b;
+  const label = field.label || name;
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value)
+          }
+        )
+      ] });
+    case "textarea":
+      return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            rows: 3
+          }
+        )
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            value: value ?? "",
+            onChange: (e) => onChange(Number(e.target.value))
+          }
+        )
+      ] });
+    case "radio":
+      return /* @__PURE__ */ jsx(
+        RadioToggleField,
+        {
+          label,
+          options: field.options || [],
+          value,
+          onChange
+        }
+      );
+    case "select":
+      if ((((_a = field.options) == null ? void 0 : _a.length) || 0) > LARGE_SELECT_THRESHOLD) {
+        return /* @__PURE__ */ jsx(
+          VirtualizedSelectField,
+          {
+            label,
+            options: field.options || [],
+            value,
+            onChange
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(value ?? ""),
+            onValueChange: (val) => {
+              var _a2;
+              const opt = (_a2 = field.options) == null ? void 0 : _a2.find((o) => String(o.value) === val);
+              onChange(opt ? opt.value : val);
+            },
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: (_b = field.options) == null ? void 0 : _b.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt.value), children: opt.label }, String(opt.value))) })
+            ]
+          }
+        )
+      ] });
+    case "object":
+      return /* @__PURE__ */ jsx(
+        ObjectField,
+        {
+          field,
+          name,
+          value,
+          onChange
+        }
+      );
+    case "custom":
+      if (field.render) {
+        const CustomRender = field.render;
+        return /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(
+          CustomRender,
+          {
+            field,
+            name,
+            value,
+            onChange
+          }
+        ) });
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "bg-muted text-muted-foreground mb-4 rounded-lg p-3 text-sm", children: [
+        label,
+        " (custom field)"
+      ] });
+    default:
+      return null;
+  }
+});
+export {
+  AutoField
+};

package/dist/components/puck-base/fields/types.d.ts

@@ -0,0 +1,29 @@
+import type React from "react";
+export type FieldDef = {
+    type: string;
+    label?: string;
+    options?: {
+        label: string;
+        value: any;
+    }[];
+    arrayFields?: Record<string, FieldDef>;
+    objectFields?: Record<string, FieldDef>;
+    getItemSummary?: (item: any, index: number) => string;
+    defaultItemProps?: Record<string, any>;
+    min?: number;
+    max?: number;
+    render?: React.FC<any>;
+};
+export type AutoFieldProps = {
+    field: FieldDef;
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+};
+export interface FieldsPanelProps {
+    open: boolean;
+    componentType: string | null;
+    componentData: Record<string, any> | null;
+    onSave: (updatedProps: Record<string, any>) => void;
+    onClose: () => void;
+}

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

@@ -0,0 +1,12 @@
+import { CompoundButtonProps } from "./button";
+import { CompoundFieldProps } from "./field";
+export declare const formMethods: readonly ["get", "post", "put", "patch", "delete"];
+export type FormMethods = (typeof formMethods)[number];
+export interface CompoundFormProps {
+    title?: string;
+    fields: CompoundFieldProps[];
+    action: string;
+    method: FormMethods;
+    button: CompoundButtonProps;
+}
+export declare const CompoundForm: (props: CompoundFormProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CompoundButton } from "./button.js";
+import { CompoundField } from "./field.js";
+import { useEditorContext } from "./editor-context.js";
+const formMethods = ["get", "post", "put", "patch", "delete"];
+const CompoundForm = (props) => {
+  const { isEditor: isEditorMode } = useEditorContext();
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      action: props.action,
+      method: props.method,
+      className: "rounded-md max-w-sm flex flex-col border p-8 gap-4",
+      onSubmit: isEditorMode ? (e) => e.preventDefault() : void 0,
+      children: [
+        props.title && /* @__PURE__ */ jsx("p", { children: props.title }),
+        props.fields.map((field, index) => /* @__PURE__ */ jsx(CompoundField, { id: `field-${index}`, ...field }, index)),
+        props.button && /* @__PURE__ */ jsx(
+          CompoundButton,
+          {
+            label: props.button.label,
+            url: props.button.url,
+            variant: props.button.variant,
+            size: props.button.size,
+            icon: props.button.icon,
+            type: "submit"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CompoundForm,
+  formMethods
+};

package/dist/components/puck-base/gradient-text.d.ts

@@ -0,0 +1,10 @@
+export interface GradientTextProps {
+    text: string;
+    as?: "h1" | "h2" | "h3" | "h4" | "p" | "span";
+    gradientFrom?: string;
+    gradientTo?: string;
+    gradientVia?: string;
+    direction?: "to-r" | "to-l" | "to-b" | "to-t" | "to-br" | "to-bl";
+    className?: string;
+}
+export declare const GradientText: ({ text, as: Tag, gradientFrom, gradientTo, gradientVia, direction, className, }: GradientTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/gradient-text.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/css-utils.js";
+const TAG_STYLES = {
+  h1: "text-4xl md:text-6xl font-bold tracking-tighter",
+  h2: "text-3xl md:text-5xl font-bold tracking-tighter",
+  h3: "text-2xl md:text-4xl font-semibold tracking-tight",
+  h4: "text-xl md:text-2xl font-semibold",
+  p: "text-base md:text-lg",
+  span: ""
+};
+const GradientText = ({
+  text,
+  as: Tag = "h2",
+  gradientFrom = "oklch(0.7 0.25 260)",
+  gradientTo = "oklch(0.7 0.25 330)",
+  gradientVia,
+  direction = "to-r",
+  className
+}) => {
+  const gradientStyle = {
+    backgroundImage: gradientVia ? `linear-gradient(${direction.replace("to-", "to ")}, ${gradientFrom}, ${gradientVia}, ${gradientTo})` : `linear-gradient(${direction.replace("to-", "to ")}, ${gradientFrom}, ${gradientTo})`
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(
+        "bg-clip-text text-transparent",
+        TAG_STYLES[Tag],
+        className
+      ),
+      style: gradientStyle,
+      children: text
+    }
+  );
+};
+export {
+  GradientText
+};

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

@@ -0,0 +1,7 @@
+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 {};

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

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { X, Loader2, UploadCloud, ImageIcon } from "lucide-react";
+import { cn } from "../../utils/css-utils.js";
+import { Button } from "../shadcn/button.js";
+import { Input } from "../shadcn/input.js";
+import useUpload from "./use-upload.js";
+function ImageUploadField({
+  name,
+  value,
+  onChange
+}) {
+  const [urlMode, setUrlMode] = useState(false);
+  const { fileItem, isDragging, isUploading, getInputProps, getDropzoneProps } = useUpload({
+    accept: ["image/*"],
+    maxSize: 10 * 1024 * 1024,
+    onSuccess: (url) => onChange(url)
+  });
+  const progress = (fileItem == null ? void 0 : fileItem.progress) ?? 0;
+  const handleClear = useCallback(() => {
+    onChange("");
+  }, [onChange]);
+  const hasValue = !!value;
+  const inputProps = getInputProps();
+  const dropzoneProps = getDropzoneProps();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps, name }),
+    hasValue && !isUploading ? /* @__PURE__ */ jsxs("div", { className: "group relative overflow-hidden rounded-md border", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: value,
+          alt: "preview",
+          className: "block h-32 w-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "destructive",
+          size: "icon-sm",
+          className: "absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100",
+          onClick: handleClear,
+          children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+        }
+      )
+    ] }) : isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex h-28 w-full flex-col items-center justify-center gap-3 rounded-md border-2 border-dashed border-primary/50 bg-accent/30", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "text-primary size-6 animate-spin" }),
+      /* @__PURE__ */ jsxs("div", { className: "w-3/4", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-muted h-1.5 w-full overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-primary h-full rounded-full transition-all duration-300",
+            style: { width: `${progress}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground mt-1 text-center text-xs", children: [
+          progress,
+          "%"
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex h-28 w-full flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed transition-colors",
+          "text-muted-foreground hover:border-primary/50 hover:bg-accent/50",
+          isDragging && "border-primary bg-accent/50"
+        ),
+        ...dropzoneProps,
+        children: [
+          /* @__PURE__ */ jsx(UploadCloud, { className: "size-6" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: "拖拽图片到这里，或点击上传" })
+        ]
+      }
+    ),
+    (fileItem == null ? void 0 : fileItem.status) === "error" && /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: fileItem.error }),
+    urlMode ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          placeholder: "https://example.com/image.jpg",
+          defaultValue: value,
+          onBlur: (e) => {
+            const v = e.currentTarget.value.trim();
+            if (v) onChange(v);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              const v = e.currentTarget.value.trim();
+              if (v) onChange(v);
+              setUrlMode(false);
+            }
+          },
+          className: "h-7 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => setUrlMode(false),
+          children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground",
+        onClick: () => setUrlMode(true),
+        children: [
+          /* @__PURE__ */ jsx(ImageIcon, { className: "size-3" }),
+          /* @__PURE__ */ jsx("span", { children: "使用 URL" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ImageUploadField
+};

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

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