@prokodo/ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { create } from "../../helpers/bem.js";
+import { isArray } from "../../helpers/validations.js";
+import styles from "./Form.module.scss.js";
+import { FormField } from "./FormField.js";
+import { FormResponse } from "./FormResponse.js";
+import { Grid } from "../grid/Grid.js";
+import { Button } from "../button/Button.js";
+import { Headline } from "../headline/Headline.js";
+const bem = create(styles, "Form");
+const FormView = /* @__PURE__ */ __name(({
+  id,
+  variant = "primary",
+  disabled,
+  action,
+  label,
+  hideHeadline,
+  headlineProps,
+  className,
+  formState,
+  formMessages,
+  hideResponse,
+  button,
+  children,
+  honeypot,
+  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: [
+        /* @__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(
+            "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 }),
+          ((_a = honeypot == null ? void 0 : honeypot.value) == null ? void 0 : _a.length) === 0 && /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              "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");
+export {
+  FormView
+};

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

@@ -0,0 +1,98 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./FormField.module.scss.js";
+import { GridRow } from "../grid/GridRow.js";
+import { DatePicker } from "../datePicker/DatePicker.js";
+import { Input } from "../input/Input.js";
+import { Select } from "../select/Select.js";
+import { Slider } from "../slider/Slider.js";
+import { Switch } from "../switch/Switch.js";
+const bem = create(styles, "FormField");
+function FormFieldClient({
+  fieldType,
+  visible,
+  variant,
+  messagesFields,
+  onChange,
+  onValidate,
+  ...props
+}) {
+  var _a, _b;
+  const renderFieldContainer = useCallback((children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }), []);
+  if (visible === false) return null;
+  switch (fieldType) {
+    case "switch":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            priority: true,
+            color: variant,
+            ...props,
+            onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
+          }
+        )
+      );
+    case "slider":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            priority: true,
+            ...props,
+            onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value == null ? void 0 : value.toString()), "onChange")
+          }
+        )
+      );
+    case "select":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            priority: true,
+            ...props,
+            onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
+          }
+        )
+      );
+    case "input":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            priority: true,
+            errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
+            onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
+            onChange: /* @__PURE__ */ __name((e) => onChange == null ? void 0 : onChange(props, e.target.value), "onChange"),
+            ...props
+          }
+        )
+      );
+    case "date":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            priority: true,
+            ...props,
+            translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
+            onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
+            onChange: /* @__PURE__ */ __name((value) => onChange == null ? void 0 : onChange(
+              props,
+              typeof value === "object" ? value == null ? void 0 : value.format("YYYY-MM-DDTHH:mm:ssZ") : value
+            ), "onChange")
+          }
+        )
+      );
+    default:
+      return null;
+  }
+}
+__name(FormFieldClient, "FormFieldClient");
+export {
+  FormFieldClient as default
+};

package/dist/components/form/FormField.js

