@prokodo/ui 0.1.13 → 0.1.15

package/dist/components/checkbox/Checkbox.view.js

@@ -0,0 +1,89 @@
+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 "./Checkbox.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Checkbox");
+function CheckboxView({
+  className,
+  name,
+  value,
+  title,
+  description,
+  icon,
+  iconLabel,
+  required,
+  showRequiredMark,
+  disabled,
+  variant = "plain",
+  isChecked,
+  onChangeInternal
+}) {
+  const shouldShowRequiredMark = showRequiredMark ?? Boolean(required);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: bem(
+        void 0,
+        {
+          checked: isChecked,
+          disabled: Boolean(disabled),
+          [variant]: true
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: bem("left"), children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-checked": isChecked,
+              checked: isChecked,
+              className: bem("input"),
+              disabled,
+              name,
+              readOnly: typeof onChangeInternal !== "function",
+              required,
+              type: "checkbox",
+              value,
+              onChange: onChangeInternal
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: bem("control", {
+                checked: isChecked,
+                [variant]: true
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: bem("body"), children: [
+          /* @__PURE__ */ jsxs("span", { className: bem("row"), children: [
+            /* @__PURE__ */ jsx("span", { className: bem("title"), children: title }),
+            shouldShowRequiredMark ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("requiredMark"), children: "*" }) : null
+          ] }),
+          description ? /* @__PURE__ */ jsx("span", { className: bem("desc"), children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: bem("right"), children: (icon == null ? void 0 : icon.name) ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...icon,
+            className: bem("rightIcon", void 0, icon.className),
+            label: (
+              /* istanbul ignore next */
+              iconLabel ?? void 0
+            )
+          }
+        ) : null })
+      ]
+    }
+  );
+}
+__name(CheckboxView, "CheckboxView");
+export {
+  CheckboxView
+};

package/dist/components/checkbox/index.js

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

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

@@ -0,0 +1,57 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useMemo, useCallback } from "react";
+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 CheckboxGroupClient(props) {
+  const { values, defaultValues, onChange } = props;
+  const [selectedValues, setSelectedValues] = useState(
+    () => toUniqueArray(values ?? defaultValues)
+  );
+  useEffect(() => {
+    if (Array.isArray(values)) {
+      setSelectedValues(toUniqueArray(values));
+    }
+  }, [values]);
+  const selectedSet = useMemo(
+    () => new Set(selectedValues),
+    [selectedValues]
+  );
+  const isChecked = useCallback(
+    (value) => selectedSet.has(value),
+    [selectedSet]
+  );
+  const onToggle = useCallback(
+    (value) => {
+      setSelectedValues((prev) => {
+        const nextSet = new Set(prev);
+        if (nextSet.has(value)) nextSet.delete(value);
+        else nextSet.add(value);
+        const next = Array.from(nextSet);
+        onChange == null ? void 0 : onChange(next);
+        return next;
+      });
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    CheckboxGroupView,
+    {
+      ...props,
+      isChecked,
+      selectedValues,
+      onToggle
+    }
+  );
+}
+__name(CheckboxGroupClient, "CheckboxGroupClient");
+const CheckboxGroupClient$1 = memo(CheckboxGroupClient);
+export {
+  CheckboxGroupClient$1 as default
+};

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,16 @@
+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: (
+    /* istanbul ignore next */
+    /* @__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
+};