@webenza/ui 0.0.2 → 0.0.4

package/README.md

@@ -5,21 +5,59 @@ Internal UI and animation components for Webenza.
 ## Installation
 
 ```bash
-npm install @webenza/ui react react-dom gsap
+npm install @webenza/ui
+```
+
+## Peer Dependencies
+
+@webenza/ui does not bundle external animation or rendering libraries.
+Install only the dependencies required for the components you use.
+
+> **Note:** Peer dependencies are **not** installed automatically with the library.
+
+### Core (Required)
+```bash
+npm install react react-dom
+```
+
+### Motion Components
+If you use components like `HoverFillButton`, `CircularText`, or `ImageTrail`:
+```bash
+npm install framer-motion
+```
+
+### GSAP Components
+If you use components like `CursorFollower`:
+```bash
+npm install gsap
+```
+
+### Icon / Button Components
+If you use components like `HoverFillButton`:
+```bash
+npm install react-icons
+```
+
+### 3D Components
+If you use components like `WaterRipple`:
+```bash
+npm install three @react-three/fiber
 ```
 
 ## Usage
 
+Most components are designed to work out of the box with sensible defaults.
+
 ```tsx
-import { CursorFollower } from '@webenza/ui';
+import { CursorFollower } from "@webenza/ui";
 
-function App() {
+export default function App() {
   return (
-    <CursorFollower />
+      <CursorFollower />
   );
 }
 ```
 
