fancy-ui-react 0.2.0

package/dist/components/glowing-effect/GlowingEffect.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+function GlowingEffect({
+  blur = 0,
+  inactiveZone = 0.7,
+  proximity = 0,
+  spread = 20,
+  variant = "default",
+  glow = false,
+  className = "",
+  disabled = true,
+  movementDuration = 2,
+  borderWidth = 1
+}) {
+  const containerRef = useRef(null);
+  const motionRef = useRef({
+    lastPosition: { x: 0, y: 0 },
+    animationFrameId: 0,
+    angleAnimationFrameId: 0,
+    currentAngle: 0,
+    targetAngle: 0,
+    animating: false
+  });
+  const liveRef = useRef({ inactiveZone, proximity, movementDuration });
+  useEffect(() => {
+    liveRef.current = { inactiveZone, proximity, movementDuration };
+  });
+  const disabledAtMount = useRef(disabled);
+  const containerStyle = {
+    "--blur": `${blur}px`,
+    "--spread": spread,
+    "--start": "0",
+    "--active": "0",
+    "--glowingeffect-border-width": `${borderWidth}px`,
+    "--repeating-conic-gradient-times": "5",
+    "--gradient": variant === "white" ? `repeating-conic-gradient(from 236.84deg at 50% 50%, var(--black), var(--black) calc(25% / var(--repeating-conic-gradient-times)))` : `radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%), radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%), radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%), repeating-conic-gradient(from 236.84deg at 50% 50%, #dd7bbb 0%, #d79f1e calc(25% / var(--repeating-conic-gradient-times)), #5a922c calc(50% / var(--repeating-conic-gradient-times)), #4c7894 calc(75% / var(--repeating-conic-gradient-times)), #dd7bbb calc(100% / var(--repeating-conic-gradient-times)))`
+  };
+  useEffect(() => {
+    if (disabledAtMount.current) return;
+    const state = motionRef.current;
+    function animateAngle() {
+      const speed = 0.08 / Math.max(liveRef.current.movementDuration, 0.1);
+      state.currentAngle = state.currentAngle + (state.targetAngle - state.currentAngle) * speed;
+      if (containerRef.current) {
+        containerRef.current.style.setProperty("--start", String(state.currentAngle));
+      }
+      if (Math.abs(state.targetAngle - state.currentAngle) > 0.1) {
+        state.angleAnimationFrameId = requestAnimationFrame(animateAngle);
+      } else {
+        state.currentAngle = state.targetAngle;
+        if (containerRef.current) {
+          containerRef.current.style.setProperty("--start", String(state.currentAngle));
+        }
+        state.animating = false;
+      }
+    }
+    function handleMove(e) {
+      if (!containerRef.current) return;
+      if (state.animationFrameId) {
+        cancelAnimationFrame(state.animationFrameId);
+      }
+      state.animationFrameId = requestAnimationFrame(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        const { left, top, width, height } = container.getBoundingClientRect();
+        const mouseX = e?.x ?? state.lastPosition.x;
+        const mouseY = e?.y ?? state.lastPosition.y;
+        if (e) {
+          state.lastPosition = { x: mouseX, y: mouseY };
+        }
+        const center = [left + width * 0.5, top + height * 0.5];
+        const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]);
+        const inactiveRadius = 0.5 * Math.min(width, height) * liveRef.current.inactiveZone;
+        if (distanceFromCenter < inactiveRadius) {
+          container.style.setProperty("--active", "0");
+          return;
+        }
+        const { proximity: liveProximity } = liveRef.current;
+        const isActive = mouseX > left - liveProximity && mouseX < left + width + liveProximity && mouseY > top - liveProximity && mouseY < top + height + liveProximity;
+        container.style.setProperty("--active", isActive ? "1" : "0");
+        if (!isActive) return;
+        const rawTarget = 180 * Math.atan2(mouseY - center[1], mouseX - center[0]) / Math.PI + 90;
+        const angleDiff = (rawTarget - state.currentAngle + 180) % 360 - 180;
+        state.targetAngle = state.currentAngle + angleDiff;
+        if (!state.animating) {
+          state.animating = true;
+          animateAngle();
+        }
+      });
+    }
+    function handlePointerMove(e) {
+      handleMove(e);
+    }
+    function handleScroll() {
+      handleMove();
+    }
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    document.body.addEventListener("pointermove", handlePointerMove, { passive: true });
+    return () => {
+      if (state.animationFrameId) cancelAnimationFrame(state.animationFrameId);
+      if (state.angleAnimationFrameId) cancelAnimationFrame(state.angleAnimationFrameId);
+      state.animating = false;
+      window.removeEventListener("scroll", handleScroll);
+      document.body.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity",
+          glow && "opacity-100",
+          variant === "white" && "border-white",
+          disabled && "!block"
+        ),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: containerStyle,
+        className: cn(
+          "pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity",
+          glow && "opacity-100",
+          blur > 0 && "blur-[var(--blur)]",
+          className,
+          disabled && "!hidden"
+        ),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "glow",
+              "rounded-[inherit]",
+              "after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))] after:rounded-[inherit] after:content-['']",
+              "after:[border:var(--glowingeffect-border-width)_solid_transparent]",
+              "after:[background-attachment:fixed] after:[background:var(--gradient)]",
+              "after:opacity-[var(--active)] after:transition-opacity after:duration-300",
+              "after:[mask-clip:padding-box,border-box]",
+              "after:[mask-composite:intersect]",
+              "after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  GlowingEffect
+};

