@creopse/react 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -7781,5 +7782,250 @@ const CustomTransition = ({
     }
   );
 };
+const MountedTeleport = ({
+  to,
+  children,
+  disabled = false
+}) => {
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [targetElement, setTargetElement] = React.useState(null);
+  React.useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!isMounted || disabled) {
+      setTargetElement(null);
+      return;
+    }
+    let target = null;
+    if (typeof to === "string") {
+      target = document.querySelector(to);
+      if (!target) {
+        console.warn(
+          `MountedTeleport: Target element not found for selector "${to}"`
+        );
+        setTargetElement(null);
+        return;
+      }
+    } else if (to instanceof HTMLElement) {
+      target = to;
+    } else {
+      console.warn(
+        "MountedTeleport: Invalid target type. Expected string selector or HTMLElement."
+      );
+      setTargetElement(null);
+      return;
+    }
+    setTargetElement(target);
+  }, [to, isMounted, disabled]);
+  if (!isMounted || disabled || !targetElement) {
+    return null;
+  }
+  return reactDom.createPortal(children, targetElement);
+};
+const ReadMore = ({
+  moreStr = "Read more",
+  lessStr = "Read less",
+  link = "#",
+  maxChars = 100,
+  text,
+  className = "",
+  linkClassName = ""
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const formattedText = () => {
+    if (!isExpanded && text.length > maxChars) {
+      return text.substring(0, maxChars).trim() + "...";
+    }
+    return text;
+  };
+  const handleToggle = (event) => {
+    event.preventDefault();
+    setIsExpanded(!isExpanded);
+  };
+  if (!text) {
+    return null;
+  }
+  const shouldShowToggle = text.length > maxChars;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formattedText() }),
+    shouldShowToggle && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      " ",
+      !isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "a",
+        {
+          href: link,
+          onClick: handleToggle,
+          className: linkClassName,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setIsExpanded(true);
+            }
+          },
+          children: moreStr
+        }
+      ) : lessStr && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "a",
+        {
+          href: link,
+          onClick: handleToggle,
+          className: linkClassName,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setIsExpanded(false);
+            }
+          },
+          children: lessStr
+        }
+      )
+    ] })
+  ] });
+};
+const StickyBottom = ({
+  bottom = 0,
+  zIndex = 1,
+  className = "",
+  children = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Sticky Bottom" })
+}) => {
+  const elRef = React.useRef(null);
+  const [isSticky, setIsSticky] = React.useState(false);
+  const [width, setWidth] = React.useState("auto");
+  const [height, setHeight] = React.useState("auto");
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (!elRef.current) return;
+      const rect = elRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const shouldStick = rect.bottom <= viewportHeight - bottom;
+      if (shouldStick && !isSticky) {
+        setWidth(rect.width + "px");
+        setHeight(rect.height + "px");
+        setIsSticky(true);
+      } else if (!shouldStick && isSticky) {
+        setIsSticky(false);
+        setWidth("auto");
+      }
+    };
+    const handleResize = () => {
+      if (!isSticky && elRef.current) {
+        const rect = elRef.current.getBoundingClientRect();
+        setHeight(rect.height + "px");
+      }
+    };
+    if (elRef.current) {
+      const rect = elRef.current.getBoundingClientRect();
+      setHeight(rect.height + "px");
+    }
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleResize);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [bottom, isSticky]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: elRef,
+      style: {
+        height: isSticky ? height : "auto",
+        zIndex
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className,
+          style: {
+            position: isSticky ? "fixed" : "static",
+            bottom: isSticky ? `${bottom}px` : "auto",
+            width: isSticky ? width : "auto",
+            zIndex
+          },
+          children
+        }
+      )
+    }
+  );
+};
+const StickyTop = ({
+  top = 0,
+  zIndex = 1,
+  className = "",
+  children = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Sticky Top" })
+}) => {
+  const elRef = React.useRef(null);
+  const [isSticky, setIsSticky] = React.useState(false);
+  const [width, setWidth] = React.useState("auto");
+  const [height, setHeight] = React.useState("auto");
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (!elRef.current) return;
+      const rect = elRef.current.getBoundingClientRect();
+      const shouldStick = rect.top <= top;
+      if (shouldStick && !isSticky) {
+        setWidth(rect.width + "px");
+        setHeight(rect.height + "px");
+        setIsSticky(true);
+      } else if (!shouldStick && isSticky) {
+        setIsSticky(false);
+        setWidth("auto");
+      }
+    };
+    const handleResize = () => {
+      if (!isSticky && elRef.current) {
+        const rect = elRef.current.getBoundingClientRect();
+        setHeight(rect.height + "px");
+      }
+    };
+    if (elRef.current) {
+      const rect = elRef.current.getBoundingClientRect();
+      setHeight(rect.height + "px");
+    }
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleResize);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [top, isSticky]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: elRef,
+      style: {
+        height: isSticky ? height : "auto",
+        zIndex
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className,
+          style: {
+            position: isSticky ? "fixed" : "static",
+            top: isSticky ? `${top}px` : "auto",
+            width: isSticky ? width : "auto",
+            zIndex
+          },
+          children
+        }
+      )
+    }
+  );
+};
 exports.AsyncImg = AsyncImg;
 exports.CustomTransition = CustomTransition;
