@farzadbagheri/fb-components 0.1.0

package/dist/chunk-RUSFF3MZ.js

@@ -0,0 +1,214 @@
+import { useState, useEffect } from 'react';
+import { Sparkles, Paperclip, ArrowUp } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/ai/AiPromptBox.tsx
+function AiPromptBox({
+  background = "#111116",
+  accent = "#9b7cff",
+  textColor = "#ffffff",
+  radius = 20,
+  minHeight = 150,
+  showModel = true,
+  showAttachment = true,
+  modelLabel = "FB AI \xB7 Fast",
+  placeholder = "Ask anything...",
+  defaultValue = "",
+  disabled = false,
+  onSubmit,
+  className = "",
+  style,
+  ...props
+}) {
+  const [
+    value,
+    setValue
+  ] = useState(
+    defaultValue
+  );
+  function handleSubmit(event) {
+    event.preventDefault();
+    const trimmed = value.trim();
+    if (disabled || !trimmed) {
+      return;
+    }
+    onSubmit?.(
+      trimmed
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: `fb-ai-prompt-box ${className}`,
+      style: {
+        ...style,
+        background,
+        color: textColor,
+        borderRadius: radius,
+        minHeight,
+        ["--fb-ai-prompt-accent"]: accent
+      },
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "fb-ai-prompt-box__form",
+          onSubmit: handleSubmit,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "fb-ai-prompt-box__field", children: [
+              /* @__PURE__ */ jsx(
+                Sparkles,
+                {
+                  className: "fb-ai-prompt-box__spark",
+                  size: 16,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  value,
+                  disabled,
+                  placeholder,
+                  "aria-label": placeholder,
+                  onChange: (event) => setValue(
+                    event.target.value
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "fb-ai-prompt-box__footer", children: [
+              /* @__PURE__ */ jsxs("div", { className: "fb-ai-prompt-box__actions", children: [
+                showAttachment && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Attach file",
+                    className: "fb-ai-prompt-box__secondary",
+                    children: /* @__PURE__ */ jsx(
+                      Paperclip,
+                      {
+                        size: 15,
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                ),
+                showModel && /* @__PURE__ */ jsx("span", { className: "fb-ai-prompt-box__model", children: modelLabel })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: disabled || !value.trim(),
+                  className: "fb-ai-prompt-box__submit",
+                  "aria-label": "Submit prompt",
+                  children: /* @__PURE__ */ jsx(
+                    ArrowUp,
+                    {
+                      size: 16,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function StreamingResponse({
+  text = "FB Components gives your application a reusable system for motion, interaction and AI-native interfaces.",
+  accent = "#9b7cff",
+  textColor = "#ffffff",
+  speed = 24,
+  showCursor = true,
+  showStatus = true,
+  statusLabel = "GENERATING",
+  className = "",
+  style,
+  ...props
+}) {
+  const [
+    length,
+    setLength
+  ] = useState(0);
+  useEffect(() => {
+    setLength(
+      0
+    );
+    if (text.length === 0) {
+      return;
+    }
+    const interval = window.setInterval(
+      () => {
+        setLength(
+          (current) => {
+            if (current >= text.length) {
+              window.clearInterval(
+                interval
+              );
+              return current;
+            }
+            return current + 1;
+          }
+        );
+      },
+      Math.max(
+        5,
+        speed
+      )
+    );
+    return () => window.clearInterval(
+      interval
+    );
+  }, [
+    text,
+    speed
+  ]);
+  const complete = length >= text.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: `fb-streaming-response ${className}`,
+      style: {
+        ...style,
+        color: textColor,
+        ["--fb-streaming-accent"]: accent
+      },
+      "aria-live": "polite",
+      children: [
+        showStatus && /* @__PURE__ */ jsxs("div", { className: "fb-streaming-response__status", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: complete ? "is-complete" : "",
+              "aria-hidden": "true"
+            }
+          ),
+          complete ? "COMPLETE" : statusLabel
+        ] }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          text.slice(
+            0,
+            length
+          ),
+          showCursor && !complete && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "fb-streaming-response__cursor",
+              "aria-hidden": "true"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { AiPromptBox, StreamingResponse };
+//# sourceMappingURL=chunk-RUSFF3MZ.js.map
+//# sourceMappingURL=chunk-RUSFF3MZ.js.map

package/dist/chunk-RUSFF3MZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ai/AiPromptBox.tsx","../src/ai/StreamingResponse.tsx"],"names":["useState","jsxs","jsx"],"mappings":"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","file":"chunk-RUSFF3MZ.js","sourcesContent":["import {\r\n  useState,\r\n} from \"react\";\r\n\r\nimport type {\r\n  FormEvent,\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport {\r\n  ArrowUp,\r\n  Paperclip,\r\n  Sparkles,\r\n} from \"lucide-react\";\r\n\r\nimport \"./AiPromptBox.css\";\r\n\r\nexport interface AiPromptBoxProps\r\n  extends Omit<\r\n    HTMLAttributes<HTMLDivElement>,\r\n    \"onSubmit\"\r\n  > {\r\n  background?: string;\r\n\r\n  accent?: string;\r\n\r\n  textColor?: string;\r\n\r\n  radius?: number;\r\n\r\n  minHeight?: number;\r\n\r\n  showModel?: boolean;\r\n\r\n  showAttachment?: boolean;\r\n\r\n  modelLabel?: string;\r\n\r\n  placeholder?: string;\r\n\r\n  defaultValue?: string;\r\n\r\n  disabled?: boolean;\r\n\r\n  onSubmit?: (\r\n    value: string\r\n  ) => void;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function AiPromptBox({\r\n  background = \"#111116\",\r\n\r\n  accent = \"#9b7cff\",\r\n\r\n  textColor = \"#ffffff\",\r\n\r\n  radius = 20,\r\n\r\n  minHeight = 150,\r\n\r\n  showModel = true,\r\n\r\n  showAttachment = true,\r\n\r\n  modelLabel = \"FB AI · Fast\",\r\n\r\n  placeholder =\r\n    \"Ask anything...\",\r\n\r\n  defaultValue = \"\",\r\n\r\n  disabled = false,\r\n\r\n  onSubmit,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: AiPromptBoxProps) {\r\n  const [\r\n    value,\r\n    setValue,\r\n  ] =\r\n    useState(\r\n      defaultValue\r\n    );\r\n\r\n  function handleSubmit(\r\n    event:\r\n      FormEvent<HTMLFormElement>\r\n  ) {\r\n    event.preventDefault();\r\n\r\n    const trimmed =\r\n      value.trim();\r\n\r\n    if (\r\n      disabled ||\r\n      !trimmed\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    onSubmit?.(\r\n      trimmed\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-ai-prompt-box ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        background,\r\n\r\n        color:\r\n          textColor,\r\n\r\n        borderRadius:\r\n          radius,\r\n\r\n        minHeight,\r\n\r\n        [\"--fb-ai-prompt-accent\" as string]:\r\n          accent,\r\n      }}\r\n    >\r\n      <form\r\n        className=\"fb-ai-prompt-box__form\"\r\n        onSubmit={\r\n          handleSubmit\r\n        }\r\n      >\r\n        <div className=\"fb-ai-prompt-box__field\">\r\n          <Sparkles\r\n            className=\"fb-ai-prompt-box__spark\"\r\n            size={16}\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          <textarea\r\n            value={\r\n              value\r\n            }\r\n            disabled={\r\n              disabled\r\n            }\r\n            placeholder={\r\n              placeholder\r\n            }\r\n            aria-label={\r\n              placeholder\r\n            }\r\n            onChange={(\r\n              event\r\n            ) =>\r\n              setValue(\r\n                event.target\r\n                  .value\r\n              )\r\n            }\r\n          />\r\n        </div>\r\n\r\n        <div className=\"fb-ai-prompt-box__footer\">\r\n          <div className=\"fb-ai-prompt-box__actions\">\r\n            {showAttachment && (\r\n              <button\r\n                type=\"button\"\r\n                aria-label=\"Attach file\"\r\n                className=\"fb-ai-prompt-box__secondary\"\r\n              >\r\n                <Paperclip\r\n                  size={15}\r\n                  aria-hidden=\"true\"\r\n                />\r\n              </button>\r\n            )}\r\n\r\n            {showModel && (\r\n              <span className=\"fb-ai-prompt-box__model\">\r\n                {\r\n                  modelLabel\r\n                }\r\n              </span>\r\n            )}\r\n          </div>\r\n\r\n          <button\r\n            type=\"submit\"\r\n            disabled={\r\n              disabled ||\r\n              !value.trim()\r\n            }\r\n            className=\"fb-ai-prompt-box__submit\"\r\n            aria-label=\"Submit prompt\"\r\n          >\r\n            <ArrowUp\r\n              size={16}\r\n              aria-hidden=\"true\"\r\n            />\r\n          </button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  );\r\n}","import {\r\n  useEffect,\r\n  useState,\r\n} from \"react\";\r\n\r\nimport type {\r\n  HTMLAttributes,\r\n} from \"react\";\r\n\r\nimport \"./StreamingResponse.css\";\r\n\r\nexport interface StreamingResponseProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  text?: string;\r\n\r\n  accent?: string;\r\n  textColor?: string;\r\n\r\n  speed?: number;\r\n\r\n  showCursor?: boolean;\r\n  showStatus?: boolean;\r\n\r\n  statusLabel?: string;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function StreamingResponse({\r\n  text =\r\n    \"FB Components gives your application a reusable system for motion, interaction and AI-native interfaces.\",\r\n\r\n  accent = \"#9b7cff\",\r\n  textColor = \"#ffffff\",\r\n\r\n  speed = 24,\r\n\r\n  showCursor = true,\r\n  showStatus = true,\r\n\r\n  statusLabel =\r\n    \"GENERATING\",\r\n\r\n  className = \"\",\r\n  style,\r\n\r\n  ...props\r\n}: StreamingResponseProps) {\r\n  const [\r\n    length,\r\n    setLength,\r\n  ] =\r\n    useState(0);\r\n\r\n  useEffect(() => {\r\n    setLength(\r\n      0\r\n    );\r\n\r\n    if (\r\n      text.length ===\r\n      0\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const interval =\r\n      window.setInterval(\r\n        () => {\r\n          setLength(\r\n            (\r\n              current\r\n            ) => {\r\n              if (\r\n                current >=\r\n                text.length\r\n              ) {\r\n                window.clearInterval(\r\n                  interval\r\n                );\r\n\r\n                return current;\r\n              }\r\n\r\n              return (\r\n                current +\r\n                1\r\n              );\r\n            }\r\n          );\r\n        },\r\n        Math.max(\r\n          5,\r\n          speed\r\n        )\r\n      );\r\n\r\n    return () =>\r\n      window.clearInterval(\r\n        interval\r\n      );\r\n  }, [\r\n    text,\r\n    speed,\r\n  ]);\r\n\r\n  const complete =\r\n    length >=\r\n    text.length;\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      className={`fb-streaming-response ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        color:\r\n          textColor,\r\n\r\n        [\"--fb-streaming-accent\" as string]:\r\n          accent,\r\n      }}\r\n      aria-live=\"polite\"\r\n    >\r\n      {showStatus && (\r\n        <div className=\"fb-streaming-response__status\">\r\n          <span\r\n            className={\r\n              complete\r\n                ? \"is-complete\"\r\n                : \"\"\r\n            }\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          {complete\r\n            ? \"COMPLETE\"\r\n            : statusLabel}\r\n        </div>\r\n      )}\r\n\r\n      <p>\r\n        {text.slice(\r\n          0,\r\n          length\r\n        )}\r\n\r\n        {showCursor &&\r\n          !complete && (\r\n            <span\r\n              className=\"fb-streaming-response__cursor\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          )}\r\n      </p>\r\n    </div>\r\n  );\r\n}"]}

package/dist/chunk-T7CC3CLH.js

@@ -0,0 +1,195 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/motion/GlowCursor.tsx
+function GlowCursor({
+  children,
+  color = "#825dff",
+  size = 110,
+  blur = 35,
+  opacity = 0.45,
+  followSpeed = 0.12,
+  className = ""
+}) {
+  const [
+    point,
+    setPoint
+  ] = useState({
+    x: 0,
+    y: 0
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `fb-glow-cursor ${className}`,
+      onMouseMove: (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        setPoint({
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fb-glow-cursor__glow",
+            style: {
+              width: size,
+              height: size,
+              left: point.x,
+              top: point.y,
+              background: color,
+              filter: `blur(${blur}px)`,
+              opacity,
+              transitionDuration: `${followSpeed}s`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fb-glow-cursor__content", children })
+      ]
+    }
+  );
+}
+function MagneticCursor({
+  children,
+  color = "#b99cff",
+  size = 18,
+  ringSize = 44,
+  followSpeed = 0.14,
+  magneticStrength = 0.25,
+  className = "",
+  style,
+  ...props
+}) {
+  const containerRef = useRef(
+    null
+  );
+  const [
+    point,
+    setPoint
+  ] = useState({
+    x: 0,
+    y: 0
+  });
+  const [
+    visible,
+    setVisible
+  ] = useState(false);
+  const [
+    hoveringTarget,
+    setHoveringTarget
+  ] = useState(false);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    function handlePointerMove(event) {
+      const rect = element.getBoundingClientRect();
+      let x = event.clientX - rect.left;
+      let y = event.clientY - rect.top;
+      const target = event.target?.closest(
+        "[data-magnetic-target]"
+      );
+      if (target) {
+        const targetRect = target.getBoundingClientRect();
+        const centerX = targetRect.left + targetRect.width / 2;
+        const centerY = targetRect.top + targetRect.height / 2;
+        x += (centerX - event.clientX) * magneticStrength;
+        y += (centerY - event.clientY) * magneticStrength;
+        setHoveringTarget(
+          true
+        );
+      } else {
+        setHoveringTarget(
+          false
+        );
+      }
+      setPoint({
+        x,
+        y
+      });
+      setVisible(
+        true
+      );
+    }
+    function handlePointerLeave() {
+      setVisible(
+        false
+      );
+      setHoveringTarget(
+        false
+      );
+    }
+    element.addEventListener(
+      "pointermove",
+      handlePointerMove
+    );
+    element.addEventListener(
+      "pointerleave",
+      handlePointerLeave
+    );
+    return () => {
+      element.removeEventListener(
+        "pointermove",
+        handlePointerMove
+      );
+      element.removeEventListener(
+        "pointerleave",
+        handlePointerLeave
+      );
+    };
+  }, [
+    magneticStrength
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: containerRef,
+      className: `fb-magnetic-cursor ${className}`,
+      style: {
+        ...style,
+        cursor: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "fb-magnetic-cursor__content", children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `fb-magnetic-cursor__ring ${visible ? "is-visible" : ""} ${hoveringTarget ? "is-targeting" : ""}`,
+            style: {
+              width: ringSize,
+              height: ringSize,
+              left: point.x,
+              top: point.y,
+              borderColor: color,
+              transitionDuration: `${followSpeed}s`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `fb-magnetic-cursor__dot ${visible ? "is-visible" : ""}`,
+            style: {
+              width: size,
+              height: size,
+              left: point.x,
+              top: point.y,
+              background: color,
+              boxShadow: `0 0 ${size}px ${color}`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { GlowCursor, MagneticCursor };
+//# sourceMappingURL=chunk-T7CC3CLH.js.map
+//# sourceMappingURL=chunk-T7CC3CLH.js.map

package/dist/chunk-T7CC3CLH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/motion/GlowCursor.tsx","../src/motion/MagneticCursor.tsx"],"names":["useState","jsxs","jsx"],"mappings":"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","file":"chunk-T7CC3CLH.js","sourcesContent":["import {\r\n  useState,\r\n} from \"react\";\r\n\r\nimport \"./GlowCursor.css\";\r\n\r\nexport interface GlowCursorProps {\r\n  children?:\r\n    React.ReactNode;\r\n\r\n  color?:\r\n    string;\r\n\r\n  size?:\r\n    number;\r\n\r\n  blur?:\r\n    number;\r\n\r\n  opacity?:\r\n    number;\r\n\r\n  followSpeed?:\r\n    number;\r\n\r\n  className?:\r\n    string;\r\n}\r\n\r\nexport function GlowCursor({\r\n  children,\r\n\r\n  color =\r\n    \"#825dff\",\r\n\r\n  size =\r\n    110,\r\n\r\n  blur =\r\n    35,\r\n\r\n  opacity =\r\n    0.45,\r\n\r\n  followSpeed =\r\n    0.12,\r\n\r\n  className =\r\n    \"\",\r\n}: GlowCursorProps) {\r\n  const [\r\n    point,\r\n    setPoint,\r\n  ] =\r\n    useState({\r\n      x: 0,\r\n      y: 0,\r\n    });\r\n\r\n  return (\r\n    <div\r\n      className={`fb-glow-cursor ${className}`}\r\n      onMouseMove={(\r\n        event\r\n      ) => {\r\n        const rect =\r\n          event.currentTarget.getBoundingClientRect();\r\n\r\n        setPoint({\r\n          x:\r\n            event.clientX -\r\n            rect.left,\r\n\r\n          y:\r\n            event.clientY -\r\n            rect.top,\r\n        });\r\n      }}\r\n    >\r\n      <div\r\n        className=\"fb-glow-cursor__glow\"\r\n        style={{\r\n          width:\r\n            size,\r\n\r\n          height:\r\n            size,\r\n\r\n          left:\r\n            point.x,\r\n\r\n          top:\r\n            point.y,\r\n\r\n          background:\r\n            color,\r\n\r\n          filter:\r\n            `blur(${blur}px)`,\r\n\r\n          opacity,\r\n\r\n          transitionDuration:\r\n            `${followSpeed}s`,\r\n        }}\r\n      />\r\n\r\n      <div className=\"fb-glow-cursor__content\">\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}","import {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\n\r\nimport type {\r\n  HTMLAttributes,\r\n  ReactNode,\r\n} from \"react\";\r\n\r\nimport \"./MagneticCursor.css\";\r\n\r\nexport interface MagneticCursorProps\r\n  extends HTMLAttributes<HTMLDivElement> {\r\n  children?: ReactNode;\r\n\r\n  color?: string;\r\n\r\n  size?: number;\r\n\r\n  ringSize?: number;\r\n\r\n  followSpeed?: number;\r\n\r\n  magneticStrength?: number;\r\n\r\n  className?: string;\r\n}\r\n\r\ninterface Point {\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\nexport function MagneticCursor({\r\n  children,\r\n\r\n  color = \"#b99cff\",\r\n\r\n  size = 18,\r\n\r\n  ringSize = 44,\r\n\r\n  followSpeed = 0.14,\r\n\r\n  magneticStrength = 0.25,\r\n\r\n  className = \"\",\r\n\r\n  style,\r\n\r\n  ...props\r\n}: MagneticCursorProps) {\r\n  const containerRef =\r\n    useRef<HTMLDivElement>(\r\n      null\r\n    );\r\n\r\n  const [\r\n    point,\r\n    setPoint,\r\n  ] =\r\n    useState<Point>({\r\n      x: 0,\r\n      y: 0,\r\n    });\r\n\r\n  const [\r\n    visible,\r\n    setVisible,\r\n  ] =\r\n    useState(false);\r\n\r\n  const [\r\n    hoveringTarget,\r\n    setHoveringTarget,\r\n  ] =\r\n    useState(false);\r\n\r\n  useEffect(() => {\r\n    const element =\r\n      containerRef.current;\r\n\r\n    if (!element) {\r\n      return;\r\n    }\r\n\r\n    function handlePointerMove(\r\n      event: PointerEvent\r\n    ) {\r\n      const rect =\r\n        element!.getBoundingClientRect();\r\n\r\n      let x =\r\n        event.clientX -\r\n        rect.left;\r\n\r\n      let y =\r\n        event.clientY -\r\n        rect.top;\r\n\r\n      const target =\r\n        (\r\n          event.target as\r\n            HTMLElement | null\r\n        )?.closest(\r\n          \"[data-magnetic-target]\"\r\n        ) as\r\n          | HTMLElement\r\n          | null;\r\n\r\n      if (target) {\r\n        const targetRect =\r\n          target.getBoundingClientRect();\r\n\r\n        const centerX =\r\n          targetRect.left +\r\n          targetRect.width /\r\n            2;\r\n\r\n        const centerY =\r\n          targetRect.top +\r\n          targetRect.height /\r\n            2;\r\n\r\n        x +=\r\n          (\r\n            centerX -\r\n            event.clientX\r\n          ) *\r\n          magneticStrength;\r\n\r\n        y +=\r\n          (\r\n            centerY -\r\n            event.clientY\r\n          ) *\r\n          magneticStrength;\r\n\r\n        setHoveringTarget(\r\n          true\r\n        );\r\n      } else {\r\n        setHoveringTarget(\r\n          false\r\n        );\r\n      }\r\n\r\n      setPoint({\r\n        x,\r\n        y,\r\n      });\r\n\r\n      setVisible(\r\n        true\r\n      );\r\n    }\r\n\r\n    function handlePointerLeave() {\r\n      setVisible(\r\n        false\r\n      );\r\n\r\n      setHoveringTarget(\r\n        false\r\n      );\r\n    }\r\n\r\n    element.addEventListener(\r\n      \"pointermove\",\r\n      handlePointerMove\r\n    );\r\n\r\n    element.addEventListener(\r\n      \"pointerleave\",\r\n      handlePointerLeave\r\n    );\r\n\r\n    return () => {\r\n      element.removeEventListener(\r\n        \"pointermove\",\r\n        handlePointerMove\r\n      );\r\n\r\n      element.removeEventListener(\r\n        \"pointerleave\",\r\n        handlePointerLeave\r\n      );\r\n    };\r\n  }, [\r\n    magneticStrength,\r\n  ]);\r\n\r\n  return (\r\n    <div\r\n      {...props}\r\n      ref={\r\n        containerRef\r\n      }\r\n      className={`fb-magnetic-cursor ${className}`}\r\n      style={{\r\n        ...style,\r\n\r\n        cursor:\r\n          \"none\",\r\n      }}\r\n    >\r\n      <div className=\"fb-magnetic-cursor__content\">\r\n        {children}\r\n      </div>\r\n\r\n      <span\r\n        aria-hidden=\"true\"\r\n        className={`fb-magnetic-cursor__ring ${\r\n          visible\r\n            ? \"is-visible\"\r\n            : \"\"\r\n        } ${\r\n          hoveringTarget\r\n            ? \"is-targeting\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          width:\r\n            ringSize,\r\n\r\n          height:\r\n            ringSize,\r\n\r\n          left:\r\n            point.x,\r\n\r\n          top:\r\n            point.y,\r\n\r\n          borderColor:\r\n            color,\r\n\r\n          transitionDuration:\r\n            `${followSpeed}s`,\r\n        }}\r\n      />\r\n\r\n      <span\r\n        aria-hidden=\"true\"\r\n        className={`fb-magnetic-cursor__dot ${\r\n          visible\r\n            ? \"is-visible\"\r\n            : \"\"\r\n        }`}\r\n        style={{\r\n          width:\r\n            size,\r\n\r\n          height:\r\n            size,\r\n\r\n          left:\r\n            point.x,\r\n\r\n          top:\r\n            point.y,\r\n\r\n          background:\r\n            color,\r\n\r\n          boxShadow:\r\n            `0 0 ${size}px ${color}`,\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}"]}