@prokodo/ui 0.1.10 → 0.1.12

package/dist/components/pagination/Pagination.css

@@ -0,0 +1,191 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.prokodo-Pagination__list {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.prokodo-Pagination__item {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Pagination__ellipsis {
+  color: var(--color-grey-700);
+  padding: 0 0.25rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Pagination__ellipsis {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Pagination__ellipsis {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Pagination__btn {
+  width: 40px;
+  height: 40px;
+}
+.prokodo-Pagination__page {
+  min-width: 36px;
+  height: 36px;
+  padding: 0 0.25rem;
+  border-radius: 10px;
+  color: var(--color-grey-700);
+  border: 1px solid var(--color-grey-100);
+  text-align: center !important;
+}
+html[data-theme=dark] .prokodo-Pagination__page {
+  border: 1px solid var(--color-grey-500);
+}
+.prokodo-Pagination__page--active {
+  border: none;
+  pointer-events: none;
+}

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import PaginationServer from "./Pagination.server.js";
+const Pagination = createIsland({
+  name: "Pagination",
+  Server: PaginationServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Pagination.lazy.js"), "loadLazy")
+});
+export {
+  Pagination
+};

package/dist/components/pagination/Pagination.lazy.js

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

package/dist/components/pagination/Pagination.module.css

@@ -0,0 +1,191 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.prokodo-Pagination__list {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.prokodo-Pagination__item {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Pagination__ellipsis {
+  color: var(--color-grey-700);
+  padding: 0 0.25rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Pagination__ellipsis {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Pagination__ellipsis {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Pagination__btn {
+  width: 40px;
+  height: 40px;
+}
+.prokodo-Pagination__page {
+  min-width: 36px;
+  height: 36px;
+  padding: 0 0.25rem;
+  border-radius: 10px;
+  color: var(--color-grey-700);
+  border: 1px solid var(--color-grey-100);
+  text-align: center !important;
+}
+html[data-theme=dark] .prokodo-Pagination__page {
+  border: 1px solid var(--color-grey-500);
+}
+.prokodo-Pagination__page--active {
+  border: none;
+  pointer-events: none;
+}

package/dist/components/pagination/Pagination.module.scss.js

@@ -0,0 +1,12 @@
+const styles = {
+  "prokodo-Pagination": "prokodo-Pagination",
+  "prokodo-Pagination__list": "prokodo-Pagination__list",
+  "prokodo-Pagination__item": "prokodo-Pagination__item",
+  "prokodo-Pagination__ellipsis": "prokodo-Pagination__ellipsis",
+  "prokodo-Pagination__btn": "prokodo-Pagination__btn",
+  "prokodo-Pagination__page": "prokodo-Pagination__page",
+  "prokodo-Pagination__page--active": "prokodo-Pagination__page--active"
+};
+export {
+  styles as default
+};

package/dist/components/pagination/Pagination.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 { PaginationView } from "./Pagination.view.js";
+function PaginationServer(p) {
+  return /* @__PURE__ */ jsx(PaginationView, { ...p, readOnly: true });
+}
+__name(PaginationServer, "PaginationServer");
+export {
+  PaginationServer as default
+};

package/dist/components/pagination/Pagination.utils.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function clampInt(v, min, max) {
+  if (!Number.isFinite(v)) return min;
+  const x = Math.trunc(v);
+  return Math.min(max, Math.max(min, x));
+}
+__name(clampInt, "clampInt");
+function buildPaginationItems(args) {
+  const total = Math.max(1, Math.trunc(args.totalPages));
+  const page = clampInt(args.page, 1, total);
+  const siblings = Math.max(0, Math.trunc(args.siblingCount));
+  const boundaries = Math.max(0, Math.trunc(args.boundaryCount));
+  const maxVisible = boundaries * 2 + siblings * 2 + 3 + 2;
+  if (total <= maxVisible) {
+    return Array.from({ length: total }, (_, i) => ({
+      type: "page",
+      value: i + 1
+    }));
+  }
+  const items = [];
+  const startPages = Array.from({ length: boundaries }, (_, i) => i + 1);
+  const endPages = Array.from(
+    { length: boundaries },
+    (_, i) => total - boundaries + 1 + i
+  );
+  const siblingsStart = Math.max(boundaries + 2, page - siblings);
+  const siblingsEnd = Math.min(total - boundaries - 1, page + siblings);
+  for (const p of startPages) items.push({ type: "page", value: p });
+  if (siblingsStart > boundaries + 2) {
+    items.push({ type: "ellipsis", key: "start-ellipsis" });
+  } else {
+    items.push({ type: "page", value: boundaries + 1 });
+  }
+  for (let p = siblingsStart; p <= siblingsEnd; p++) {
+    items.push({ type: "page", value: p });
+  }
+  if (siblingsEnd < total - boundaries - 1) {
+    items.push({ type: "ellipsis", key: "end-ellipsis" });
+  } else {
+    items.push({ type: "page", value: total - boundaries });
+  }
+  for (const p of endPages) items.push({ type: "page", value: p });
+  const seen = /* @__PURE__ */ new Set();
+  return items.filter((it) => {
+    const key = it.type === "page" ? `p-${it.value}` : `e-${it.key}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+__name(buildPaginationItems, "buildPaginationItems");
+export {
+  buildPaginationItems
+};

package/dist/components/pagination/Pagination.view.js

@@ -0,0 +1,98 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Pagination.module.scss.js";
+import { buildPaginationItems } from "./Pagination.utils.js";
+import { Button } from "../button/Button.js";
+const bem = create(styles, "Pagination");
+function PaginationView({
+  className,
+  page,
+  totalPages,
+  disabled,
+  isPending,
+  siblingCount = 1,
+  boundaryCount = 1,
+  onPrev,
+  onNext,
+  onPageChange,
+  readOnly,
+  translations: t
+}) {
+  const safeTotal = Math.max(1, Math.trunc(totalPages));
+  const safePage = Math.min(safeTotal, Math.max(1, Math.trunc(page)));
+  if (safeTotal <= 1) return null;
+  const isDisabled = Boolean(disabled) || Boolean(isPending) || Boolean(readOnly);
+  const items = buildPaginationItems({
+    page: safePage,
+    totalPages: safeTotal,
+    siblingCount,
+    boundaryCount
+  });
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": (t == null ? void 0 : t.pagination) ?? "Pagination",
+      className: bem(void 0, void 0, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": (t == null ? void 0 : t.prev) ?? "Previous page",
+            className: bem("btn"),
+            disabled: isDisabled || safePage <= 1,
+            iconProps: { name: "ArrowLeft01Icon" },
+            variant: "outlined",
+            onClick: isDisabled ? void 0 : onPrev ?? (() => {
+              onPageChange == null ? void 0 : onPageChange(safePage - 1);
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: bem("list"), children: items.map((it) => {
+          var _a, _b, _c;
+          if (it.type === "ellipsis") {
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: bem("item"),
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("ellipsis"), children: "…" })
+              },
+              `${safePage}-${safeTotal}-${it.key}`
+            );
+          }
+          const isActive = it.value === safePage;
+          return /* @__PURE__ */ jsx("li", { className: bem("item"), children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-current": isActive ? "page" : void 0,
+              className: bem("page", { active: isActive }),
+              disabled: isDisabled || isActive,
+              title: (_a = it.value) == null ? void 0 : _a.toString(),
+              variant: isActive ? "outlined" : "text",
+              "aria-label": isActive ? ((_b = t == null ? void 0 : t.pageCurrent) == null ? void 0 : _b.replace("{page}", String(it.value))) ?? `Current page ${it.value}` : ((_c = t == null ? void 0 : t.pageGoTo) == null ? void 0 : _c.replace("{page}", String(it.value))) ?? `Go to page ${it.value}`,
+              onClick: isDisabled ? void 0 : () => onPageChange == null ? void 0 : onPageChange(it.value)
+            }
+          ) }, it.value);
+        }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": (t == null ? void 0 : t.next) ?? "Next page",
+            className: bem("btn"),
+            disabled: isDisabled || safePage >= safeTotal,
+            iconProps: { name: "ArrowRight01Icon" },
+            variant: "outlined",
+            onClick: isDisabled ? void 0 : onNext ?? (() => {
+              onPageChange == null ? void 0 : onPageChange(safePage + 1);
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+__name(PaginationView, "PaginationView");
+export {
+  PaginationView
+};

package/dist/components/pagination/index.js

@@ -0,0 +1,4 @@
+import { Pagination } from "./Pagination.js";
+export {
+  Pagination
+};

package/dist/components/rich-text/RichText.client.js

@@ -9,6 +9,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./RichText.module.scss.js";
 import { Icon } from "../icon/Icon.js";
+import { Image } from "../image/Image.js";
 import { Link } from "../link/Link.js";
 import { Headline } from "../headline/Headline.js";
 import { AnimatedText } from "../animatedText/AnimatedText.js";
@@ -86,6 +87,7 @@ function RichTextClient({
   className,
   overrideParagraph,
   codeTheme,
+  linkPolicy = "trusted",
   ...props
 }) {
   const containerRef = useRef(null);
@@ -250,6 +252,19 @@ function RichTextClient({
         const href = elem.getAttribute("href") ?? "#";
         const title = elem.getAttribute("title") ?? void 0;
         const linkText = normalize(keyedChildren.map(renderAnimation));
+        const isHttp = /^https?:\/\//i.test(href);
+        const isExternalHttp = isHttp;
+        let target = void 0;
+        let rel = void 0;
+        if (linkPolicy === "ugc") {
+          rel = isExternalHttp ? "ugc nofollow noopener" : "ugc nofollow";
+          target = isExternalHttp ? "_blank" : void 0;
+        } else {
+          const htmlTarget = elem.getAttribute("target") ?? void 0;
+          const wantsBlank = htmlTarget === "_blank";
+          target = wantsBlank ? "_blank" : void 0;
+          rel = wantsBlank ? "noopener" : void 0;
+        }
         return /* @__PURE__ */ jsx(
           Link,
           {
@@ -258,6 +273,8 @@ function RichTextClient({
             className: cls,
             href,
             linkComponent,
+            rel,
+            target,
             title,
             variant: "primary",
             children: linkText
@@ -282,6 +299,20 @@ function RichTextClient({
           }
         );
       }
+      case "img": {
+        const existing = elem.getAttribute("class");
+        const src2 = elem.getAttribute("src");
+        const alt = elem.getAttribute("alt");
+        return /* @__PURE__ */ jsx("span", { className: bem("image__wrapper"), children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            fill: true,
+            alt: alt ?? "",
+            className: [bem("image"), existing].filter(Boolean).join(" "),
+            src: src2 ?? ""
+          }
+        ) });
+      }
       case "ul": {
         const cls = bem("ul");
         return /* @__PURE__ */ jsx("ul", { className: cls, children: keyedChildren });

package/dist/components/rich-text/RichText.css

@@ -189,7 +189,6 @@ html[data-theme=dark] .prokodo-RichText__p {
   text-align: inherit;
 }
 html[data-theme=dark] .prokodo-RichText__pre {
-  color: var(--color-grey-300);
   background-color: var(--color-grey-50);
 }
 .prokodo-RichText__blockquote {
@@ -198,6 +197,19 @@ html[data-theme=dark] .prokodo-RichText__pre {
   padding: 1px 1rem;
   margin: 0;
 }
+.prokodo-RichText__image {
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 13px;
+}
+.prokodo-RichText__image__wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 13px;
+}
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;