fancy-ui-react 0.2.1 → 0.4.0

package/dist/components/gradient-button/GradientButton.js

@@ -4,25 +4,29 @@ import { forwardRef } from "react";
 import { cn } from "../../utils.js";
 import { useSoundCue } from "../../sound/use-sound.js";
 /* empty css                    */
-const DEFAULT_COLORS = [
-  "#FF0000",
-  "#FFA500",
-  "#FFFF00",
-  "#008000",
-  "#0000FF",
-  "#4B0082",
-  "#EE82EE",
-  "#FF0000"
-];
+function beamGradient(colors) {
+  const list = colors.length ? colors : ["#ffffff"];
+  const arc = (from, to, strength) => {
+    const span = to - from;
+    const stops = list.map((c, i) => {
+      const at = from + span * ((i + 1) / (list.length + 1));
+      const color = strength < 100 ? `color-mix(in srgb, ${c} ${strength}%, transparent)` : c;
+      return `${color} ${at.toFixed(1)}%`;
+    });
+    return [`transparent ${from}%`, ...stops, `transparent ${to}%`].join(", ");
+  };
+  return `conic-gradient(from var(--gb-angle), ${arc(0, 42, 100)}, ${arc(50, 78, 45)}, transparent 100%)`;
+}
+const DEFAULT_COLORS = ["#34d399", "#22d3ee", "#6366f1", "#d946ef", "#f43f5e", "#f59e0b"];
 const GradientButton = forwardRef(
   ({
     className,
     colors = DEFAULT_COLORS,
-    duration = 2500,
-    borderWidth = 2,
-    borderRadius = 8,
+    duration = 3e3,
+    borderWidth = 1.5,
+    borderRadius = 12,
     blur = 4,
-    bgColor = "#000",
+    bgColor = "#161616",
     children,
     onClick,
     sound = false,
@@ -35,6 +39,7 @@ const GradientButton = forwardRef(
     }
     const styleVars = {
       "--gb-colors": colors.join(", "),
+      "--gb-beam": beamGradient(colors),
       "--gb-duration": `${duration}ms`,
       "--gb-border-width": `${borderWidth}px`,
       "--gb-border-radius": `${borderRadius}px`,
@@ -46,15 +51,16 @@ const GradientButton = forwardRef(
       {
         ref,
         className: cn(
-          "gradient-button relative flex min-h-10 min-w-28 cursor-pointer items-center justify-center overflow-hidden",
+          "gradient-button relative flex min-h-10 min-w-28 cursor-pointer items-center justify-center overflow-hidden text-white",
           className
         ),
         style: styleVars,
         onClick: handleClick,
         ...restProps,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "gradient-border", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "gradient-content inline-flex size-full items-center justify-center px-4 py-2", children })
+          /* @__PURE__ */ jsx("span", { className: "gradient-content inline-flex size-full items-center justify-center px-5 py-2.5", children }),
+          /* @__PURE__ */ jsx("span", { className: "gradient-glow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", {}) }),
+          /* @__PURE__ */ jsx("span", { className: "gradient-border", "aria-hidden": "true" })
         ]
       }
     );
@@ -62,5 +68,6 @@ const GradientButton = forwardRef(
 );
 GradientButton.displayName = "GradientButton";
 export {
-  GradientButton
+  GradientButton,
+  beamGradient
 };

package/dist/components/image-trail-cursor/ImageTrailCursor.js

