@prokodo/ui 0.0.35 → 0.0.37

package/dist/components/button/Button.client.js

@@ -2,7 +2,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Link } from "../link/Link.js";
+import LinkClient from "../link/Link.client.js";
 import { ButtonView } from "./Button.view.js";
 import { Loading } from "../loading/Loading.js";
 function ButtonClient(props) {
@@ -17,7 +17,7 @@ function ButtonClient(props) {
         ...rest,
         iconProps: finalIconProps,
         isIconOnly: Boolean(isIconOnly),
-        LinkComponent: Link
+        LinkComponent: LinkClient
       }
     )
   ] });

package/dist/components/button/Button.js

@@ -1,21 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { Suspense, lazy } from "react";
+import { createIsland } from "../../helpers/createIsland.js";
 import ButtonServer from "./Button.server.js";
-const preload = /* @__PURE__ */ __name(() => import("./Button.lazy.js"), "preload");
-if (typeof window !== "undefined") void preload();
-const LazyWrapper = typeof window !== "undefined" ? lazy(
-  () => preload().then((m) => ({ default: m.default }))
-  // <- adapter
-) : null;
-function Button({ priority = false, ...props }) {
-  const interactive = !!props.onClick || !!props.onKeyDown || !!props.redirect;
-  if (!interactive) return /* @__PURE__ */ jsx(ButtonServer, { ...props });
-  const Fallback = /* @__PURE__ */ jsx("div", { "data-island": "button", children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
-  return /* @__PURE__ */ jsx(Suspense, { fallback: Fallback, children: LazyWrapper ? /* @__PURE__ */ jsx(LazyWrapper, { ...props, priority }) : Fallback });
-}
-__name(Button, "Button");
+const Button = createIsland({
+  name: "Button",
+  Server: ButtonServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Button.lazy.js"), "loadLazy")
+});
 export {
   Button
 };

package/dist/components/button/Button.lazy.js

@@ -1,24 +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 { useHydrationReady } from "../../hooks/useHydrationReady.js";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
 import ButtonClient from "./Button.client.js";
 import ButtonServer from "./Button.server.js";
-function ButtonWrapper({
-  priority = false,
-  ...props
-}) {
-  const hasInteraction = !!props.onClick || !!props.onKeyDown || !!props.redirect;
-  const [visible, ref] = useHydrationReady({
-    enabled: hasInteraction && !priority
-  });
-  if (hasInteraction && (priority || visible)) {
-    return /* @__PURE__ */ jsx(ButtonClient, { ...props });
-  }
-  return /* @__PURE__ */ jsx("div", { ref, "data-island": "button", children: /* @__PURE__ */ jsx(ButtonServer, { ...props }) });
-}
-__name(ButtonWrapper, "ButtonWrapper");
+const Button_lazy = createLazyWrapper({
+  name: "Button",
+  Client: ButtonClient,
+  Server: ButtonServer
+});
 export {
-  ButtonWrapper as default
+  Button_lazy as default
 };

package/dist/components/button/Button.server.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-import { Link } from "../link/Link.js";
+import LinkServer from "../link/Link.server.js";
 import { ButtonView } from "./Button.view.js";
 function ButtonServer(p) {
   var _a;
@@ -11,7 +11,7 @@ function ButtonServer(p) {
     {
       ...p,
       isIconOnly: Boolean(isIconOnly),
-      LinkComponent: Link
+      LinkComponent: LinkServer
     }
   );
 }

package/dist/components/link/Link.client.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { LinkView } from "./Link.view.js";
+const LinkClient = memo((props) => {
+  const { href, onClick } = props;
+  const linkTag = onClick && !href ? "span" : "a";
+  const hasHandlers = Boolean(onClick) || Boolean(props.onKeyDown);
+  return /* @__PURE__ */ jsx(
+    LinkView,
+    {
+      ...props,
+      hasHandlers,
+      LinkTag: linkTag
+    }
+  );
+});
+LinkClient.displayName = "LinkClient";
+export {
+  LinkClient as default
+};

package/dist/components/link/Link.js

@@ -1,63 +1,14 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { create } from "../../helpers/bem.js";
-import { isString } from "../../helpers/validations.js";
-import styles from "./Link.module.scss.js";
-import { BaseLink } from "../base-link/BaseLink.js";
-const bem = create(styles, "Link");
-const Link = memo(
-  ({
-    variant = "inherit",
-    href,
-    children,
-    className,
-    style,
-    target,
-    itemProp,
-    hasBackground,
-    onMouseEnter,
-    onClick,
-    onKeyDown,
-    ariaLabel
-  }) => {
-    const linkModifier = {
-      "has-no-background": hasBackground === false,
-      [`has-no-background--${variant}`]: hasBackground === false
-    };
-    const defaultProps = {
-      className: bem(void 0, linkModifier, className),
-      style,
-      onMouseEnter
-    };
-    if (onClick && !isString(href)) {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-label": ariaLabel,
-          role: "button",
-          tabIndex: 0,
-          onClick,
-          onKeyDown,
-          ...defaultProps,
-          children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      BaseLink,
-      {
-        ...defaultProps,
-        "aria-label": ariaLabel,
-        href,
-        itemProp,
-        target: target ?? void 0,
-        onClick,
-        children
-      }
-    );
-  }
-);
-Link.displayName = "Link";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import LinkServer from "./Link.server.js";
+const Link = createIsland({
+  name: "Link",
+  Server: LinkServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Link.lazy.js"), "loadLazy"),
+  // optional: custom predicate (e.g. always interactive if target="_blank")
+  isInteractive: /* @__PURE__ */ __name((p) => typeof p.onClick === "function" || typeof p.onKeyDown === "function" || p.target === "_blank", "isInteractive")
+});
 export {
   Link
 };

package/dist/components/link/Link.lazy.js

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

package/dist/components/link/Link.server.js

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { LinkView } from "./Link.view.js";
+function LinkServer(props) {
+  const hasHandlers = false;
+  const linkTag = props.onClick && !props.href ? "span" : "a";
+  return /* @__PURE__ */ jsx(
+    LinkView,
+    {
+      ...props,
+      hasHandlers,
+      LinkTag: linkTag
+    }
+  );
+}
+__name(LinkServer, "LinkServer");
+export {
+  LinkServer as default
+};

package/dist/components/link/Link.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 "./Link.module.scss.js";
+import { BaseLink } from "../base-link/BaseLink.js";
+const bem = create(styles, "Link");
+function LinkView({
+  variant = "inherit",
+  href,
+  children,
+  className,
+  style,
+  target,
+  itemProp,
+  hasBackground,
+  ariaLabel,
+  LinkTag,
+  hasHandlers,
+  ...rest
+}) {
+  const linkMod = {
+    "has-no-background": hasBackground === false,
+    [`has-no-background--${variant}`]: hasBackground === false
+  };
+  const common = {
+    className: bem(void 0, linkMod, className),
+    style,
+    "aria-label": ariaLabel,
+    itemProp
+  };
+  return LinkTag === "span" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...common,
+      role: "button",
+      tabIndex: 0,
+      ...rest,
+      children
+    }
+  ) : /* @__PURE__ */ jsx(
+    BaseLink,
+    {
+      ...common,
+      href,
+      target: target ?? void 0,
+      ...hasHandlers ? { onClick: rest == null ? void 0 : rest.onClick } : null,
+      children
+    }
+  );
+}
+__name(LinkView, "LinkView");
+export {
+  LinkView
+};

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.35";
+const PROKODO_UI_VERSION = "0.0.37";
 export {
   PROKODO_UI_VERSION
 };

