fancy-ui-react 0.2.0

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, 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 { 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 { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { runTransition } from "../../internals/motion/animate.js";
+const DEV = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+function isFocusable(el) {
+  if (el.disabled) return false;
+  if (["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(el.tagName)) return true;
+  if (el.tagName === "A" && el.hasAttribute("href")) return true;
+  const tabindex = el.getAttribute("tabindex");
+  return tabindex !== null && tabindex !== "-1";
+}
+function describedByIds(el) {
+  return (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+}
+const Tooltip = forwardRef(function Tooltip2({
+  content,
+  side = "top",
+  align = "center",
+  offset = 6,
+  openDelay = 500,
+  closeDelay = 0,
+  disabled = false,
+  children,
+  className
+}, forwardedRef) {
+  const tooltipId = useFancyId();
+  const [open, setOpen] = useState(false);
+  const [wrapper, setWrapperNode] = useElementRef();
+  const wrapperRef = useComposedRefs(setWrapperNode, forwardedRef);
+  const [triggerEl, setTriggerEl] = useState(null);
+  const triggerHovered = useRef(false);
+  const contentHovered = useRef(false);
+  const focused = useRef(false);
+  const openTimer = useRef(void 0);
+  const closeTimer = useRef(void 0);
+  function clearTimers() {
+    if (openTimer.current !== void 0) {
+      clearTimeout(openTimer.current);
+      openTimer.current = void 0;
+    }
+    if (closeTimer.current !== void 0) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = void 0;
+    }
+  }
+  function show(delay) {
+    clearTimers();
+    if (delay <= 0) {
+      setOpen(true);
+      return;
+    }
+    openTimer.current = setTimeout(() => {
+      openTimer.current = void 0;
+      setOpen(true);
+    }, delay);
+  }
+  function hide() {
+    clearTimers();
+    if (closeDelay <= 0) {
+      setOpen(false);
+      return;
+    }
+    closeTimer.current = setTimeout(() => {
+      closeTimer.current = void 0;
+      setOpen(false);
+    }, closeDelay);
+  }
+  function updateVisibility() {
+    if (disabled) {
+      hide();
+      return;
+    }
+    if (triggerHovered.current || contentHovered.current || focused.current) {
+      show(focused.current ? 0 : openDelay);
+    } else {
+      hide();
+    }
+  }
+  const handlePointerEnter = useEventCallback(() => {
+    triggerHovered.current = true;
+    updateVisibility();
+  });
+  const handlePointerLeave = useEventCallback(() => {
+    triggerHovered.current = false;
+    updateVisibility();
+  });
+  const handleFocus = useEventCallback(() => {
+    focused.current = true;
+    updateVisibility();
+  });
+  const handleBlur = useEventCallback(() => {
+    focused.current = false;
+    updateVisibility();
+  });
+  const handleDismiss = useEventCallback(() => {
+    setOpen(false);
+    clearTimers();
+  });
+  const handleContentPointerEnter = useEventCallback(() => {
+    contentHovered.current = true;
+    updateVisibility();
+  });
+  const handleContentPointerLeave = useEventCallback(() => {
+    contentHovered.current = false;
+    updateVisibility();
+  });
+  const updateVisibilityEvent = useEventCallback(updateVisibility);
+  useEffect(() => {
+    updateVisibilityEvent();
+  }, [disabled, updateVisibilityEvent]);
+  useEffect(() => {
+    if (!wrapper) return;
+    const el = wrapper.firstElementChild;
+    setTriggerEl(el);
+    if (!el) return;
+    if (DEV && !isFocusable(el)) {
+      console.warn(
+        "[Tooltip] The first element rendered by `children` is not focusable, so this tooltip is unreachable by keyboard even though it will still open on hover. Render a real interactive element (a <button>, <a href>, or similar) as the first thing inside `children`."
+      );
+    }
+    el.addEventListener("pointerenter", handlePointerEnter);
+    el.addEventListener("pointerleave", handlePointerLeave);
+    el.addEventListener("focus", handleFocus);
+    el.addEventListener("blur", handleBlur);
+    return () => {
+      el.removeEventListener("pointerenter", handlePointerEnter);
+      el.removeEventListener("pointerleave", handlePointerLeave);
+      el.removeEventListener("focus", handleFocus);
+      el.removeEventListener("blur", handleBlur);
+    };
+  }, [wrapper, handlePointerEnter, handlePointerLeave, handleFocus, handleBlur]);
+  useEffect(() => {
+    if (!triggerEl || disabled || !open) return;
+    const el = triggerEl;
+    const ids = describedByIds(el);
+    if (!ids.includes(tooltipId)) ids.push(tooltipId);
+    el.setAttribute("aria-describedby", ids.join(" "));
+    return () => {
+      const rest = describedByIds(el).filter((id) => id !== tooltipId);
+      if (rest.length > 0) el.setAttribute("aria-describedby", rest.join(" "));
+      else el.removeAttribute("aria-describedby");
+    };
+  }, [triggerEl, disabled, open, tooltipId]);
+  useEffect(() => clearTimers, []);
+  const mounted = open && !disabled;
+  const [bubble, setBubbleNode] = useElementRef();
+  const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(bubble, {
+    anchor: () => triggerEl,
+    side,
+    align,
+    offset
+  });
+  useDismissable(bubble, { onDismiss: handleDismiss, escape: true, outsideClick: false });
+  const resolvedSideRef = useLiveRef(resolvedSide);
+  useIsomorphicLayoutEffect(() => {
+    if (!bubble) return;
+    let run;
+    run = runTransition(
+      bubble,
+      anchored(bubble, { side: resolvedSideRef.current, scale: false }, { direction: "in" }),
+      1,
+      void 0,
+      // On enter finish, abort the run: it removes the `fill: forwards`
+      // so the element returns to its resting style — which *is* the
+      // visible end state by construction. On the synchronous
+      // reduced-motion path `run` is still unset here, and there is
+      // nothing to abort.
+      () => run?.abort()
+    );
+    return () => run?.abort();
+  }, [bubble, resolvedSideRef]);
+  useEffect(() => {
+    if (!bubble) return;
+    bubble.addEventListener("pointerenter", handleContentPointerEnter);
+    bubble.addEventListener("pointerleave", handleContentPointerLeave);
+    return () => {
+      bubble.removeEventListener("pointerenter", handleContentPointerEnter);
+      bubble.removeEventListener("pointerleave", handleContentPointerLeave);
+    };
+  }, [bubble, handleContentPointerEnter, handleContentPointerLeave]);
+  const wrapperClasses = cn("ft-tooltip-trigger inline-flex", className);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: wrapperRef, className: wrapperClasses, children }),
+    /* @__PURE__ */ jsx(Portal, { children: mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setBubbleNode,
+        id: tooltipId,
+        role: "tooltip",
+        className: "ft-tooltip bg-primary text-primary-foreground pointer-events-auto z-50 rounded-[6px] px-[10px] py-[5px] text-[11px] font-medium shadow-lg",
+        "data-side": resolvedSide,
+        "data-align": align,
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        children: content
+      }
+    ) : null })
+  ] });
+});
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};

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

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

