@prokodo/ui 0.1.10 → 0.1.11

package/dist/components/RTE/RTE.module.css

@@ -0,0 +1,253 @@
+/* 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-RTE {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-RTE__surface {
+  position: relative;
+  width: calc(100% - 4px);
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--color-primary-40);
+}
+.prokodo-RTE__surface::after {
+  content: none;
+}
+.prokodo-RTE__toolbar {
+  border: none !important;
+  background-color: var(--color-primary-50);
+}
+.prokodo-RTE__toolbar__icon__part__stroke, .prokodo-RTE__toolbar__icon__part__stroke__miter {
+  stroke: var(--color-grey-900) !important;
+  opacity: 0.7;
+}
+.prokodo-RTE__toolbar__icon__part__fill {
+  fill: var(--color-grey-900) !important;
+  opacity: 0.7;
+}
+.prokodo-RTE__resize {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-grey-900);
+  cursor: ns-resize;
+  opacity: 0.55;
+}
+.prokodo-RTE__mount {
+  position: relative;
+  height: 200px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  border: none !important;
+}
+.prokodo-RTE__mount--disabled {
+  cursor: not-allowed;
+  opacity: 0.85;
+}
+.prokodo-RTE__tooltip {
+  max-width: calc(100% - 0.75rem - 0.75rem);
+  box-sizing: border-box;
+  border-radius: 14px;
+  overflow: hidden;
+}
+.prokodo-RTE__editor {
+  height: 100%;
+  padding: 0.75rem;
+  outline: none;
+  overflow-y: auto;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor {
+    font-size: 1rem;
+  }
+}
+.prokodo-RTE__editor p {
+  margin: 0 0 0.5rem 0;
+}
+.prokodo-RTE__editor p:last-child {
+  margin-bottom: 0;
+}
+.prokodo-RTE__editor ul,
+.prokodo-RTE__editor ol {
+  margin: 0 0 0.5rem 1.25rem;
+  padding: 0;
+}
+.prokodo-RTE__editor pre {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  border-radius: 14px;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.06);
+}
+.prokodo-RTE__editor code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0 6px;
+  border-radius: 8px;
+}
+.prokodo-RTE__editor img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 14px;
+  display: block;
+  margin: 0.5rem 0;
+}
+.prokodo-RTE--disabled {
+  opacity: 0.9;
+}
+.prokodo-RTE--readonly {
+  opacity: 0.95;
+}
+.prokodo-RTE__hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}

package/dist/components/RTE/RTE.module.scss.js

@@ -0,0 +1,19 @@
+const styles = {
+  "prokodo-RTE": "prokodo-RTE",
+  "prokodo-RTE__surface": "prokodo-RTE__surface",
+  "prokodo-RTE__toolbar": "prokodo-RTE__toolbar",
+  "prokodo-RTE__toolbar__icon__part__stroke": "prokodo-RTE__toolbar__icon__part__stroke",
+  "prokodo-RTE__toolbar__icon__part__stroke__miter": "prokodo-RTE__toolbar__icon__part__stroke__miter",
+  "prokodo-RTE__toolbar__icon__part__fill": "prokodo-RTE__toolbar__icon__part__fill",
+  "prokodo-RTE__resize": "prokodo-RTE__resize",
+  "prokodo-RTE__mount": "prokodo-RTE__mount",
+  "prokodo-RTE__mount--disabled": "prokodo-RTE__mount--disabled",
+  "prokodo-RTE__tooltip": "prokodo-RTE__tooltip",
+  "prokodo-RTE__editor": "prokodo-RTE__editor",
+  "prokodo-RTE--disabled": "prokodo-RTE--disabled",
+  "prokodo-RTE--readonly": "prokodo-RTE--readonly",
+  "prokodo-RTE__hidden": "prokodo-RTE__hidden"
+};
+export {
+  styles as default
+};

package/dist/components/RTE/RTE.server.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { isString } from "../../helpers/validations.js";
+import { RTEView } from "./RTE.view.js";
+function stripHtml(html) {
+  if (!isString(html)) return "";
+  return html.replace(/[<>]/g, "").replace(/\s+/g, " ").trim();
+}
+__name(stripHtml, "stripHtml");
+function RTEServer(props) {
+  const { value, onChange, ...rest } = props;
+  const v = stripHtml(value);
+  return /* @__PURE__ */ jsx(RTEView, { ...rest, readOnly: true, htmlValue: v, showResize: false, value: v });
+}
+__name(RTEServer, "RTEServer");
+export {
+  RTEServer as default
+};

