dune-react 0.0.19 → 0.0.21

package/dist/components/puck-core/section-wrapper.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from "react";
+export interface SectionWrapperProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    style?: CSSProperties;
+    css?: string;
+    children: ReactNode;
+}
+/** Puck field definitions for SectionWrapper styling props */
+export declare const sectionWrapperFields: {
+    readonly className: {
+        readonly type: "text";
+        readonly label: "Class Name";
+        readonly ai: {
+            readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+        };
+    };
+    readonly style: {
+        readonly type: "object";
+        readonly label: "Style";
+        readonly objectFields: {};
+        readonly ai: {
+            readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+        };
+    };
+    readonly css: {
+        readonly type: "textarea";
+        readonly label: "Custom CSS";
+        readonly ai: {
+            readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+        };
+    };
+};
+export declare const SectionWrapper: import("react").ForwardRefExoticComponent<SectionWrapperProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/puck-core/section-wrapper.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/css-utils.js";
+import { useSectionId } from "./core/context/section-id-context.js";
+const sectionWrapperFields = {
+  className: {
+    type: "text",
+    label: "Class Name",
+    ai: {
+      instructions: "Additional Tailwind CSS classes to apply to the section wrapper."
+    }
+  },
+  style: {
+    type: "object",
+    label: "Style",
+    objectFields: {},
+    ai: {
+      instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }."
+    }
+  },
+  css: {
+    type: "textarea",
+    label: "Custom CSS",
+    ai: {
+      instructions: "Custom CSS rules. Use & as a placeholder for the section selector."
+    }
+  }
+};
+const SectionWrapper = forwardRef(
+  function SectionWrapper2({ className, style, css, children, ...rest }, ref) {
+    const sectionId = useSectionId();
+    return /* @__PURE__ */ jsxs("section", { ref, id: sectionId ?? void 0, className: cn("relative", className), style, ...rest, children: [
+      css && sectionId && /* @__PURE__ */ jsx(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: css.replaceAll("&", `#${sectionId}`)
+          }
+        }
+      ),
+      children
+    ] });
+  }
+);
+export {
+  SectionWrapper,
+  sectionWrapperFields
+};

package/dist/components/puck-core/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/shadcn/video-iframe.d.ts

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

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

@@ -0,0 +1,33 @@
+"use client";
+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) {
+  const ytMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  return url;
+}
+function VideoIframe({ video, className }) {
+  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" }) }),
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        className: "size-full",
+        src: getEmbedUrl(video),
+        allow: "autoplay; fullscreen",
+        allowFullScreen: true,
+        onLoad: () => setLoaded(true)
+      }
+    )
+  ] });
+}
+export {
+  VideoIframe
+};

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/use-media-query.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+    setMatches(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+export {
+  useMediaQuery
+};

package/dist/hooks/use-scroll-container.d.ts

@@ -0,0 +1,18 @@
+import { type RefObject } from "react";
+/**
+ * 自动查找目标元素最近的可滚动祖先，返回一个 ref 供 framer-motion useScroll 的 container 使用。
+ *
+ * 解决：在 Puck 编辑器 iframe 中，滚动发生在 iframe 内部容器（而非 window），
+ * useScroll({ target }) 默认找不到正确的滚动容器。
+ *
+ * @returns [containerRef, ready] — ready 为 true 时 containerRef 已就绪
+ *
+ * @example
+ * const targetRef = useRef(null);
+ * const [containerRef, ready] = useScrollContainer(targetRef);
+ * const { scrollYProgress } = useScroll({
+ *   target: targetRef,
+ *   container: containerRef,
+ * });
+ */
+export declare function useScrollContainer<T extends HTMLElement>(targetRef: RefObject<T | null>): [RefObject<HTMLElement | null>, boolean];

package/dist/hooks/use-scroll-container.js

@@ -0,0 +1,25 @@
+import { useRef, useState, useLayoutEffect } from "react";
+function useScrollContainer(targetRef) {
+  const containerRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  useLayoutEffect(() => {
+    const el = targetRef.current;
+    if (!el) return;
+    let ancestor = el.parentElement;
+    while (ancestor && ancestor !== document.documentElement) {
+      const { overflowY } = getComputedStyle(ancestor);
+      if (overflowY === "auto" || overflowY === "scroll") {
+        containerRef.current = ancestor;
+        setReady(true);
+        return;
+      }
+      ancestor = ancestor.parentElement;
+    }
+    containerRef.current = null;
+    setReady(true);
+  }, [targetRef]);
+  return [containerRef, ready];
+}
+export {
+  useScrollContainer
+};