@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/form/FormField.module.scss.js

@@ -1,10 +1,12 @@
-const e = "gradientMove", o = "fadeInKeyframe", a = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-FormField": "prokodo-FormField",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  a as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/form/FormResponse.js

@@ -1,43 +1,39 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { memo as j, useMemo as d } from "react";
-import { create as _ } from "../../helpers/bem.js";
-import { isArray as h, isNull as v } from "../../helpers/validations.js";
-import x from "./FormResponse.module.scss.js";
-import { List as y } from "../list/List.js";
-const o = _(x, "FormResponse"), F = j(
-  ({ className: f, messages: r, ...N }) => {
-    const t = d(
-      () => Object.keys((r == null ? void 0 : r.errors) || {}),
-      [r == null ? void 0 : r.errors]
-    ), l = d(
-      () => t.map((i) => {
-        var c, p;
-        return {
-          title: i.charAt(0).toUpperCase() + i.slice(1),
-          desc: r != null && r.errors ? (p = (c = r.errors) == null ? void 0 : c[i]) == null ? void 0 : p.join(", ") : "",
-          className: o("errors__item")
-        };
-      }),
-      [t, r == null ? void 0 : r.errors]
-    );
-    return h(l) ? /* @__PURE__ */ u("div", { ...N, className: o(void 0, void 0, f), children: [
-      !v(r == null ? void 0 : r.message) && /* @__PURE__ */ n("p", { "aria-live": "polite", className: o("success"), children: r == null ? void 0 : r.message }),
-      !v(r == null ? void 0 : r.errors) && /* @__PURE__ */ n(
-        y,
-        {
-          "aria-live": "assertive",
-          "aria-relevant": "all",
-          className: o("errors"),
-          classNameDesc: o("errors__desc"),
-          items: l,
-          role: "alert",
-          variant: "error"
-        }
-      )
-    ] }) : null;
-  }
-);
-F.displayName = "FormResponse";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+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 errorKeys = Object.keys((messages == null ? void 0 : messages.errors) || {});
+  const listItems = errorKeys.map((key) => {
+    var _a, _b;
+    return {
+      title: key.charAt(0).toUpperCase() + key.slice(1),
+      desc: (messages == null ? void 0 : messages.errors) ? (_b = (_a = messages.errors) == null ? void 0 : _a[key]) == null ? void 0 : _b.join(", ") : "",
+      className: bem("errors__item")
+    };
+  });
+  if (!isArray(listItems)) return null;
+  return /* @__PURE__ */ jsxs("div", { ...props, className: bem(void 0, void 0, className), children: [
+    !isNull(messages == null ? void 0 : messages.message) && /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: bem("success"), children: messages == null ? void 0 : messages.message }),
+    !isNull(messages == null ? void 0 : messages.errors) && /* @__PURE__ */ jsx(
+      List,
+      {
+        "aria-live": "assertive",
+        "aria-relevant": "all",
+        className: bem("errors"),
+        classNameDesc: bem("errors__desc"),
+        items: listItems,
+        role: "alert",
+        variant: "error"
+      }
+    )
+  ] });
+}, "FormResponse");
+FormResponse.displayName = "FormResponse";
 export {
-  F as FormResponse
+  FormResponse
 };

package/dist/components/form/FormResponse.module.scss.js

@@ -1,14 +1,16 @@
-const o = "gradientMove", e = "fadeInKeyframe", r = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-FormResponse": "prokodo-FormResponse",
   "prokodo-FormResponse__success": "prokodo-FormResponse__success",
   "prokodo-FormResponse__errors": "prokodo-FormResponse__errors",
   "prokodo-FormResponse__errors__item": "prokodo-FormResponse__errors__item",
   "prokodo-FormResponse__errors__desc": "prokodo-FormResponse__errors__desc",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  r as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/form/index.js

@@ -1,6 +1,6 @@
-import { Form as e } from "./Form.js";
-import { FormResponse as p } from "./FormResponse.js";
+import { Form } from "./Form.js";
+import { FormResponse } from "./FormResponse.js";
 export {
-  e as Form,
-  p as FormResponse
+  Form,
+  FormResponse
 };

package/dist/components/grid/Grid.js