@@ -1,98 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import styles from "./FormField.module.scss.js";
-import { GridRow } from "../grid/GridRow.js";
-import { DatePicker } from "../datePicker/DatePicker.js";
-import { Select } from "../select/Select.js";
-import { Slider } from "../slider/Slider.js";
-import { Switch } from "../switch/Switch.js";
-import { Input } from "../input/Input.js";
-const bem = create(styles, "FormField");
-const FormField = memo(
-  ({
-    fieldType,
-    visible,
-    variant = "primary",
-    messagesFields,
-    onChange,
-    onValidate,
-    ...props
-  }) => {
-    var _a, _b;
-    const renderFieldContainer = useCallback(
-      (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
-      []
-    );
-    if (visible === false) return null;
-    switch (fieldType) {
-      case "switch":
-        return renderFieldContainer(
-          /* @__PURE__ */ jsx(
-            Switch,
-            {
-              color: variant,
-              ...props,
-              onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
-            }
-          )
-        );
-      case "slider":
-        return renderFieldContainer(
-          /* @__PURE__ */ jsx(
-            Slider,
-            {
-              ...props,
-              onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value == null ? void 0 : value.toString()), "onChange")
-            }
-          )
-        );
-      case "select":
-        return renderFieldContainer(
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              color: variant,
-              ...props,
-              onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
-            }
-          )
-        );
-      case "input":
-        return renderFieldContainer(
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              color: variant,
-              errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
-              onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
-              onChange: /* @__PURE__ */ __name((e) => onChange == null ? void 0 : onChange(props, e.target.value), "onChange"),
-              ...props
-            }
-          )
-        );
-      case "date":
-        return renderFieldContainer(
-          /* @__PURE__ */ jsx(
-            DatePicker,
-            {
-              ...props,
-              errorTranslations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
-              onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
-              onChange: /* @__PURE__ */ __name((value) => onChange == null ? void 0 : onChange(
-                props,
-                value == null ? void 0 : value.format("YYYY-MM-DDTHH:mm:ssZ")
-              ), "onChange")
-            }
-          )
-        );
-      default:
-        return null;
-    }
-  }
-);
+import { createIsland } from "../../helpers/createIsland.js";
+import FormFieldServer from "./FormField.server.js";
+const FormField = createIsland({
+  name: "FormField",
+  Server: FormFieldServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./FormField.lazy.js"), "loadLazy")
+});
 FormField.displayName = "FormField";
 export {
   FormField

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

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

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

@@ -0,0 +1,81 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./FormField.module.scss.js";
+import { DatePicker } from "../datePicker/DatePicker.js";
+import { Input } from "../input/Input.js";
+import { Select } from "../select/Select.js";
+import { Slider } from "../slider/Slider.js";
+import { Switch } from "../switch/Switch.js";
+import { GridRow } from "../grid/GridRow.js";
+const bem = create(styles, "FormField");
+function FormFieldServer({
+  fieldType,
+  visible,
+  variant,
+  messagesFields,
+  ...props
+}) {
+  var _a, _b;
+  props == null ? true : delete props.onChange;
+  props == null ? true : delete props.onValidate;
+  const renderFieldContainer = /* @__PURE__ */ __name((children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }), "renderFieldContainer");
+  if (visible === false) return null;
+  switch (fieldType) {
+    case "switch":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            color: variant,
+            ...props
+          }
+        )
+      );
+    case "slider":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            ...props
+          }
+        )
+      );
+    case "select":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            ...props
+          }
+        )
+      );
+    case "input":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
+            ...props
+          }
+        )
+      );
+    case "date":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            ...props,
+            translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date
+          }
+        )
+      );
+    default:
+      return null;
+  }
+}
+__name(FormFieldServer, "FormFieldServer");
+export {
+  FormFieldServer as default
+};

package/dist/components/headline/{Headline.server.js → Headline.js}

@@ -1,15 +1,15 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-import ReactMarkdown from "react-markdown";
-import remarkBreaks from "remark-breaks";
-import remarkGfm from "remark-gfm";
 import { create } from "../../helpers/bem.js";
 import styles from "./Headline.module.scss.js";
 import { POSSIBLE_HIGHLIGHTS } from "./Headline.variants.js";
