@prokodo/ui 0.0.52 → 0.0.53

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

@@ -34,9 +34,7 @@ const FormClient = memo((props) => {
     hideResponse,
     ...restProps
   } = props;
-  const [formState, setFormState] = useState(
-    () => fields ?? []
-  );
+  const [formState, setFormState] = useState(() => fields ?? []);
   const [formMessages, setFormMessages] = useState(
     initialMessages
   );
@@ -51,7 +49,10 @@ const FormClient = memo((props) => {
     (index, update) => {
       setFormState((prev) => {
         const next = [...prev];
-        const nextField = { ...next[index], ...update };
+        const nextField = {
+          ...next[index],
+          ...update
+        };
         next[index] = nextField;
         notifyChange(nextField);
         return next;
@@ -106,7 +107,9 @@ const FormClient = memo((props) => {
           }
           if (Array.isArray(equalTo)) {
             if (typeof v === "string" || typeof v === "number") {
-              return equalTo.includes(v);
+              return equalTo.includes(
+                v
+              );
             }
             if (Array.isArray(v)) {
               const vv = v;
@@ -118,10 +121,13 @@ const FormClient = memo((props) => {
         }, "matches");
         const defaultsByName = /* @__PURE__ */ new Map();
         for (const df of defaultFields ?? []) {
-          if (isString(df == null ? void 0 : df.name)) defaultsByName.set(df.name, df);
+          if (isString(df == null ? void 0 : df.name))
+            defaultsByName.set(df.name, df);
         }
         const conds = Array.isArray(field.conditions) ? field.conditions : [];
-        const targetNames = Array.from(new Set(conds.map((c) => c.fieldId).filter(Boolean)));
+        const targetNames = Array.from(
+          new Set(conds.map((c) => c.fieldId).filter(Boolean))
+        );
         for (const targetName of targetNames) {
           const depIdx = next.findIndex((f) => f.name === targetName);
           if (depIdx < 0) continue;
@@ -177,12 +183,9 @@ const FormClient = memo((props) => {
     },
     [defaultFields, notifyChange]
   );
-  const handleHpChange = useCallback(
-    (e) => {
-      setHoneypotValue(e.target.value);
-    },
-    []
-  );
+  const handleHpChange = useCallback((e) => {
+    setHoneypotValue(e.target.value);
+  }, []);
   const validateFullForm = useCallback(() => {
     const errors = {};
     formState.forEach((field) => {

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

@@ -53,9 +53,13 @@ const FormView = /* @__PURE__ */ __name(({
           type: "h2",
           ...headlineProps,
           id: `${id}-heading`,
-          className: bem("label", {
-            "is-hidden": Boolean(hideHeadline)
-          }, headlineProps == null ? void 0 : headlineProps.className),
+          className: bem(
+            "label",
+            {
+              "is-hidden": Boolean(hideHeadline)
+            },
+            headlineProps == null ? void 0 : headlineProps.className
+          ),
           children: label
         }
       ),
@@ -65,9 +69,9 @@ const FormView = /* @__PURE__ */ __name(({
           {
             ...field,
             key: field.name,
+            disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
             messagesFields,
             variant,
-            disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
             ...fieldProps
           }
         )),

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

@@ -23,7 +23,10 @@ function FormFieldClient({
   ...props
 }) {
   var _a, _b, _c;
-  const renderFieldContainer = useCallback((children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }), []);
+  const renderFieldContainer = useCallback(
+    (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
+    []
+  );
   if (visible === false) return null;
   switch (fieldType) {
     case "switch":
@@ -103,10 +106,7 @@ function FormFieldClient({
               ...field,
               onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(p, err), "onValidate")
             })),
-            onChange: /* @__PURE__ */ __name((items) => onChange == null ? void 0 : onChange(
-              props,
-              items
-            ), "onChange")
+            onChange: /* @__PURE__ */ __name((items) => onChange == null ? void 0 : onChange(props, items), "onChange")
           }
         )
       );

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

@@ -25,32 +25,12 @@ function FormFieldServer({
   switch (fieldType) {
     case "switch":
       return renderFieldContainer(
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            color: variant,
-            ...props
-          }
-        )
+        /* @__PURE__ */ jsx(Switch, { color: variant, ...props })
       );
     case "slider":
-      return renderFieldContainer(
-        /* @__PURE__ */ jsx(
-          Slider,
-          {
-            ...props
-          }
-        )
-      );
+      return renderFieldContainer(/* @__PURE__ */ jsx(Slider, { ...props }));
     case "select":
-      return renderFieldContainer(
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            ...props
-          }
-        )
-      );
+      return renderFieldContainer(/* @__PURE__ */ jsx(Select, { ...props }));
     case "input":
       return renderFieldContainer(
         /* @__PURE__ */ jsx(

package/dist/components/form/FormResponse.js

@@ -6,7 +6,11 @@ import { isArray, isNull } from "../../helpers/validations.js";
 import styles from "./FormResponse.module.scss.js";
 import { List } from "../list/List.js";
 const bem = create(styles, "FormResponse");
-const FormResponse = /* @__PURE__ */ __name(({ className, messages, ...props }) => {
+const FormResponse = /* @__PURE__ */ __name(({
+  className,
+  messages,
+  ...props
+}) => {
   const errorKeys = Object.keys((messages == null ? void 0 : messages.errors) || {});
   const listItems = errorKeys.map((key) => {
     var _a, _b;

package/dist/components/grid/Grid.js

@@ -4,7 +4,12 @@ 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 +19,7 @@ const Grid = /* @__PURE__ */ __name((({ spacing = 2, className, children, ...pro
     ...props,
     children
   }
-)), "Grid");
+), "Grid");
 Grid.displayName = "Grid";
 export {
   Grid

package/dist/components/grid/GridRow.js

@@ -4,7 +4,17 @@ 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 +32,7 @@ const GridRow = /* @__PURE__ */ __name((({ align, className, children, xs, sm, m
     ...props,
     children
   }
-)), "GridRow");
+), "GridRow");
 GridRow.displayName = "GridRow";
 export {
   GridRow

package/dist/components/headline/Headline.js

@@ -48,7 +48,9 @@ const Headline = /* @__PURE__ */ __name(({
     }
     return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: text });
   }, "animateText");
-  const renderHTag = /* @__PURE__ */ __name(({ children: headingChildren }) => {
+  const renderHTag = /* @__PURE__ */ __name(({
+    children: headingChildren
+  }) => {
     const HTag = type;
     const headingLevel = parseInt(type.charAt(1), 10);
     return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/icon/Icon.js

@@ -6,7 +6,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./Icon.module.scss.js";
 const bem = create(styles, "Icon");
-const getIconSize = /* @__PURE__ */ __name((s) => ({ xs: 15, sm: 20, md: 30, lg: 40, xl: 50 })[s] ?? (s ?? 16), "getIconSize");
+const getIconSize = /* @__PURE__ */ __name((s) => ({ xs: 15, sm: 20, md: 30, lg: 40, xl: 50 })[s] ?? s ?? 16, "getIconSize");
 const iconUrl = /* @__PURE__ */ __name((n) => `https://cdn.jsdelivr.net/gh/prokodo-agency/ui@v${PROKODO_UI_VERSION}/assets/icons/${n.replace(/Icon$/, "").replace(/([a-z])([A-Z0-9])/g, "$1_$2").replace(/([0-9])([a-zA-Z])/g, "$1_$2").toLowerCase()}_icon.svg`, "iconUrl");
 const Icon = /* @__PURE__ */ __name(({
   name,
@@ -35,9 +35,13 @@ const Icon = /* @__PURE__ */ __name(({
       "aria-label": label,
       role: isString(label) ? "img" : "presentation",
       style: { ...mask },
-      className: bem(void 0, {
-        [`${color}`]: Boolean(color)
-      }, className)
+      className: bem(
+        void 0,
+        {
+          [`${color}`]: Boolean(color)
+        },
+        className
+      )
     }
   );
 }, "Icon");

package/dist/components/image-text/ImageText.js

@@ -42,7 +42,11 @@ const ImageText = /* @__PURE__ */ __name(({
               type: "h3",
               variant: "primary",
               ...subTitleProps,
-              className: bem("sub__headline", void 0, subTitleProps == null ? void 0 : subTitleProps.className),
+              className: bem(
+                "sub__headline",
+                void 0,
+                subTitleProps == null ? void 0 : subTitleProps.className
+              ),
               children: subTitle
             }
           ),

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

@@ -69,34 +69,58 @@ function InputClient({
       onChange
     ]
   );
-  const handleFocus = useCallback((e) => {
-    setFocused(true);
-    onFocus == null ? void 0 : onFocus(e);
-  }, [onFocus]);
-  const handleBlur = useCallback((e) => {
-    setFocused(false);
-    onBlur == null ? void 0 : onBlur(e);
-  }, [onBlur]);
-  const viewBase = useMemo(() => ({
-    ...rest,
-    name,
-    isFocused: isFocused !== void 0 ? Boolean(isFocused) : focused,
-    value: val,
-    errorText: err,
-    required,
-    // ← keep required
-    min,
-    // ← if you want DOM to know about min
-    max,
-    // ← and max
-    maxLength,
-    // ← and maxLength (used by view counter)
-    readOnly,
-    // ← if you ever pass readOnly to client too
-    onChange: handleChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  }), [isFocused, focused, val, err, name, required, min, max, maxLength, readOnly, handleChange, handleFocus, handleBlur, rest]);
+  const handleFocus = useCallback(
+    (e) => {
+      setFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      setFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
+    },
+    [onBlur]
+  );
+  const viewBase = useMemo(
+    () => ({
+      ...rest,
+      name,
+      isFocused: isFocused !== void 0 ? Boolean(isFocused) : focused,
+      value: val,
+      errorText: err,
+      required,
+      // ← keep required
+      min,
+      // ← if you want DOM to know about min
+      max,
+      // ← and max
+      maxLength,
+      // ← and maxLength (used by view counter)
+      readOnly,
+      // ← if you ever pass readOnly to client too
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }),
+    [
+      isFocused,
+      focused,
+      val,
+      err,
+      name,
+      required,
+      min,
+      max,
+      maxLength,
+      readOnly,
+      handleChange,
+      handleFocus,
+      handleBlur,
+      rest
+    ]
+  );
   const viewProps = Boolean(multiline) ? {
     ...viewBase,
     multiline: true

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

@@ -53,83 +53,107 @@ function InputView({
           htmlFor: name,
           label,
           required,
-          className: bem("label", {
-            "is-focused": Boolean(isFocused) || hasValue
-          }, labelProps.className)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsx("div", { className: bem("input", {
-        "is-focused": Boolean(isFocused),
-        disabled: Boolean(disabled),
-        multiline: Boolean(multiline),
-        fullWidth: Boolean(fullWidth)
-      }, inputContainerClassName), children: Boolean(multiline) ? /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ...rest,
-          ref: inputRef,
-          "aria-describedby": describedBy,
-          "aria-invalid": isError,
-          "aria-required": required,
-          className: bem("input__node", { multiline: true }, inputClassName),
-          disabled,
-          id: name,
-          name,
-          placeholder,
-          required: Boolean(required),
-          rows,
-          value: value ?? ""
-        }
-      ) : /* @__PURE__ */ jsx(
-        "input",
-        {
-          ...rest,
-          ref: inputRef,
-          "aria-describedby": describedBy,
-          "aria-invalid": isError,
-          "aria-required": required,
-          disabled,
-          id: name,
-          name,
-          placeholder,
-          required: Boolean(required),
-          type,
-          value: value ?? "",
           className: bem(
-            "input__node",
-            { multiline: false },
-            inputClassName
+            "label",
+            {
+              "is-focused": Boolean(isFocused) || hasValue
+            },
+            labelProps.className
           )
         }
-      ) }) })
-    ] }),
-    (isError || hasHelperText || typeof maxLength === "number") && /* @__PURE__ */ jsxs("div", { className: bem("footer", {
-      "counter-only": !hasHelperText && typeof maxLength === "number"
-    }), children: [
-      (isError || hasHelperText) && /* @__PURE__ */ jsx(
+      ),
+      /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsx(
         "div",
         {
-          "aria-live": isError ? "assertive" : "polite",
-          className: bem("helperText"),
-          id: errorId ?? helperId,
-          role: isError ? "alert" : void 0,
-          children: /* @__PURE__ */ jsx(
-            "span",
+          className: bem(
+            "input",
+            {
+              "is-focused": Boolean(isFocused),
+              disabled: Boolean(disabled),
+              multiline: Boolean(multiline),
+              fullWidth: Boolean(fullWidth)
+            },
+            inputContainerClassName
+          ),
+          children: Boolean(multiline) ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...rest,
+              ref: inputRef,
+              "aria-describedby": describedBy,
+              "aria-invalid": isError,
+              "aria-required": required,
+              disabled,
+              id: name,
+              name,
+              placeholder,
+              required: Boolean(required),
+              rows,
+              value: value ?? "",
+              className: bem(
+                "input__node",
+                { multiline: true },
+                inputClassName
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "input",
             {
-              className: bem("helperText__content", {
-                "is-error": isError
-              }),
-              children: errorText ?? helperText
+              ...rest,
+              ref: inputRef,
+              "aria-describedby": describedBy,
+              "aria-invalid": isError,
+              "aria-required": required,
+              disabled,
+              id: name,
+              name,
+              placeholder,
+              required: Boolean(required),
+              type,
+              value: value ?? "",
+              className: bem(
+                "input__node",
+                { multiline: false },
+                inputClassName
+              )
             }
           )
         }
-      ),
-      !Boolean(hideCounter) && typeof maxLength === "number" && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
-        value != null ? String(value).length : 0,
-        " / ",
-        maxLength
-      ] }) })
-    ] })
+      ) })
+    ] }),
+    (isError || hasHelperText || typeof maxLength === "number") && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: bem("footer", {
+          "counter-only": !hasHelperText && typeof maxLength === "number"
+        }),
+        children: [
+          (isError || hasHelperText) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-live": isError ? "assertive" : "polite",
+              className: bem("helperText"),
+              id: errorId ?? helperId,
+              role: isError ? "alert" : void 0,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: bem("helperText__content", {
+                    "is-error": isError
+                  }),
+                  children: errorText ?? helperText
+                }
+              )
+            }
+          ),
+          !Boolean(hideCounter) && typeof maxLength === "number" && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
+            value != null ? String(value).length : 0,
+            " / ",
+            maxLength
+          ] }) })
+        ]
+      }
+    )
   ] });
 }
 __name(InputView, "InputView");