@springbrand/gravel 0.1.0

package/dist/components/ui-block/sparkles/index.js

@@ -0,0 +1,287 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/css-utils.js";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import { useAnimation, motion } from "motion/react";
+import { useState, useEffect, useId } from "react";
+const SparklesCore = (props) => {
+  const {
+    id,
+    className,
+    background,
+    minSize,
+    maxSize,
+    speed,
+    particleColor,
+    particleDensity
+  } = props;
+  const [init, setInit] = useState(false);
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+  const controls = useAnimation();
+  const particlesLoaded = async (container) => {
+    if (container) {
+      controls.start({
+        opacity: 1,
+        transition: {
+          duration: 1
+        }
+      });
+    }
+  };
+  const generatedId = useId();
+  return /* @__PURE__ */ jsx(motion.div, { animate: controls, className: cn("opacity-0", className), children: init && /* @__PURE__ */ jsx(
+    Particles,
+    {
+      id: id || generatedId,
+      className: cn("h-full w-full"),
+      particlesLoaded,
+      options: {
+        background: {
+          color: {
+            value: background || "#0d47a1"
+          }
+        },
+        fullScreen: {
+          enable: false,
+          zIndex: 1
+        },
+        fpsLimit: 120,
+        interactivity: {
+          events: {
+            onClick: {
+              enable: true,
+              mode: "push"
+            },
+            onHover: {
+              enable: false,
+              mode: "repulse"
+            },
+            resize: true
+          },
+          modes: {
+            push: {
+              quantity: 4
+            },
+            repulse: {
+              distance: 200,
+              duration: 0.4
+            }
+          }
+        },
+        particles: {
+          bounce: {
+            horizontal: {
+              value: 1
+            },
+            vertical: {
+              value: 1
+            }
+          },
+          collisions: {
+            absorb: {
+              speed: 2
+            },
+            bounce: {
+              horizontal: {
+                value: 1
+              },
+              vertical: {
+                value: 1
+              }
+            },
+            enable: false,
+            maxSpeed: 50,
+            mode: "bounce",
+            overlap: {
+              enable: true,
+              retries: 0
+            }
+          },
+          color: {
+            value: particleColor || "#ffffff",
+            animation: {
+              h: {
+                count: 0,
+                enable: false,
+                speed: 1,
+                decay: 0,
+                delay: 0,
+                sync: true,
+                offset: 0
+              },
+              s: {
+                count: 0,
+                enable: false,
+                speed: 1,
+                decay: 0,
+                delay: 0,
+                sync: true,
+                offset: 0
+              },
+              l: {
+                count: 0,
+                enable: false,
+                speed: 1,
+                decay: 0,
+                delay: 0,
+                sync: true,
+                offset: 0
+              }
+            }
+          },
+          effect: {
+            close: true,
+            fill: true,
+            options: {},
+            type: {}
+          },
+          groups: {},
+          move: {
+            angle: {
+              offset: 0,
+              value: 90
+            },
+            attract: {
+              distance: 200,
+              enable: false,
+              rotate: {
+                x: 3e3,
+                y: 3e3
+              }
+            },
+            center: {
+              x: 50,
+              y: 50,
+              mode: "percent",
+              radius: 0
+            },
+            decay: 0,
+            distance: {},
+            direction: "none",
+            drift: 0,
+            enable: true,
+            gravity: {
+              acceleration: 9.81,
+              enable: false,
+              inverse: false,
+              maxSpeed: 50
+            },
+            path: {
+              clamp: true,
+              delay: {
+                value: 0
+              },
+              enable: false,
+              options: {}
+            },
+            outModes: {
+              default: "out"
+            },
+            random: false,
+            size: false,
+            speed: {
+              min: 0.1,
+              max: 1
+            },
+            spin: {
+              acceleration: 0,
+              enable: false
+            },
+            straight: false,
+            trail: {
+              enable: false,
+              length: 10,
+              fill: {}
+            },
+            vibrate: false,
+            warp: false
+          },
+          number: {
+            density: {
+              enable: true,
+              width: 400,
+              height: 400
+            },
+            limit: {
+              mode: "delete",
+              value: 0
+            },
+            value: particleDensity || 120
+          },
+          opacity: {
+            value: {
+              min: 0.1,
+              max: 1
+            },
+            animation: {
+              count: 0,
+              enable: true,
+              speed: speed || 4,
+              decay: 0,
+              delay: 0,
+              sync: false,
+              mode: "auto",
+              startValue: "random",
+              destroy: "none"
+            }
+          },
+          reduceDuplicates: false,
+          shadow: {
+            blur: 0,
+            color: {
+              value: "#000"
+            },
+            enable: false,
+            offset: {
+              x: 0,
+              y: 0
+            }
+          },
+          shape: {
+            close: true,
+            fill: true,
+            options: {},
+            type: "circle"
+          },
+          size: {
+            value: {
+              min: minSize || 1,
+              max: maxSize || 3
+            },
+            animation: {
+              count: 0,
+              enable: false,
+              speed: 5,
+              decay: 0,
+              delay: 0,
+              sync: false,
+              mode: "auto",
+              startValue: "random",
+              destroy: "none"
+            }
+          },
+          stroke: {
+            width: 0
+          },
+          zIndex: {
+            value: 0,
+            opacityRate: 1,
+            sizeRate: 1,
+            velocityRate: 1
+          }
+        },
+        detectRetina: true
+      }
+    }
+  ) });
+};
+export {
+  SparklesCore
+};

