@prokodo/ui 0.1.10 → 0.1.12

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

@@ -255,6 +255,7 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
+  display: flex;
   align-items: center;
 }
 .prokodo-Button--icon-only {

package/dist/components/button/Button.module.css

@@ -255,6 +255,7 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
+  display: flex;
   align-items: center;
 }
 .prokodo-Button--icon-only {

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

@@ -157,6 +157,15 @@
 html[data-theme=dark] .prokodo-Card--white {
   background-color: transparent;
 }
+.prokodo-Card--panel {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  /* in light mode trotzdem lesbar */
+}
+html:not([data-theme=dark]) .prokodo-Card--panel {
+  background: var(--color-white);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
 .prokodo-Card__skeleton {
   position: absolute;
   z-index: 3;
@@ -183,7 +192,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

@@ -157,6 +157,15 @@
 html[data-theme=dark] .prokodo-Card--white {
   background-color: transparent;
 }
+.prokodo-Card--panel {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  /* in light mode trotzdem lesbar */
+}
+html:not([data-theme=dark]) .prokodo-Card--panel {
+  background: var(--color-white);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
 .prokodo-Card__skeleton {
   position: absolute;
   z-index: 3;
@@ -183,7 +192,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.scss.js

@@ -4,6 +4,7 @@ const styles = {
   "prokodo-Card": "prokodo-Card",
   "prokodo-Card--inherit": "prokodo-Card--inherit",
   "prokodo-Card--white": "prokodo-Card--white",
+  "prokodo-Card--panel": "prokodo-Card--panel",
   "prokodo-Card__skeleton": "prokodo-Card__skeleton",
   "prokodo-Card__background": "prokodo-Card__background",
   "prokodo-Card__link": "prokodo-Card__link",

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);
 }

package/dist/components/chip/Chip.view.js

@@ -48,7 +48,7 @@ function ChipView({
               [color]: true
             }),
             ...buttonProps,
-            children: /* @__PURE__ */ jsx(Icon, { name: "Delete01Icon" })
+            children: /* @__PURE__ */ jsx(Icon, { color: "error", name: "Delete01Icon" })
           }
         )
       ]

package/dist/components/input/Input.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 */
 }
@@ -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/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 */
 }
@@ -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/input/Input.view.js

@@ -32,6 +32,7 @@ function InputView({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxRows,
   type = "text",
+  renderNode,
   ...rest
 }) {
   rest == null ? true : delete rest.onValidate;
@@ -43,6 +44,11 @@ function InputView({
   const errorId = isError ? `${name}-error` : void 0;
   const helperId = !isError && hasHelperText ? `${name}-helper` : void 0;
   const describedBy = [errorId, helperId].filter(Boolean).join(" ") || void 0;
+  const nodeClassName = bem(
+    "input__node",
+    { multiline: Boolean(multiline) },
+    inputClassName
+  );
   return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
     /* @__PURE__ */ jsxs("div", { className: bem("inner"), children: [
       typeof label === "string" && /* @__PURE__ */ jsx(
@@ -75,7 +81,17 @@ function InputView({
             },
             inputContainerClassName
           ),
-          children: Boolean(multiline) ? /* @__PURE__ */ jsx(
+          children: typeof renderNode === "function" ? renderNode({
+            id: name,
+            name,
+            disabled,
+            required,
+            readOnly: rest == null ? void 0 : rest.readOnly,
+            placeholder,
+            isError,
+            describedBy,
+            nodeClassName
+          }) : Boolean(multiline) ? /* @__PURE__ */ jsx(
             "textarea",
             {
               ...rest,
@@ -83,18 +99,14 @@ function InputView({
               "aria-describedby": describedBy,
               "aria-invalid": isError,
               "aria-required": required,
+              className: nodeClassName,
               disabled,
               id: name,
               name,
               placeholder,
               required: Boolean(required),
               rows,
-              value: value ?? "",
-              className: bem(
-                "input__node",
-                { multiline: true },
-                inputClassName
-              )
+              value: value ?? ""
             }
           ) : /* @__PURE__ */ jsx(
             "input",
@@ -104,18 +116,14 @@ function InputView({
               "aria-describedby": describedBy,
               "aria-invalid": isError,
               "aria-required": required,
+              className: nodeClassName,
               disabled,
               id: name,
               name,
               placeholder,
               required: Boolean(required),
               type,
-              value: value ?? "",
-              className: bem(
-                "input__node",
-                { multiline: false },
-                inputClassName
-              )
+              value: value ?? ""
             }
           )
         }

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
+};