dune-react 0.0.1 → 0.0.3

package/dist/components/shadcn/tooltip.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/css-utils.js";
+import "dayjs";
+import { TooltipRoot } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/root/TooltipRoot.js";
+import { TooltipPortal } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/portal/TooltipPortal.js";
+import { TooltipPositioner } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/positioner/TooltipPositioner.js";
+import { TooltipPopup } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/popup/TooltipPopup.js";
+import { TooltipArrow } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/arrow/TooltipArrow.js";
+import { TooltipProvider as TooltipProvider$1 } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/provider/TooltipProvider.js";
+import { TooltipTrigger as TooltipTrigger$1 } from "../../node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/trigger/TooltipTrigger.js";
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipProvider$1,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ openDelay, closeDelay, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipRoot, { "data-slot": "tooltip", delay: openDelay, closeDelay, ...props });
+}
+function TooltipTrigger({
+  asChild,
+  children,
+  ...props
+}) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      TooltipTrigger$1,
+      {
+        "data-slot": "tooltip-trigger",
+        render: children,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TooltipTrigger$1, { "data-slot": "tooltip-trigger", ...props, children });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
+    TooltipPositioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        TooltipPopup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(TooltipArrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/components/shadcn/tweet-card-client.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export declare function TweetCardClient({ children, ...props }: React.ComponentProps<"div"> & {
+    [key: string]: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shadcn/tweet-card-client.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+function TweetCardClient({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, children });
+}
+export {
+  TweetCardClient
+};

package/dist/components/shadcn/tweet-card.d.ts

@@ -0,0 +1,5 @@
+export declare function truncate(str: string, maxLength?: number): string;
+export declare function TweetCard({ children, ...props }: React.ComponentProps<"div"> & {
+    [key: string]: any;
+}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";

package/dist/components/shadcn/tweet-card.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+function truncate(str, maxLength = 280) {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength) + "...";
+}
+function TweetCard({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, children });
+}
+export {
+  TweetCard,
+  truncate
+};

package/dist/components/{ui-custom/cover.js → ui-block/cover/index.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/css-utils.js";
-import { SparklesCore } from "./sparkles.js";
+import { cn } from "../../../utils/css-utils.js";
 import { useState, useRef, useEffect, useId } from "react";
+import { SparklesCore } from "../sparkles/index.js";
 import { AnimatePresence, motion } from "framer-motion";
 const Cover = ({
   children,
@@ -23,7 +23,7 @@ const Cover = ({
       );
       setBeamPositions(positions);
     }
-  }, [ref.current]);
+  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -218,7 +218,7 @@ const CircleIcon = ({
     "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`,
+        "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
       )
     }

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-custom/sparkles.js → ui-block/sparkles/index.js}

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/css-utils.js";
-import { initParticlesEngine as n } from "../../node_modules/.pnpm/@tsparticles_react@3.0.0_@tsparticles_engine@3.9.1_react-dom@18.3.1_react@18.3.1/node_modules/@tsparticles/react/dist/index.js";
-import { loadSlim } from "../../node_modules/.pnpm/@tsparticles_slim@3.9.1/node_modules/@tsparticles/slim/browser/index.js";
+import { cn } from "../../../utils/css-utils.js";
+import { initParticlesEngine as n } from "../../../node_modules/.pnpm/@tsparticles_react@3.0.0_@tsparticles_engine@3.9.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@tsparticles/react/dist/index.js";
+import { loadSlim } from "../../../node_modules/.pnpm/@tsparticles_slim@3.9.1/node_modules/@tsparticles/slim/browser/index.js";
 import { useState, useEffect, useId } from "react";
-import f from "../../node_modules/.pnpm/@tsparticles_react@3.0.0_@tsparticles_engine@3.9.1_react-dom@18.3.1_react@18.3.1/node_modules/@tsparticles/react/dist/Particles.js";
+import f from "../../../node_modules/.pnpm/@tsparticles_react@3.0.0_@tsparticles_engine@3.9.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@tsparticles/react/dist/Particles.js";
 import { useAnimation, motion } from "framer-motion";
 const SparklesCore = (props) => {
   const {
@@ -275,137 +275,6 @@ const SparklesCore = (props) => {
             opacityRate: 1,
             sizeRate: 1,
             velocityRate: 1
-          },
-          destroy: {
-            bounds: {},
-            mode: "none",
-            split: {
-              count: 1,
-              factor: {
-                value: 3
-              },
-              rate: {
-                value: {
-                  min: 4,
-                  max: 9
-                }
-              },
-              sizeOffset: true
-            }
-          },
-          roll: {
-            darken: {
-              enable: false,
-              value: 0
-            },
-            enable: false,
-            enlighten: {
-              enable: false,
-              value: 0
-            },
-            mode: "vertical",
-            speed: 25
-          },
-          tilt: {
-            value: 0,
-            animation: {
-              enable: false,
-              speed: 0,
-              decay: 0,
-              sync: false
-            },
-            direction: "clockwise",
-            enable: false
-          },
-          twinkle: {
-            lines: {
-              enable: false,
-              frequency: 0.05,
-              opacity: 1
-            },
-            particles: {
-              enable: false,
-              frequency: 0.05,
-              opacity: 1
-            }
-          },
-          wobble: {
-            distance: 5,
-            enable: false,
-            speed: {
-              angle: 50,
-              move: 10
-            }
-          },
-          life: {
-            count: 0,
-            delay: {
-              value: 0,
-              sync: false
-            },
-            duration: {
-              value: 0,
-              sync: false
-            }
-          },
-          rotate: {
-            value: 0,
-            animation: {
-              enable: false,
-              speed: 0,
-              decay: 0,
-              sync: false
-            },
-            direction: "clockwise",
-            path: false
-          },
-          orbit: {
-            animation: {
-              count: 0,
-              enable: false,
-              speed: 1,
-              decay: 0,
-              delay: 0,
-              sync: false
-            },
-            enable: false,
-            opacity: 1,
-            rotation: {
-              value: 45
-            },
-            width: 1
-          },
-          links: {
-            blink: false,
-            color: {
-              value: "#fff"
-            },
-            consent: false,
-            distance: 100,
-            enable: false,
-            frequency: 1,
-            opacity: 1,
-            shadow: {
-              blur: 5,
-              color: {
-                value: "#000"
-              },
-              enable: false
-            },
-            triangles: {
-              enable: false,
-              frequency: 1
-            },
-            width: 1,
-            warp: false
-          },
-          repulse: {
-            value: 0,
-            enabled: false,
-            distance: 1,
-            duration: 1,
-            factor: 1,
-            speed: 1
           }
         },
         detectRetina: true

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

@@ -0,0 +1,158 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { motion } from "framer-motion";
+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-mobile.d.ts

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

package/dist/hooks/use-mobile.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+export {
+  useIsMobile
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+import "./styles/shadcn-theme.css";
 export * from "./utils/index.ts";
 export * from "./components/index.ts";