@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/inputOTP/InputOTP.client.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect, useCallback } from "react";
+import { InputOTPView } from "./InputOTP.view.js";
+const InputOTPClient = memo(
+  ({ length = 6, onComplete, onChange, ...props }) => {
+    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] ?? "";
+        return next;
+      });
+    }, [length]);
+    const completedRef = useRef(false);
+    const focusIndex = useCallback((idx) => {
+      var _a;
+      const el = inputs.current[idx];
+      if (el) {
+        el.focus();
+        (_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);
+          }
+          emitChange(next);
+          return next;
+        });
+      },
+      [emitChange, focusIndex, length]
+    );
+    const handleDigitChange = useCallback(
+      (e, index) => {
+        setDigit(e.target.value, index);
+      },
+      [setDigit]
+    );
+    const handleDigitKeyDown = 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 handleDigitFocus = 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 handleGroupPaste = 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 getInputRef = useCallback(
+      (index) => (el) => {
+        inputs.current[index] = el;
+      },
+      []
+    );
+    return /* @__PURE__ */ jsx(
+      InputOTPView,
+      {
+        ...props,
+        getInputRef,
+        length,
+        otp,
+        onDigitChange: handleDigitChange,
+        onDigitFocus: handleDigitFocus,
+        onDigitKeyDown: handleDigitKeyDown,
+        onGroupPaste: handleGroupPaste
+      }
+    );
+  }
+);
+InputOTPClient.displayName = "InputOTP";
+export {
+  InputOTPClient as default
+};

package/dist/components/inputOTP/InputOTP.css

@@ -126,7 +126,68 @@
  */
 .prokodo-InputOTP {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 0;
+}
+.prokodo-InputOTP--primary {
+  --pk-otp-gradient-from: var(--pk-color-brand);
+  --pk-otp-gradient-to: var(--pk-color-accent);
+  --pk-input-gradient-from: var(--pk-color-brand);
+  --pk-input-gradient-to: var(--pk-color-accent);
+  --pk-input-border-focus: var(--pk-color-brand);
+  --pk-input-label-focused-fg: var(--pk-color-brand);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+}
+.prokodo-InputOTP--secondary {
+  --pk-otp-gradient-from: var(--pk-color-accent);
+  --pk-otp-gradient-to: var(--pk-color-brand);
+  --pk-input-gradient-from: var(--pk-color-accent);
+  --pk-input-gradient-to: var(--pk-color-brand);
+  --pk-input-border-focus: var(--pk-color-accent);
+  --pk-input-label-focused-fg: var(--pk-color-accent);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+}
+.prokodo-InputOTP--success {
+  --pk-otp-gradient-from: var(--pk-color-success);
+  --pk-otp-gradient-to: #10CCB8;
+  --pk-input-gradient-from: var(--pk-color-success);
+  --pk-input-gradient-to: #10CCB8;
+  --pk-input-border-focus: var(--pk-color-success);
+  --pk-input-label-focused-fg: var(--pk-color-success);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+}
+.prokodo-InputOTP--warning {
+  --pk-otp-gradient-from: var(--pk-color-warning);
+  --pk-otp-gradient-to: #f7cc6a;
+  --pk-input-gradient-from: var(--pk-color-warning);
+  --pk-input-gradient-to: #f7cc6a;
+  --pk-input-border-focus: var(--pk-color-warning);
+  --pk-input-label-focused-fg: var(--pk-color-warning);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+}
+.prokodo-InputOTP--error {
+  --pk-otp-gradient-from: var(--pk-color-error);
+  --pk-otp-gradient-to: #ff6b6b;
+  --pk-input-gradient-from: var(--pk-color-error);
+  --pk-input-gradient-to: #ff6b6b;
+  --pk-input-border-focus: var(--pk-color-error);
+  --pk-input-label-focused-fg: var(--pk-color-error);
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+}
+.prokodo-InputOTP--info, .prokodo-InputOTP--inherit, .prokodo-InputOTP--white {
+  --pk-otp-gradient-from: var(--pk-color-muted);
+  --pk-otp-gradient-to: var(--pk-color-border);
+  --pk-input-gradient-from: var(--pk-color-muted);
+  --pk-input-gradient-to: var(--pk-color-border);
+  --pk-input-border-focus: var(--pk-color-muted);
+  --pk-input-label-focused-fg: var(--pk-color-muted);
+}
+.prokodo-InputOTP--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  --pk-otp-gradient-from: var(--pk-color-border);
+  --pk-otp-gradient-to: var(--pk-color-muted);
 }
 .prokodo-InputOTP__label, .prokodo-InputOTP__instruction {
   position: absolute;
@@ -136,20 +197,107 @@
   height: 0;
   text-indent: -99999px;
 }