@@ -1,18 +1,21 @@
-import { jsx as s } from "react/jsx-runtime";
-import { create as t } from "../../helpers/bem.js";
-import e from "./Grid.module.scss.js";
-const d = t(e, "Grid"), p = ({ spacing: o = 2, className: r, children: i, ...m }) => /* @__PURE__ */ s(
+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 "./Grid.module.scss.js";
+const bem = create(styles, "Grid");
+const Grid = /* @__PURE__ */ __name(({ spacing = 2, className, children, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: d(void 0, void 0, r),
+    className: bem(void 0, void 0, className),
     style: {
-      gap: `${o * 8}px`
+      gap: `${spacing * 8}px`
     },
-    ...m,
-    children: i
+    ...props,
+    children
   }
-);
-p.displayName = "Grid";
+), "Grid");
+Grid.displayName = "Grid";
 export {
-  p as Grid
+  Grid
 };

package/dist/components/grid/Grid.module.scss.js

@@ -1,10 +1,12 @@
-const e = "gradientMove", o = "fadeInKeyframe", a = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Grid": "prokodo-Grid",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  a as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/grid/GridRow.js

@@ -1,26 +1,29 @@
-import { jsx as t } from "react/jsx-runtime";
-import { create as d } from "../../helpers/bem.js";
-import B from "./GridRow.module.scss.js";
-const $ = d(B, "GridRow"), p = ({ align: o, className: m, children: n, xs: e, sm: a, md: r, lg: i, xl: l, ...s }) => /* @__PURE__ */ t(
+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 "./GridRow.module.scss.js";
+const bem = create(styles, "GridRow");
+const GridRow = /* @__PURE__ */ __name(({ align, className, children, xs, sm, md, lg, xl, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: $(
+    className: bem(
       void 0,
       {
-        [`align-${o}`]: !!o,
-        [`xs-${e}`]: !!e,
-        [`sm-${a}`]: !!a,
-        [`md-${r}`]: !!r,
-        [`lg-${i}`]: !!i,
-        [`xl-${l}`]: !!l
+        [`align-${align}`]: Boolean(align),
+        [`xs-${xs}`]: Boolean(xs),
+        [`sm-${sm}`]: Boolean(sm),
+        [`md-${md}`]: Boolean(md),
+        [`lg-${lg}`]: Boolean(lg),
+        [`xl-${xl}`]: Boolean(xl)
       },
-      m
+      className
     ),
-    ...s,
-    children: n
+    ...props,
+    children
   }
-);
-p.displayName = "GridRow";
+), "GridRow");
+GridRow.displayName = "GridRow";
 export {
-  p as GridRow
+  GridRow
 };

package/dist/components/grid/GridRow.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", d = "fadeInKeyframe", r = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-GridRow": "prokodo-GridRow",
   "prokodo-GridRow--align-left": "prokodo-GridRow--align-left",
   "prokodo-GridRow--align-center": "prokodo-GridRow--align-center",
@@ -63,11 +65,11 @@ const o = "gradientMove", d = "fadeInKeyframe", r = {
   "prokodo-GridRow--xl-10": "prokodo-GridRow--xl-10",
   "prokodo-GridRow--xl-11": "prokodo-GridRow--xl-11",
   "prokodo-GridRow--xl-12": "prokodo-GridRow--xl-12",
-  gradientMove: o,
-  fadeInKeyframe: d
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  r as default,
-  d as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/grid/index.js

@@ -1,6 +1,6 @@
-import { Grid as d } from "./Grid.js";
-import { GridRow as f } from "./GridRow.js";
+import { Grid } from "./Grid.js";
+import { GridRow } from "./GridRow.js";
 export {
-  d as Grid,
-  f as GridRow
+  Grid,
+  GridRow
 };

package/dist/components/headline/Headline.client.js

@@ -0,0 +1,85 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+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 { AnimatedText } from "../animatedText/AnimatedText.js";
+const bem = create(styles, "Headline");
+const HeadlineClient = /* @__PURE__ */ __name(({
+  animated,
+  animationProps = {},
+  type = "h3",
+  size = "md",
+  highlight,
+  schema = {},
+  className,
+  align,
+  isRichtext = false,
+  variant = "inherit",
+  ...props
+}) => {
+  const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(variant);
+  const modifier = {
+    [variant]: !!variant,
+    "is-highlighted": isHighlighted,
+    highlighted: isHighlighted,
+    [`${variant}--highlighted`]: isHighlighted,
+    [size]: typeof size === "string" && !!size,
+    [`${align}`]: !!align
+  };
+  const bemClass = bem(void 0, modifier, className);
+  const customStyle = useMemo(() => {
+    if (typeof size === "number")
+      return {
+        fontSize: `${size}em`
+      };
+    return {};
+  }, [size]);
+  const ariaLabel = typeof props.children === "string" ? props.children : void 0;
+  const baseProps = useMemo(
+    () => ({
+      "aria-label": ariaLabel,
+      className: bemClass,
+      style: customStyle,
+      node: void 0,
+      ...schema
+    }),
+    [ariaLabel, bemClass, customStyle, schema]
+  );
+  const animateText = useCallback(
+    (children) => Boolean(animated) ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children }) : children,
+    [animated, animationProps]
+  );
+  const renderHTag = useCallback(
+    (attr) => {
+      if (type[1] === void 0) return null;
+      const children = attr.children;
+      const HTag = type;
+      return /* @__PURE__ */ jsx(HTag, { ...attr, "aria-level": parseInt(type[1], 10), ...baseProps, children: animateText(children) });
+    },
+    [type, baseProps, animateText]
+  );
+  if (isRichtext) {
+    return /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        className: bem("headline"),
+        remarkPlugins: [remarkGfm, remarkBreaks],
+        components: {
+          p: /* @__PURE__ */ __name((props2) => renderHTag(props2), "p")
+        },
+        children: props == null ? void 0 : props.children
+      }
+    );
+  }
+  return renderHTag(props);
+}, "HeadlineClient");
+export {
+  HeadlineClient
+};

