fancy-ui-react 0.2.0

package/dist/components/pixel-loader/PixelLoader.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from "react";
+export interface PixelLoaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of pixel columns */
+    cols?: number;
+    /** Number of pixel rows */
+    rows?: number;
+    /** Size of a single pixel in px */
+    cellSize?: number;
+    /** Space between pixels in px */
+    gap?: number;
+    /** Pixel colour, any CSS colour value */
+    color?: string;
+    /** Duration of one full pulse cycle in seconds */
+    speed?: number;
+    /** Accessible label announced by assistive tech */
+    label?: string;
+}
+export declare const PixelLoader: import("react").ForwardRefExoticComponent<PixelLoaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/pixel-loader/PixelLoader.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+/* empty css                 */
+const PixelLoader = forwardRef(
+  ({
+    cols = 5,
+    rows = 5,
+    cellSize = 6,
+    gap = 2,
+    color = "var(--ft-pixel-color, currentColor)",
+    speed = 1.6,
+    label = "Loading",
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const cycle = Math.max(0.01, speed);
+    const span = rows + cols;
+    const step = cycle / span;
+    const delays = [];
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        delays.push((row + col) % span * step);
+      }
+    }
+    const rootStyle = {
+      "--ft-pixel-cell-color": color,
+      "--ft-pixel-speed": `${cycle}s`,
+      gridTemplateColumns: `repeat(${cols}, ${cellSize}px)`,
+      gridAutoRows: `${cellSize}px`,
+      gap: `${gap}px`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn("inline-grid", className),
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+          delays.map((delay, i) => /* @__PURE__ */ jsx("span", { className: "ft-pixel", style: { animationDelay: `${delay}s` } }, i))
+        ]
+      }
+    );
+  }
+);
+PixelLoader.displayName = "PixelLoader";
+export {
+  PixelLoader
+};

package/dist/components/pixel-loader/index.d.ts

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

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import type { Side, Align } from "../../internals/anchor-position.js";
+export interface PopoverProps {
+    /**
+     * Whether the panel is open.
+     *
+     * The source declares this `$bindable(false)`; 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;
+    /** Called with the new value whenever the panel opens or closes, however the change happened. */
+    onOpenChange?: (open: boolean) => void;
+    /** Side of the trigger to place the panel on. */
+    side?: Side;
+    /** Alignment along the trigger's cross axis. */
+    align?: Align;
+    /** Gap in pixels between the trigger and the panel. */
+    offset?: number;
+    /** Whether Escape and an outside click close the panel. */
+    dismissible?: boolean;
+    /**
+     * The trigger's content. Rendered inside the real `<button>` this
+     * component owns — keep it to text/icons, not another interactive
+     * control, or activation ends up on two nested buttons at once.
+     */
+    trigger?: ReactNode;
+    /** The panel's content. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the panel. */
+    className?: string;
+    /**
+     * Plays the matching open/close cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The disclosure root: the real `<button>` trigger, and the portalled panel
+ * it anchors.
+ *
+ * The source declares `ref = $bindable(null)` for the PANEL element, so the
+ * panel arrives through this component's ref channel (PORTING.md
+ * §"API contract") rather than through a prop.
+ */
+export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/popover/Popover.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useMemo } from "react";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { PopoverContent } from "./PopoverContent.js";
+import { POPOVER_KEY } from "./types.js";
+/* empty css            */
+const Popover = forwardRef(function Popover2({
+  open: openProp,
+  onOpenChange,
+  side = "bottom",
+  align = "center",
+  offset = 8,
+  dismissible = true,
+  trigger,
+  children,
+  className,
+  sound = false
+}, forwardedRef) {
+  const contentId = useFancyId();
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const triggerRef = useRef(null);
+  const openRef = useLiveRef(open);
+  const playCue = useSoundCue(sound);
+  const setOpen = useCallback(
+    (next) => {
+      if (openRef.current === next) return;
+      setOpenState(next);
+      playCue(next ? "open" : "close");
+      onOpenChange?.(next);
+    },
+    [openRef, onOpenChange, playCue]
+  );
+  function toggle() {
+    setOpen(!open);
+  }
+  const close = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const context = useMemo(
+    () => ({
+      contentId,
+      side,
+      align,
+      offset,
+      dismissible,
+      open,
+      get triggerRef() {
+        return triggerRef.current;
+      },
+      close
+    }),
+    [contentId, side, align, offset, dismissible, open, close]
+  );
+  return /* @__PURE__ */ jsxs(POPOVER_KEY.Provider, { value: context, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "ft-popover-trigger border-border text-foreground hover:bg-accent hover:text-accent-foreground inline-flex cursor-pointer items-center gap-1.5 rounded-[8px] border px-[14px] py-[7px] text-[12px] font-medium transition-colors focus-visible:ring-[3px] focus-visible:ring-[var(--ft-overlay-accent)]/35 focus-visible:outline-none",
+        "aria-expanded": open,
+        "aria-controls": open ? contentId : void 0,
+        onClick: toggle,
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { ref: forwardedRef, className, children })
+  ] });
+});
+Popover.displayName = "Popover";
+export {
+  Popover
+};