+import { RichText } from "../rich-text/RichText.js";
+import { AnimatedText } from "../animatedText/AnimatedText.js";
 const bem = create(styles, "Headline");
 const Headline = /* @__PURE__ */ __name(({
   animated,
+  animationProps = {},
   type = "h3",
   size = "md",
   highlight,
@@ -18,9 +18,8 @@ const Headline = /* @__PURE__ */ __name(({
   align,
   isRichtext = false,
   variant = "inherit",
-  renderText,
   children,
-  ...props
+  ...remainingProps
 }) => {
   const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(variant);
   const modifier = {
@@ -38,36 +37,39 @@ const Headline = /* @__PURE__ */ __name(({
     "aria-label": ariaLabel,
     className: bemClass,
     style: customStyle,
-    node: void 0,
     ...schema
   };
-  const wrapText = /* @__PURE__ */ __name((node) => {
-    if (typeof node !== "string") return node;
-    if (renderText) return renderText(node);
-    if (Boolean(animated)) return /* @__PURE__ */ jsx("span", { children: node });
-    return node;
-  }, "wrapText");
-  const renderHTag = /* @__PURE__ */ __name((attr) => {
-    if (!/^h[1-6]$/.test(type)) return null;
-    const node = attr.children;
+  const animateText = /* @__PURE__ */ __name((text) => {
+    if (animated === false || animated === void 0) {
+      return text;
+    }
+    return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: text });
+  }, "animateText");
+  const renderHTag = /* @__PURE__ */ __name(({ children: headingChildren }) => {
     const HTag = type;
-    return /* @__PURE__ */ jsx(HTag, { ...attr, "aria-level": parseInt(type[1] ?? "", 10), ...baseProps, children: wrapText(node) });
+    const headingLevel = parseInt(type.charAt(1), 10);
+    return /* @__PURE__ */ jsx(HTag, { ...baseProps, "aria-level": headingLevel, children: animateText(headingChildren) });
   }, "renderHTag");
   if (isRichtext) {
     return /* @__PURE__ */ jsx(
-      ReactMarkdown,
+      RichText,
       {
-        className: bem("headline"),
-        remarkPlugins: [remarkGfm, remarkBreaks],
-        components: {
-          p: /* @__PURE__ */ __name((props2) => renderHTag(props2), "p")
-        },
+        animated,
+        animationProps,
+        className: bem("headline", void 0, className),
+        itemProp: void 0,
+        linkComponent: void 0,
+        schema,
+        variant,
+        ...remainingProps,
+        overrideParagraph: /* @__PURE__ */ __name((textContent) => renderHTag({ children: textContent }), "overrideParagraph"),
         children
       }
     );
   }
-  return renderHTag(props);
+  return renderHTag({ children });
 }, "Headline");
+Headline.displayName = "Headline";
 export {
   Headline
 };

package/dist/components/headline/index.js

@@ -1,6 +1,4 @@
-import { Headline } from "./Headline.server.js";
-import { HeadlineClient } from "./Headline.client.js";
+import { Headline } from "./Headline.js";
 export {
-  Headline,
-  HeadlineClient
+  Headline
 };

package/dist/components/icon/Icon.js

@@ -3,42 +3,45 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import { PROKODO_UI_VERSION } from "../../constants/project.js";
 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) => {
-  switch (s) {
-    case "xs":
-      return 15;
-    case "sm":
-      return 20;
-    case "md":
-      return 30;
-    case "lg":
-      return 40;
-    case "xl":
-      return 50;
-    default:
-      return s ?? 16;
-  }
-}, "getIconSize");
-const urlFromName = /* @__PURE__ */ __name((name) => `https://cdn.jsdelivr.net/gh/prokodo-agency/ui@v${PROKODO_UI_VERSION}/assets/icons/${name.replace(/Icon$/, "").replace(/([a-z])([A-Z0-9])/g, "$1_$2").replace(/([0-9])([a-zA-Z])/g, "$1_$2").toLowerCase()}_icon.svg`, "urlFromName");
-const Icon = /* @__PURE__ */ __name(({ name, size, label, className = "", ...rest }) => {
+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,
+  size,
+  label,
+  color,
+  className,
+  ...rest
+}) => {
   if (!name) return null;
+  const isCustomColor = Boolean(color == null ? void 0 : color.includes("#")) || Boolean(color == null ? void 0 : color.includes("rgb")) || Boolean(color == null ? void 0 : color.includes("rgba"));
   const sizePx = getIconSize(size);
+  const url = iconUrl(name);
+  const mask = {
+    width: sizePx,
+    height: sizePx,
+    backgroundColor: Boolean(isCustomColor) ? color : "currentColor",
+    maskImage: `url("${url}")`,
+    WebkitMaskImage: `url("${url}")`
+  };
   return /* @__PURE__ */ jsx(
-    "img",
+    "span",
     {
-      alt: label ?? "",
-      "aria-hidden": typeof label === "string" ? void 0 : "true",
-      className: bem(void 0, void 0, className),
-      height: sizePx,
-      role: typeof label === "string" ? "img" : "presentation",
-      src: urlFromName(name),
-      width: sizePx,
-      ...rest
+      ...rest,
+      "aria-hidden": isString(label) ? void 0 : true,
+      "aria-label": label,
+      role: isString(label) ? "img" : "presentation",
+      style: { ...mask },
+      className: bem(void 0, {
+        [`${color}`]: Boolean(color)
+      }, className)
     }
   );
 }, "Icon");
+Icon.displayName = "Icon";
 export {
   Icon,
   getIconSize

package/dist/components/icon/Icon.module.scss.js

@@ -1,6 +1,7 @@
 const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
+  "prokodo-Icon": "prokodo-Icon",
   "prokodo-Icon--primary": "prokodo-Icon--primary",
   "prokodo-Icon--secondary": "prokodo-Icon--secondary",
   "prokodo-Icon--info": "prokodo-Icon--info",