@dgshahr/ui-kit 0.0.40 → 0.0.41

package/dist/Form/OtpInput/index.cjs

@@ -1 +1 @@
-"use client";"use strict";require('../../assets/styles.css');const l=require("react/jsx-runtime"),d=require("../../clsx-C11secjj.cjs"),q=require("react"),E=require("../Input/index.cjs"),h=require("../../TextFieldWrapper-BbzQMKCb.cjs");;/* empty css                      */const I=k=>{const{inputsNumber:u=4,onChange:a,onEnd:r,className:m,inputsContainerClassName:y,labelContent:p,hintMessage:f,errorMessage:c,isError:j,value:n}=k;function o(s){const e=document.getElementById(`dgs-ui-kit-otp-input-${s}`);e?.focus(),e?.select()}function C(s,e){const t=[s.code,s.key];if(t.includes("Backspace")||t.includes("Delete")){const i=n.split("");i[e]="",e!==0&&(i[e-1]="",o(e-1)),a(i.join(""))}else t.includes("ArrowLeft")?o(e-1):t.includes("ArrowRight")&&o(e+1)}function w(s,e){const t=s.currentTarget.value,i=n.split("");t.length>1?t.split("").forEach((N,g)=>{g<u&&(i[g]=N)}):i[e]=t,a(i.join("")),e+1!==u&&t&&o(e+1)}return q.useEffect(()=>{n.length===u&&typeof r=="function"&&r(n)},[n,u,r]),l.jsxs("div",{className:d.clsx("dgs-ui-kit-space-y-2",m),children:[p?l.jsx(h.FieldLabel,{labelContent:p}):null,l.jsx("div",{className:d.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2 [direction:ltr]",y),children:Array.from(Array(u).keys()).map((s,e)=>l.jsx(E,{containerClassName:"dgs-ui-kit-w-12 dgs-ui-kit-h-12 dgs-ui-kit-p-0",className:"dgs-ui-kit-w-full dgs-ui-kit-h-full !dgs-ui-kit-text-center placeholder:!dgs-ui-kit-text-center",placeholder:"-",type:"tel",autoFocus:e===0,onChange:t=>w(t,e),onKeyUp:t=>C(t,e),id:`dgs-ui-kit-otp-input-${e}`,value:n[e]||"",showMaxLength:!1,isError:!!c||j,autoComplete:"off",maxLength:1},s))}),c||f?l.jsx(h.FieldBottomInfo,{errorMessage:c,hintMessage:f}):null]})};module.exports=I;
+"use client";"use strict";require('../../assets/styles.css');const l=require("react/jsx-runtime"),h=require("../../clsx-C11secjj.cjs"),k=require("react"),I=require("../Input/index.cjs"),m=require("../../TextFieldWrapper-BbzQMKCb.cjs");;/* empty css                      */const v=y=>{const{inputsNumber:u=4,onChange:a,onEnd:f,className:j,inputsContainerClassName:C,labelContent:p,hintMessage:g,errorMessage:c,isError:w,value:n}=y,o=k.useRef(!1);function r(s){const e=document.getElementById(`dgs-ui-kit-otp-input-${s}`);e?.focus(),e?.select()}function E(s,e){const t=[s.code,s.key];if(t.includes("Backspace")||t.includes("Delete")){const i=n.split("");i[e]="",e!==0&&(i[e-1]="",r(e-1)),a(i.join(""))}else t.includes("ArrowLeft")?r(e-1):t.includes("ArrowRight")&&r(e+1)}function N(s,e){const t=s.currentTarget.value,i=n.split("");t.length>1?t.split("").forEach((q,d)=>{d<u&&(i[d]=q)}):i[e]=t,a(i.join("")),e+1!==u&&t&&r(e+1)}return k.useEffect(()=>{n.length===u&&o.current?(o.current=!1,typeof f=="function"&&f(n)):n.length<u&&(o.current=!0)},[n]),l.jsxs("div",{className:h.clsx("dgs-ui-kit-space-y-2",j),children:[p?l.jsx(m.FieldLabel,{labelContent:p}):null,l.jsx("div",{className:h.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2 [direction:ltr]",C),children:Array.from(Array(u).keys()).map((s,e)=>l.jsx(I,{containerClassName:"dgs-ui-kit-w-12 dgs-ui-kit-h-12 dgs-ui-kit-p-0",className:"dgs-ui-kit-w-full dgs-ui-kit-h-full !dgs-ui-kit-text-center placeholder:!dgs-ui-kit-text-center",placeholder:"-",type:"tel",autoFocus:e===0,onChange:t=>N(t,e),onKeyUp:t=>E(t,e),id:`dgs-ui-kit-otp-input-${e}`,value:n[e]||"",showMaxLength:!1,isError:!!c||w,autoComplete:"off",maxLength:1},s))}),c||g?l.jsx(m.FieldBottomInfo,{errorMessage:c,hintMessage:g}):null]})};module.exports=v;

package/dist/Form/OtpInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/OtpInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACxF,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAoG/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/OtpInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuC,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAIzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACxF,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA2G/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Form/OtpInput/index.js

@@ -1,65 +1,65 @@
 "use client";
-import { jsxs as E, jsx as u } from "react/jsx-runtime";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import { useEffect as I } from "react";
-import v from "../Input/index.js";
-import { F as j, a as A } from "../../TextFieldWrapper-D9d-4wo1.js";
+import { jsxs as I, jsx as u } from "react/jsx-runtime";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import { useRef as v, useEffect as j } from "react";
+import A from "../Input/index.js";
+import { F as B, a as F } from "../../TextFieldWrapper-D9d-4wo1.js";
 import '../../assets/styles.css';/* empty css                    */
-const K = (d) => {
+const R = (h) => {
   const {
-    inputsNumber: n = 4,
+    inputsNumber: l = 4,
     onChange: c,
-    onEnd: a,
-    className: h,
-    inputsContainerClassName: k,
+    onEnd: f,
+    className: k,
+    inputsContainerClassName: y,
     labelContent: p,
-    hintMessage: f,
+    hintMessage: g,
     errorMessage: r,
-    isError: y,
-    value: o
-  } = d;
-  function l(s) {
-    const t = document.getElementById(`dgs-ui-kit-otp-input-${s}`);
-    t?.focus(), t?.select();
+    isError: C,
+    value: i
+  } = h, a = v(!1);
+  function o(s) {
+    const e = document.getElementById(`dgs-ui-kit-otp-input-${s}`);
+    e?.focus(), e?.select();
   }
-  function C(s, t) {
-    const e = [s.code, s.key];
-    if (e.includes("Backspace") || e.includes("Delete")) {
-      const i = o.split("");
-      i[t] = "", t !== 0 && (i[t - 1] = "", l(t - 1)), c(i.join(""));
-    } else e.includes("ArrowLeft") ? l(t - 1) : e.includes("ArrowRight") && l(t + 1);
+  function w(s, e) {
+    const t = [s.code, s.key];
+    if (t.includes("Backspace") || t.includes("Delete")) {
+      const n = i.split("");
+      n[e] = "", e !== 0 && (n[e - 1] = "", o(e - 1)), c(n.join(""));
+    } else t.includes("ArrowLeft") ? o(e - 1) : t.includes("ArrowRight") && o(e + 1);
   }
-  function w(s, t) {
-    const e = s.currentTarget.value, i = o.split("");
-    e.length > 1 ? e.split("").forEach((N, g) => {
-      g < n && (i[g] = N);
-    }) : i[t] = e, c(i.join("")), t + 1 !== n && e && l(t + 1);
+  function E(s, e) {
+    const t = s.currentTarget.value, n = i.split("");
+    t.length > 1 ? t.split("").forEach((N, m) => {
+      m < l && (n[m] = N);
+    }) : n[e] = t, c(n.join("")), e + 1 !== l && t && o(e + 1);
   }
-  return I(() => {
-    o.length === n && typeof a == "function" && a(o);
-  }, [o, n, a]), /* @__PURE__ */ E("div", { className: m("dgs-ui-kit-space-y-2", h), children: [
-    p ? /* @__PURE__ */ u(j, { labelContent: p }) : null,
+  return j(() => {
+    i.length === l && a.current ? (a.current = !1, typeof f == "function" && f(i)) : i.length < l && (a.current = !0);
+  }, [i]), /* @__PURE__ */ I("div", { className: d("dgs-ui-kit-space-y-2", k), children: [
+    p ? /* @__PURE__ */ u(B, { labelContent: p }) : null,
     /* @__PURE__ */ u(
       "div",
       {
-        className: m(
+        className: d(
           "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2 [direction:ltr]",
-          k
+          y
         ),
-        children: Array.from(Array(n).keys()).map((s, t) => /* @__PURE__ */ u(
-          v,
+        children: Array.from(Array(l).keys()).map((s, e) => /* @__PURE__ */ u(
+          A,
           {
             containerClassName: "dgs-ui-kit-w-12 dgs-ui-kit-h-12 dgs-ui-kit-p-0",
             className: "dgs-ui-kit-w-full dgs-ui-kit-h-full !dgs-ui-kit-text-center placeholder:!dgs-ui-kit-text-center",
             placeholder: "-",
             type: "tel",
-            autoFocus: t === 0,
-            onChange: (e) => w(e, t),
-            onKeyUp: (e) => C(e, t),
-            id: `dgs-ui-kit-otp-input-${t}`,
-            value: o[t] || "",
+            autoFocus: e === 0,
+            onChange: (t) => E(t, e),
+            onKeyUp: (t) => w(t, e),
+            id: `dgs-ui-kit-otp-input-${e}`,
+            value: i[e] || "",
             showMaxLength: !1,
-            isError: !!r || y,
+            isError: !!r || C,
             autoComplete: "off",
             maxLength: 1
           },
@@ -67,15 +67,15 @@ const K = (d) => {
         ))
       }
     ),
-    r || f ? /* @__PURE__ */ u(
-      A,
+    r || g ? /* @__PURE__ */ u(
+      F,
       {
         errorMessage: r,
-        hintMessage: f
+        hintMessage: g
       }
     ) : null
   ] });
 };
 export {
-  K as default
+  R as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dgshahr/ui-kit",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "dgshahr ui-kit",
   "author": "dgshahr",
   "license": "MIT",