@situaction/traq-ui-ste 1.2.18 → 1.2.19

package/dist/components/carousel/Carousel.d.ts

@@ -18,6 +18,7 @@ export interface CarouselProps {
     gap?: number;
     align?: CarouselAlign;
     showArrows?: boolean;
+    btnGradientColor?: string;
     dragEnabled?: boolean;
     snapOnRelease?: boolean;
     keyboardNavigation?: boolean;

package/dist/components/carousel/Carousel.js

@@ -1,37 +1,40 @@
-import { jsxs as ie, jsx as R, Fragment as We } from "react/jsx-runtime";
-import ze, { forwardRef as Ee, useMemo as ue, useRef as l, useState as $, useEffect as j, useCallback as i, useImperativeHandle as Fe } from "react";
-import '../../styles/Carousel.css';const Be = "_root_36mqp_6", $e = "_viewport_36mqp_11", je = "_dragEnabled_36mqp_27", Oe = "_dragging_36mqp_32", Xe = "_slide_36mqp_39", He = "_navButton_36mqp_46", Ve = "_navPrev_36mqp_63", Ke = "_navNext_36mqp_67", d = {
-  root: Be,
-  viewport: $e,
-  dragEnabled: je,
+import { jsxs as ie, jsx as p, Fragment as De } from "react/jsx-runtime";
+import $e, { forwardRef as We, useMemo as ue, useRef as l, useState as F, useEffect as q, useCallback as i, useImperativeHandle as Ee } from "react";
+import '../../styles/Carousel.css';const Fe = "_root_zgsjf_6", qe = "_viewport_zgsjf_11", He = "_dragEnabled_zgsjf_27", Oe = "_dragging_zgsjf_32", Xe = "_slide_zgsjf_39", Ve = "_navButtonCtn_zgsjf_46", Ke = "_navButton_zgsjf_46", Ue = "_defaultBtn_zgsjf_64", Ye = "_navPrev_zgsjf_81", Ge = "_navNext_zgsjf_86", f = {
+  root: Fe,
+  viewport: qe,
+  dragEnabled: He,
   dragging: Oe,
   slide: Xe,
-  navButton: He,
-  navPrev: Ve,
-  navNext: Ke
-}, S = (...M) => M.filter(Boolean).join(" "), Ge = Ee(
+  navButtonCtn: Ve,
+  navButton: Ke,
+  defaultBtn: Ue,
+  navPrev: Ye,
+  navNext: Ge
+}, k = (...P) => P.filter(Boolean).join(" "), Ze = We(
   ({
-    children: M,
+    children: P,
     className: le,
     viewportClassName: fe,
     slideClassName: de,
-    style: pe,
+    style: ve,
     slideSize: me = "30%",
-    gap: ve = 12,
-    align: g = "center",
+    gap: pe = 12,
+    align: h = "center",
     showArrows: ge = !0,
-    dragEnabled: y = !0,
+    dragEnabled: N = !0,
     snapOnRelease: J = !0,
-    keyboardNavigation: we = !0,
-    step: he = 1,
+    keyboardNavigation: he = !0,
+    btnGradientColor: we,
+    step: _e = 1,
     initialIndex: Q = 0,
-    loop: N = !1,
+    loop: R = !1,
     ariaLabel: Z = "Carousel",
     iconLeft: xe,
     iconRight: Ie,
-    onIndexChange: O
-  }, _e) => {
-    const w = ue(() => ze.Children.toArray(M), [M]), s = w.length, c = N && s > 1, A = Math.max(1, Math.min(he, Math.max(1, s))), p = c ? s : 0, h = ue(() => {
+    onIndexChange: H
+  }, Le) => {
+    const w = ue(() => $e.Children.toArray(P), [P]), s = w.length, c = R && s > 1, S = Math.max(1, Math.min(_e, Math.max(1, s))), v = c ? s : 0, _ = ue(() => {
       if (!c)
         return w.map((n, o) => ({
           key: `real-${o}`,
@@ -56,82 +59,82 @@ import '../../styles/Carousel.css';const Be = "_root_36mqp_6", $e = "_viewport_3
         isClone: !0
       }));
       return [...e, ...t, ...r];
-    }, [c, w]), X = h.length, a = l(null), x = l([]), [Le, be] = $(0), k = l(0), [Re, ee] = $(!1), [ye, te] = $(!1), I = l(!1), re = l(0), H = l(0), V = l(!1), K = l(!1), [Ne, ne] = $(!1), T = l(O);
-    j(() => {
-      T.current = O;
-    }, [O]);
+    }, [c, w]), O = _.length, a = l(null), x = l([]), [be, Ce] = F(0), y = l(0), [Ne, ee] = F(!1), [Re, te] = F(!1), I = l(!1), re = l(0), X = l(0), V = l(!1), K = l(!1), [ye, ne] = F(!1), M = l(H);
+    q(() => {
+      M.current = H;
+    }, [H]);
     const m = i((e) => {
       var t;
-      k.current = e, be(e), (t = T.current) == null || t.call(T, e);
+      y.current = e, Ce(e), (t = M.current) == null || t.call(M, e);
     }, []), oe = i((e) => {
       const t = a.current;
       t && (t.style.scrollSnapType = e ? "x mandatory" : "none", t.style.scrollBehavior = e ? "smooth" : "auto");
-    }, []), C = i(
-      (e, t) => g === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
-      [g]
-    ), _ = i(
+    }, []), z = i(
+      (e, t) => h === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
+      [h]
+    ), L = i(
       (e, t = "smooth") => {
         const r = a.current, n = x.current[e];
         if (!r || !n) return;
-        const o = C(r, n);
+        const o = z(r, n);
         r.scrollTo({ left: o, behavior: t });
       },
-      [C]
-    ), q = i(
-      (e) => s === 0 ? 0 : N ? (e % s + s) % s : Math.max(0, Math.min(s - 1, e)),
-      [N, s]
-    ), D = i(
-      (e) => c ? p + e : e,
-      [c, p]
-    ), L = i(
+      [z]
+    ), j = i(
+      (e) => s === 0 ? 0 : R ? (e % s + s) % s : Math.max(0, Math.min(s - 1, e)),
+      [R, s]
+    ), A = i(
+      (e) => c ? v + e : e,
+      [c, v]
+    ), b = i(
       (e, t = "smooth") => {
-        const r = q(e), n = D(r);
-        _(n, t), m(r);
+        const r = j(e), n = A(r);
+        L(n, t), m(r);
       },
-      [q, D, _, m]
-    ), W = i(() => {
+      [j, A, L, m]
+    ), T = i(() => {
       const e = a.current;
-      if (!e || X === 0) return 0;
-      const t = e.scrollLeft, r = g === "center" ? t + e.clientWidth / 2 : t;
+      if (!e || O === 0) return 0;
+      const t = e.scrollLeft, r = h === "center" ? t + e.clientWidth / 2 : t;
       let n = 0, o = Number.POSITIVE_INFINITY;
-      for (let f = 0; f < X; f++) {
-        const u = x.current[f];
+      for (let d = 0; d < O; d++) {
+        const u = x.current[d];
         if (!u) continue;
-        const v = g === "center" ? u.offsetLeft + u.offsetWidth / 2 : u.offsetLeft, B = Math.abs(v - r);
-        B < o && (o = B, n = f);
+        const g = h === "center" ? u.offsetLeft + u.offsetWidth / 2 : u.offsetLeft, E = Math.abs(g - r);
+        E < o && (o = E, n = d);
       }
       return n;
-    }, [g, X]), z = i(
-      (e) => c ? e < p ? e + s : e >= p + s ? e - s : e : e,
-      [c, p, s]
+    }, [h, O]), D = i(
+      (e) => c ? e < v ? e + s : e >= v + s ? e - s : e : e,
+      [c, v, s]
     ), se = l({
       middleStart: 0,
       groupWidth: 0
-    }), b = i(() => {
+    }), C = i(() => {
       if (!c) return;
       const e = a.current;
       if (!e) return;
-      const t = x.current[p], r = x.current[p + s];
+      const t = x.current[v], r = x.current[v + s];
       if (!t || !r) return;
-      const n = C(e, t), o = C(e, r);
+      const n = z(e, t), o = z(e, r);
       se.current = {
         middleStart: n,
         groupWidth: o - n
       };
-    }, [c, p, s, C]), U = l(!1), Y = i(
+    }, [c, v, s, z]), U = l(!1), Y = i(
       (e) => {
         if (!c) return;
         const t = a.current;
         if (!t) return;
         const { middleStart: r, groupWidth: n } = se.current;
         if (n <= 0) return;
-        const o = r, f = r + n;
-        let u = t.scrollLeft, v = 0;
-        u < o ? v = Math.ceil((o - u) / n) * n : u > f && (v = -Math.ceil((u - f) / n) * n), v !== 0 && (U.current = !0, t.scrollLeft = u + v, e === "drag" && (H.current += v), U.current = !1);
+        const o = r, d = r + n;
+        let u = t.scrollLeft, g = 0;
+        u < o ? g = Math.ceil((o - u) / n) * n : u > d && (g = -Math.ceil((u - d) / n) * n), g !== 0 && (U.current = !0, t.scrollLeft = u + g, e === "drag" && (X.current += g), U.current = !1);
       },
       [c]
-    ), P = i(() => {
-      if (N) {
+    ), B = i(() => {
+      if (R) {
         ee(s > 1), te(s > 1);
         return;
       }
@@ -139,73 +142,73 @@ import '../../styles/Carousel.css';const Be = "_root_36mqp_6", $e = "_viewport_3
       if (!e) return;
       const t = e.scrollWidth - e.clientWidth, r = 1;
       ee(t > r && e.scrollLeft > r), te(t > r && e.scrollLeft < t - r);
-    }, [N, s]), E = i(() => {
-      s <= 1 || L(k.current + A);
-    }, [L, s, A]), F = i(() => {
-      s <= 1 || L(k.current - A);
-    }, [L, s, A]), ke = i(() => {
+    }, [R, s]), $ = i(() => {
+      s <= 1 || b(y.current + S);
+    }, [b, s, S]), W = i(() => {
+      s <= 1 || b(y.current - S);
+    }, [b, s, S]), ze = i(() => {
       var n;
       if (!J) return;
-      const e = W(), t = z(e);
-      _(t, "smooth");
-      const r = ((n = h[t]) == null ? void 0 : n.realIndex) ?? 0;
+      const e = T(), t = D(e);
+      L(t, "smooth");
+      const r = ((n = _[t]) == null ? void 0 : n.realIndex) ?? 0;
       m(r);
     }, [
       J,
-      W,
-      z,
+      T,
+      D,
+      L,
       _,
-      h,
       m
     ]);
-    Fe(
-      _e,
+    Ee(
+      Le,
       () => ({
-        next: E,
-        prev: F,
-        goTo: L,
-        getIndex: () => k.current,
+        next: $,
+        prev: W,
+        goTo: b,
+        getIndex: () => y.current,
         getLength: () => s
       }),
-      [L, E, F, s]
-    ), j(() => {
+      [b, $, W, s]
+    ), q(() => {
       if (s === 0) return;
-      const e = q(Q), t = D(e), r = window.requestAnimationFrame(() => {
-        b(), _(t, "auto"), m(e), P();
+      const e = j(Q), t = A(e), r = window.requestAnimationFrame(() => {
+        C(), L(t, "auto"), m(e), B();
       });
       return () => window.cancelAnimationFrame(r);
     }, [
       s,
       Q,
-      q,
-      D,
-      _,
+      j,
+      A,
+      L,
       m,
-      P,
-      b
-    ]), j(() => {
+      B,
+      C
+    ]), q(() => {
       if (!c) return;
       const e = a.current;
       if (!e) return;
       const t = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
-        b();
+        C();
       }) : null;
       t == null || t.observe(e), x.current.forEach((o) => o && (t == null ? void 0 : t.observe(o)));
-      const r = () => b();
+      const r = () => C();
       window.addEventListener("resize", r);
-      const n = window.requestAnimationFrame(() => b());
+      const n = window.requestAnimationFrame(() => C());
       return () => {
         window.removeEventListener("resize", r), window.cancelAnimationFrame(n), t == null || t.disconnect();
       };
-    }, [c, b]), j(() => {
+    }, [c, C]), q(() => {
       const e = a.current;
       if (!e) return;
       const t = { current: 0 }, r = () => {
-        U.current || (c && !I.current && Y("scroll"), P(), !t.current && (t.current = window.requestAnimationFrame(() => {
+        U.current || (c && !I.current && Y("scroll"), B(), !t.current && (t.current = window.requestAnimationFrame(() => {
           var u;
           t.current = 0;
-          const n = W(), o = z(n), f = ((u = h[o]) == null ? void 0 : u.realIndex) ?? 0;
-          f !== k.current && m(f);
+          const n = T(), o = D(n), d = ((u = _[o]) == null ? void 0 : u.realIndex) ?? 0;
+          d !== y.current && m(d);
         })));
       };
       return e.addEventListener("scroll", r, { passive: !0 }), () => {
@@ -214,22 +217,22 @@ import '../../styles/Carousel.css';const Be = "_root_36mqp_6", $e = "_viewport_3
     }, [
       c,
       Y,
-      P,
-      W,
-      z,
-      h,
+      B,
+      T,
+      D,
+      _,
       m
     ]);
-    const Ce = (e) => e instanceof HTMLElement ? !!e.closest(
+    const Be = (e) => e instanceof HTMLElement ? !!e.closest(
       'button, a, input, textarea, select, option, [role="button"], [data-carousel-no-drag="true"]'
-    ) : !1, G = l(null), ce = l(0), Pe = (e) => {
+    ) : !1, G = l(null), ce = l(0), ke = (e) => {
       var t, r, n, o;
-      y && a.current && (Ce(e.target) || e.pointerType === "mouse" && e.button !== 0 || (e.preventDefault(), oe(!1), I.current = !0, V.current = !1, re.current = e.clientX, H.current = a.current.scrollLeft, ne(!0), (r = (t = a.current).focus) == null || r.call(t), (o = (n = a.current).setPointerCapture) == null || o.call(n, e.pointerId)));
-    }, Se = (e) => {
-      if (!y || !I.current || (e.preventDefault(), !a.current)) return;
+      N && a.current && (Be(e.target) || e.pointerType === "mouse" && e.button !== 0 || (e.preventDefault(), oe(!1), I.current = !0, V.current = !1, re.current = e.clientX, X.current = a.current.scrollLeft, ne(!0), (r = (t = a.current).focus) == null || r.call(t), (o = (n = a.current).setPointerCapture) == null || o.call(n, e.pointerId)));
+    }, Pe = (e) => {
+      if (!N || !I.current || (e.preventDefault(), !a.current)) return;
       const r = e.clientX - re.current;
       Math.abs(r) > 4 && (V.current = !0);
-      const n = H.current - r;
+      const n = X.current - r;
       ce.current = n, G.current == null && (G.current = window.requestAnimationFrame(() => {
         G.current = null;
         const o = a.current;
@@ -245,75 +248,76 @@ import '../../styles/Carousel.css';const Be = "_root_36mqp_6", $e = "_viewport_3
         }
       V.current && (K.current = !0, window.setTimeout(() => {
         K.current = !1;
-      }, 0)), oe(!0), ke(), P();
+      }, 0)), oe(!0), ze(), B();
+    }, Se = (e) => {
+      N && I.current && ae(e.pointerId);
     }, Me = (e) => {
-      y && I.current && ae(e.pointerId);
-    }, Ae = (e) => {
-      y && I.current && ae(e.pointerId);
-    }, Te = (e) => {
+      N && I.current && ae(e.pointerId);
+    }, je = (e) => {
       K.current && (e.preventDefault(), e.stopPropagation());
-    }, qe = (e) => {
-      we && (e.key === "ArrowLeft" ? (e.preventDefault(), F()) : e.key === "ArrowRight" && (e.preventDefault(), E()));
-    }, De = {
-      ...pe ?? {},
-      "--carousel-gap": `${ve}px`,
+    }, Ae = (e) => {
+      he && (e.key === "ArrowLeft" ? (e.preventDefault(), W()) : e.key === "ArrowRight" && (e.preventDefault(), $()));
+    }, Te = {
+      ...ve ?? {},
+      "--carousel-gap": `${pe}px`,
       "--carousel-slide-size": me,
-      "--carousel-snap-align": g
+      "--carousel-snap-align": h,
+      "--carousel-button-gradient": we
     };
-    return /* @__PURE__ */ ie("div", { className: S(d.root, le), style: De, "aria-label": Z, children: [
-      ge && s > 1 && /* @__PURE__ */ ie(We, { children: [
-        Re && /* @__PURE__ */ R(
+    return /* @__PURE__ */ ie("div", { className: k(f.root, le), style: Te, "aria-label": Z, children: [
+      ge && s > 1 && /* @__PURE__ */ ie(De, { children: [
+        Ne && /* @__PURE__ */ p("div", { className: `fullHeight ${f.navButtonCtn} ${f.navPrev}`, children: /* @__PURE__ */ p(
           "button",
           {
             type: "button",
-            className: S(d.navButton, d.navPrev),
-            onClick: F,
+            className: k(f.navButton),
+            onClick: W,
             "aria-label": "Précédent",
-            children: xe ?? /* @__PURE__ */ R("span", { "aria-hidden": !0, children: "‹" })
+            children: xe ?? /* @__PURE__ */ p("div", { className: f.defaultBtn, "aria-hidden": !0, children: "‹" })
           }
-        ),
-        ye && /* @__PURE__ */ R(
+        ) }),
+        Re && /* @__PURE__ */ p("div", { className: `fullHeight ${f.navButtonCtn} ${f.navNext}`, children: /* @__PURE__ */ p(
           "button",
           {
             type: "button",
-            className: S(d.navButton, d.navNext),
-            onClick: E,
+            className: k(f.navButton),
+            onClick: $,
             "aria-label": "Suivant",
-            children: Ie ?? /* @__PURE__ */ R("span", { "aria-hidden": !0, children: "›" })
+            children: Ie ?? /* @__PURE__ */ p("div", { className: f.defaultBtn, "aria-hidden": !0, children: "›" })
           }
-        )
+        ) })
       ] }),
-      /* @__PURE__ */ R(
+      /* @__PURE__ */ p(
         "div",
         {
           ref: a,
-          className: S(
-            d.viewport,
-            y && d.dragEnabled,
-            Ne && d.dragging,
+          className: k(
+            f.viewport,
+            N && f.dragEnabled,
+            ye && f.dragging,
             fe
           ),
           tabIndex: 0,
           role: "region",
           "aria-roledescription": "carousel",
           "aria-label": Z,
-          onKeyDown: qe,
-          onPointerDown: Pe,
-          onPointerMove: Se,
-          onPointerUp: Me,
-          onPointerCancel: Ae,
-          onClickCapture: Te,
-          children: h.map((e, t) => /* @__PURE__ */ R(
+          onKeyDown: Ae,
+          onPointerDown: ke,
+          onPointerMove: Pe,
+          onPointerUp: Se,
+          onPointerCancel: Me,
+          onClickCapture: je,
+          children: _.map((e, t) => /* @__PURE__ */ p(
             "div",
             {
               ref: (r) => {
                 x.current[t] = r;
               },
-              className: S(d.slide, de),
+              className: k(f.slide, de),
               "data-carousel-slide": !0,
               "data-carousel-clone": e.isClone ? "true" : "false",
               "aria-label": `Item ${e.realIndex + 1} sur ${s}`,
-              "aria-current": e.realIndex === Le,
+              "aria-current": e.realIndex === be,
               children: e.node
             },
             e.key
@@ -324,5 +328,5 @@ import '../../styles/Carousel.css';const Be = "_root_36mqp_6", $e = "_viewport_3
   }
 );
 export {
-  Ge as Carousel
+  Ze as Carousel
 };

package/dist/styles/Carousel.css

@@ -1 +1 @@
-._root_36mqp_6{position:relative;width:100%}._viewport_36mqp_11{display:flex;gap:var(--carousel-gap, 12px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px;scrollbar-width:none}._viewport_36mqp_11::-webkit-scrollbar{display:none}._dragEnabled_36mqp_27{cursor:grab;touch-action:pan-y}._dragging_36mqp_32{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;-webkit-user-select:none;user-select:none}._slide_36mqp_39{flex:0 0 var(--carousel-slide-size, 280px);width:var(--carousel-slide-size, 280px);scroll-snap-align:var(--carousel-snap-align, start);min-width:0}._navButton_36mqp_46{position:absolute;top:50%;transform:translateY(-50%);z-index:2;padding:.375rem;border:.75px solid var(--button-tertiary-default-border);border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--background-primary);box-shadow:0 2px 8px #00000026;cursor:pointer;-webkit-user-select:none;user-select:none}._navPrev_36mqp_63{left:8px}._navNext_36mqp_67{right:8px}
+._root_zgsjf_6{position:relative;width:100%}._viewport_zgsjf_11{display:flex;gap:var(--carousel-gap, 12px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px;scrollbar-width:none}._viewport_zgsjf_11::-webkit-scrollbar{display:none}._dragEnabled_zgsjf_27{cursor:grab;touch-action:pan-y}._dragging_zgsjf_32{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;-webkit-user-select:none;user-select:none}._slide_zgsjf_39{flex:0 0 var(--carousel-slide-size, 280px);width:var(--carousel-slide-size, 280px);scroll-snap-align:var(--carousel-snap-align, start);min-width:0}._navButtonCtn_zgsjf_46{z-index:2;display:flex;justify-content:center;align-items:center;position:absolute;height:100%;width:54px}._navButton_zgsjf_46{z-index:2;background:none;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}._defaultBtn_zgsjf_64{z-index:2;width:36px;height:36px;color:var(--button-tertiary-default-border);font-size:18px;border:1px solid var(--button-tertiary-default-border);border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--carousel-button-background, var(--background-primary));box-shadow:0 2px 8px #00000026;cursor:pointer;-webkit-user-select:none;user-select:none}._navPrev_zgsjf_81{background:linear-gradient(90deg,var(--carousel-button-gradient) 0%,rgba(255,255,255,0) 100%);left:0}._navNext_zgsjf_86{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--carousel-button-gradient) 100%);right:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",