@prokodo/ui 0.0.37 → 0.0.39

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
+import BaseLinkServer from "../base-link/BaseLink.server.js";
 import { LinkView } from "./Link.view.js";
 const LinkClient = memo((props) => {
   const { href, onClick } = props;
@@ -10,6 +11,7 @@ const LinkClient = memo((props) => {
     LinkView,
     {
       ...props,
+      BaseLinkComponent: BaseLinkServer,
       hasHandlers,
       LinkTag: linkTag
     }

package/dist/components/link/Link.js

@@ -7,7 +7,7 @@ const Link = createIsland({
   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")
+  isInteractive: /* @__PURE__ */ __name((p) => typeof p.linkComponent === "function", "isInteractive")
 });
 export {
   Link

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

@@ -1,11 +1,14 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 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
+  Server: LinkServer,
+  isInteractive: /* @__PURE__ */ __name((p) => typeof p.linkComponent === "function", "isInteractive")
 });
 export {
   Link_lazy as default

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

@@ -1,6 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
+import BaseLinkServer from "../base-link/BaseLink.server.js";
 import { LinkView } from "./Link.view.js";
 function LinkServer(props) {
   const hasHandlers = false;
@@ -9,6 +10,7 @@ function LinkServer(props) {
     LinkView,
     {
       ...props,
+      BaseLinkComponent: BaseLinkServer,
       hasHandlers,
       LinkTag: linkTag
     }

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

@@ -3,7 +3,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 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",
@@ -17,6 +16,9 @@ function LinkView({
   ariaLabel,
   LinkTag,
   hasHandlers,
+  onClick,
+  BaseLinkComponent,
+  linkComponent,
   ...rest
 }) {
   const linkMod = {
@@ -29,22 +31,33 @@ function LinkView({
     "aria-label": ariaLabel,
     itemProp
   };
-  return LinkTag === "span" ? /* @__PURE__ */ jsx(
-    "span",
+  if (LinkTag === "span") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...common,
+        role: "button",
+        tabIndex: 0,
+        onClick: hasHandlers ? onClick : void 0,
+        onKeyDown: hasHandlers ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            onClick == null ? void 0 : onClick(e);
+          }
+        } : void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    BaseLinkComponent,
     {
       ...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,
+      linkComponent,
+      target,
+      ...hasHandlers ? { onClick } : null,
       children
     }
   );

package/dist/components/list/List.js

@@ -1,187 +1,143 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useCallback, Fragment } from "react";
+import { isValidElement } from "react";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./List.module.scss.js";
 import { Card } from "../card/Card.js";
-import { Link } from "../link/Link.js";
 import { Icon } from "../icon/Icon.js";
+import { Link } from "../link/Link.js";
 const bem = create(styles, "List");
-const List = memo(
-  ({
-    type,
-    variant = "inherit",
-    className,
-    options = {},
-    items,
-    classNameDesc,
-    ...props
-  }) => {
-    const modifier = useMemo(
-      () => ({
-        [`${type}`]: !!type
-      }),
-      [type]
-    );
-    const renderTitle = useCallback(
-      (title, item) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: bem("item__title", {
-            "is-clickable": !!(item == null ? void 0 : item.onClick),
-            ...modifier
-          }),
-          children: title
-        }
-      ),
-      [modifier]
-    );
-    const renderLink = useCallback(
-      (props2, children) => /* @__PURE__ */ jsx(
-        Link,
-        {
-          className: bem("item__link", void 0, props2 == null ? void 0 : props2.className),
-          variant,
-          ...props2,
-          children
-        }
-      ),
-      [variant]
-    );
-    const renderIcon = useCallback(
-      (name) => {
-        if (!name) return null;
-        return /* @__PURE__ */ jsx("div", { className: bem("item__icon__wrapper"), children: /* @__PURE__ */ jsx(Icon, { color: variant, name, ...options == null ? void 0 : options.icon }) });
-      },
-      [variant, options == null ? void 0 : options.icon]
-    );
-    const renderDesc = useCallback(
-      (desc) => isString(desc) && /* @__PURE__ */ jsx("p", { className: bem("item__desc", void 0, classNameDesc), children: desc }),
-      [classNameDesc]
-    );
-    const renderCardItem = useCallback(
-      (item) => {
+function List({
+  type,
+  variant = "inherit",
+  className,
+  options = {},
+  items = [],
+  classNameDesc,
+  ...props
+}) {
+  const modifier = {};
+  if (type) {
+    modifier[type] = true;
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-live": "polite",
+      "aria-relevant": "additions text",
+      ...props,
+      className: bem(void 0, void 0, className),
+      children: items.map((item) => {
         var _a;
-        const icon = item == null ? void 0 : item.icon;
-        return /* @__PURE__ */ jsx(
-          Card,
-          {
-            variant: "white",
-            ...item,
-            className: bem("item__card", void 0, item == null ? void 0 : item.className),
-            contentClassName: bem(
-              "item__card__content",
-              void 0,
-              item == null ? void 0 : item.contentClassName
-            ),
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: bem("item__inner", void 0, item == null ? void 0 : item.innerClassName),
-                children: [
-                  icon && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: bem(
-                        "item__icon",
-                        void 0,
-                        (_a = item == null ? void 0 : item.iconProps) == null ? void 0 : _a.className
-                      ),
-                      children: /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          ...item == null ? void 0 : item.iconProps,
-                          className: bem("item__icon__svg"),
-                          name: icon,
-                          size: "sm"
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: bem("item__content"), children: [
-                    renderTitle(item.title),
-                    renderDesc(item == null ? void 0 : item.desc)
-                  ] })
-                ]
+        const { title, desc, icon, redirect, onClick, variant: itemVariant, className: itemClassName } = item;
+        const isClickable = Boolean(onClick || redirect);
+        const liHandlers = {};
+        if (isClickable) {
+          liHandlers.role = "button";
+          liHandlers.tabIndex = 0;
+          if (type === "default" && onClick) {
+            liHandlers.onClick = () => void onClick(item);
+            liHandlers.onKeyDown = (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(item);
               }
-            )
+            };
           }
+        }
+        const liClass = bem(
+          "item",
+          {
+            "is-clickable": isClickable,
+            [`is-clickable--${itemVariant ?? variant}`]: isClickable,
+            ...modifier
+          },
+          itemClassName
         );
-      },
-      [renderTitle, renderDesc]
-    );
-    const renderItem = useCallback(
-      (item) => {
-        switch (type) {
-          case "card":
-            return renderCardItem(item);
-          default:
-            if ((item == null ? void 0 : item.redirect) !== void 0) {
-              return renderLink(
-                item.redirect,
-                /* @__PURE__ */ jsxs(Fragment, { children: [
-                  renderIcon(item == null ? void 0 : item.icon),
-                  renderTitle(item.title, item),
-                  renderDesc(item == null ? void 0 : item.desc)
+        const TitleSpan = /* @__PURE__ */ __name(() => {
+          const titleClass = bem("item__title", {
+            "is-clickable": isClickable,
+            ...modifier
+          }, "list-title");
+          return /* @__PURE__ */ jsx("span", { className: titleClass, children: title });
+        }, "TitleSpan");
+        const DescParagraph = /* @__PURE__ */ __name(() => {
+          if (!isString(desc) && !isValidElement(desc)) return null;
+          return /* @__PURE__ */ jsx("p", { className: bem("item__desc", { "card": type === "card" }, classNameDesc), children: desc });
+        }, "DescParagraph");
+        const IconWrapper = /* @__PURE__ */ __name(() => {
+          if (!icon) return null;
+          return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon__wrapper"), children: /* @__PURE__ */ jsx(Icon, { color: variant, name: icon, ...options.icon }) });
+        }, "IconWrapper");
+        if (type === "card") {
+          const cardItem = item;
+          return /* @__PURE__ */ jsx("li", { className: liClass, ...liHandlers, children: /* @__PURE__ */ jsx(
+            Card,
+            {
+              priority: true,
+              variant: "white",
+              ...cardItem,
+              className: bem("item__card", void 0, cardItem.className),
+              contentClassName: bem(
+                "item__card__content",
+                void 0,
+                cardItem.contentClassName
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: bem("item__inner", void 0, cardItem.innerClassName), children: [
+                icon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: bem("item__icon", void 0, (_a = cardItem.iconProps) == null ? void 0 : _a.className),
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        ...cardItem.iconProps,
+                        className: bem("item__icon__svg"),
+                        name: icon,
+                        size: "sm"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: bem("item__content"), children: [
+                  /* @__PURE__ */ jsx(TitleSpan, {}),
+                  /* @__PURE__ */ jsx(DescParagraph, {})
                 ] })
-              );
+              ] })
             }
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              renderIcon(item == null ? void 0 : item.icon),
-              renderTitle(item.title, item),
-              renderDesc(item == null ? void 0 : item.desc)
-            ] });
+          ) }, `list-item-${title}`);
         }
-      },
-      [type, renderCardItem, renderIcon, renderLink, renderTitle, renderDesc]
-    );
-    return /* @__PURE__ */ jsx(
-      "ul",
-      {
-        "aria-live": "polite",
-        "aria-relevant": "additions text",
-        ...props,
-        className: bem(void 0, void 0, className),
-        children: items.map((item) => {
-          const isClickable = !!(item == null ? void 0 : item.onClick) || !!(item == null ? void 0 : item.redirect);
-          return (
-            /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-            /* @__PURE__ */ jsx(
-              "li",
-              {
-                "aria-pressed": isClickable ? false : void 0,
-                role: isClickable ? "button" : void 0,
-                tabIndex: isClickable ? 0 : -1,
-                className: bem(
-                  "item",
-                  {
-                    "is-clickable": isClickable,
-                    [`is-clickable--${(item == null ? void 0 : item.variant) ?? variant}`]: isClickable,
-                    ...modifier
-                  },
-                  item == null ? void 0 : item.className
-                ),
-                onClick: type === "default" && isClickable ? () => {
-                  var _a;
-                  return (_a = item.onClick) == null ? void 0 : _a.call(item, item);
-                } : void 0,
-                onKeyDown: isClickable ? (e) => {
-                  var _a;
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    (_a = item == null ? void 0 : item.onClick) == null ? void 0 : _a.call(item, item);
-                  }
-                } : void 0,
-                children: renderItem(item)
-              },
-              `list-item-${item.title}`
-            )
-          );
-        })
-      }
-    );
-  }
-);
+        if (redirect) {
+          const linkProps = redirect;
+          return /* @__PURE__ */ jsx("li", { className: liClass, children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              className: bem("item__link", void 0, linkProps.className),
+              variant,
+              ...linkProps,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: bem("item__link__header"), children: [
+                  /* @__PURE__ */ jsx(IconWrapper, {}),
+                  /* @__PURE__ */ jsx(TitleSpan, {})
+                ] }),
+                /* @__PURE__ */ jsx(DescParagraph, {})
+              ]
+            }
+          ) }, `list-item-${title}`);
+        }
+        return /* @__PURE__ */ jsxs("li", { className: liClass, ...liHandlers, children: [
+          /* @__PURE__ */ jsx(IconWrapper, {}),
+          /* @__PURE__ */ jsx(TitleSpan, {}),
+          /* @__PURE__ */ jsx(DescParagraph, {})
+        ] }, `list-item-${title}`);
+      })
+    }
+  );
+}
+__name(List, "List");
 List.displayName = "List";
 export {
   List

package/dist/components/list/List.module.scss.js

@@ -7,13 +7,16 @@ const styles = {
   "prokodo-List__item__card__content": "prokodo-List__item__card__content",
   "prokodo-List__item__inner": "prokodo-List__item__inner",
   "prokodo-List__item__link": "prokodo-List__item__link",
+  "prokodo-List__item__link__header": "prokodo-List__item__link__header",
   "prokodo-List__item__icon": "prokodo-List__item__icon",
   "prokodo-List__item__icon__svg": "prokodo-List__item__icon__svg",
   "prokodo-List__item__icon__wrapper": "prokodo-List__item__icon__wrapper",
   "prokodo-List__item__title--card": "prokodo-List__item__title--card",
   "prokodo-List__item__content": "prokodo-List__item__content",
   "prokodo-List__item__desc": "prokodo-List__item__desc",
+  "prokodo-List__item__desc--card": "prokodo-List__item__desc--card",
   "prokodo-List__item--is-clickable": "prokodo-List__item--is-clickable",
+  "list-title": "list-title",
   "prokodo-List__item--is-clickable--inherit": "prokodo-List__item--is-clickable--inherit",
   "prokodo-List__item--is-clickable--primary": "prokodo-List__item--is-clickable--primary",
   "prokodo-List__item--is-clickable--secondary": "prokodo-List__item--is-clickable--secondary",

package/dist/components/loading/Loading.js

@@ -1,9 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./Loading.module.scss.js";
 const bem = create(styles, "Loading");
-const Loading = memo(({ className, size = "sm" }) => /* @__PURE__ */ jsxs(
+const Loading = /* @__PURE__ */ __name(({ className, size = "sm" }) => /* @__PURE__ */ jsxs(
   "div",
   {
     className: bem(void 0, void 0, className),
@@ -51,7 +52,7 @@ const Loading = memo(({ className, size = "sm" }) => /* @__PURE__ */ jsxs(
       )
     ]
   }
-));
+), "Loading");
 Loading.displayName = "Loading";
 export {
   Loading

package/dist/components/lottie/Lottie.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useEffect, Suspense, lazy } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./Lottie.module.scss.js";
-import { ANIMATIONS } from "./LottieAnimations.js";
 const bem = create(styles, "Lottie");
 const DotLottieReact = lazy(
   () => import("@lottiefiles/dotlottie-react").then((mod) => ({
@@ -10,8 +9,7 @@ const DotLottieReact = lazy(
   }))
 );
 const Lottie = memo(
-  ({ className, animationName, containerClassName, ...props }) => {
-    var _a;
+  ({ className, animation, containerClassName, ...props }) => {
     const [isInView, setIsInView] = useState(false);
     const containerRef = useRef(null);
     useEffect(() => {
@@ -25,7 +23,7 @@ const Lottie = memo(
       if (el) observer.observe(el);
       return () => observer.disconnect();
     }, []);
-    if (!((_a = ANIMATIONS) == null ? void 0 : _a[animationName])) return null;
+    if (!animation) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -48,7 +46,7 @@ const Lottie = memo(
                 loop: true,
                 className: bem(void 0, void 0, className),
                 renderConfig: { devicePixelRatio: 0.9 },
-                src: ANIMATIONS[animationName],
+                src: animation,
                 useFrameInterpolation: false,
                 ...props
               }

package/dist/components/post-item/PostItem.js

@@ -11,7 +11,7 @@ import { Button } from "../button/Button.js";
 import { Grid } from "../grid/Grid.js";
 import { GridRow } from "../grid/GridRow.js";
 import { Animated } from "../animated/Animated.js";
-import { Headline } from "../headline/Headline.server.js";
+import { Headline } from "../headline/Headline.js";
 import { RichText } from "../rich-text/RichText.js";
 import { Card } from "../card/Card.js";
 import { Skeleton } from "../skeleton/Skeleton.js";
@@ -109,7 +109,7 @@ const PostItem = memo(
               Card,
               {
                 enableShadow: true,
-                background: isString(image == null ? void 0 : image.src) ? 3 : void 0,
+                background: image == null ? void 0 : image.src,
                 className: bem("image__wrapper"),
                 contentClassName: bem("image__content__wrapper"),
                 redirect: button == null ? void 0 : button.redirect,

package/dist/components/post-teaser/PostTeaser.js

@@ -8,7 +8,7 @@ import { Chip } from "../chip/Chip.js";
 import { Card } from "../card/Card.js";
 import { Icon } from "../icon/Icon.js";
 import { Image } from "../image/Image.js";
-import { Headline } from "../headline/Headline.server.js";
+import { Headline } from "../headline/Headline.js";
 import { RichText } from "../rich-text/RichText.js";
 const bem = create(styles, "PostTeaser");
 const PostTeaser = memo(

package/dist/components/post-widget/PostWidget.js

@@ -4,7 +4,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./PostWidget.module.scss.js";
 import { Card } from "../card/Card.js";
-import { Headline } from "../headline/Headline.server.js";
+import { Headline } from "../headline/Headline.js";
 import { Link } from "../link/Link.js";
 import { Image } from "../image/Image.js";
 const bem = create(styles, "PostWidget");

package/dist/components/post-widget-carousel/PostWidgetCarousel.js

@@ -7,7 +7,7 @@ import styles from "./PostWidgetCarousel.module.scss.js";
 import { Carousel } from "../carousel/Carousel.js";
 import { Button } from "../button/Button.js";
 import { Card } from "../card/Card.js";
-import { Headline } from "../headline/Headline.server.js";
+import { Headline } from "../headline/Headline.js";
 import { Link } from "../link/Link.js";
 import { Image } from "../image/Image.js";
 const bem = create(styles, "PostWidgetCarousel");