package/dist/components/glowing-effect/index.d.ts

@@ -0,0 +1,2 @@
+export { GlowingEffect } from "./GlowingEffect.js";
+export type { GlowingEffectProps } from "./GlowingEffect.js";

package/dist/components/gradient-button/GradientButton.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+type BaseProps = {
+    /** Gradient colors for the conic-gradient border */
+    colors?: string[];
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Border radius in pixels */
+    borderRadius?: number;
+    /** Blur amount for the gradient in pixels */
+    blur?: number;
+    /** Background color of the button content area */
+    bgColor?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Button content */
+    children?: ReactNode;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+};
+export interface GradientButtonProps extends BaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {
+}
+export declare const GradientButton: import("react").ForwardRefExoticComponent<GradientButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,66 @@
+"use client";
+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 DEFAULT_COLORS = [
+  "#FF0000",
+  "#FFA500",
+  "#FFFF00",
+  "#008000",
+  "#0000FF",
+  "#4B0082",
+  "#EE82EE",
+  "#FF0000"
+];
+const GradientButton = forwardRef(
+  ({
+    className,
+    colors = DEFAULT_COLORS,
+    duration = 2500,
+    borderWidth = 2,
+    borderRadius = 8,
+    blur = 4,
+    bgColor = "#000",
+    children,
+    onClick,
+    sound = false,
+    ...restProps
+  }, ref) => {
+    const playCue = useSoundCue(sound);
+    function handleClick(event) {
+      if (!restProps.disabled) playCue("press");
+      onClick?.(event);
+    }
+    const styleVars = {
+      "--gb-colors": colors.join(", "),
+      "--gb-duration": `${duration}ms`,
+      "--gb-border-width": `${borderWidth}px`,
+      "--gb-border-radius": `${borderRadius}px`,
+      "--gb-blur": `${blur}px`,
+      "--gb-bg-color": bgColor
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          "gradient-button relative flex min-h-10 min-w-28 cursor-pointer items-center justify-center overflow-hidden",
+          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 })
+        ]
+      }
+    );
+  }
+);
+GradientButton.displayName = "GradientButton";
+export {
+  GradientButton
+};

package/dist/components/gradient-button/index.d.ts

@@ -0,0 +1,2 @@
+export { GradientButton } from "./GradientButton.js";
+export type { GradientButtonProps } from "./GradientButton.js";

