@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/animated/Animated.js

@@ -1,74 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import { create } from "../../helpers/bem.js";
-import { isNumber } from "../../helpers/validations.js";
-import styles from "./Animated.module.scss.js";
-const bem = create(styles, "Animated");
-const Animated = /* @__PURE__ */ __name(({
-  className,
-  disabled = false,
-  delay = 0,
-  speed = "normal",
-  animation = "fade-in",
-  children,
-  intersectionObserverOptions = {},
-  onAnimate,
-  ...props
-}) => {
-  const [isVisible, setVisible] = useState(false);
-  const domRef = useRef(null);
-  const timeoutRef = useRef(null);
-  const observerRef = useRef(null);
-  useEffect(() => {
-    if (!domRef.current) return;
-    const handleIntersection = /* @__PURE__ */ __name((entries) => {
-      const [entry] = entries;
-      const isIntersecting = (entry == null ? void 0 : entry.isIntersecting) ?? false;
-      if (isIntersecting && !isVisible) {
-        if (timeoutRef.current !== null && isNumber(timeoutRef.current)) {
-          clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = window.setTimeout(() => {
-          setVisible(true);
-          onAnimate == null ? void 0 : onAnimate(true);
-        }, delay);
-      }
-      if (!isIntersecting && isVisible) {
-        setVisible(false);
-      }
-    }, "handleIntersection");
-    observerRef.current = new IntersectionObserver(handleIntersection, {
-      threshold: 0.1,
-      ...intersectionObserverOptions
-    });
-    observerRef.current.observe(domRef.current);
-    return () => {
-      if (observerRef.current) observerRef.current.disconnect();
-      if (timeoutRef.current !== null && isNumber(timeoutRef.current))
-        clearTimeout(timeoutRef.current);
-    };
-  }, [onAnimate, delay, intersectionObserverOptions, isVisible]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: domRef,
-      className: bem(
-        void 0,
-        {
-          "is-visible": !!isVisible,
-          "is-disabled": !!disabled,
-          [`has-${speed}-speed`]: !!speed,
-          [`animate-${animation}`]: !!animation
-        },
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}, "Animated");
+import { createIsland } from "../../helpers/createIsland.js";
+import AnimatedServer from "./Animated.server.js";
+const Animated = createIsland({
+  name: "Animated",
+  Server: AnimatedServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Animated.lazy.js"), "loadLazy"),
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
 export {
   Animated
 };

package/dist/components/animated/Animated.lazy.js

@@ -0,0 +1,17 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import AnimatedClient from "./Animated.client.js";
+import AnimatedServer from "./Animated.server.js";
+const Animated_lazy = createLazyWrapper({
+  name: "Animated",
+  Client: AnimatedClient,
+  Server: AnimatedServer,
+  // defer hydration until it scrolls into view:
+  hydrateOnVisible: true,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Animated_lazy as default
+};

package/dist/components/animated/Animated.server.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { AnimatedView } from "./Animated.view.js";
+function AnimatedServer({ ...rest }) {
+  rest == null ? true : delete rest.onAnimate;
+  return /* @__PURE__ */ jsx(AnimatedView, { ...rest, isVisible: false });
+}
+__name(AnimatedServer, "AnimatedServer");
+export {
+  AnimatedServer as default
+};

package/dist/components/animated/Animated.view.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Animated.module.scss.js";
+const bem = create(styles, "Animated");
+const AnimatedView = /* @__PURE__ */ __name(({
+  className,
+  disabled = false,
+  speed = "normal",
+  animation = "fade-in",
+  isVisible,
+  children,
+  ...domRest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: bem(
+      void 0,
+      {
+        "is-visible": isVisible,
+        "is-disabled": disabled,
+        [`has-${speed}-speed`]: !!speed,
+        [`animate-${animation}`]: !!animation
+      },
+      className
+    ),
+    ...domRest,
+    children
+  }
+), "AnimatedView");
+AnimatedView.displayName = "AnimatedView";
+export {
+  AnimatedView
+};

package/dist/components/animatedText/AnimatedText.client.js

@@ -0,0 +1,41 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AnimatedTextView } from "./AnimatedText.view.js";
+function AnimatedTextClient({
+  speed = 30,
+  delay = 0,
+  disabled,
+  children,
+  ...rest
+}) {
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    if (Boolean(disabled)) return;
+    const t0 = window.setTimeout(() => {
+      const id = window.setInterval(() => {
+        setIndex((i) => {
+          if (i + 1 >= children.length) {
+            clearInterval(id);
+            return children.length;
+          }
+          return i + 1;
+        });
+      }, speed);
+    }, delay);
+    return () => clearTimeout(t0);
+  }, [children.length, delay, disabled, speed]);
+  return /* @__PURE__ */ jsx(
+    AnimatedTextView,
+    {
+      ...rest,
+      text: children.slice(0, index)
+    }
+  );
+}
+__name(AnimatedTextClient, "AnimatedTextClient");
+export {
+  AnimatedTextClient as default
+};

package/dist/components/animatedText/AnimatedText.js

@@ -1,40 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-const AnimatedText = /* @__PURE__ */ __name(({
-  speed = 30,
-  delay = 0,
-  disabled,
-  children,
-  ...props
-}) => {
-  const domRef = useRef(null);
-  const [startTyping, setStartTyping] = useState(false);
-  const [currentText, setCurrentText] = useState("");
-  const [currentIndex, setCurrentIndex] = useState(0);
-  useEffect(() => {
-    if (Boolean(disabled)) return;
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        const delayTimeoutId = setTimeout(() => {
-          setStartTyping(entry.isIntersecting);
-        }, delay);
-        return () => clearTimeout(delayTimeoutId);
-      });
-    });
-    observer.observe(domRef.current);
-  }, [delay, disabled]);
-  useEffect(() => {
-    if (!startTyping || currentIndex >= children.length) return;
-    const typingTimeoutId = setTimeout(() => {
-      setCurrentText((prevText) => prevText + children[currentIndex]);
-      setCurrentIndex((prevIndex) => prevIndex + 1);
-    }, speed);
-    return () => clearTimeout(typingTimeoutId);
-  }, [startTyping, currentIndex, children, speed]);
-  return /* @__PURE__ */ jsx("span", { ...props, ref: domRef, children: currentText });
-}, "AnimatedText");
+import { createIsland } from "../../helpers/createIsland.js";
+import AnimatedTextServer from "./AnimatedText.server.js";
+const AnimatedText = createIsland({
+  name: "AnimatedText",
+  Server: AnimatedTextServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./AnimatedText.lazy.js"), "loadLazy"),
+  isInteractive: /* @__PURE__ */ __name((p) => !Boolean(p.disabled), "isInteractive")
+});
 export {
   AnimatedText
 };

