@dgshahr/ui-kit 0.0.34 → 0.0.35
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.
- package/dist/{Slide-Dg7ZXzJ1.js → Slide-DymRQdjm.js} +90 -82
- package/dist/Slide-x4dWg92P.cjs +1 -0
- package/dist/Slider/Slide.d.ts.map +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/context.d.ts +1 -0
- package/dist/Slider/context.d.ts.map +1 -1
- package/dist/Slider/index.cjs +1 -1
- package/dist/Slider/index.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/Slide-ByHcgSRq.cjs +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as r, jsxs as y, Fragment as W } from "react/jsx-runtime";
|
|
3
|
-
import { c as
|
|
4
|
-
import { createContext as F, useContext as K, useState as
|
|
5
|
-
import { A as
|
|
6
|
-
import { A as
|
|
3
|
+
import { c as v } from "./clsx-OuTLNxxd.js";
|
|
4
|
+
import { createContext as F, useContext as K, useState as b, useEffect as C, forwardRef as $, useRef as M, 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
7
|
import L from "./Button/index.js";
|
|
8
8
|
const B = F({
|
|
9
9
|
slidesPerView: 1,
|
|
@@ -11,9 +11,10 @@ const B = F({
|
|
|
11
11
|
navigationVariant: "outside",
|
|
12
12
|
showNavigationDots: !0,
|
|
13
13
|
showPaginationText: !1,
|
|
14
|
-
childrenCount: 0
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
childrenCount: 0,
|
|
15
|
+
sliderId: ""
|
|
16
|
+
}), A = () => K(B);
|
|
17
|
+
function G({
|
|
17
18
|
active: i,
|
|
18
19
|
autoplay: e,
|
|
19
20
|
variant: n = "outside"
|
|
@@ -27,31 +28,31 @@ function q({
|
|
|
27
28
|
e ? "dgs-ui-kit-p-[1px]" : ""
|
|
28
29
|
];
|
|
29
30
|
}
|
|
30
|
-
const
|
|
31
|
-
const { active: e, onClick: n, onNavigateToNext: d } = i, { autoplay: t, navigationVariant: u = "outside" } =
|
|
32
|
-
return
|
|
31
|
+
const J = (i) => {
|
|
32
|
+
const { active: e, onClick: n, onNavigateToNext: d } = i, { autoplay: t, navigationVariant: u = "outside" } = A(), [h, o] = b(0);
|
|
33
|
+
return C(() => {
|
|
33
34
|
if (!e || !t) return;
|
|
34
35
|
const a = typeof t == "boolean" ? 7e3 : t?.delay ?? 7e3;
|
|
35
36
|
let f = Date.now();
|
|
36
|
-
const
|
|
37
|
-
const l = Date.now() - f,
|
|
38
|
-
o(Math.min(
|
|
37
|
+
const k = setInterval(() => {
|
|
38
|
+
const l = Date.now() - f, c = l / a * 100;
|
|
39
|
+
o(Math.min(c, 100)), l >= a && typeof d == "function" && d();
|
|
39
40
|
}, 100);
|
|
40
41
|
return function() {
|
|
41
|
-
return o(0), f = Date.now(), clearInterval(
|
|
42
|
+
return o(0), f = Date.now(), clearInterval(k);
|
|
42
43
|
};
|
|
43
44
|
}, [e, t, d]), /* @__PURE__ */ r(
|
|
44
45
|
"button",
|
|
45
46
|
{
|
|
46
|
-
className:
|
|
47
|
+
className: v(
|
|
47
48
|
"dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
|
|
48
|
-
|
|
49
|
+
G({ active: e, autoplay: t, variant: u })
|
|
49
50
|
),
|
|
50
51
|
onClick: n,
|
|
51
52
|
children: e && /* @__PURE__ */ r(
|
|
52
53
|
"div",
|
|
53
54
|
{
|
|
54
|
-
className:
|
|
55
|
+
className: v("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
|
|
55
56
|
"dgs-ui-kit-bg-white": u === "inside",
|
|
56
57
|
"dgs-ui-kit-bg-gray-700": u === "outside"
|
|
57
58
|
}),
|
|
@@ -60,7 +61,7 @@ const G = (i) => {
|
|
|
60
61
|
)
|
|
61
62
|
}
|
|
62
63
|
);
|
|
63
|
-
},
|
|
64
|
+
}, Q = (i) => {
|
|
64
65
|
const { onNavigate: e, slideIndex: n, slidesCount: d } = i, {
|
|
65
66
|
navigationButtonsShowType: t = "hide",
|
|
66
67
|
dotsClassName: u,
|
|
@@ -68,10 +69,10 @@ const G = (i) => {
|
|
|
68
69
|
navigationVariant: o = "outside",
|
|
69
70
|
showNavigationDots: a = !0,
|
|
70
71
|
showPaginationText: f
|
|
71
|
-
} =
|
|
72
|
+
} = A(), k = /* @__PURE__ */ y(
|
|
72
73
|
"div",
|
|
73
74
|
{
|
|
74
|
-
className:
|
|
75
|
+
className: v("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
|
|
75
76
|
"dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": o === "inside" && t !== "onSides",
|
|
76
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",
|
|
77
78
|
"dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": t === "hover" || t === "onSides"
|
|
@@ -83,7 +84,7 @@ const G = (i) => {
|
|
|
83
84
|
type: "button",
|
|
84
85
|
variant: "secondary",
|
|
85
86
|
onClick: () => e(n - 1),
|
|
86
|
-
rightIcon: /* @__PURE__ */ r(
|
|
87
|
+
rightIcon: /* @__PURE__ */ r(H, {})
|
|
87
88
|
}
|
|
88
89
|
),
|
|
89
90
|
/* @__PURE__ */ r(
|
|
@@ -92,18 +93,18 @@ const G = (i) => {
|
|
|
92
93
|
type: "button",
|
|
93
94
|
variant: "secondary",
|
|
94
95
|
onClick: () => e(n + 1),
|
|
95
|
-
rightIcon: /* @__PURE__ */ r(
|
|
96
|
+
rightIcon: /* @__PURE__ */ r(q, {})
|
|
96
97
|
}
|
|
97
98
|
)
|
|
98
99
|
]
|
|
99
100
|
}
|
|
100
101
|
);
|
|
101
102
|
return /* @__PURE__ */ y(W, { children: [
|
|
102
|
-
t && t !== "hide" && t === "onSides" &&
|
|
103
|
+
t && t !== "hide" && t === "onSides" && k,
|
|
103
104
|
/* @__PURE__ */ y(
|
|
104
105
|
"div",
|
|
105
106
|
{
|
|
106
|
-
className:
|
|
107
|
+
className: v(
|
|
107
108
|
"dgs-ui-kit-flex",
|
|
108
109
|
{
|
|
109
110
|
"dgs-ui-kit-items-center dgs-ui-kit-mt-2": o === "outside",
|
|
@@ -114,13 +115,13 @@ const G = (i) => {
|
|
|
114
115
|
h
|
|
115
116
|
),
|
|
116
117
|
children: [
|
|
117
|
-
t && t !== "hide" && t !== "onSides" &&
|
|
118
|
+
t && t !== "hide" && t !== "onSides" && k,
|
|
118
119
|
(a || f) && /* @__PURE__ */ y("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
|
|
119
120
|
f && /* @__PURE__ */ y("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: [
|
|
120
121
|
/* @__PURE__ */ r(
|
|
121
122
|
"span",
|
|
122
123
|
{
|
|
123
|
-
className:
|
|
124
|
+
className: v("dgs-ui-kit-font-bold", {
|
|
124
125
|
"dgs-ui-kit-text-gray-600": o === "outside",
|
|
125
126
|
"dgs-ui-kit-text-white": o === "inside"
|
|
126
127
|
}),
|
|
@@ -133,15 +134,15 @@ const G = (i) => {
|
|
|
133
134
|
a && /* @__PURE__ */ r(
|
|
134
135
|
"div",
|
|
135
136
|
{
|
|
136
|
-
className:
|
|
137
|
+
className: v(
|
|
137
138
|
"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",
|
|
138
139
|
u
|
|
139
140
|
),
|
|
140
|
-
children: Array.from(Array(d).keys()).map((l,
|
|
141
|
-
|
|
141
|
+
children: Array.from(Array(d).keys()).map((l, c) => /* @__PURE__ */ r(
|
|
142
|
+
J,
|
|
142
143
|
{
|
|
143
|
-
active: n ===
|
|
144
|
-
onClick: () => e(
|
|
144
|
+
active: n === c,
|
|
145
|
+
onClick: () => e(c),
|
|
145
146
|
onNavigateToNext: () => e(n + 1)
|
|
146
147
|
},
|
|
147
148
|
l + d
|
|
@@ -153,64 +154,64 @@ const G = (i) => {
|
|
|
153
154
|
}
|
|
154
155
|
)
|
|
155
156
|
] });
|
|
156
|
-
},
|
|
157
|
-
const [n, d] =
|
|
157
|
+
}, U = $((i, e) => {
|
|
158
|
+
const [n, d] = b(i), {
|
|
158
159
|
className: t = "",
|
|
159
160
|
containerClassName: u = "",
|
|
160
161
|
showNavigationDots: h = !0,
|
|
161
162
|
slidesPerView: o = 1,
|
|
162
163
|
navigationButtonsShowType: a = "hide",
|
|
163
164
|
spaceBetween: f = 0,
|
|
164
|
-
showPaginationText:
|
|
165
|
+
showPaginationText: k,
|
|
165
166
|
onSlideIndexChange: l,
|
|
166
|
-
initialSlide:
|
|
167
|
-
containerXPadding:
|
|
168
|
-
} = n, [S, P] =
|
|
167
|
+
initialSlide: c,
|
|
168
|
+
containerXPadding: w = 0
|
|
169
|
+
} = n, [S, P] = b(0), [j, D] = b(0), R = Object.fromEntries(
|
|
169
170
|
Object.entries(n).filter(([s]) => s !== "children")
|
|
170
|
-
), g = M(null),
|
|
171
|
+
), g = M(null), m = Math.ceil(j / Math.floor(o)), E = (h || a && a !== "hide" || k) && m > 1;
|
|
171
172
|
function O(s) {
|
|
172
|
-
if (Math.ceil(Math.abs(s.currentTarget.scrollLeft)) + s.currentTarget.clientWidth + 1 +
|
|
173
|
-
P(
|
|
173
|
+
if (Math.ceil(Math.abs(s.currentTarget.scrollLeft)) + s.currentTarget.clientWidth + 1 + w >= s.currentTarget.scrollWidth) {
|
|
174
|
+
P(m - 1);
|
|
174
175
|
return;
|
|
175
176
|
}
|
|
176
|
-
const p = s.currentTarget.scrollWidth -
|
|
177
|
-
if (
|
|
177
|
+
const p = s.currentTarget.scrollWidth - w * 2, N = p / m, x = (p - s.currentTarget.scrollLeft - w) / N;
|
|
178
|
+
if (x <= m) {
|
|
178
179
|
P(0);
|
|
179
180
|
return;
|
|
180
181
|
}
|
|
181
|
-
P(Math.round(
|
|
182
|
+
P(Math.round(x % m));
|
|
182
183
|
}
|
|
183
|
-
function
|
|
184
|
+
function I(s) {
|
|
184
185
|
if (!g.current) return;
|
|
185
|
-
const p = g.current.offsetWidth,
|
|
186
|
-
s < 0 ? g.current.scrollTo({ behavior: "smooth", left: -(p *
|
|
186
|
+
const p = g.current.offsetWidth, N = S - s, x = g.current.scrollWidth / m, V = N * x;
|
|
187
|
+
s < 0 ? g.current.scrollTo({ behavior: "smooth", left: -(p * m) }) : s >= m ? g.current.scrollTo({ behavior: "smooth", left: 0 }) : g.current.scrollBy({ behavior: "smooth", left: V });
|
|
187
188
|
}
|
|
188
|
-
function
|
|
189
|
+
function T() {
|
|
189
190
|
const p = Object.keys(i.responsive).sort().findLast(
|
|
190
|
-
(
|
|
191
|
-
),
|
|
192
|
-
d(
|
|
191
|
+
(x) => Number(x) <= window.innerWidth
|
|
192
|
+
), N = p ? i.responsive[Number(p)] : null;
|
|
193
|
+
d(N ? { ...n, ...N } : i);
|
|
193
194
|
}
|
|
194
|
-
return
|
|
195
|
+
return z(e, () => ({
|
|
195
196
|
element: g.current,
|
|
196
|
-
navigate: (s) =>
|
|
197
|
-
})),
|
|
197
|
+
navigate: (s) => I(Math.max(0, s - 1))
|
|
198
|
+
})), C(() => {
|
|
198
199
|
if (!g.current) return;
|
|
199
200
|
let s = g.current.childElementCount;
|
|
200
|
-
|
|
201
|
-
}, [i.children]),
|
|
201
|
+
w > 0 && (s -= 2), D(s);
|
|
202
|
+
}, [i.children]), C(() => {
|
|
202
203
|
if (!(!i.responsive || Object.keys(i.responsive).length <= 0))
|
|
203
|
-
return
|
|
204
|
-
window.removeEventListener("resize",
|
|
204
|
+
return T(), window.addEventListener("resize", T), () => {
|
|
205
|
+
window.removeEventListener("resize", T);
|
|
205
206
|
};
|
|
206
|
-
}, [i.responsive]),
|
|
207
|
+
}, [i.responsive]), C(() => {
|
|
207
208
|
l && typeof l == "function" && l(S);
|
|
208
|
-
}, [S]),
|
|
209
|
-
typeof
|
|
210
|
-
}, [
|
|
209
|
+
}, [S]), C(() => {
|
|
210
|
+
typeof c == "number" && g.current && I(Math.max(0, c - 1));
|
|
211
|
+
}, [c, g.current]), /* @__PURE__ */ r(B.Provider, { value: { ...R, childrenCount: j, sliderId: X() }, children: /* @__PURE__ */ y(
|
|
211
212
|
"div",
|
|
212
213
|
{
|
|
213
|
-
className:
|
|
214
|
+
className: v(
|
|
214
215
|
"dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",
|
|
215
216
|
t
|
|
216
217
|
),
|
|
@@ -219,7 +220,7 @@ const G = (i) => {
|
|
|
219
220
|
/* @__PURE__ */ r(
|
|
220
221
|
"div",
|
|
221
222
|
{
|
|
222
|
-
className:
|
|
223
|
+
className: v(
|
|
223
224
|
"dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",
|
|
224
225
|
u
|
|
225
226
|
),
|
|
@@ -230,19 +231,19 @@ const G = (i) => {
|
|
|
230
231
|
}
|
|
231
232
|
),
|
|
232
233
|
E && /* @__PURE__ */ r(
|
|
233
|
-
|
|
234
|
+
Q,
|
|
234
235
|
{
|
|
235
|
-
onNavigate:
|
|
236
|
+
onNavigate: I,
|
|
236
237
|
slideIndex: S,
|
|
237
|
-
slidesCount:
|
|
238
|
+
slidesCount: m
|
|
238
239
|
}
|
|
239
240
|
)
|
|
240
241
|
]
|
|
241
242
|
}
|
|
242
243
|
) });
|
|
243
244
|
});
|
|
244
|
-
|
|
245
|
-
function
|
|
245
|
+
U.displayName = "Slider";
|
|
246
|
+
function Y({
|
|
246
247
|
slidesPerView: i,
|
|
247
248
|
childIndex: e,
|
|
248
249
|
centerMode: n,
|
|
@@ -260,18 +261,24 @@ function U({
|
|
|
260
261
|
}
|
|
261
262
|
return "start";
|
|
262
263
|
}
|
|
263
|
-
const
|
|
264
|
+
const st = (i) => {
|
|
264
265
|
const { children: e, className: n, style: d, ...t } = i, {
|
|
265
266
|
slidesPerView: u = 1,
|
|
266
267
|
spaceBetween: h = 0,
|
|
267
268
|
centerMode: o = !1,
|
|
268
269
|
containerXPadding: a = 0,
|
|
269
|
-
childrenCount: f = 0
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
270
|
+
childrenCount: f = 0,
|
|
271
|
+
sliderId: k
|
|
272
|
+
} = A(), l = M(null), [c, w] = b(0);
|
|
273
|
+
return C(() => {
|
|
274
|
+
l.current && w(
|
|
275
|
+
Array.prototype.indexOf.call(
|
|
276
|
+
document.querySelectorAll(`[id='slide-item-${k}']`),
|
|
277
|
+
l.current
|
|
278
|
+
)
|
|
279
|
+
);
|
|
280
|
+
}, [l]), /* @__PURE__ */ y(W, { children: [
|
|
281
|
+
c === 0 && a > 0 && /* @__PURE__ */ r(
|
|
275
282
|
"div",
|
|
276
283
|
{
|
|
277
284
|
className: "dgs-ui-kit-shrink-0",
|
|
@@ -285,14 +292,15 @@ const nt = (i) => {
|
|
|
285
292
|
"div",
|
|
286
293
|
{
|
|
287
294
|
...t,
|
|
288
|
-
ref:
|
|
289
|
-
|
|
295
|
+
ref: l,
|
|
296
|
+
id: `slide-item-${k}`,
|
|
297
|
+
className: v("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal", n),
|
|
290
298
|
style: {
|
|
291
299
|
width: 100 / (u ?? 1) + "%",
|
|
292
300
|
paddingLeft: h,
|
|
293
|
-
scrollSnapAlign:
|
|
301
|
+
scrollSnapAlign: Y({
|
|
294
302
|
slidesPerView: u,
|
|
295
|
-
childIndex:
|
|
303
|
+
childIndex: c,
|
|
296
304
|
centerMode: o,
|
|
297
305
|
childrenCount: f || 0,
|
|
298
306
|
haveContainerPadding: a > 0
|
|
@@ -302,7 +310,7 @@ const nt = (i) => {
|
|
|
302
310
|
children: e
|
|
303
311
|
}
|
|
304
312
|
),
|
|
305
|
-
|
|
313
|
+
c === f - 1 && a > 0 && /* @__PURE__ */ r(
|
|
306
314
|
"div",
|
|
307
315
|
{
|
|
308
316
|
className: "dgs-ui-kit-shrink-0 ",
|
|
@@ -315,6 +323,6 @@ const nt = (i) => {
|
|
|
315
323
|
] });
|
|
316
324
|
};
|
|
317
325
|
export {
|
|
318
|
-
|
|
319
|
-
|
|
326
|
+
U as S,
|
|
327
|
+
st as a
|
|
320
328
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";const e=require("react/jsx-runtime"),m=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:""}),P=()=>n.useContext(A);function F({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 O=i=>{const{active:s,onClick:r,onNavigateToNext:u}=i,{autoplay:t,navigationVariant:c="outside"}=P(),[h,a]=n.useState(0);return n.useEffect(()=>{if(!s||!t)return;const d=typeof t=="boolean"?7e3:t?.delay??7e3;let k=Date.now();const v=setInterval(()=>{const l=Date.now()-k,g=l/d*100;a(Math.min(g,100)),l>=d&&typeof u=="function"&&u()},100);return function(){return a(0),k=Date.now(),clearInterval(v)}},[s,t,u]),e.jsx("button",{className:m.clsx("dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",F({active:s,autoplay:t,variant:c})),onClick:r,children:s&&e.jsx("div",{className:m.clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full",{"dgs-ui-kit-bg-white":c==="inside","dgs-ui-kit-bg-gray-700":c==="outside"}),style:{width:t?`${h}%`:"100%"}})})},V=i=>{const{onNavigate:s,slideIndex:r,slidesCount:u}=i,{navigationButtonsShowType:t="hide",dotsClassName:c,navigationContainerClassName:h,navigationVariant:a="outside",showNavigationDots:d=!0,showPaginationText:k}=P(),v=e.jsxs("div",{className:m.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%]":a==="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"&&v,e.jsxs("div",{className:m.clsx("dgs-ui-kit-flex",{"dgs-ui-kit-items-center dgs-ui-kit-mt-2":a==="outside","dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center":a==="inside","dgs-ui-kit-justify-between":a==="outside"&&t!=="hide"&&t!=="onSides","dgs-ui-kit-justify-center":a==="outside"&&(t==="hide"||t==="onSides")},h),children:[t&&t!=="hide"&&t!=="onSides"&&v,(d||k)&&e.jsxs("div",{className:"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3",children:[k&&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:m.clsx("dgs-ui-kit-font-bold",{"dgs-ui-kit-text-gray-600":a==="outside","dgs-ui-kit-text-white":a==="inside"}),children:r+1}),e.jsx("span",{children:"از"}),e.jsx("span",{children:u})]}),d&&e.jsx("div",{className:m.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",c),children:Array.from(Array(u).keys()).map((l,g)=>e.jsx(O,{active:r===g,onClick:()=>s(g),onNavigateToNext:()=>s(r+1)},l+u))})]})]})]})},L=n.forwardRef((i,s)=>{const[r,u]=n.useState(i),{className:t="",containerClassName:c="",showNavigationDots:h=!0,slidesPerView:a=1,navigationButtonsShowType:d="hide",spaceBetween:k=0,showPaginationText:v,onSlideIndexChange:l,initialSlide:g,containerXPadding:p=0}=r,[C,j]=n.useState(0),[I,R]=n.useState(0),W=Object.fromEntries(Object.entries(r).filter(([o])=>o!=="children")),f=n.useRef(null),x=Math.ceil(I/Math.floor(a)),E=(h||d&&d!=="hide"||v)&&x>1;function M(o){if(Math.ceil(Math.abs(o.currentTarget.scrollLeft))+o.currentTarget.clientWidth+1+p>=o.currentTarget.scrollWidth){j(x-1);return}const y=o.currentTarget.scrollWidth-p*2,w=y/x,N=(y-o.currentTarget.scrollLeft-p)/w;if(N<=x){j(0);return}j(Math.round(N%x))}function S(o){if(!f.current)return;const y=f.current.offsetWidth,w=C-o,N=f.current.scrollWidth/x,B=w*N;o<0?f.current.scrollTo({behavior:"smooth",left:-(y*x)}):o>=x?f.current.scrollTo({behavior:"smooth",left:0}):f.current.scrollBy({behavior:"smooth",left:B})}function b(){const y=Object.keys(i.responsive).sort().findLast(N=>Number(N)<=window.innerWidth),w=y?i.responsive[Number(y)]:null;u(w?{...r,...w}:i)}return n.useImperativeHandle(s,()=>({element:f.current,navigate:o=>S(Math.max(0,o-1))})),n.useEffect(()=>{if(!f.current)return;let o=f.current.childElementCount;p>0&&(o-=2),R(o)},[i.children]),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 g=="number"&&f.current&&S(Math.max(0,g-1))},[g,f.current]),e.jsx(A.Provider,{value:{...W,childrenCount:I,sliderId:n.useId()},children:e.jsxs("div",{className:m.clsx("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",t),style:{direction:"rtl"},children:[e.jsx("div",{className:m.clsx("dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",c),style:{marginLeft:-k},onScroll:M,ref:f,children:i.children}),E&&e.jsx(V,{onNavigate:S,slideIndex:C,slidesCount:x})]})})});L.displayName="Slider";function K({slidesPerView:i,childIndex:s,centerMode:r,childrenCount:u,haveContainerPadding:t}){const c=s%Math.floor(i)===0,h=i%1!==0,a=s===0,d=s===u-1;if(!c)return"none";if(r){if(h&&!t){if(a)return"start";if(d)return"end"}return"center"}return"start"}const $=i=>{const{children:s,className:r,style:u,...t}=i,{slidesPerView:c=1,spaceBetween:h=0,centerMode:a=!1,containerXPadding:d=0,childrenCount:k=0,sliderId:v}=P(),l=n.useRef(null),[g,p]=n.useState(0);return n.useEffect(()=>{l.current&&p(Array.prototype.indexOf.call(document.querySelectorAll(`[id='slide-item-${v}']`),l.current))},[l]),e.jsxs(e.Fragment,{children:[g===0&&d>0&&e.jsx("div",{className:"dgs-ui-kit-shrink-0",style:{width:d,paddingLeft:h}}),e.jsx("div",{...t,ref:l,id:`slide-item-${v}`,className:m.clsx("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal",r),style:{width:100/(c??1)+"%",paddingLeft:h,scrollSnapAlign:K({slidesPerView:c,childIndex:g,centerMode:a,childrenCount:k||0,haveContainerPadding:d>0}),...u},children:s}),g===k-1&&d>0&&e.jsx("div",{className:"dgs-ui-kit-shrink-0 ",style:{width:d,paddingLeft:h}})]})};exports.Slide=$;exports.Slider=L;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slide.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAgCf,QAAA,MAAM,KAAK,EAAE,EAAE,CACb,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slide.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAgCf,QAAA,MAAM,KAAK,EAAE,EAAE,CACb,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAkErF,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EACL,OAAO,GACP;QACE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACvB,CAAC;IACN,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACzC,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,MAAM;;6CA8IV,CAAC;AAIH,eAAe,MAAM,CAAC"}
|
package/dist/Slider/context.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { SliderProps } from './Slider';
|
|
2
2
|
interface ContextType extends SliderProps {
|
|
3
3
|
childrenCount: number;
|
|
4
|
+
sliderId: string;
|
|
4
5
|
}
|
|
5
6
|
export declare const sliderContext: import('react').Context<ContextType>;
|
|
6
7
|
export declare const useSliderContext: () => ContextType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/components/Slider/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,UAAU,WAAY,SAAQ,WAAW;IACvC,aAAa,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/components/Slider/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,UAAU,WAAY,SAAQ,WAAW;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,sCAQxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,mBAAkC,CAAC"}
|
package/dist/Slider/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/styles.css');;/* empty css */const e=require("../Slide-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/styles.css');;/* empty css */const e=require("../Slide-x4dWg92P.cjs");exports.Slide=e.Slide;exports.Slider=e.Slider;
|
package/dist/Slider/index.js
CHANGED
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-
|
|
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-x4dWg92P.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-
|
|
16
|
+
import { a as R, S as j } from "./Slide-DymRQdjm.js";
|
|
17
17
|
import { default as y } from "./Tabs/index.js";
|
|
18
18
|
export {
|
|
19
19
|
e as AccordionGroup,
|
package/package.json
CHANGED
package/dist/Slide-ByHcgSRq.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use client";"use strict";const e=require("react/jsx-runtime"),m=require("./clsx-C11secjj.cjs"),o=require("react"),D=require("./ArrowLeft2-B76dkC-C.cjs"),q=require("./ArrowRight2-CYowPzS8.cjs"),I=require("./Button/index.cjs"),L=o.createContext({slidesPerView:1,spaceBetween:0,navigationVariant:"outside",showNavigationDots:!0,showPaginationText:!1,childrenCount:0}),P=()=>o.useContext(L);function F({active:i,autoplay:s,variant:n="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"}[n],i?"dgs-ui-kit-w-[22px]":"dgs-ui-kit-w-[6px]",s?"dgs-ui-kit-p-[1px]":""]}const O=i=>{const{active:s,onClick:n,onNavigateToNext:u}=i,{autoplay:t,navigationVariant:c="outside"}=P(),[h,a]=o.useState(0);return o.useEffect(()=>{if(!s||!t)return;const d=typeof t=="boolean"?7e3:t?.delay??7e3;let k=Date.now();const g=setInterval(()=>{const l=Date.now()-k,v=l/d*100;a(Math.min(v,100)),l>=d&&typeof u=="function"&&u()},100);return function(){return a(0),k=Date.now(),clearInterval(g)}},[s,t,u]),e.jsx("button",{className:m.clsx("dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",F({active:s,autoplay:t,variant:c})),onClick:n,children:s&&e.jsx("div",{className:m.clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full",{"dgs-ui-kit-bg-white":c==="inside","dgs-ui-kit-bg-gray-700":c==="outside"}),style:{width:t?`${h}%`:"100%"}})})},V=i=>{const{onNavigate:s,slideIndex:n,slidesCount:u}=i,{navigationButtonsShowType:t="hide",dotsClassName:c,navigationContainerClassName:h,navigationVariant:a="outside",showNavigationDots:d=!0,showPaginationText:k}=P(),g=e.jsxs("div",{className:m.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%]":a==="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(I,{type:"button",variant:"secondary",onClick:()=>s(n-1),rightIcon:e.jsx(q.ArrowRight2Icon,{})}),e.jsx(I,{type:"button",variant:"secondary",onClick:()=>s(n+1),rightIcon:e.jsx(D.ArrowLeft2Icon,{})})]});return e.jsxs(e.Fragment,{children:[t&&t!=="hide"&&t==="onSides"&&g,e.jsxs("div",{className:m.clsx("dgs-ui-kit-flex",{"dgs-ui-kit-items-center dgs-ui-kit-mt-2":a==="outside","dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center":a==="inside","dgs-ui-kit-justify-between":a==="outside"&&t!=="hide"&&t!=="onSides","dgs-ui-kit-justify-center":a==="outside"&&(t==="hide"||t==="onSides")},h),children:[t&&t!=="hide"&&t!=="onSides"&&g,(d||k)&&e.jsxs("div",{className:"dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3",children:[k&&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:m.clsx("dgs-ui-kit-font-bold",{"dgs-ui-kit-text-gray-600":a==="outside","dgs-ui-kit-text-white":a==="inside"}),children:n+1}),e.jsx("span",{children:"از"}),e.jsx("span",{children:u})]}),d&&e.jsx("div",{className:m.clsx("dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-gap-2",c),children:Array.from(Array(u).keys()).map((l,v)=>e.jsx(O,{active:n===v,onClick:()=>s(v),onNavigateToNext:()=>s(n+1)},l+u))})]})]})]})},R=o.forwardRef((i,s)=>{const[n,u]=o.useState(i),{className:t="",containerClassName:c="",showNavigationDots:h=!0,slidesPerView:a=1,navigationButtonsShowType:d="hide",spaceBetween:k=0,showPaginationText:g,onSlideIndexChange:l,initialSlide:v,containerXPadding:N=0}=n,[C,j]=o.useState(0),[T,A]=o.useState(0),W=Object.fromEntries(Object.entries(n).filter(([r])=>r!=="children")),f=o.useRef(null),x=Math.ceil(T/Math.floor(a)),E=(h||d&&d!=="hide"||g)&&x>1;function M(r){if(Math.ceil(Math.abs(r.currentTarget.scrollLeft))+r.currentTarget.clientWidth+1+N>=r.currentTarget.scrollWidth){j(x-1);return}const p=r.currentTarget.scrollWidth-N*2,y=p/x,w=(p-r.currentTarget.scrollLeft-N)/y;if(w<=x){j(0);return}j(Math.round(w%x))}function S(r){if(!f.current)return;const p=f.current.offsetWidth,y=C-r,w=f.current.scrollWidth/x,B=y*w;r<0?f.current.scrollTo({behavior:"smooth",left:-(p*x)}):r>=x?f.current.scrollTo({behavior:"smooth",left:0}):f.current.scrollBy({behavior:"smooth",left:B})}function b(){const p=Object.keys(i.responsive).sort().findLast(w=>Number(w)<=window.innerWidth),y=p?i.responsive[Number(p)]:null;u(y?{...n,...y}:i)}return o.useImperativeHandle(s,()=>({element:f.current,navigate:r=>S(Math.max(0,r-1))})),o.useEffect(()=>{if(!f.current)return;let r=f.current.childElementCount;N>0&&(r-=2),A(r)},[i.children]),o.useEffect(()=>{if(!(!i.responsive||Object.keys(i.responsive).length<=0))return b(),window.addEventListener("resize",b),()=>{window.removeEventListener("resize",b)}},[i.responsive]),o.useEffect(()=>{l&&typeof l=="function"&&l(C)},[C]),o.useEffect(()=>{typeof v=="number"&&f.current&&S(Math.max(0,v-1))},[v,f.current]),e.jsx(L.Provider,{value:{...W,childrenCount:T},children:e.jsxs("div",{className:m.clsx("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group",t),style:{direction:"rtl"},children:[e.jsx("div",{className:m.clsx("dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-overflow-x-auto no-scrollbar",c),style:{marginLeft:-k},onScroll:M,ref:f,children:i.children}),E&&e.jsx(V,{onNavigate:S,slideIndex:C,slidesCount:x})]})})});R.displayName="Slider";function K({slidesPerView:i,childIndex:s,centerMode:n,childrenCount:u,haveContainerPadding:t}){const c=s%Math.floor(i)===0,h=i%1!==0,a=s===0,d=s===u-1;if(!c)return"none";if(n){if(h&&!t){if(a)return"start";if(d)return"end"}return"center"}return"start"}const z=i=>{const{children:s,className:n,style:u,...t}=i,{slidesPerView:c=1,spaceBetween:h=0,centerMode:a=!1,containerXPadding:d=0,childrenCount:k=0}=P(),g=o.useRef(null),[l,v]=o.useState(0);return o.useEffect(()=>{g.current&&v(Array.prototype.indexOf.call(g.current.parentNode?.children,g.current))},[g]),e.jsxs(e.Fragment,{children:[l===0&&d>0&&e.jsx("div",{className:"dgs-ui-kit-shrink-0",style:{width:d,paddingLeft:h}}),e.jsx("div",{...t,ref:g,className:m.clsx("dgs-ui-kit-shrink-0 dgs-ui-kit-snap-normal",n),style:{width:100/(c??1)+"%",paddingLeft:h,scrollSnapAlign:K({slidesPerView:c,childIndex:l,centerMode:a,childrenCount:k||0,haveContainerPadding:d>0}),...u},children:s}),l===k-1&&d>0&&e.jsx("div",{className:"dgs-ui-kit-shrink-0 ",style:{width:d,paddingLeft:h}})]})};exports.Slide=z;exports.Slider=R;
|