@prokodo/ui 0.1.2 → 0.1.3

package/dist/components/post-teaser/PostTeaser.view.js

@@ -1,7 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
-import { isValidElement } from "react";
 import { create } from "../../helpers/bem.js";
 import { localizeDate } from "../../helpers/date.js";
 import { isString, isNumber } from "../../helpers/validations.js";
@@ -58,9 +57,7 @@ function PostTeaserView(props) {
     // perf defaults
     decoding: baseImg.decoding ?? "async",
     loading: baseImg.loading ?? "lazy",
-    sizes: baseImg.sizes ?? "(max-width: 960px) 100vw, 33vw",
-    // IMPORTANT: do not explicitly set imageComponent if it's falsy
-    ...isValidElement(baseImg.imageComponent) ? { imageComponent: baseImg.imageComponent } : {}
+    sizes: baseImg.sizes ?? "(max-width: 960px) 100vw, 33vw"
   } : void 0;
   let formattedDate;
   if (isString(date)) {
@@ -144,7 +141,14 @@ function PostTeaserView(props) {
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx(Image, { ...imageMerged })
+                      /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          ...imageMerged,
+                          alt: (imageMerged == null ? void 0 : imageMerged.alt) ?? "",
+                          src: (imageMerged == null ? void 0 : imageMerged.src) ?? ""
+                        }
+                      )
                     ]
                   }
                 ),

package/dist/components/post-widget/PostWidget.view.js

@@ -1,7 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
-import { isValidElement } from "react";
 import { create } from "../../helpers/bem.js";
 import { localizeDate } from "../../helpers/date.js";
 import { isString } from "../../helpers/validations.js";