package/dist/components/ui-block/spotlight/index.d.ts

@@ -0,0 +1,13 @@
+type SpotlightProps = {
+    gradientFirst?: string;
+    gradientSecond?: string;
+    gradientThird?: string;
+    translateY?: number;
+    width?: number;
+    height?: number;
+    smallWidth?: number;
+    duration?: number;
+    xOffset?: number;
+};
+export declare const Spotlight: ({ gradientFirst, gradientSecond, gradientThird, translateY, width, height, smallWidth, duration, xOffset, }?: SpotlightProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ui-block/spotlight/index.js

@@ -0,0 +1,158 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useState, useEffect, useMemo } from "react";
+const Spotlight = ({
+  gradientFirst,
+  gradientSecond,
+  gradientThird,
+  translateY = -350,
+  width = 560,
+  height = 1380,
+  smallWidth = 240,
+  duration = 7,
+  xOffset = 100
+} = {}) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const isDark = true;
+  const { firstBg, secondBg, thirdBg } = useMemo(() => {
+    const darkDefaults = {
+      first: "radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)",
+      second: "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)",
+      third: "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)"
+    };
+    const themeDefaults = darkDefaults;
+    return {
+      firstBg: gradientFirst ?? themeDefaults.first,
+      secondBg: gradientSecond ?? themeDefaults.second,
+      thirdBg: gradientThird ?? themeDefaults.third
+    };
+  }, [gradientFirst, gradientSecond, gradientThird, isDark]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      transition: {
+        duration: 1.5
+      },
+      className: "pointer-events-none absolute inset-0 h-full w-full",
+      children: [
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            animate: {
+              x: [0, xOffset, 0]
+            },
+            transition: {
+              duration,
+              repeat: Infinity,
+              repeatType: "reverse",
+              ease: "easeInOut"
+            },
+            className: "pointer-events-none absolute top-0 left-0 z-40 h-screen w-screen",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: `translateY(${translateY}px) rotate(-45deg)`,
+                    background: firstBg,
+                    width: `${width}px`,
+                    height: `${height}px`
+                  },
+                  className: "absolute top-0 left-0"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: "rotate(-45deg) translate(5%, -50%)",
+                    background: secondBg,
+                    width: `${smallWidth}px`,
+                    height: `${height}px`
+                  },
+                  className: "absolute top-0 left-0 origin-top-left"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: "rotate(-45deg) translate(-180%, -70%)",
+                    background: thirdBg,
+                    width: `${smallWidth}px`,
+                    height: `${height}px`
+                  },
+                  className: "absolute top-0 left-0 origin-top-left"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            animate: {
+              x: [0, -xOffset, 0]
+            },
+            transition: {
+              duration,
+              repeat: Infinity,
+              repeatType: "reverse",
+              ease: "easeInOut"
+            },
+            className: "pointer-events-none absolute top-0 right-0 z-40 h-screen w-screen",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: `translateY(${translateY}px) rotate(45deg)`,
+                    background: firstBg,
+                    width: `${width}px`,
+                    height: `${height}px`
+                  },
+                  className: "absolute top-0 right-0"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: "rotate(45deg) translate(-5%, -50%)",
+                    background: secondBg,
+                    width: `${smallWidth}px`,
+                    height: `${height}px`
+                  },
+                  className: "absolute top-0 right-0 origin-top-right"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    transform: "rotate(45deg) translate(180%, -70%)",
+                    background: thirdBg,
+                    width: `${smallWidth}px`,
+                    height: `${height}px`
+                  },
+                  className: "absolute top-0 right-0 origin-top-right"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Spotlight
+};

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-prefers-reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/use-prefers-reduced-motion.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
+const getInitialState = () => {
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(getInitialState);
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, []);
+  return prefersReducedMotion;
+}
+export {
+  usePrefersReducedMotion
+};

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

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./components/ui-base/index.ts";
+export * from "./components/ui-block/index.ts";
+export * from "./hooks/use-media-query.ts";
+export * from "./hooks/use-prefers-reduced-motion.ts";
+export * from "./hooks/use-scroll-container.ts";
+export * from "./utils/index.ts";

package/dist/index.js

