fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/pagination/Pagination.js

@@ -1,10 +1,15 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useEffect } from "react";
 import { cn } from "../../utils.js";
 import { buildPageRange } from "./pagination-range.js";
 import { useSoundCue } from "../../sound/use-sound.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { EASINGS, DURATIONS } from "../../internals/motion/tokens.js";
 /* empty css               */
+const SLIDE_MS = DURATIONS.base;
 const pageButtonBase = "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
 const navButtonBase = "inline-flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
 const Pagination = forwardRef(
@@ -32,12 +37,138 @@ const Pagination = forwardRef(
     const isFirst = safePage <= 1;
     const isLast = safePage >= safeCount;
     const [popArmed, setPopArmed] = useState(false);
+    const armedRef = useRef(false);
     const lastPageRef = useRef(safePage);
+    const reduced = useReducedMotion();
+    const flipDuration = reduced ? 0 : SLIDE_MS;
+    const navRef = useRef(null);
+    const composedRef = useComposedRefs(navRef, forwardedRef);
+    const indicatorRef = useRef(null);
+    const [indicatorPlaced, setIndicatorPlaced] = useState(false);
+    function placeIndicator(animate) {
+      const el = indicatorRef.current;
+      const nav = navRef.current;
+      const current = nav?.querySelector('button[aria-current="page"]');
+      if (!el || !current || current.offsetWidth === 0) {
+        setIndicatorPlaced(false);
+        return;
+      }
+      let x = 0;
+      let y = 0;
+      for (let n = current; n && n !== nav; ) {
+        x += n.offsetLeft;
+        y += n.offsetTop;
+        n = n.offsetParent;
+      }
+      const transform = `translate(${x}px, ${y}px)`;
+      el.style.width = `${current.offsetWidth}px`;
+      el.style.height = `${current.offsetHeight}px`;
+      if (el.style.transform === transform) {
+        setIndicatorPlaced(true);
+        return;
+      }
+      if (animate && el.style.transform) {
+        el.style.transform = transform;
+      } else {
+        const previous = el.style.transition;
+        el.style.transition = "none";
+        el.style.transform = transform;
+        void el.offsetWidth;
+        el.style.transition = previous;
+      }
+      setIndicatorPlaced(true);
+    }
+    const itemEls = useRef(/* @__PURE__ */ new Map());
+    const itemRects = useRef(/* @__PURE__ */ new Map());
+    const itemAnims = useRef(/* @__PURE__ */ new Map());
+    const mountedRef = useRef(false);
+    function measureItems() {
+      const nav = navRef.current;
+      const origin = nav?.getBoundingClientRect();
+      const rects = /* @__PURE__ */ new Map();
+      for (const [key, el] of itemEls.current) {
+        const rect = el.getBoundingClientRect();
+        rects.set(key, {
+          left: rect.left - (origin?.left ?? 0),
+          top: rect.top - (origin?.top ?? 0)
+        });
+      }
+      return rects;
+    }
+    const itemsKey = items.join(",");
+    useIsomorphicLayoutEffect(() => {
+      const nav = navRef.current;
+      if (safePage !== lastPageRef.current) {
+        lastPageRef.current = safePage;
+        armedRef.current = true;
+        nav?.setAttribute("data-armed", "true");
+        setPopArmed(true);
+      }
+      const firstCommit = !mountedRef.current;
+      mountedRef.current = true;
+      const origin = nav?.getBoundingClientRect();
+      const nextRects = /* @__PURE__ */ new Map();
+      for (const [key, el] of itemEls.current) {
+        const running = itemAnims.current.get(key);
+        let driftX = 0;
+        let driftY = 0;
+        if (running) {
+          const live = el.getBoundingClientRect();
+          running.cancel();
+          const settled = el.getBoundingClientRect();
+          driftX = live.left - settled.left;
+          driftY = live.top - settled.top;
+        }
+        itemAnims.current.delete(key);
+        const rect = el.getBoundingClientRect();
+        const left = rect.left - (origin?.left ?? 0);
+        const top = rect.top - (origin?.top ?? 0);
+        nextRects.set(key, { left, top });
+        if (firstCommit || !flipDuration || typeof el.animate !== "function") continue;
+        const prev = itemRects.current.get(key);
+        if (prev) {
+          const dx = prev.left + driftX - left;
+          const dy = prev.top + driftY - top;
+          if (!dx && !dy) continue;
+          itemAnims.current.set(
+            key,
+            el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], {
+              duration: flipDuration,
+              easing: EASINGS.out
+            })
+          );
+        } else {
+          itemAnims.current.set(
+            key,
+            el.animate([{ opacity: 0 }, { opacity: 1 }], {
+              duration: DURATIONS.fast,
+              delay: 60,
+              easing: "linear",
+              fill: "backwards"
+            })
+          );
+        }
+      }
+      itemRects.current = nextRects;
+      placeIndicator(armedRef.current);
+    }, [safePage, itemsKey, flipDuration]);
     useEffect(() => {
-      if (safePage === lastPageRef.current) return;
-      lastPageRef.current = safePage;
-      setPopArmed(true);
-    }, [safePage]);
+      const nav = navRef.current;
+      if (!nav || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(() => {
+        const gliding = [...itemAnims.current.values()].some((a) => a.playState === "running");
+        if (!gliding) itemRects.current = measureItems();
+        placeIndicator(false);
+      });
+      ro.observe(nav);
+      return () => ro.disconnect();
+    }, []);
+    function registerItem(key) {
+      return (el) => {
+        if (el) itemEls.current.set(key, el);
+        else itemEls.current.delete(key);
+      };
+    }
     function goTo(next) {
       if (disabled) return;
       const clamped = Math.max(1, Math.min(Math.floor(next), Math.max(safeCount, 1)));
@@ -62,90 +193,97 @@ const Pagination = forwardRef(
       if (disabled || isLast) return;
       goTo(safeCount);
     }
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "nav",
       {
-        ref: forwardedRef,
+        ref: composedRef,
         "aria-label": label,
         "data-armed": popArmed ? "true" : void 0,
+        "data-indicator": indicatorPlaced ? "" : void 0,
         className: cn("ft-pagination", className),
-        children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
-          showEdges && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: navButtonBase,
-              disabled: disabled || isFirst,
-              "aria-label": "First page",
-              title: "First page",
-              onClick: handleFirst,
-              children: "« First"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: navButtonBase,
-              disabled: disabled || isFirst,
-              "aria-label": "Previous page",
-              title: "Previous page",
-              onClick: handlePrevious,
-              children: previousLabel ?? "‹ Previous"
-            }
-          ) }),
-          items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item === "ellipsis" ? (
-            // Decorative only: it stands for a run of hidden pages, not a
-            // control, so it must not take focus or be reachable by Tab.
-            /* @__PURE__ */ jsx(
-              "span",
+        children: [
+          /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+            showEdges && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonBase,
+                disabled: disabled || isFirst,
+                "aria-label": "First page",
+                title: "First page",
+                onClick: handleFirst,
+                children: "« First"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonBase,
+                disabled: disabled || isFirst,
+                "aria-label": "Previous page",
+                title: "Previous page",
+                onClick: handlePrevious,
+                children: previousLabel ?? "‹ Previous"
+              }
+            ) }),
+            items.map((item, i) => {
+              const key = item === "ellipsis" ? `ellipsis-${i}` : `page-${item}`;
+              return /* @__PURE__ */ jsx("li", { ref: registerItem(key), children: item === "ellipsis" ? (
+                // Decorative only: it stands for a run of hidden pages, not a
+                // control, so it must not take focus or be reachable by Tab.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "text-muted-foreground flex size-8 items-center justify-center select-none",
+                    children: "…"
+                  }
+                )
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    pageButtonBase,
+                    item === safePage ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  ),
+                  disabled,
+                  "aria-current": item === safePage ? "page" : void 0,
+                  "aria-label": `Go to page ${item}`,
+                  title: `Go to page ${item}`,
+                  onClick: () => goTo(item),
+                  children: item
+                }
+              ) }, key);
+            }),
+            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonBase,
+                disabled: disabled || isLast,
+                "aria-label": "Next page",
+                title: "Next page",
+                onClick: handleNext,
+                children: nextLabel ?? "Next ›"
+              }
+            ) }),
+            showEdges && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
               {
-                "aria-hidden": "true",
-                className: "text-muted-foreground flex size-8 items-center justify-center select-none",
-                children: "…"
+                type: "button",
+                className: navButtonBase,
+                disabled: disabled || isLast,
+                "aria-label": "Last page",
+                title: "Last page",
+                onClick: handleLast,
+                children: "Last »"
               }