package/dist/helpers/createIsland.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
+function createIsland({
+  name,
+  Server,
+  loadLazy,
+  isInteractive: customInteractive
+}) {
+  if (typeof window !== "undefined") void loadLazy();
+  const LazyWrapper = typeof window !== "undefined" ? lazy(() => loadLazy().then((m) => ({ default: m.default }))) : null;
+  const Island = /* @__PURE__ */ __name(({
+    priority = false,
+    ...raw
+  }) => {
+    const props = raw;
+    const autoInteractive = Object.entries(props).some(
+      ([key, val]) => key.startsWith("on") && typeof val === "function"
+    ) || props.redirect !== void 0;
+    const interactive = customInteractive ? customInteractive(props) || autoInteractive : autoInteractive;
+    if (!interactive) return /* @__PURE__ */ jsx(Server, { ...props });
+    const fallback = /* @__PURE__ */ jsx("div", { "data-island": name.toLowerCase(), children: /* @__PURE__ */ jsx(Server, { ...props }) });
+    return /* @__PURE__ */ jsx(Suspense, { fallback, children: LazyWrapper ? /* @__PURE__ */ jsx(LazyWrapper, { ...props, priority }) : fallback });
+  }, "Island");
+  Island.displayName = `${name}Island`;
+  return Island;
+}
+__name(createIsland, "createIsland");
+export {
+  createIsland
+};

package/dist/helpers/createLazyWrapper.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useHydrationReady } from "../hooks/useHydrationReady.js";
+function createLazyWrapper({
+  name,
+  Client,
+  Server
+}) {
+  const LazyWrapper = /* @__PURE__ */ __name(({
+    priority = false,
+    ...raw
+  }) => {
+    const props = raw;
+    const hasInteraction = typeof props.onClick === "function" || typeof props.onKeyDown === "function" || props.redirect !== void 0;
+    const [visible, ref] = useHydrationReady({
+      enabled: hasInteraction && !priority
+    });
+    if (hasInteraction && (priority || visible)) {
+      return /* @__PURE__ */ jsx(Client, { ...raw });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, "data-island": name.toLowerCase(), children: /* @__PURE__ */ jsx(Server, { ...raw }) });
+  }, "LazyWrapper");
+  LazyWrapper.displayName = `${name}Lazy`;
+  return LazyWrapper;
+}
+__name(createLazyWrapper, "createLazyWrapper");
+export {
+  createLazyWrapper
+};