package/dist/components/RTE/RTE.styles.js

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+let injected = false;
+function ensureQuillSnowStyles(cssText) {
+  if (injected) return;
+  if (typeof document === "undefined") return;
+  const id = "rte-quill-snow";
+  if (document.getElementById(id)) {
+    injected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssText;
+  document.head.appendChild(style);
+  injected = true;
+}
+__name(ensureQuillSnowStyles, "ensureQuillSnowStyles");
+export {
+  ensureQuillSnowStyles
+};

package/dist/components/RTE/RTE.theme.js

@@ -0,0 +1,4 @@
+import cssText from "../../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.snow.css.js";
+export {
+  cssText as default
+};

package/dist/components/RTE/RTE.utils.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./RTE.module.scss.js";
+const bem = create(styles, "RTE");
+function addClasses(el, className) {
+  if (!el) return;
+  className.split(/\s+/).map((s) => s.trim()).filter(Boolean).forEach((c) => el.classList.add(c));
+}
+__name(addClasses, "addClasses");
+function decorateToolbar(toolbarEl) {
+  toolbarEl.querySelectorAll("button").forEach((btn) => {
+    addClasses(btn, bem("toolbar__button"));
+    const ql = Array.from(btn.classList).find((c) => c.startsWith("ql-"));
+    if (isString(ql))
+      addClasses(btn, bem("toolbar__button", { [ql.slice(3)]: true }));
+  });
+  toolbarEl.querySelectorAll("button svg").forEach((svg) => {
+    addClasses(svg, bem("toolbar__icon"));
+  });
+  toolbarEl.querySelectorAll("button svg *").forEach((node) => {
+    const el = node;
+    addClasses(el, bem("toolbar__icon__part"));
+    if (el.classList.contains("ql-fill"))
+      addClasses(el, bem("toolbar__icon__part__fill"));
+    if (el.classList.contains("ql-stroke") || el.classList.contains("ql-stroke-miter")) {
+      addClasses(el, bem("toolbar__icon__part__stroke"));
+    }
+    if (el.classList.contains("ql-stroke-miter")) {
+      addClasses(el, bem("toolbar__icon__part__stroke__miter"));
+    }
+  });
+}
+__name(decorateToolbar, "decorateToolbar");
+function cleanupQuill(surfaceEl, mountEl) {
+  if (!surfaceEl || !mountEl) return;
+  surfaceEl.querySelectorAll(":scope > .ql-toolbar").forEach((el) => el.remove());
+  surfaceEl.querySelectorAll(".ql-tooltip").forEach((el) => el.remove());
+  surfaceEl.querySelectorAll(".ql-container").forEach((el) => {
+    if (el !== mountEl) el.remove();
+  });
+  mountEl.innerHTML = "";
+}
+__name(cleanupQuill, "cleanupQuill");
+export {
+  addClasses,
+  bem,
+  cleanupQuill,
+  decorateToolbar
+};

package/dist/components/RTE/RTE.view.js

@@ -0,0 +1,107 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./RTE.module.scss.js";
+import { Input } from "../input/Input.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "RTE");
+function RTEView({
+  name,
+  value,
+  disabled,
+  readOnly,
+  required,
+  placeholder,
+  maxLength,
+  errorText,
+  htmlValue,
+  surfaceRef,
+  mountRef,
+  showResize = false,
+  onStartResize,
+  onChange,
+  onValidate,
+  errorTranslations,
+  rteToolbar,
+  rteOptions,
+  ...rest
+}) {
+  const mirrorValue = String(htmlValue ?? value ?? "");
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...rest,
+      multiline: true,
+      disabled,
+      errorText,
+      maxLength,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      value: mirrorValue,
+      renderNode: /* @__PURE__ */ __name(({ id, describedBy, isError, nodeClassName }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: bem(void 0, {
+            disabled: Boolean(disabled),
+            readonly: Boolean(readOnly)
+          }),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: surfaceRef,
+                className: bem(
+                  "surface",
+                  { error: Boolean(isError) },
+                  nodeClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: mountRef,
+                      "aria-describedby": describedBy,
+                      "aria-invalid": isError,
+                      "aria-required": Boolean(required),
+                      className: bem("mount", { disabled: Boolean(disabled) }),
+                      id
+                    }
+                  ),
+                  showResize && !Boolean(disabled) && !Boolean(readOnly) && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": "Resize editor height",
+                      className: bem("resize"),
+                      type: "button",
+                      onMouseDown: onStartResize,
+                      children: /* @__PURE__ */ jsx(Icon, { name: "ResizeFieldIcon", size: "sm" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                readOnly: true,
+                "aria-hidden": "true",
+                className: bem("hidden"),
+                name,
+                tabIndex: -1,
+                value: mirrorValue
+              }
+            )
+          ]
+        }
+      ), "renderNode"),
+      onChange: void 0
+    }
+  );
+}
+__name(RTEView, "RTEView");
+export {
+  RTEView
+};

package/dist/components/RTE/index.js

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

package/dist/components/avatar/Avatar.css

@@ -131,7 +131,7 @@
   align-items: center;
   border-radius: 200px;
   overflow: hidden;
