@dgshahr/ui-kit 0.0.15 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Form/OtpInput/index.cjs +1 -1
  2. package/dist/Form/OtpInput/index.d.ts.map +1 -1
  3. package/dist/Form/OtpInput/index.js +37 -34
  4. package/package.json +1 -1
package/dist/Form/OtpInput/index.cjs CHANGED
@@ -1 +1 @@
1
- "use client";"use strict";require('../../assets/styles.css');const u=require("react/jsx-runtime"),k=require("../../clsx-C11secjj.cjs"),h=require("react"),N=require("../Input/index.cjs"),m=require("../../TextFieldWrapper-CLMz60O3.cjs");;/* empty css */const q=y=>{const{inputsNumber:o=4,onChange:c,onEnd:r,className:j,inputsContainerClassName:v,labelContent:p,hintMessage:f,errorMessage:g,value:d}=y,[l,a]=h.useState([]);h.useEffect(()=>{if(d){const s=d.split("");a(s)}},[]);function i(s){document.getElementById(`dgs-ui-kit-otp-input-${s}`)?.focus()}function w(s,e){const t=[s.code,s.key];if(t.includes("Backspace")||t.includes("Delete")){const n=[...l];n[e]="",e!==0&&(n[e-1]="",i(e-1)),a(n)}else t.includes("ArrowLeft")?i(e+1):t.includes("ArrowRight")&&i(e-1)}function C(s,e){const t=s.currentTarget.value,n=[...l];n[e]=t,e+1!==o&&t?i(e+1):typeof r=="function"&&n.every(I=>!!I)&&r(n.join("")),a(n),typeof c=="function"&&c(n.join(""))}return u.jsxs("div",{className:k.clsx("dgs-ui-kit-space-y-2",j),children:[p?u.jsx(m.FieldLabel,{labelContent:p}):null,u.jsx("div",{className:k.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2",v),children:Array.from(Array(o).keys()).map((s,e)=>u.jsx(N,{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:"-",autoFocus:e===0,onChange:t=>C(t,e),onKeyUp:t=>w(t,e),id:`dgs-ui-kit-otp-input-${e}`,maxLength:1,value:l[e],showMaxLength:!1},s))}),g||f?u.jsx(m.FieldBottomInfo,{errorMessage:g,hintMessage:f}):null]})};module.exports=q;
1
+ "use client";"use strict";require('../../assets/styles.css');const i=require("react/jsx-runtime"),k=require("../../clsx-C11secjj.cjs"),h=require("react"),q=require("../Input/index.cjs"),m=require("../../TextFieldWrapper-CLMz60O3.cjs");;/* empty css */const V=y=>{const{inputsNumber:a=4,onChange:c,onEnd:p,className:j,inputsContainerClassName:v,labelContent:f,hintMessage:g,errorMessage:l,isError:w,value:d}=y,[o,r]=h.useState([]);h.useEffect(()=>{if(d){const s=d.split("");r(s)}},[]);function u(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 n=[...o];n[e]="",e!==0&&(n[e-1]="",u(e-1)),r(n)}else t.includes("ArrowLeft")?u(e+1):t.includes("ArrowRight")&&u(e-1)}function I(s,e){const t=s.currentTarget.value,n=[...o];n[e]=t,e+1!==a&&t?u(e+1):typeof p=="function"&&n.every(N=>!!N)&&p(n.join("")),r(n),typeof c=="function"&&c(n.join(""))}return i.jsxs("div",{className:k.clsx("dgs-ui-kit-space-y-2",j),children:[f?i.jsx(m.FieldLabel,{labelContent:f}):null,i.jsx("div",{className:k.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2",v),children:Array.from(Array(a).keys()).map((s,e)=>i.jsx(q,{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:"-",autoFocus:e===0,onChange:t=>I(t,e),onKeyUp:t=>C(t,e),id:`dgs-ui-kit-otp-input-${e}`,maxLength:1,value:o[e],showMaxLength:!1,isError:!!l||w},s))}),l||g?i.jsx(m.FieldBottomInfo,{errorMessage:l,hintMessage:g}):null]})};module.exports=V;
package/dist/Form/OtpInput/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/OtpInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyC,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACxF,OAAO,kBAAkB,CAAC;AAE1B,UAAU,aACR,SAAQ,IAAI,CAAC,kBAAkB,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsF/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/OtpInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyC,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACxF,OAAO,kBAAkB,CAAC;AAE1B,UAAU,aACR,SAAQ,IAAI,CAAC,kBAAkB,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA0F/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/dist/Form/OtpInput/index.js CHANGED
@@ -1,78 +1,81 @@
1
1
  "use client";
2
- import { jsxs as I, jsx as u } from "react/jsx-runtime";
2
+ import { jsxs as N, jsx as o } from "react/jsx-runtime";
3
3
  import { c as d } from "../../clsx-OuTLNxxd.js";
4
- import { useState as N, useEffect as V } from "react";
5
- import j from "../Input/index.js";
6
- import { F as A, a as B } from "../../TextFieldWrapper-Dm06uTk8.js";
4
+ import { useState as V, useEffect as B } from "react";
5
+ import E from "../Input/index.js";
6
+ import { F as j, a as A } from "../../TextFieldWrapper-Dm06uTk8.js";
7
7
  import '../../assets/styles.css';/* empty css */
8
- const O = (k) => {
8
+ const U = (k) => {
9
9
  const {
10
- inputsNumber: l = 4,
10
+ inputsNumber: r = 4,
11
11
  onChange: c,
12
- onEnd: r,
12
+ onEnd: p,
13
13
  className: h,
14
14
  inputsContainerClassName: y,
15
- labelContent: p,
16
- hintMessage: f,
17
- errorMessage: m,
15
+ labelContent: f,
16
+ hintMessage: m,
17
+ errorMessage: u,
18
+ isError: v,
18
19
  value: g
19
- } = k, [o, a] = N([]);
20
- V(() => {
20
+ } = k, [a, l] = V([]);
21
+ B(() => {
21
22
  if (g) {
22
23
  const s = g.split("");
23
- a(s);
24
+ l(s);
24
25
  }
25
26
  }, []);
26
27
  function n(s) {
27
- document.getElementById(`dgs-ui-kit-otp-input-${s}`)?.focus();
28
+ const e = document.getElementById(`dgs-ui-kit-otp-input-${s}`);
29
+ e?.focus(), e?.select();
28
30
  }
29
- function v(s, e) {
31
+ function w(s, e) {
30
32
  const t = [s.code, s.key];
31
33
  if (t.includes("Backspace") || t.includes("Delete")) {
32
- const i = [...o];
33
- i[e] = "", e !== 0 && (i[e - 1] = "", n(e - 1)), a(i);
34
+ const i = [...a];
35
+ i[e] = "", e !== 0 && (i[e - 1] = "", n(e - 1)), l(i);
34
36
  } else t.includes("ArrowLeft") ? n(e + 1) : t.includes("ArrowRight") && n(e - 1);
35
37
  }
36
- function w(s, e) {
37
- const t = s.currentTarget.value, i = [...o];
38
- i[e] = t, e + 1 !== l && t ? n(e + 1) : typeof r == "function" && i.every((C) => !!C) && r(i.join("")), a(i), typeof c == "function" && c(i.join(""));
38
+ function C(s, e) {
39
+ const t = s.currentTarget.value, i = [...a];
40
+ i[e] = t, e + 1 !== r && t ? n(e + 1) : typeof p == "function" && i.every((I) => !!I) && p(i.join("")), l(i), typeof c == "function" && c(i.join(""));
39
41
  }
40
- return /* @__PURE__ */ I("div", { className: d("dgs-ui-kit-space-y-2", h), children: [
41
- p ? /* @__PURE__ */ u(A, { labelContent: p }) : null,
42
- /* @__PURE__ */ u(
42
+ return /* @__PURE__ */ N("div", { className: d("dgs-ui-kit-space-y-2", h), children: [
43
+ f ? /* @__PURE__ */ o(j, { labelContent: f }) : null,
44
+ /* @__PURE__ */ o(
43
45
  "div",
44
46
  {
45
47
  className: d(
46
48
  "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2",
47
49
  y
48
50
  ),
49
- children: Array.from(Array(l).keys()).map((s, e) => /* @__PURE__ */ u(
50
- j,
51
+ children: Array.from(Array(r).keys()).map((s, e) => /* @__PURE__ */ o(
52
+ E,
51
53
  {
52
54
  containerClassName: "dgs-ui-kit-w-12 dgs-ui-kit-h-12 dgs-ui-kit-p-0",
53
55
  className: "dgs-ui-kit-w-full dgs-ui-kit-h-full !dgs-ui-kit-text-center placeholder:!dgs-ui-kit-text-center",
54
56
  placeholder: "-",
55
57
  autoFocus: e === 0,
56
- onChange: (t) => w(t, e),
57
- onKeyUp: (t) => v(t, e),
58
+ onChange: (t) => C(t, e),
59
+ onKeyUp: (t) => w(t, e),
58
60
  id: `dgs-ui-kit-otp-input-${e}`,
59
61
  maxLength: 1,
60
- value: o[e],
61
- showMaxLength: !1
62
+ value: a[e],
63
+ showMaxLength: !1,
64
+ isError: !!u || v
62
65
  },
63
66
  s
64
67
  ))
65
68
  }
66
69
  ),
67
- m || f ? /* @__PURE__ */ u(
68
- B,
70
+ u || m ? /* @__PURE__ */ o(
71
+ A,
69
72
  {
70
- errorMessage: m,
71
- hintMessage: f
73
+ errorMessage: u,
74
+ hintMessage: m
72
75
  }
73
76
  ) : null
74
77
  ] });
75
78
  };
76
79
  export {
77
- O as default
80
+ U as default
78
81
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dgshahr/ui-kit",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "description": "dgshahr ui-kit",
5
5
  "author": "dgshahr",
6
6
  "license": "MIT",