package/dist/components/popover/PopoverContent.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface PopoverContentProps {
+    /** The panel's content, forwarded straight from `Popover`'s own `children`. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the panel. */
+    className?: string;
+}
+/**
+ * The portalled, anchored panel.
+ *
+ * No `role` here on purpose. A popover is a disclosure, not a dialog — it
+ * has no title to hang `aria-labelledby` off (the `trigger` node is whatever
+ * the caller passed, not a documented "title"), and `role="dialog"` without
+ * an accessible name is worse than no role at all. Reachability comes from
+ * `useFocusTrap` (moves focus in, and returns it to the trigger the instant
+ * the panel is dismissed) and `useDismissable`, not from a landmark role.
+ *
+ * The source declares `ref = $bindable(null)`, so the panel element arrives
+ * through the ref channel rather than a prop.
+ */
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/popover/PopoverContent.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } 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 { useFocusTrap } from "../../internals/focus-trap.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { usePopoverContext } from "./types.js";
+const PopoverContent = forwardRef(
+  function PopoverContent2({ children, className }, forwardedRef) {
+    const ctx = usePopoverContext();
+    const [panel, setPanelNode] = useElementRef();
+    const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+      anchor: () => ctx.triggerRef,
+      side: ctx.side,
+      align: ctx.align,
+      offset: ctx.offset
+    });
+    const trap = useFocusTrap(panel, { returnFocus: true });
+    const presence = usePresence(ctx.open, {
+      // The two halves of the focus handshake, at the two moments the
+      // source puts them: `onintrostart` → rearm, `onoutrostart` →
+      // returnFocusNow.
+      //
+      // `returnFocusNow` at the dismiss instant is the whole point:
+      // waiting for the trap's own `destroy()` would strand a keyboard
+      // user on `<body>` for the whole length of the fade, because the
+      // panel is marked `inert` the instant the exit starts.
+      //
+      // `rearm` is the other half. A popover reopened DURING its fade
+      // reverses the exit instead of remounting, so the trap is never
+      // re-created: without this the panel would come back interactive
+      // with focus left on the trigger behind it, Tab walking the page
+      // rather than the panel, and the eager return already spent for the
+      // life of the instance.
+      onEnterStart: () => trap.rearm(),
+      onExitStart: () => trap.returnFocusNow()
+    });
+    useDismissable(panel, {
+      onDismiss: ctx.close,
+      escape: ctx.dismissible,
+      outsideClick: ctx.dismissible,
+      exclude: () => [ctx.triggerRef],
+      active: ctx.open
+    });
+    const panelRef = useComposedRefs(
+      setPanelNode,
+      forwardedRef,
+      presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+    );
+    const classes = cn(
+      "ft-popover-content flex w-max flex-col gap-[6px] rounded-[10px] border border-border bg-popover px-[14px] py-[12px] text-[12px] text-popover-foreground shadow-lg outline-none",
+      className
+    );
+    return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: ctx.contentId,
+        className: classes,
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": ctx.align,
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        children
+      }
+    ) : null });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+export {
+  PopoverContent
+};

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