-            )
-          ) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                pageButtonBase,
-                item === safePage ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-              ),
-              disabled,
-              "aria-current": item === safePage ? "page" : void 0,
-              "aria-label": `Go to page ${item}`,
-              title: `Go to page ${item}`,
-              onClick: () => goTo(item),
-              children: item
-            }
-          ) }, item === "ellipsis" ? `ellipsis-${i}` : `page-${item}`)),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: navButtonBase,
-              disabled: disabled || isLast,
-              "aria-label": "Next page",
-              title: "Next page",
-              onClick: handleNext,
-              children: nextLabel ?? "Next ›"
-            }
-          ) }),
-          showEdges && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: navButtonBase,
-              disabled: disabled || isLast,
-              "aria-label": "Last page",
-              title: "Last page",
-              onClick: handleLast,
-              children: "Last »"
-            }
-          ) })
-        ] })
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "ft-pagination-indicator", "aria-hidden": "true" })
+        ]
       }
     );
   }

package/dist/components/rainbow-button/RainbowButton.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../utils.js";
 import { useSoundCue } from "../../sound/use-sound.js";
@@ -24,7 +24,7 @@ const RainbowButton = forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
         "a",
         {
           ref,
@@ -35,11 +35,15 @@ const RainbowButton = forwardRef(
           role: disabled ? "link" : void 0,
           tabIndex: disabled ? -1 : void 0,
           onClick: handleClick,
-          children
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "rainbow-button__glow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", {}) }),
+            /* @__PURE__ */ jsx("span", { className: "rainbow-button__beam", "aria-hidden": "true" }),
+            children
+          ]
         }
       );
     }
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
@@ -48,7 +52,11 @@ const RainbowButton = forwardRef(
         type,
         disabled,
         onClick: handleClick,
-        children
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "rainbow-button__glow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", {}) }),
+          /* @__PURE__ */ jsx("span", { className: "rainbow-button__beam", "aria-hidden": "true" }),
+          children
+        ]
       }
     );
   }