package/dist/components/tracing-beam/TracingBeam.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export interface TracingBeamProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Content the beam traces alongside */
+    children?: ReactNode;
+}
+/**
+ * TracingBeam - Vertical SVG beam that highlights scroll progress alongside content.
+ */
+export declare function TracingBeam({ className, children }: TracingBeamProps): import("react").JSX.Element;

package/dist/components/tracing-beam/TracingBeam.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { cn } from "../../utils.js";
+function mapRange(value, inMin, inMax, outMin, outMax) {
+  return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+}
+function TracingBeam({ className = "", children }) {
+  const tracingBeamRef = useRef(null);
+  const contentRef = useRef(null);
+  const gradientRef = useRef(null);
+  const gradientId = useFancyId("tracing-beam-gradient");
+  const [svgHeight, setSvgHeight] = useState(0);
+  const [beamStarted, setBeamStarted] = useState(false);
+  const stateRef = useRef({
+    svgHeight: 0,
+    scrollYProgress: 0,
+    scrollPercentage: 0,
+    springY1: 0,
+    springY2: 0,
+    springVelY1: 0,
+    springVelY2: 0,
+    rafId: 0
+  });
+  useIsomorphicLayoutEffect(() => {
+    const s = stateRef.current;
+    function targetY1() {
+      return mapRange(s.scrollYProgress, 0, 0.8, s.scrollYProgress, s.svgHeight) * (1.4 - s.scrollPercentage);
+    }
+    function targetY2() {
+      return mapRange(s.scrollYProgress, 0, 1, s.scrollYProgress, s.svgHeight - 500) * (1.4 - s.scrollPercentage);
+    }
+    function applySpring() {
+      const gradient = gradientRef.current;
+      if (gradient) {
+        gradient.setAttribute("y1", String(s.springY1));
+        gradient.setAttribute("y2", String(s.springY2));
+      }
+    }
+    function updateSpring() {
+      const tension = 80;
+      const friction = 26;
+      const precision = 0.01;
+      const tY1 = targetY1();
+      const tY2 = targetY2();
+      const forceY1 = tension * (tY1 - s.springY1);
+      s.springVelY1 = (s.springVelY1 + forceY1 * 1e-3) * (1 - friction * 1e-3);
+      s.springY1 += s.springVelY1;
+      const forceY2 = tension * (tY2 - s.springY2);
+      s.springVelY2 = (s.springVelY2 + forceY2 * 1e-3) * (1 - friction * 1e-3);
+      s.springY2 += s.springVelY2;
+      applySpring();
+      const settled = Math.abs(s.springVelY1) < precision && Math.abs(tY1 - s.springY1) < precision && Math.abs(s.springVelY2) < precision && Math.abs(tY2 - s.springY2) < precision;
+      if (!settled) {
+        s.rafId = requestAnimationFrame(updateSpring);
+      }
+    }
+    function updateScrollProgress() {
+      const el = tracingBeamRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const elementHeight = rect.height;
+      s.scrollPercentage = (windowHeight - rect.top) / (windowHeight + elementHeight);
+      s.scrollYProgress = rect.y / windowHeight * -1;
+      setBeamStarted(s.scrollYProgress > 0);
+      cancelAnimationFrame(s.rafId);
+      s.rafId = requestAnimationFrame(updateSpring);
+    }
+    function updateSVGHeight() {
+      const el = contentRef.current;
+      if (!el) return;
+      s.svgHeight = el.offsetHeight;
+      setSvgHeight(s.svgHeight);
+    }
+    window.addEventListener("scroll", updateScrollProgress, { passive: true });
+    window.addEventListener("resize", updateScrollProgress, { passive: true });
+    updateScrollProgress();
+    const resizeObserver = new ResizeObserver(updateSVGHeight);
+    if (contentRef.current) {
+      resizeObserver.observe(contentRef.current);
+    }
+    updateSVGHeight();
+    return () => {
+      cancelAnimationFrame(s.rafId);
+      window.removeEventListener("scroll", updateScrollProgress);
+      window.removeEventListener("resize", updateScrollProgress);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const circleHasShadow = !beamStarted;
+  const circleBg = beamStarted ? "bg-white" : "bg-emerald-500";
+  const circleBorder = beamStarted ? "border-neutral-300" : "border-emerald-600";
+  const svgPath = `M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tracingBeamRef,
+      className: cn("relative mx-auto h-full w-full max-w-4xl", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute top-3 -left-4 md:-left-12", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ml-[27px] flex size-4 items-center justify-center rounded-full border border-neutral-200 shadow-sm",
+              style: {
+                boxShadow: circleHasShadow ? "rgba(0, 0, 0, 0.24) 0px 3px 8px" : "none"
+              },
+              children: /* @__PURE__ */ jsx("div", { className: cn("size-2 rounded-full border", circleBg, circleBorder) })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: `0 0 20 ${svgHeight}`,
+              width: "20",
+              height: svgHeight,
+              className: "ml-4 block",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: svgPath, fill: "none", stroke: "#9091A0", strokeOpacity: "0.16" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: svgPath,
+                    fill: "none",
+                    stroke: `url(#${gradientId})`,
+                    strokeWidth: "1.25",
+                    className: "motion-reduce:hidden"
+                  }
+                ),
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                  "linearGradient",
+                  {
+                    ref: gradientRef,
+                    id: gradientId,
+                    gradientUnits: "userSpaceOnUse",
+                    x1: "0",
+                    x2: "0",
+                    y1: 0,
+                    y2: 0,
+                    children: [
+                      /* @__PURE__ */ jsx("stop", { stopColor: "#18CCFC", stopOpacity: "0" }),
+                      /* @__PURE__ */ jsx("stop", { stopColor: "#18CCFC" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "0.325", stopColor: "#6344F5" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#AE48FF", stopOpacity: "0" })
+                    ]
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: contentRef, children })
+      ]
+    }
+  );
+}
+export {
+  TracingBeam
+};

