@dgshahr/ui-kit 0.0.56 → 0.0.57

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.
@@ -1 +1 @@
1
- "use client";"use strict";require('../../assets/styles.css');const r=require("react/jsx-runtime"),h=require("../../clsx-C11secjj.cjs"),k=require("react"),v=require("../Input/index.cjs"),m=require("../../TextFieldWrapper-B03flGgW.cjs");;/* empty css */const F=y=>{const{inputsNumber:u=4,onChange:a,onEnd:f,className:j,inputsContainerClassName:C,labelContent:p,hintMessage:g,errorMessage:c,isError:w,value:n,...E}=y,o=k.useRef(!1);function l(s){const e=document.getElementById(`dgs-ui-kit-otp-input-${s}`);e?.focus(),e?.select()}function N(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]="",l(e-1)),a(i.join(""))}else t.includes("ArrowLeft")?l(e-1):t.includes("ArrowRight")&&l(e+1)}function q(s,e){const t=s.currentTarget.value,i=n.split("");t.length>1?t.split("").forEach((I,d)=>{d<u&&(i[d]=I)}):i[e]=t,a(i.join("")),e+1!==u&&t&&l(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]),r.jsxs("div",{className:h.clsx("dgs-ui-kit-space-y-2",j),children:[p?r.jsx(m.FieldLabel,{labelContent:p}):null,r.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)=>r.jsx(v,{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=>q(t,e),onKeyUp:t=>N(t,e),id:`dgs-ui-kit-otp-input-${e}`,value:n[e]||"",showMaxLength:!1,isError:!!c||w,autoComplete:"off",maxLength:1,...E},s))}),c||g?r.jsx(m.FieldBottomInfo,{errorMessage:c,hintMessage:g}):null]})};module.exports=F;
1
+ "use client";"use strict";require('../../assets/styles.css');const r=require("react/jsx-runtime"),h=require("../../clsx-C11secjj.cjs"),m=require("react"),I=require("../Input/index.cjs"),k=require("../../TextFieldWrapper-B03flGgW.cjs");;/* empty css */const b=y=>{const{inputsNumber:u=4,onChange:o,onEnd:f,className:j,inputsContainerClassName:C,labelContent:p,hintMessage:g,errorMessage:a,isError:N,value:i,...w}=y,c=m.useRef(!1);function l(n){const e=document.getElementById(`dgs-ui-kit-otp-input-${n}`);e?.focus(),e?.select()}function E(n,e){const t=[n.code,n.key];if(t.includes("Backspace")||t.includes("Delete")){const s=i.split("");s[e]="",e!==0&&(s[e-1]="",l(e-1)),o(s.join(""))}else t.includes("ArrowLeft")?l(e-1):t.includes("ArrowRight")&&l(e+1)}function q(n,e){const t=n.currentTarget.value,s=i.split("");t.length>1?t.split("").forEach((x,d)=>{d<u&&(s[d]=x)}):s[e]=t,o(s.join("")),e+1!==u&&t&&l(e+1)}return m.useEffect(()=>{i.length===u&&c.current?(c.current=!1,typeof f=="function"&&f(i)):i.length<u&&(c.current=!0)},[i]),r.jsxs("div",{className:h.clsx("dgs-ui-kit-space-y-2",j),children:[p?r.jsx(k.FieldLabel,{labelContent:p}):null,r.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((n,e)=>r.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:"-",autoFocus:e===0,onChange:t=>q(t,e),onKeyUp:t=>E(t,e),id:`dgs-ui-kit-otp-input-${e}`,value:i[e]||"",showMaxLength:!1,isError:!!a||N,autoComplete:"off",maxLength:1,onPaste:t=>{const s=t.clipboardData.getData("text");Number(s)&&o(s)},...w},n))}),a||g?r.jsx(k.FieldBottomInfo,{errorMessage:a,hintMessage:g}):null]})};module.exports=b;
@@ -1 +1 @@
1
- {"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;AACzF,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3E,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,CA4G/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,EAAuC,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AACzF,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3E,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,CAgH/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,14 +1,14 @@
1
1
  "use client";
2
- import { jsxs as v, jsx as r } from "react/jsx-runtime";
2
+ import { jsxs as b, jsx as l } from "react/jsx-runtime";
3
3
  import { c as d } from "../../clsx-OuTLNxxd.js";
4
- import { useRef as j, useEffect as A } from "react";
5
- import B from "../Input/index.js";
6
- import { F, a as L } from "../../TextFieldWrapper-Mcwb34qQ.js";
4
+ import { useRef as v, useEffect as j } from "react";
5
+ import A from "../Input/index.js";
6
+ import { F as B, a as F } from "../../TextFieldWrapper-Mcwb34qQ.js";
7
7
  import '../../assets/styles.css';/* empty css */
8
- const T = (h) => {
8
+ const K = (h) => {
9
9
  const {
10
10
  inputsNumber: o = 4,
11
- onChange: c,
11
+ onChange: r,
12
12
  onEnd: f,
13
13
  className: k,
14
14
  inputsContainerClassName: y,
@@ -16,60 +16,64 @@ const T = (h) => {
16
16
  hintMessage: g,
17
17
  errorMessage: u,
18
18
  isError: C,
19
- value: i,
20
- ...w
21
- } = h, a = j(!1);
22
- function l(s) {
23
- const e = document.getElementById(`dgs-ui-kit-otp-input-${s}`);
19
+ value: n,
20
+ ...N
21
+ } = h, c = v(!1);
22
+ function a(i) {
23
+ const e = document.getElementById(`dgs-ui-kit-otp-input-${i}`);
24
24
  e?.focus(), e?.select();
25
25
  }
26
- function E(s, e) {
27
- const t = [s.code, s.key];
26
+ function w(i, e) {
27
+ const t = [i.code, i.key];
28
28
  if (t.includes("Backspace") || t.includes("Delete")) {
29
- const n = i.split("");
30
- n[e] = "", e !== 0 && (n[e - 1] = "", l(e - 1)), c(n.join(""));
31
- } else t.includes("ArrowLeft") ? l(e - 1) : t.includes("ArrowRight") && l(e + 1);
29
+ const s = n.split("");
30
+ s[e] = "", e !== 0 && (s[e - 1] = "", a(e - 1)), r(s.join(""));
31
+ } else t.includes("ArrowLeft") ? a(e - 1) : t.includes("ArrowRight") && a(e + 1);
32
32
  }
33
- function N(s, e) {
34
- const t = s.currentTarget.value, n = i.split("");
33
+ function E(i, e) {
34
+ const t = i.currentTarget.value, s = n.split("");
35
35
  t.length > 1 ? t.split("").forEach((I, m) => {
36
- m < o && (n[m] = I);
37
- }) : n[e] = t, c(n.join("")), e + 1 !== o && t && l(e + 1);
36
+ m < o && (s[m] = I);
37
+ }) : s[e] = t, r(s.join("")), e + 1 !== o && t && a(e + 1);
38
38
  }
39
- return A(() => {
40
- i.length === o && a.current ? (a.current = !1, typeof f == "function" && f(i)) : i.length < o && (a.current = !0);
41
- }, [i]), /* @__PURE__ */ v("div", { className: d("dgs-ui-kit-space-y-2", k), children: [
42
- p ? /* @__PURE__ */ r(F, { labelContent: p }) : null,
43
- /* @__PURE__ */ r(
39
+ return j(() => {
40
+ n.length === o && c.current ? (c.current = !1, typeof f == "function" && f(n)) : n.length < o && (c.current = !0);
41
+ }, [n]), /* @__PURE__ */ b("div", { className: d("dgs-ui-kit-space-y-2", k), children: [
42
+ p ? /* @__PURE__ */ l(B, { labelContent: p }) : null,
43
+ /* @__PURE__ */ l(
44
44
  "div",
45
45
  {
46
46
  className: d(
47
47
  "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2 [direction:ltr]",
48
48
  y
49
49
  ),
50
- children: Array.from(Array(o).keys()).map((s, e) => /* @__PURE__ */ r(
51
- B,
50
+ children: Array.from(Array(o).keys()).map((i, e) => /* @__PURE__ */ l(
51
+ A,
52
52
  {
53
53
  containerClassName: "dgs-ui-kit-w-12 dgs-ui-kit-h-12 dgs-ui-kit-p-0",
54
54
  className: "dgs-ui-kit-w-full dgs-ui-kit-h-full !dgs-ui-kit-text-center placeholder:!dgs-ui-kit-text-center",
55
55
  placeholder: "-",
56
56
  autoFocus: e === 0,
57
- onChange: (t) => N(t, e),
58
- onKeyUp: (t) => E(t, e),
57
+ onChange: (t) => E(t, e),
58
+ onKeyUp: (t) => w(t, e),
59
59
  id: `dgs-ui-kit-otp-input-${e}`,
60
- value: i[e] || "",
60
+ value: n[e] || "",
61
61
  showMaxLength: !1,
62
62
  isError: !!u || C,
63
63
  autoComplete: "off",
64
64
  maxLength: 1,
65
- ...w
65
+ onPaste: (t) => {
66
+ const s = t.clipboardData.getData("text");
67
+ Number(s) && r(s);
68
+ },
69
+ ...N
66
70
  },
67
- s
71
+ i
68
72
  ))
69
73
  }
70
74
  ),
71
- u || g ? /* @__PURE__ */ r(
72
- L,
75
+ u || g ? /* @__PURE__ */ l(
76
+ F,
73
77
  {
74
78
  errorMessage: u,
75
79
  hintMessage: g
@@ -78,5 +82,5 @@ const T = (h) => {
78
82
  ] });
79
83
  };
80
84
  export {
81
- T as default
85
+ K as default
82
86
  };
@@ -0,0 +1,332 @@
1
+ "use client";
2
+ import { jsx as r, jsxs as w, Fragment as V } from "react/jsx-runtime";
3
+ import { c as p } from "./clsx-OuTLNxxd.js";
4
+ import { createContext as F, useContext as $, useState as C, useEffect as b, forwardRef as K, useRef as W, useImperativeHandle as z, useId as X } from "react";
5
+ import { A as q } from "./ArrowLeft2-jP2w1vwt.js";
6
+ import { A as H } from "./ArrowRight2-CcHdxGRE.js";
7
+ import L from "./Button/index.js";
8
+ const M = F({
9
+ slidesPerView: 1,
10
+ spaceBetween: 0,
11
+ navigationVariant: "outside",
12
+ showNavigationDots: !0,
13
+ showPaginationText: !1,
14
+ childrenCount: 0,
15
+ sliderId: ""
16
+ }), A = () => $(M);
17
+ function G({
18
+ active: e,
19
+ autoplay: i,
20
+ variant: n = "outside"
21
+ }) {
22
+ return [
23
+ {
24
+ inside: "dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",
25
+ outside: "dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"
26
+ }[n],
27
+ e ? "dgs-ui-kit-w-[22px]" : "dgs-ui-kit-w-[6px]",
28
+ i ? "dgs-ui-kit-p-[1px]" : ""
29
+ ];
30
+ }
31
+ const J = (e) => {
32
+ const { active: i, onClick: n, onNavigateToNext: o, index: t } = e, { autoplay: a, navigationVariant: k = "outside" } = A(), [d, l] = C(0);
33
+ return b(() => {
34
+ if (!i || !a) return;
35
+ const f = typeof a == "boolean" ? 7e3 : a?.delay ?? 7e3;
36
+ let v = Date.now();
37
+ const u = setInterval(() => {
38
+ const c = Date.now() - v, g = c / f * 100;
39
+ l(Math.min(g, 100)), c >= f && typeof o == "function" && (o(), l(0), clearInterval(u));
40
+ }, 100);
41
+ return function() {
42
+ return l(0), v = Date.now(), clearInterval(u);
43
+ };
44
+ }, [i, a, o]), /* @__PURE__ */ r(
45
+ "button",
46
+ {
47
+ className: p(
48
+ "dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
49
+ G({ active: i, autoplay: a, variant: k })
50
+ ),
51
+ onClick: n,
52
+ "aria-label": `slider-navigation-dot-${t + 1}`,
53
+ children: i && /* @__PURE__ */ r(
54
+ "div",
55
+ {
56
+ className: p("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
57
+ "dgs-ui-kit-bg-white": k === "inside",
58
+ "dgs-ui-kit-bg-gray-700": k === "outside"
59
+ }),
60
+ style: { width: a ? `${d}%` : "100%" }
61
+ }
62
+ )
63
+ }
64
+ );
65
+ }, Q = (e) => {
66
+ const { onNavigate: i, slideIndex: n, slidesCount: o } = e, {
67
+ navigationButtonsShowType: t = "hide",
68
+ dotsClassName: a,
69
+ navigationContainerClassName: k,
70
+ navigationVariant: d = "outside",
71
+ showNavigationDots: l = !0,
72
+ showPaginationText: f
73
+ } = A(), v = /* @__PURE__ */ w(
74
+ "div",
75
+ {
76
+ className: p("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
77
+ "dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": d === "inside" && t !== "onSides",
78
+ "dgs-ui-kit-absolute dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]": t === "onSides",
79
+ "dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": t === "hover" || t === "onSides"
80
+ }),
81
+ children: [
82
+ /* @__PURE__ */ r(
83
+ L,
84
+ {
85
+ type: "button",
86
+ variant: "secondary",
87
+ onClick: () => i(n - 1),
88
+ rightIcon: /* @__PURE__ */ r(H, {}),
89
+ "aria-label": "slider-previous-button"
90
+ }
91
+ ),
92
+ /* @__PURE__ */ r(
93
+ L,
94
+ {
95
+ type: "button",
96
+ variant: "secondary",
97
+ onClick: () => i(n + 1),
98
+ rightIcon: /* @__PURE__ */ r(q, {}),
99
+ "aria-label": "slider-next-button"
100
+ }
101
+ )
102
+ ]
103
+ }
104
+ );
105
+ return /* @__PURE__ */ w(V, { children: [
106
+ t && t !== "hide" && t === "onSides" && v,
107
+ /* @__PURE__ */ w(
108
+ "div",
109
+ {
110
+ className: p(
111
+ "dgs-ui-kit-flex",
112
+ {
113
+ "dgs-ui-kit-items-center dgs-ui-kit-mt-2": d === "outside",
114
+ "dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center": d === "inside",
115
+ "dgs-ui-kit-justify-between": d === "outside" && t !== "hide" && t !== "onSides",
116
+ "dgs-ui-kit-justify-center": d === "outside" && (t === "hide" || t === "onSides")
117
+ },
118
+ k
119
+ ),
120
+ children: [
121
+ t && t !== "hide" && t !== "onSides" && v,
122
+ (l || f) && /* @__PURE__ */ w("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
123
+ f && /* @__PURE__ */ w("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02", children: [
124
+ /* @__PURE__ */ r(
125
+ "span",
126
+ {
127
+ className: p("dgs-ui-kit-font-bold", {
128
+ "dgs-ui-kit-text-gray-600": d === "outside",
129
+ "dgs-ui-kit-text-white": d === "inside"
130
+ }),
131
+ children: n + 1
132
+ }
133
+ ),
134
+ /* @__PURE__ */ r("span", { children: "از" }),
135
+ /* @__PURE__ */ r("span", { children: o })
136
+ ] }),
137
+ l && /* @__PURE__ */ r(
138
+ "div",
139
+ {
140
+ className: p(
141
+ "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",
142
+ a
143
+ ),
144
+ children: Array.from(Array(o).keys()).map((u, c) => /* @__PURE__ */ r(
145
+ J,
146
+ {
147
+ active: n === c,
148
+ index: c,
149
+ onClick: () => i(c),
150
+ onNavigateToNext: () => i(n + 1)
151
+ },
152
+ u + o
153
+ ))
154
+ }
155
+ )
156
+ ] })
157
+ ]
158
+ }
159
+ )
160
+ ] });
161
+ }, U = K((e, i) => {
162
+ const [n, o] = C(e), {
163
+ className: t = "",
164
+ containerClassName: a = "",
165
+ showNavigationDots: k = !0,
166
+ slidesPerView: d = 1,
167
+ navigationButtonsShowType: l = "hide",
168
+ spaceBetween: f = 0,
169
+ showPaginationText: v,
170
+ onSlideIndexChange: u,
171
+ initialSlide: c,
172
+ containerXPadding: g = 0
173
+ } = n, [S, I] = C(0), [j, B] = C(0), D = Object.fromEntries(
174
+ Object.entries(n).filter(([s]) => s !== "children")
175
+ ), h = W(null), m = Math.ceil(j / Math.floor(d)), R = (k || l && l !== "hide" || v) && m > 1;
176
+ function E(s) {
177
+ if (Math.ceil(Math.abs(s.currentTarget.scrollLeft)) + s.currentTarget.clientWidth + 1 + g >= s.currentTarget.scrollWidth) {
178
+ I(m - 1);
179
+ return;
180
+ }
181
+ const y = s.currentTarget.scrollWidth - g * 2, N = y / m, x = (y - s.currentTarget.scrollLeft - g) / N;
182
+ if (x <= m) {
183
+ I(0);
184
+ return;
185
+ }
186
+ I(Math.round(x % m));
187
+ }
188
+ function P(s) {
189
+ if (!h.current) return;
190
+ const y = h.current.offsetWidth, N = S - s, x = h.current.scrollWidth / m, O = N * x;
191
+ s < 0 ? h.current.scrollTo({ behavior: "smooth", left: -(y * m) }) : s >= m ? h.current.scrollTo({ behavior: "smooth", left: 0 }) : h.current.scrollBy({ behavior: "smooth", left: O });
192
+ }
193
+ function T() {
194
+ const y = Object.keys(e.responsive).sort().findLast(
195
+ (x) => Number(x) <= window.innerWidth
196
+ ), N = y ? e.responsive[Number(y)] : null;
197
+ o(N ? { ...n, ...N } : e);
198
+ }
199
+ return z(i, () => ({
200
+ element: h.current,
201
+ navigate: (s) => P(Math.max(0, s - 1))
202
+ })), b(() => {
203
+ if (!h.current) return;
204
+ let s = h.current.childElementCount;
205
+ g > 0 && (s -= 2), B(s);
206
+ }, [e.children, h, g]), b(() => {
207
+ if (!(!e.responsive || Object.keys(e.responsive).length <= 0))
208
+ return T(), window.addEventListener("resize", T), () => {
209
+ window.removeEventListener("resize", T);
210
+ };
211
+ }, [e.responsive]), b(() => {
212
+ u && typeof u == "function" && u(S);
213
+ }, [S]), b(() => {
214
+ typeof c == "number" && h.current && P(Math.max(0, c - 1));
215
+ }, [c, h.current]), /* @__PURE__ */ r(M.Provider, { value: { ...D, childrenCount: j, sliderId: X() }, children: /* @__PURE__ */ w(
216
+ "div",
217
+ {
218
+ className: p(
219
+ "dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",
220
+ t
221
+ ),
222
+ style: { direction: "rtl" },
223
+ children: [
224
+ /* @__PURE__ */ w(
225
+ "div",
226
+ {
227
+ className: p(
228
+ "dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",
229
+ a
230
+ ),
231
+ style: { marginLeft: -f },
232
+ onScroll: E,
233
+ ref: h,
234
+ children: [
235
+ g > 0 && /* @__PURE__ */ r(
236
+ "div",
237
+ {
238
+ className: "dgs-ui-kit-shrink-0",
239
+ style: {
240
+ width: g,
241
+ paddingLeft: f
242
+ }
243
+ }
244
+ ),
245
+ e.children,
246
+ g > 0 && /* @__PURE__ */ r(
247
+ "div",
248
+ {
249
+ className: "dgs-ui-kit-shrink-0",
250
+ style: {
251
+ width: g,
252
+ paddingLeft: f
253
+ }
254
+ }
255
+ )
256
+ ]
257
+ }
258
+ ),
259
+ R && /* @__PURE__ */ r(
260
+ Q,
261
+ {
262
+ onNavigate: P,
263
+ slideIndex: S,
264
+ slidesCount: m
265
+ }
266
+ )
267
+ ]
268
+ }
269
+ ) });
270
+ });
271
+ U.displayName = "Slider";
272
+ function Y({
273
+ slidesPerView: e,
274
+ childIndex: i,
275
+ centerMode: n,
276
+ childrenCount: o,
277
+ haveContainerPadding: t
278
+ }) {
279
+ const a = i % Math.floor(e) === 0, k = e % 1 !== 0, d = i === 0, l = i === o - 1;
280
+ if (!a) return "none";
281
+ if (n) {
282
+ if (k && !t) {
283
+ if (d) return "start";
284
+ if (l) return "end";
285
+ }
286
+ return "center";
287
+ }
288
+ return "start";
289
+ }
290
+ const st = (e) => {
291
+ const { children: i, className: n, style: o, ...t } = e, {
292
+ slidesPerView: a = 1,
293
+ spaceBetween: k = 0,
294
+ centerMode: d = !1,
295
+ containerXPadding: l = 0,
296
+ childrenCount: f = 0,
297
+ sliderId: v
298
+ } = A(), u = W(null), [c, g] = C(0);
299
+ return b(() => {
300
+ u.current && g(
301
+ Array.prototype.indexOf.call(
302
+ document.querySelectorAll(`[id='slide-item-${v}']`),
303
+ u.current
304
+ )
305
+ );
306
+ }, [u, f, l]), /* @__PURE__ */ r(
307
+ "div",
308
+ {
309
+ ...t,
310
+ ref: u,
311
+ id: `slide-item-${v}`,
312
+ className: p("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal", n),
313
+ style: {
314
+ width: 100 / (a ?? 1) + "%",
315
+ paddingLeft: k,
316
+ scrollSnapAlign: Y({
317
+ slidesPerView: a,
318
+ childIndex: c,
319
+ centerMode: d,
320
+ childrenCount: f || 0,
321
+ haveContainerPadding: l > 0
322
+ }),
323
+ ...o
324
+ },
325
+ children: i
326
+ }
327
+ );
328
+ };
329
+ export {
330
+ U as S,
331
+ st as a
332
+ };
@@ -0,0 +1 @@
1
+ "use client";"use strict";const t=require("react/jsx-runtime"),p=require("./clsx-C11secjj.cjs"),n=require("react"),D=require("./ArrowLeft2-B76dkC-C.cjs"),q=require("./ArrowRight2-CYowPzS8.cjs"),T=require("./Button/index.cjs"),A=n.createContext({slidesPerView:1,spaceBetween:0,navigationVariant:"outside",showNavigationDots:!0,showPaginationText:!1,childrenCount:0,sliderId:""}),I=()=>n.useContext(A);function O({active:i,autoplay:s,variant:r="outside"}){return[{inside:"dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",outside:"dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"}[r],i?"dgs-ui-kit-w-[22px]":"dgs-ui-kit-w-[6px]",s?"dgs-ui-kit-p-[1px]":""]}const V=i=>{const{active:s,onClick:r,onNavigateToNext:a,index:e}=i,{autoplay:d,navigationVariant:v="outside"}=I(),[l,u]=n.useState(0);return n.useEffect(()=>{if(!s||!d)return;const k=typeof d=="boolean"?7e3:d?.delay??7e3;let x=Date.now();const c=setInterval(()=>{const g=Date.now()-x,f=g/k*100;u(Math.min(f,100)),g>=k&&typeof a=="function"&&(a(),u(0),clearInterval(c))},100);return function(){return u(0),x=Date.now(),clearInterval(c)}},[s,d,a]),t.jsx("button",{className:p.clsx("dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",O({active:s,autoplay:d,variant:v})),onClick:r,"aria-label":`slider-navigation-dot-${e+1}`,children:s&&t.jsx("div",{className:p.clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full",{"dgs-ui-kit-bg-white":v==="inside","dgs-ui-kit-bg-gray-700":v==="outside"}),style:{width:d?`${l}%`:"100%"}})})},F=i=>{const{onNavigate:s,slideIndex:r,slidesCount:a}=i,{navigationButtonsShowType:e="hide",dotsClassName:d,navigationContainerClassName:v,navigationVariant:l="outside",showNavigationDots:u=!0,showPaginationText:k}=I(),x=t.jsxs("div",{className:p.clsx("dgs-ui-kit-flex dgs-ui-kit-gap-2",{"dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]":l==="inside"&&e!=="onSides","dgs-ui-kit-absolute dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]":e==="onSides","dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition":e==="hover"||e==="onSides"}),children:[t.jsx(T,{type:"button",variant:"secondary",onClick:()=>s(r-1),rightIcon:t.jsx(q.ArrowRight2Icon,{}),"aria-label":"slider-previous-button"}),t.jsx(T,{type:"button",variant:"secondary",onClick:()=>s(r+1),rightIcon:t.jsx(D.ArrowLeft2Icon,{}),"aria-label":"slider-next-button"})]});return t.jsxs(t.Fragment,{children:[e&&e!=="hide"&&e==="onSides"&&x,t.jsxs("div",{className:p.clsx("dgs-ui-kit-flex",{"dgs-ui-kit-items-center dgs-ui-kit-mt-2":l==="outside","dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center":l==="inside","dgs-ui-kit-justify-between":l==="outside"&&e!=="hide"&&e!=="onSides","dgs-ui-kit-justify-center":l==="outside"&&(e==="hide"||e==="onSides")},v),children:[e&&e!=="hide"&&e!=="onSides"&&x,(u||k)&&t.jsxs("div",{className:"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3",children:[k&&t.jsxs("div",{className:"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02",children:[t.jsx("span",{className:p.clsx("dgs-ui-kit-font-bold",{"dgs-ui-kit-text-gray-600":l==="outside","dgs-ui-kit-text-white":l==="inside"}),children:r+1}),t.jsx("span",{children:"از"}),t.jsx("span",{children:a})]}),u&&t.jsx("div",{className:p.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",d),children:Array.from(Array(a).keys()).map((c,g)=>t.jsx(V,{active:r===g,index:g,onClick:()=>s(g),onNavigateToNext:()=>s(r+1)},c+a))})]})]})]})},L=n.forwardRef((i,s)=>{const[r,a]=n.useState(i),{className:e="",containerClassName:d="",showNavigationDots:v=!0,slidesPerView:l=1,navigationButtonsShowType:u="hide",spaceBetween:k=0,showPaginationText:x,onSlideIndexChange:c,initialSlide:g,containerXPadding:f=0}=r,[b,C]=n.useState(0),[P,R]=n.useState(0),W=Object.fromEntries(Object.entries(r).filter(([o])=>o!=="children")),h=n.useRef(null),m=Math.ceil(P/Math.floor(l)),E=(v||u&&u!=="hide"||x)&&m>1;function M(o){if(Math.ceil(Math.abs(o.currentTarget.scrollLeft))+o.currentTarget.clientWidth+1+f>=o.currentTarget.scrollWidth){C(m-1);return}const y=o.currentTarget.scrollWidth-f*2,w=y/m,N=(y-o.currentTarget.scrollLeft-f)/w;if(N<=m){C(0);return}C(Math.round(N%m))}function j(o){if(!h.current)return;const y=h.current.offsetWidth,w=b-o,N=h.current.scrollWidth/m,B=w*N;o<0?h.current.scrollTo({behavior:"smooth",left:-(y*m)}):o>=m?h.current.scrollTo({behavior:"smooth",left:0}):h.current.scrollBy({behavior:"smooth",left:B})}function S(){const y=Object.keys(i.responsive).sort().findLast(N=>Number(N)<=window.innerWidth),w=y?i.responsive[Number(y)]:null;a(w?{...r,...w}:i)}return n.useImperativeHandle(s,()=>({element:h.current,navigate:o=>j(Math.max(0,o-1))})),n.useEffect(()=>{if(!h.current)return;let o=h.current.childElementCount;f>0&&(o-=2),R(o)},[i.children,h,f]),n.useEffect(()=>{if(!(!i.responsive||Object.keys(i.responsive).length<=0))return S(),window.addEventListener("resize",S),()=>{window.removeEventListener("resize",S)}},[i.responsive]),n.useEffect(()=>{c&&typeof c=="function"&&c(b)},[b]),n.useEffect(()=>{typeof g=="number"&&h.current&&j(Math.max(0,g-1))},[g,h.current]),t.jsx(A.Provider,{value:{...W,childrenCount:P,sliderId:n.useId()},children:t.jsxs("div",{className:p.clsx("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",e),style:{direction:"rtl"},children:[t.jsxs("div",{className:p.clsx("dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",d),style:{marginLeft:-k},onScroll:M,ref:h,children:[f>0&&t.jsx("div",{className:"dgs-ui-kit-shrink-0",style:{width:f,paddingLeft:k}}),i.children,f>0&&t.jsx("div",{className:"dgs-ui-kit-shrink-0",style:{width:f,paddingLeft:k}})]}),E&&t.jsx(F,{onNavigate:j,slideIndex:b,slidesCount:m})]})})});L.displayName="Slider";function $({slidesPerView:i,childIndex:s,centerMode:r,childrenCount:a,haveContainerPadding:e}){const d=s%Math.floor(i)===0,v=i%1!==0,l=s===0,u=s===a-1;if(!d)return"none";if(r){if(v&&!e){if(l)return"start";if(u)return"end"}return"center"}return"start"}const K=i=>{const{children:s,className:r,style:a,...e}=i,{slidesPerView:d=1,spaceBetween:v=0,centerMode:l=!1,containerXPadding:u=0,childrenCount:k=0,sliderId:x}=I(),c=n.useRef(null),[g,f]=n.useState(0);return n.useEffect(()=>{c.current&&f(Array.prototype.indexOf.call(document.querySelectorAll(`[id='slide-item-${x}']`),c.current))},[c,k,u]),t.jsx("div",{...e,ref:c,id:`slide-item-${x}`,className:p.clsx("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal",r),style:{width:100/(d??1)+"%",paddingLeft:v,scrollSnapAlign:$({slidesPerView:d,childIndex:g,centerMode:l,childrenCount:k||0,haveContainerPadding:u>0}),...a},children:s})};exports.Slide=K;exports.Slider=L;
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,UAAU,eAAe;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwGnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,UAAU,eAAe;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2GnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1,5 +1,6 @@
1
1
  interface NavigationDotProps {
2
2
  active: boolean;
3
+ index: number;
3
4
  onClick?: () => void;
4
5
  onNavigateToNext?: () => void;
5
6
  }
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationDot.d.ts","sourceRoot":"","sources":["../../src/components/Slider/NavigationDot.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAuBD,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CAgD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"NavigationDot.d.ts","sourceRoot":"","sources":["../../src/components/Slider/NavigationDot.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAuBD,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CAiD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/styles.css');;/* empty css */const e=require("../Slide-S7dYK-Ve.cjs");exports.Slide=e.Slide;exports.Slider=e.Slider;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/styles.css');;/* empty css */const e=require("../Slide-aMCvZQnM.cjs");exports.Slide=e.Slide;exports.Slider=e.Slider;
@@ -1,5 +1,5 @@
1
1
  import '../assets/styles.css';/* empty css */
2
- import { a as i, S as o } from "../Slide-Bkfv_374.js";
2
+ import { a as i, S as o } from "../Slide-DsdG_6vc.js";
3
3
  export {
4
4
  i as Slide,
5
5
  o as Slider
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/styles.css');;/* empty css */const r=require("./AccordionItem-AwBSlD0h.cjs"),o=require("./Alert/index.cjs"),t=require("./Badge/index.cjs"),i=require("./Breadcrumb/index.cjs"),n=require("./Button/index.cjs"),c=require("./Divider/index.cjs"),u=require("./Drawer/index.cjs"),s=require("./Form/Checkbox/index.cjs"),a=require("./Form/Input/index.cjs"),d=require("./Form/OtpInput/index.cjs"),q=require("./Form/RadioButton/index.cjs"),m=require("./Form/Textarea/index.cjs"),l=require("./Pagination/index.cjs"),B=require("./Progress/Bar/index.cjs"),e=require("./Slide-S7dYK-Ve.cjs"),p=require("./Tabs/index.cjs");exports.AccordionGroup=r.AccordionGroup;exports.AccordionItem=r.AccordionItem;exports.Alert=o;exports.Badge=t;exports.Breadcrumb=i;exports.Button=n;exports.Divider=c;exports.Drawer=u;exports.Checkbox=s;exports.Input=a;exports.OtpInput=d;exports.RadioButton=q;exports.Textarea=m;exports.Pagination=l;exports.ProgressBar=B;exports.Slide=e.Slide;exports.Slider=e.Slider;exports.Tabs=p;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/styles.css');;/* empty css */const r=require("./AccordionItem-AwBSlD0h.cjs"),o=require("./Alert/index.cjs"),t=require("./Badge/index.cjs"),i=require("./Breadcrumb/index.cjs"),n=require("./Button/index.cjs"),c=require("./Divider/index.cjs"),u=require("./Drawer/index.cjs"),s=require("./Form/Checkbox/index.cjs"),a=require("./Form/Input/index.cjs"),d=require("./Form/OtpInput/index.cjs"),q=require("./Form/RadioButton/index.cjs"),m=require("./Form/Textarea/index.cjs"),l=require("./Pagination/index.cjs"),B=require("./Progress/Bar/index.cjs"),e=require("./Slide-aMCvZQnM.cjs"),p=require("./Tabs/index.cjs");exports.AccordionGroup=r.AccordionGroup;exports.AccordionItem=r.AccordionItem;exports.Alert=o;exports.Badge=t;exports.Breadcrumb=i;exports.Button=n;exports.Divider=c;exports.Drawer=u;exports.Checkbox=s;exports.Input=a;exports.OtpInput=d;exports.RadioButton=q;exports.Textarea=m;exports.Pagination=l;exports.ProgressBar=B;exports.Slide=e.Slide;exports.Slider=e.Slider;exports.Tabs=p;
package/dist/index.js CHANGED
@@ -13,7 +13,7 @@ import { default as T } from "./Form/RadioButton/index.js";
13
13
  import { default as k } from "./Form/Textarea/index.js";
14
14
  import { default as w } from "./Pagination/index.js";
15
15
  import { default as G } from "./Progress/Bar/index.js";
16
- import { a as R, S as j } from "./Slide-Bkfv_374.js";
16
+ import { a as R, S as j } from "./Slide-DsdG_6vc.js";
17
17
  import { default as y } from "./Tabs/index.js";
18
18
  export {
19
19
  e as AccordionGroup,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dgshahr/ui-kit",
3
- "version": "0.0.56",
3
+ "version": "0.0.57",
4
4
  "description": "dgshahr ui-kit",
5
5
  "author": "dgshahr",
6
6
  "license": "MIT",
@@ -1,328 +0,0 @@
1
- "use client";
2
- import { jsx as o, jsxs as w, Fragment as V } from "react/jsx-runtime";
3
- import { c as p } from "./clsx-OuTLNxxd.js";
4
- import { createContext as F, useContext as K, useState as b, useEffect as C, forwardRef as $, useRef as W, useImperativeHandle as z, useId as X } from "react";
5
- import { A as q } from "./ArrowLeft2-jP2w1vwt.js";
6
- import { A as H } from "./ArrowRight2-CcHdxGRE.js";
7
- import L from "./Button/index.js";
8
- const M = F({
9
- slidesPerView: 1,
10
- spaceBetween: 0,
11
- navigationVariant: "outside",
12
- showNavigationDots: !0,
13
- showPaginationText: !1,
14
- childrenCount: 0,
15
- sliderId: ""
16
- }), A = () => K(M);
17
- function G({
18
- active: e,
19
- autoplay: i,
20
- variant: n = "outside"
21
- }) {
22
- return [
23
- {
24
- inside: "dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",
25
- outside: "dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"
26
- }[n],
27
- e ? "dgs-ui-kit-w-[22px]" : "dgs-ui-kit-w-[6px]",
28
- i ? "dgs-ui-kit-p-[1px]" : ""
29
- ];
30
- }
31
- const J = (e) => {
32
- const { active: i, onClick: n, onNavigateToNext: a } = e, { autoplay: t, navigationVariant: c = "outside" } = A(), [m, s] = b(0);
33
- return C(() => {
34
- if (!i || !t) return;
35
- const l = typeof t == "boolean" ? 7e3 : t?.delay ?? 7e3;
36
- let g = Date.now();
37
- const f = setInterval(() => {
38
- const d = Date.now() - g, k = d / l * 100;
39
- s(Math.min(k, 100)), d >= l && typeof a == "function" && (a(), s(0), clearInterval(f));
40
- }, 100);
41
- return function() {
42
- return s(0), g = Date.now(), clearInterval(f);
43
- };
44
- }, [i, t, a]), /* @__PURE__ */ o(
45
- "button",
46
- {
47
- className: p(
48
- "dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
49
- G({ active: i, autoplay: t, variant: c })
50
- ),
51
- onClick: n,
52
- children: i && /* @__PURE__ */ o(
53
- "div",
54
- {
55
- className: p("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
56
- "dgs-ui-kit-bg-white": c === "inside",
57
- "dgs-ui-kit-bg-gray-700": c === "outside"
58
- }),
59
- style: { width: t ? `${m}%` : "100%" }
60
- }
61
- )
62
- }
63
- );
64
- }, Q = (e) => {
65
- const { onNavigate: i, slideIndex: n, slidesCount: a } = e, {
66
- navigationButtonsShowType: t = "hide",
67
- dotsClassName: c,
68
- navigationContainerClassName: m,
69
- navigationVariant: s = "outside",
70
- showNavigationDots: l = !0,
71
- showPaginationText: g
72
- } = A(), f = /* @__PURE__ */ w(
73
- "div",
74
- {
75
- className: p("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
76
- "dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": s === "inside" && t !== "onSides",
77
- "dgs-ui-kit-absolute dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]": t === "onSides",
78
- "dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": t === "hover" || t === "onSides"
79
- }),
80
- children: [
81
- /* @__PURE__ */ o(
82
- L,
83
- {
84
- type: "button",
85
- variant: "secondary",
86
- onClick: () => i(n - 1),
87
- rightIcon: /* @__PURE__ */ o(H, {})
88
- }
89
- ),
90
- /* @__PURE__ */ o(
91
- L,
92
- {
93
- type: "button",
94
- variant: "secondary",
95
- onClick: () => i(n + 1),
96
- rightIcon: /* @__PURE__ */ o(q, {})
97
- }
98
- )
99
- ]
100
- }
101
- );
102
- return /* @__PURE__ */ w(V, { children: [
103
- t && t !== "hide" && t === "onSides" && f,
104
- /* @__PURE__ */ w(
105
- "div",
106
- {
107
- className: p(
108
- "dgs-ui-kit-flex",
109
- {
110
- "dgs-ui-kit-items-center dgs-ui-kit-mt-2": s === "outside",
111
- "dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center": s === "inside",
112
- "dgs-ui-kit-justify-between": s === "outside" && t !== "hide" && t !== "onSides",
113
- "dgs-ui-kit-justify-center": s === "outside" && (t === "hide" || t === "onSides")
114
- },
115
- m
116
- ),
117
- children: [
118
- t && t !== "hide" && t !== "onSides" && f,
119
- (l || g) && /* @__PURE__ */ w("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
120
- g && /* @__PURE__ */ w("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02", children: [
121
- /* @__PURE__ */ o(
122
- "span",
123
- {
124
- className: p("dgs-ui-kit-font-bold", {
125
- "dgs-ui-kit-text-gray-600": s === "outside",
126
- "dgs-ui-kit-text-white": s === "inside"
127
- }),
128
- children: n + 1
129
- }
130
- ),
131
- /* @__PURE__ */ o("span", { children: "از" }),
132
- /* @__PURE__ */ o("span", { children: a })
133
- ] }),
134
- l && /* @__PURE__ */ o(
135
- "div",
136
- {
137
- className: p(
138
- "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",
139
- c
140
- ),
141
- children: Array.from(Array(a).keys()).map((d, k) => /* @__PURE__ */ o(
142
- J,
143
- {
144
- active: n === k,
145
- onClick: () => i(k),
146
- onNavigateToNext: () => i(n + 1)
147
- },
148
- d + a
149
- ))
150
- }
151
- )
152
- ] })
153
- ]
154
- }
155
- )
156
- ] });
157
- }, U = $((e, i) => {
158
- const [n, a] = b(e), {
159
- className: t = "",
160
- containerClassName: c = "",
161
- showNavigationDots: m = !0,
162
- slidesPerView: s = 1,
163
- navigationButtonsShowType: l = "hide",
164
- spaceBetween: g = 0,
165
- showPaginationText: f,
166
- onSlideIndexChange: d,
167
- initialSlide: k,
168
- containerXPadding: h = 0
169
- } = n, [S, I] = b(0), [j, B] = b(0), D = Object.fromEntries(
170
- Object.entries(n).filter(([r]) => r !== "children")
171
- ), u = W(null), v = Math.ceil(j / Math.floor(s)), R = (m || l && l !== "hide" || f) && v > 1;
172
- function E(r) {
173
- if (Math.ceil(Math.abs(r.currentTarget.scrollLeft)) + r.currentTarget.clientWidth + 1 + h >= r.currentTarget.scrollWidth) {
174
- I(v - 1);
175
- return;
176
- }
177
- const y = r.currentTarget.scrollWidth - h * 2, N = y / v, x = (y - r.currentTarget.scrollLeft - h) / N;
178
- if (x <= v) {
179
- I(0);
180
- return;
181
- }
182
- I(Math.round(x % v));
183
- }
184
- function P(r) {
185
- if (!u.current) return;
186
- const y = u.current.offsetWidth, N = S - r, x = u.current.scrollWidth / v, O = N * x;
187
- r < 0 ? u.current.scrollTo({ behavior: "smooth", left: -(y * v) }) : r >= v ? u.current.scrollTo({ behavior: "smooth", left: 0 }) : u.current.scrollBy({ behavior: "smooth", left: O });
188
- }
189
- function T() {
190
- const y = Object.keys(e.responsive).sort().findLast(
191
- (x) => Number(x) <= window.innerWidth
192
- ), N = y ? e.responsive[Number(y)] : null;
193
- a(N ? { ...n, ...N } : e);
194
- }
195
- return z(i, () => ({
196
- element: u.current,
197
- navigate: (r) => P(Math.max(0, r - 1))
198
- })), C(() => {
199
- if (!u.current) return;
200
- let r = u.current.childElementCount;
201
- h > 0 && (r -= 2), B(r);
202
- }, [e.children, u, h]), C(() => {
203
- if (!(!e.responsive || Object.keys(e.responsive).length <= 0))
204
- return T(), window.addEventListener("resize", T), () => {
205
- window.removeEventListener("resize", T);
206
- };
207
- }, [e.responsive]), C(() => {
208
- d && typeof d == "function" && d(S);
209
- }, [S]), C(() => {
210
- typeof k == "number" && u.current && P(Math.max(0, k - 1));
211
- }, [k, u.current]), /* @__PURE__ */ o(M.Provider, { value: { ...D, childrenCount: j, sliderId: X() }, children: /* @__PURE__ */ w(
212
- "div",
213
- {
214
- className: p(
215
- "dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",
216
- t
217
- ),
218
- style: { direction: "rtl" },
219
- children: [
220
- /* @__PURE__ */ w(
221
- "div",
222
- {
223
- className: p(
224
- "dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",
225
- c
226
- ),
227
- style: { marginLeft: -g },
228
- onScroll: E,
229
- ref: u,
230
- children: [
231
- h > 0 && /* @__PURE__ */ o(
232
- "div",
233
- {
234
- className: "dgs-ui-kit-shrink-0",
235
- style: {
236
- width: h,
237
- paddingLeft: g
238
- }
239
- }
240
- ),
241
- e.children,
242
- h > 0 && /* @__PURE__ */ o(
243
- "div",
244
- {
245
- className: "dgs-ui-kit-shrink-0",
246
- style: {
247
- width: h,
248
- paddingLeft: g
249
- }
250
- }
251
- )
252
- ]
253
- }
254
- ),
255
- R && /* @__PURE__ */ o(
256
- Q,
257
- {
258
- onNavigate: P,
259
- slideIndex: S,
260
- slidesCount: v
261
- }
262
- )
263
- ]
264
- }
265
- ) });
266
- });
267
- U.displayName = "Slider";
268
- function Y({
269
- slidesPerView: e,
270
- childIndex: i,
271
- centerMode: n,
272
- childrenCount: a,
273
- haveContainerPadding: t
274
- }) {
275
- const c = i % Math.floor(e) === 0, m = e % 1 !== 0, s = i === 0, l = i === a - 1;
276
- if (!c) return "none";
277
- if (n) {
278
- if (m && !t) {
279
- if (s) return "start";
280
- if (l) return "end";
281
- }
282
- return "center";
283
- }
284
- return "start";
285
- }
286
- const st = (e) => {
287
- const { children: i, className: n, style: a, ...t } = e, {
288
- slidesPerView: c = 1,
289
- spaceBetween: m = 0,
290
- centerMode: s = !1,
291
- containerXPadding: l = 0,
292
- childrenCount: g = 0,
293
- sliderId: f
294
- } = A(), d = W(null), [k, h] = b(0);
295
- return C(() => {
296
- d.current && h(
297
- Array.prototype.indexOf.call(
298
- document.querySelectorAll(`[id='slide-item-${f}']`),
299
- d.current
300
- )
301
- );
302
- }, [d, g, l]), /* @__PURE__ */ o(
303
- "div",
304
- {
305
- ...t,
306
- ref: d,
307
- id: `slide-item-${f}`,
308
- className: p("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal", n),
309
- style: {
310
- width: 100 / (c ?? 1) + "%",
311
- paddingLeft: m,
312
- scrollSnapAlign: Y({
313
- slidesPerView: c,
314
- childIndex: k,
315
- centerMode: s,
316
- childrenCount: g || 0,
317
- haveContainerPadding: l > 0
318
- }),
319
- ...a
320
- },
321
- children: i
322
- }
323
- );
324
- };
325
- export {
326
- U as S,
327
- st as a
328
- };
@@ -1 +0,0 @@
1
- "use client";"use strict";const e=require("react/jsx-runtime"),y=require("./clsx-C11secjj.cjs"),n=require("react"),D=require("./ArrowLeft2-B76dkC-C.cjs"),q=require("./ArrowRight2-CYowPzS8.cjs"),T=require("./Button/index.cjs"),A=n.createContext({slidesPerView:1,spaceBetween:0,navigationVariant:"outside",showNavigationDots:!0,showPaginationText:!1,childrenCount:0,sliderId:""}),I=()=>n.useContext(A);function O({active:i,autoplay:s,variant:r="outside"}){return[{inside:"dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",outside:"dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"}[r],i?"dgs-ui-kit-w-[22px]":"dgs-ui-kit-w-[6px]",s?"dgs-ui-kit-p-[1px]":""]}const V=i=>{const{active:s,onClick:r,onNavigateToNext:d}=i,{autoplay:t,navigationVariant:g="outside"}=I(),[x,o]=n.useState(0);return n.useEffect(()=>{if(!s||!t)return;const u=typeof t=="boolean"?7e3:t?.delay??7e3;let f=Date.now();const k=setInterval(()=>{const l=Date.now()-f,v=l/u*100;o(Math.min(v,100)),l>=u&&typeof d=="function"&&(d(),o(0),clearInterval(k))},100);return function(){return o(0),f=Date.now(),clearInterval(k)}},[s,t,d]),e.jsx("button",{className:y.clsx("dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",O({active:s,autoplay:t,variant:g})),onClick:r,children:s&&e.jsx("div",{className:y.clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full",{"dgs-ui-kit-bg-white":g==="inside","dgs-ui-kit-bg-gray-700":g==="outside"}),style:{width:t?`${x}%`:"100%"}})})},F=i=>{const{onNavigate:s,slideIndex:r,slidesCount:d}=i,{navigationButtonsShowType:t="hide",dotsClassName:g,navigationContainerClassName:x,navigationVariant:o="outside",showNavigationDots:u=!0,showPaginationText:f}=I(),k=e.jsxs("div",{className:y.clsx("dgs-ui-kit-flex dgs-ui-kit-gap-2",{"dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]":o==="inside"&&t!=="onSides","dgs-ui-kit-absolute dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]":t==="onSides","dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition":t==="hover"||t==="onSides"}),children:[e.jsx(T,{type:"button",variant:"secondary",onClick:()=>s(r-1),rightIcon:e.jsx(q.ArrowRight2Icon,{})}),e.jsx(T,{type:"button",variant:"secondary",onClick:()=>s(r+1),rightIcon:e.jsx(D.ArrowLeft2Icon,{})})]});return e.jsxs(e.Fragment,{children:[t&&t!=="hide"&&t==="onSides"&&k,e.jsxs("div",{className:y.clsx("dgs-ui-kit-flex",{"dgs-ui-kit-items-center dgs-ui-kit-mt-2":o==="outside","dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center":o==="inside","dgs-ui-kit-justify-between":o==="outside"&&t!=="hide"&&t!=="onSides","dgs-ui-kit-justify-center":o==="outside"&&(t==="hide"||t==="onSides")},x),children:[t&&t!=="hide"&&t!=="onSides"&&k,(u||f)&&e.jsxs("div",{className:"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3",children:[f&&e.jsxs("div",{className:"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02",children:[e.jsx("span",{className:y.clsx("dgs-ui-kit-font-bold",{"dgs-ui-kit-text-gray-600":o==="outside","dgs-ui-kit-text-white":o==="inside"}),children:r+1}),e.jsx("span",{children:"از"}),e.jsx("span",{children:d})]}),u&&e.jsx("div",{className:y.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",g),children:Array.from(Array(d).keys()).map((l,v)=>e.jsx(V,{active:r===v,onClick:()=>s(v),onNavigateToNext:()=>s(r+1)},l+d))})]})]})]})},L=n.forwardRef((i,s)=>{const[r,d]=n.useState(i),{className:t="",containerClassName:g="",showNavigationDots:x=!0,slidesPerView:o=1,navigationButtonsShowType:u="hide",spaceBetween:f=0,showPaginationText:k,onSlideIndexChange:l,initialSlide:v,containerXPadding:h=0}=r,[C,j]=n.useState(0),[P,R]=n.useState(0),W=Object.fromEntries(Object.entries(r).filter(([a])=>a!=="children")),c=n.useRef(null),m=Math.ceil(P/Math.floor(o)),E=(x||u&&u!=="hide"||k)&&m>1;function M(a){if(Math.ceil(Math.abs(a.currentTarget.scrollLeft))+a.currentTarget.clientWidth+1+h>=a.currentTarget.scrollWidth){j(m-1);return}const p=a.currentTarget.scrollWidth-h*2,w=p/m,N=(p-a.currentTarget.scrollLeft-h)/w;if(N<=m){j(0);return}j(Math.round(N%m))}function S(a){if(!c.current)return;const p=c.current.offsetWidth,w=C-a,N=c.current.scrollWidth/m,B=w*N;a<0?c.current.scrollTo({behavior:"smooth",left:-(p*m)}):a>=m?c.current.scrollTo({behavior:"smooth",left:0}):c.current.scrollBy({behavior:"smooth",left:B})}function b(){const p=Object.keys(i.responsive).sort().findLast(N=>Number(N)<=window.innerWidth),w=p?i.responsive[Number(p)]:null;d(w?{...r,...w}:i)}return n.useImperativeHandle(s,()=>({element:c.current,navigate:a=>S(Math.max(0,a-1))})),n.useEffect(()=>{if(!c.current)return;let a=c.current.childElementCount;h>0&&(a-=2),R(a)},[i.children,c,h]),n.useEffect(()=>{if(!(!i.responsive||Object.keys(i.responsive).length<=0))return b(),window.addEventListener("resize",b),()=>{window.removeEventListener("resize",b)}},[i.responsive]),n.useEffect(()=>{l&&typeof l=="function"&&l(C)},[C]),n.useEffect(()=>{typeof v=="number"&&c.current&&S(Math.max(0,v-1))},[v,c.current]),e.jsx(A.Provider,{value:{...W,childrenCount:P,sliderId:n.useId()},children:e.jsxs("div",{className:y.clsx("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",t),style:{direction:"rtl"},children:[e.jsxs("div",{className:y.clsx("dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",g),style:{marginLeft:-f},onScroll:M,ref:c,children:[h>0&&e.jsx("div",{className:"dgs-ui-kit-shrink-0",style:{width:h,paddingLeft:f}}),i.children,h>0&&e.jsx("div",{className:"dgs-ui-kit-shrink-0",style:{width:h,paddingLeft:f}})]}),E&&e.jsx(F,{onNavigate:S,slideIndex:C,slidesCount:m})]})})});L.displayName="Slider";function K({slidesPerView:i,childIndex:s,centerMode:r,childrenCount:d,haveContainerPadding:t}){const g=s%Math.floor(i)===0,x=i%1!==0,o=s===0,u=s===d-1;if(!g)return"none";if(r){if(x&&!t){if(o)return"start";if(u)return"end"}return"center"}return"start"}const $=i=>{const{children:s,className:r,style:d,...t}=i,{slidesPerView:g=1,spaceBetween:x=0,centerMode:o=!1,containerXPadding:u=0,childrenCount:f=0,sliderId:k}=I(),l=n.useRef(null),[v,h]=n.useState(0);return n.useEffect(()=>{l.current&&h(Array.prototype.indexOf.call(document.querySelectorAll(`[id='slide-item-${k}']`),l.current))},[l,f,u]),e.jsx("div",{...t,ref:l,id:`slide-item-${k}`,className:y.clsx("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal",r),style:{width:100/(g??1)+"%",paddingLeft:x,scrollSnapAlign:K({slidesPerView:g,childIndex:v,centerMode:o,childrenCount:f||0,haveContainerPadding:u>0}),...d},children:s})};exports.Slide=$;exports.Slider=L;