@@ -0,0 +1,57 @@
+import { useMediaQuery } from "./hooks/use-media-query.js";
+import { usePrefersReducedMotion } from "./hooks/use-prefers-reduced-motion.js";
+import { useScrollContainer } from "./hooks/use-scroll-container.js";
+import { filterEmptyValues } from "./utils/utils-common.js";
+import { formatLargeNumber, getUrlWithParams } from "./utils/utils-api.js";
+import { formatTimeAgo, formatTimeString, getTimeDetails, getTimestamp, sleep, timeAgo } from "./utils/utils-time.js";
+import { base64ToFile, base64ToUrl, blobToBase64, blobToUrl, convertBase64ToBlob, structureFile } from "./utils/utils-canvas.js";
+import { cn, liquidGlass } from "./utils/css-utils.js";
+import "./utils/storage-qetag.js";
+import { downloadImage, downloadImageClient, fetchHasOnlineFile, getBase64Client, isValidFileSize, isValidFileType } from "./utils/utils-image.js";
+import { nanoid } from "./utils/utils-random.js";
+import { default as default2 } from "./components/ui-block/background/index.js";
+import { Cover } from "./components/ui-block/cover/index.js";
+import { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger } from "./components/ui-base/responsive-dialog/index.js";
+import { SparklesCore } from "./components/ui-block/sparkles/index.js";
+import { Spotlight } from "./components/ui-block/spotlight/index.js";
+export {
+  default2 as Background,
+  Cover,
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+  SparklesCore,
+  Spotlight,
+  base64ToFile,
+  base64ToUrl,
+  blobToBase64,
+  blobToUrl,
+  cn,
+  convertBase64ToBlob,
+  downloadImage,
+  downloadImageClient,
+  fetchHasOnlineFile,
+  filterEmptyValues,
+  formatLargeNumber,
+  formatTimeAgo,
+  formatTimeString,
+  getBase64Client,
+  getTimeDetails,
+  getTimestamp,
+  getUrlWithParams,
+  isValidFileSize,
+  isValidFileType,
+  liquidGlass,
+  nanoid,
+  sleep,
+  structureFile,
+  timeAgo,
+  useMediaQuery,
+  usePrefersReducedMotion,
+  useScrollContainer
+};

package/dist/utils/css-utils.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from "clsx";
+/**
+ * 合并CSS类名，支持条件类名和Tailwind冲突解决
+ * 支持Fluid Tailwind功能
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * 液体玻璃效果样式
+ */
+export declare function liquidGlass(...args: ClassValue[]): string;

package/dist/utils/css-utils.js

@@ -0,0 +1,17 @@
+import { withFluid } from "@fluid-tailwind/tailwind-merge";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+const twMerge = extendTailwindMerge({}, withFluid);
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function liquidGlass(...args) {
+  return cn(
+    "shadow-[0px_-1px_0px_0px_#FFFFFF40_inset,_0px_1px_0px_0px_#FFFFFF40_inset]",
+    args
+  );
+}
+export {
+  cn,
+  liquidGlass
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./utils-common.ts";
+export * from "./utils-api.ts";
+export * from "./utils-time.ts";
+export * from "./utils-canvas.ts";
+export * from "./css-utils.ts";
+export * from "./storage-qetag.ts";
+export * from "./utils-image.ts";
+export * from "./utils-time.ts";
+export * from "./utils-random.ts";

package/dist/utils/index.js

@@ -0,0 +1,34 @@
+import { filterEmptyValues } from "./utils-common.js";
+import { formatLargeNumber, getUrlWithParams } from "./utils-api.js";
+import { formatTimeAgo, formatTimeString, getTimeDetails, getTimestamp, sleep, timeAgo } from "./utils-time.js";
+import { base64ToFile, base64ToUrl, blobToBase64, blobToUrl, convertBase64ToBlob, structureFile } from "./utils-canvas.js";
+import { cn, liquidGlass } from "./css-utils.js";
+import "./storage-qetag.js";
+import { downloadImage, downloadImageClient, fetchHasOnlineFile, getBase64Client, isValidFileSize, isValidFileType } from "./utils-image.js";
+import { nanoid } from "./utils-random.js";
+export {
+  base64ToFile,
+  base64ToUrl,
+  blobToBase64,
+  blobToUrl,
+  cn,
+  convertBase64ToBlob,
+  downloadImage,
+  downloadImageClient,
+  fetchHasOnlineFile,
+  filterEmptyValues,
+  formatLargeNumber,
+  formatTimeAgo,
+  formatTimeString,
+  getBase64Client,
+  getTimeDetails,
+  getTimestamp,
+  getUrlWithParams,
+  isValidFileSize,
+  isValidFileType,
+  liquidGlass,
+  nanoid,
+  sleep,
+  structureFile,
+  timeAgo
+};