+exports.MountedTeleport = MountedTeleport;
+exports.ReadMore = ReadMore;
+exports.StickyBottom = StickyBottom;
+exports.StickyTop = StickyTop;

package/dist/index.js

@@ -1,4 +1,4 @@
-var CreopseReactToolkit = function(exports, React2) {
+var CreopseReactToolkit = function(exports, React2, reactDom) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -7780,8 +7780,253 @@ var CreopseReactToolkit = function(exports, React2) {
       }
     );
   };
+  const MountedTeleport = ({
+    to,
+    children,
+    disabled = false
+  }) => {
+    const [isMounted, setIsMounted] = React2.useState(false);
+    const [targetElement, setTargetElement] = React2.useState(null);
+    React2.useEffect(() => {
+      setIsMounted(true);
+      return () => {
+        setIsMounted(false);
+      };
+    }, []);
+    React2.useEffect(() => {
+      if (!isMounted || disabled) {
+        setTargetElement(null);
+        return;
+      }
+      let target = null;
+      if (typeof to === "string") {
+        target = document.querySelector(to);
+        if (!target) {
+          console.warn(
+            `MountedTeleport: Target element not found for selector "${to}"`
+          );
+          setTargetElement(null);
+          return;
+        }
+      } else if (to instanceof HTMLElement) {
+        target = to;
+      } else {
+        console.warn(
+          "MountedTeleport: Invalid target type. Expected string selector or HTMLElement."
+        );
+        setTargetElement(null);
+        return;
+      }
+      setTargetElement(target);
+    }, [to, isMounted, disabled]);
+    if (!isMounted || disabled || !targetElement) {
+      return null;
+    }
+    return reactDom.createPortal(children, targetElement);
+  };
+  const ReadMore = ({
+    moreStr = "Read more",
+    lessStr = "Read less",
+    link = "#",
+    maxChars = 100,
+    text,
+    className = "",
+    linkClassName = ""
+  }) => {
+    const [isExpanded, setIsExpanded] = React2.useState(false);
+    const formattedText = () => {
+      if (!isExpanded && text.length > maxChars) {
+        return text.substring(0, maxChars).trim() + "...";
+      }
+      return text;
+    };
+    const handleToggle = (event) => {
+      event.preventDefault();
+      setIsExpanded(!isExpanded);
+    };
+    if (!text) {
+      return null;
+    }
+    const shouldShowToggle = text.length > maxChars;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formattedText() }),
+      shouldShowToggle && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        " ",
+        !isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "a",
+          {
+            href: link,
+            onClick: handleToggle,
+            className: linkClassName,
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setIsExpanded(true);
+              }
+            },
+            children: moreStr
+          }
+        ) : lessStr && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "a",
+          {
+            href: link,
+            onClick: handleToggle,
+            className: linkClassName,
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setIsExpanded(false);
+              }
+            },
+            children: lessStr
+          }
+        )
+      ] })
+    ] });
+  };
+  const StickyBottom = ({
+    bottom = 0,
+    zIndex = 1,
+    className = "",
+    children = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Sticky Bottom" })
+  }) => {
+    const elRef = React2.useRef(null);
+    const [isSticky, setIsSticky] = React2.useState(false);
+    const [width, setWidth] = React2.useState("auto");
+    const [height, setHeight] = React2.useState("auto");
+    React2.useEffect(() => {
+      const handleScroll = () => {
+        if (!elRef.current) return;
+        const rect = elRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const shouldStick = rect.bottom <= viewportHeight - bottom;
+        if (shouldStick && !isSticky) {
+          setWidth(rect.width + "px");
+          setHeight(rect.height + "px");
+          setIsSticky(true);
+        } else if (!shouldStick && isSticky) {
+          setIsSticky(false);
+          setWidth("auto");
+        }
+      };
+      const handleResize = () => {
+        if (!isSticky && elRef.current) {
+          const rect = elRef.current.getBoundingClientRect();
+          setHeight(rect.height + "px");
+        }
+      };
+      if (elRef.current) {
+        const rect = elRef.current.getBoundingClientRect();
+        setHeight(rect.height + "px");
+      }
+      window.addEventListener("scroll", handleScroll);
+      window.addEventListener("resize", handleResize);
+      handleScroll();
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [bottom, isSticky]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: elRef,
+        style: {
+          height: isSticky ? height : "auto",
+          zIndex
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className,
+            style: {
+              position: isSticky ? "fixed" : "static",
+              bottom: isSticky ? `${bottom}px` : "auto",
+              width: isSticky ? width : "auto",
+              zIndex
+            },
+            children
+          }
+        )
+      }
+    );
+  };
+  const StickyTop = ({
+    top = 0,
+    zIndex = 1,
+    className = "",
+    children = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Sticky Top" })
+  }) => {
+    const elRef = React2.useRef(null);
+    const [isSticky, setIsSticky] = React2.useState(false);
+    const [width, setWidth] = React2.useState("auto");
+    const [height, setHeight] = React2.useState("auto");
+    React2.useEffect(() => {
+      const handleScroll = () => {
+        if (!elRef.current) return;
+        const rect = elRef.current.getBoundingClientRect();
+        const shouldStick = rect.top <= top;
+        if (shouldStick && !isSticky) {
+          setWidth(rect.width + "px");
+          setHeight(rect.height + "px");
+          setIsSticky(true);
+        } else if (!shouldStick && isSticky) {
+          setIsSticky(false);
+          setWidth("auto");
+        }
+      };
+      const handleResize = () => {
+        if (!isSticky && elRef.current) {
+          const rect = elRef.current.getBoundingClientRect();
+          setHeight(rect.height + "px");
+        }
+      };
+      if (elRef.current) {
+        const rect = elRef.current.getBoundingClientRect();
+        setHeight(rect.height + "px");
+      }
+      window.addEventListener("scroll", handleScroll);
+      window.addEventListener("resize", handleResize);
+      handleScroll();
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [top, isSticky]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: elRef,
+        style: {
+          height: isSticky ? height : "auto",
+          zIndex
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className,
+            style: {
+              position: isSticky ? "fixed" : "static",
+              top: isSticky ? `${top}px` : "auto",
+              width: isSticky ? width : "auto",
+              zIndex
+            },
+            children
+          }
+        )
+      }
+    );
+  };
   exports.AsyncImg = AsyncImg;
   exports.CustomTransition = CustomTransition;