package/dist/components/hover-card/HoverCard.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import type { Side, Align } from "../../internals/anchor-position.js";
+export interface HoverCardProps {
+    /**
+     * Whether the card is open.
+     *
+     * The source declares this bindable; React has no two-way channel, so the
+     * component keeps its own copy either way and re-syncs it whenever the
+     * CALLER changes the prop. That is what makes all three documented call
+     * shapes work off one implementation — a caller driving `open` from its
+     * own state, a caller who passes only `onOpenChange`, and a caller who
+     * passes a plain unbound value alongside it.
+     */
+    open?: boolean;
+    /** Fires whenever the open state changes, from any trigger — pointer, focus, Escape or an outside click. */
+    onOpenChange?: (open: boolean) => void;
+    /** Side of the trigger the card opens on. Flips to the opposite side when it would overflow the viewport. */
+    side?: Side;
+    /** Alignment along the trigger's cross axis. */
+    align?: Align;
+    /** Gap in pixels between the trigger and the card. */
+    offset?: number;
+    /** Delay in ms before the card opens after the pointer enters the trigger. Ignored for focus, which opens immediately. */
+    openDelay?: number;
+    /**
+     * Delay in ms before the card closes after the pointer leaves the trigger
+     * or the card. Gives the pointer time to travel from one to the other
+     * without the card vanishing mid-trip. Ignored for blur, which closes
+     * immediately.
+     */
+    closeDelay?: number;
+    /**
+     * The element that opens the card on hover or focus. Called with the
+     * card's id (or `undefined` while closed) — put it on your own trigger
+     * element's `aria-describedby` yourself. HoverCard cannot do this for
+     * you: the wrapper it renders around this node has no accessible role of
+     * its own, so an attribute set there would not be picked up for whatever
+     * focusable element you render inside it.
+     */
+    trigger?: (descriptionId: string | undefined) => ReactNode;
+    /**
+     * The card's content. Supplementary only — nothing inside should be the
+     * only way to reach information or an action. See the README before
+     * putting links or buttons in here.
+     */
+    children?: ReactNode;
+    /** Additional classes for the card panel. */
+    className?: string;
+}
+/**
+ * A rich preview card that opens on hover or focus, anchored to its trigger.
+ *
+ * The source declares `ref = $bindable(null)` for the TRIGGER WRAPPER
+ * element, so that element arrives through this component's ref channel
+ * (PORTING.md §"API contract") rather than through a prop.
+ */
+export declare const HoverCard: import("react").ForwardRefExoticComponent<HoverCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/hover-card/HoverCard.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useAnchorPosition } from "../../internals/use-anchor-position.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+const HoverCard = forwardRef(function HoverCard2({
+  open: openProp,
+  onOpenChange,
+  side = "bottom",
+  align = "center",
+  offset = 8,
+  openDelay = 300,
+  closeDelay = 150,
+  trigger,
+  children,
+  className
+}, forwardedRef) {
+  const panelId = useFancyId();
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const openTimer = useRef(void 0);
+  const closeTimer = useRef(void 0);
+  function clearOpenTimer() {
+    if (openTimer.current !== void 0) {
+      clearTimeout(openTimer.current);
+      openTimer.current = void 0;
+    }
+  }
+  function clearCloseTimer() {
+    if (closeTimer.current !== void 0) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = void 0;
+    }
+  }
+  const openRef = useLiveRef(open);
+  const emitOpenChange = useEventCallback(onOpenChange);
+  const setOpen = useCallback(
+    (next) => {
+      clearOpenTimer();
+      clearCloseTimer();
+      if (openRef.current === next) return;
+      setOpenState(next);
+      emitOpenChange(next);
+    },
+    [openRef, emitOpenChange]
+  );
+  function scheduleOpen() {
+    clearCloseTimer();
+    if (open) return;
+    clearOpenTimer();
+    openTimer.current = setTimeout(() => setOpen(true), openDelay);
+  }
+  function scheduleClose() {
+    clearOpenTimer();
+    if (!open) return;
+    clearCloseTimer();
+    closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
+  }
+  useEffect(() => {
+    return () => {
+      if (openTimer.current !== void 0) clearTimeout(openTimer.current);
+      if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+    };
+  }, []);
+  const triggerRef = useRef(null);
+  const triggerWrapperRef = useComposedRefs(triggerRef, forwardedRef);
+  const [panel, setPanelNode] = useElementRef();
+  const presence = usePresence(open);
+  const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+    anchor: () => triggerRef.current,
+    side,
+    align,
+    offset
+  });
+  useDismissable(panel, {
+    onDismiss: () => setOpen(false),
+    exclude: () => [triggerRef.current],
+    active: open
+  });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+  );
+  function handleTriggerFocusOut(event) {
+    const next = event.relatedTarget;
+    if (next && panel?.contains(next)) return;
+    setOpen(false);
+  }
+  const classes = cn(
+    "ft-hover-card-panel bg-popover text-popover-foreground border-border flex w-60 flex-col gap-2.5 rounded-xl border p-3.5 shadow-[0_12px_32px_rgba(0,0,0,.5)]",
+    className
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerWrapperRef,
+        className: "ft-hover-card-trigger inline-block",
+        onPointerEnter: scheduleOpen,
+        onPointerLeave: scheduleClose,
+        onFocus: () => setOpen(true),
+        onBlur: handleTriggerFocusOut,
+        children: trigger?.(open ? panelId : void 0)
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: panelId,
+        className: classes,
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": align,
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        onPointerEnter: clearCloseTimer,
+        onPointerLeave: scheduleClose,
+        children
+      }
+    ) : null })
+  ] });
+});
+HoverCard.displayName = "HoverCard";
+export {
+  HoverCard
+};

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,2 @@
+export { HoverCard } from "./HoverCard.js";
+export type { HoverCardProps } from "./HoverCard.js";

package/dist/components/hyper-text/HyperText.d.ts

@@ -0,0 +1,25 @@
+/**
+ * HyperText - Character scramble effect
+ *
+ * Displays text that scrambles through random characters on hover (or on load),
+ * then resolves back to the original text. Each character is individually animated
+ * with a staggered reveal.
+ */
+export interface HyperTextProps {
+    /** Text to display and scramble */
+    text: string;
+    /** Total animation duration in ms */
+    duration?: number;
+    /** Whether to animate on initial load */
+    animateOnLoad?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the scramble-character stream. The same seed always produces the
+     * same scramble sequence, which makes the effect reproducible in a test and
+     * identical across mounts. The default is shared, so two `<HyperText />`
+     * with no seed scramble alike.
+     */
+    seed?: number;
+}
+export declare function HyperText({ text, duration, animateOnLoad, className, seed, }: HyperTextProps): import("react").JSX.Element;

