@springbrand/gravel 0.1.0

package/dist/components/ui-base/index.d.ts

@@ -0,0 +1 @@
+export { ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogFooter, ResponsiveDialogTitle, ResponsiveDialogDescription, } from "./responsive-dialog/index.tsx";

package/dist/components/ui-base/responsive-dialog/index.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+type ResponsiveMode = "auto" | "dialog" | "drawer";
+type ResponsiveDialogProps = {
+    /** 'auto' 会按 useIsMobile() 判断；也可强制 'dialog' / 'drawer' */
+    mode?: ResponsiveMode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    children?: React.ReactNode;
+    /** drawer 模式透传：方向、snap 等 */
+    drawerProps?: Record<string, any>;
+    /** dialog 模式透传 */
+    dialogProps?: Record<string, any>;
+};
+declare function ResponsiveDialog({ mode, children, drawerProps, dialogProps, ...props }: ResponsiveDialogProps): import("react/jsx-runtime").JSX.Element;
+type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+declare function ResponsiveDialogTrigger(props: TriggerProps): import("react/jsx-runtime").JSX.Element;
+type CloseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+declare function ResponsiveDialogClose(props: CloseProps): import("react/jsx-runtime").JSX.Element;
+type ResponsiveDialogContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** dialog 专属：是否展示右上角关闭按钮 */
+    showCloseButton?: boolean;
+    /** 仅 dialog 模式追加的 className */
+    dialogClassName?: string;
+    /** 仅 drawer 模式追加的 className */
+    drawerClassName?: string;
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    onPointerDownOutside?: (e: Event) => void;
+};
+declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, onEscapeKeyDown, onPointerDownOutside, ...props }: ResponsiveDialogContentProps): import("react/jsx-runtime").JSX.Element;
+type HeaderProps = React.ComponentProps<"div">;
+declare function ResponsiveDialogHeader(props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+type FooterProps = React.ComponentProps<"div"> & {
+    /** dialog 专属 */
+    showCloseButton?: boolean;
+};
+declare function ResponsiveDialogFooter({ showCloseButton, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+type TitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+declare function ResponsiveDialogTitle(props: TitleProps): import("react/jsx-runtime").JSX.Element;
+type DescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+declare function ResponsiveDialogDescription(props: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogFooter, ResponsiveDialogTitle, ResponsiveDialogDescription, };

package/dist/components/ui-base/responsive-dialog/index.js

@@ -0,0 +1,116 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@springbrand/site-block/components/shadcn/dialog";
+import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "@springbrand/site-block/components/shadcn/drawer";
+import { useIsMobile } from "@springbrand/site-block/hooks/use-mobile";
+import { cn } from "@springbrand/site-block/lib/utils";
+const ResponsiveDialogContext = React.createContext(null);
+function useResponsiveDialogContext() {
+  const ctx = React.useContext(ResponsiveDialogContext);
+  if (!ctx) {
+    throw new Error(
+      "ResponsiveDialog.* components must be used inside <ResponsiveDialog>"
+    );
+  }
+  return ctx;
+}
+function ResponsiveDialog({
+  mode = "auto",
+  children,
+  drawerProps,
+  dialogProps,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const resolved = mode === "auto" ? isMobile ? "drawer" : "dialog" : mode;
+  const value = React.useMemo(
+    () => ({ mode: resolved }),
+    [resolved]
+  );
+  return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value, children: resolved === "drawer" ? /* @__PURE__ */ jsx(Drawer, { ...props, ...drawerProps, children }) : /* @__PURE__ */ jsx(Dialog, { ...props, ...dialogProps, children }) });
+}
+function ResponsiveDialogTrigger(props) {
+  const { mode } = useResponsiveDialogContext();
+  const Comp = mode === "drawer" ? DrawerTrigger : DialogTrigger;
+  return /* @__PURE__ */ jsx(Comp, { ...props });
+}
+function ResponsiveDialogClose(props) {
+  const { mode } = useResponsiveDialogContext();
+  const Comp = mode === "drawer" ? DrawerClose : DialogClose;
+  return /* @__PURE__ */ jsx(Comp, { ...props });
+}
+function ResponsiveDialogContent({
+  className,
+  dialogClassName,
+  drawerClassName,
+  children,
+  showCloseButton,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  ...props
+}) {
+  const { mode } = useResponsiveDialogContext();
+  if (mode === "drawer") {
+    return /* @__PURE__ */ jsx(
+      DrawerContent,
+      {
+        className: cn(className, drawerClassName),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      className: cn(className, dialogClassName),
+      showCloseButton,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      ...props,
+      children
+    }
+  );
+}
+function ResponsiveDialogHeader(props) {
+  const { mode } = useResponsiveDialogContext();
+  return mode === "drawer" ? /* @__PURE__ */ jsx(DrawerHeader, { ...props }) : /* @__PURE__ */ jsx(DialogHeader, { ...props });
+}
+function ResponsiveDialogFooter({
+  showCloseButton,
+  className,
+  ...props
+}) {
+  const { mode } = useResponsiveDialogContext();
+  if (mode === "drawer") {
+    return /* @__PURE__ */ jsx(DrawerFooter, { className: cn("flex-col-reverse", className), ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    DialogFooter,
+    {
+      showCloseButton,
+      className,
+      ...props
+    }
+  );
+}
+function ResponsiveDialogTitle(props) {
+  const { mode } = useResponsiveDialogContext();
+  const Comp = mode === "drawer" ? DrawerTitle : DialogTitle;
+  return /* @__PURE__ */ jsx(Comp, { ...props });
+}
+function ResponsiveDialogDescription(props) {
+  const { mode } = useResponsiveDialogContext();
+  const Comp = mode === "drawer" ? DrawerDescription : DialogDescription;
+  return /* @__PURE__ */ jsx(Comp, { ...props });
+}
+export {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger
+};

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+interface IBlurryBackgroundProps {
+    children?: ReactNode;
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export default function Background({ children, primaryColor, secondaryColor, }: IBlurryBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function Background({
+  children,
+  primaryColor = "bg-primary-500",
+  secondaryColor = "bg-primary-400"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-base-100 fixed z-[-10] flex h-full w-full", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-100 flex h-full w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-3/6 w-2/5 translate-y-1/2 opacity-40", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full opacity-70 blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full blur-2xl", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-full w-full ${primaryColor} blur-2xl`,
+          style: {
+            transform: "rotate(30deg)",
+            clipPath: "polygon(40% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%)"
+          }
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-2/6 w-1/6 translate-x-3/4 -translate-y-40 opacity-40", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full opacity-80 blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full blur-2xl", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-full w-full rotate-45 ${secondaryColor}`,
+          style: {
+            clipPath: "polygon(60% 0%, 100% 40%, 70% 100%, 30% 100%, 0% 40%)"
+          }
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-96 -right-40 h-2/6 w-1/5 opacity-40",
+          style: { transform: "translateY(-50%)" },
+          children: /* @__PURE__ */ jsx("div", { className: "h-full w-full opacity-60 blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full blur-2xl", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-full w-full ${secondaryColor} blur-2xl`,
+              style: {
+                transform: "rotate(12deg)",
+                clipPath: "polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%)"
+              }
+            }
+          ) }) })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full", children })
+  ] });
+}
+export {
+  Background as default
+};

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