package/dist/components/animatedText/AnimatedText.lazy.js

@@ -0,0 +1,17 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import AnimatedTextClient from "./AnimatedText.client.js";
+import AnimatedTextServer from "./AnimatedText.server.js";
+const AnimatedText_lazy = createLazyWrapper({
+  name: "AnimatedText",
+  Client: AnimatedTextClient,
+  Server: AnimatedTextServer,
+  hydrateOnVisible: true,
+  // wait until it scrolls into view
+  isInteractive: /* @__PURE__ */ __name((p) => !Boolean(p.disabled), "isInteractive")
+});
+export {
+  AnimatedText_lazy as default
+};

package/dist/components/animatedText/AnimatedText.server.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { AnimatedTextView } from "./AnimatedText.view.js";
+function AnimatedTextServer(props) {
+  const { children: _ignored, ...rest } = props;
+  return /* @__PURE__ */ jsx(AnimatedTextView, { ...rest, text: "" });
+}
+__name(AnimatedTextServer, "AnimatedTextServer");
+export {
+  AnimatedTextServer as default
+};

package/dist/components/animatedText/AnimatedText.view.js

@@ -0,0 +1,8 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+const AnimatedTextView = /* @__PURE__ */ __name(({ text, ...spanRest }) => /* @__PURE__ */ jsx("span", { ...spanRest, children: text }), "AnimatedTextView");
+AnimatedTextView.displayName = "AnimatedTextView";
+export {
+  AnimatedTextView
+};

package/dist/components/avatar/Avatar.client.js

@@ -0,0 +1,12 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { AvatarView } from "./Avatar.view.js";
+function AvatarClient(props) {
+  return /* @__PURE__ */ jsx(AvatarView, { ...props });
+}
+__name(AvatarClient, "AvatarClient");
+export {
+  AvatarClient as default
+};

package/dist/components/avatar/Avatar.js