package/dist/components/hyper-text/HyperText.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+/* empty css               */
+const ALPHABETS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function HyperText({
+  text,
+  duration = 800,
+  animateOnLoad = false,
+  className,
+  seed = 1
+}) {
+  const [displayText, setDisplayText] = useState(() => text.split(""));
+  const displayTextRef = useRef(displayText);
+  const intervalRef = useRef(null);
+  const iterationsRef = useRef(0);
+  const textRef = useRef(text);
+  const seedRef = useRef(seed);
+  useEffect(() => {
+    textRef.current = text;
+    seedRef.current = seed;
+  });
+  function writeDisplayText(next) {
+    displayTextRef.current = next;
+    setDisplayText(next);
+  }
+  useEffect(() => {
+    writeDisplayText(text.split(""));
+  }, [text]);
+  function stopAnimation() {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }
+  function startAnimation() {
+    stopAnimation();
+    iterationsRef.current = 0;
+    const currentText = textRef.current;
+    const intervalMs = duration / (currentText.length * 10);
+    const random = mulberry32(seedRef.current);
+    const getRandomLetter = () => ALPHABETS.charAt(Math.floor(random() * ALPHABETS.length));
+    intervalRef.current = setInterval(() => {
+      const target = textRef.current;
+      if (iterationsRef.current < target.length) {
+        const next = displayTextRef.current.map(
+          (l, i) => l === " " ? l : i <= iterationsRef.current ? target[i] ?? l : getRandomLetter()
+        );
+        writeDisplayText(next);
+        iterationsRef.current += 0.1;
+      } else {
+        stopAnimation();
+        writeDisplayText(target.split(""));
+      }
+    }, intervalMs);
+  }
+  function triggerAnimation() {
+    iterationsRef.current = 0;
+    startAnimation();
+  }
+  useEffect(() => {
+    if (animateOnLoad) {
+      triggerAnimation();
+    }
+    return stopAnimation;
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("hyper-text flex scale-100 cursor-default overflow-hidden py-2", className),
+      onMouseEnter: triggerAnimation,
+      role: "presentation",
+      children: /* @__PURE__ */ jsx("div", { className: "flex", children: displayText.map((letter, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("hyper-text-char inline-block font-mono", letter === " " ? "w-3" : ""),
+          style: {
+            animation: "hyperFadeIn 0.3s ease forwards",
+            animationDelay: `${i * (duration / (text.length * 10))}ms`,
+            opacity: 0
+          },
+          children: letter.toUpperCase()
+        },
+        i
+      )) })
+    }
+  );
+}
+export {
+  HyperText
+};

package/dist/components/hyper-text/index.d.ts

@@ -0,0 +1,2 @@
+export { HyperText } from "./HyperText.js";
+export type { HyperTextProps } from "./HyperText.js";

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,46 @@
+import { type MouseEvent, type ReactNode } from "react";
+import type { ButtonVariant, ButtonSize } from "../button/types.js";
+/** `"square"` keeps the size's own radius; `"circle"` rounds it fully. */
+export type IconButtonShape = "square" | "circle";
+export interface IconButtonProps {
+    /**
+     * Accessible name. Required, not optional: an icon-only control has no
+     * visible text to fall back on, so without this the control would have
+     * no name at all in the accessibility tree.
+     */
+    label: string;
+    /** Visual treatment, forwarded to the underlying Button. */
+    variant?: ButtonVariant;
+    /** Sets the button's square footprint (30 / 36 / 42px) and its resting radius. */
+    size?: ButtonSize;
+    /** Square keeps the size's own radius; circle rounds it fully. */
+    shape?: IconButtonShape;
+    /** Native `type`. Ignored once `href` is set — an anchor has no `type`. */
+    type?: "button" | "submit" | "reset";
+    /** Greys the button out and makes it inert to pointer and keyboard activation. */
+    disabled?: boolean;
+    /**
+     * Swaps the icon for a spinner and marks the control `aria-busy`, without
+     * dimming it the way `disabled` does. Activation is blocked exactly like
+     * `disabled`.
+     */
+    loading?: boolean;
+    /** Renders an `<a>` instead of a `<button>` when set. */
+    href?: string;
+    /** Anchor `target`. `"_blank"` forces a safe `rel` regardless of what `rel` says. */
+    target?: string;
+    /** Anchor `rel`. Widened, never narrowed — see `target`. */
+    rel?: string;
+    /** Fires on activation. Never called while `disabled` or `loading`. */
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** The icon, rendered centred with no label alongside it. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;