package/dist/components/headline/Headline.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", e = "fadeInKeyframe", d = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Headline": "prokodo-Headline",
   "prokodo-Headline--is-highlighted": "prokodo-Headline--is-highlighted",
   "prokodo-Headline--primary--highlighted": "prokodo-Headline--primary--highlighted",
@@ -24,11 +26,11 @@ const o = "gradientMove", e = "fadeInKeyframe", d = {
   "prokodo-Headline--xxl": "prokodo-Headline--xxl",
   "prokodo-Headline--center": "prokodo-Headline--center",
   "prokodo-Headline--right": "prokodo-Headline--right",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  d as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/headline/Headline.server.js

@@ -0,0 +1,73 @@
+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";
+const bem = create(styles, "Headline");
+const Headline = /* @__PURE__ */ __name(({
+  animated,
+  type = "h3",
+  size = "md",
+  highlight,
+  schema = {},
+  className,
+  align,
+  isRichtext = false,
+  variant = "inherit",
+  renderText,
+  children,
+  ...props
+}) => {
+  const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(variant);
+  const modifier = {
+    [variant]: !!variant,
+    "is-highlighted": isHighlighted,
+    highlighted: isHighlighted,
+    [`${variant}--highlighted`]: isHighlighted,
+    [size]: typeof size === "string" && !!size,
+    [`${align}`]: !!align
+  };
+  const bemClass = bem(void 0, modifier, className);
+  const customStyle = typeof size === "number" ? { fontSize: `${size}em` } : {};
+  const ariaLabel = typeof children === "string" ? children : void 0;
+  const baseProps = {
+    "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 HTag = type;
+    return /* @__PURE__ */ jsx(HTag, { ...attr, "aria-level": parseInt(type[1] ?? "", 10), ...baseProps, children: wrapText(node) });
+  }, "renderHTag");
+  if (isRichtext) {
+    return /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        className: bem("headline"),
+        remarkPlugins: [remarkGfm, remarkBreaks],
+        components: {
+          p: /* @__PURE__ */ __name((props2) => renderHTag(props2), "p")
+        },
+        children
+      }
+    );
+  }
+  return renderHTag(props);
+}, "Headline");
+export {
+  Headline
+};

package/dist/components/headline/Headline.variants.js

@@ -0,0 +1,9 @@
+const POSSIBLE_HIGHLIGHTS = [
+  "inherit",
+  "primary",
+  "secondary",
+  "white"
+];
+export {
+  POSSIBLE_HIGHLIGHTS
+};

package/dist/components/headline/index.js

@@ -1,5 +1,6 @@
-import { Headline as I, POSSIBLE_HIGHLIGHTS as S } from "./Headline.js";
+import { Headline } from "./Headline.server.js";
+import { HeadlineClient } from "./Headline.client.js";
 export {
-  I as Headline,
-  S as POSSIBLE_HIGHLIGHTS
+  Headline,
+  HeadlineClient
 };

package/dist/components/icon/Icon.js