@@ -0,0 +1,6 @@
+export { Popover } from "./Popover.js";
+export type { PopoverProps } from "./Popover.js";
+export { PopoverContent } from "./PopoverContent.js";
+export type { PopoverContentProps } from "./PopoverContent.js";
+export { POPOVER_KEY } from "./types.js";
+export type { PopoverContext } from "./types.js";

package/dist/components/popover/types.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The contract between the `Popover` root and its portalled content panel,
+ * and the React context that carries it.
+ *
+ * The source publishes this contract under a `unique symbol` context key;
+ * React's own context object plays that role here, so the exported name is
+ * kept and the value is a `React.Context` object rather than a symbol — the
+ * same substitution the menu family makes for `MENU_KEY`:
+ *
+ * ```tsx
+ * const popover = useContext(POPOVER_KEY);
+ * ```
+ */
+import type { Side, Align } from "../../internals/anchor-position.js";
+/**
+ * The contract between the `Popover` root and its portalled content panel.
+ *
+ * The root owns everything that decides *whether* and *where* the panel
+ * renders — the open flag, the trigger element to anchor against, and the
+ * positioning/dismiss knobs the caller passed in. The content panel only
+ * ever reads this; it never sets `open` itself (it closes through `close()`,
+ * which routes back through the root so `onOpenChange` still fires).
+ */
+export interface PopoverContext {
+    /** The panel's own id — also what the trigger's `aria-controls` points at. */
+    readonly contentId: string;
+    /** Side of the trigger to place the panel on. */
+    readonly side: Side;
+    /** Alignment along the trigger's cross axis. */
+    readonly align: Align;
+    /** Gap in pixels between the trigger and the panel. */
+    readonly offset: number;
+    /** Whether Escape and an outside click are allowed to close the panel. */
+    readonly dismissible: boolean;
+    /** The real trigger button, once mounted — what the panel anchors against. */
+    readonly triggerRef: HTMLElement | null;
+    /**
+     * Whether the panel is open. Read by the panel's own presence clock to
+     * tell an entrance from a departure, and by `useDismissable`'s `active`
+     * gate, so a panel that is already fading stops answering Escape and
+     * stops counting as the top layer.
+     *
+     * A plain boolean where the source needed a getter (divergence D-6):
+     * React re-renders the still-mounted exiting panel normally, so every
+     * reader sees the current value without a getter having to defeat an
+     * inert-effect scheduler.
+     *
+     * The panel still never *writes* this: it closes through `close()`, which
+     * routes back through the root so `onOpenChange` fires exactly once.
+     */
+    readonly open: boolean;
+    /** Closes the panel, going through the root's own `open` state so `onOpenChange` fires. */
+    close(): void;
+}
+export declare const POPOVER_KEY: import("react").Context<PopoverContext | undefined>;
+/**
+ * Reads the enclosing `Popover`'s context.
+ *
+ * `Popover` only ever mounts `PopoverContent` under its own provider, so
+ * there is no standalone-usage fallback to design for — the same assumption
+ * the source's own content component makes about its root. Internal: not
+ * exported from `index.ts`.
+ */
+export declare function usePopoverContext(): PopoverContext;

package/dist/components/popover/types.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, useContext } from "react";
+const POPOVER_KEY = createContext(void 0);
+POPOVER_KEY.displayName = "PopoverContext";
+function usePopoverContext() {
+  const value = useContext(POPOVER_KEY);
+  if (value === void 0) {
+    throw new Error(
+      "PopoverContext is missing: this component must be rendered inside its provider."
+    );
+  }
+  return value;
+}
+export {
+  POPOVER_KEY,
+  usePopoverContext
+};