package/dist/components/ripple-button/RippleButton.d.ts

@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes, ReactNode } from "react";
 export interface RippleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
     /** Additional CSS classes */
     className?: string;
-    /** Color of the ripple effect */
+    /** Color of the ripple: its glow, its rings and the border tint */
     rippleColor?: string;
     /** Animation duration in milliseconds */
     duration?: number;
@@ -14,4 +14,23 @@ export interface RippleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonE
      */
     sound?: boolean;
 }
+/**
+ * Where a ripple starts and how big it grows: from the pointer, or from the
+ * centre for a keyboard press (no pointer position), with a diameter that
+ * reaches the farthest corner.
+ */
+export declare function rippleGeometry(rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, event: {
+    clientX: number;
+    clientY: number;
+    detail: number;
+}): {
+    x: number;
+    y: number;
+    size: number;
+};
 export declare const RippleButton: import("react").ForwardRefExoticComponent<RippleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ripple-button/RippleButton.js

@@ -5,63 +5,85 @@ import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
 import { useSoundCue } from "../../sound/use-sound.js";
 import { cn } from "../../utils.js";
 /* empty css                  */
+function rippleGeometry(rect, event) {
+  const keyboard = event.detail === 0;
+  const cx = keyboard ? rect.width / 2 : event.clientX - rect.left;
+  const cy = keyboard ? rect.height / 2 : event.clientY - rect.top;
+  const dx = Math.max(cx, rect.width - cx);
+  const dy = Math.max(cy, rect.height - cy);
+  const size = 2 * Math.hypot(dx, dy);
+  return { x: cx - size / 2, y: cy - size / 2, size };
+}
 const RippleButton = forwardRef(
   ({
     className,
-    rippleColor = "#ADD8E6",
-    duration = 600,
+    rippleColor = "#60a5fa",
+    duration = 900,
     children,
     onClick,
+    onPointerMove,
     sound = false,
     ...restProps
   }, forwardedRef) => {
     const buttonRef = useRef(null);
     const composedRef = useComposedRefs(forwardedRef, buttonRef);
     const [ripples, setRipples] = useState([]);
-    const nextKey = useRef(0);
+    const nextRippleKey = useRef(0);
     const playCue = useSoundCue(sound);
+    function handleClick(event) {
+      if (!restProps.disabled) playCue("press");
+      createRipple(event);
+      onClick?.(event);
+    }
+    function handlePointerMove(event) {
+      const el = event.currentTarget;
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--ripple-x", `${event.clientX - rect.left}px`);
+      el.style.setProperty("--ripple-y", `${event.clientY - rect.top}px`);
+      onPointerMove?.(event);
+    }
     function createRipple(event) {
       const button = buttonRef.current;
       if (!button) return;
-      const rect = button.getBoundingClientRect();
-      const size = Math.max(rect.width, rect.height);
-      const x = event.clientX - rect.left - size / 2;
-      const y = event.clientY - rect.top - size / 2;
-      const newRipple = { x, y, size, key: nextKey.current++ };
+      const { x, y, size } = rippleGeometry(button.getBoundingClientRect(), event);
+      const newRipple = { x, y, size, key: nextRippleKey.current++ };
       setRipples((prev) => [...prev, newRipple]);
       setTimeout(() => {
         setRipples((prev) => prev.filter((r) => r.key !== newRipple.key));
       }, duration);
     }
-    function handleClick(event) {
-      if (!restProps.disabled) playCue("press");
-      createRipple(event);
-      onClick?.(event);
-    }
     return /* @__PURE__ */ jsxs(
       "button",
       {
         ref: composedRef,
         className: cn(
-          "ripple-button relative flex cursor-pointer items-center justify-center overflow-hidden",
-          "bg-background text-primary rounded-lg border-2 px-4 py-2 text-center",
+          "ripple-button relative isolate flex cursor-pointer items-center justify-center overflow-hidden",
+          "bg-background text-foreground border-border rounded-lg border px-5 py-2.5 text-center font-medium",
+          "shadow-[inset_0_1px_0_rgb(255_255_255/0.06),0_1px_2px_rgb(0_0_0/0.08)]",
+          "transition-[transform,border-color,background-color] duration-300 ease-out",
+          "hover:bg-muted/40 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50",
           className
         ),
-        style: { "--ripple-duration": `${duration}ms` },
+        style: {
+          "--ripple-duration": `${duration}ms`,
+          "--ripple-color": rippleColor
+        },
+        "data-rippling": ripples.length > 0 ? "" : void 0,
         onClick: handleClick,
+        onPointerMove: handlePointerMove,
         ...restProps,
         children: [
           /* @__PURE__ */ jsx("div", { className: "relative z-10", children }),
-          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0", children: ripples.map((ripple) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { className: "ripple-hover", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0", "aria-hidden": "true", children: ripples.map((ripple) => /* @__PURE__ */ jsx(
             "span",
             {
-              className: "ripple-animation absolute rounded-full opacity-30",
+              className: "ripple-animation absolute rounded-full",
               style: {
                 width: `${ripple.size}px`,
                 height: `${ripple.size}px`,
                 top: `${ripple.y}px`,
-                left: `${ripple.x}px`,
-                backgroundColor: rippleColor
+                left: `${ripple.x}px`
               }
             },
             ripple.key
@@ -73,5 +95,6 @@ const RippleButton = forwardRef(
 );
 RippleButton.displayName = "RippleButton";
 export {
-  RippleButton
+  RippleButton,
+  rippleGeometry
 };

package/dist/components/shimmer-button/ShimmerButton.d.ts

@@ -1,12 +1,12 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 type BaseProps = {
-    /** Shimmer highlight color */
+    /** Colour of the sheen */
     shimmerColor?: string;
-    /** Thickness of the shimmer border */
+    /** Thickness of the rim the sheen glints on */
     shimmerSize?: string;
     /** Button border radius */
     borderRadius?: string;
-    /** Duration of the shimmer animation cycle */
+    /** Duration of one sheen cycle: the sweep, then a pause */
     shimmerDuration?: string;
     /** Button background color */
     background?: string;
@@ -15,8 +15,8 @@ type BaseProps = {
     /** Button content */
     children?: ReactNode;
     /**
-     * Plays the matching interface cue through the sound controller. Off
-     * by default; only audible once the user has enabled sound.
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
      */
     sound?: boolean;
 };

package/dist/components/shimmer-button/ShimmerButton.js

@@ -13,12 +13,12 @@ const ShimmerButton = forwardRef(
     shimmerDuration = "3s",
     background = "rgba(0, 0, 0, 1)",
     children,
-    sound = false,
     onClick,
+    onPointerMove,
+    sound = false,
     ...restProps
   }, ref) => {
     const styleVars = {
-      "--spread": "90deg",
       "--shimmer-color": shimmerColor,
       "--radius": borderRadius,
       "--speed": shimmerDuration,
@@ -30,34 +30,32 @@ const ShimmerButton = forwardRef(
       if (sound && !restProps.disabled) playCue("press");
       onClick?.(event);
     }
+    function handlePointerMove(event) {
+      const el = event.currentTarget;
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--mx", `${event.clientX - rect.left}px`);
+      el.style.setProperty("--my", `${event.clientY - rect.top}px`);
+      onPointerMove?.(event);
+    }
     return /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
         className: cn(
-          "shimmer-button group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]",
-          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+          "shimmer-button group relative isolate flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] px-6 py-3 whitespace-nowrap text-white/90",
+          "transform-gpu transition-[transform,color] duration-300 ease-out hover:text-white active:scale-[0.98]",
           className
         ),
         style: styleVars,
         onClick: handleClick,
+        onPointerMove: handlePointerMove,
         ...restProps,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "[container-type:size] absolute inset-0 -z-30 overflow-visible blur-[2px]", children: /* @__PURE__ */ jsx("div", { className: "shimmer-slide absolute inset-0 [aspect-ratio:1] h-[100cqh] [border-radius:0] [mask:none]", children: /* @__PURE__ */ jsx("div", { className: "spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]" }) }) }),
-          children,
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "insert-0 absolute size-full",
-                "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
-                "transform-gpu transition-all duration-300 ease-in-out",
-                "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
-                "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "absolute [inset:var(--cut)] -z-20 [border-radius:var(--radius)] [background:var(--bg)]" })
+          /* @__PURE__ */ jsx("span", { className: "shimmer-button__rim", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "shimmer-button__face", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10", children }),
+          /* @__PURE__ */ jsx("span", { className: "shimmer-button__sheen", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "shimmer-button__spot", "aria-hidden": "true" })
         ]
       }
     );

package/dist/components/smooth-cursor/SmoothCursor.d.ts

@@ -1,12 +1,6 @@
 import { type ReactNode } from "react";
-export interface SpringConfig {
-    /** Controls how quickly the animation settles (default: 45) */
-    damping?: number;
-    /** Controls the spring stiffness (default: 400) */
-    stiffness?: number;
-    /** Controls the virtual mass of the animated object (default: 1) */
-    mass?: number;
-}
+import { type SpringConfig } from "./smooth-cursor-core.js";
+export type { SpringConfig };
 export interface SmoothCursorProps {
     /** Custom cursor node to replace the default arrow cursor */
     cursor?: ReactNode;
@@ -14,5 +8,15 @@ export interface SmoothCursorProps {
     springConfig?: SpringConfig;
     /** Additional CSS classes */
     className?: string;
+    /** Name shown in a pill that trails the arrow. No pill when omitted. */
+    label?: string;
+    /** Fill colour of the arrow and the name pill (any CSS colour) */
+    color?: string;
+    /** Rotate the cursor toward its direction of travel (the arrow stays upright when false) */
+    rotate?: boolean;
+    /** Milliseconds without movement before the name pill dims; 0 disables */
+    idleFade?: number;
+    /** Spring for the name pill; missing fields derive from `springConfig` (stiffness × 0.55, damping × 1.1) */
+    labelSpring?: SpringConfig;
 }
-export declare function SmoothCursor({ cursor, springConfig, className }: SmoothCursorProps): import("react").JSX.Element;
+export declare function SmoothCursor({ cursor, springConfig, className, label, color, rotate, idleFade, labelSpring, }: SmoothCursorProps): import("react").JSX.Element;