@prokodo/ui 0.1.11 → 0.1.13

package/dist/components/input/Input.module.css

@@ -129,7 +129,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
   height: 100%;
   width: 100%;
 }
@@ -161,6 +160,9 @@
     background-color: var(--color-white);
     padding: 0 0.25rem;
   }
+  html[data-theme=dark] .prokodo-Input__label--is-focused {
+    background-color: rgb(16, 19, 27);
+  }
 }
 .prokodo-Input__inner {
   position: relative;
@@ -197,6 +199,13 @@
   background-color: var(--color-white);
   color: var(--color-grey-900);
 }
+html[data-theme=dark] .prokodo-Input__input input:-webkit-autofill, html[data-theme=dark] .prokodo-Input__input textarea:-webkit-autofill {
+  background-color: rgb(16, 19, 27);
+}
+html[data-theme=dark] .prokodo-Input__input input:autofill,
+html[data-theme=dark] .prokodo-Input__input textarea:autofill {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input input:-webkit-autofill,
 .prokodo-Input__input input:-webkit-autofill:hover,
 .prokodo-Input__input input:-webkit-autofill:focus,
@@ -217,6 +226,10 @@
   background-color: var(--color-white);
   color: var(--color-grey-900);
 }
+html[data-theme=dark] .prokodo-Input__input input:-moz-autofill,
+html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input input:is(:-webkit-autofill, :-webkit-autofill), .prokodo-Input__input textarea:is(:-webkit-autofill, :-webkit-autofill) {
   border-color: none; /* adjust as needed */
 }
@@ -251,8 +264,8 @@
   background: var(--gradient-border-8);
 }
 .prokodo-Input__input__node {
-  width: calc(100% - 1.5rem - 1.5rem - 0.25rem);
-  padding: 0.875rem 1.5rem;
+  width: calc(100% - 1rem - 1rem - 0.25rem);
+  padding: 0.875rem 1rem;
   margin: 2px;
   border: none;
   outline: none;
@@ -279,6 +292,9 @@
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Input__input__node {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input__node {
   font-size: 1rem;
 }
@@ -307,9 +323,12 @@
   pointer-events: none;
 }
 .prokodo-Input__input__node:disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-700);
   background: var(--color-white);
 }
+html[data-theme=dark] .prokodo-Input__input__node:disabled {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input:focus {
   border-color: var(--color-primary-500);
   box-shadow: 0 0 5px var(--color-primary-500);

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

@@ -0,0 +1,14 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { PaginationView } from "./Pagination.view.js";
+function PaginationClient(p) {
+  return /* @__PURE__ */ jsx(PaginationView, { ...p });
+}
+__name(PaginationClient, "PaginationClient");
+const PaginationClient$1 = memo(PaginationClient);
+export {
+  PaginationClient$1 as default
+};

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.css

@@ -213,7 +213,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;
-  color: var(--color-grey-500);
 }
 .prokodo-RichText__li {
   display: flex;