package/dist/components/presence/Presence.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { PresetName } from "../../internals/motion/types.js";
+/**
+ * Presence — mounts and unmounts content with a real entrance and exit rather
+ * than an instant swap, driving `data-state` through `opening → open →
+ * closing` and firing lifecycle callbacks a caller can hook into. Shares
+ * Reveal's preset vocabulary, plus `blur`/`zoom` — the one place besides
+ * Reveal a preset may carry `filter`, and here it is opt-in per instance
+ * rather than per child — with an asymmetric, faster-leaving exit by default.
+ *
+ * There is deliberately no stylesheet: the source has no `<style>` block and
+ * no custom properties, because the motion is entirely JS-timed through
+ * `duration`/`exitDuration`/`delay`/`distance` feeding `preset()`'s sampled
+ * keyframes. There is nothing for a stylesheet to override; use the props.
+ */
+export interface PresenceProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> {
+    /** Whether the content is mounted and, once the entrance settles, visible. */
+    open: boolean;
+    /** Shares Reveal's preset vocabulary, plus `blur`/`zoom` — the one place besides Reveal a preset may carry `filter`, and here it's opt-in per instance, not per child. */
+    preset?: PresetName;
+    /** Entrance duration in ms. */
+    duration?: number;
+    /** Exit duration in ms — shorter than the entrance by default; leaving reads faster than arriving. */
+    exitDuration?: number;
+    /** Delay in ms before the entrance starts. Applied to the exit too. */
+    delay?: number;
+    /** Entrance travel distance in px for the four directional presets. The exit travels half as far. */
+    distance?: number;
+    /** Whether the panel is `inert` while closing. `true`, the default, reproduces the native behaviour the source framework applies to any transitioning element; `false` is an explicit opt-out, and it means the attribute is never touched at all. */
+    inert?: boolean;
+    /** Fires once the entrance transition settles. */
+    onEnterEnd?: () => void;
+    /** Fires once the exit transition settles — NOT guaranteed if the component is unmounted mid-exit. */
+    onExitEnd?: () => void;
+    /** Additional CSS classes, merged onto the root. */
+    className?: string;
+    /** Panel content. */
+    children: ReactNode;
+}
+export declare const Presence: import("react").ForwardRefExoticComponent<PresenceProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/presence/Presence.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { preset } from "../../internals/motion/transitions.js";
+const Presence = forwardRef(function Presence2({
+  open,
+  preset: preset$1 = "fade",
+  duration = 300,
+  // DURATIONS.base
+  exitDuration = 200,
+  // DURATIONS.exit
+  delay = 0,
+  distance = 16,
+  inert = true,
+  onEnterEnd,
+  onExitEnd,
+  className,
+  children,
+  ...restProps
+}, forwardedRef) {
+  const reduced = useReducedMotion();
+  const presence = usePresence(open, { inert, onEnterEnd, onExitEnd });
+  const rootRef = useComposedRefs(
+    forwardedRef,
+    presence.register(preset(preset$1), (entering) => ({
+      duration: reduced ? 0 : entering ? duration : exitDuration,
+      delay: reduced ? 0 : delay,
+      distance: entering ? distance : distance / 2
+    }))
+  );
+  if (!presence.mounted) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      ref: rootRef,
+      className: cn("ft-presence", className),
+      "data-state": presence.state,
+      children
+    }
+  );
+});
+export {
+  Presence
+};

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

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

