fancy-ui-react 0.2.0

package/dist/components/reveal/Reveal.js

@@ -0,0 +1,138 @@
+"use client";
+import { forwardRef, useState, useRef, useEffect, createElement } from "react";
+import { cn } from "../../utils.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.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 { useInView } from "../../internals/motion/in-view.js";
+import { staggerDelay } from "../../internals/motion/stagger.js";
+import { STAGGER_CAPS } from "../../internals/motion/tokens.js";
+/* empty css           */
+const DEFAULT_DURATION = 600;
+const DEFAULT_DELAY = 0;
+const DEFAULT_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+const DEFAULT_DISTANCE = 16;
+const Reveal = forwardRef(function Reveal2({
+  preset = "fade-up",
+  trigger = "view",
+  active = false,
+  once = true,
+  threshold = 0.1,
+  rootMargin = "0px 0px -10% 0px",
+  duration = DEFAULT_DURATION,
+  delay = DEFAULT_DELAY,
+  easing = DEFAULT_EASING,
+  distance = DEFAULT_DISTANCE,
+  stagger = 0,
+  from = "first",
+  initial = "hidden",
+  as = "div",
+  onReveal,
+  onFocus,
+  className,
+  style,
+  children,
+  ...restProps
+}, forwardedRef) {
+  const [node, nodeRef] = useElementRef();
+  const composedRef = useComposedRefs(forwardedRef, nodeRef);
+  const [state, setState] = useState(
+    () => initial === "hidden" ? "armed" : "idle"
+  );
+  const stateRef = useRef(state);
+  function commitState(next) {
+    stateRef.current = next;
+    setState(next);
+  }
+  const emitReveal = useEventCallback(onReveal);
+  const markVisible = useEventCallback(() => {
+    if (stateRef.current !== "visible") {
+      commitState("visible");
+      emitReveal();
+    }
+  });
+  const markArmed = useEventCallback(() => {
+    if (node && typeof document !== "undefined" && node.contains(document.activeElement)) return;
+    commitState("armed");
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (stateRef.current === "idle") commitState("armed");
+  }, []);
+  useInView(node, {
+    enabled: trigger === "view",
+    once,
+    threshold,
+    rootMargin,
+    onChange: (inViewNow) => {
+      if (inViewNow) markVisible();
+      else if (!once) markArmed();
+    }
+  });
+  useEffect(() => {
+    if (trigger !== "mount" || !node) return;
+    let cancelled = false;
+    const raf = requestAnimationFrame(() => {
+      if (!cancelled) markVisible();
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+    };
+  }, [trigger, node, markVisible]);
+  useEffect(() => {
+    if (trigger !== "manual") return;
+    if (active) markVisible();
+    else markArmed();
+  }, [trigger, active, markVisible, markArmed]);
+  function handleFocusIn(event) {
+    markVisible();
+    onFocus?.(event);
+  }
+  useEffect(() => {
+    if (stagger <= 0 || !node) return;
+    const root = node;
+    function apply() {
+      const kids = Array.from(root.children).filter(
+        (el) => (el instanceof HTMLElement || el instanceof SVGElement) && !el.hasAttribute("data-reveal-skip")
+      );
+      for (const [i, kid] of kids.entries()) {
+        const ms = staggerDelay(i, kids.length, stagger, from, STAGGER_CAPS.item);
+        kid.style.setProperty("--ft-reveal-child-delay", `${ms}ms`);
+      }
+    }
+    apply();
+    const observer = new MutationObserver(apply);
+    observer.observe(root, { childList: true });
+    return () => {
+      observer.disconnect();
+      for (const el of Array.from(root.children)) {
+        if (el instanceof HTMLElement || el instanceof SVGElement) {
+          el.style.removeProperty("--ft-reveal-child-delay");
+        }
+      }
+    };
+  }, [node, stagger, from]);
+  const vars = {};
+  if (duration !== DEFAULT_DURATION) vars["--ft-reveal-duration"] = `${duration}ms`;
+  if (delay !== DEFAULT_DELAY) vars["--ft-reveal-delay"] = `${delay}ms`;
+  if (easing !== DEFAULT_EASING) vars["--ft-reveal-easing"] = easing;
+  if (distance !== DEFAULT_DISTANCE) vars["--ft-reveal-distance"] = `${distance}px`;
+  return createElement(
+    as,
+    {
+      ...restProps,
+      ref: composedRef,
+      className: cn("ft-reveal", className),
+      "data-state": state,
+      "data-preset": preset,
+      "data-stagger": stagger > 0 ? "" : void 0,
+      style: { ...style, ...vars },
+      onFocus: handleFocusIn
+    },
+    children
+  );
+});
+export {
+  Reveal
+};

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

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

package/dist/components/ripple/Ripple.d.ts

@@ -0,0 +1,11 @@
+export interface RippleProps {
+    baseCircleSize?: number;
+    baseCircleOpacity?: number;
+    spaceBetweenCircle?: number;
+    circleOpacityDowngradeRatio?: number;
+    circleClass?: string;
+    waveSpeed?: number;
+    numberOfCircles?: number;
+    className?: string;
+}
+export declare function Ripple({ baseCircleSize, baseCircleOpacity, spaceBetweenCircle, circleOpacityDowngradeRatio, circleClass, waveSpeed, numberOfCircles, className, }: RippleProps): import("react").JSX.Element;

package/dist/components/ripple/Ripple.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css           */
+function Ripple({
+  baseCircleSize = 210,
+  baseCircleOpacity = 0.24,
+  spaceBetweenCircle = 70,
+  circleOpacityDowngradeRatio = 0.03,
+  circleClass = "",
+  waveSpeed = 80,
+  numberOfCircles = 7,
+  className = ""
+}) {
+  const circles = Array.from({ length: numberOfCircles }, (_, i) => ({
+    size: baseCircleSize + i * spaceBetweenCircle,
+    opacity: baseCircleOpacity - i * circleOpacityDowngradeRatio,
+    delay: i * waveSpeed,
+    borderStyle: i === numberOfCircles - 1 ? "dashed" : "solid"
+  }));
+  return /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0", className), "aria-hidden": "true", children: circles.map((circle, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "animate-ripple-circle absolute rounded-full shadow-xl motion-reduce:animate-none",
+        circleClass
+      ),
+      style: {
+        width: `${circle.size}px`,
+        height: `${circle.size}px`,
+        opacity: circle.opacity,
+        animationDelay: `${circle.delay}ms`,
+        borderStyle: circle.borderStyle,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%) scale(1)",
+        borderWidth: "1px"
+      }
+    },
+    i
+  )) });
+}
+export {
+  Ripple
+};

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

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

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

