@prokodo/ui 0.1.13 → 0.1.14

package/dist/components/checkbox/Checkbox.css

@@ -0,0 +1,312 @@
+/* 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-Checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  grid-gap: 0.75rem;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Checkbox--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.prokodo-Checkbox:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Checkbox--card {
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.prokodo-Checkbox__left {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.prokodo-Checkbox__control {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  position: relative;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: var(--inner-elevation-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.prokodo-Checkbox__control::after {
+  content: "";
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid var(--color-primary-500, #2f6bff);
+  border-bottom: 2px solid var(--color-primary-500, #2f6bff);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(0.6);
+  opacity: 0;
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+.prokodo-Checkbox__control--checked {
+  border-color: rgba(255, 255, 255, 0.32);
+}
+.prokodo-Checkbox__control--checked::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
+}
+.prokodo-Checkbox__control--card {
+  box-shadow: var(--inner-elevation-1);
+}
+.prokodo-Checkbox__control--card.prokodo-Checkbox__control--checked {
+  background: rgba(255, 255, 255, 0.1);
+}
+.prokodo-Checkbox__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.prokodo-Checkbox__row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-Checkbox__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-grey-900);
+  margin: 0;
+  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-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__requiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  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-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__desc {
+  color: var(--color-grey-700);
+  opacity: 0.82;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  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-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Checkbox__right {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  align-self: start;
+  margin-top: 2px;
+}
+.prokodo-Checkbox__rightIcon {
+  color: var(--color-grey-700);
+  opacity: 0.9;
+}

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

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

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

package/dist/components/checkbox/Checkbox.module.css

@@ -0,0 +1,312 @@
+/* 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-Checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  grid-gap: 0.75rem;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Checkbox--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.prokodo-Checkbox:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Checkbox--card {
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.prokodo-Checkbox__left {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.prokodo-Checkbox__control {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  position: relative;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: var(--inner-elevation-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.prokodo-Checkbox__control::after {
+  content: "";
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid var(--color-primary-500, #2f6bff);
+  border-bottom: 2px solid var(--color-primary-500, #2f6bff);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(0.6);
+  opacity: 0;
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+.prokodo-Checkbox__control--checked {
+  border-color: rgba(255, 255, 255, 0.32);
+}
+.prokodo-Checkbox__control--checked::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
+}
+.prokodo-Checkbox__control--card {
+  box-shadow: var(--inner-elevation-1);
+}
+.prokodo-Checkbox__control--card.prokodo-Checkbox__control--checked {
+  background: rgba(255, 255, 255, 0.1);
+}
+.prokodo-Checkbox__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.prokodo-Checkbox__row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-Checkbox__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-grey-900);
+  margin: 0;
+  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-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__requiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  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-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__desc {
+  color: var(--color-grey-700);
+  opacity: 0.82;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  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-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Checkbox__right {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  align-self: start;
+  margin-top: 2px;
+}
+.prokodo-Checkbox__rightIcon {
+  color: var(--color-grey-700);
+  opacity: 0.9;
+}

package/dist/components/checkbox/Checkbox.module.scss.js

@@ -0,0 +1,20 @@
+const styles = {
+  "prokodo-Checkbox": "prokodo-Checkbox",
+  "prokodo-Checkbox--disabled": "prokodo-Checkbox--disabled",
+  "prokodo-Checkbox--card": "prokodo-Checkbox--card",
+  "prokodo-Checkbox__left": "prokodo-Checkbox__left",
+  "prokodo-Checkbox__input": "prokodo-Checkbox__input",
+  "prokodo-Checkbox__control": "prokodo-Checkbox__control",
+  "prokodo-Checkbox__control--checked": "prokodo-Checkbox__control--checked",
+  "prokodo-Checkbox__control--card": "prokodo-Checkbox__control--card",
+  "prokodo-Checkbox__body": "prokodo-Checkbox__body",
+  "prokodo-Checkbox__row": "prokodo-Checkbox__row",
+  "prokodo-Checkbox__title": "prokodo-Checkbox__title",
+  "prokodo-Checkbox__requiredMark": "prokodo-Checkbox__requiredMark",
+  "prokodo-Checkbox__desc": "prokodo-Checkbox__desc",
+  "prokodo-Checkbox__right": "prokodo-Checkbox__right",
+  "prokodo-Checkbox__rightIcon": "prokodo-Checkbox__rightIcon"
+};
+export {
+  styles as default
+};

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

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { CheckboxView } from "./Checkbox.view.js";
+function CheckboxServer(props) {
+  const isChecked = typeof props.checked === "boolean" ? props.checked : props.defaultChecked ?? false;
+  return /* @__PURE__ */ jsx(
+    CheckboxView,
+    {
+      ...props,
+      checked: void 0,
+      defaultChecked: void 0,
+      isChecked
+    }
+  );
+}
+__name(CheckboxServer, "CheckboxServer");
+export {
+  CheckboxServer as default
+};