package/dist/components/pressable/Pressable.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { HapticPattern } from "../../internals/motion/types.js";
+/**
+ * Props for Pressable.
+ *
+ * Pressable wraps exactly one interactive child (a `<button>`, an `<a>`,
+ * or anything that already owns its own role and keyboard handling) and
+ * gives it a consistent, cross-browser press animation. It supersedes a
+ * hand-rolled `:active` style — see the README before pairing the two.
+ */
+export interface PressableProps extends Omit<HTMLAttributes<HTMLDivElement>, "onPointerDown" | "onPointerUp" | "onPointerCancel" | "onPointerLeave" | "onBlur" | "onKeyDown" | "onKeyUp"> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** How far the wrapper shrinks while pressed, as a CSS `scale()` factor. */
+    scale?: number;
+    /**
+     * Touch-only haptic pattern fired on `pointerdown`. `false` (the
+     * default) never vibrates — this is an opt-in, additive effect, never
+     * a required one.
+     */
+    haptic?: false | HapticPattern;
+    /** Suppresses every listener; the wrapper never sets `data-pressed`. */
+    disabled?: boolean;
+    /** Exactly one interactive child. Not enforced at runtime — documented only. */
+    children: ReactNode;
+}
+export declare const Pressable: import("react").ForwardRefExoticComponent<PressableProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/pressable/Pressable.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { canVibrate, vibrate } from "../../internals/motion/haptics.js";
+/* empty css              */
+const DEFAULT_SCALE = 0.97;
+function isActivationKey(key) {
+  return key === " " || key === "Enter";
+}
+const Pressable = forwardRef(
+  ({
+    scale = DEFAULT_SCALE,
+    haptic = false,
+    disabled = false,
+    children,
+    className,
+    style,
+    ...restProps
+  }, ref) => {
+    const rootRef = useRef(null);
+    const setRootRef = useComposedRefs(ref, rootRef);
+    const [pressed, setPressed] = useState(false);
+    function isInsideRoot(target) {
+      const root = rootRef.current;
+      return !!root && target instanceof Node && root.contains(target);
+    }
+    function press() {
+      if (!disabled) setPressed(true);
+    }
+    function release() {
+      setPressed(false);
+    }
+    useEffect(() => {
+      if (disabled) setPressed(false);
+    }, [disabled]);
+    function handlePointerDown(event) {
+      if (disabled) return;
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      press();
+      if (haptic && event.pointerType === "touch" && canVibrate()) vibrate(haptic);
+    }
+    function handlePointerRelease() {
+      release();
+    }
+    function handleFocusOut() {
+      release();
+    }
+    function handleKeyDown(event) {
+      if (disabled || event.repeat) return;
+      if (!isActivationKey(event.key)) return;
+      if (!isInsideRoot(event.target)) return;
+      press();
+    }
+    function handleKeyUp(event) {
+      if (event.repeat) return;
+      if (!isActivationKey(event.key)) return;
+      release();
+    }
+    const mergedStyle = scale === DEFAULT_SCALE ? style : { ...style, "--ft-pressable-scale": scale };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRootRef,
+        className: cn("ft-pressable", className),
+        ...restProps,
+        style: mergedStyle,
+        "data-pressed": pressed ? "true" : void 0,
+        "data-disabled": disabled ? "true" : void 0,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerRelease,
+        onPointerCancel: handlePointerRelease,
+        onPointerLeave: handlePointerRelease,
+        onBlur: handleFocusOut,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        children
+      }
+    );
+  }
+);
+Pressable.displayName = "Pressable";
+export {
+  Pressable
+};

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

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

package/dist/components/prompt-suggestions/PromptSuggestions.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export interface PromptSuggestionsProps {
+    /** Prompt texts offered to the user, in display order */
+    suggestions: string[];
+    /** Called with the chosen prompt and its index when a pill is activated */
+    onSelect?: (suggestion: string, index: number) => void;
+    /** Whether the pills are shown; flipping this to true replays the entrance */
+    visible?: boolean;
+    /** Delay between two consecutive pills entering, in milliseconds. Defaults to
+     * 60ms via a CSS fallback — omit this prop to let an ancestor's
+     * `--ft-suggestions-stagger` theme the whole subtree instead. */
+    staggerMs?: number;
+    /** Accessible name of the group wrapping the pills */
+    label?: string;
+    /** Custom pill content, receiving the suggestion and its index */
+    item?: (suggestion: string, index: number) => 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 PromptSuggestions: import("react").ForwardRefExoticComponent<PromptSuggestionsProps & import("react").RefAttributes<HTMLDivElement>>;