@@ -0,0 +1,17 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export interface RippleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Color of the ripple effect */
+    rippleColor?: string;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** 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 declare const RippleButton: import("react").ForwardRefExoticComponent<RippleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { cn } from "../../utils.js";
+/* empty css                  */
+const RippleButton = forwardRef(
+  ({
+    className,
+    rippleColor = "#ADD8E6",
+    duration = 600,
+    children,
+    onClick,
+    sound = false,
+    ...restProps
+  }, forwardedRef) => {
+    const buttonRef = useRef(null);
+    const composedRef = useComposedRefs(forwardedRef, buttonRef);
+    const [ripples, setRipples] = useState([]);
+    const nextKey = useRef(0);
+    const playCue = useSoundCue(sound);
+    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++ };
+      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",
+          className
+        ),
+        style: { "--ripple-duration": `${duration}ms` },
+        onClick: handleClick,
+        ...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(
+            "span",
+            {
+              className: "ripple-animation absolute rounded-full opacity-30",
+              style: {
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`,
+                top: `${ripple.y}px`,
+                left: `${ripple.x}px`,
+                backgroundColor: rippleColor
+              }
+            },
+            ripple.key
+          )) })
+        ]
+      }
+    );
+  }
+);
+RippleButton.displayName = "RippleButton";
+export {
+  RippleButton
+};

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

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

package/dist/components/scroll-anchor/ScrollAnchor.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ScrollAnchor
+ */
+export interface ScrollAnchorProps {
+    /**
+     * Whether the region pins itself to the bottom as content arrives. Bind it
+     * to whatever says a response is still streaming; `false` leaves an ordinary
+     * scroll box that never moves on its own.
+     */
+    active?: boolean;
+    /** How close to the bottom (px) still counts as pinned. */
+    bottomThreshold?: number;
+    /** Label on the floating return button. */
+    returnLabel?: string;
+    /** Whether the floating return button appears once the reader scrolls away. */
+    showReturn?: boolean;
+    /** Height cap on the scrolling region — any CSS length. */
+    maxHeight?: string;
+    /** Called when the region pins itself to the bottom or lets go, never on every scroll. */
+    onStickChange?: (stuck: boolean) => void;
+    /** The scrolling content */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the press cue through the sound controller when the
+     * return-to-latest pill is activated. Off by default; only audible
+     * once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const ScrollAnchor: import("react").ForwardRefExoticComponent<ScrollAnchorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-anchor/ScrollAnchor.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useAutoscroll, scrollToBottom } from "../../internals/use-autoscroll.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                  */
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const ScrollAnchor = forwardRef(function ScrollAnchor2({
+  active = true,
+  bottomThreshold = 40,
+  returnLabel = "Jump to latest",
+  showReturn = true,
+  maxHeight = "100%",
+  onStickChange,
+  children,
+  className,
+  sound = false
+}, ref) {
+  const [region, regionRef] = useElementRef();
+  const [stuck, setStuck] = useState(true);
+  const playCue = useSoundCue(sound);
+  function handleStick(next) {
+    setStuck(next);
+    onStickChange?.(next);
+  }
+  useAutoscroll(region, {
+    enabled: active,
+    bottomThreshold,
+    onStickChange: handleStick
+  });
+  const showPill = showReturn && active && !stuck;
+  useEffect(() => {
+    if (!region) return;
+    setStuck(region.scrollHeight - region.scrollTop - region.clientHeight <= bottomThreshold);
+  }, [region, bottomThreshold]);
+  function jump() {
+    if (!region) return;
+    playCue("press");
+    region.focus({ preventScroll: true });
+    scrollToBottom(region, prefersReducedMotion() ? "instant" : "smooth");
+  }
+  return (
+    /*
+     * `h-full` so the region's default `max-height: 100%` has something
+     * definite to resolve against: a percentage against a parent of
+     * `height: auto` computes to no cap at all. With no bounded ancestor this
+     * still resolves to `auto`, so nothing changes for a wrapper that was
+     * sizing itself.
+     */
+    /* @__PURE__ */ jsxs("div", { ref, className: cn("ft-scrollanchor relative h-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: regionRef,
+          className: "ft-scrollanchor-region focus-visible:ring-ring overflow-y-auto overscroll-y-contain rounded-[inherit] focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+          style: { maxHeight },
+          tabIndex: -1,
+          children
+        }
+      ),
+      showPill && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ft-scrollanchor-return border-border bg-background text-foreground focus-visible:ring-ring cursor-pointer rounded-full border px-3 py-1.5 text-xs font-medium whitespace-nowrap shadow-md focus-visible:ring-2 focus-visible:outline-none",
+          onClick: jump,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "size-3.5 flex-none",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+                  /* @__PURE__ */ jsx("path", { d: "m19 12-7 7-7-7" })
+                ]
+              }
+            ),
+            returnLabel
+          ]
+        }
+      )
+    ] })
+  );
+});
+export {
+  ScrollAnchor
+};

package/dist/components/scroll-anchor/index.d.ts

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

package/dist/components/scroll-progress/ScrollProgress.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+/**
+ * Props for ScrollProgress
+ */
+export interface ScrollProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * An element to track instead of the document's own scroll. Setting
+     * this always forces JS mode (see the README's Motion section) — a
+     * CSS `scroll-timeline` can only reach an ancestor scroller, and an
+     * arbitrary `target` is not guaranteed to be one, so tracking it always
+     * costs a real scroll listener.
+     */
+    target?: HTMLElement | null;
+    /**
+     * `"top"` / `"bottom"` pin the bar to the matching viewport edge
+     * (`position: fixed` — the reading-progress convention, and a
+     * deliberate exception to the "a library component never leaves
+     * normal flow" rule). `"inline"` renders it in normal flow instead, so
+     * the caller places it — e.g. directly above the `target` it tracks.
+     */
+    position?: "top" | "bottom" | "inline";
+    /**
+     * Announces the bar as `role="progressbar"` with this accessible
+     * name. Omitted (the default), the bar is `aria-hidden="true"` —
+     * decorative chrome, the same choice most reading-progress bars make.
+     * Setting this also forces JS mode, same as `target`: a CSS-only bar
+     * has no live number to hand `aria-valuenow`.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A thin bar that fills as the reader scrolls — the whole document by
+ * default, or a specific element via `target`. On a browser that supports
+ * CSS scroll-driven animations it needs no JavaScript at all; everywhere
+ * else it falls back to a throttled scroll listener.
+ */
+export declare const ScrollProgress: import("react").ForwardRefExoticComponent<ScrollProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-progress/ScrollProgress.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { rafThrottle } from "../../internals/motion/raf.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+/* empty css                    */
+function clamp01(value) {
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function readProgress(scroller) {
+  let scrollTop;
+  let scrollHeight;
+  let clientHeight;
+  if (scroller instanceof HTMLElement) {
+    ({ scrollTop, scrollHeight, clientHeight } = scroller);
+  } else {
+    scrollTop = window.scrollY;
+    scrollHeight = document.documentElement.scrollHeight;
+    clientHeight = document.documentElement.clientHeight;
+  }
+  const max = scrollHeight - clientHeight;
+  return max > 0 ? clamp01(scrollTop / max) : 0;
+}
+const ScrollProgress = forwardRef(
+  function ScrollProgress2({ target = null, position = "top", label, className, ...restProps }, forwardedRef) {
+    const [node, nodeRef] = useElementRef();
+    const composedRef = useComposedRefs(forwardedRef, nodeRef);
+    const [supportsScrollTimeline, setSupportsScrollTimeline] = useState(
+      void 0
+    );
+    const mode = supportsScrollTimeline === void 0 ? void 0 : !target && label === void 0 && supportsScrollTimeline ? "css" : "js";
+    const [valueNow, setValueNow] = useState(0);
+    useEffect(() => {
+      setSupportsScrollTimeline(
+        typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("animation-timeline", "scroll()")
+      );
+    }, []);
+    useEffect(() => {
+      if (mode !== "js") return;
+      if (!node) return;
+      const scroller = target ?? window;
+      const eventTarget = scroller;
+      const update = () => {
+        const progress = readProgress(scroller);
+        node.style.setProperty("--ft-scrollprogress-value", String(progress));
+        if (label !== void 0) setValueNow(Math.round(progress * 100));
+      };
+      const throttled = rafThrottle(update);
+      const onScrollOrResize = () => throttled();
+      update();
+      eventTarget.addEventListener("scroll", onScrollOrResize, { passive: true });
+      let observer = null;
+      let mutations = null;
+      if (!target) {
+        eventTarget.addEventListener("resize", onScrollOrResize, { passive: true });
+      } else {
+        const scrollerEl = target;
+        if (typeof ResizeObserver !== "undefined") {
+          observer = new ResizeObserver(onScrollOrResize);
+          observer.observe(scrollerEl);
+          for (const child of Array.from(scrollerEl.children)) observer.observe(child);
+          const observeRows = (records) => {
+            for (const record of records) {
+              if (record.target !== scrollerEl) continue;
+              for (const added of record.addedNodes) {
+                if (added instanceof Element) observer?.observe(added);
+              }
+              for (const removed of record.removedNodes) {
+                if (removed instanceof Element) observer?.unobserve(removed);
+              }
+            }
+          };
+          if (typeof MutationObserver !== "undefined") {
+            mutations = new MutationObserver((records) => {
+              observeRows(records);
+              onScrollOrResize();
+            });
+          }
+        } else if (typeof MutationObserver !== "undefined") {
+          mutations = new MutationObserver(onScrollOrResize);
+        }
+        mutations?.observe(scrollerEl, { childList: true, subtree: true, characterData: true });
+      }
+      return () => {
+        eventTarget.removeEventListener("scroll", onScrollOrResize);
+        eventTarget.removeEventListener("resize", onScrollOrResize);
+        observer?.disconnect();
+        mutations?.disconnect();
+        throttled.cancel();
+      };
+    }, [mode, node, target, label]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: composedRef,
+        className: cn("ft-scrollprogress", className),
+        ...restProps,
+        "data-position": position,
+        "data-mode": mode,
+        role: label !== void 0 ? "progressbar" : void 0,
+        "aria-label": label,
+        "aria-valuemin": label !== void 0 ? 0 : void 0,
+        "aria-valuemax": label !== void 0 ? 100 : void 0,
+        "aria-valuenow": label !== void 0 ? valueNow : void 0,
+        "aria-hidden": label === void 0 ? "true" : void 0,
+        children: /* @__PURE__ */ jsx("div", { className: "ft-scrollprogress-bar" })
+      }
+    );
+  }
+);
+ScrollProgress.displayName = "ScrollProgress";
+export {
+  ScrollProgress
+};

package/dist/components/scroll-progress/index.d.ts

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

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,56 @@
+export interface SearchInputProps {
+    /**
+     * 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;
+    /**
+     * Fired on Enter, and again on debounced settle whenever `debounceMs` is
+     * set — Enter itself always cancels a pending debounce first, so a
+     * settle never fires a second time for the value Enter already reported.
+     */
+    onSearch?: (value: string) => void;
+    /** Shown while the field is empty. */
+    placeholder?: string;
+    /**
+     * Delay, in milliseconds, before a settled value fires `onSearch` on its
+     * own. `0` (the default) disables debouncing entirely — no timer is ever
+     * scheduled, and `onSearch` only fires from Enter.
+     */
+    debounceMs?: number;
+    /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Blocks typing and clearing 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;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Renders a clear button once there is something to clear. Defaults to `true`. */
+    clearable?: boolean;
+    /** Additional CSS classes, merged onto the root field surface (not the bare `<input>`). */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A search field with a debounced `onSearch`, Escape-to-clear, and an
+ * animated clear button.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native `<input>`.
+ */
+export declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;