@@ -99,8 +98,7 @@ function PostWidgetView({
                       ),
                       decoding: ((_d = (_c = item.componentsProps) == null ? void 0 : _c.image) == null ? void 0 : _d.decoding) ?? ((_e = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _e.decoding) ?? imgBase.decoding ?? "async",
                       loading: ((_g = (_f = item.componentsProps) == null ? void 0 : _f.image) == null ? void 0 : _g.loading) ?? ((_h = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _h.loading) ?? imgBase.loading ?? "lazy",
-                      sizes: ((_j = (_i = item.componentsProps) == null ? void 0 : _i.image) == null ? void 0 : _j.sizes) ?? ((_k = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _k.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 20vw",
-                      ...isValidElement(imgBase == null ? void 0 : imgBase.imageComponent) ? { imageComponent: imgBase.imageComponent } : {}
+                      sizes: ((_j = (_i = item.componentsProps) == null ? void 0 : _i.image) == null ? void 0 : _j.sizes) ?? ((_k = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _k.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 20vw"
                     } : void 0;
                     const linkMerged = {
                       ...(componentsProps == null ? void 0 : componentsProps.link) ?? {},

package/dist/components/post-widget-carousel/PostWidgetCarousel.view.js

@@ -1,7 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsxs, jsx } from "react/jsx-runtime";
-import { isValidElement } from "react";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./PostWidgetCarousel.module.scss.js";
@@ -132,8 +131,7 @@ function PostWidgetCarouselView(props) {
                       containerClassName: bem("carousel__item__image__container"),
                       decoding: ((_e = (_d = item.componentsProps) == null ? void 0 : _d.image) == null ? void 0 : _e.decoding) ?? ((_f = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _f.decoding) ?? imgBase.decoding ?? "async",
                       loading: ((_h = (_g = item.componentsProps) == null ? void 0 : _g.image) == null ? void 0 : _h.loading) ?? ((_i = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _i.loading) ?? imgBase.loading ?? "lazy",
-                      sizes: ((_k = (_j = item.componentsProps) == null ? void 0 : _j.image) == null ? void 0 : _k.sizes) ?? ((_l = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _l.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 100vw",
-                      ...isValidElement(imgBase == null ? void 0 : imgBase.imageComponent) ? { imageComponent: imgBase.imageComponent } : {}
+                      sizes: ((_k = (_j = item.componentsProps) == null ? void 0 : _j.image) == null ? void 0 : _k.sizes) ?? ((_l = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _l.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 100vw"
                     } : void 0;
                     const linkMerged = {
                       ...(componentsProps == null ? void 0 : componentsProps.link) ?? {},

package/dist/components/rating/Rating.client.js

@@ -0,0 +1,162 @@
+"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 { isNumber, isString } from "../../helpers/validations.js";
+import { handleRatingValidation } from "./Rating.validation.js";
+import { RatingView } from "./Rating.view.js";
+function RatingClient({
+  isFocused,
+  name,
+  value,
+  defaultValue,
+  max = 5,
+  min = 1,
+  disabled,
+  readOnly,
+  required,
+  helperText,
+  errorText,
+  errorTranslations,
+  fullWidth,
+  className,
+  fieldClassName,
+  groupClassName,
+  iconClassName,
+  inputRef,
+  onChange,
+  onValidate,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = useState(false);
+  const [val, setVal] = useState(
+    value !== void 0 ? value : defaultValue
+  );
+  const [hover, setHover] = useState(void 0);
+  const [err, setErr] = useState(errorText);
+  useEffect(() => {
+    if (isNumber(value) || isString(value)) {
+      setVal(value);
+    }
+  }, [value]);
+  const runValidation = useCallback(
+    (newVal) => {
+      const numeric = isNumber(newVal) ? newVal : isString(newVal) ? Number(newVal) : void 0;
+      handleRatingValidation(
+        name,
+        numeric,
+        required,
+        min,
+        max,
+        errorTranslations,
+        (n, error) => {
+          setErr(error);
+          onValidate == null ? void 0 : onValidate(n, error);
+        }
+      );
+    },
+    [name, required, min, max, errorTranslations, onValidate]
+  );
+  const handleItemClick = useCallback(
+    (e) => {
+      if (Boolean(disabled) || Boolean(readOnly)) return;
+      const { value: raw } = e.currentTarget.dataset;
+      if (raw == null) return;
+      const numeric = Number(raw);
+      const next = numeric;
+      setVal(next);
+      runValidation(next);
+      onChange == null ? void 0 : onChange({ name, value: next });
+    },
+    [disabled, readOnly, name, onChange, runValidation]
+  );
+  const handleItemHover = useCallback(
+    (e) => {
+      if (Boolean(disabled) || Boolean(readOnly)) return;
+      const { value: raw } = e.currentTarget.dataset;
+      if (raw == null) return;
+      setHover(raw);
+    },
+    [disabled, readOnly]
+  );
+  const handleMouseLeave = useCallback(() => {
+    if (Boolean(disabled) || Boolean(readOnly)) return;
+    setHover(void 0);
+  }, [disabled, readOnly]);
+  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 viewProps = useMemo(
+    () => ({
+      ...rest,
+      name,
+      value: val,
+      hoverValue: hover,
+      max,
+      min,
+      disabled,
+      readOnly,
+      required,
+      helperText,
+      errorText: err,
+      fullWidth,
+      className,
+      fieldClassName,
+      groupClassName,
+      iconClassName,
+      inputRef,
+      isFocused: isFocused !== void 0 ? Boolean(isFocused) : focused,
+      onClick: handleItemClick,
+      onMouseEnter: handleItemHover,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }),
+    [
+      rest,
+      name,
+      val,
+      hover,
+      max,
+      min,
+      disabled,
+      readOnly,
+      required,
+      helperText,
+      err,
+      fullWidth,
+      className,
+      fieldClassName,
+      groupClassName,
+      iconClassName,
+      inputRef,
+      isFocused,
+      focused,
+      handleItemClick,
+      handleItemHover,
+      handleMouseLeave,
+      handleFocus,
+      handleBlur
+    ]
+  );
+  return /* @__PURE__ */ jsx(RatingView, { ...viewProps });
+}
+__name(RatingClient, "RatingClient");
+const RatingClient$1 = memo(RatingClient);
+export {
+  RatingClient$1 as default
+};

package/dist/components/rating/Rating.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import RatingServer from "./Rating.server.js";
+const Rating = createIsland({
+  name: "Rating",
+  Server: RatingServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Rating.lazy.js"), "loadLazy")
+});
+export {
+  Rating
+};

package/dist/components/rating/Rating.lazy.js

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

package/dist/components/rating/Rating.module.scss.js

@@ -0,0 +1,22 @@
+const styles = {
+  "prokodo-Rating": "prokodo-Rating",
+  "prokodo-Rating--full-width": "prokodo-Rating--full-width",
+  "prokodo-Rating__inner": "prokodo-Rating__inner",
+  "prokodo-Rating__label": "prokodo-Rating__label",
+  "prokodo-Rating__field": "prokodo-Rating__field",
+  "prokodo-Rating__group": "prokodo-Rating__group",
+  "prokodo-Rating__icon": "prokodo-Rating__icon",
+  "prokodo-Rating__icon__symbol": "prokodo-Rating__icon__symbol",
+  "prokodo-Rating__icon__sr-only": "prokodo-Rating__icon__sr-only",
+  "prokodo-Rating__icon--filled": "prokodo-Rating__icon--filled",
+  "prokodo-Rating__icon--selected": "prokodo-Rating__icon--selected",
+  "prokodo-Rating__icon--disabled": "prokodo-Rating__icon--disabled",
+  "prokodo-Rating__icon--readonly": "prokodo-Rating__icon--readonly",
+  "prokodo-Rating__footer": "prokodo-Rating__footer",
+  "prokodo-Rating__helperText": "prokodo-Rating__helperText",
+  "prokodo-Rating__helperText__content": "prokodo-Rating__helperText__content",
+  "prokodo-Rating__helperText__content--is-error": "prokodo-Rating__helperText__content--is-error"
+};
+export {
+  styles as default
+};

package/dist/components/rating/Rating.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { RatingView } from "./Rating.view.js";
+function RatingServer(p) {
+  return /* @__PURE__ */ jsx(RatingView, { ...p, readOnly: true });
+}
+__name(RatingServer, "RatingServer");
+export {
+  RatingServer as default
+};

package/dist/components/rating/Rating.validation.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function handleRatingValidation(name, value, required, min, max, errorTranslations, onValidate) {
+  let error;
+  const hasValue = typeof value === "number" && !Number.isNaN(value);
+  if (Boolean(required) && (!Boolean(hasValue) || value === 0)) {
+    error = (errorTranslations == null ? void 0 : errorTranslations.required) ?? "This field is required.";
+  } else if (typeof min === "number" && hasValue && value < min) {
+    error = (errorTranslations == null ? void 0 : errorTranslations.min) ?? `Minimum rating is ${min}.`;
+  } else if (typeof max === "number" && hasValue && value > max) {
+    error = (errorTranslations == null ? void 0 : errorTranslations.max) ?? `Maximum rating is ${max}.`;
+  }
+  onValidate == null ? void 0 : onValidate(name, error);
+}
+__name(handleRatingValidation, "handleRatingValidation");
+export {
+  handleRatingValidation
+};

package/dist/components/rating/Rating.view.js

@@ -0,0 +1,165 @@
+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 "./Rating.module.scss.js";
+import { Label } from "../label/Label.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Rating");
+function RatingView(props) {
+  const {
+    name,
+    label,
+    labelProps = {},
+    disabled,
+    readOnly,
+    isFocused,
+    required,
+    fullWidth,
+    helperText,
+    errorText,
+    className,
+    fieldClassName,
+    groupClassName,
+    iconClassName,
+    hideLegend,
+    value,
+    hoverValue,
+    max = 5,
+    min = 1,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    inputRef
+  } = props;
+  const isError = typeof errorText === "string";
+  const hasHelperText = isString(helperText);
+  const errorId = isError ? `${name}-error` : void 0;
+  const helperId = !isError && hasHelperText ? `${name}-helper` : void 0;
+  const describedBy = [errorId, helperId].filter(Boolean).join(" ") || void 0;
+  const current = hoverValue ?? value ?? null;
+  const maxSafe = max && max > 0 ? max : 5;
+  const minSafe = min && min > 0 ? min : 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: bem(
+        void 0,
+        { "full-width": Boolean(fullWidth) },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: bem("inner"), children: [
+          typeof label === "string" && /* @__PURE__ */ jsx(
+            Label,
+            {
+              ...labelProps,
+              error: isError,
+              htmlFor: name,
+              label,
+              required,
+              className: bem(
+                "label",
+                {
+                  "is-focused": Boolean(isFocused) || current !== null
+                },
+                labelProps.className
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-describedby": describedBy,
+              "aria-disabled": disabled,
+              "aria-invalid": isError,
+              "aria-required": required,
+              className: bem("group", void 0, groupClassName),
+              role: "radiogroup",
+              children: [
+                Array.from({ length: maxSafe }, (_, idx) => {
+                  const itemValue = idx + 1;
+                  const filled = current != null && itemValue <= current;
+                  const isSelected = value != null && itemValue === value;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      "aria-checked": isSelected,
+                      "aria-label": `${itemValue} ${itemValue === 1 ? "star" : "stars"}`,
+                      "data-value": itemValue,
+                      disabled,
+                      role: "radio",
+                      type: "button",
+                      className: bem(
+                        "icon",
+                        {
+                          filled,
+                          disabled: Boolean(disabled),
+                          readonly: Boolean(readOnly),
+                          selected: isSelected
+                        },
+                        iconClassName
+                      ),
+                      onClick,
+                      onMouseEnter,
+                      onMouseLeave,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            "aria-hidden": "true",
+                            className: bem("icon__symbol"),
+                            name: "StarIcon",
+                            size: "md"
+                          }
+                        ),
+                        !Boolean(hideLegend) && /* @__PURE__ */ jsx("span", { className: bem("icon__sr-only"), children: itemValue >= minSafe ? `${itemValue} / ${maxSafe}` : itemValue })
+                      ]
+                    },
+                    itemValue
+                  );
+                }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    readOnly: true,
+                    id: name,
+                    max: maxSafe,
+                    min: minSafe,
+                    name,
+                    type: "hidden",
+                    value: value ?? ""
+                  }
+                )
+              ]
+            }
+          ) })
+        ] }),
+        (isError || hasHelperText) && /* @__PURE__ */ jsx("div", { className: bem("footer"), 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
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+__name(RatingView, "RatingView");
+export {
+  RatingView
+};

package/dist/components/rating/index.js

@@ -0,0 +1,4 @@
+import { Rating } from "./Rating.js";
+export {
+  Rating
+};

package/dist/components/snackbar/Snackbar.module.scss.js

@@ -11,13 +11,12 @@ const styles = {
   "prokodo-SnackbarProvider": "prokodo-SnackbarProvider",
   "prokodo-SnackbarProvider--is-top": "prokodo-SnackbarProvider--is-top",
   "prokodo-SnackbarProvider--is-bottom": "prokodo-SnackbarProvider--is-bottom",
+  "prokodo-SnackbarProvider--is-center": "prokodo-SnackbarProvider--is-center",
   "prokodo-SnackbarProvider--is-left": "prokodo-SnackbarProvider--is-left",
   "prokodo-SnackbarProvider--is-right": "prokodo-SnackbarProvider--is-right",
   "prokodo-SnackbarProvider__snackbar": "prokodo-SnackbarProvider__snackbar",
   "prokodo-SnackbarProvider__snackbar--is-top": "prokodo-SnackbarProvider__snackbar--is-top",
-  "prokodo-SnackbarProvider__snackbar--is-bottom": "prokodo-SnackbarProvider__snackbar--is-bottom",
-  "prokodo-SnackbarProvider__snackbar--is-left": "prokodo-SnackbarProvider__snackbar--is-left",
-  "prokodo-SnackbarProvider__snackbar--is-right": "prokodo-SnackbarProvider__snackbar--is-right"
+  "prokodo-SnackbarProvider__snackbar--is-bottom": "prokodo-SnackbarProvider__snackbar--is-bottom"
 };
 export {
   styles as default

package/dist/components/snackbar/Snackbar.view.js

@@ -3,6 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsxs, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./Snackbar.module.scss.js";
+import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Snackbar");
 function SnackbarView({
   message,
@@ -13,7 +14,9 @@ function SnackbarView({
   elevation = 10,
   className,
   onClose,
-  readOnly
+  readOnly,
+  closeButtonProps,
+  closeIconProps
 }) {
   const pos = anchorOrigin;
   return /* @__PURE__ */ jsxs(
@@ -39,10 +42,23 @@ function SnackbarView({
           "button",
           {
             "aria-label": "Close",
-            className: bem("close"),
             type: "button",
-            onClick: /* @__PURE__ */ __name(() => onClose == null ? void 0 : onClose("closeIcon"), "onClick"),
-            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "×" })
+            ...closeButtonProps,
+            className: bem("close", void 0, closeButtonProps == null ? void 0 : closeButtonProps.className),
+            onClick: /* @__PURE__ */ __name((e) => {
+              var _a;
+              onClose == null ? void 0 : onClose("closeIcon");
+              (_a = closeButtonProps == null ? void 0 : closeButtonProps.onClick) == null ? void 0 : _a.call(closeButtonProps, e);
+            }, "onClick"),
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                "aria-hidden": "true",
+                name: "Cancel01Icon",
+                size: "md",
+                ...closeIconProps
+              }
+            )
           }
         )
       ]

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.2";
+const PROKODO_UI_VERSION = "0.1.3";
 export {
   PROKODO_UI_VERSION
 };

package/dist/helpers/createIsland.js

@@ -18,27 +18,35 @@ function createIsland({
   if (typeof window === "undefined") {
     void loadLazy();
   }
-  function withIslandAttr(el, priority) {
+  function withIslandAttr(el) {
     const islandName = name.toLowerCase();
-    const extra = {
-      "data-island": islandName
-    };
-    if (Boolean(priority)) extra.priority = true;
-    return cloneElement(el, extra);
+    return cloneElement(
+      el,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { "data-island": islandName }
+    );
   }
   __name(withIslandAttr, "withIslandAttr");
-  const Island = /* @__PURE__ */ __name(({ ...raw }) => {
+  const Island = /* @__PURE__ */ __name(({
+    priority = false,
+    ...raw
+  }) => {
     const props = raw;
+    const serverBaseProps = name === "Image" && priority ? {
+      ...props,
+      priority
+    } : props;
     const autoInteractive = Object.entries(props).some(
       ([k, v]) => k.startsWith("on") && typeof v === "function"
     ) || props.redirect !== void 0;
     const interactive = customInteractive ? customInteractive(props) || autoInteractive : autoInteractive;
-    const serverSafe = stripFnProps(props);
+    const serverSafe = stripFnProps(serverBaseProps);
+    const clientProps = priority ? { ...props, priority } : { ...props };
     if (!interactive) {
       return withIslandAttr(/* @__PURE__ */ jsx(Server, { ...serverSafe }));
     }
     const fallback = withIslandAttr(/* @__PURE__ */ jsx(Server, { ...serverSafe }));
-    return /* @__PURE__ */ jsx(Suspense, { fallback, children: withIslandAttr(/* @__PURE__ */ jsx(LazyComp, { ...props })) });
+    return /* @__PURE__ */ jsx(Suspense, { fallback, children: withIslandAttr(/* @__PURE__ */ jsx(LazyComp, { ...clientProps })) });
   }, "Island");
   Island.displayName = `${name}Island`;
   return Island;

package/dist/helpers/createLazyWrapper.js

@@ -16,7 +16,10 @@ function createLazyWrapper({
     ...raw
   }) => {
     var _a, _b;
-    const props = raw;
+    const props = {
+      ...raw,
+      ...name === "Image" && priority ? { priority } : {}
+    };
     const autoInteractive = Object.entries(props).some(
       ([k, v]) => k.startsWith("on") && typeof v === "function"
     ) || props.redirect !== void 0;
@@ -35,13 +38,11 @@ function createLazyWrapper({
           )}, visible=${visible})`
         );
       }
-      const extra = {
-        "data-island": islandName
-      };
-      if (priority) {
-        extra.priority = priority;
-      }
-      return cloneElement(clientEl, extra);
+      return cloneElement(
+        clientEl,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        { "data-island": islandName }
+      );
     } else {
       const serverEl = /* @__PURE__ */ jsx(Server, { ...props });
       if (typeof process !== "undefined" && typeof ((_b = process == null ? void 0 : process.env) == null ? void 0 : _b.PK_ENABLE_DEBUG_LOGS) === "string") {

package/dist/index.js

@@ -35,6 +35,7 @@ import { PostWidget } from "./components/post-widget/PostWidget.js";
 import { PostWidgetCarousel } from "./components/post-widget-carousel/PostWidgetCarousel.js";
 import { ProgressBar } from "./components/progressBar/ProgressBar.js";
 import { Quote } from "./components/quote/Quote.js";
+import { Rating } from "./components/rating/Rating.js";
 import { RichText } from "./components/rich-text/RichText.js";
 import { Select } from "./components/select/Select.js";
 import { SideNav } from "./components/sidenav/SideNav.js";
@@ -82,6 +83,7 @@ export {
   PostWidgetCarousel,
   ProgressBar,
   Quote,
+  Rating,
   RichText,
   Select,
   SideNav,