@situaction/traq-ui-ste 1.2.13 → 1.2.16

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

@@ -0,0 +1,33 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+
+export type CarouselAlign = "start" | "center";
+export interface CarouselRef {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number, behavior?: ScrollBehavior) => void;
+    getIndex: () => number;
+    getLength: () => number;
+}
+export interface CarouselProps {
+    children: ReactNode;
+    className?: string;
+    viewportClassName?: string;
+    slideClassName?: string;
+    style?: CSSProperties;
+    slideSize?: string;
+    gap?: number;
+    align?: CarouselAlign;
+    showArrows?: boolean;
+    dragEnabled?: boolean;
+    snapOnRelease?: boolean;
+    keyboardNavigation?: boolean;
+    step?: number;
+    initialIndex?: number;
+    /** Loop infini (boutons + drag + wheel/trackpad) */
+    loop?: boolean;
+    ariaLabel?: string;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    onIndexChange?: (index: number) => void;
+}
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;

package/dist/components/carousel/Carousel.js

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

package/dist/components/drag-and-drop/DragAndDrop.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+export type DragAndDropErrorCode = "FILE_TOO_LARGE" | "FILE_TYPE_NOT_ALLOWED";
+export type DragAndDropError = {
+    /** Stable code to translate on the consumer side (i18n) */
+    code: DragAndDropErrorCode;
+    /** Optional dynamic values to build a translated message */
+    meta?: {
+        maxSizeLabel?: string;
+        maxBytes?: number | null;
+        receivedBytes?: number;
+        accept?: string;
+        fileName?: string;
+        fileType?: string;
+    };
+};
+export interface DragAndDropProps {
+    /** Maximum allowed file size (display + validation). Example: "10 Mo", "500 Ko", "1 Go". */
+    sizeFile: string;
+    /** Accepted file types (input accept format). Example: "image/*,.pdf" or "application/pdf,.pdf". */
+    typeFile: string;
+    /** Content rendered inside the dropzone (icon, title, hint, etc.). */
+    children: ReactNode;
+    /** Called when a file is successfully selected/dropped and validated. */
+    onFile: (file: File) => void;
+    /** Optional fixed width for the dropzone container (CSS value). Example: "420px", "100%". */
+    width?: string;
+    /** Called when validation fails (size/type). Translate outside using error.code + error.meta. */
+    onError?: (error: DragAndDropError) => void;
+}
+export declare const DragAndDrop: ({ sizeFile, typeFile, children, onFile, onError, width }: DragAndDropProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drag-and-drop/DragAndDrop.js

@@ -0,0 +1,143 @@
+import { jsx as y, jsxs as k } from "react/jsx-runtime";
+import { useId as x, useRef as O, useState as j, useMemo as w, useCallback as r } from "react";
+import '../../styles/DragAndDrop.css';const C = "_dropzone_jj8g2_30", I = "_dropzoneActive_jj8g2_48", E = "_input_jj8g2_53", h = {
+  dropzone: C,
+  dropzoneActive: I,
+  input: E
+}, P = (n) => {
+  const a = n.trim().replace(",", ".").match(/^(\d+(?:\.\d+)?)\s*([a-zA-Z]+)$/);
+  if (!a) return null;
+  const i = Number(a[1]), t = a[2].toLowerCase();
+  if (Number.isNaN(i)) return null;
+  const o = {
+    b: 1,
+    ko: 1024,
+    kb: 1e3,
+    mo: 1024 ** 2,
+    mb: 1e3 ** 2,
+    go: 1024 ** 3,
+    gb: 1e3 ** 3,
+    mib: 1024 ** 2,
+    gib: 1024 ** 3
+  };
+  return o[t] ? Math.round(i * o[t]) : null;
+}, W = (n, u) => {
+  const a = u.split(",").map((o) => o.trim()).filter(Boolean);
+  if (a.length === 0) return !0;
+  const i = n.name.toLowerCase(), t = (n.type || "").toLowerCase();
+  return a.some((o) => {
+    const s = o.toLowerCase();
+    if (s.startsWith(".")) return i.endsWith(s);
+    if (s.endsWith("/*")) {
+      const d = s.slice(0, s.indexOf("/"));
+      return t.startsWith(d + "/");
+    }
+    return t === s;
+  });
+}, S = ({
+  sizeFile: n,
+  typeFile: u,
+  children: a,
+  onFile: i,
+  onError: t,
+  width: o = "auto"
+}) => {
+  const s = x(), d = O(null), [b, g] = j(!1), f = w(() => P(n), [n]), p = u ?? "", v = r(
+    (e) => {
+      t == null || t(e);
+    },
+    [t]
+  ), D = r(() => {
+    var e;
+    (e = d.current) == null || e.click();
+  }, []), m = r(
+    (e) => {
+      if (f != null && e.size > f) {
+        v({
+          code: "FILE_TOO_LARGE",
+          meta: {
+            maxSizeLabel: n,
+            maxBytes: f,
+            receivedBytes: e.size,
+            fileName: e.name,
+            fileType: e.type
+          }
+        });
+        return;
+      }
+      if (p.trim() && !W(e, p)) {
+        v({
+          code: "FILE_TYPE_NOT_ALLOWED",
+          meta: {
+            accept: p,
+            fileName: e.name,
+            fileType: e.type
+          }
+        });
+        return;
+      }
+      i(e);
+    },
+    [v, f, i, p, n]
+  ), _ = r(
+    (e) => {
+      var l;
+      e.preventDefault(), e.stopPropagation(), g(!1);
+      const c = (l = e.dataTransfer.files) == null ? void 0 : l[0];
+      c && m(c);
+    },
+    [m]
+  ), L = r((e) => {
+    e.preventDefault(), e.stopPropagation(), e.dataTransfer.dropEffect = "copy";
+  }, []), T = r((e) => {
+    e.preventDefault(), e.stopPropagation(), g(!0);
+  }, []), z = r((e) => {
+    e.preventDefault(), e.stopPropagation();
+    const c = e.relatedTarget;
+    c && e.currentTarget.contains(c) || g(!1);
+  }, []), A = r(
+    (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+    },
+    [D]
+  ), N = r(
+    (e) => {
+      var l;
+      const c = (l = e.target.files) == null ? void 0 : l[0];
+      c && (m(c), e.target.value = "");
+    },
+    [m]
+  );
+  return /* @__PURE__ */ y("div", { style: { width: o }, children: /* @__PURE__ */ k(
+    "div",
+    {
+      className: `${h.dropzone} ${b ? h.dropzoneActive : ""}`,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Upload file",
+      onClick: D,
+      onKeyDown: A,
+      onDrop: _,
+      onDragOver: L,
+      onDragEnter: T,
+      onDragLeave: z,
+      children: [
+        a,
+        /* @__PURE__ */ y(
+          "input",
+          {
+            id: s,
+            ref: d,
+            className: h.input,
+            type: "file",
+            accept: p,
+            onChange: N
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  S as DragAndDrop
+};