@prokodo/ui 0.0.49 → 0.0.50

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

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-ImageText__grid": "prokodo-ImageText__grid",
   "prokodo-ImageText__grid--is-reverse": "prokodo-ImageText__grid--is-reverse",
@@ -9,12 +7,8 @@ const styles = {
   "prokodo-ImageText__animated__container": "prokodo-ImageText__animated__container",
   "prokodo-ImageText__animation": "prokodo-ImageText__animation",
   "prokodo-ImageText__image": "prokodo-ImageText__image",
-  "prokodo-ImageText__image__src": "prokodo-ImageText__image__src",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-ImageText__image__src": "prokodo-ImageText__image__src"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -19,6 +19,7 @@ function InputClient({
   customRegexPattern,
   errorText,
   errorTranslations,
+  readOnly,
   onValidate,
   onChange,
   onFocus,
@@ -82,10 +83,20 @@ function InputClient({
     isFocused: isFocused !== void 0 ? Boolean(isFocused) : focused,
     value: val,
     errorText: err,
+    required,
+    // ← keep required
+    min,
+    // ← if you want DOM to know about min
+    max,
+    // ← and max
+    maxLength,
+    // ← and maxLength (used by view counter)
+    readOnly,
+    // ← if you ever pass readOnly to client too
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
-  }), [isFocused, focused, val, err, name, handleChange, handleFocus, handleBlur, rest]);
+  }), [isFocused, focused, val, err, name, required, min, max, maxLength, readOnly, handleChange, handleFocus, handleBlur, rest]);
   const viewProps = Boolean(multiline) ? {
     ...viewBase,
     multiline: true

package/dist/components/input/Input.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Input": "prokodo-Input",
   "prokodo-Input__label": "prokodo-Input__label",
@@ -14,17 +12,14 @@ const styles = {
   "prokodo-Input__input__node": "prokodo-Input__input__node",
   "prokodo-Input__input__node--multiline": "prokodo-Input__input__node--multiline",
   "prokodo-Input__footer": "prokodo-Input__footer",
+  "prokodo-Input__footer--counter-only": "prokodo-Input__footer--counter-only",
   "prokodo-Input__helperText__wrapper": "prokodo-Input__helperText__wrapper",
   "prokodo-Input__helperText": "prokodo-Input__helperText",
   "prokodo-Input__helperText__content": "prokodo-Input__helperText__content",
   "prokodo-Input__helperText__content--is-error": "prokodo-Input__helperText__content--is-error",
   "prokodo-Input__helperText__legend": "prokodo-Input__helperText__legend",
-  "prokodo-Input__counter": "prokodo-Input__counter",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Input__counter": "prokodo-Input__counter"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -7,6 +7,7 @@ import styles from "./Input.module.scss.js";
 import { Label } from "../label/Label.js";
 const bem = create(styles, "Input");
 function InputView({
+  inputRef,
   name,
   label,
   disabled,
@@ -24,6 +25,7 @@ function InputView({
   fieldClassName,
   inputContainerClassName,
   inputClassName,
+  hideCounter,
   rows,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   minRows,
@@ -65,6 +67,7 @@ function InputView({
         "textarea",
         {
           ...rest,
+          ref: inputRef,
           "aria-describedby": describedBy,
           "aria-invalid": isError,
           "aria-required": required,
@@ -73,6 +76,7 @@ function InputView({
           id: name,
           name,
           placeholder,
+          required: Boolean(required),
           rows,
           value: value ?? ""
         }
@@ -80,6 +84,7 @@ function InputView({
         "input",
         {
           ...rest,
+          ref: inputRef,
           "aria-describedby": describedBy,
           "aria-invalid": isError,
           "aria-required": required,
@@ -87,6 +92,7 @@ function InputView({
           id: name,
           name,
           placeholder,
+          required: Boolean(required),
           type,
           value: value ?? "",
           className: bem(
@@ -97,7 +103,9 @@ function InputView({
         }
       ) }) })
     ] }),
-    (isError || hasHelperText || typeof maxLength === "number") && /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+    (isError || hasHelperText || typeof maxLength === "number") && /* @__PURE__ */ jsxs("div", { className: bem("footer", {
+      "counter-only": !hasHelperText && typeof maxLength === "number"
+    }), children: [
       (isError || hasHelperText) && /* @__PURE__ */ jsx(
         "div",
         {
@@ -116,7 +124,7 @@ function InputView({
           )
         }
       ),
-      typeof maxLength === "number" && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
+      !Boolean(hideCounter) && typeof maxLength === "number" && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
         value != null ? String(value).length : 0,
         " / ",
         maxLength

package/dist/components/inputOTP/InputOTP.js

@@ -1,7 +1,7 @@
 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 { memo, useState, useRef, useEffect, useCallback } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./InputOTP.module.scss.js";
 import { Input } from "../input/Input.js";
@@ -16,45 +16,123 @@ const InputOTP = memo(
     onChange,
     ...props
   }) => {
-    const [otp, setOtp] = useState(Array(length).fill(""));
+    const [otp, setOtp] = useState(() => Array(length).fill(""));
     const inputs = useRef([]);
-    const handleChange = /* @__PURE__ */ __name((value, index) => {
+    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] ?? "";
+        return next;
+      });
+    }, [length]);
+    const completedRef = useRef(false);
+    const focusIndex = useCallback((idx) => {
       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();
+      const el = inputs.current[idx];
+      if (el) {
+        el.focus();
+        (_a = el.setSelectionRange) == null ? void 0 : _a.call(el, 0, el.value.length);
       }
-      if (newOtp.every((digit) => digit !== "") && onComplete) {
-        onComplete(newOtp.join(""));
+    }, []);
+    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;
       }
-    }, "handleChange");
-    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;
-          }
+    }, [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);
         }
+        emitChange(next);
+        return next;
       });
-      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();
-        }
+    }, [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;
       }
-    }, "handlePaste");
+      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]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -66,27 +144,32 @@ const InputOTP = memo(
         children: [
           /* @__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(
+          otp.map((value, index) => /* @__PURE__ */ jsx(
             Input,
             {
-              placeholder: "x",
               ...props,
-              key: `otp-${index}`,
               hideCounter: true,
               "aria-label": `${(props == null ? void 0 : props["aria-label"]) ?? "OTP digit"} ${index + 1}`,
+              autoComplete: "one-time-code",
               className: bem("input"),
               fieldClassName: bem("field"),
               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,
-              inputRef: /* @__PURE__ */ __name((el) => {
-                inputs.current[index] = el;
-              }, "inputRef"),
-              onChange: /* @__PURE__ */ __name((e) => handleChange(e.target.value, index), "onChange")
-            }
+              onChange: /* @__PURE__ */ __name((e) => handleChange(e, index), "onChange"),
+              onFocus: /* @__PURE__ */ __name(() => handleFocus(index), "onFocus"),
+              onKeyDown: /* @__PURE__ */ __name((e) => handleKeyDown(e, index), "onKeyDown")
+            },
+            `otp-${index}`
           ))
         ]
       }

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

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-InputOTP": "prokodo-InputOTP",
   "prokodo-InputOTP__label": "prokodo-InputOTP__label",
