@prokodo/ui 0.1.12 → 0.1.14

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

@@ -155,29 +155,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -233,7 +262,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -254,6 +283,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -272,6 +361,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -315,6 +424,5 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }

package/dist/components/button/Button.module.scss.js

@@ -2,10 +2,11 @@ const styles = {
   "prokodo-Button": "prokodo-Button",
   "prokodo-Button--has-bg-primary": "prokodo-Button--has-bg-primary",
   "prokodo-Button--has-bg-secondary": "prokodo-Button--has-bg-secondary",
-  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
-  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
   "prokodo-Button--has-bg-success": "prokodo-Button--has-bg-success",
   "prokodo-Button--has-bg-warning": "prokodo-Button--has-bg-warning",
+  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
+  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
+  "prokodo-Button--has-bg-inherit": "prokodo-Button--has-bg-inherit",
   "prokodo-Button--is-disabled": "prokodo-Button--is-disabled",
   "prokodo-Button--has-text-inherit": "prokodo-Button--has-text-inherit",
   "prokodo-Button--has-text-primary": "prokodo-Button--has-text-primary",
@@ -15,6 +16,13 @@ const styles = {
   "prokodo-Button--has-text-warning": "prokodo-Button--has-text-warning",
   "prokodo-Button--has-text-error": "prokodo-Button--has-text-error",
   "prokodo-Button--has-variant-outlined": "prokodo-Button--has-variant-outlined",
+  "prokodo-Button--has-variant-outlined--has-outline-inherit": "prokodo-Button--has-variant-outlined--has-outline-inherit",
+  "prokodo-Button--has-variant-outlined--has-outline-primary": "prokodo-Button--has-variant-outlined--has-outline-primary",
+  "prokodo-Button--has-variant-outlined--has-outline-secondary": "prokodo-Button--has-variant-outlined--has-outline-secondary",
+  "prokodo-Button--has-variant-outlined--has-outline-info": "prokodo-Button--has-variant-outlined--has-outline-info",
+  "prokodo-Button--has-variant-outlined--has-outline-success": "prokodo-Button--has-variant-outlined--has-outline-success",
+  "prokodo-Button--has-variant-outlined--has-outline-warning": "prokodo-Button--has-variant-outlined--has-outline-warning",
+  "prokodo-Button--has-variant-outlined--has-outline-error": "prokodo-Button--has-variant-outlined--has-outline-error",
   "prokodo-Button--has-image": "prokodo-Button--has-image",
   "prokodo-Button--has-icon": "prokodo-Button--has-icon",
   "prokodo-Button--icon-only": "prokodo-Button--icon-only",

package/dist/components/button/Button.view.js

@@ -52,6 +52,7 @@ const ButtonView = /* @__PURE__ */ __name(({
         "has-icon": !Boolean(isIconOnly) && isString(iconProps == null ? void 0 : iconProps.name),
         [`has-variant-${variant}`]: true,
         [`has-bg-${color}`]: variant === "contained",
+        [`has-variant-${variant}--has-outline-${color}`]: variant === "outlined",
         [`has-text-${color}`]: variant === "text",
         "is-disabled": Boolean(disabled),
         ...iconMod

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

@@ -0,0 +1,42 @@
+"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, useCallback } from "react";
+import { CheckboxView } from "./Checkbox.view.js";
+function CheckboxClient(props) {
+  const { checked: controlledChecked, defaultChecked, onChange } = props;
+  const [isChecked, setIsChecked] = useState(
+    controlledChecked ?? defaultChecked ?? false
+  );
+  useEffect(() => {
+    if (typeof controlledChecked === "boolean") {
+      setIsChecked(controlledChecked);
+    }
+  }, [controlledChecked]);
+  const handleChange = useCallback(
+    (event) => {
+      const nextChecked = event.target.checked;
+      if (typeof controlledChecked !== "boolean") {
+        setIsChecked(nextChecked);
+      }
+      onChange == null ? void 0 : onChange(event, nextChecked);
+    },
+    [controlledChecked, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    CheckboxView,
+    {
+      ...props,
+      checked: void 0,
+      defaultChecked: void 0,
+      isChecked,
+      onChangeInternal: handleChange
+    }
+  );
+}
+__name(CheckboxClient, "CheckboxClient");
+const CheckboxClient$1 = memo(CheckboxClient);
+export {
+  CheckboxClient$1 as default
+};

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