fancy-ui-react 0.2.0

package/dist/components/inline-citation/InlineCitation.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { SourceData } from "../../internals/ai-types.js";
+/**
+ * Props for InlineCitation
+ */
+export interface InlineCitationProps {
+    /** The document being cited. Its title, domain and snippet fill the preview. */
+    source: SourceData;
+    /** The reference number shown in the marker, e.g. `3` renders `[3]` */
+    index: number;
+    /** Link target. Defaults to `source.url`; pass `""` to render an unlinked marker. */
+    href?: string;
+    /** Replaces the default preview card body. Receives the source. */
+    preview?: (source: SourceData) => ReactNode;
+    /** Called each time the preview is shown, once per appearance */
+    onOpen?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * InlineCitation
+ */
+export declare const InlineCitation: import("react").ForwardRefExoticComponent<InlineCitationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/inline-citation/InlineCitation.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useFloat } from "../../internals/use-float.js";
+import { sanitizeHref } from "../../internals/markdown.js";
+import { SourceCard } from "../sources/SourceCard.js";
+/* empty css                    */
+function resolveHref(raw) {
+  if (raw === "") return "";
+  const hasScheme = /^[a-z][a-z0-9+.-]*:/i.test(raw) || raw.startsWith("//");
+  const host = raw.split(/[/?#]/, 1)[0] ?? "";
+  const looksHostLike = !hasScheme && !raw.startsWith("/") && host.includes(".");
+  return sanitizeHref(looksHostLike ? `https://${raw}` : raw) ?? "";
+}
+const OPEN_DELAY_MS = 150;
+const CLOSE_GRACE_MS = 250;
+const InlineCitation = forwardRef(function InlineCitation2({ source, index, href, preview, onOpen, className }, forwardedRef) {
+  const uid = useFancyId();
+  const previewId = `${uid}-preview`;
+  const resolvedHref = resolveHref(href ?? source.url ?? "");
+  const isLink = resolvedHref !== "";
+  const [open, setOpen] = useState(false);
+  const openRef = useRef(false);
+  const openTimer = useRef(void 0);
+  const closeTimer = useRef(void 0);
+  const emitOpen = useEventCallback(onOpen);
+  const cancelOpen = useCallback(() => {
+    if (openTimer.current === void 0) return;
+    clearTimeout(openTimer.current);
+    openTimer.current = void 0;
+  }, []);
+  const cancelClose = useCallback(() => {
+    if (closeTimer.current === void 0) return;
+    clearTimeout(closeTimer.current);
+    closeTimer.current = void 0;
+  }, []);
+  const show = useCallback(() => {
+    cancelOpen();
+    cancelClose();
+    if (openRef.current) return;
+    openRef.current = true;
+    setOpen(true);
+    emitOpen();
+  }, [cancelOpen, cancelClose, emitOpen]);
+  const hide = useCallback(() => {
+    cancelOpen();
+    cancelClose();
+    openRef.current = false;
+    setOpen(false);
+  }, [cancelOpen, cancelClose]);
+  const scheduleShow = useCallback(() => {
+    cancelClose();
+    if (openRef.current || openTimer.current !== void 0) return;
+    openTimer.current = setTimeout(() => {
+      openTimer.current = void 0;
+      show();
+    }, OPEN_DELAY_MS);
+  }, [cancelClose, show]);
+  const scheduleHide = useCallback(() => {
+    cancelOpen();
+    if (!openRef.current || closeTimer.current !== void 0) return;
+    closeTimer.current = setTimeout(() => {
+      closeTimer.current = void 0;
+      hide();
+    }, CLOSE_GRACE_MS);
+  }, [cancelOpen, hide]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeydown = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    window.addEventListener("keydown", onKeydown);
+    return () => window.removeEventListener("keydown", onKeydown);
+  }, [open, hide]);
+  useEffect(
+    () => () => {
+      cancelOpen();
+      cancelClose();
+    },
+    [cancelOpen, cancelClose]
+  );
+  const [markerEl, markerRef] = useElementRef();
+  const composedMarkerRef = useComposedRefs(forwardedRef, markerRef);
+  const markerLive = useLiveRef(markerEl);
+  const anchor = useCallback(
+    () => markerLive.current?.getBoundingClientRect() ?? null,
+    [markerLive]
+  );
+  const [previewEl, previewRef] = useElementRef();
+  useFloat(previewEl, { anchor, placement: "top", offset: 8 });
+  const markerClass = cn(
+    "ft-citation-marker inline-flex cursor-pointer items-center rounded px-[0.2em] font-medium tabular-nums no-underline transition-colors focus-visible:ring-1 focus-visible:outline-none",
+    className
+  );
+  const previewClass = cn(
+    "ft-citation-preview text-popover-foreground z-50 block rounded-lg text-left text-sm shadow-lg",
+    preview ? "border p-3" : void 0
+  );
+  const markerLabel = `Source ${index}: ${source.title}`;
+  const describedBy = open ? previewId : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLink ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref: composedMarkerRef,
+        href: resolvedHref,
+        target: "_blank",
+        rel: "noopener noreferrer nofollow ugc",
+        className: markerClass,
+        "aria-label": markerLabel,
+        "aria-describedby": describedBy,
+        onMouseEnter: scheduleShow,
+        onMouseLeave: scheduleHide,
+        onFocus: show,
+        onBlur: hide,
+        children: [
+          "[",
+          index,
+          "]"
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: composedMarkerRef,
+        type: "button",
+        className: markerClass,
+        "aria-label": markerLabel,
+        "aria-describedby": describedBy,
+        onMouseEnter: scheduleShow,
+        onMouseLeave: scheduleHide,
+        onFocus: show,
+        onBlur: hide,
+        onClick: show,
+        children: [
+          "[",
+          index,
+          "]"
+        ]
+      }
+    ),
+    open && /*
+    * Rendered only while it is on screen: a tooltip that lives in the DOM
+    * permanently is a hidden paragraph every crawler and every screen-reader
+    * element list has to step over, mid-sentence, once per citation.
+    */
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: previewRef,
+        id: previewId,
+        role: "tooltip",
+        className: previewClass,
+        onMouseEnter: cancelClose,
+        onMouseLeave: scheduleHide,
+        children: preview ? preview(source) : (
+          /*
+           * The same card the sources list shows, so a document a reader met in
+           * one place is recognisable in the other and there is one set of rules
+           * for deriving its host and its monogram — but in its plain, non-anchor
+           * shape: this preview is dismissed on blur, so a link inside it is one
+           * no keyboard can ever reach. The marker itself is already that link.
+           * A consumer's own `preview` body is theirs to compose and is left alone.
+           */
+          /* @__PURE__ */ jsx(SourceCard, { source, interactive: false })
+        )
+      }
+    )
+  ] });
+});
+export {
+  InlineCitation
+};

