@prokodo/ui 0.1.12 → 0.1.14

package/dist/components/checkbox-group/CheckboxGroup.css

@@ -0,0 +1,238 @@
+/* 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-CheckboxGroup {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__legend {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+  opacity: 0.82;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  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-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legend--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-CheckboxGroup__legendLabel {
+  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-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legendRequiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  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-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__list--plain {
+  gap: 0;
+}
+.prokodo-CheckboxGroup__list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.prokodo-CheckboxGroup__item {
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__item--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}

package/dist/components/checkbox-group/CheckboxGroup.js

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

package/dist/components/checkbox-group/CheckboxGroup.lazy.js

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

package/dist/components/checkbox-group/CheckboxGroup.module.css

@@ -0,0 +1,238 @@
+/* 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-CheckboxGroup {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__legend {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+  opacity: 0.82;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  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-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legend--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-CheckboxGroup__legendLabel {
+  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-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legendRequiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  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-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__list--plain {
+  gap: 0;
+}
+.prokodo-CheckboxGroup__list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.prokodo-CheckboxGroup__item {
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__item--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}

package/dist/components/checkbox-group/CheckboxGroup.module.scss.js

@@ -0,0 +1,15 @@
+const styles = {
+  "prokodo-CheckboxGroup": "prokodo-CheckboxGroup",
+  "prokodo-CheckboxGroup__legend": "prokodo-CheckboxGroup__legend",
+  "prokodo-CheckboxGroup__legend--is-hidden": "prokodo-CheckboxGroup__legend--is-hidden",
+  "prokodo-CheckboxGroup__legendLabel": "prokodo-CheckboxGroup__legendLabel",
+  "prokodo-CheckboxGroup__legendRequiredMark": "prokodo-CheckboxGroup__legendRequiredMark",
+  "prokodo-CheckboxGroup__list": "prokodo-CheckboxGroup__list",
+  "prokodo-CheckboxGroup__list--plain": "prokodo-CheckboxGroup__list--plain",
+  "prokodo-CheckboxGroup__list--grid": "prokodo-CheckboxGroup__list--grid",
+  "prokodo-CheckboxGroup__item": "prokodo-CheckboxGroup__item",
+  "prokodo-CheckboxGroup__item--disabled": "prokodo-CheckboxGroup__item--disabled"
+};
+export {
+  styles as default
+};

package/dist/components/checkbox-group/CheckboxGroup.server.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroupView } from "./CheckboxGroup.view.js";
+function toUniqueArray(values) {
+  if (!Array.isArray(values) || values.length === 0) return [];
+  return Array.from(new Set(values));
+}
+__name(toUniqueArray, "toUniqueArray");
+function CheckboxGroupServer(props) {
+  const selectedValues = toUniqueArray(props.values ?? props.defaultValues);
+  const selectedSet = new Set(selectedValues);
+  return /* @__PURE__ */ jsx(
+    CheckboxGroupView,
+    {
+      ...props,
+      isChecked: /* @__PURE__ */ __name((value) => selectedSet.has(value), "isChecked"),
+      selectedValues
+    }
+  );
+}
+__name(CheckboxGroupServer, "CheckboxGroupServer");
+export {
+  CheckboxGroupServer as default
+};

package/dist/components/checkbox-group/CheckboxGroup.view.js

@@ -0,0 +1,97 @@
+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 "./CheckboxGroup.module.scss.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+const bem = create(styles, "CheckboxGroup");
+function CheckboxGroupView({
+  ariaLabel,
+  legend,
+  hideLegend,
+  legendProps,
+  name,
+  disabled,
+  required,
+  options,
+  selectedValues,
+  hiddenInputName,
+  layout = "stack",
+  variant = "plain",
+  translations: t,
+  isChecked,
+  onToggle
+}) {
+  if (!(options == null ? void 0 : options.length)) return null;
+  const label = ariaLabel ?? (t == null ? void 0 : t.ariaLabel) ?? "Options";
+  const isGroupRequiredActive = Boolean(required) && selectedValues.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-label": label,
+      "aria-required": required || void 0,
+      className: bem(),
+      children: [
+        legend ? /* @__PURE__ */ jsxs(
+          "legend",
+          {
+            ...legendProps,
+            className: bem(
+              "legend",
+              {
+                "is-hidden": Boolean(hideLegend)
+              },
+              legendProps == null ? void 0 : legendProps.className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: bem("legendLabel"), children: legend }),
+              required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("legendRequiredMark"), children: "*" }) : null
+            ]
+          }
+        ) : null,
+        hiddenInputName ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            name: hiddenInputName,
+            type: "hidden",
+            value: selectedValues.join(",")
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: bem("list", { [layout]: true, [variant]: true }), children: options.map((opt) => {
+          const checked = isChecked(opt.value);
+          const itemDisabled = Boolean(disabled) || Boolean(opt.disabled);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem("item", {
+                disabled: itemDisabled
+              }),
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked,
+                  description: opt.description,
+                  disabled: itemDisabled,
+                  icon: opt.icon,
+                  iconLabel: opt.iconLabel,
+                  name,
+                  required: Boolean(opt.required) || isGroupRequiredActive,
+                  showRequiredMark: Boolean(opt.required),
+                  title: opt.title,
+                  value: opt.value,
+                  variant,
+                  onChange: /* @__PURE__ */ __name(() => onToggle == null ? void 0 : onToggle(opt.value), "onChange")
+                }
+              )
+            },
+            opt.value
+          );
+        }) })
+      ]
+    }
+  );
+}
+__name(CheckboxGroupView, "CheckboxGroupView");
+export {
+  CheckboxGroupView
+};

package/dist/components/checkbox-group/index.js

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

package/dist/components/dialog/Dialog.view.js

@@ -22,6 +22,7 @@ function DialogView({
   containerChildren,
   className,
   classNameHeader,
+  actionsClassName,
   height,
   scroll = "paper",
   fullScreen = false,
@@ -126,7 +127,7 @@ function DialogView({
                     children
                   }
                 ),
-                actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
+                actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions", void 0, actionsClassName), children: [
                   /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
                   actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
                   /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })

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

@@ -264,8 +264,8 @@ html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
   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;

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

@@ -264,8 +264,8 @@ html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
   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;