@@ -1,9 +1,12 @@
-import { jsx as c } from "react/jsx-runtime";
-import { PROKODO_UI_VERSION as i } from "../../constants/project.js";
-import { create as a } from "../../helpers/bem.js";
-import m from "./Icon.module.scss.js";
-const p = a(m, "Icon"), u = (e) => {
-  switch (e) {
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { PROKODO_UI_VERSION } from "../../constants/project.js";
+import { create } from "../../helpers/bem.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":
@@ -15,26 +18,28 @@ const p = a(m, "Icon"), u = (e) => {
     case "xl":
       return 50;
     default:
-      return e ?? 16;
+      return s ?? 16;
   }
-}, g = (e) => `https://cdn.jsdelivr.net/gh/prokodo-agency/ui@v${i}/assets/icons/${e.replace(/Icon$/, "").replace(/([a-z])([A-Z0-9])/g, "$1_$2").replace(/([0-9])([a-zA-Z])/g, "$1_$2").toLowerCase()}_icon.svg`, $ = ({ name: e, size: o, label: r, className: s = "", ...n }) => {
-  if (!e) return null;
-  const t = u(o);
-  return /* @__PURE__ */ c(
+}, "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 }) => {
+  if (!name) return null;
+  const sizePx = getIconSize(size);
+  return /* @__PURE__ */ jsx(
     "img",
     {
-      alt: r ?? "",
-      "aria-hidden": typeof r == "string" ? void 0 : "true",
-      className: p(void 0, void 0, s),
-      height: t,
-      role: typeof r == "string" ? "img" : "presentation",
-      src: g(e),
-      width: t,
-      ...n
+      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
     }
   );
-};
+}, "Icon");
 export {
-  $ as Icon,
-  u as getIconSize
+  Icon,
+  getIconSize
 };

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

@@ -1,4 +1,6 @@
-const o = "gradientMove", r = "fadeInKeyframe", n = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Icon--primary": "prokodo-Icon--primary",
   "prokodo-Icon--secondary": "prokodo-Icon--secondary",
   "prokodo-Icon--info": "prokodo-Icon--info",
@@ -6,11 +8,11 @@ const o = "gradientMove", r = "fadeInKeyframe", n = {
   "prokodo-Icon--warning": "prokodo-Icon--warning",
   "prokodo-Icon--error": "prokodo-Icon--error",
   "prokodo-Icon--white": "prokodo-Icon--white",
-  gradientMove: o,
-  fadeInKeyframe: r
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  n as default,
-  r as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/icon/index.js

@@ -1,5 +1,5 @@
-import { Icon as c, getIconSize as n } from "./Icon.js";
+import { Icon, getIconSize } from "./Icon.js";
 export {
-  c as Icon,
-  n as getIconSize
+  Icon,
+  getIconSize
 };

package/dist/components/image/Image.js

@@ -1,29 +1,35 @@
-import { jsxs as g, jsx as m } from "react/jsx-runtime";
-import { create as d } from "../../helpers/bem.js";
-import { isString as f } from "../../helpers/validations.js";
-import l from "./Image.module.scss.js";
-const e = d(l, "Image"), I = ({
-  alt: o,
-  caption: r,
-  containerClassName: t,
-  captionClassName: s,
-  className: a,
-  imageComponent: n = "img",
-  ...c
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Image.module.scss.js";
+const bem = create(styles, "Image");
+const Image = /* @__PURE__ */ __name(({
+  alt,
+  caption,
+  containerClassName,
+  captionClassName,
+  className,
+  imageComponent: CustomImage = "img",
+  ...props
 }) => {
-  const i = () => /* @__PURE__ */ m(
-    n,
+  const renderImage = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
+    CustomImage,
     {
-      alt: o ?? "",
-      className: e("image", void 0, a),
-      ...c
+      alt: alt ?? "",
+      className: bem("image", void 0, className),
+      ...props
     }
-  );
-  return f(r) ? /* @__PURE__ */ g("figure", { className: e(void 0, void 0, t), children: [
-    i(),
-    /* @__PURE__ */ m("figcaption", { className: e("caption", void 0, s), children: r })
-  ] }) : i();
-};
+  ), "renderImage");
+  if (isString(caption)) {
+    return /* @__PURE__ */ jsxs("figure", { className: bem(void 0, void 0, containerClassName), children: [
+      renderImage(),
+      /* @__PURE__ */ jsx("figcaption", { className: bem("caption", void 0, captionClassName), children: caption })
+    ] });
+  }
+  return renderImage();
+}, "Image");
 export {
-  I as Image
+  Image
 };