+  exports.MountedTeleport = MountedTeleport;
+  exports.ReadMore = ReadMore;
+  exports.StickyBottom = StickyBottom;
+  exports.StickyTop = StickyTop;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
-}({}, React);
+}({}, React, ReactDOM);

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import * as React from "react";
 import React__default, { useState, useEffect, createContext, useRef, useLayoutEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, Fragment, createElement, forwardRef, Component } from "react";
+import { createPortal } from "react-dom";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production = {};
 /**
@@ -7763,7 +7764,252 @@ const CustomTransition = ({
     }
   );
 };
+const MountedTeleport = ({
+  to,
+  children,
+  disabled = false
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  const [targetElement, setTargetElement] = useState(null);
+  useEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  useEffect(() => {
+    if (!isMounted || disabled) {
+      setTargetElement(null);
+      return;
+    }
+    let target = null;
+    if (typeof to === "string") {
+      target = document.querySelector(to);
+      if (!target) {
+        console.warn(
+          `MountedTeleport: Target element not found for selector "${to}"`
+        );
+        setTargetElement(null);
+        return;
+      }
+    } else if (to instanceof HTMLElement) {
+      target = to;
+    } else {
+      console.warn(
+        "MountedTeleport: Invalid target type. Expected string selector or HTMLElement."
+      );
+      setTargetElement(null);
+      return;
+    }
+    setTargetElement(target);
+  }, [to, isMounted, disabled]);
+  if (!isMounted || disabled || !targetElement) {
+    return null;
+  }
+  return createPortal(children, targetElement);
+};
+const ReadMore = ({
+  moreStr = "Read more",
+  lessStr = "Read less",
+  link = "#",
+  maxChars = 100,
+  text,
+  className = "",
+  linkClassName = ""
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const formattedText = () => {
+    if (!isExpanded && text.length > maxChars) {
+      return text.substring(0, maxChars).trim() + "...";
+    }
+    return text;
+  };
+  const handleToggle = (event) => {
+    event.preventDefault();
+    setIsExpanded(!isExpanded);
+  };
+  if (!text) {
+    return null;
+  }
+  const shouldShowToggle = text.length > maxChars;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formattedText() }),
+    shouldShowToggle && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      " ",
+      !isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "a",
+        {
+          href: link,
+          onClick: handleToggle,
+          className: linkClassName,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setIsExpanded(true);
+            }
+          },
+          children: moreStr
+        }
+      ) : lessStr && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "a",
+        {
+          href: link,
+          onClick: handleToggle,
+          className: linkClassName,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setIsExpanded(false);
+            }
+          },
+          children: lessStr
+        }
+      )
+    ] })
+  ] });
+};
+const StickyBottom = ({
+  bottom = 0,
+  zIndex = 1,
+  className = "",
+  children = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Sticky Bottom" })
+}) => {
+  const elRef = useRef(null);
+  const [isSticky, setIsSticky] = useState(false);
+  const [width, setWidth] = useState("auto");
+  const [height, setHeight] = useState("auto");
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!elRef.current) return;
+      const rect = elRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const shouldStick = rect.bottom <= viewportHeight - bottom;
+      if (shouldStick && !isSticky) {
+        setWidth(rect.width + "px");
+        setHeight(rect.height + "px");
+        setIsSticky(true);
+      } else if (!shouldStick && isSticky) {
+        setIsSticky(false);
+        setWidth("auto");
+      }
+    };
+    const handleResize = () => {
+      if (!isSticky && elRef.current) {
+        const rect = elRef.current.getBoundingClientRect();
+        setHeight(rect.height + "px");
+      }
+    };
+    if (elRef.current) {
+      const rect = elRef.current.getBoundingClientRect();
+      setHeight(rect.height + "px");
+    }
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleResize);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [bottom, isSticky]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: elRef,
+      style: {
+        height: isSticky ? height : "auto",
+        zIndex
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className,
+          style: {
+            position: isSticky ? "fixed" : "static",
+            bottom: isSticky ? `${bottom}px` : "auto",
+            width: isSticky ? width : "auto",
+            zIndex
+          },
+          children
+        }
+      )
+    }
+  );
+};
+const StickyTop = ({
+  top = 0,
+  zIndex = 1,
+  className = "",
+  children = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Sticky Top" })
+}) => {
+  const elRef = useRef(null);
+  const [isSticky, setIsSticky] = useState(false);
+  const [width, setWidth] = useState("auto");
+  const [height, setHeight] = useState("auto");
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!elRef.current) return;
+      const rect = elRef.current.getBoundingClientRect();
+      const shouldStick = rect.top <= top;
+      if (shouldStick && !isSticky) {
+        setWidth(rect.width + "px");
+        setHeight(rect.height + "px");
+        setIsSticky(true);
+      } else if (!shouldStick && isSticky) {
+        setIsSticky(false);
+        setWidth("auto");
+      }
+    };
+    const handleResize = () => {
+      if (!isSticky && elRef.current) {
+        const rect = elRef.current.getBoundingClientRect();
+        setHeight(rect.height + "px");
+      }
+    };
+    if (elRef.current) {
+      const rect = elRef.current.getBoundingClientRect();
+      setHeight(rect.height + "px");
+    }
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleResize);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [top, isSticky]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: elRef,
+      style: {
+        height: isSticky ? height : "auto",
+        zIndex
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className,
+          style: {
+            position: isSticky ? "fixed" : "static",
+            top: isSticky ? `${top}px` : "auto",
+            width: isSticky ? width : "auto",
+            zIndex
+          },
+          children
+        }
+      )
+    }
+  );
+};
 export {
   AsyncImg,
-  CustomTransition
+  CustomTransition,
+  MountedTeleport,
+  ReadMore,
+  StickyBottom,
+  StickyTop
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/react",
   "description": "Creopse React Toolkit",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "dev-types": "tsc  --noEmit -p tsconfig.app.json --watch",
     "build": "pnpm build-lib && pnpm build-types",
     "build-lib": "vite build",
-    "build-types": "rm -f *.tsbuildinfo && tsc --emitDeclarationOnly --declaration -p tsconfig.app.json",
+    "build-types": "rm -f *.tsbuildinfo && rm -rf types && tsc --emitDeclarationOnly --declaration -p tsconfig.app.json",
     "lint": "eslint .",
     "preview": "vite preview"
   },

package/types/components/widgets/AsyncImg/AsyncImg.d.ts

@@ -1,5 +1,5 @@
 import React, { type CSSProperties } from 'react';
-export interface AsyncImgProps {
+export interface Props {
     load: () => Promise<string>;
     alt?: string;
     width?: string | number;
@@ -8,4 +8,5 @@ export interface AsyncImgProps {
     loading?: 'lazy' | 'eager';
     style?: CSSProperties;
 }
-export declare const AsyncImg: React.FC<AsyncImgProps>;
+declare const AsyncImg: React.FC<Props>;
+export default AsyncImg;

package/types/components/widgets/AsyncImg/index.d.ts

@@ -1 +1 @@
-export { AsyncImg, type AsyncImgProps } from './AsyncImg';
+export { default as AsyncImg, type Props as AsyncImgProps } from './AsyncImg';

package/types/components/widgets/CustomTransition/CustomTransition.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 type Animation = 'fade' | 'slide-fade' | 'bounce';
 type Mode = 'wait' | 'sync' | 'popLayout' | undefined;
-export interface CustomTransitionProps {
+export interface Props {
     name?: Animation;
     mode?: Mode;
     appear?: boolean;
     children?: React.ReactNode;
     contentKey?: string | number;
 }
-export declare const CustomTransition: React.FC<CustomTransitionProps>;
-export {};
+declare const CustomTransition: React.FC<Props>;
+export default CustomTransition;

package/types/components/widgets/CustomTransition/index.d.ts

@@ -1 +1 @@
-export { CustomTransition, type CustomTransitionProps, } from './CustomTransition';
+export { default as CustomTransition, type Props as CustomTransitionProps, } from './CustomTransition';

package/types/components/widgets/MountedTeleport/MountedTeleport.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface Props {
+    to: string | HTMLElement;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+declare const MountedTeleport: React.FC<Props>;
+export default MountedTeleport;

package/types/components/widgets/MountedTeleport/index.d.ts

@@ -0,0 +1 @@
+export { default as MountedTeleport, type Props as MountedTeleportProps, } from './MountedTeleport';

package/types/components/widgets/ReadMore/ReadMore.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Props {
+    moreStr?: string;
+    lessStr?: string;
+    text: string;
+    link?: string;
+    maxChars?: number;
+    className?: string;
+    linkClassName?: string;
+}
+declare const ReadMore: React.FC<Props>;
+export default ReadMore;

package/types/components/widgets/ReadMore/index.d.ts

@@ -0,0 +1 @@
+export { default as ReadMore, type Props as ReadMoreProps } from './ReadMore';

package/types/components/widgets/StickyBottom/StickyBottom.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface Props {
+    bottom?: number;
+    zIndex?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const StickyBottom: React.FC<Props>;
+export default StickyBottom;

package/types/components/widgets/StickyBottom/index.d.ts

@@ -0,0 +1 @@
+export { default as StickyBottom, type Props as StickyBottomProps, } from './StickyBottom';

package/types/components/widgets/StickyTop/StickyTop.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface Props {
+    top?: number;
+    zIndex?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const StickyTop: React.FC<Props>;
+export default StickyTop;

package/types/components/widgets/StickyTop/index.d.ts

@@ -0,0 +1 @@
+export { default as StickyTop, type Props as StickyTopProps } from './StickyTop';

package/types/index.d.ts

@@ -1,2 +1,6 @@
 export { AsyncImg, type AsyncImgProps } from './components/widgets/AsyncImg';
 export { CustomTransition, type CustomTransitionProps, } from './components/widgets/CustomTransition';
+export { MountedTeleport, type MountedTeleportProps, } from './components/widgets/MountedTeleport';
+export { ReadMore, type ReadMoreProps } from './components/widgets/ReadMore';
+export { StickyBottom, type StickyBottomProps, } from './components/widgets/StickyBottom';
+export { StickyTop, type StickyTopProps } from './components/widgets/StickyTop';