package/dist/components/inline-citation/index.d.ts

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

package/dist/components/input/Input.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLInputAutoCompleteAttribute } from "react";
+export interface InputProps {
+    /**
+     * Current value. Controlled when supplied: pair it with `onValueChange`,
+     * the React counterpart of the Svelte source's `bind:value`.
+     */
+    value?: string;
+    /** Initial value when uncontrolled (no `value` prop given). */
+    defaultValue?: string;
+    /** Called with the new value on every input event. */
+    onValueChange?: (value: string) => void;
+    /** Native input type. */
+    type?: "text" | "email" | "url" | "tel" | "password" | "search" | "number";
+    /** Shown while the field is empty. */
+    placeholder?: string;
+    /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Blocks typing but stays focusable and is still submitted, unlike `disabled`. */
+    readonly?: boolean;
+    /** Native `required`. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Native `autocomplete` hint — the real token set the DOM accepts, not a bare string. */
+    autocomplete?: HTMLInputAutoCompleteAttribute;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * A styled native `<input>` with full FormField integration.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native `<input>`.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/input/Input.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+/* empty css          */
+const Input = forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    type = "text",
+    placeholder,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    autocomplete,
+    label,
+    className
+  }, ref) => {
+    const isControlled = valueProp !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const field = useField();
+    const effectiveId = field?.controlId ?? id;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveRequired = field?.required ?? required;
+    const effectiveInvalid = field?.invalid ?? invalid;
+    const classes = cn(
+      "ft-input w-full rounded-[8px] border border-input bg-background px-[12px] py-[9px] text-[13px] text-foreground transition-colors",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      effectiveInvalid && "border-destructive/50",
+      className
+    );
+    function handleInput(event) {
+      if (effectiveDisabled) {
+        event.currentTarget.value = value;
+        return;
+      }
+      const next = event.currentTarget.value;
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+    }
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        placeholder,
+        name,
+        autoComplete: autocomplete,
+        id: effectiveId,
+        value,
+        disabled: effectiveDisabled,
+        readOnly: readonly,
+        required: effectiveRequired,
+        "aria-invalid": effectiveInvalid ? "true" : void 0,
+        "aria-describedby": field?.describedBy,
+        "aria-label": label,
+        className: classes,
+        onChange: handleInput
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Input
+};