package/dist/components/tracing-beam/index.d.ts

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

package/dist/components/typing-indicator/TypingIndicator.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from "react";
+export interface TypingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    /** Dot diameter in pixels */
+    size?: number;
+    /** Dot color; any CSS color or custom property expression */
+    color?: string;
+    /** Duration of one full animation cycle in seconds */
+    speed?: number;
+    /** Visually hidden text announced to assistive technology */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Three dots animated as a single wave, wrapped in a polite live region.
+ */
+export declare const TypingIndicator: import("react").ForwardRefExoticComponent<TypingIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/typing-indicator/TypingIndicator.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+/* empty css                     */
+const TypingIndicator = forwardRef(
+  ({
+    size = 6,
+    color = "var(--ft-typing-color, currentColor)",
+    speed = 1.2,
+    label = "Typing",
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const cycle = Math.max(0.01, speed);
+    const rootStyle = {
+      ...style,
+      ["--ft-typing-size"]: `${size}px`,
+      ["--ft-typing-color-resolved"]: color,
+      ["--ft-typing-speed"]: `${cycle}s`,
+      gap: "calc(var(--ft-typing-size) * 0.6)"
+    };
+    const dotStyles = [0, 1, 2].map((i) => ({
+      animationDelay: `${Number((i * cycle / 6).toFixed(4))}s`
+    }));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("ft-typing inline-flex items-center", className),
+        style: rootStyle,
+        role: "status",
+        "aria-live": "polite",
+        ...rest,
+        children: [
+          dotStyles.map((dotStyle, i) => /* @__PURE__ */ jsx("span", { className: "ft-dot", style: dotStyle, "aria-hidden": "true" }, i)),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+        ]
+      }
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
+export {
+  TypingIndicator
+};

package/dist/components/typing-indicator/index.d.ts

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

package/dist/components/voice-input/VoiceInput.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Props for VoiceInput
+ */
+export interface VoiceInputProps {
+    /**
+     * Whether a recording is in progress. Controlled when supplied — pair it
+     * with `onActiveChange`, the React counterpart of the Svelte source's
+     * `bind:active`; the component keeps its own copy either way, so the mic,
+     * cancel and confirm buttons all write through it, and setting it from
+     * outside opens or closes the panel without firing any callback.
+     */
+    active?: boolean;
+    /**
+     * Called with the new recording state whenever one of the buttons changes
+     * it. Never fired for a change driven from outside through `active` — the
+     * callbacks report what the user did, not what the state is.
+     */
+    onActiveChange?: (active: boolean) => void;
+    /**
+     * Live text pushed by the consumer as their recogniser produces it. Rendered
+     * muted under the waveform; a growing string simply grows in place.
+     */
+    transcript?: string;
+    /**
+     * Amplitude levels in 0..1, bridged from whatever audio pipeline the
+     * consumer already owns. This component never opens a microphone itself.
+     */
+    samples?: ArrayLike<number>;
+    /**
+     * Draw a synthetic waveform when no `samples` arrive, so the component is
+     * legible on a docs page or in a story with no audio behind it.
+     */
+    demo?: boolean;
+    /** Called when the mic button starts a recording. */
+    onStart?: () => void;
+    /** Called when the confirm button ends a recording and keeps the transcript. */
+    onStop?: () => void;
+    /** Called when the cancel button abandons a recording. */
+    onCancel?: () => void;
+    /** Waveform height in CSS pixels. Clamped to 16..240. */
+    height?: number;
+    /** Any CSS colour for the bars, including a `var()` — resolved before painting. */
+    color?: string;
+    /** 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;
+}
+/**
+ * A mic button that opens into a recording panel: a live waveform, a stopwatch,
+ * the transcript as it arrives, and a cross and a check to throw it away or keep
+ * it.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop, per
+ * PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const VoiceInput: import("react").ForwardRefExoticComponent<VoiceInputProps & import("react").RefAttributes<HTMLDivElement>>;