@prokodo/ui 0.1.11 → 0.1.13

package/dist/components/autocomplete/Autocomplete.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 AutocompleteServer from "./Autocomplete.server.js";
+const Autocomplete = createIsland({
+  name: "Autocomplete",
+  Server: AutocompleteServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Autocomplete.lazy.js"), "loadLazy")
+});
+export {
+  Autocomplete
+};

package/dist/components/autocomplete/Autocomplete.lazy.js

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

package/dist/components/autocomplete/Autocomplete.module.css

@@ -0,0 +1,317 @@
+/* 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.
+ */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.prokodo-Autocomplete {
+  position: relative;
+}
+.prokodo-Autocomplete__inputWrap {
+  position: relative;
+  z-index: 41;
+  border-radius: 1.5rem;
+}
+.prokodo-Autocomplete__input {
+  width: 100%;
+}
+.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.prokodo-Autocomplete__input__inner--is-open {
+  background: var(--gradient-border-4);
+}
+.prokodo-Autocomplete__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% - 4px);
+  margin: 0;
+  padding: 0 2px 2px;
+  list-style: none;
+  transform: none;
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background: var(--gradient-border-4);
+  margin-top: -2px;
+  box-shadow: var(--elevation-3);
+  max-height: 260px;
+  overflow: auto;
+  z-index: 50;
+  animation: fade-in 180ms ease-out;
+  scrollbar-width: none;
+}
+.prokodo-Autocomplete__list::-webkit-scrollbar {
+  display: none;
+}
+.prokodo-Autocomplete__state {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.5rem 1rem 1rem 1rem;
+  background: var(--color-white);
+  color: var(--color-grey-700);
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  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-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Autocomplete__state {
+  background: rgb(16, 19, 27);
+  color: var(--color-grey-500);
+}
+.prokodo-Autocomplete__itemRow {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.prokodo-Autocomplete__itemRow--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item {
+  width: 100%;
+  border: none;
+  background: var(--color-white);
+  color: inherit;
+  text-align: left;
+  display: grid;
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+html[data-theme=dark] .prokodo-Autocomplete__item {
+  background: rgb(16, 19, 27);
+}
+.prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item--is-first {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Autocomplete__item--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+.prokodo-Autocomplete__itemLabel {
+  margin: 0;
+  color: var(--color-grey-900);
+  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-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Autocomplete__itemDescription {
+  margin: 0;
+  color: var(--color-grey-700);
+  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-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}

package/dist/components/autocomplete/Autocomplete.module.scss.js

@@ -0,0 +1,21 @@
+const styles = {
+  "prokodo-Autocomplete": "prokodo-Autocomplete",
+  "prokodo-Autocomplete__inputWrap": "prokodo-Autocomplete__inputWrap",
+  "prokodo-Autocomplete__input": "prokodo-Autocomplete__input",
+  "prokodo-Autocomplete__input__inner--is-open": "prokodo-Autocomplete__input__inner--is-open",
+  "prokodo-Autocomplete__input__node--is-open": "prokodo-Autocomplete__input__node--is-open",
+  "prokodo-Autocomplete__list": "prokodo-Autocomplete__list",
+  "fade-in": "fade-in",
+  "prokodo-Autocomplete__state": "prokodo-Autocomplete__state",
+  "prokodo-Autocomplete__itemRow": "prokodo-Autocomplete__itemRow",
+  "prokodo-Autocomplete__itemRow--is-last": "prokodo-Autocomplete__itemRow--is-last",
+  "prokodo-Autocomplete__item": "prokodo-Autocomplete__item",
+  "prokodo-Autocomplete__item--is-first": "prokodo-Autocomplete__item--is-first",
+  "prokodo-Autocomplete__item--is-last": "prokodo-Autocomplete__item--is-last",
+  "prokodo-Autocomplete__item--is-active": "prokodo-Autocomplete__item--is-active",
+  "prokodo-Autocomplete__itemLabel": "prokodo-Autocomplete__itemLabel",
+  "prokodo-Autocomplete__itemDescription": "prokodo-Autocomplete__itemDescription"
+};
+export {
+  styles as default
+};

package/dist/components/autocomplete/Autocomplete.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 { AutocompleteView } from "./Autocomplete.view.js";
+function AutocompleteServer(props) {
+  return /* @__PURE__ */ jsx(AutocompleteView, { ...props, readOnly: true });
+}
+__name(AutocompleteServer, "AutocompleteServer");
+export {
+  AutocompleteServer as default
+};

package/dist/components/autocomplete/Autocomplete.view.js

@@ -0,0 +1,142 @@
+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 { isArray, isNumber } from "../../helpers/validations.js";
+import styles from "./Autocomplete.module.scss.js";
+import { Input } from "../input/Input.js";
+import { Loading } from "../loading/Loading.js";
+const bem = create(styles, "Autocomplete");
+function AutocompleteView({
+  id,
+  name,
+  label,
+  placeholder,
+  required,
+  disabled,
+  fullWidth,
+  readOnly,
+  autoComplete,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  value,
+  items,
+  loading,
+  loadingText,
+  emptyText,
+  minQueryLength = 2,
+  minQueryLengthText,
+  className,
+  inputClassName,
+  listClassName,
+  itemClassName,
+  inputProps,
+  _clientState,
+  onChange,
+  onSelect
+}) {
+  const { hideLabel, ...restInputProps } = inputProps ?? {};
+  const hasItems = isArray(items) && items.length > 0;
+  const canShowList = Boolean(_clientState == null ? void 0 : _clientState.open);
+  const canSearch = String(value ?? "").trim().length >= minQueryLength;
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+    /* @__PURE__ */ jsx("div", { className: bem("inputWrap"), children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...restInputProps,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        autoComplete,
+        disabled,
+        fullWidth,
+        hideLegend: hideLabel || (restInputProps == null ? void 0 : restInputProps.hideLegend),
+        id,
+        label,
+        name,
+        placeholder,
+        readOnly,
+        required,
+        value,
+        className: bem(
+          "input",
+          {
+            "is-open": canShowList
+          },
+          inputClassName
+        ),
+        inputClassName: bem(
+          "input__node",
+          {
+            "is-open": canShowList
+          },
+          restInputProps == null ? void 0 : restInputProps.inputClassName
+        ),
+        inputContainerClassName: bem(
+          "input__inner",
+          {
+            "is-open": canShowList
+          },
+          restInputProps == null ? void 0 : restInputProps.inputContainerClassName
+        ),
+        onKeyDown: _clientState == null ? void 0 : _clientState.onInputKeyDown,
+        onChange: /* @__PURE__ */ __name((event) => {
+          var _a;
+          _clientState == null ? void 0 : _clientState.onInputChange(((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) ?? "");
+        }, "onChange"),
+        onFocus: /* @__PURE__ */ __name(() => {
+          _clientState == null ? void 0 : _clientState.onInputFocus();
+        }, "onFocus")
+      }
+    ) }),
+    canShowList && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: bem("list", void 0, listClassName),
+        role: "listbox",
+        tabIndex: -1,
+        style: {
+          top: isNumber(_clientState == null ? void 0 : _clientState.listTop) ? `${_clientState.listTop}px` : void 0
+        },
+        children: Boolean(loading) ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("p", { className: bem("state"), children: [
+          /* @__PURE__ */ jsx(Loading, { size: "sm" }),
+          loadingText
+        ] }) }) : !canSearch ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: isNumber(minQueryLength) ? (minQueryLengthText ?? "{count} characters required").replaceAll("{count}", String(minQueryLength)) : "Type to search" }) }) : !hasItems ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("p", { className: bem("state"), children: emptyText }) }) : items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            "aria-selected": (_clientState == null ? void 0 : _clientState.activeIndex) === index,
+            className: bem("itemRow"),
+            role: "option",
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: bem(
+                  "item",
+                  {
+                    "is-active": (_clientState == null ? void 0 : _clientState.activeIndex) === index,
+                    "is-first": index === 0,
+                    "is-last": index === items.length - 1
+                  },
+                  itemClassName
+                ),
+                onMouseDown: /* @__PURE__ */ __name((event) => {
+                  event.preventDefault();
+                  _clientState == null ? void 0 : _clientState.onSelectItem(item);
+                }, "onMouseDown"),
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: bem("itemLabel"), children: item.label }),
+                  item.description ? /* @__PURE__ */ jsx("p", { className: bem("itemDescription"), children: item.description }) : null
+                ]
+              }
+            )
+          },
+          item.value
+        ))
+      }
+    )
+  ] });
+}
+__name(AutocompleteView, "AutocompleteView");
+export {
+  AutocompleteView
+};

package/dist/components/autocomplete/index.js

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

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/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;

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;

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/dynamic-list/DynamicList.view.js

@@ -4,10 +4,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./DynamicList.module.scss.js";
-import { Input } from "../input/Input.js";
 import { Select } from "../select/Select.js";
 import { Button } from "../button/Button.js";
 import { Label } from "../label/Label.js";
+import { Input } from "../input/Input.js";
 const bem = create(styles, "DynamicList");
 function DynamicListView({
   id,

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 */
 }
@@ -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);