@prokodo/ui 0.0.51 → 0.0.53

package/dist/components/list/List.js

@@ -31,7 +31,16 @@ function List({
       className: bem(void 0, void 0, className),
       children: items.map((item, i) => {
         var _a;
-        const { id, title, desc, icon, redirect, onClick, variant: itemVariant, className: itemClassName } = item;
+        const {
+          id,
+          title,
+          desc,
+          icon,
+          redirect,
+          onClick,
+          variant: itemVariant,
+          className: itemClassName
+        } = item;
         const isClickable = Boolean(onClick || redirect);
         const liHandlers = {};
         if (isClickable) {
@@ -58,58 +67,101 @@ function List({
           itemClassName
         );
         const TitleSpan = /* @__PURE__ */ __name(() => {
-          const titleClass = bem("item__title", {
-            "is-clickable": isClickable,
-            ...modifier
-          }, "list-title");
+          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("div", { className: bem("item__desc", { "card": type === "card" }, classNameDesc), children: desc });
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem(
+                "item__desc",
+                { card: type === "card" },
+                classNameDesc
+              ),
+              children: desc
+            }
+          );
         }, "DescParagraph");
         const IconWrapper = /* @__PURE__ */ __name(() => {
           if (icon === void 0 || icon === null) return null;
-          return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon__wrapper"), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { color: variant, name: icon, ...options.icon }) });
+          return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon__wrapper"), children: isValidElement(icon) ? icon : /* @__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,
+          return /* @__PURE__ */ jsx(
+            "li",
             {
-              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 !== void 0 && icon !== null && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: bem("item__icon", void 0, (_a = cardItem.iconProps) == null ? void 0 : _a.className),
-                    children: isValidElement(icon) ? icon : /* @__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, {})
-                ] })
-              ] })
-            }
-          ) }, `list-item-${id ?? i}`);
+              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 !== void 0 && icon !== null && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "aria-hidden": "true",
+                            className: bem(
+                              "item__icon",
+                              void 0,
+                              (_a = cardItem.iconProps) == null ? void 0 : _a.className
+                            ),
+                            children: isValidElement(icon) ? icon : /* @__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, {})
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              )
+            },
+            `list-item-${id ?? i}`
+          );
         }
         if (redirect) {
           const linkProps = redirect;

package/dist/components/loading/Loading.client.js

@@ -46,7 +46,14 @@ const OverlayClient = /* @__PURE__ */ __name(({
     };
   }, [backdrop]);
   const resolved = backdrop === "auto" ? scheme : backdrop;
-  return /* @__PURE__ */ jsx(OverlayView, { ...rest, reducedMotion, resolvedBackdrop: resolved });
+  return /* @__PURE__ */ jsx(
+    OverlayView,
+    {
+      ...rest,
+      reducedMotion,
+      resolvedBackdrop: resolved
+    }
+  );
 }, "OverlayClient");
 const SpinnerClient = /* @__PURE__ */ __name(({
   reducedMotion,
@@ -61,7 +68,13 @@ const LoadingClient = /* @__PURE__ */ __name((props) => {
     return /* @__PURE__ */ jsx(OverlayClient, { ...rest2, reducedMotion });
   }
   const { variant: _v, ...rest } = props;
-  return /* @__PURE__ */ jsx(SpinnerClient, { ...rest, reducedMotion });
+  return /* @__PURE__ */ jsx(
+    SpinnerClient,
+    {
+      ...rest,
+      reducedMotion
+    }
+  );
 }, "LoadingClient");
 export {
   LoadingClient as default

package/dist/components/loading/Loading.server.js

@@ -6,7 +6,14 @@ const LoadingServer = /* @__PURE__ */ __name((props) => {
   if (props.variant === "overlay") {
     const { backdrop = "auto", ...rest2 } = props;
     const resolved = backdrop === "dark" ? "dark" : "light";
-    return /* @__PURE__ */ jsx(OverlayView, { ...rest2, reducedMotion: props.reducedMotion, resolvedBackdrop: resolved });
+    return /* @__PURE__ */ jsx(
+      OverlayView,
+      {
+        ...rest2,
+        reducedMotion: props.reducedMotion,
+        resolvedBackdrop: resolved
+      }
+    );
   }
   const { variant: _v, ...rest } = props;
   return /* @__PURE__ */ jsx(SpinnerView, { ...rest, reducedMotion: props.reducedMotion });

package/dist/components/loading/Loading.view.js

@@ -1,7 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
-const PX = { xs: 16, sm: 24, md: 32, lg: 48, xl: 64 };
+const PX = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64
+};
 const SpinnerView = /* @__PURE__ */ __name(({
   className,
   style,
@@ -28,11 +34,21 @@ const SpinnerView = /* @__PURE__ */ __name(({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "ui-loading-gradient", x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
-          /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: "0.4" }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.1" })
-        ] }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "ui-loading-gradient",
+            x1: "0%",
+            x2: "0%",
+            y1: "0%",
+            y2: "100%",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: "0.4" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.1" })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxs("g", { transform: `translate(${r} ${r})`, children: [
           /* @__PURE__ */ jsx(
             "circle",
@@ -102,7 +118,14 @@ const OverlayView = /* @__PURE__ */ __name(({
         zIndex,
         ...style
       },
-      children: /* @__PURE__ */ jsx(SpinnerView, { ariaLabel, reducedMotion, size })
+      children: /* @__PURE__ */ jsx(
+        SpinnerView,
+        {
+          ariaLabel,
+          reducedMotion,
+          size
+        }
+      )
     }
   );
 }, "OverlayView");

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { PostItemView } from "./PostItem.view.js";
+const PostItemClient = memo((props) => {
+  const { content, readingWpm = 200 } = props;
+  const wordCount = useMemo(() => calculateWordCount(content), [content]);
+  const readMinutes = useMemo(
+    () => wordCount > 0 ? Math.max(1, Math.ceil(wordCount / readingWpm)) : 0,
+    [wordCount, readingWpm]
+  );
+  return /* @__PURE__ */ jsx(PostItemView, { ...props, readMinutes, wordCount });
+});
+PostItemClient.displayName = "PostItemClient";
+export {
+  PostItemClient as default
+};

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

@@ -1,141 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useEffect } from "react";
-import { create } from "../../helpers/bem.js";
-import { calculateWordCount } from "../../helpers/calculation.js";
-import { isString } from "../../helpers/validations.js";
-import styles from "./PostItem.module.scss.js";
-import { PostItemAuthor } from "./PostItemAuthor.js";
-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.js";
-import { RichText } from "../rich-text/RichText.js";
-import { Card } from "../card/Card.js";
-import { Skeleton } from "../skeleton/Skeleton.js";
-const bem = create(styles, "PostItem");
-const PostItem = memo(
-  ({
-    className,
-    readCount = 0,
-    title,
-    content,
-    category,
-    author,
-    date,
-    metaDate,
-    image,
-    button,
-    imageComponent: ImageComponent
-  }) => {
-    const wordCount = calculateWordCount(content);
-    const [imageLoaded, setImageLoaded] = useState(!ImageComponent);
-    useEffect(() => {
-      if (!ImageComponent) setImageLoaded(true);
-    }, [ImageComponent]);
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        itemScope: true,
-        className: bem(void 0, void 0, className),
-        itemType: "http://schema.org/BlogPosting",
-        children: [
-          /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), children: [
-            /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: image ? 8 : 12, xs: 12, children: /* @__PURE__ */ jsxs(Animated, { className: bem("animation"), children: [
-              /* @__PURE__ */ jsxs("header", { children: [
-                /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    className: bem("headline", void 0, title == null ? void 0 : title.className),
-                    size: "lg",
-                    type: "h2",
-                    ...title,
-                    children: title.content
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: bem("info"), children: [
-                  author && /* @__PURE__ */ jsx(PostItemAuthor, { avatar: author.avatar, name: author.name }),
-                  isString(date) && /* @__PURE__ */ jsxs(
-                    "p",
-                    {
-                      "aria-label": `Published at ${date}`,
-                      className: bem("date"),
-                      itemProp: "datePublished",
-                      children: [
-                        "📅  ",
-                        /* @__PURE__ */ jsx("time", { dateTime: metaDate, itemProp: "datePublished", children: date })
-                      ]
-                    }
-                  ),
-                  readCount > 0 && /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      itemScope: true,
-                      className: bem("read__count"),
-                      itemProp: "interactionStatistic",
-                      itemType: "https://schema.org/InteractionCounter",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "meta",
-                          {
-                            content: "https://schema.org/ReadAction",
-                            itemProp: "interactionType"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              isString(content) && /* @__PURE__ */ jsx("div", { itemProp: "articleBody", children: /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }) }),
-              button && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "outlined",
-                  ...button,
-                  className: bem("button", void 0, button == null ? void 0 : button.className),
-                  contentClassName: bem(
-                    "button__content",
-                    void 0,
-                    button == null ? void 0 : button.contentClassName
-                  )
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx(GridRow, { md: 4, xs: 12, children: /* @__PURE__ */ jsxs(
-              Card,
-              {
-                enableShadow: true,
-                background: image == null ? void 0 : image.src,
-                className: bem("image__wrapper"),
-                contentClassName: bem("image__content__wrapper"),
-                redirect: button == null ? void 0 : button.redirect,
-                children: [
-                  !imageLoaded && /* @__PURE__ */ jsx(Skeleton, { height: "275px" }),
-                  ImageComponent !== void 0 && isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
-                    ImageComponent,
-                    {
-                      ...image,
-                      className: bem("image"),
-                      sizes: "(max-width: 960px) 100vw, 25vw",
-                      onLoad: /* @__PURE__ */ __name(() => setImageLoaded(true), "onLoad")
-                    }
-                  )
-                ]
-              }
-            ) })
-          ] }),
-          wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
-          isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" })
-        ]
-      }
-    );
-  }
-);
-PostItem.displayName = "PostItem";
+import { createIsland } from "../../helpers/createIsland.js";
+import PostItemServer from "./PostItem.server.js";
+const PostItem = createIsland({
+  name: "PostItem",
+  Server: PostItemServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./PostItem.lazy.js"), "loadLazy")
+});
 export {
   PostItem
 };

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

@@ -0,0 +1,14 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import PostItemClient from "./PostItem.client.js";
+import PostItemServer from "./PostItem.server.js";
+const PostItem_lazy = createLazyWrapper({
+  name: "PostItem",
+  Client: PostItemClient,
+  Server: PostItemServer,
+  // Hydrate when visible if interactive (e.g., button.onClick, redirect, etc.)
+  hydrateOnVisible: true
+});
+export {
+  PostItem_lazy as default
+};

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

@@ -1,5 +1,7 @@
 const styles = {
   "prokodo-PostItem__grid": "prokodo-PostItem__grid",
+  "prokodo-PostItem__media": "prokodo-PostItem__media",
+  "prokodo-PostItem__main": "prokodo-PostItem__main",
   "prokodo-PostItem__animation": "prokodo-PostItem__animation",
   "prokodo-PostItem__headline": "prokodo-PostItem__headline",
   "prokodo-PostItem__info": "prokodo-PostItem__info",
@@ -8,8 +10,8 @@ const styles = {
   "prokodo-PostItem__content": "prokodo-PostItem__content",
   "prokodo-PostItem__content__paragraph": "prokodo-PostItem__content__paragraph",
   "prokodo-PostItem__image": "prokodo-PostItem__image",
-  "prokodo-PostItem__image__wrapper": "prokodo-PostItem__image__wrapper",
   "prokodo-PostItem__image__content__wrapper": "prokodo-PostItem__image__content__wrapper",
+  "prokodo-PostItem__image__wrapper": "prokodo-PostItem__image__wrapper",
   "prokodo-PostItem__button": "prokodo-PostItem__button",
   "prokodo-PostItem__button__content": "prokodo-PostItem__button__content"
 };

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

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { PostItemView } from "./PostItem.view.js";
+function PostItemServer(p) {
+  const { content, readingWpm = 200 } = p;
+  const wordCount = calculateWordCount(content);
+  const readMinutes = wordCount > 0 ? Math.max(1, Math.ceil(wordCount / readingWpm)) : 0;
+  return /* @__PURE__ */ jsx(PostItemView, { ...p, readMinutes, wordCount });
+}
+__name(PostItemServer, "PostItemServer");
+export {
+  PostItemServer as default
+};