@@ -1,86 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import styles from "./Avatar.module.scss.js";
-import { Image } from "../image/Image.js";
-import { Icon, getIconSize } from "../icon/Icon.js";
-import { Link } from "../link/Link.js";
-const bem = create(styles, "Avatar");
-const Avatar = /* @__PURE__ */ __name(({
-  className,
-  variant = "primary",
-  size = "sm",
-  image,
-  redirect,
-  ...props
-}) => {
-  const variantModifier = useMemo(
-    () => ({
-      [variant]: !!variant
-    }),
-    [variant]
-  );
-  const sizeModifier = useMemo(
-    () => ({
-      [`has-size-${size}`]: !!size
-    }),
-    [size]
-  );
-  const renderAvatar = useCallback(
-    () => /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...props,
-        tabIndex: -1,
-        className: bem(
-          void 0,
-          {
-            ...variantModifier,
-            ...sizeModifier
-          },
-          className
-        ),
-        children: image ? /* @__PURE__ */ jsx(
-          Image,
-          {
-            ...image,
-            className: bem("image", void 0, image.className),
-            tabIndex: 0
-          }
-        ) : /* @__PURE__ */ jsx(
-          Icon,
-          {
-            className: bem("icon", variantModifier),
-            name: "UserIcon",
-            size: getIconSize(size) * 2,
-            color: !["inherit", "white"].includes(variant) ? "white" : void 0
-          }
-        )
-      }
-    ),
-    [sizeModifier, variantModifier, className, image, variant, size, props]
-  );
-  if (redirect) {
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        ...redirect,
-        className: bem(
-          "link",
-          {
-            ...variantModifier,
-            ...sizeModifier
-          },
-          redirect.className
-        ),
-        children: renderAvatar()
-      }
-    );
-  }
-  return renderAvatar();
-}, "Avatar");
+import { createIsland } from "../../helpers/createIsland.js";
+import AvatarServer from "./Avatar.server.js";
+const Avatar = createIsland({
+  name: "Avatar",
+  Server: AvatarServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Avatar.lazy.js"), "loadLazy")
+});
 export {
   Avatar
 };

package/dist/components/avatar/Avatar.lazy.js

@@ -0,0 +1,12 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import AvatarClient from "./Avatar.client.js";
+import AvatarServer from "./Avatar.server.js";
+const Avatar_lazy = createLazyWrapper({
+  name: "Avatar",
+  Client: AvatarClient,
+  Server: AvatarServer
+});
+export {
+  Avatar_lazy as default
+};

package/dist/components/avatar/Avatar.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { AvatarView } from "./Avatar.view.js";
+function AvatarServer(props) {
+  return /* @__PURE__ */ jsx(AvatarView, { ...props });
+}
+__name(AvatarServer, "AvatarServer");
+export {
+  AvatarServer as default
+};

package/dist/components/avatar/Avatar.view.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Avatar.module.scss.js";
+import { Image } from "../image/Image.js";
+import { Icon, getIconSize } from "../icon/Icon.js";
+import { Link } from "../link/Link.js";
+const bem = create(styles, "Avatar");
+function AvatarView({
+  className,
+  variant = "primary",
+  size = "sm",
+  image,
+  redirect,
+  ...rest
+}) {
+  const rootClass = bem(
+    void 0,
+    { [variant]: true, [`has-size-${size}`]: true },
+    className
+  );
+  const inner = /* @__PURE__ */ jsx("div", { ...rest, className: rootClass, tabIndex: -1, children: image ? /* @__PURE__ */ jsx(
+    Image,
+    {
+      ...image,
+      className: bem("image", void 0, image.className),
+      tabIndex: 0
+    }
+  ) : /* @__PURE__ */ jsx(
+    Icon,
+    {
+      className: bem("icon", { [variant]: true }),
+      name: "UserIcon",
+      size: getIconSize(size) * 2,
+      color: !["inherit", "white"].includes(variant) ? "white" : void 0
+    }
+  ) });
+  return redirect ? /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...redirect,
+      className: bem(
+        "link",
+        { [variant]: true, [`has-size-${size}`]: true },
+        redirect.className
+      ),
+      children: inner
+    }
+  ) : inner;
+}
+__name(AvatarView, "AvatarView");
+export {
+  AvatarView
+};

package/dist/components/base-link/BaseLink.client.js

@@ -0,0 +1,43 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { isNull } from "../../helpers/validations.js";
+function BaseLinkClient({
+  href,
+  children,
+  disabled,
+  linkComponent: LinkComponent,
+  style,
+  target,
+  rel,
+  ...rest
+}) {
+  const DISABLE = { pointerEvents: "none" };
+  const isAbsolute = href == null ? void 0 : href.startsWith("http");
+  const isDownload = rest.download !== void 0;
+  const isAppUrl = /^\w+:/.test(href);
+  const computedTarget = target ?? (isAbsolute ? "_blank" : void 0);
+  const computedRel = rel ?? (isAbsolute ? "noopener noreferrer" : void 0);
+  const tabIndex = !isNull(disabled) ? -1 : void 0;
+  const linkStyle = !isNull(disabled) ? { ...DISABLE, ...style } : style;
+  if (isAbsolute || isDownload || isAppUrl || LinkComponent === void 0) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        href,
+        rel: computedRel,
+        style: linkStyle,
+        tabIndex,
+        target: computedTarget,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(LinkComponent, { ...rest, href, style: linkStyle, tabIndex, children });
+}
+__name(BaseLinkClient, "BaseLinkClient");
+export {
+  BaseLinkClient as default
+};