@@ -0,0 +1,17 @@
+import { motion } from "motion/react";
+import React from "react";
+export declare const Cover: ({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Beam: ({ className, delay, duration, hovered, width, ...svgProps }: {
+    className?: string;
+    delay?: number;
+    duration?: number;
+    hovered?: boolean;
+    width?: number;
+} & React.ComponentProps<typeof motion.svg>) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleIcon: ({ className, }: {
+    className?: string;
+    delay?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,232 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/css-utils.js";
+import { AnimatePresence, motion } from "motion/react";
+import { useState, useRef, useEffect, useId } from "react";
+import { SparklesCore } from "../sparkles/index.js";
+const Cover = ({
+  children,
+  className
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const ref = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [beamPositions, setBeamPositions] = useState([]);
+  useEffect(() => {
+    var _a, _b;
+    if (ref.current) {
+      setContainerWidth(((_a = ref.current) == null ? void 0 : _a.clientWidth) ?? 0);
+      const height = ((_b = ref.current) == null ? void 0 : _b.clientHeight) ?? 0;
+      const numberOfBeams = Math.floor(height / 10);
+      const positions = Array.from(
+        { length: numberOfBeams },
+        (_, i) => (i + 1) * (height / (numberOfBeams + 1))
+      );
+      setBeamPositions(positions);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ref,
+      className: "group/cover relative inline-block rounded-sm bg-neutral-100 px-2 py-2 transition duration-200 hover:bg-neutral-900 dark:bg-neutral-900",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: hovered && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: {
+              opacity: {
+                duration: 0.2
+              }
+            },
+            className: "absolute inset-0 h-full w-full overflow-hidden",
+            children: /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                animate: {
+                  translateX: ["-50%", "0%"]
+                },
+                transition: {
+                  translateX: {
+                    duration: 10,
+                    ease: "linear",
+                    repeat: Infinity
+                  }
+                },
+                className: "flex h-full w-[200%]",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SparklesCore,
+                    {
+                      background: "transparent",
+                      minSize: 0.4,
+                      maxSize: 1,
+                      particleDensity: 500,
+                      className: "h-full w-full",
+                      particleColor: "#FFFFFF"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SparklesCore,
+                    {
+                      background: "transparent",
+                      minSize: 0.4,
+                      maxSize: 1,
+                      particleDensity: 500,
+                      className: "h-full w-full",
+                      particleColor: "#FFFFFF"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }),
+        beamPositions.map((position, index) => /* @__PURE__ */ jsx(
+          Beam,
+          {
+            hovered,
+            duration: Math.random() * 2 + 1,
+            delay: Math.random() * 2 + 1,
+            width: containerWidth,
+            style: {
+              top: `${position}px`
+            }
+          },
+          index
+        )),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            animate: {
+              scale: hovered ? 0.8 : 1,
+              x: hovered ? [0, -30, 30, -30, 30, 0] : 0,
+              y: hovered ? [0, 30, -30, 30, -30, 0] : 0
+            },
+            exit: {
+              filter: "none",
+              scale: 1,
+              x: 0,
+              y: 0
+            },
+            transition: {
+              duration: 0.2,
+              x: {
+                duration: 0.2,
+                repeat: Infinity,
+                repeatType: "loop"
+              },
+              y: {
+                duration: 0.2,
+                repeat: Infinity,
+                repeatType: "loop"
+              },
+              scale: {
+                duration: 0.2
+              },
+              filter: {
+                duration: 0.2
+              }
+            },
+            className: cn(
+              "relative z-20 inline-block text-neutral-900 transition duration-200 group-hover/cover:text-white dark:text-white",
+              className
+            ),
+            children
+          },
+          String(hovered)
+        ),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -top-[2px] -right-[2px]" }),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -right-[2px] -bottom-[2px]", delay: 0.4 }),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -top-[2px] -left-[2px]", delay: 0.8 }),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -bottom-[2px] -left-[2px]", delay: 1.6 })
+      ]
+    }
+  );
+};
+const Beam = ({
+  className,
+  delay,
+  duration,
+  hovered,
+  width = 600,
+  ...svgProps
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      width: width ?? "600",
+      height: "1",
+      viewBox: `0 0 ${width ?? "600"} 1`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("absolute inset-x-0 w-full", className),
+      ...svgProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: `M0 0.5H${width ?? "600"}`,
+            stroke: `url(#svgGradient-${id})`
+          }
+        ),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          motion.linearGradient,
+          {
+            id: `svgGradient-${id}`,
+            gradientUnits: "userSpaceOnUse",
+            initial: {
+              x1: "0%",
+              x2: hovered ? "-10%" : "-5%",
+              y1: 0,
+              y2: 0
+            },
+            animate: {
+              x1: "110%",
+              x2: hovered ? "100%" : "105%",
+              y1: 0,
+              y2: 0
+            },
+            transition: {
+              duration: hovered ? 0.5 : duration ?? 2,
+              ease: "linear",
+              repeat: Infinity,
+              delay: hovered ? Math.random() * (1 - 0.2) + 0.2 : 0,
+              repeatDelay: hovered ? Math.random() * (2 - 1) + 1 : delay ?? 1
+            },
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#2EB9DF", stopOpacity: "0" }),
+              /* @__PURE__ */ jsx("stop", { stopColor: "#3b82f6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#3b82f6", stopOpacity: "0" })
+            ]
+          },
+          String(hovered)
+        ) })
+      ]
+    }
+  );
+};
+const CircleIcon = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group pointer-events-none h-2 w-2 animate-pulse rounded-full bg-neutral-600 opacity-20 group-hover/cover:hidden group-hover/cover:bg-white group-hover/cover:opacity-100 dark:bg-white",
+        className
+      )
+    }
+  );
+};
+export {
+  Beam,
+  CircleIcon,
+  Cover
+};

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

@@ -0,0 +1,4 @@
+export { default as Background } from "./background/index.tsx";
+export { Cover } from "./cover/index.tsx";
+export { SparklesCore } from "./sparkles/index.tsx";
+export { Spotlight } from "./spotlight/index.tsx";

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

@@ -0,0 +1,13 @@
+type ParticlesProps = {
+    id?: string;
+    className?: string;
+    background?: string;
+    particleSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    speed?: number;
+    particleColor?: string;
+    particleDensity?: number;
+};
+export declare const SparklesCore: (props: ParticlesProps) => import("react/jsx-runtime").JSX.Element;
+export {};