+.prokodo-InputOTP__visible-label {
+  margin-bottom: var(--pk-space-sm);
+}
+.prokodo-InputOTP__row {
+  display: flex;
+  align-items: center;
+  gap: var(--pk-otp-gap);
+}
+.prokodo-InputOTP__footer {
+  display: flex;
+  margin-top: var(--pk-space-xs);
+}
+.prokodo-InputOTP__helperText {
+  color: var(--pk-input-helper-fg);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-InputOTP__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-InputOTP__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-InputOTP__helperText__content--is-error {
+  color: var(--pk-color-error);
+}
 .prokodo-InputOTP__field {
-  width: 42px;
-  height: 42px;
+  position: relative;
+  width: var(--pk-otp-cell-size);
+  height: var(--pk-otp-cell-size);
+  border-radius: var(--pk-otp-cell-radius) !important;
+  flex-shrink: 0;
+}
+.prokodo-InputOTP__field::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--pk-otp-cell-radius);
+  padding: 2px;
+  background: conic-gradient(from 180deg, var(--pk-otp-gradient-from), var(--pk-otp-gradient-to), var(--pk-otp-gradient-from));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 1;
 }
 .prokodo-InputOTP__input {
-  width: 42px;
-  height: 42px;
+  width: var(--pk-otp-cell-size);
+  height: var(--pk-otp-cell-size);
 }
 .prokodo-InputOTP__input__container {
   width: 100%;
   height: 100%;
-  border-radius: 80px;
+  border-radius: var(--pk-otp-cell-radius);
+  overflow: hidden;
+  background: transparent !important;
+  animation: none !important;
 }
 .prokodo-InputOTP__input__node {
   width: 100%;
-  padding: 0.5rem 1rem;
+  height: 100%;
+  padding: 0;
+  background: var(--pk-input-bg);
+  border-radius: var(--pk-otp-cell-radius);
+  font-weight: 700;
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-InputOTP__input__node {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-InputOTP__input__node {
+    font-size: 1rem;
+  }
+}
+.prokodo-InputOTP__input__node {
+  text-align: center;
 }

package/dist/components/inputOTP/InputOTP.js

@@ -1,200 +1,15 @@
 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, useEffect, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import styles from "./InputOTP.module.scss.js";
-import { Input } from "../input/Input.js";
-const bem = create(styles, "InputOTP");
-const InputOTP = memo(
-  ({
-    className,
-    groupLabel,
-    groupInstruction,
-    length = 6,
-    onComplete,
-    onChange,
-    ...props
-  }) => {
-    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] ?? "";
-        return next;
-      });
-    }, [length]);
-    const completedRef = useRef(false);
-    const focusIndex = useCallback((idx) => {
-      var _a;
-      const el = inputs.current[idx];
-      if (el) {
-        el.focus();
-        (_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);
-          }
-          emitChange(next);
-          return next;
-        });
-      },
-      [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]
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-describedby": "otp-instructions",
-        "aria-labelledby": "otp-group-label",
-        className: bem(void 0, void 0, className),
-        role: "group",
-        onPaste: handlePaste,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: bem("label"), id: "otp-group-label", children: groupLabel ?? /* istanbul ignore next */
-          "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__ */ jsx(
-            Input,
-            {
-              ...props,
-              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",
-              maxLength: 1,
-              name: `otp-${index}`,
-              pattern: "\\\\d*",
-              placeholder: "•",
-              type: "text",
-              value,
-              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}`
-          ))
-        ]
-      }
-    );
-  }
-);
-InputOTP.displayName = "InputOTP";
+import { createIsland } from "../../helpers/createIsland.js";
+import InputOTPServer from "./InputOTP.server.js";
+const InputOTP = createIsland({
+  name: "InputOTP",
+  Server: InputOTPServer,
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./InputOTP.lazy.js"), "loadLazy")
+  )
+});
 export {
   InputOTP
 };

package/dist/components/inputOTP/InputOTP.lazy.js

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