@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/input/InputValidation.js

@@ -1,22 +1,36 @@
-const o = (a, e) => typeof e > "u" ? !1 : a.test(String(e)), h = (a, e, u, t) => {
-  let d = Number(a);
-  if (typeof a == "string" && isNaN(d) && (d = a.length), e !== void 0 && d < e)
-    return `${(t == null ? void 0 : t.min) ?? "Value must be greater than or equal to"} ${e}.`;
-  if (u !== void 0 && d > u)
-    return `${(t == null ? void 0 : t.max) ?? "Value must be less than or equal to"} ${u}.`;
-}, A = (a, e, u, t, d, z, l, c, s) => {
-  if (!s) return;
-  const x = u == null || u === "";
-  if (x && t)
-    return s(
-      e,
-      (c == null ? void 0 : c.required) ?? "This field is required. Please fill it out."
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const isValidRegex = /* @__PURE__ */ __name((regex, value) => {
+  if (typeof value === "undefined") return false;
+  return regex.test(String(value));
+}, "isValidRegex");
+const handleValidationMinMax = /* @__PURE__ */ __name((value, min, max, errorTranslations) => {
+  let numericValue = Number(value);
+  if (typeof value === "string" && isNaN(numericValue)) {
+    numericValue = value.length;
+  }
+  if (min !== void 0 && numericValue < min) {
+    return `${(errorTranslations == null ? void 0 : errorTranslations.min) ?? "Value must be greater than or equal to"} ${min}.`;
+  }
+  if (max !== void 0 && numericValue > max) {
+    return `${(errorTranslations == null ? void 0 : errorTranslations.max) ?? "Value must be less than or equal to"} ${max}.`;
+  }
+  return;
+}, "handleValidationMinMax");
+const handleValidation = /* @__PURE__ */ __name((type, name, value, required, min, max, customRegexPattern, errorTranslations, onValidate) => {
+  if (!onValidate) return;
+  const valueIsEmpty = value === null || value === void 0 || value === "";
+  if (valueIsEmpty && Boolean(required)) {
+    return onValidate(
+      name,
+      (errorTranslations == null ? void 0 : errorTranslations.required) ?? "This field is required. Please fill it out."
     );
-  if (x && (t === !1 || t === void 0))
-    return s(e);
-  const n = h(u, d, z, c);
-  if (n !== void 0) return s(e, n);
-  let i = {
+  }
+  if (valueIsEmpty && (required === false || required === void 0))
+    return onValidate(name);
+  const minMaxError = handleValidationMinMax(value, min, max, errorTranslations);
+  if (minMaxError !== void 0) return onValidate(name, minMaxError);
+  let regexPatterns = {
     text: /^[a-zA-Z\s,.!?'-]+$/,
     email: /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x21\x23-\x5b\x5d-\x7e]|\\[\x21-\x7e])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}|(?:\[(?:(?:2(?:5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(?:2(?:5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x21-\x5a\x53-\x7e]|\\[\x21-\x7e])+)])$/i,
     tel: /^\+?[1-9]\d{1,14}$/,
@@ -25,17 +39,18 @@ const o = (a, e) => typeof e > "u" ? !1 : a.test(String(e)), h = (a, e, u, t) =>
     color: /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/,
     password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/
   };
-  if (l !== void 0) {
-    const f = l.match(/^\/(.*)\/([gimsuy]*)$/);
-    if (f) {
-      const [, m = "", p] = f, $ = new RegExp(m ?? "", p);
-      i = {
-        ...i,
-        [String(a)]: RegExp($)
+  if (customRegexPattern !== void 0) {
+    const regexParts = customRegexPattern.match(/^\/(.*)\/([gimsuy]*)$/);
+    if (regexParts) {
+      const [, pattern = "", flags] = regexParts;
+      const customRegex = new RegExp(pattern ?? "", flags);
+      regexPatterns = {
+        ...regexPatterns,
+        [String(type)]: RegExp(customRegex)
       };
     }
   }
-  const g = {
+  const errorMessages = {
     text: "Text can only include letters and common punctuation.",
     email: "Please enter a valid email address (e.g., name@example.com).",
     tel: "Please enter a valid phone number.",
@@ -43,10 +58,14 @@ const o = (a, e) => typeof e > "u" ? !1 : a.test(String(e)), h = (a, e, u, t) =>
     number: "Please enter a valid number.",
     color: "Please enter a valid color code (e.g., #FFFFFF).",
     password: "Password must be at least 8 characters long and include uppercase, lowercase, numbers, and special characters.",
-    ...c
-  }, w = i[a];
-  return w && !o(w, u) ? s(e, g[a]) : s(e);
-};
+    ...errorTranslations
+  };
+  const regex = regexPatterns[type];
+  if (regex && !isValidRegex(regex, value)) {
+    return onValidate(name, errorMessages[type]);
+  }
+  return onValidate(name);
+}, "handleValidation");
 export {
-  A as handleValidation
+  handleValidation
 };

package/dist/components/input/index.js

@@ -1,4 +1,4 @@
-import { Input as r } from "./Input.js";
+import { Input } from "./Input.js";
 export {
-  r as Input
+  Input
 };

package/dist/components/inputOTP/InputOTP.js

@@ -1,71 +1,104 @@
-import { jsxs as P, jsx as y } from "react/jsx-runtime";
-import { memo as g, useState as j, useRef as k, createElement as v } from "react";
-import { create as I } from "../../helpers/bem.js";
-import { isArray as T } from "../../helpers/validations.js";
-import A from "./InputOTP.module.scss.js";
-import { Input as D } from "../input/Input.js";
-const n = I(A, "InputOTP"), _ = g(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, createElement } from "react";
+import { create } from "../../helpers/bem.js";
+import { isArray } from "../../helpers/validations.js";
+import styles from "./InputOTP.module.scss.js";
+import { Input } from "../input/Input.js";
+const bem = create(styles, "InputOTP");
+const InputOTP = memo(
   ({
-    className: b,
-    groupLabel: d,
-    groupInstruction: h,
-    length: i = 6,
-    onComplete: u,
-    onChange: l,
-    ...f
+    className,
+    groupLabel,
+    groupInstruction,
+    length = 6,
+    onComplete,
+    onChange,
+    ...props
   }) => {
-    const [c, m] = j(Array(i).fill("")), s = k([]), w = (r, t) => {
-      var o;
-      if (r.length > 1) return;
-      const e = [...c];
-      e[t] = r, m(e), l && l(e.join("")), r && t < i - 1 && ((o = s.current[t + 1]) == null || o.focus()), e.every((a) => a !== "") && u && u(e.join(""));
-    }, N = (r, t) => {
-      var e, o, a;
-      r.key === "Backspace" && t > 0 && T(c) && c[t] !== void 0 && ((e = s.current[t - 1]) == null || e.focus()), r.key === "ArrowLeft" && t > 0 ? (o = s.current[t - 1]) == null || o.focus() : r.key === "ArrowRight" && t < i - 1 && ((a = s.current[t + 1]) == null || a.focus());
-    }, O = (r) => {
-      var o;
-      const t = r.clipboardData.getData("text").slice(0, i).split(""), e = [...c];
-      if (t.forEach((a, p) => {
-        p < i && (e[p] = a, s.current[p] && (s.current[p].value = a));
-      }), m(e), l && l(e.join("")), t.length === i && u)
-        u(e.join(""));
-      else {
-        const a = t.length;
-        a < i && ((o = s.current[a]) == null || o.focus());
+    const [otp, setOtp] = useState(Array(length).fill(""));
+    const inputs = useRef([]);
+    const handleChange = /* @__PURE__ */ __name((value, index) => {
+      var _a;
+      if (value.length > 1) return;
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      if (onChange) onChange(newOtp.join(""));
+      if (value && index < length - 1) {
+        (_a = inputs.current[index + 1]) == null ? void 0 : _a.focus();
       }
-    };
-    return /* @__PURE__ */ P(
+      if (newOtp.every((digit) => digit !== "") && onComplete) {
+        onComplete(newOtp.join(""));
+      }
+    }, "handleChange");
+    const handleKeyDown = /* @__PURE__ */ __name((e, index) => {
+      var _a, _b, _c;
+      if (e.key === "Backspace" && index > 0 && isArray(otp) && otp[index] !== void 0) {
+        (_a = inputs.current[index - 1]) == null ? void 0 : _a.focus();
+      }
+      if (e.key === "ArrowLeft" && index > 0) {
+        (_b = inputs.current[index - 1]) == null ? void 0 : _b.focus();
+      } else if (e.key === "ArrowRight" && index < length - 1) {
+        (_c = inputs.current[index + 1]) == null ? void 0 : _c.focus();
+      }
+    }, "handleKeyDown");
+    const handlePaste = /* @__PURE__ */ __name((e) => {
+      var _a;
+      const paste = e.clipboardData.getData("text").slice(0, length).split("");
+      const newOtp = [...otp];
+      paste.forEach((value, index) => {
+        if (index < length) {
+          newOtp[index] = value;
+          if (inputs.current[index]) {
+            inputs.current[index].value = value;
+          }
+        }
+      });
+      setOtp(newOtp);
+      if (onChange) onChange(newOtp.join(""));
+      if (paste.length === length && onComplete) {
+        onComplete(newOtp.join(""));
+      } else {
+        const nextIndex = paste.length;
+        if (nextIndex < length) {
+          (_a = inputs.current[nextIndex]) == null ? void 0 : _a.focus();
+        }
+      }
+    }, "handlePaste");
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         "aria-describedby": "otp-instructions",
         "aria-labelledby": "otp-group-label",
-        className: n(void 0, void 0, b),
+        className: bem(void 0, void 0, className),
         role: "group",
-        onPaste: O,
+        onPaste: handlePaste,
         children: [
-          /* @__PURE__ */ y("span", { className: n("label"), id: "otp-group-label", children: d ?? "Enter your OTP" }),
-          /* @__PURE__ */ y("span", { className: n("instruction"), id: "otp-instructions", children: h ?? "Use the arrow keys to navigate between digits." }),
-          c.map((r, t) => /* @__PURE__ */ v(
-            D,
+          /* @__PURE__ */ jsx("span", { className: bem("label"), id: "otp-group-label", children: groupLabel ?? "Enter your OTP" }),
+          /* @__PURE__ */ jsx("span", { className: bem("instruction"), id: "otp-instructions", children: groupInstruction ?? "Use the arrow keys to navigate between digits." }),
+          otp.map((value, index) => /* @__PURE__ */ createElement(
+            Input,
             {
               placeholder: "x",
-              ...f,
-              key: `otp-${t}`,
-              hideCounter: !0,
-              "aria-label": `${(f == null ? void 0 : f["aria-label"]) ?? "OTP digit"} ${t + 1}`,
-              className: n("input"),
-              fieldClassName: n("field"),
-              inputClassName: n("input__node"),
-              inputContainerClassName: n("input__container"),
+              ...props,
+              key: `otp-${index}`,
+              hideCounter: true,
+              "aria-label": `${(props == null ? void 0 : props["aria-label"]) ?? "OTP digit"} ${index + 1}`,
+              className: bem("input"),
+              fieldClassName: bem("field"),
+              inputClassName: bem("input__node"),
+              inputContainerClassName: bem("input__container"),
               maxLength: 1,
-              name: `otp-${t}`,
+              name: `otp-${index}`,
               type: "text",
-              value: r,
-              inputRef: (e) => {
-                s.current[t] = e;
-              },
-              onChange: (e) => w(e.target.value, t),
-              onKeyDown: (e) => N(e, t)
+              value,
+              inputRef: /* @__PURE__ */ __name((el) => {
+                inputs.current[index] = el;
+              }, "inputRef"),
+              onChange: /* @__PURE__ */ __name((e) => handleChange(e.target.value, index), "onChange"),
+              onKeyDown: /* @__PURE__ */ __name((e) => handleKeyDown(e, index), "onKeyDown")
             }
           ))
         ]
@@ -73,7 +106,7 @@ const n = I(A, "InputOTP"), _ = g(
     );
   }
 );
-_.displayName = "InputOTP";
+InputOTP.displayName = "InputOTP";
 export {
-  _ as InputOTP
+  InputOTP
 };

package/dist/components/inputOTP/InputOTP.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", n = "fadeInKeyframe", p = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-InputOTP": "prokodo-InputOTP",
   "prokodo-InputOTP__label": "prokodo-InputOTP__label",
   "prokodo-InputOTP__instruction": "prokodo-InputOTP__instruction",
@@ -6,11 +8,11 @@ const o = "gradientMove", n = "fadeInKeyframe", p = {
   "prokodo-InputOTP__input": "prokodo-InputOTP__input",
   "prokodo-InputOTP__input__container": "prokodo-InputOTP__input__container",
   "prokodo-InputOTP__input__node": "prokodo-InputOTP__input__node",
-  gradientMove: o,
-  fadeInKeyframe: n
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  p as default,
-  n as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/inputOTP/index.js

@@ -1,4 +1,4 @@
-import { InputOTP as r } from "./InputOTP.js";
+import { InputOTP } from "./InputOTP.js";
 export {
-  r as InputOTP
+  InputOTP
 };

package/dist/components/label/Label.js

@@ -1,65 +1,66 @@
-import { jsxs as a, jsx as N } from "react/jsx-runtime";
-import { memo as f } from "react";
-import { create as j } from "../../helpers/bem.js";
-import u from "./Label.module.scss.js";
-const c = j(u, "Label"), v = f(
-  ({
-    className: o,
-    htmlFor: e,
-    required: s,
-    label: n,
-    contentProps: d,
-    textProps: i,
-    error: h,
-    children: r,
-    ...l
-  }) => {
-    const m = n == null ? void 0 : n.split(" ");
-    return m ? /* @__PURE__ */ a(
-      "label",
-      {
-        ...l,
-        className: c(void 0, void 0, o),
-        htmlFor: e,
-        children: [
-          /* @__PURE__ */ a("span", { ...d, children: [
-            /* @__PURE__ */ a(
-              "i",
-              {
-                ...i,
-                className: c(
-                  "highlighted",
-                  {
-                    error: !!h
-                  },
-                  i == null ? void 0 : i.className
-                ),
-                children: [
-                  m == null ? void 0 : m[0],
-                  " "
-                ]
-              }
-            ),
-            /* @__PURE__ */ a(
-              "i",
-              {
-                ...i,
-                className: c("text", void 0, i == null ? void 0 : i.className),
-                children: [
-                  m == null ? void 0 : m.slice(1).join(" "),
-                  " ",
-                  !!s && /* @__PURE__ */ N("span", { "aria-hidden": "true", children: "*" })
-                ]
-              }
-            )
-          ] }),
-          r
-        ]
-      }
-    ) : r;
-  }
-);
-v.displayName = "Label";
+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 styles from "./Label.module.scss.js";
+const bem = create(styles, "Label");
+const Label = /* @__PURE__ */ __name(({
+  className,
+  htmlFor,
+  required,
+  label,
+  contentProps,
+  textProps,
+  error,
+  children,
+  ...props
+}) => {
+  const splittedLabel = label == null ? void 0 : label.split(" ");
+  if (!splittedLabel) return children;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...props,
+      className: bem(void 0, void 0, className),
+      htmlFor,
+      children: [
+        /* @__PURE__ */ jsxs("span", { ...contentProps, children: [
+          /* @__PURE__ */ jsxs(
+            "i",
+            {
+              ...textProps,
+              className: bem(
+                "highlighted",
+                {
+                  error: Boolean(error)
+                },
+                textProps == null ? void 0 : textProps.className
+              ),
+              children: [
+                splittedLabel == null ? void 0 : splittedLabel[0],
+                " "
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "i",
+            {
+              ...textProps,
+              className: bem("text", void 0, textProps == null ? void 0 : textProps.className),
+              children: [
+                splittedLabel == null ? void 0 : splittedLabel.slice(1).join(" "),
+                " ",
+                Boolean(required) && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
+              ]
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  );
+}, "Label");
+Label.displayName = "Label";
 export {
-  v as Label
+  Label
 };

package/dist/components/label/Label.module.scss.js

@@ -1,13 +1,15 @@
-const e = "gradientMove", o = "fadeInKeyframe", r = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Label": "prokodo-Label",
   "prokodo-Label__highlighted": "prokodo-Label__highlighted",
   "prokodo-Label__highlighted--error": "prokodo-Label__highlighted--error",
   "prokodo-Label__text": "prokodo-Label__text",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  r as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/label/index.js

@@ -1,4 +1,4 @@
-import { Label as r } from "./Label.js";
+import { Label } from "./Label.js";
 export {
-  r as Label
+  Label
 };

package/dist/components/link/Link.js

@@ -1,58 +1,63 @@
-import { jsx as m } from "react/jsx-runtime";
-import { memo as c } from "react";
-import { create as k } from "../../helpers/bem.js";
-import { isString as g } from "../../helpers/validations.js";
-import x from "./Link.module.scss.js";
-import { BaseLink as L } from "../base-link/BaseLink.js";
-const v = k(x, "Link"), y = c(
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Link.module.scss.js";
+import { BaseLink } from "../base-link/BaseLink.js";
+const bem = create(styles, "Link");
+const Link = memo(
   ({
-    variant: s = "inherit",
-    href: r,
-    children: t,
-    className: n,
-    style: f,
-    target: p,
-    itemProp: l,
-    hasBackground: i,
-    onMouseEnter: b,
-    onClick: o,
-    onKeyDown: d,
-    ariaLabel: e
+    variant = "inherit",
+    href,
+    children,
+    className,
+    style,
+    target,
+    itemProp,
+    hasBackground,
+    onMouseEnter,
+    onClick,
+    onKeyDown,
+    ariaLabel
   }) => {
-    const u = {
-      "has-no-background": i === !1,
-      [`has-no-background--${s}`]: i === !1
-    }, a = {
-      className: v(void 0, u, n),
-      style: f,
-      onMouseEnter: b
+    const linkModifier = {
+      "has-no-background": hasBackground === false,
+      [`has-no-background--${variant}`]: hasBackground === false
     };
-    return o && !g(r) ? /* @__PURE__ */ m(
-      "span",
-      {
-        "aria-label": e,
-        role: "button",
-        tabIndex: 0,
-        onClick: o,
-        onKeyDown: d,
-        ...a,
-        children: t
-      }
-    ) : /* @__PURE__ */ m(
-      L,
+    const defaultProps = {
+      className: bem(void 0, linkModifier, className),
+      style,
+      onMouseEnter
+    };
+    if (onClick && !isString(href)) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-label": ariaLabel,
+          role: "button",
+          tabIndex: 0,
+          onClick,
+          onKeyDown,
+          ...defaultProps,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      BaseLink,
       {
-        ...a,
-        "aria-label": e,
-        href: r,
-        itemProp: l,
-        target: p ?? void 0,
-        onClick: o,
-        children: t
+        ...defaultProps,
+        "aria-label": ariaLabel,
+        href,
+        itemProp,
+        target: target ?? void 0,
+        onClick,
+        children
       }
     );
   }
 );
-y.displayName = "Link";
+Link.displayName = "Link";
 export {
-  y as Link
+  Link
 };

package/dist/components/link/Link.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", n = "fadeInKeyframe", r = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Link": "prokodo-Link",
   "prokodo-Link--has-no-background": "prokodo-Link--has-no-background",
   "prokodo-Link--has-no-background--primary": "prokodo-Link--has-no-background--primary",
@@ -8,11 +10,11 @@ const o = "gradientMove", n = "fadeInKeyframe", r = {
   "prokodo-Link--has-no-background--warning": "prokodo-Link--has-no-background--warning",
   "prokodo-Link--has-no-background--error": "prokodo-Link--has-no-background--error",
   "prokodo-Link--has-no-background--white": "prokodo-Link--has-no-background--white",
-  gradientMove: o,
-  fadeInKeyframe: n
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  r as default,
-  n as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/link/index.js

@@ -1,4 +1,4 @@
-import { Link as e } from "./Link.js";
+import { Link } from "./Link.js";
 export {
-  e as Link
+  Link
 };