package/dist/components/input/index.d.ts

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

package/dist/components/interactive-grid-pattern/InteractiveGridPattern.d.ts

@@ -0,0 +1,17 @@
+export interface InteractiveGridPatternProps {
+    /** Additional CSS classes for the SVG container */
+    className?: string;
+    /** Additional CSS classes for individual squares */
+    squaresClassName?: string;
+    /** Additional CSS classes controlling the square outline color */
+    strokeClassName?: string;
+    /** Width of each square in pixels */
+    width?: number;
+    /** Height of each square in pixels */
+    height?: number;
+    /** Grid dimensions [columns, rows] */
+    squares?: [number, number];
+    /** Whether squares respond to hover. When false, renders a static graph-paper grid with no listeners */
+    interactive?: boolean;
+}
+export declare function InteractiveGridPattern({ className, squaresClassName, strokeClassName, width, height, squares, interactive, }: InteractiveGridPatternProps): import("react").JSX.Element;

package/dist/components/interactive-grid-pattern/InteractiveGridPattern.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback, memo } from "react";
+import { cn } from "../../utils.js";
+/* empty css                             */
+const Square = memo(function Square2({
+  index,
+  x,
+  y,
+  width,
+  height,
+  hovered,
+  strokeClassName,
+  squaresClassName,
+  onEnter,
+  onLeave
+}) {
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x,
+      y,
+      width,
+      height,
+      className: cn(
+        "interactive-grid-square transition-all duration-100 ease-in-out",
+        strokeClassName,
+        hovered ? "fill-gray-300/30" : "fill-transparent",
+        squaresClassName
+      ),
+      onMouseEnter: onEnter ? () => onEnter(index) : void 0,
+      onMouseLeave: onLeave
+    }
+  );
+});
+function InteractiveGridPattern({
+  className,
+  squaresClassName,
+  strokeClassName = "stroke-gray-400/30",
+  width = 40,
+  height = 40,
+  squares = [24, 24],
+  interactive = true
+}) {
+  const [hoveredSquare, setHoveredSquare] = useState(null);
+  const cols = squares[0];
+  const rows = squares[1];
+  const totalSquares = cols * rows;
+  const gridWidth = width * cols;
+  const gridHeight = height * rows;
+  function getX(index) {
+    return index % cols * width;
+  }
+  function getY(index) {
+    return Math.floor(index / cols) * height;
+  }
+  const handleEnter = useCallback((index) => setHoveredSquare(index), []);
+  const handleLeave = useCallback(() => setHoveredSquare(null), []);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: gridWidth,
+      height: gridHeight,
+      className: cn(
+        "interactive-grid-pattern absolute inset-0 h-full w-full border border-gray-400/30",
+        className
+      ),
+      children: Array.from({ length: totalSquares }, (_, index) => /* @__PURE__ */ jsx(
+        Square,
+        {
+          index,
+          x: getX(index),
+          y: getY(index),
+          width,
+          height,
+          hovered: hoveredSquare === index,
+          strokeClassName,
+          squaresClassName,
+          onEnter: interactive ? handleEnter : void 0,
+          onLeave: interactive ? handleLeave : void 0
+        },
+        index
+      ))
+    }
+  );
+}
+export {
+  InteractiveGridPattern
+};

package/dist/components/interactive-grid-pattern/index.d.ts

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