@@ -7,12 +5,8 @@ const styles = {
   "prokodo-InputOTP__field": "prokodo-InputOTP__field",
   "prokodo-InputOTP__input": "prokodo-InputOTP__input",
   "prokodo-InputOTP__input__container": "prokodo-InputOTP__input__container",
-  "prokodo-InputOTP__input__node": "prokodo-InputOTP__input__node",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-InputOTP__input__node": "prokodo-InputOTP__input__node"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -1,15 +1,9 @@
-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,
-  fadeInKeyframe
+  "prokodo-Label__text": "prokodo-Label__text"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Link": "prokodo-Link",
   "prokodo-Link--has-no-background": "prokodo-Link--has-no-background",
@@ -9,12 +7,8 @@ const styles = {
   "prokodo-Link--has-no-background--success": "prokodo-Link--has-no-background--success",
   "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,
-  fadeInKeyframe
+  "prokodo-Link--has-no-background--white": "prokodo-Link--has-no-background--white"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/list/List.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-List": "prokodo-List",
   "prokodo-List__item": "prokodo-List__item",
@@ -26,12 +24,8 @@ const styles = {
   "prokodo-List__item--is-clickable--warning": "prokodo-List__item--is-clickable--warning",
   "prokodo-List__item--is-clickable--error": "prokodo-List__item--is-clickable--error",
   "prokodo-List__item--is-clickable--white": "prokodo-List__item--is-clickable--white",
-  "prokodo-List__item--card": "prokodo-List__item--card",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-List__item--card": "prokodo-List__item--card"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -0,0 +1,68 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { OverlayView, SpinnerView } from "./Loading.view.js";
+const getAutoScheme = /* @__PURE__ */ __name(() => {
+  const html = typeof document !== "undefined" ? document.documentElement : null;
+  const attr = html == null ? void 0 : html.getAttribute("data-theme");
+  if (attr === "dark" || attr === "light") return attr;
+  if (typeof window !== "undefined") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+}, "getAutoScheme");
+const useReducedMotion = /* @__PURE__ */ __name((explicit) => {
+  const [prefersReduced, setPrefersReduced] = useState(false);
+  useEffect(() => {
+    var _a;
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = /* @__PURE__ */ __name(() => setPrefersReduced(mql.matches), "handler");
+    handler();
+    (_a = mql.addEventListener) == null ? void 0 : _a.call(mql, "change", handler);
+    return () => {
+      var _a2;
+      return (_a2 = mql.removeEventListener) == null ? void 0 : _a2.call(mql, "change", handler);
+    };
+  }, []);
+  return useMemo(() => explicit ?? prefersReduced, [explicit, prefersReduced]);
+}, "useReducedMotion");
+const OverlayClient = /* @__PURE__ */ __name(({
+  backdrop = "auto",
+  reducedMotion,
+  ...rest
+}) => {
+  const [scheme, setScheme] = useState(getAutoScheme());
+  useEffect(() => {
+    var _a;
+    if (backdrop !== "auto") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = /* @__PURE__ */ __name((e) => setScheme(e.matches ? "dark" : "light"), "onChange");
+    (_a = mql.addEventListener) == null ? void 0 : _a.call(mql, "change", onChange);
+    return () => {
+      var _a2;
+      return (_a2 = mql.removeEventListener) == null ? void 0 : _a2.call(mql, "change", onChange);
+    };
+  }, [backdrop]);
+  const resolved = backdrop === "auto" ? scheme : backdrop;
+  return /* @__PURE__ */ jsx(OverlayView, { ...rest, reducedMotion, resolvedBackdrop: resolved });
+}, "OverlayClient");
+const SpinnerClient = /* @__PURE__ */ __name(({
+  reducedMotion,
+  ...rest
+}) => /* @__PURE__ */ jsx(SpinnerView, { ...rest, reducedMotion }), "SpinnerClient");
+const LoadingClient = /* @__PURE__ */ __name((props) => {
+  const reducedMotion = useReducedMotion(
+    "reducedMotion" in props ? props.reducedMotion : void 0
+  );
+  if (props.variant === "overlay") {
+    const { variant: _v2, ...rest2 } = props;
+    return /* @__PURE__ */ jsx(OverlayClient, { ...rest2, reducedMotion });
+  }
+  const { variant: _v, ...rest } = props;
+  return /* @__PURE__ */ jsx(SpinnerClient, { ...rest, reducedMotion });
+}, "LoadingClient");
+export {
+  LoadingClient as default
+};

package/dist/components/loading/Loading.js

@@ -1,59 +1,13 @@
 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 "./Loading.module.scss.js";
-const bem = create(styles, "Loading");
-const Loading = /* @__PURE__ */ __name(({ className, size = "sm" }) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: bem(void 0, void 0, className),
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "16px"
-    },
-    children: [
-      /* @__PURE__ */ jsx("svg", { height: 0, style: { position: "absolute" }, width: 0, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-        "linearGradient",
-        {
-          className: bem("gradient"),
-          id: "loading-gradient",
-          x1: "0%",
-          x2: "0%",
-          y1: "0%",
-          y2: "100%",
-          children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%" }),
-            /* @__PURE__ */ jsx("stop", { offset: "50%" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%" })
-          ]
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: bem("animation", {
-            [`size-${size}`]: true
-          }),
-          style: {
-            borderRadius: "50%",
-            border: `4px solid transparent`,
-            // Transparent border for empty space
-            borderTop: `4px solid`,
-            // Apply color for top border only
-            animation: `${styles.spin} 1s linear infinite`,
-            // Define animation for spinning
-            background: `conic-gradient(from 0deg at 50% 50%, url(#loading-gradient) 0deg 360deg)`
-            // Create a conic gradient
-          }
-        }
-      )
-    ]
-  }
-), "Loading");
-Loading.displayName = "Loading";
+import { createIsland } from "../../helpers/createIsland.js";
+import LoadingServer from "./Loading.server.js";
+const Loading = createIsland({
+  name: "Loading",
+  Server: LoadingServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Loading.lazy.js"), "loadLazy")
+});
 export {
-  Loading
+  Loading,
+  Loading as default
 };

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

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import LoadingClient from "./Loading.client.js";
+import LoadingServer from "./Loading.server.js";
+const Loading_lazy = createLazyWrapper({
+  name: "Loading",
+  Client: LoadingClient,
+  Server: LoadingServer,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Loading_lazy as default
+};

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

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { OverlayView, SpinnerView } from "./Loading.view.js";
+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 });
+  }
+  const { variant: _v, ...rest } = props;
+  return /* @__PURE__ */ jsx(SpinnerView, { ...rest, reducedMotion: props.reducedMotion });
+}, "LoadingServer");
+export {
+  LoadingServer as default
+};