@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/table/Table.js

@@ -1,78 +1,72 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useCallback, isValidElement } from "react";
 import { create } from "../../helpers/bem.js";
-import { isArray } from "../../helpers/validations.js";
+import { isString } from "../../helpers/validations.js";
 import styles from "./Table.module.scss.js";
+import { TableCell } from "./TableCell.js";
+import { Animated } from "../animated/Animated.js";
+import { Headline } from "../headline/Headline.js";
+import { RichText } from "../rich-text/RichText.js";
 const bem = create(styles, "Table");
-const Table = memo(
-  ({
-    variant = "primary",
-    className,
-    ariaLabel,
-    caption,
-    headerType = "single",
-    data,
-    headerProps,
-    bodyProps,
-    ...props
-  }) => {
-    const renderTableBodyCell = useCallback(
-      (props2) => {
-        const cellProps = headerType === "double" ? { ...props2, scope: "row" } : props2;
-        const { label, icon, className: className2, ...rest } = cellProps;
-        return /* @__PURE__ */ jsxs(
-          "td",
-          {
-            className: bem("cell", { "with-icon": Boolean(icon) }, className2),
-            ...rest,
-            children: [
-              isValidElement(icon) ? /* @__PURE__ */ jsx("span", { className: bem("cell__icon"), children: icon }) : null,
-              label
-            ]
-          },
-          `table-body-cell-${label}`
-        );
-      },
-      [headerType]
-    );
-    if (!isArray(data == null ? void 0 : data.header) || !isArray(data == null ? void 0 : data.body)) return null;
-    return /* @__PURE__ */ jsx("div", { className: bem("container", variant, className), children: /* @__PURE__ */ jsxs(
-      "table",
+const Table = /* @__PURE__ */ __name(({
+  id,
+  title,
+  titleProps,
+  content,
+  ariaLabel,
+  caption,
+  type = "single",
+  header,
+  body,
+  ...props
+}) => {
+  const ariaLabelId = `Table-${id}`;
+  return /* @__PURE__ */ jsxs("div", { className: bem(), children: [
+    isString(title) && /* @__PURE__ */ jsx(Animated, { animation: "left-right", className: bem("header"), children: /* @__PURE__ */ jsx(
+      Headline,
       {
-        "aria-label": ariaLabel,
-        className: bem(void 0, variant),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("caption", { className: bem("caption"), children: caption }),
-          /* @__PURE__ */ jsx("thead", { className: bem("head", variant), ...headerProps, children: /* @__PURE__ */ jsx("tr", { className: bem("head__row"), children: data.header.map((cell) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              className: bem("head__cell", cell.className),
-              colSpan: cell.colSpan,
-              rowSpan: cell.rowSpan,
-              children: cell.label
-            },
-            `table-header-cell-${cell.label}`
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { className: bem("body", variant), ...bodyProps, children: data.body.map(({ data: data2, className: className2 }) => {
-            var _a;
-            return /* @__PURE__ */ jsx(
-              "tr",
+        className: bem("headline", void 0),
+        id: ariaLabelId,
+        size: "xl",
+        type: "h2",
+        ...titleProps,
+        children: title
+      }
+    ) }),
+    isString(content) && /* @__PURE__ */ jsx(Animated, { className: bem("content"), delay: 500, children: /* @__PURE__ */ jsx(RichText, { children: content }) }),
+    /* @__PURE__ */ jsx("div", { className: bem("table__wrapper"), children: /* @__PURE__ */ jsxs("table", { "aria-label": ariaLabel, className: bem("table"), ...props, children: [
+      /* @__PURE__ */ jsx("thead", { className: bem("head"), children: /* @__PURE__ */ jsx("tr", { className: bem("head__row"), children: header.map((cell) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: bem("head__cell", void 0, cell == null ? void 0 : cell.className),
+          children: cell == null ? void 0 : cell.label
+        },
+        `table-header-cell-${cell == null ? void 0 : cell.label}`
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { className: bem("body"), children: body.map((row) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ jsx(
+          "tr",
+          {
+            className: bem("body__row", { "has-link": isString((_a = row == null ? void 0 : row.redirect) == null ? void 0 : _a.href) }),
+            children: row == null ? void 0 : row.cells.filter((el) => el !== null).map((cell) => /* @__PURE__ */ jsx(
+              TableCell,
               {
-                className: bem("body__row", className2),
-                children: data2.map(
-                  (cell) => renderTableBodyCell(cell)
-                )
+                ...cell,
+                redirect: row == null ? void 0 : row.redirect,
+                type
               },
-              `table-body-row-${(_a = data2 == null ? void 0 : data2[0]) == null ? void 0 : _a.label}`
-            );
-          }) })
-        ]
-      }
-    ) });
-  }
-);
-Table.displayName = "Table";
+              `table-body-cell-${cell.label}`
+            ))
+          },
+          `table-body-row-${(_c = (_b = row == null ? void 0 : row.cells) == null ? void 0 : _b[0]) == null ? void 0 : _c.label}`
+        );
+      }) }),
+      /* @__PURE__ */ jsx("caption", { className: bem("caption"), children: caption })
+    ] }) })
+  ] });
+}, "Table");
 export {
   Table
 };

package/dist/components/table/Table.module.scss.js

@@ -1,24 +1,17 @@
 const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
-  "prokodo-Table__container": "prokodo-Table__container",
-  "prokodo-Table__container--primary": "prokodo-Table__container--primary",
-  "prokodo-Table__container--secondary": "prokodo-Table__container--secondary",
-  "prokodo-Table__container--info": "prokodo-Table__container--info",
   "prokodo-Table": "prokodo-Table",
-  "prokodo-Table__caption": "prokodo-Table__caption",
-  "prokodo-Table__head": "prokodo-Table__head",
-  "prokodo-Table__head--primary": "prokodo-Table__head--primary",
-  "prokodo-Table__head--secondary": "prokodo-Table__head--secondary",
-  "prokodo-Table__head--info": "prokodo-Table__head--info",
+  "prokodo-Table__container": "prokodo-Table__container",
+  "prokodo-Table__headline": "prokodo-Table__headline",
+  "prokodo-Table__content": "prokodo-Table__content",
+  "prokodo-Table__table": "prokodo-Table__table",
+  "prokodo-Table__table__wrapper": "prokodo-Table__table__wrapper",
   "prokodo-Table__head__row": "prokodo-Table__head__row",
   "prokodo-Table__head__cell": "prokodo-Table__head__cell",
-  "is-active": "is-active",
-  "is-sorted": "is-sorted",
-  "prokodo-Table__body": "prokodo-Table__body",
   "prokodo-Table__body__row": "prokodo-Table__body__row",
-  "prokodo-Table__body__cell": "prokodo-Table__body__cell",
-  "with-icon": "with-icon",
+  "prokodo-Table__body__row--has-link": "prokodo-Table__body__row--has-link",
+  "prokodo-Table__caption": "prokodo-Table__caption",
   gradientMove,
   fadeInKeyframe
 };

package/dist/components/table/TableCell.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./TableCell.module.scss.js";
+import { Link } from "../link/Link.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "TableCell");
+const TableCell = /* @__PURE__ */ __name(({
+  type,
+  label,
+  icon,
+  className,
+  classNameInner,
+  redirect,
+  ...props
+}) => {
+  const cellProps = type === "double" ? { ...props, scope: "row" } : props;
+  const renderCellContent = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs(Fragment, { children: [
+    isString(icon == null ? void 0 : icon.name) && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: bem("icon", void 0, icon == null ? void 0 : icon.className),
+        color: icon == null ? void 0 : icon.color,
+        name: icon == null ? void 0 : icon.name,
+        size: 25
+      }
+    ),
+    label
+  ] }), "renderCellContent");
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ...cellProps,
+      className: bem(void 0, { "has-icon": Boolean(icon) }, className),
+      children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(Link, { ...redirect, className: bem("inner", { "has-link": true }, (redirect == null ? void 0 : redirect.className) ?? classNameInner), children: renderCellContent() }) : /* @__PURE__ */ jsx("span", { className: bem("inner", void 0, classNameInner), children: renderCellContent() })
+    },
+    `table-body-cell-${label}`
+  );
+}, "TableCell");
+export {
+  TableCell
+};