package/dist/components/base-link/BaseLink.js

@@ -1,42 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { isNull } from "../../helpers/validations.js";
-const BaseLink = /* @__PURE__ */ __name(({
-  href,
-  children,
-  disabled,
-  linkComponent: LinkComponent,
-  style,
-  target,
-  rel,
-  ...rest
-}) => {
-  const DISABLE_STYLES = { pointerEvents: "none" };
-  const isAbsolute = href == null ? void 0 : href.startsWith("http");
-  const isDownload = rest.download !== void 0;
-  const isAppUrl = /^\w+:/.test(href);
-  const computedTarget = target ?? (isAbsolute ? "_blank" : void 0);
-  const computedRel = rel ?? (isAbsolute ? "noopener noreferrer" : void 0);
-  const tabIndex = !isNull(disabled) ? -1 : void 0;
-  const linkStyle = !isNull(disabled) ? { ...DISABLE_STYLES, ...style } : style;
-  if (isAbsolute || isDownload || isAppUrl || LinkComponent === void 0) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ...rest,
-        href,
-        rel: computedRel,
-        style: linkStyle,
-        tabIndex,
-        target: computedTarget,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(LinkComponent, { ...rest, href, style: linkStyle, tabIndex, children });
-}, "BaseLink");
-BaseLink.displayName = "BaseLink";
+import { createIsland } from "../../helpers/createIsland.js";
+import BaseLinkServer from "./BaseLink.server.js";
+const isInteractive = /* @__PURE__ */ __name((p) => typeof p.linkComponent === "function", "isInteractive");
+const BaseLink = createIsland({
+  name: "BaseLink",
+  Server: BaseLinkServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./BaseLink.lazy.js"), "loadLazy"),
+  isInteractive
+});
 export {
   BaseLink
 };

package/dist/components/base-link/BaseLink.lazy.js

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import BaseLinkClient from "./BaseLink.client.js";
+import BaseLinkServer from "./BaseLink.server.js";
+const BaseLink_lazy = createLazyWrapper({
+  name: "BaseLink",
+  Client: BaseLinkClient,
+  Server: BaseLinkServer,
+  isInteractive: /* @__PURE__ */ __name((p) => typeof p.linkComponent === "function", "isInteractive")
+});
+export {
+  BaseLink_lazy as default
+};

package/dist/components/base-link/BaseLink.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { BaseLinkView } from "./BaseLink.view.js";
+function BaseLinkServer(props) {
+  return /* @__PURE__ */ jsx(BaseLinkView, { ...props });
+}
+__name(BaseLinkServer, "BaseLinkServer");
+export {
+  BaseLinkServer as default
+};

package/dist/components/base-link/BaseLink.view.js

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { isNull } from "../../helpers/validations.js";
+const emailRE = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+function BaseLinkView({
+  href,
+  children,
+  disabled,
+  style,
+  target,
+  rel,
+  ...restProps
+}) {
+  let finalHref = href ?? "#";
+  let kind = "local";
+  if (href) {
+    if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//")) {
+      kind = "url";
+    } else if (emailRE.test(href)) {
+      kind = "email";
+      finalHref = `mailto:${href.toLowerCase()}`;
+    } else {
+      const digits = href.replace(/[^\d]/g, "");
+      if (digits.length >= 6) {
+        kind = "tel";
+        finalHref = `tel:${digits.startsWith("00") ? `+${digits.slice(2)}` : digits.startsWith("0") ? `+${digits.slice(1)}` : `+${digits}`}`;
+      }
+    }
+  }
+  const computedTarget = target ?? (kind === "url" ? "_blank" : void 0);
+  const computedRel = rel ?? (kind === "url" ? "noopener noreferrer" : void 0);
+  const pointerOff = { pointerEvents: "none" };
+  const tabIndex = !isNull(disabled) ? -1 : void 0;
+  const linkStyle = !isNull(disabled) ? { ...pointerOff, ...style } : style;
+  const { linkComponent, ...aProps } = restProps;
+  if (linkComponent) {
+    const LinkTag = linkComponent;
+    return /* @__PURE__ */ jsx(
+      LinkTag,
+      {
+        href: finalHref,
+        rel: computedRel,
+        style: linkStyle,
+        tabIndex,
+        target: computedTarget,
+        ...aProps,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...aProps,
+      download: kind === "url" ? aProps.download : void 0,
+      href: finalHref,
+      rel: computedRel,
+      style: linkStyle,
+      tabIndex,
+      target: computedTarget,
+      children
+    }
+  );
+}
+__name(BaseLinkView, "BaseLinkView");
+export {
+  BaseLinkView
+};