@@ -7,6 +7,7 @@ function resetImageStyles(container) {
   const imgEls = container.querySelectorAll(".content__img");
   for (const el of imgEls) {
     el.style.cssText = "";
+    for (const frag of el.querySelectorAll(".content__img-frag")) frag.remove();
     const inner = el.querySelector(".content__img-inner");
     if (inner) {
       const bgImage = inner.style.backgroundImage;

package/dist/components/image-trail-cursor/trail-variants.d.ts

@@ -1,4 +1,4 @@
-export type VariantType = "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8" | "pixelated";
+export type VariantType = "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8" | "pixelated" | "scale" | "fall" | "gravity" | "flame" | "venetian" | "curtain" | "hexagon" | "liquid" | "zoom-split";
 export interface ImageTrailVariant {
     destroy(): void;
 }
@@ -60,6 +60,8 @@ declare abstract class BaseVariant implements ImageTrailVariant {
     protected render(): void;
     protected updateCache(): void;
     protected abstract showNextImage(): void;
+    /** Advance to the next image in the ring. */
+    protected nextImage(): ImageItem | undefined;
     protected onImageActivated(): void;
     protected onImageDeactivated(): void;
     destroy(): void;
@@ -108,5 +110,39 @@ export declare class ImageTrailVariantPixelated extends BaseVariant {
     constructor(container: HTMLDivElement);
     protected showNextImage(): void;
 }
+export declare class ImageTrailVariantScale extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantFall extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantGravity extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantFlame extends BaseVariant {
+    protected showNextImage(): void;
+}
+export type RevealPattern = "venetian" | "curtain" | "hexagon" | "liquid" | "zoom-split";
+export interface RevealFragment {
+    /** clip-path while hidden */
+    closed: string;
+    /** clip-path once revealed */
+    open: string;
+    /** 0 (first) … 1 (last): when the fragment opens within the stagger */
+    order: number;
+}
+/**
+ * The fragments of each reveal, as clip-paths in the image's own box.
+ * `closed` and `open` always have the same shape and point count, so the
+ * tween between them is a straight interpolation.
+ */
+export declare function revealFragments(pattern: RevealPattern): RevealFragment[];
+export declare class ImageTrailVariantReveal extends BaseVariant {
+    private static readonly STAGGER;
+    private readonly fragments;
+    constructor(container: HTMLDivElement, pattern: RevealPattern);
+    protected showNextImage(): void;
+    destroy(): void;
+}
 export declare const variantMap: Record<VariantType, new (container: HTMLDivElement) => ImageTrailVariant>;
 export {};

package/dist/components/image-trail-cursor/trail-variants.js

@@ -37,12 +37,12 @@ class ImageItem {
     el: null,
     inner: null
   };
-  // Port divergence: `private` where the Svelte source says `public`. gsap declares
-  // `TweenVars` inside a GLOBAL `namespace gsap` with no module-level export, so a
-  // public `gsap.TweenVars` member emits a bare `gsap.` reference into the shipped
-  // .d.ts while tsc drops the value-only `import { gsap }` — consumers then hit
-  // TS2503 "Cannot find namespace 'gsap'". A private member emits no type at all.
-  // Read only by initEvents() below, so nothing outside this class loses access.
+  // `private`, not `public`: the animation library declares `TweenVars` inside a
+  // GLOBAL namespace with no module-level export, so a public `gsap.TweenVars`
+  // member emits a bare `gsap.` reference into the shipped .d.ts while tsc drops
+  // the value-only `import { gsap }` — deep-importing consumers then hit TS2503
+  // "Cannot find namespace 'gsap'". A private member emits no type at all, and it
+  // is read only by initEvents() below, so nothing outside this class loses access.
   defaultStyle = { scale: 1, x: 0, y: 0, opacity: 0 };
   rect = null;
   resizeHandler = null;
@@ -164,7 +164,8 @@ class BaseVariant {
     const now = performance.now();
     this.positionHistory.push({ x, y, t: now });
     const cutoff = now - BaseVariant.HISTORY_MAX_AGE;
-    while (this.positionHistory.length > BaseVariant.HISTORY_MAX_LEN || this.positionHistory.length > 1 && this.positionHistory[0].t < cutoff) {
+    while (this.positionHistory.length > BaseVariant.HISTORY_MAX_LEN || // Non-null: `length > 1` on this same clause proves index 0 exists.
+    this.positionHistory.length > 1 && this.positionHistory[0].t < cutoff) {
       this.positionHistory.shift();
     }
   }
@@ -203,6 +204,11 @@ class BaseVariant {
     this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
     this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
   }
+  /** Advance to the next image in the ring. */
+  nextImage() {
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    return this.images[this.imgPosition];
+  }
   onImageActivated() {
     this.activeImagesCount++;
     this.isIdle = false;
@@ -761,6 +767,308 @@ class ImageTrailVariantPixelated extends BaseVariant {
     ).set(img.DOM.el, { opacity: 0, scale: 0.2 }, ImageTrailVariantPixelated.HOLD);
   }
 }
+function randomBetween(min, max) {
+  return min + Math.random() * (max - min);
+}
+class ImageTrailVariantScale extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    gsap.killTweensOf(img.DOM.el);
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0,
+      rotation: randomBetween(-20, 20),
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.6, ease: "back.out(2)" }, 0).to(img.DOM.el, { scale: 0, duration: 0.6, ease: "power2.in" }, 0.75).set(img.DOM.el, { opacity: 0 });
+  }
+}
+class ImageTrailVariantFall extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const floor = this.container.getBoundingClientRect().height;
+    gsap.killTweensOf(img.DOM.el);
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0,
+      rotation: 0,
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.8, ease: "elastic.out(1, 0.3)" }, 0).to(img.DOM.el, { rotation: randomBetween(-360, 360), duration: 1.1, ease: "power1.out" }, 0).to(img.DOM.el, { y: floor * 1.2 + h, duration: 1, ease: "back.in(0.4)" }, 0).set(img.DOM.el, { opacity: 0 });
+  }
+}
+class ImageTrailVariantGravity extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const height = this.container.getBoundingClientRect().height;
+    const startY = this.mousePos.y - h / 2;
+    const floorY = Math.max(startY, height - h);
+    const drop = floorY - startY;
+    const push = Math.max(-140, Math.min(140, (this.mousePos.x - this.lastMousePos.x) * 1.4));
+    const fall = 0.3 + 0.35 * Math.sqrt(drop / Math.max(1, height));
+    const bounce = drop * 0.32;
+    gsap.killTweensOf(img.DOM.el);
+    const el = img.DOM.el;
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(el, {
+      opacity: 1,
+      scale: 0,
+      rotation: randomBetween(-10, 10),
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: startY
+    }).to(el, { scale: 1, duration: 0.4, ease: "elastic.out(2, 0.6)" }, 0).to(
+      el,
+      {
+        x: `+=${push}`,
+        rotation: randomBetween(-30, 30),
+        duration: fall + 0.9,
+        ease: "power1.out"
+      },
+      0.1
+    ).to(el, { y: floorY, duration: fall, ease: "power2.in" }, 0.15).to(el, { y: floorY - bounce, duration: 0.28, ease: "power2.out" }).to(el, { y: floorY, duration: 0.28, ease: "power2.in" }).to(el, { y: floorY - bounce * 0.3, duration: 0.16, ease: "power2.out" }).to(el, { y: floorY, duration: 0.16, ease: "power2.in" }).to(el, { opacity: 0, scale: 0.7, duration: 0.3, ease: "power2.in" }, "+=0.15");
+  }
+}
+class ImageTrailVariantFlame extends BaseVariant {
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const { dx, dy } = this.getTouchVelocity();
+    const speed = Math.min(1, Math.hypot(dx, dy) / 160);
+    const rotation = (Math.random() - 0.5) * 30 * (1 + speed * 2);
+    gsap.killTweensOf(img.DOM.el);
+    gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0,
+      rotation,
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.35, ease: "back.out(1.6)" }, 0).to(
+      img.DOM.el,
+      {
+        y: `-=${40 + speed * 40}`,
+        scale: 0,
+        opacity: 0,
+        rotation: rotation * 1.6,
+        duration: 0.55,
+        ease: "power2.in"
+      },
+      0.55
+    );
+  }
+}
+const SEAM = 0.6;
+const lo = (n) => Math.max(0, n - SEAM);
+const hi = (n) => Math.min(100, n + SEAM);
+const pc = (n) => `${Math.round(n * 100) / 100}%`;
+const poly = (pts) => `polygon(${pts.map(([x, y]) => `${pc(x)} ${pc(y)}`).join(", ")})`;
+function revealFragments(pattern) {
+  switch (pattern) {
+    case "venetian": {
+      const n = 6;
+      return Array.from({ length: n }, (_, i) => {
+        const y0 = lo(i * 100 / n);
+        const y1 = hi((i + 1) * 100 / n);
+        return {
+          closed: poly([
+            [0, y0],
+            [100, y0],
+            [100, y0],
+            [0, y0]
+          ]),
+          open: poly([
+            [0, y0],
+            [100, y0],
+            [100, y1],
+            [0, y1]
+          ]),
+          order: i / (n - 1)
+        };
+      });
+    }
+    case "curtain": {
+      const n = 6;
+      const mid = (n - 1) / 2;
+      return Array.from({ length: n }, (_, i) => {
+        const x0 = lo(i * 100 / n);
+        const x1 = hi((i + 1) * 100 / n);
+        const cx = (x0 + x1) / 2;
+        return {
+          closed: poly([
+            [cx, 0],
+            [cx, 0],
+            [cx, 100],
+            [cx, 100]
+          ]),
+          open: poly([
+            [x0, 0],
+            [x1, 0],
+            [x1, 100],
+            [x0, 100]
+          ]),
+          order: Math.abs(i - mid) / mid
+        };
+      });
+    }
+    case "hexagon": {
+      const centres = [16.67, 50, 83.33];
+      const r = 31;
+      const cells = [];
+      for (const cy of centres) {
+        for (const cx of centres) {
+          const hex = Array.from({ length: 6 }, (_, k) => {
+            const a = Math.PI / 3 * k + Math.PI / 6;
+            return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+          });
+          cells.push({
+            closed: poly(hex.map(() => [cx, cy])),
+            open: poly(hex),
+            order: Math.hypot(cx - 50, cy - 50) / Math.hypot(33.33, 33.33)
+          });
+        }
+      }
+      return cells;
+    }
+    case "liquid": {
+      const blobs = [
+        [50, 50, 48],
+        [22, 26, 36],
+        [80, 24, 36],
+        [26, 80, 36],
+        [78, 78, 38]
+      ];
+      return blobs.map(([x, y, r], i) => ({
+        closed: `circle(0% at ${pc(x)} ${pc(y)})`,
+        open: `circle(${pc(r)} at ${pc(x)} ${pc(y)})`,
+        order: i / (blobs.length - 1)
+      }));
+    }
+    case "zoom-split": {
+      const quads = [
+        [0, 0],
+        [50, 0],
+        [0, 50],
+        [50, 50]
+      ];
+      return quads.map(([x, y], i) => ({
+        closed: poly([
+          [50, 50],
+          [50, 50],
+          [50, 50],
+          [50, 50]
+        ]),
+        open: poly([
+          [lo(x), lo(y)],
+          [hi(x + 50), lo(y)],
+          [hi(x + 50), hi(y + 50)],
+          [lo(x), hi(y + 50)]
+        ]),
+        order: i / 3
+      }));
+    }
+  }
+}
+const FRAG_CLASS = "content__img-frag";
+class ImageTrailVariantReveal extends BaseVariant {
+  static STAGGER = 0.22;
+  // seconds from first to last fragment
+  fragments;
+  constructor(container, pattern) {
+    super(container);
+    this.fragments = revealFragments(pattern);
+    for (const img of this.images) {
+      const bg = img.DOM.inner?.style.backgroundImage ?? "";
+      for (const f of this.fragments) {
+        const frag = document.createElement("div");
+        frag.className = FRAG_CLASS;
+        frag.style.cssText = `position:absolute;inset:0;background-image:${bg};background-size:cover;background-position:center;clip-path:${f.closed};`;
+        img.DOM.el.appendChild(frag);
+      }
+      if (img.DOM.inner) img.DOM.inner.style.opacity = "0";
+    }
+  }
+  showNextImage() {
+    ++this.zIndexVal;
+    const img = this.nextImage();
+    if (!img) return;
+    const w = img.rect?.width ?? 0;
+    const h = img.rect?.height ?? 0;
+    const frags = [...img.DOM.el.querySelectorAll(`.${FRAG_CLASS}`)];
+    const stagger = ImageTrailVariantReveal.STAGGER;
+    gsap.killTweensOf([img.DOM.el, ...frags]);
+    const tl = gsap.timeline({
+      onStart: () => this.onImageActivated(),
+      onComplete: () => this.onImageDeactivated()
+    }).set(img.DOM.el, {
+      opacity: 1,
+      scale: 0.85,
+      rotation: 0,
+      zIndex: this.zIndexVal,
+      x: this.mousePos.x - w / 2,
+      y: this.mousePos.y - h / 2
+    }).to(img.DOM.el, { scale: 1, duration: 0.5, ease: "power3.out" }, 0);
+    frags.forEach((frag, i) => {
+      const f = this.fragments[i];
+      tl.fromTo(
+        frag,
+        { clipPath: f.closed },
+        { clipPath: f.open, duration: 0.45, ease: "power3.out" },
+        f.order * stagger
+      );
+      tl.to(
+        frag,
+        { clipPath: f.closed, duration: 0.35, ease: "power3.in" },
+        0.95 + (1 - f.order) * stagger
+      );
+    });
+    tl.set(img.DOM.el, { opacity: 0 });
+  }
+  destroy() {
+    for (const img of this.images) {
+      const frags = img.DOM.el.querySelectorAll(`.${FRAG_CLASS}`);
+      gsap.killTweensOf([...frags]);
+      frags.forEach((f) => f.remove());
+      if (img.DOM.inner) img.DOM.inner.style.opacity = "";
+    }
+    super.destroy();
+  }
+}
+function revealVariant(pattern) {
+  return class extends ImageTrailVariantReveal {
+    constructor(container) {
+      super(container, pattern);
+    }
+  };
+}
 const variantMap = {
   type1: ImageTrailVariant1,
   type2: ImageTrailVariant2,
@@ -770,7 +1078,16 @@ const variantMap = {
   type6: ImageTrailVariant6,
   type7: ImageTrailVariant7,
   type8: ImageTrailVariant8,
-  pixelated: ImageTrailVariantPixelated
+  pixelated: ImageTrailVariantPixelated,
+  scale: ImageTrailVariantScale,
+  fall: ImageTrailVariantFall,
+  gravity: ImageTrailVariantGravity,
+  flame: ImageTrailVariantFlame,
+  venetian: revealVariant("venetian"),
+  curtain: revealVariant("curtain"),
+  hexagon: revealVariant("hexagon"),
+  liquid: revealVariant("liquid"),
+  "zoom-split": revealVariant("zoom-split")
 };
 export {
   ImageItem,
@@ -782,6 +1099,12 @@ export {
   ImageTrailVariant6,
   ImageTrailVariant7,
   ImageTrailVariant8,
+  ImageTrailVariantFall,
+  ImageTrailVariantFlame,
+  ImageTrailVariantGravity,
   ImageTrailVariantPixelated,
+  ImageTrailVariantReveal,
+  ImageTrailVariantScale,
+  revealFragments,
   variantMap
 };

package/dist/components/interactive-hover-button/InteractiveHoverButton.js

@@ -3,12 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../utils.js";
 import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                             */
 const InteractiveHoverButton = forwardRef(
-  ({ text = "Button", className, children, sound = false, onClick, disabled, ...restProps }, ref) => {
+  ({ text = "Button", className, children, onClick, sound = false, ...restProps }, ref) => {
     const label = children ?? text;
     const playCue = useSoundCue(sound);
     function handleClick(event) {
-      if (sound && !disabled) playCue("press");
+      if (sound && !restProps.disabled) playCue("press");
       onClick?.(event);
     }
     return /* @__PURE__ */ jsxs(
@@ -16,45 +17,39 @@ const InteractiveHoverButton = forwardRef(
       {
         ref,
         className: cn(
-          "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
+          "ihb group bg-background relative isolate w-auto cursor-pointer overflow-hidden rounded-full border px-6 py-2.5 text-center font-semibold",
           className
         ),
         onClick: handleClick,
-        disabled,
         ...restProps,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "bg-primary size-2 rounded-lg group-hover:scale-[100.8] motion-safe:transition-all motion-safe:duration-300" }),
-            /* @__PURE__ */ jsx("span", { className: "inline-block group-hover:translate-x-12 group-hover:opacity-0 motion-safe:transition-all motion-safe:duration-300", children: label })
+          /* @__PURE__ */ jsx("span", { className: "ihb-fill", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { className: "ihb-rest", children: [
+            /* @__PURE__ */ jsx("span", { className: "ihb-dot-space", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "ihb-label", children: label })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "text-primary-foreground absolute top-0 z-10 flex size-full translate-x-12 items-center justify-center gap-2 opacity-0 group-hover:-translate-x-5 group-hover:opacity-100 motion-safe:transition-all motion-safe:duration-300",
-              children: [
-                /* @__PURE__ */ jsx("span", { children: label }),
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "24",
-                    height: "24",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-                      /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "ihb-hover", children: [
+            /* @__PURE__ */ jsx("span", { className: "ihb-hover-label", children: label }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "ihb-arrow",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "18",
+                height: "18",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+                  /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+                ]
+              }
+            )
+          ] })
         ]
       }
     );

package/dist/components/marquee/Marquee.d.ts

@@ -4,13 +4,17 @@ export interface MarqueeProps {
     className?: string;
     /** Reverse the scroll direction */
     reverse?: boolean;
-    /** Pause the animation on hover */
+    /** Ease the conveyor to a stop while the pointer (or focus) is inside */
     pauseOnHover?: boolean;
     /** Scroll vertically instead of horizontally */
     vertical?: boolean;
-    /** Number of times to repeat the children track */
+    /** Number of copies of the children rendered on the track */
     repeat?: number;
+    /** Dissolve items at both edges with a gradient mask */
+    fade?: boolean;
+    /** Speed multiplier applied on top of `--duration` (2 = twice as fast) */
+    speed?: number;
     /** Content to repeat and scroll */
     children?: ReactNode;
 }
-export declare function Marquee({ className, reverse, pauseOnHover, vertical, repeat, children, }: MarqueeProps): import("react").JSX.Element;
+export declare function Marquee({ className, reverse, pauseOnHover, vertical, repeat, fade, speed, children, }: MarqueeProps): import("react").JSX.Element;