@prokodo/ui 0.0.45 → 0.0.46

package/dist/components/accordion/Accordion.module.scss.js

@@ -1,4 +1,4 @@
-const backgroundFill = "backgroundFill";
+const accordionBorderShift = "accordionBorderShift";
 const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
@@ -6,10 +6,9 @@ const styles = {
   "prokodo-Accordion__item": "prokodo-Accordion__item",
   "prokodo-Accordion__item--is-expanded": "prokodo-Accordion__item--is-expanded",
   "prokodo-Accordion__header": "prokodo-Accordion__header",
-  backgroundFill,
+  accordionBorderShift,
   "prokodo-Accordion__header--is-expanded": "prokodo-Accordion__header--is-expanded",
   "prokodo-Accordion__title": "prokodo-Accordion__title",
-  "prokodo-Accordion__title--is-expanded": "prokodo-Accordion__title--is-expanded",
   "prokodo-Accordion__icon": "prokodo-Accordion__icon",
   "prokodo-Accordion__icon--is-hidden": "prokodo-Accordion__icon--is-hidden",
   "prokodo-Accordion__content": "prokodo-Accordion__content",
@@ -19,7 +18,7 @@ const styles = {
   fadeInKeyframe
 };
 export {
-  backgroundFill,
+  accordionBorderShift,
   styles as default,
   fadeInKeyframe,
   gradientMove

package/dist/components/accordion/Accordion.view.js

@@ -46,9 +46,12 @@ function AccordionView({
                 !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
                   Headline,
                   {
-                    className: bem("title", { "is-expanded": isExpanded }),
-                    size: "sm",
+                    animated: true,
+                    className: bem("title"),
+                    highlight: isExpanded,
+                    size: "xs",
                     type: "h3",
+                    variant: isExpanded ? "primary" : "inherit",
                     ...item.titleOptions ?? titleOptions,
                     children: title
                   }
@@ -57,7 +60,7 @@ function AccordionView({
                   Icon,
                   {
                     className: bem("icon", { "is-hidden": isExpanded }),
-                    color: "primary",
+                    color: "inherit",
                     name: "PlusSignIcon",
                     size: "sm",
                     ...iconProps
@@ -67,7 +70,7 @@ function AccordionView({
                   Icon,
                   {
                     className: bem("icon", { "is-hidden": !isExpanded }),
-                    color: "white",
+                    color: "inherit",
                     name: "MinusSignIcon",
                     size: "sm",
                     ...iconProps

package/dist/components/animatedText/AnimatedText.view.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-const AnimatedTextView = /* @__PURE__ */ __name(({ text, ...spanRest }) => /* @__PURE__ */ jsx("span", { ...spanRest, children: text }), "AnimatedTextView");
+const AnimatedTextView = /* @__PURE__ */ __name((({ text, ...spanRest }) => /* @__PURE__ */ jsx("span", { ...spanRest, children: text })), "AnimatedTextView");
 AnimatedTextView.displayName = "AnimatedTextView";
 export {
   AnimatedTextView

package/dist/components/card/Card.view.js

@@ -94,7 +94,7 @@ function CardView({
     {
       ...redirect,
       "aria-disabled": redirect.disabled ?? false,
-      className: bem("link"),
+      className: bem("link", void 0, redirect == null ? void 0 : redirect.className),
       role,
       tabIndex,
       children: innerCard

package/dist/components/dynamic-list/DynamicList.module.scss.js

@@ -2,6 +2,7 @@ const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-DynamicList": "prokodo-DynamicList",
+  "prokodo-DynamicList__label": "prokodo-DynamicList__label",
   "prokodo-DynamicList__list": "prokodo-DynamicList__list",
   "prokodo-DynamicList__list__item": "prokodo-DynamicList__list__item",
   "prokodo-DynamicList__list__item--is-multi": "prokodo-DynamicList__list__item--is-multi",

package/dist/components/dynamic-list/DynamicList.view.js

@@ -43,7 +43,7 @@ function DynamicListView({
           {
             ...labelProps,
             "aria-disabled": disabled,
-            className: bem("list-label", void 0, labelProps == null ? void 0 : labelProps.className),
+            className: bem("label", void 0, labelProps == null ? void 0 : labelProps.className),
             error: isError,
             id: (labelProps == null ? void 0 : labelProps.id) ?? `${name}-legend`,
             label,

package/dist/components/form/Form.client.js

@@ -74,10 +74,11 @@ const FormClient = memo((props) => {
         updateSingleField(idx, { value });
         return;
       }
-      defaultFields == null ? void 0 : defaultFields.forEach((defField, i) => {
+      defaultFields == null ? void 0 : defaultFields.forEach((defField) => {
         var _a;
         if (Boolean((_a = defField.conditions) == null ? void 0 : _a.some((c) => c.fieldId === field.name))) {
-          updateSingleField(i, defaultFields[i]);
+          const targetIdx = formState.findIndex((f) => f.name === defField.name);
+          if (targetIdx >= 0) updateSingleField(targetIdx, defField);
         }
       });
       const matched = (field.conditions ?? []).filter((c) => {
@@ -161,14 +162,16 @@ const FormClient = memo((props) => {
       formMessages,
       formState,
       isFormValid,
+      isHoneypotEmpty: honeypotValue.length === 0,
       fieldProps: {
         onChange: handleFieldChange,
         onValidate: handleFieldValidate
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       },
       honeypot: {
-        value: honeypotValue,
-        onChange: handleHpChange
+        defaultValue: "",
+        onChange: handleHpChange,
+        autoComplete: "off"
       },
       onFormSubmit: handleFormSubmit
     }

package/dist/components/form/Form.view.js

@@ -26,80 +26,82 @@ const FormView = /* @__PURE__ */ __name(({
   button,
   children,
   honeypot,
+  isHoneypotEmpty,
   onFormSubmit,
   isFormValid,
   fieldProps,
   messagesFields,
-  ...props
-}) => {
-  var _a;
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      ...props,
-      noValidate: true,
-      action,
-      "aria-labelledby": `${id}-heading`,
-      className: bem(void 0, void 0, className),
-      id,
-      onSubmit: typeof action === "function" || typeof action === "string" ? void 0 : onFormSubmit,
-      children: [
+  // ⬇️ strip non-DOM props so they don't leak to <form>
+  fields: _fields,
+  defaultFields: _defaultFields,
+  messages: _messages,
+  ...htmlProps
+}) => /* @__PURE__ */ jsxs(
+  "form",
+  {
+    ...htmlProps,
+    noValidate: true,
+    action,
+    "aria-labelledby": `${id}-heading`,
+    className: bem(void 0, void 0, className),
+    id,
+    onSubmit: typeof action === "function" || typeof action === "string" ? void 0 : onFormSubmit,
+    children: [
+      /* @__PURE__ */ jsx(
+        Headline,
+        {
+          type: "h2",
+          ...headlineProps,
+          id: `${id}-heading`,
+          className: bem("label", {
+            "is-hidden": Boolean(hideHeadline)
+          }, headlineProps == null ? void 0 : headlineProps.className),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), spacing: 2, children: [
+        isArray(formState) && formState.map((field) => /* @__PURE__ */ createElement(
+          FormField,
+          {
+            ...field,
+            key: field.name,
+            messagesFields,
+            variant,
+            disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
+            ...fieldProps
+          }
+        )),
+        children,
         /* @__PURE__ */ jsx(
-          Headline,
+          "input",
+          {
+            "aria-hidden": "true",
+            className: bem("hp"),
+            id: "hp",
+            name: "hp",
+            type: "text",
+            ...honeypot
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+        (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
+        !isNull(button) && Boolean(isHoneypotEmpty) && /* @__PURE__ */ jsx(
+          Button,
           {
-            type: "h2",
-            ...headlineProps,
-            id: `${id}-heading`,
-            className: bem("label", {
-              "is-hidden": Boolean(hideHeadline)
-            }, headlineProps == null ? void 0 : headlineProps.className),
-            children: label
+            "aria-label": "Submit form",
+            title: "Submit",
+            type: "submit",
+            ...button,
+            className: bem("footer__submit", void 0, button == null ? void 0 : button.className),
+            color: (button == null ? void 0 : button.color) ?? variant,
+            disabled: Boolean(formMessages == null ? void 0 : formMessages.errors) || !isFormValid
           }
-        ),
-        /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), spacing: 2, children: [
-          isArray(formState) && formState.map((field) => /* @__PURE__ */ createElement(
-            FormField,
-            {
-              ...field,
-              key: field.name,
-              messagesFields,
-              variant,
-              disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
-              ...fieldProps
-            }
-          )),
-          children,
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "aria-hidden": "true",
-              className: bem("hp"),
-              id: "hp",
-              name: "hp",
-              type: "text",
-              ...honeypot
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
-          (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
-          !isNull(button) && ((_a = honeypot == null ? void 0 : honeypot.value) == null ? void 0 : _a.length) === 0 && /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": "Submit form",
-              title: "Submit",
-              type: "submit",
-              ...button,
-              className: bem("footer__submit", void 0, button == null ? void 0 : button.className),
-              color: (button == null ? void 0 : button.color) ?? variant,
-              disabled: Boolean(formMessages == null ? void 0 : formMessages.errors) || !isFormValid
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}, "FormView");
+        )
+      ] })
+    ]
+  }
+), "FormView");
 export {
   FormView
 };

package/dist/components/form/FormField.client.js

@@ -34,6 +34,7 @@ function FormFieldClient({
             priority: true,
             color: variant,
             ...props,
+            checked: typeof (props == null ? void 0 : props.value) === "boolean" ? Boolean(props == null ? void 0 : props.value) : props.checked,
             onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
           }
         )

package/dist/components/grid/Grid.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./Grid.module.scss.js";
 const bem = create(styles, "Grid");
-const Grid = /* @__PURE__ */ __name(({ spacing = 2, className, children, ...props }) => /* @__PURE__ */ jsx(
+const Grid = /* @__PURE__ */ __name((({ spacing = 2, className, children, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: bem(void 0, void 0, className),
@@ -14,7 +14,7 @@ const Grid = /* @__PURE__ */ __name(({ spacing = 2, className, children, ...prop
     ...props,
     children
   }
-), "Grid");
+)), "Grid");
 Grid.displayName = "Grid";
 export {
   Grid

package/dist/components/grid/GridRow.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./GridRow.module.scss.js";
 const bem = create(styles, "GridRow");
-const GridRow = /* @__PURE__ */ __name(({ align, className, children, xs, sm, md, lg, xl, ...props }) => /* @__PURE__ */ jsx(
+const GridRow = /* @__PURE__ */ __name((({ align, className, children, xs, sm, md, lg, xl, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: bem(
@@ -22,7 +22,7 @@ const GridRow = /* @__PURE__ */ __name(({ align, className, children, xs, sm, md
     ...props,
     children
   }
-), "GridRow");
+)), "GridRow");
 GridRow.displayName = "GridRow";
 export {
   GridRow

package/dist/components/input/Input.view.js

@@ -73,7 +73,8 @@ function InputView({
           id: name,
           name,
           placeholder,
-          rows
+          rows,
+          value: value ?? ""
         }
       ) : /* @__PURE__ */ jsx(
         "input",

package/dist/components/input/InputValidation.js

@@ -40,15 +40,18 @@ const handleValidation = /* @__PURE__ */ __name((type, name, value, required, mi
     password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/
   };
   if (customRegexPattern !== void 0) {
-    const regexParts = customRegexPattern.match(/^\/(.*)\/([gimsuy]*)$/);
-    if (regexParts) {
-      const [, pattern = "", flags] = regexParts;
-      const customRegex = new RegExp(pattern ?? "", flags);
-      regexPatterns = {
-        ...regexPatterns,
-        [String(type)]: RegExp(customRegex)
-      };
+    let customRegex;
+    const m = customRegexPattern.match(/^\/([\s\S]*)\/([gimsuy]*)$/);
+    if (m) {
+      const [, pattern = "", flags] = m;
+      customRegex = new RegExp(pattern, flags);
+    } else {
+      customRegex = new RegExp(customRegexPattern);
     }
+    regexPatterns = {
+      ...regexPatterns,
+      [String(type)]: RegExp(customRegex)
+    };
   }
   const errorMessages = {
     // text: "Text can only include letters and common punctuation.",

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.45";
+const PROKODO_UI_VERSION = "0.0.46";
 export {
   PROKODO_UI_VERSION
 };