package/dist/components/interactive-hover-button/InteractiveHoverButton.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+type BaseProps = {
+    /** Button label text */
+    text?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Button content (overrides text prop) */
+    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 InteractiveHoverButtonProps extends BaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {
+}
+export declare const InteractiveHoverButton: import("react").ForwardRefExoticComponent<InteractiveHoverButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/interactive-hover-button/InteractiveHoverButton.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";
+const InteractiveHoverButton = forwardRef(
+  ({ text = "Button", className, children, sound = false, onClick, disabled, ...restProps }, ref) => {
+    const label = children ?? text;
+    const playCue = useSoundCue(sound);
+    function handleClick(event) {
+      if (sound && !disabled) playCue("press");
+      onClick?.(event);
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 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__ */ 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" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InteractiveHoverButton.displayName = "InteractiveHoverButton";
+export {
+  InteractiveHoverButton
+};

package/dist/components/interactive-hover-button/index.d.ts

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

package/dist/components/label/Label.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface LabelProps {
+    /** Explicit target id. Inside a FormField the field's own control id wins — see the README. */
+    htmlFor?: string;
+    /** Renders the required asterisk. Inside a FormField the field's own `required` wins. */
+    required?: boolean;
+    /** The label text/content. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A form label that defers to a surrounding `FormField` for its wiring.
+ *
+ * The root element arrives through the ref channel, per PORTING.md — the
+ * Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/label/Label.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+const Label = forwardRef(function Label2({ htmlFor, required = false, children, className }, ref) {
+  const field = useField();
+  const resolvedFor = field?.controlId ?? htmlFor;
+  const resolvedRequired = field?.required ?? required;
+  const labelId = field?.labelId;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref,
+      id: labelId,
+      htmlFor: resolvedFor,
+      className: cn("ft-label text-[13px] font-medium", className),
+      children: [
+        children,
+        " ",
+        resolvedRequired ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" }) : null
+      ]
+    }
+  );
+});
+export {
+  Label
+};

package/dist/components/label/index.d.ts

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

package/dist/components/letter-pullup/LetterPullup.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+/**
+ * LetterPullup - Staggered letter pull-up animation
+ *
+ * Each letter of the provided text pulls up from below with a staggered delay,
+ * creating a wave-like entrance effect. Pure CSS animation.
+ */
+export interface LetterPullupProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+    /** Text to animate (each character gets its own animation) */
+    words: string;
+    /** Delay between each letter animation (seconds) */
+    delay?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function LetterPullup({ words, delay, className, ...props }: LetterPullupProps): import("react").JSX.Element;

package/dist/components/letter-pullup/LetterPullup.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css                  */
+function LetterPullup({ words, delay = 0.05, className, ...props }) {
+  const letters = words.split("");
+  return /* @__PURE__ */ jsx("div", { className: "letter-pullup flex justify-center", ...props, children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "letter-pullup-char inline-block text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:leading-[5rem] dark:text-white",
+        className
+      ),
+      style: {
+        animation: "letterPullUp 0.5s ease forwards",
+        animationDelay: `${index * delay}s`,
+        opacity: 0,
+        transform: "translateY(100px)"
+      },
+      children: letter === " " ? " " : letter
+    },
+    index
+  )) });
+}
+export {
+  LetterPullup
+};

package/dist/components/letter-pullup/index.d.ts

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

package/dist/components/line-hover-link/LineHoverLink.d.ts

@@ -0,0 +1,33 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+/**
+ * Line Hover Link Variants
+ *
+ * slide    - Line slides in from right to left
+ * double   - Two lines animate with different timings
+ * grow     - Line grows thicker on hover
+ * strike   - Strikethrough effect with text scale
+ * fade     - Lines fade up with stagger delay
+ * pulse    - Line pulses up and down
+ * swap     - Two lines go opposite directions
+ * sweep    - Full background cover sweep
+ * bounce   - Bouncy squish animation
+ * arc      - SVG arc stroke draws in
+ * scribble - SVG scribble stroke draws in
+ * ink      - Constant underline; whole link snaps (-1px,-1px) on hover
+ */
+export type LineHoverVariant = "slide" | "double" | "grow" | "strike" | "fade" | "pulse" | "swap" | "sweep" | "bounce" | "arc" | "scribble" | "ink";
+export interface LineHoverLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className"> {
+    /** The animation variant */
+    variant?: LineHoverVariant;
+    /** Link href */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+    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 declare function LineHoverLink({ variant, href, target, rel, className, children, sound, onClick, ...restProps }: LineHoverLinkProps): import("react").JSX.Element;