@prokodo/ui 0.0.52 → 0.0.53

package/dist/components/inputOTP/InputOTP.js

@@ -16,13 +16,16 @@ const InputOTP = memo(
     onChange,
     ...props
   }) => {
-    const [otp, setOtp] = useState(() => Array(length).fill(""));
+    const [otp, setOtp] = useState(
+      () => Array(length).fill("")
+    );
     const inputs = useRef([]);
     useEffect(() => {
       inputs.current = inputs.current.slice(0, length);
       setOtp((prev) => {
         const next = Array(length).fill("");
-        for (let i = 0; i < Math.min(prev.length, length); i++) next[i] = prev[i] ?? "";
+        for (let i = 0; i < Math.min(prev.length, length); i++)
+          next[i] = prev[i] ?? "";
         return next;
       });
     }, [length]);
@@ -35,104 +38,118 @@ const InputOTP = memo(
         (_a = el.setSelectionRange) == null ? void 0 : _a.call(el, 0, el.value.length);
       }
     }, []);
-    const emitChange = useCallback((next) => {
-      const joined = next.join("");
-      onChange == null ? void 0 : onChange(joined);
-      const complete = next.every((d) => d !== "");
-      if (complete && !completedRef.current) {
-        completedRef.current = true;
-        onComplete == null ? void 0 : onComplete(joined);
-      } else if (!complete && completedRef.current) {
-        completedRef.current = false;
-      }
-    }, [onChange, onComplete]);
-    const setDigit = useCallback((digit, index) => {
-      const d = digit.replace(/\D/g, "");
-      if (d.length > 1) return;
-      setOtp((prev) => {
-        if (prev[index] === d) return prev;
-        const next = [...prev];
-        next[index] = d;
-        if (d !== "" && index < length - 1) {
-          const nextEmpty = next.findIndex((val, i) => i > index && val === "");
-          const to = nextEmpty !== -1 ? nextEmpty : index + 1;
-          focusIndex(to);
+    const emitChange = useCallback(
+      (next) => {
+        const joined = next.join("");
+        onChange == null ? void 0 : onChange(joined);
+        const complete = next.every((d) => d !== "");
+        if (complete && !completedRef.current) {
+          completedRef.current = true;
+          onComplete == null ? void 0 : onComplete(joined);
+        } else if (!complete && completedRef.current) {
+          completedRef.current = false;
         }
-        emitChange(next);
-        return next;
-      });
-    }, [emitChange, focusIndex, length]);
-    const handleChange = useCallback(
-      (e, index) => {
-        setDigit(e.target.value, index);
       },
-      [setDigit]
+      [onChange, onComplete]
     );
-    const handleKeyDown = useCallback((e, index) => {
-      const { key } = e;
-      if (key === "Backspace") {
-        e.preventDefault();
+    const setDigit = useCallback(
+      (digit, index) => {
+        const d = digit.replace(/\D/g, "");
+        if (d.length > 1) return;
         setOtp((prev) => {
+          if (prev[index] === d) return prev;
           const next = [...prev];
-          if (next[index] !== "") {
-            next[index] = "";
-            focusIndex(index);
-          } else if (index > 0) {
-            next[index - 1] = "";
-            focusIndex(index - 1);
+          next[index] = d;
+          if (d !== "" && index < length - 1) {
+            const nextEmpty = next.findIndex(
+              (val, i) => i > index && val === ""
+            );
+            const to = nextEmpty !== -1 ? nextEmpty : index + 1;
+            focusIndex(to);
           }
           emitChange(next);
           return next;
         });
-        return;
-      }
-      if (key === "ArrowLeft") {
-        e.preventDefault();
-        if (index > 0) focusIndex(index - 1);
-        return;
-      }
-      if (key === "ArrowRight") {
-        e.preventDefault();
-        if (index < length - 1) focusIndex(index + 1);
-        return;
-      }
-      if (key === "Home") {
-        e.preventDefault();
-        focusIndex(0);
-        return;
-      }
-      if (key === "End") {
-        e.preventDefault();
-        focusIndex(length - 1);
-        return;
-      }
-      if (key.length === 1 && !/[0-9]/.test(key)) {
-        e.preventDefault();
-      }
-    }, [emitChange, focusIndex, length]);
+      },
+      [emitChange, focusIndex, length]
+    );
+    const handleChange = useCallback(
+      (e, index) => {
+        setDigit(e.target.value, index);
+      },
+      [setDigit]
+    );
+    const handleKeyDown = useCallback(
+      (e, index) => {
+        const { key } = e;
+        if (key === "Backspace") {
+          e.preventDefault();
+          setOtp((prev) => {
+            const next = [...prev];
+            if (next[index] !== "") {
+              next[index] = "";
+              focusIndex(index);
+            } else if (index > 0) {
+              next[index - 1] = "";
+              focusIndex(index - 1);
+            }
+            emitChange(next);
+            return next;
+          });
+          return;
+        }
+        if (key === "ArrowLeft") {
+          e.preventDefault();
+          if (index > 0) focusIndex(index - 1);
+          return;
+        }
+        if (key === "ArrowRight") {
+          e.preventDefault();
+          if (index < length - 1) focusIndex(index + 1);
+          return;
+        }
+        if (key === "Home") {
+          e.preventDefault();
+          focusIndex(0);
+          return;
+        }
+        if (key === "End") {
+          e.preventDefault();
+          focusIndex(length - 1);
+          return;
+        }
+        if (key.length === 1 && !/[0-9]/.test(key)) {
+          e.preventDefault();
+        }
+      },
+      [emitChange, focusIndex, length]
+    );
     const handleFocus = useCallback((index) => {
       var _a;
       const el = inputs.current[index];
       (_a = el == null ? void 0 : el.setSelectionRange) == null ? void 0 : _a.call(el, 0, el.value.length);
     }, []);
-    const handlePaste = useCallback((e) => {
-      e.preventDefault();
-      const digits = (e.clipboardData.getData("text") || "").replace(/\D/g, "").slice(0, length).split("");
-      if (digits.length === 0) return;
-      setOtp((prev) => {
-        const next = [...prev];
-        let writeIndex = next.findIndex((d) => d === "");
-        if (writeIndex === -1) writeIndex = 0;
-        for (let i = 0; i < digits.length && writeIndex < length; i++) {
-          next[writeIndex] = digits[i];
-          writeIndex++;
-        }
-        emitChange(next);
-        const nextEmpty = next.findIndex((d) => d === "");
-        focusIndex(nextEmpty === -1 ? length - 1 : nextEmpty);
-        return next;
-      });
-    }, [emitChange, focusIndex, length]);
+    const handlePaste = useCallback(
+      (e) => {
+        e.preventDefault();
+        const digits = (e.clipboardData.getData("text") || "").replace(/\D/g, "").slice(0, length).split("");
+        if (digits.length === 0) return;
+        setOtp((prev) => {
+          const next = [...prev];
+          let writeIndex = next.findIndex((d) => d === "");
+          if (writeIndex === -1) writeIndex = 0;
+          for (let i = 0; i < digits.length && writeIndex < length; i++) {
+            next[writeIndex] = digits[i];
+            writeIndex++;
+          }
+          emitChange(next);
+          const nextEmpty = next.findIndex((d) => d === "");
+          focusIndex(nextEmpty === -1 ? length - 1 : nextEmpty);
+          return next;
+        });
+      },
+      [emitChange, focusIndex, length]
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -156,17 +173,17 @@ const InputOTP = memo(
               inputClassName: bem("input__node"),
               inputContainerClassName: bem("input__container"),
               inputMode: "numeric",
-              inputRef: /* @__PURE__ */ __name((el) => {
-                inputs.current[index] = el ?? null;
-              }, "inputRef"),
               maxLength: 1,
               name: `otp-${index}`,
               pattern: "\\\\d*",
               placeholder: "•",
               type: "text",
               value,
-              onChange: /* @__PURE__ */ __name((e) => handleChange(e, index), "onChange"),
+              inputRef: /* @__PURE__ */ __name((el) => {
+                inputs.current[index] = el ?? null;
+              }, "inputRef"),
               onFocus: /* @__PURE__ */ __name(() => handleFocus(index), "onFocus"),
+              onChange: /* @__PURE__ */ __name((e) => handleChange(e, index), "onChange"),
               onKeyDown: /* @__PURE__ */ __name((e) => handleKeyDown(e, index), "onKeyDown")
             },
             `otp-${index}`

package/dist/components/label/Label.js

@@ -52,14 +52,7 @@ const Label = /* @__PURE__ */ __name(({
   ] }), "renderContent");
   if (!splittedLabel) return children;
   if (type === "legend") {
-    return /* @__PURE__ */ jsx(
-      "legend",
-      {
-        ...props,
-        className: bem(void 0, void 0, className),
-        children: renderContent()
-      }
-    );
+    return /* @__PURE__ */ jsx("legend", { ...props, className: bem(void 0, void 0, className), children: renderContent() });
   }
   return /* @__PURE__ */ jsx(
     "label",

package/dist/components/link/Link.view.js

@@ -41,7 +41,9 @@ function LinkView({
         onClick: hasHandlers ? onClick : void 0,
         onKeyDown: hasHandlers ? (e) => {
           if (e.key === "Enter" || e.key === " ") {
-            onClick == null ? void 0 : onClick(e);
+            onClick == null ? void 0 : onClick(
+              e
+            );
           }
         } : void 0,
         ...rest,

package/dist/components/list/List.js

@@ -31,7 +31,16 @@ function List({
       className: bem(void 0, void 0, className),
       children: items.map((item, i) => {
         var _a;
-        const { id, title, desc, icon, redirect, onClick, variant: itemVariant, className: itemClassName } = item;
+        const {
+          id,
+          title,
+          desc,
+          icon,
+          redirect,
+          onClick,
+          variant: itemVariant,
+          className: itemClassName
+        } = item;
         const isClickable = Boolean(onClick || redirect);
         const liHandlers = {};
         if (isClickable) {
@@ -58,58 +67,101 @@ function List({
           itemClassName
         );
         const TitleSpan = /* @__PURE__ */ __name(() => {
-          const titleClass = bem("item__title", {
-            "is-clickable": isClickable,
-            ...modifier
-          }, "list-title");
+          const titleClass = bem(
+            "item__title",
+            {
+              "is-clickable": isClickable,
+              ...modifier
+            },
+            "list-title"
+          );
           return /* @__PURE__ */ jsx("span", { className: titleClass, children: title });
         }, "TitleSpan");
         const DescParagraph = /* @__PURE__ */ __name(() => {
           if (!isString(desc) && !isValidElement(desc)) return null;
-          return /* @__PURE__ */ jsx("div", { className: bem("item__desc", { "card": type === "card" }, classNameDesc), children: desc });
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem(
+                "item__desc",
+                { card: type === "card" },
+                classNameDesc
+              ),
+              children: desc
+            }
+          );
         }, "DescParagraph");
         const IconWrapper = /* @__PURE__ */ __name(() => {
           if (icon === void 0 || icon === null) return null;
-          return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon__wrapper"), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { color: variant, name: icon, ...options.icon }) });
+          return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon__wrapper"), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(
+            Icon,
+            {
+              color: variant,
+              name: icon,
+              ...options.icon
+            }
+          ) });
         }, "IconWrapper");
         if (type === "card") {
           const cardItem = item;
-          return /* @__PURE__ */ jsx("li", { className: liClass, ...liHandlers, children: /* @__PURE__ */ jsx(
-            Card,
+          return /* @__PURE__ */ jsx(
+            "li",
             {
-              priority: true,
-              variant: "white",
-              ...cardItem,
-              className: bem("item__card", void 0, cardItem.className),
-              contentClassName: bem(
-                "item__card__content",
-                void 0,
-                cardItem.contentClassName
-              ),
-              children: /* @__PURE__ */ jsxs("div", { className: bem("item__inner", void 0, cardItem.innerClassName), children: [
-                icon !== void 0 && icon !== null && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: bem("item__icon", void 0, (_a = cardItem.iconProps) == null ? void 0 : _a.className),
-                    children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        ...cardItem.iconProps,
-                        className: bem("item__icon__svg"),
-                        name: icon,
-                        size: "sm"
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: bem("item__content"), children: [
-                  /* @__PURE__ */ jsx(TitleSpan, {}),
-                  /* @__PURE__ */ jsx(DescParagraph, {})
-                ] })
-              ] })
-            }
-          ) }, `list-item-${id ?? i}`);
+              className: liClass,
+              ...liHandlers,
+              children: /* @__PURE__ */ jsx(
+                Card,
+                {
+                  priority: true,
+                  variant: "white",
+                  ...cardItem,
+                  className: bem("item__card", void 0, cardItem.className),
+                  contentClassName: bem(
+                    "item__card__content",
+                    void 0,
+                    cardItem.contentClassName
+                  ),
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: bem(
+                        "item__inner",
+                        void 0,
+                        cardItem.innerClassName
+                      ),
+                      children: [
+                        icon !== void 0 && icon !== null && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "aria-hidden": "true",
+                            className: bem(
+                              "item__icon",
+                              void 0,
+                              (_a = cardItem.iconProps) == null ? void 0 : _a.className
+                            ),
+                            children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(
+                              Icon,
+                              {
+                                ...cardItem.iconProps,
+                                className: bem("item__icon__svg"),
+                                name: icon,
+                                size: "sm"
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: bem("item__content"), children: [
+                          /* @__PURE__ */ jsx(TitleSpan, {}),
+                          /* @__PURE__ */ jsx(DescParagraph, {})
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              )
+            },
+            `list-item-${id ?? i}`
+          );
         }
         if (redirect) {
           const linkProps = redirect;

package/dist/components/loading/Loading.client.js

@@ -46,7 +46,14 @@ const OverlayClient = /* @__PURE__ */ __name(({
     };
   }, [backdrop]);
   const resolved = backdrop === "auto" ? scheme : backdrop;
-  return /* @__PURE__ */ jsx(OverlayView, { ...rest, reducedMotion, resolvedBackdrop: resolved });
+  return /* @__PURE__ */ jsx(
+    OverlayView,
+    {
+      ...rest,
+      reducedMotion,
+      resolvedBackdrop: resolved
+    }
+  );
 }, "OverlayClient");
 const SpinnerClient = /* @__PURE__ */ __name(({
   reducedMotion,
@@ -61,7 +68,13 @@ const LoadingClient = /* @__PURE__ */ __name((props) => {
     return /* @__PURE__ */ jsx(OverlayClient, { ...rest2, reducedMotion });
   }
   const { variant: _v, ...rest } = props;
-  return /* @__PURE__ */ jsx(SpinnerClient, { ...rest, reducedMotion });
+  return /* @__PURE__ */ jsx(
+    SpinnerClient,
+    {
+      ...rest,
+      reducedMotion
+    }
+  );
 }, "LoadingClient");
 export {
   LoadingClient as default

package/dist/components/loading/Loading.server.js

@@ -6,7 +6,14 @@ const LoadingServer = /* @__PURE__ */ __name((props) => {
   if (props.variant === "overlay") {
     const { backdrop = "auto", ...rest2 } = props;
     const resolved = backdrop === "dark" ? "dark" : "light";
-    return /* @__PURE__ */ jsx(OverlayView, { ...rest2, reducedMotion: props.reducedMotion, resolvedBackdrop: resolved });
+    return /* @__PURE__ */ jsx(
+      OverlayView,
+      {
+        ...rest2,
+        reducedMotion: props.reducedMotion,
+        resolvedBackdrop: resolved
+      }
+    );
   }
   const { variant: _v, ...rest } = props;
   return /* @__PURE__ */ jsx(SpinnerView, { ...rest, reducedMotion: props.reducedMotion });

package/dist/components/loading/Loading.view.js

@@ -1,7 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
-const PX = { xs: 16, sm: 24, md: 32, lg: 48, xl: 64 };
+const PX = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64
+};
 const SpinnerView = /* @__PURE__ */ __name(({
   className,
   style,
@@ -28,11 +34,21 @@ const SpinnerView = /* @__PURE__ */ __name(({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "ui-loading-gradient", x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
-          /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: "0.4" }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.1" })
-        ] }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "ui-loading-gradient",
+            x1: "0%",
+            x2: "0%",
+            y1: "0%",
+            y2: "100%",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: "0.4" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.1" })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxs("g", { transform: `translate(${r} ${r})`, children: [
           /* @__PURE__ */ jsx(
             "circle",
@@ -102,7 +118,14 @@ const OverlayView = /* @__PURE__ */ __name(({
         zIndex,
         ...style
       },
-      children: /* @__PURE__ */ jsx(SpinnerView, { ariaLabel, reducedMotion, size })
+      children: /* @__PURE__ */ jsx(
+        SpinnerView,
+        {
+          ariaLabel,
+          reducedMotion,
+          size
+        }
+      )
     }
   );
 }, "OverlayView");

package/dist/components/post-item/PostItem.client.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { PostItemView } from "./PostItem.view.js";
+const PostItemClient = memo((props) => {
+  const { content, readingWpm = 200 } = props;
+  const wordCount = useMemo(() => calculateWordCount(content), [content]);
+  const readMinutes = useMemo(
+    () => wordCount > 0 ? Math.max(1, Math.ceil(wordCount / readingWpm)) : 0,
+    [wordCount, readingWpm]
+  );
+  return /* @__PURE__ */ jsx(PostItemView, { ...props, readMinutes, wordCount });
+});
+PostItemClient.displayName = "PostItemClient";
+export {
+  PostItemClient as default
+};