-## Components
-
-- **CursorFollower**: A custom cursor follower with magnetic and scaling effects.
+- **Works out of the box**
+- **Sensible defaults** included
+- **Optional customization** via props

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { HTMLMotionProps } from 'framer-motion';
 
 type CursorFollowerProps = {
     text?: string;
@@ -19,4 +21,50 @@ type CursorFollowerProps = {
 };
 declare const CursorFollower: ({ text, size, borderWidth, borderColor, background, fontFamily, fontSize, fontWeight, letterSpacing, lerp, showScale, hideScale, enabled, blockSelectors, containerRef, }: CursorFollowerProps) => react_jsx_runtime.JSX.Element | null;
 
-export { CursorFollower, type CursorFollowerProps };
+interface ImageTrailProps {
+    images?: string[];
+    size?: number;
+    rotationRange?: number;
+    interval?: number;
+    fadeDuration?: number;
+    className?: string;
+}
+declare const ImageTrail: React$1.FC<ImageTrailProps>;
+
+interface HoverFillButtonProps extends HTMLMotionProps<"button"> {
+    label?: string;
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    fillColor?: string;
+    textColor?: string;
+    hoverTextColor?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    borderRadius?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const HoverFillButton: React$1.FC<HoverFillButtonProps>;
+
+interface ImageMarqueeProps {
+    images?: string[];
+    direction?: 'left' | 'right';
+    speed?: number;
+    gap?: string;
+    size?: number;
+    className?: string;
+}
+declare const ImageMarquee: React$1.FC<ImageMarqueeProps>;
+
+interface CircularTextProps {
+    text?: string;
+    radius?: number;
+    fontSize?: string;
+    iconSize?: number;
+    color?: string;
+    spinDuration?: number;
+    className?: string;
+}
+declare const CircularText: React$1.FC<CircularTextProps>;
+
+export { CircularText, type CircularTextProps, CursorFollower, type CursorFollowerProps, HoverFillButton, type HoverFillButtonProps, ImageMarquee, type ImageMarqueeProps, ImageTrail, type ImageTrailProps };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { HTMLMotionProps } from 'framer-motion';
 
 type CursorFollowerProps = {
     text?: string;
@@ -19,4 +21,50 @@ type CursorFollowerProps = {
 };
 declare const CursorFollower: ({ text, size, borderWidth, borderColor, background, fontFamily, fontSize, fontWeight, letterSpacing, lerp, showScale, hideScale, enabled, blockSelectors, containerRef, }: CursorFollowerProps) => react_jsx_runtime.JSX.Element | null;
 
-export { CursorFollower, type CursorFollowerProps };
+interface ImageTrailProps {
+    images?: string[];
+    size?: number;
+    rotationRange?: number;
+    interval?: number;
+    fadeDuration?: number;
+    className?: string;
+}
+declare const ImageTrail: React$1.FC<ImageTrailProps>;
+
+interface HoverFillButtonProps extends HTMLMotionProps<"button"> {
+    label?: string;
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    fillColor?: string;
+    textColor?: string;
+    hoverTextColor?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    borderRadius?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const HoverFillButton: React$1.FC<HoverFillButtonProps>;
+
+interface ImageMarqueeProps {
+    images?: string[];
+    direction?: 'left' | 'right';
+    speed?: number;
+    gap?: string;
+    size?: number;
+    className?: string;
+}
+declare const ImageMarquee: React$1.FC<ImageMarqueeProps>;
+
+interface CircularTextProps {
+    text?: string;
+    radius?: number;
+    fontSize?: string;
+    iconSize?: number;
+    color?: string;
+    spinDuration?: number;
+    className?: string;
+}
+declare const CircularText: React$1.FC<CircularTextProps>;
+
+export { CircularText, type CircularTextProps, CursorFollower, type CursorFollowerProps, HoverFillButton, type HoverFillButtonProps, ImageMarquee, type ImageMarqueeProps, ImageTrail, type ImageTrailProps };

package/dist/index.js

@@ -3,6 +3,9 @@
 var react = require('react');
 var gsap = require('gsap');
 var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+var fi = require('react-icons/fi');
+var lu = require('react-icons/lu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -10,11 +13,10 @@ var gsap__default = /*#__PURE__*/_interopDefault(gsap);
 
 // src/cursor/CursorFollower/CursorFollower.tsx
 var CursorFollower = ({
-  text = "",
-  // Changed from "PLAY" to empty string for generic usage
+  text = "PLAY",
   size = 90,
   borderWidth = 2,
-  borderColor = "#fff",
+  borderColor = "#ffffff",
   background = "transparent",
   fontFamily = "inherit",
   fontSize = 12,
@@ -25,11 +27,10 @@ var CursorFollower = ({
   hideScale = 0,
   enabled = true,
   blockSelectors = ["button", "a"],
-  // Added sensible defaults
   containerRef
 }) => {
   const cursorRef = react.useRef(null);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     if (!enabled) return;
     const cursor = cursorRef.current;
     if (!cursor) return;
@@ -58,6 +59,9 @@ var CursorFollower = ({
         targetX = e.clientX;
         targetY = e.clientY;
       }
+      if (!visible && !blocked) {
+        show();
+      }
     };
     const update = () => {
       currentX += (targetX - currentX) * lerp;
@@ -72,6 +76,23 @@ var CursorFollower = ({
     target.addEventListener("mouseenter", show);
     target.addEventListener("mouseleave", hide);
     gsap__default.default.ticker.add(update);
+    requestAnimationFrame(() => {
+      if (containerRef?.current) {
+        const bounds = containerRef.current.getBoundingClientRect();
+        targetX = bounds.width / 2;
+        targetY = bounds.height / 2;
+      } else {
+        targetX = window.innerWidth / 2;
+        targetY = window.innerHeight / 2;
+      }
+      currentX = targetX;
+      currentY = targetY;
+      gsap__default.default.set(cursor, {
+        x: currentX - size / 2,
+        y: currentY - size / 2
+      });
+      show();
+    });
     const cleanupFns = [];
     blockSelectors.forEach((selector) => {
       const elements = document.querySelectorAll(selector);
@@ -105,7 +126,8 @@ var CursorFollower = ({
     lerp,
     showScale,
     hideScale,
-    blockSelectors,
+    // Stabilize dependency: only re-run if the joined string changes
+    blockSelectors.join(","),
     containerRef
   ]);
   if (!enabled) return null;
@@ -140,7 +162,396 @@ var CursorFollower = ({
     }
   );
 };
+var defaultImages = [
+  "https://picsum.photos/id/237/200/200",
+  "https://picsum.photos/id/10/200/200",
+  "https://picsum.photos/id/20/200/200",
+  "https://picsum.photos/id/28/200/200",
+  "https://picsum.photos/id/29/200/200",
+  "https://picsum.photos/id/35/200/200",
+  "https://picsum.photos/id/40/200/200",
+  "https://picsum.photos/id/55/200/200",
+  "https://picsum.photos/id/60/200/200",
+  "https://picsum.photos/id/70/200/200"
+];
+var ImageTrail = ({
+  images = defaultImages,
+  size = 100,
+  rotationRange = 15,
+  interval = 30,
+  // Default to fairly dense for smooth "train" effect
+  fadeDuration = 0.5,
+  className
+}) => {
+  const [trail, setTrail] = react.useState([]);
+  const lastPosRef = react.useRef(null);
+  const indexRef = react.useRef(0);
+  const idCounterRef = react.useRef(0);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    const cleanupInterval = setInterval(() => {
+      setTrail((prev) => {
+        return prev.filter((item) => Date.now() - item.created < fadeDuration * 1e3);
+      });
+    }, 100);
+    return () => clearInterval(cleanupInterval);
+  }, [fadeDuration]);
+  const handleMouseMove = (e) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const currentPos = { x, y };
+    if (!lastPosRef.current) {
+      lastPosRef.current = currentPos;
+      return;
+    }
+    const dx = currentPos.x - lastPosRef.current.x;
+    const dy = currentPos.y - lastPosRef.current.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance > interval) {
+      const newImage = {
+        id: idCounterRef.current++,
+        created: Date.now(),
+        src: images[indexRef.current % images.length] || "",
+        x: currentPos.x,
+        y: currentPos.y,
+        rotation: Math.random() * (rotationRange * 2) - rotationRange
+      };
+      setTrail((prev) => [...prev, newImage]);
+      lastPosRef.current = currentPos;
+      indexRef.current++;
+    }
+  };
+  const handleMouseLeave = () => {
+    lastPosRef.current = null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        minHeight: "400px",
+        overflow: "hidden",
+        background: "#111",
+        cursor: "none",
+        borderRadius: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          pointerEvents: "none",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: trail.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.img,
+          {
+            src: item.src,
+            initial: {
+              opacity: 0,
+              scale: 0.8,
+              x: item.x - size / 2,
+              y: item.y - size / 2,
+              rotate: item.rotation
+            },
+            animate: {
+              opacity: 1,
+              scale: 1,
+              x: item.x - size / 2,
+              y: item.y - size / 2
+            },
+            exit: {
+              opacity: 0,
+              scale: 0.5,
+              transition: { duration: fadeDuration }
+            },
+            transition: { duration: 0.1 },
+            style: {
+              position: "absolute",
+              width: size,
+              height: size,
+              objectFit: "cover",
+              borderRadius: "8px",
+              boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+              pointerEvents: "none",
+              left: 0,
+              top: 0
+            }
+          },
+          item.id
+        )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          color: "#444",
+          pointerEvents: "none",
+          fontWeight: 500,
+          textAlign: "center"
+        }, children: "Hover to see trail" })
+      ]
+    }
+  );
+};
+var HoverFillButton = ({
+  label = "Hover Me",
+  direction = "left",
+  fillColor = "#e9590c",
+  textColor = "#ffffff",
+  hoverTextColor = "#ffffff",
+  padding = "12px 24px",
+  paddingHorizontal,
+  paddingVertical,
+  borderRadius = "50px",
+  backgroundColor = "#000000",
+  borderColor = "#000000",
+  style,
+  ...props
+}) => {
+  const getInitialPosition = () => {
+    switch (direction) {
+      case "left":
+        return { x: "-100%", y: "0%" };
+      case "right":
+        return { x: "100%", y: "0%" };
+      case "top":
+        return { x: "0%", y: "-100%" };
+      case "bottom":
+        return { x: "0%", y: "100%" };
+      default:
+        return { x: "-100%", y: "0%" };
+    }
+  };
+  const finalPadding = paddingHorizontal || paddingVertical ? `${paddingVertical || "12px"} ${paddingHorizontal || "24px"}` : padding;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.button,
+    {
+      initial: "initial",
+      whileHover: "hover",
+      style: {
+        position: "relative",
+        padding: finalPadding,
+        background: backgroundColor,
+        border: `1px solid ${borderColor}`,
+        color: textColor,
+        borderRadius,
+        cursor: "pointer",
+        overflow: "hidden",
+        fontSize: "16px",
+        fontWeight: 500,
+        ...style
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            variants: {
+              initial: getInitialPosition(),
+              hover: { x: "0%", y: "0%" }
+            },
+            transition: { duration: 0.3, ease: "easeInOut" },
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: fillColor,
+              zIndex: 0
+            }
+          },
+          direction
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.span,
+          {
+            variants: {
+              initial: { color: textColor },
+              hover: { color: hoverTextColor }
+            },
+            transition: { duration: 0.2 },
+            style: {
+              position: "relative",
+              zIndex: 1,
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              lineHeight: 1
+            },
+            children: [
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                border: "2px solid currentColor",
+                // Increased thickness
+                fontSize: "16px"
+                // Slightly larger container for icon
+              }, children: /* @__PURE__ */ jsxRuntime.jsx(fi.FiArrowRight, { strokeWidth: 3 }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var defaultImages2 = [
+  "/logos/Airbnb.png",
+  "/logos/Amazon.png",
+  "/logos/Apple.png",
+  "/logos/Bookmyshow.png",
+  "/logos/FedEx.png",
+  "/logos/Google.png",
+  "/logos/Microsoft.png",
+  "/logos/OLA.png",
+  "/logos/OYO.png",
+  "/logos/Walmart.png"
+];
+var ImageMarquee = ({
+  images = defaultImages2,
+  direction = "left",
+  speed = 20,
+  gap = "2rem",
+  size = 60,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        display: "flex",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MarqueeContent, { images, direction, speed, gap, size }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarqueeContent, { images, direction, speed, gap, size }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarqueeContent, { images, direction, speed, gap, size }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarqueeContent, { images, direction, speed, gap, size })
+      ]
+    }
+  );
+};
+var MarqueeContent = ({ images, direction, speed, gap, size }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { x: direction === "left" ? "0%" : "-100%" },
+      animate: { x: direction === "left" ? "-100%" : "0%" },
+      transition: {
+        duration: speed,
+        ease: "linear",
+        repeat: Infinity
+      },
+      style: {
+        display: "flex",
+        gap,
+        minWidth: "max-content",
+        flexShrink: 0,
+        alignItems: "center",
+        paddingRight: gap
+        // Ensure spacing at the end matches the gap for seamlessness
+      },
+      children: images.map((src, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src,
+          alt: `marquee-item-${index}`,
+          style: {
+            height: `${size}px`,
+            width: "auto",
+            objectFit: "contain",
+            borderRadius: "0px"
+          }
+        },
+        index
+      ))
+    },
+    `${direction}-${speed}`
+  );
+};
+var CircularText = ({
+  text = "SCROLL DOWN \u2022 SCROLL DOWN \u2022 ",
+  radius = 50,
+  fontSize = "12px",
+  iconSize = 24,
+  color = "#ffffff",
+  spinDuration = 10,
+  className
+}) => {
+  const size = radius * 2 + 40;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            animate: { rotate: 360 },
+            transition: {
+              duration: spinDuration,
+              repeat: Infinity,
+              ease: "linear"
+            },
+            style: {
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              top: 0,
+              left: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${size} ${size}`, width: "100%", height: "100%", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  id: "circlePath",
+                  d: `
+                                M ${size / 2}, ${size / 2}
+                                m -${radius}, 0
+                                a ${radius},${radius} 0 1,1 ${radius * 2},0
+                                a ${radius},${radius} 0 1,1 -${radius * 2},0
+                            `
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("text", { fill: color, fontSize, fontWeight: "bold", letterSpacing: "2px", children: /* @__PURE__ */ jsxRuntime.jsx("textPath", { href: "#circlePath", startOffset: "0%", children: text }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", color, display: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMouse, { size: iconSize }) })
+      ]
+    }
+  );
+};
 
+exports.CircularText = CircularText;
 exports.CursorFollower = CursorFollower;
+exports.HoverFillButton = HoverFillButton;
+exports.ImageMarquee = ImageMarquee;
+exports.ImageTrail = ImageTrail;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map