-  background-color: var(--color-grey-100);
+  background-color: transparent;
 }
 .prokodo-Avatar--primary {
   background-color: var(--color-primary-500);
@@ -175,8 +175,6 @@
   height: 100px;
 }
 .prokodo-Avatar__image {
-  width: 100%;
-  height: 100%;
   display: block;
   -o-object-fit: cover;
      object-fit: cover;

package/dist/components/avatar/Avatar.module.css

@@ -131,7 +131,7 @@
   align-items: center;
   border-radius: 200px;
   overflow: hidden;
-  background-color: var(--color-grey-100);
+  background-color: transparent;
 }
 .prokodo-Avatar--primary {
   background-color: var(--color-primary-500);
@@ -175,8 +175,6 @@
   height: 100px;
 }
 .prokodo-Avatar__image {
-  width: 100%;
-  height: 100%;
   display: block;
   -o-object-fit: cover;
      object-fit: cover;

package/dist/components/avatar/Avatar.view.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
+import { isNumber } from "../../helpers/validations.js";
 import styles from "./Avatar.module.scss.js";
 import { Icon, getIconSize } from "../icon/Icon.js";
 import { Link } from "../link/Link.js";
@@ -9,7 +10,7 @@ import { Image } from "../image/Image.js";
 const bem = create(styles, "Avatar");
 function AvatarView({
   className,
-  variant = "primary",
+  variant = "inherit",
   size = "sm",
   image,
   redirect,
@@ -20,24 +21,36 @@ function AvatarView({
     { [variant]: true, [`has-size-${size}`]: true },
     className
   );
-  const defaultSide = getIconSize(size);
-  const inner = /* @__PURE__ */ jsx("div", { ...rest, className: rootClass, tabIndex: -1, children: image ? /* @__PURE__ */ jsx(
-    Image,
+  const iconSize = getIconSize(size);
+  const inner = /* @__PURE__ */ jsx(
+    "div",
     {
-      fill: true,
-      ...image,
-      className: bem("image", void 0, image.className),
-      tabIndex: 0
+      ...rest,
+      className: rootClass,
+      tabIndex: -1,
+      style: isNumber(size) ? {
+        width: size,
+        height: size
+      } : void 0,
+      children: image ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          fill: true,
+          ...image,
+          className: bem("image", void 0, image.className),
+          tabIndex: 0
+        }
+      ) : /* @__PURE__ */ jsx(
+        Icon,
+        {
+          className: bem("icon", { [variant]: true }),
+          color: !["inherit", "white"].includes(variant) ? "white" : void 0,
+          name: "UserIcon",
+          size: iconSize
+        }
+      )
     }
-  ) : /* @__PURE__ */ jsx(
-    Icon,
-    {
-      className: bem("icon", { [variant]: true }),
-      color: !["inherit", "white"].includes(variant) ? "white" : void 0,
-      name: "UserIcon",
-      size: defaultSide
-    }
-  ) });
+  );
   return redirect ? /* @__PURE__ */ jsx(
     Link,
     {

package/dist/components/base-link/BaseLink.client.js

@@ -35,7 +35,17 @@ function BaseLinkClient({
       }
     );
   }
-  return /* @__PURE__ */ jsx(LinkComponent, { ...rest, href, style: linkStyle, tabIndex, children });
+  return /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      ...rest,
+      href,
+      rel: computedRel,
+      style: linkStyle,
+      tabIndex,
+      children
+    }
+  );
 }
 __name(BaseLinkClient, "BaseLinkClient");
 export {

package/dist/components/button/Button.view.js

@@ -20,6 +20,7 @@ const ButtonView = /* @__PURE__ */ __name(({
   iconProps = {},
   isIconOnly,
   LinkComponent,
+  loading,
   ...rest
 }) => {
   const isOutlined = variant === "outlined";

package/dist/components/card/Card.css

@@ -183,7 +183,7 @@ html[data-theme=dark] .prokodo-Card__background {
   align-items: center;
 }
 .prokodo-Card__link:hover {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 .prokodo-Card__content {
   position: relative;

package/dist/components/card/Card.module.css

@@ -183,7 +183,7 @@ html[data-theme=dark] .prokodo-Card__background {
   align-items: center;
 }
 .prokodo-Card__link:hover {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 .prokodo-Card__content {
   position: relative;

package/dist/components/chip/Chip.css

@@ -132,6 +132,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  gap: 0.5rem;
   transition: background-color 0.3s ease, color 0.3s ease;
   border-color: var(--color-grey-500);
   color: var(--color-black);
@@ -177,7 +178,7 @@
 }
 .prokodo-Chip--filled--info {
   background-color: var(--color-grey-300);
-  color: var(--color-white);
+  color: var(--color-grey-700);
 }
 .prokodo-Chip--filled--success {
   background-color: var(--color-success);
@@ -240,7 +241,6 @@
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  margin-left: 8px;
   transition: color 0.3s ease;
   background-color: var(--color-grey-50);
 }

package/dist/components/chip/Chip.module.css

@@ -132,6 +132,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  gap: 0.5rem;
   transition: background-color 0.3s ease, color 0.3s ease;
   border-color: var(--color-grey-500);
   color: var(--color-black);
@@ -177,7 +178,7 @@
 }
 .prokodo-Chip--filled--info {
   background-color: var(--color-grey-300);
-  color: var(--color-white);
+  color: var(--color-grey-700);
 }
 .prokodo-Chip--filled--success {
   background-color: var(--color-success);
@@ -240,7 +241,6 @@
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  margin-left: 8px;
   transition: color 0.3s ease;
   background-color: var(--color-grey-50);
 }