@prokodo/ui 0.0.38 → 0.0.40

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",

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

@@ -1,30 +1,30 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./ImageText.module.scss.js";
-import { RichText } from "../rich-text/RichText.js";
 import { Button } from "../button/Button.js";
+import { Lottie } from "../lottie/Lottie.js";
 import { Grid } from "../grid/Grid.js";
 import { GridRow } from "../grid/GridRow.js";
 import { Animated } from "../animated/Animated.js";
-import { Headline } from "../headline/Headline.server.js";
-import { Lottie } from "../lottie/Lottie.js";
+import { Headline } from "../headline/Headline.js";
+import { RichText } from "../rich-text/RichText.js";
 import { Image } from "../image/Image.js";
 const bem = create(styles, "ImageText");
 const ImageText = /* @__PURE__ */ __name(({
   animatedBorder,
   reverse,
   subTitle,
+  subTitleProps,
   title,
+  titleProps,
   content,
   animation,
   image,
   button
 }) => {
-  const [lineVisible, setLineVisible] = useState(false);
   const leftColumnMd = image ? animatedBorder ? 4 : 6 : animatedBorder ? 10 : 12;
   return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(
     Grid,
@@ -33,37 +33,27 @@ const ImageText = /* @__PURE__ */ __name(({
         "is-reverse": Boolean(reverse)
       }),
       children: [
-        animatedBorder && /* @__PURE__ */ jsx(GridRow, { className: bem("animated__border__wrapper"), sm: 2, xs: 3, children: /* @__PURE__ */ jsx(
-          Animated,
-          {
-            className: bem("animated__border", {
-              "is-visible": lineVisible,
-              [`${(animatedBorder == null ? void 0 : animatedBorder.direction) ?? "top-to-bottom"}`]: !!(animatedBorder == null ? void 0 : animatedBorder.direction)
-            }),
-            onAnimate: /* @__PURE__ */ __name((visible) => setLineVisible(visible), "onAnimate")
-          }
-        ) }),
         /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
-          subTitle && /* @__PURE__ */ jsx(
+          isString(subTitle) && /* @__PURE__ */ jsx(
             Headline,
             {
               highlight: true,
-              className: bem("sub__headline", void 0, subTitle == null ? void 0 : subTitle.className),
               size: "sm",
               type: "h3",
               variant: "primary",
-              ...subTitle,
-              children: subTitle == null ? void 0 : subTitle.content
+              ...subTitleProps,
+              className: bem("sub__headline", void 0, subTitleProps == null ? void 0 : subTitleProps.className),
+              children: subTitle
             }
           ),
           /* @__PURE__ */ jsx(
             Headline,
             {
-              className: bem("headline", void 0, title == null ? void 0 : title.className),
               size: "lg",
               type: "h2",
-              ...title,
-              children: title.content
+              ...titleProps,
+              className: bem("headline", void 0, titleProps == null ? void 0 : titleProps.className),
+              children: title
             }
           ),
           isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
@@ -76,19 +66,13 @@ const ImageText = /* @__PURE__ */ __name(({
             }
           )
         ] }) }),
-        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(
-          Animated,
+        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(Animated, { className: bem("animated__container"), children: isString(animation) ? /* @__PURE__ */ jsx(
+          Lottie,
           {
-            className: bem("animated__container"),
-            children: animation ? /* @__PURE__ */ jsx(
-              Lottie,
-              {
-                animationName: animation,
-                className: bem("animation")
-              }
-            ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image })
+            animation,
+            className: bem("animation")
           }
-        ) })
+        ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image }) }) })
       ]
     }
   ) });

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

@@ -3,10 +3,6 @@ const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-ImageText__grid": "prokodo-ImageText__grid",
   "prokodo-ImageText__grid--is-reverse": "prokodo-ImageText__grid--is-reverse",
-  "prokodo-ImageText__animated__border": "prokodo-ImageText__animated__border",
-  "prokodo-ImageText__animated__border--bottom-to-top": "prokodo-ImageText__animated__border--bottom-to-top",
-  "prokodo-ImageText__animated__border--is-visible": "prokodo-ImageText__animated__border--is-visible",
-  "prokodo-ImageText__animated__border__wrapper": "prokodo-ImageText__animated__border__wrapper",
   "prokodo-ImageText__sub__headline": "prokodo-ImageText__sub__headline",
   "prokodo-ImageText__content": "prokodo-ImageText__content",
   "prokodo-ImageText__content__paragraph": "prokodo-ImageText__content__paragraph",

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

@@ -0,0 +1,105 @@
+"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, useMemo } from "react";
+import { isNull, isNumber } from "../../helpers/validations.js";
+import { InputView } from "./Input.view.js";
+import { handleValidation } from "./InputValidation.js";
+function InputClient({
+  multiline,
+  isFocused,
+  type: rawType = "text",
+  name,
+  value,
+  required,
+  min,
+  max,
+  maxLength,
+  customRegexPattern,
+  errorText,
+  errorTranslations,
+  onValidate,
+  onChange,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = useState(false);
+  const [val, setVal] = useState(value);
+  const [err, setErr] = useState(errorText);
+  useEffect(() => {
+    if (!isNull(value)) setVal(value);
+  }, [value]);
+  const handleChange = useCallback(
+    (e) => {
+      const v = e.target.value;
+      if (isNumber(maxLength) && v.length > maxLength) return;
+      setVal(v);
+      const minInt = rawType === "number" ? min : void 0;
+      const maxInt = rawType === "number" ? max : void 0;
+      handleValidation(
+        Boolean(multiline) ? "text" : rawType,
+        name,
+        v,
+        required,
+        minInt,
+        maxInt,
+        customRegexPattern,
+        errorTranslations,
+        (n, error) => {
+          setErr(error);
+          onValidate == null ? void 0 : onValidate(n, error);
+        }
+      );
+      onChange == null ? void 0 : onChange(e);
+    },
+    [
+      multiline,
+      rawType,
+      name,
+      required,
+      min,
+      max,
+      maxLength,
+      customRegexPattern,
+      errorTranslations,
+      onValidate,
+      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,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }), [isFocused, focused, val, err, name, handleChange, handleFocus, handleBlur, rest]);
+  const viewProps = Boolean(multiline) ? {
+    ...viewBase,
+    multiline: true
+  } : {
+    ...viewBase,
+    type: rawType,
+    rows: void 0,
+    minRows: void 0,
+    maxRows: void 0
+  };
+  return /* @__PURE__ */ jsx(InputView, { ...viewProps });
+}
+__name(InputClient, "InputClient");
+const InputClient$1 = memo(InputClient);
+export {
+  InputClient$1 as default
+};