trepur_components 2.3.8 → 2.3.10

package/lib/components/Carousel/index.d.ts

@@ -1,36 +1,22 @@
 import { KeenSliderInstance, KeenSliderHooks, KeenSliderOptions } from 'keen-slider/react';
-import { Colours } from '../../utils/controls';
-import { default as React } from 'react';
+import { HTMLAttributes } from 'react';
 
-interface ArrowProps {
+export interface ArrowProps {
+    rightArrow?: boolean;
     visible?: boolean;
-    left?: boolean;
-    right?: boolean;
     disabled?: boolean;
     onClick?: any;
-    colour?: Colours;
-    bgColour?: Colours;
-    hoverColour?: Colours;
-    hoverBgColour?: Colours;
 }
-interface DotProps {
-    id?: string;
+export interface DotProps {
     isActive?: boolean;
     visible?: boolean;
     onClick?: any;
-    colour?: Colours;
-    bgColour?: Colours;
-    hoverColour?: Colours;
-    hoverBgColour?: Colours;
-    wrapperBgColour: Colours;
 }
-export interface Props {
-    id?: string;
-    className?: string;
+export interface CarouselContextProps {
+    sliderRef?: any;
+    instanceRef?: any;
+    currentSlide?: number;
     slideWrapperClassName?: string;
-    title?: string;
-    description?: string;
-    bgColour?: Colours;
     breakpoints?: Record<string, Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>>;
     defaultAnimation?: {
         duration?: number;
@@ -73,5 +59,12 @@ export interface Props {
     arrows?: ArrowProps;
     dots?: DotProps;
 }
-export declare const Carousel: React.FC<Props>;
-export {};
+declare const Carousel: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CarouselContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Arrow: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ArrowProps & import('react').RefAttributes<HTMLDivElement>>;
+    Dots: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & DotProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Slides: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        rightArrow?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Carousel };

package/lib/components/Carousel/index.js

@@ -1,248 +1,159 @@
-import { jsxs as K, jsx as c } from "react/jsx-runtime";
-import { useState as W } from "react";
-import { ComponentWrapper as ke } from "../ComponentWrapper/index.js";
-import { Icon as z } from "../Icon/index.js";
-import { faChevronLeft as ye, faChevronRight as ge, faCircle as be } from "@fortawesome/fontawesome-free-solid";
-import k from "classnames";
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as L, forwardRef as p, useState as j, useMemo as O, useContext as b } from "react";
+import { Icon as D } from "../Icon/index.js";
+import { faChevronRight as T, faChevronLeft as $, faCircle as M } from "@fortawesome/fontawesome-free-solid";
+import v from "clsx";
 import "../../node_modules/keen-slider/keen-slider.min.css.js";
-import { useKeenSlider as xe } from "../../node_modules/keen-slider/react.js";
-const Be = ({
-  id: e,
-  className: B,
-  slideWrapperClassName: I,
-  title: P,
-  description: X,
-  bgColour: y,
-  breakpoints: Y,
-  defaultAnimation: O,
-  disabled: _,
-  drag: q,
-  dragSpeed: F,
-  initial: G,
-  loop: g = !0,
-  mode: H = "snap",
-  range: J,
-  renderMode: M,
-  rtl: Q,
-  rubberband: U,
-  slides: b,
-  vertical: Z,
-  animationStarted: w,
-  animationStopped: R,
-  animationEnded: V,
-  created: Se,
-  destroyed: p,
-  detailsChanged: ee,
-  dragged: te,
-  dragStarted: ne,
-  dragChecked: ie,
-  dragEnded: le,
-  beforeOptionsChanged: ce,
-  optionsChanged: ae,
-  slideChanged: De,
-  updated: ue,
-  perView: m = 1,
-  spacing: re,
-  number: de,
-  origin: oe,
-  arrows: a,
-  dots: h
-}) => {
-  var N, S, D, A, E, T, j, L;
-  const x = B, [u, me] = W(0), [C, he] = W(!1);
-  function fe(t) {
-    let l, r, d;
-    function o(i, Ce) {
-      r.x -= i.deltaX, r.y -= i.deltaY, t.container.dispatchEvent(
-        new CustomEvent(Ce, {
-          detail: {
-            x: r.x,
-            y: r.y
-          }
-        })
-      );
-    }
-    function f(i) {
-      r = {
-        x: i.pageX,
-        y: i.pageY
-      }, o(i, "ksDragStart");
-    }
-    function v(i) {
-      o(i, "ksDrag");
-    }
-    function s(i) {
-      o(i, "ksDragEnd");
-    }
-    function se(i) {
-      d || (f(i), d = !0), v(i), clearTimeout(l), l = setTimeout(() => {
-        d = !1, s(i);
-      }, 50);
-    }
-    t.on("created", () => {
-      t.container.addEventListener("wheel", se, {
-        passive: !0
-      });
-    });
-  }
-  const [ve, n] = xe(
-    {
-      initial: G,
-      breakpoints: Y,
-      defaultAnimation: O,
-      disabled: _,
-      drag: q,
-      dragSpeed: F,
-      loop: g,
-      mode: H,
-      range: J,
-      renderMode: M,
-      rtl: Q,
-      rubberband: U,
-      vertical: Z,
-      slideChanged(t) {
-        me(t.track.details.rel);
-      },
-      // slideChanged: slideChanged,
-      created() {
-        he(!0);
+import { useKeenSlider as W } from "../../node_modules/keen-slider/react.js";
+import { WheelControls as q } from "./utils.js";
+const N = L(null), P = p(
+  ({
+    breakpoints: l,
+    children: c,
+    className: n,
+    loop: t,
+    perView: a,
+    rubberband: r,
+    spacing: u,
+    ...e
+  }, i) => {
+    const [h, d] = j(1), [x, y] = j(!1), [f, o] = W(
+      {
+        breakpoints: l,
+        loop: t,
+        rubberband: r,
+        slideChanged(m) {
+          d(m.track.details.rel);
+        },
+        created() {
+          y(!0);
+        },
+        slides: {
+          spacing: u,
+          perView: a
+        }
       },
-      // created: created,
-      animationStarted: w,
-      animationStopped: R,
-      animationEnded: V,
-      destroyed: p,
-      detailsChanged: ee,
-      dragged: te,
-      dragStarted: ne,
-      dragChecked: ie,
-      dragEnded: le,
-      beforeOptionsChanged: ce,
-      optionsChanged: ae,
-      updated: ue,
-      slides: {
-        perView: m,
-        spacing: re,
-        origin: oe,
-        number: de
+      [q]
+    ), w = O(
+      () => ({
+        sliderRef: f,
+        instanceRef: o,
+        currentSlide: h,
+        setCurrentSlide: d,
+        perView: a,
+        ...e
+      }),
+      [
+        e,
+        f,
+        o.current,
+        h,
+        d,
+        a,
+        x
+      ]
+    ), g = (m) => {
+      var C;
+      m.key === "Tab" && ((C = o.current) == null || C.next());
+    };
+    return /* @__PURE__ */ s(N.Provider, { value: w, children: /* @__PURE__ */ s(
+      "div",
+      {
+        onKeyDown: g,
+        className: v("navigation-wrapper w-full", n),
+        ref: i,
+        ...e,
+        children: c
       }
-    },
-    [fe]
-  );
-  return /* @__PURE__ */ K(
-    ke,
+    ) });
+  }
+), R = p(({ children: l, className: c, ...n }, t) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: t,
+    className: v(
+      "navigation-wrapper flex w-full justify-between gap-4",
+      c
+    ),
+    ...n,
+    children: l
+  }
+)), z = p(({ className: l, children: c, rightArrow: n = !1, ...t }) => {
+  const { sliderRef: a } = b(N) || {};
+  return /* @__PURE__ */ s(
+    "div",
     {
-      id: e,
-      className: x,
-      title: P,
-      description: X,
-      bgColour: y,
-      children: [
-        /* @__PURE__ */ K(
-          "div",
-          {
-            onKeyDown: (t) => {
-              var l;
-              t.key === "Tab" && ((l = n.current) == null || l.next());
-            },
-            className: k(
-              x,
-              (a == null ? void 0 : a.visible) === !0 && "flex justify-between",
-              "navigation-wrapper w-full"
-            ),
-            children: [
-              (a == null ? void 0 : a.visible) === !0 && C && n.current !== void 0 && /* @__PURE__ */ c("div", { className: "my-auto", children: /* @__PURE__ */ c(
-                $,
-                {
-                  left: !0,
-                  onClick: (t) => {
-                    var l;
-                    t.stopPropagation() !== void 0 || ((l = n.current) == null || l.prev());
-                  },
-                  disabled: u === 0,
-                  ...a
-                }
-              ) }),
-              /* @__PURE__ */ c(
-                "div",
-                {
-                  ref: ve,
-                  className: k(
-                    I,
-                    "keen-slider w-full pb-12 pt-4"
-                  ),
-                  children: b != null && b
-                }
-              ),
-              (a == null ? void 0 : a.visible) === !0 && C && n.current !== void 0 && /* @__PURE__ */ c("div", { className: "my-auto", children: /* @__PURE__ */ c(
-                $,
-                {
-                  right: !0,
-                  onClick: (t) => {
-                    var l;
-                    t.stopPropagation() !== void 0 || ((l = n.current) == null || l.next());
-                  },
-                  disabled: u === ((A = (D = (S = (N = n == null ? void 0 : n.current) == null ? void 0 : N.track) == null ? void 0 : S.details) == null ? void 0 : D.slides) == null ? void 0 : A.length),
-                  ...a
-                }
-              ) })
-            ]
-          }
-        ),
-        (h == null ? void 0 : h.visible) === !0 && C && n.current != null && /* @__PURE__ */ c("div", { className: "my-2 flex justify-center", children: [
-          ...Array(
-            (L = (j = (T = (E = n == null ? void 0 : n.current) == null ? void 0 : E.track) == null ? void 0 : T.details) == null ? void 0 : j.slides) == null ? void 0 : L.length
-          ).keys()
-        ].map((t, l) => {
-          var d, o, f, v;
-          const r = ((v = (f = (o = (d = n == null ? void 0 : n.current) == null ? void 0 : d.track) == null ? void 0 : o.details) == null ? void 0 : f.slides) == null ? void 0 : v.length) ?? 1;
-          return /* @__PURE__ */ c(
-            Ne,
-            {
-              isActive: g ? u + m <= r ? t >= u && t < u + m : t >= u || u + m - r - 1 >= t : u === t,
-              onClick: () => {
-                var s;
-                (s = n.current) == null || s.moveToIdx(t);
-              },
-              ...h,
-              wrapperBgColour: y ?? "white"
-            },
-            `dot_${l}`
-          );
-        }) })
-      ]
+      ref: a,
+      className: v("keen-slider w-full pb-4", l),
+      ...t,
+      children: c
     }
   );
-};
-function $(e) {
-  return /* @__PURE__ */ c("div", { className: "my-auto", children: /* @__PURE__ */ c("a", { onClick: e == null ? void 0 : e.onClick, children: /* @__PURE__ */ c(
-    z,
-    {
-      icon: e != null && e.left ? ye : ge,
-      size: "3x",
-      colour: e == null ? void 0 : e.colour
-    }
-  ) }) });
-}
-function Ne(e) {
-  return e == null || e.wrapperBgColour, /* @__PURE__ */ c(
-    "button",
+}), I = p(({ className: l, children: c, rightArrow: n = !1, ...t }, a) => {
+  const { instanceRef: r } = b(N) || {};
+  return /* @__PURE__ */ s(
+    "div",
     {
-      className: k("border-transparent py-2"),
-      type: "button",
-      onClick: e == null ? void 0 : e.onClick,
-      "aria-label": `carousel-button${e.id ? `-${e.id}` : ""}`,
-      children: /* @__PURE__ */ c(
-        z,
-        {
-          icon: be,
-          size: "2x",
-          colour: e != null && e.isActive ? e.hoverColour : e.colour
-        }
-      )
+      ref: a,
+      className: v(
+        "my-auto text-carousel-arrow-default hover:cursor-pointer hover:text-carousel-arrow-hover",
+        l
+      ),
+      onClick: (u) => {
+        var e, i;
+        n ? u.stopPropagation() !== void 0 || ((e = r.current) == null || e.next()) : u.stopPropagation() !== void 0 || ((i = r.current) == null || i.prev());
+      },
+      ...t,
+      children: /* @__PURE__ */ s("a", { children: /* @__PURE__ */ s(D, { icon: n ? T : $, size: "3x" }) })
     }
   );
-}
+}), K = p(({ className: l, children: c, onClick: n, ...t }, a) => {
+  var d, x, y, f;
+  const {
+    instanceRef: r,
+    loop: u,
+    currentSlide: e = 1,
+    perView: i = 1
+  } = b(N) || {}, h = (f = (y = (x = (d = r == null ? void 0 : r.current) == null ? void 0 : d.track) == null ? void 0 : x.details) == null ? void 0 : y.slides) == null ? void 0 : f.length;
+  return /* @__PURE__ */ s("div", { className: "flex justify-center", children: [...Array(h).keys()].map((o) => {
+    var m, C, k, S;
+    const w = ((S = (k = (C = (m = r == null ? void 0 : r.current) == null ? void 0 : m.track) == null ? void 0 : C.details) == null ? void 0 : k.slides) == null ? void 0 : S.length) ?? 1, g = u ? e + i <= w ? o >= e && o < e + i : o >= e || e + i - w - 1 >= o : e === o;
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        onClick: () => {
+          var A;
+          (A = r.current) == null || A.moveToIdx(o);
+        },
+        "aria-label": `carousel-button${t.id ? `-${t.id}` : ""}`,
+        children: /* @__PURE__ */ s(
+          D,
+          {
+            className: v(
+              "hover:text-carousel-dots-hover",
+              g ? "text-carousel-dots-active" : "text-carousel-dots-default"
+            ),
+            icon: M,
+            size: "2x"
+          }
+        )
+      }
+    );
+  }) });
+});
+P.displayName = "Carousel";
+R.displayName = "Carousel.Content";
+I.displayName = "Carousel.Arrow";
+K.displayName = "Carousel.Dots";
+z.displayName = "Carousel.Slides";
+const X = Object.assign(P, {
+  Content: R,
+  Arrow: I,
+  Dots: K,
+  Slides: z
+});
 export {
-  Be as Carousel
+  X as Carousel
 };

package/lib/components/Carousel/utils.d.ts

@@ -0,0 +1 @@
+export declare function WheelControls(slider: any): void;

package/lib/components/Carousel/utils.js

@@ -0,0 +1,38 @@
+function h(n) {
+  let i, t, a;
+  function o(e, s) {
+    t.x -= e.deltaX, t.y -= e.deltaY, n.container.dispatchEvent(
+      new CustomEvent(s, {
+        detail: {
+          x: t.x,
+          y: t.y
+        }
+      })
+    );
+  }
+  function c(e) {
+    t = {
+      x: e.pageX,
+      y: e.pageY
+    }, o(e, "ksDragStart");
+  }
+  function l(e) {
+    o(e, "ksDrag");
+  }
+  function u(e) {
+    o(e, "ksDragEnd");
+  }
+  function r(e) {
+    a || (c(e), a = !0), l(e), clearTimeout(i), i = setTimeout(() => {
+      a = !1, u(e);
+    }, 50);
+  }
+  n.on("created", () => {
+    n.container.addEventListener("wheel", r, {
+      passive: !0
+    });
+  });
+}
+export {
+  h as WheelControls
+};