package/dist/components/table/TableCell.module.scss.js

@@ -0,0 +1,14 @@
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
+  "prokodo-TableCell": "prokodo-TableCell",
+  "prokodo-TableCell__inner": "prokodo-TableCell__inner",
+  "prokodo-TableCell__icon": "prokodo-TableCell__icon",
+  gradientMove,
+  fadeInKeyframe
+};
+export {
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
+};

package/dist/components/teaser/Teaser.js

@@ -1,102 +1,99 @@
+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 { isString } from "../../helpers/validations.js";
 import styles from "./Teaser.module.scss.js";
 import { Card } from "../card/Card.js";
 import { Lottie } from "../lottie/Lottie.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";
 import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Teaser");
-const Teaser = memo(
-  ({
-    className,
-    variant = "primary",
-    animation,
-    lineClamp,
-    align,
-    image,
-    title,
-    content,
-    onClick,
-    redirect,
-    ...props
-  }) => {
-    var _a;
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        variant,
-        ...props,
-        className: bem(void 0, void 0, className),
-        contentClassName: bem("card"),
-        redirect,
-        onClick,
-        children: [
-          animation && /* @__PURE__ */ jsx(Lottie, { animationName: animation, className: bem("animation") }),
-          image && /* @__PURE__ */ jsx("div", { className: bem("image__wrapper"), children: /* @__PURE__ */ jsx(
-            Image,
+const Teaser = /* @__PURE__ */ __name(({
+  className,
+  variant = "primary",
+  animation,
+  lineClamp,
+  align,
+  image,
+  title,
+  content,
+  redirect,
+  ...props
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant,
+      ...props,
+      className: bem(void 0, void 0, className),
+      contentClassName: bem("card"),
+      redirect,
+      children: [
+        animation !== void 0 && /* @__PURE__ */ jsx(Lottie, { animation, className: bem("animation") }),
+        image && /* @__PURE__ */ jsx("div", { className: bem("image__wrapper"), children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            ...image,
+            captionClassName: bem("image__caption"),
+            className: bem("image"),
+            containerClassName: bem("image")
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: bem("card__content"), children: [
+          /* @__PURE__ */ jsx(
+            Headline,
             {
-              ...image,
-              captionClassName: bem("image__caption"),
-              className: bem("image"),
-              containerClassName: bem("image")
+              align: align ?? "center",
+              size: "md",
+              type: "h3",
+              ...title,
+              variant: (title == null ? void 0 : title.variant) ?? variant,
+              className: bem(
+                "headline",
+                {
+                  "has-lineClamp": Boolean(lineClamp)
+                },
+                title == null ? void 0 : title.className
+              ),
+              children: title == null ? void 0 : title.content
             }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: bem("card__content"), children: [
+          ),
+          isString(content) && /* @__PURE__ */ jsx(
+            RichText,
+            {
+              className: bem("content", {
+                "has-lineClamp": Boolean(lineClamp),
+                [`align-${align}`]: !!align
+              }),
+              children: content
+            }
+          ),
+          isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs("span", { className: bem("link"), children: [
             /* @__PURE__ */ jsx(
-              Headline,
+              Icon,
               {
-                align: align ?? "center",
-                size: "md",
-                type: "h3",
-                ...title,
-                variant: (title == null ? void 0 : title.variant) ?? variant,
+                color: variant,
+                name: "ArrowRight01Icon",
+                size: "xs",
+                ...redirect == null ? void 0 : redirect.icon,
                 className: bem(
-                  "headline",
-                  {
-                    "has-lineClamp": Boolean(lineClamp)
-                  },
-                  title == null ? void 0 : title.className
-                ),
-                children: title == null ? void 0 : title.content
+                  "link__icon",
+                  void 0,
+                  (_a = redirect == null ? void 0 : redirect.icon) == null ? void 0 : _a.className
+                )
               }
             ),
-            isString(content) && /* @__PURE__ */ jsx(
-              RichText,
-              {
-                className: bem("content", {
-                  "has-lineClamp": Boolean(lineClamp),
-                  [`align-${align}`]: !!align
-                }),
-                children: content
-              }
-            ),
-            isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs("span", { className: bem("link"), children: [
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  color: variant,
-                  name: "ArrowRight01Icon",
-                  size: "xs",
-                  ...redirect == null ? void 0 : redirect.icon,
-                  className: bem(
-                    "link__icon",
-                    void 0,
-                    (_a = redirect == null ? void 0 : redirect.icon) == null ? void 0 : _a.className
-                  )
-                }
-              ),
-              redirect == null ? void 0 : redirect.label
-            ] })
+            redirect == null ? void 0 : redirect.label
           ] })
-        ]
-      }
-    );
-  }
-);
+        ] })
+      ]
+    }
+  );
+}, "Teaser");
 Teaser.displayName = "Teaser";
 export {
   Teaser

package/dist/constants/project.js

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

package/dist/helpers/createIsland.js

@@ -1,27 +1,48 @@
 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";
+import { lazy, Suspense, cloneElement } 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 LazyComp = lazy(() => loadLazy().then((m) => ({ default: m.default })));
+  if (typeof window === "undefined") {
+    void loadLazy();
+  }
+  function withIslandAttr(el, priority) {
+    const islandName = name.toLowerCase();
+    console.debug(
+      `[hydrate] createIsland “${name}” rendering as interactive=${Boolean(
+        priority
+      )}`
+    );
+    const extra = { "data-island": islandName };
+    if (Boolean(priority)) {
+      extra.priority = priority;
+    }
+    return cloneElement(el, extra);
+  }
+  __name(withIslandAttr, "withIslandAttr");
   const Island = /* @__PURE__ */ __name(({
     priority = false,
     ...raw
   }) => {
     const props = raw;
     const autoInteractive = Object.entries(props).some(
-      ([key, val]) => key.startsWith("on") && typeof val === "function"
+      ([k, v]) => k.startsWith("on") && typeof v === "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 });
+    if (interactive && priority) {
+      return withIslandAttr(/* @__PURE__ */ jsx(LazyComp, { ...props }));
+    }
+    if (!interactive) {
+      return withIslandAttr(/* @__PURE__ */ jsx(Server, { ...props }));
+    }
+    const fallback = withIslandAttr(/* @__PURE__ */ jsx(Server, { ...props }));
+    return /* @__PURE__ */ jsx(Suspense, { fallback, children: withIslandAttr(/* @__PURE__ */ jsx(LazyComp, { ...props })) });
   }, "Island");
   Island.displayName = `${name}Island`;
   return Island;

package/dist/helpers/createLazyWrapper.js

@@ -1,25 +1,53 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
 import { useHydrationReady } from "../hooks/useHydrationReady.js";
 function createLazyWrapper({
   name,
   Client,
-  Server
+  Server,
+  hydrateOnVisible = false,
+  ioOptions,
+  isInteractive: customInteractive
 }) {
   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 autoInteractive = Object.entries(props).some(
+      ([k, v]) => k.startsWith("on") && typeof v === "function"
+    ) || props.redirect !== void 0;
+    const interactive = customInteractive ? customInteractive(props) || autoInteractive : autoInteractive;
     const [visible, ref] = useHydrationReady({
-      enabled: hasInteraction && !priority
+      enabled: interactive && hydrateOnVisible && !priority,
+      ...ioOptions
     });
-    if (hasInteraction && (priority || visible)) {
-      return /* @__PURE__ */ jsx(Client, { ...raw });
+    const islandName = name.toLowerCase();
+    if (interactive && (priority || visible)) {
+      const clientEl = /* @__PURE__ */ jsx(Client, { ...props });
+      console.log(
+        `[hydrate] createLazyWrapper “${name}” rendering client (priority=${Boolean(
+          priority
+        )}, visible=${visible})`
+      );
+      const extra = { "data-island": islandName };
+      if (priority) {
+        extra.priority = priority;
+      }
+      return cloneElement(clientEl, extra);
+    } else {
+      const serverEl = /* @__PURE__ */ jsx(Server, { ...props });
+      console.log(
+        `[hydrate] createLazyWrapper “${name}” rendering server (visible=${visible})`
+      );
+      return cloneElement(
+        serverEl,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        { "data-island": islandName, ref }
+      );
     }
-    return /* @__PURE__ */ jsx("div", { ref, "data-island": name.toLowerCase(), children: /* @__PURE__ */ jsx(Server, { ...raw }) });
   }, "LazyWrapper");
   LazyWrapper.displayName = `${name}Lazy`;
   return LazyWrapper;

package/dist/helpers/validations.js

@@ -4,11 +4,9 @@ const isString = /* @__PURE__ */ __name((e) => typeof e === "string" && e.trim()
 const isNumber = /* @__PURE__ */ __name((e) => typeof e === "number", "isNumber");
 const isArray = /* @__PURE__ */ __name((array) => Array.isArray(array) && array.length > 0, "isArray");
 const isNull = /* @__PURE__ */ __name((e) => e === null || e === void 0, "isNull");
-const isTrue = /* @__PURE__ */ __name((e) => e !== false && e !== void 0, "isTrue");
 export {
   isArray,
   isNull,
   isNumber,
-  isString,
-  isTrue
+  isString
 };

package/dist/hooks/useHydrationReady.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useRef, useState, useLayoutEffect } from "react";
 function useHydrationReady(opts = {}) {
-  const { enabled = true, threshold = 0.1 } = opts;
+  const { enabled = true, ioOptions = { threshold: 0.1 } } = opts;
   const ref = useRef(null);
   const [visible, set] = useState(() => {
     var _a;
@@ -19,11 +19,11 @@ function useHydrationReady(opts = {}) {
           io.disconnect();
         }
       },
-      { threshold }
+      { ...ioOptions }
     );
     if (ref.current) io.observe(ref.current);
     return () => io.disconnect();
-  }, [enabled, visible, threshold]);
+  }, [enabled, visible, ioOptions]);
   return [visible, ref];
 }
 __name(useHydrationReady, "useHydrationReady");

package/dist/index.js

@@ -15,7 +15,7 @@ import { Form } from "./components/form/Form.js";
 import { FormResponse } from "./components/form/FormResponse.js";
 import { Grid } from "./components/grid/Grid.js";
 import { GridRow } from "./components/grid/GridRow.js";
-import { Headline } from "./components/headline/Headline.server.js";
+import { Headline } from "./components/headline/Headline.js";
 import { Icon } from "./components/icon/Icon.js";
 import { Image } from "./components/image/Image.js";
 import { ImageText } from "./components/image-text/ImageText.js";
@@ -34,6 +34,7 @@ import { PostWidgetCarousel } from "./components/post-widget-carousel/PostWidget
 import { Quote } from "./components/quote/Quote.js";
 import { RichText } from "./components/rich-text/RichText.js";
 import { Select } from "./components/select/Select.js";
+import { SideNav } from "./components/sidenav/SideNav.js";
 import { Skeleton } from "./components/skeleton/Skeleton.js";
 import { Slider } from "./components/slider/Slider.js";
 import { Stepper } from "./components/stepper/Stepper.js";
@@ -77,6 +78,7 @@ export {
   Quote,
   RichText,
   Select,
+  SideNav,
   Skeleton,
   Slider,
   Stepper,