trepur_components 2.3.8 → 2.3.10

package/lib/components/CarouselThumbnail/index.js

@@ -1,164 +1,35 @@
-import { jsx as l, jsxs as te } from "react/jsx-runtime";
-import { ComponentWrapper as ne } from "../ComponentWrapper/index.js";
-import p from "classnames";
+import { jsx as l, jsxs as f, Fragment as C } from "react/jsx-runtime";
+import { createContext as T, forwardRef as o, useMemo as x, useContext as v } from "react";
+import t from "clsx";
 import "../../node_modules/keen-slider/keen-slider.min.css.js";
-import { useKeenSlider as u } from "../../node_modules/keen-slider/react.js";
-const pe = ({
-  id: m,
-  className: h,
-  slideWrapperClassName: f,
-  title: v,
-  description: w,
-  bgColour: x,
-  breakpoints: ie,
-  defaultAnimation: g,
-  disabled: k,
-  drag: b,
-  dragSpeed: E,
-  initial: T,
-  loop: C = !0,
-  mode: V = "snap",
-  range: L,
-  renderMode: N,
-  rtl: y,
-  rubberband: I,
-  slides: o,
-  vertical: S,
-  animationStarted: A,
-  animationStopped: D,
-  animationEnded: W,
-  created: ae,
-  destroyed: j,
-  detailsChanged: R,
-  dragged: X,
-  dragStarted: Y,
-  dragChecked: K,
-  dragEnded: M,
-  beforeOptionsChanged: P,
-  optionsChanged: q,
-  slideChanged: re,
-  updated: z,
-  spacing: B,
-  number: F,
-  origin: G
-}) => {
-  const d = h;
-  function H(i) {
-    let t, a, r;
-    function c(e, ee) {
-      a.x -= e.deltaX, a.y -= e.deltaY, i.container.dispatchEvent(
-        new CustomEvent(ee, {
-          detail: {
-            x: a.x,
-            y: a.y
-          }
-        })
-      );
-    }
-    function n(e) {
-      a = {
-        x: e.pageX,
-        y: e.pageY
-      }, c(e, "ksDragStart");
-    }
-    function s(e) {
-      c(e, "ksDrag");
-    }
-    function _(e) {
-      c(e, "ksDragEnd");
-    }
-    function $(e) {
-      r || (n(e), r = !0), s(e), clearTimeout(t), t = setTimeout(() => {
-        r = !1, _(e);
-      }, 50);
-    }
-    i.on("created", () => {
-      i.container.addEventListener("wheel", $, {
-        passive: !0
-      });
-    });
-  }
-  function J(i) {
-    return (t) => {
-      function a() {
-        t.slides.forEach((n) => {
-          n.classList.remove("active");
-        });
-      }
-      function r(n) {
-        t.slides[n].classList.add("active");
-      }
-      function c() {
-        t.slides.forEach((n, s) => {
-          n.addEventListener("click", () => {
-            i.current && i.current.moveToIdx(s);
-          });
-        });
-      }
-      t.on("created", () => {
-        i.current && (r(t.track.details.rel), c(), i.current.on("animationStarted", (n) => {
-          a();
-          const s = n.animator.targetIdx || 0;
-          r(n.track.absToRel(s)), t.moveToIdx(Math.min(t.track.details.maxIdx, s));
-        }));
-      });
-    };
-  }
-  const O = {
-    "(min-width: 320px)": {
-      slides: { perView: 1, spacing: 25 }
-    },
-    "(max-width: 500px)": {
-      slides: { perView: 1, spacing: 25 }
-    },
-    "(min-width: 768px)": {
-      slides: { perView: 1, spacing: 25 }
-    },
-    "(min-width: 1024px)": {
-      slides: { perView: 2, spacing: 20 }
-    },
-    "(min-width: 1280px)": {
-      slides: { perView: 2, spacing: 10 }
+import { useKeenSlider as a } from "../../node_modules/keen-slider/react.js";
+import { breakpointsToRender as N } from "./const.js";
+import { WheelControls as S, ThumbnailPlugin as g } from "./utils.js";
+const m = T(null), u = o(({ children: i, className: e, ...r }, s) => {
+  const n = x(
+    () => ({
+      ...r
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ l(m.Provider, { value: n, children: /* @__PURE__ */ l(
+    "div",
+    {
+      ref: s,
+      className: t("navigation-wrapper w-full", e),
+      ...r,
+      children: i
     }
-  }, [Q, U] = u(
+  ) });
+}), d = o(({ className: i, children: e }) => {
+  const { rubberband: r, loop: s, ...n } = v(m) || {}, [b, p] = a(
     {
-      initial: T,
-      breakpoints: O,
-      defaultAnimation: g,
-      disabled: k,
-      drag: b,
-      dragSpeed: E,
-      loop: C,
-      mode: V,
-      range: L,
-      renderMode: N,
-      rtl: y,
-      rubberband: I,
-      vertical: S,
-      slideChanged() {
-      },
-      // slideChanged: slideChanged,
-      // created: created,
-      animationStarted: A,
-      animationStopped: D,
-      animationEnded: W,
-      destroyed: j,
-      detailsChanged: R,
-      dragged: X,
-      dragStarted: Y,
-      dragChecked: K,
-      dragEnded: M,
-      beforeOptionsChanged: P,
-      optionsChanged: q,
-      updated: z,
-      slides: {
-        spacing: B,
-        origin: G,
-        number: F
-      }
+      breakpoints: N,
+      loop: s,
+      rubberband: r
     },
-    [H]
-  ), [Z] = u(
+    [S]
+  ), [h] = a(
     {
       initial: 0,
       slides: {
@@ -166,40 +37,38 @@ const pe = ({
         spacing: 10
       }
     },
-    [J(U)]
+    [g(p)]
   );
-  return /* @__PURE__ */ l(
-    ne,
-    {
-      id: m,
-      className: d,
-      title: v,
-      description: w,
-      bgColour: x,
-      children: /* @__PURE__ */ te("div", { className: p(d, "navigation-wrapper w-full"), children: [
-        /* @__PURE__ */ l(
-          "div",
-          {
-            ref: Q,
-            className: p(
-              f,
-              "keen-slider h-96 w-full rounded-t-2xl pb-4"
-            ),
-            children: o != null && o
-          }
+  return /* @__PURE__ */ f(C, { children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        ref: b,
+        className: t(
+          "keen-slider h-96 w-full rounded-t-2xl pb-4",
+          i
         ),
-        /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
-          "div",
-          {
-            ref: Z,
-            className: "keen-slider thumbnail h-24 w-16 rounded-b-2xl",
-            children: o != null && o
-          }
-        ) })
-      ] })
-    }
-  );
-};
+        ...n,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l("div", { ref: h, className: "keen-slider thumbnail h-24 w-16", children: e }) })
+  ] });
+}), c = o(({ src: i, ...e }) => /* @__PURE__ */ l(
+  "img",
+  {
+    className: "keen-slider__slide rounded-t-2xl object-cover",
+    src: i,
+    ...e
+  }
+));
+u.displayName = "CarouselThumbnail";
+d.displayName = "CarouselThumbnail.Slides";
+c.displayName = "CarouselThumbnail.Slide";
+const F = Object.assign(u, {
+  Slides: d,
+  Slide: c
+});
 export {
-  pe as CarouselThumbnail
+  F as CarouselThumbnail
 };

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

@@ -0,0 +1,2 @@
+export declare function WheelControls(slider: any): void;
+export declare function ThumbnailPlugin(mainRef: any): (slider: any) => void;

package/lib/components/CarouselThumbnail/utils.js

@@ -0,0 +1,65 @@
+function l(a) {
+  let e, c, o;
+  function r(t, d) {
+    c.x -= t.deltaX, c.y -= t.deltaY, a.container.dispatchEvent(
+      new CustomEvent(d, {
+        detail: {
+          x: c.x,
+          y: c.y
+        }
+      })
+    );
+  }
+  function n(t) {
+    c = {
+      x: t.pageX,
+      y: t.pageY
+    }, r(t, "ksDragStart");
+  }
+  function i(t) {
+    r(t, "ksDrag");
+  }
+  function u(t) {
+    r(t, "ksDragEnd");
+  }
+  function s(t) {
+    o || (n(t), o = !0), i(t), clearTimeout(e), e = setTimeout(() => {
+      o = !1, u(t);
+    }, 50);
+  }
+  a.on("created", () => {
+    a.container.addEventListener("wheel", s, {
+      passive: !0
+    });
+  });
+}
+function v(a) {
+  return (e) => {
+    function c() {
+      e.slides.forEach((n) => {
+        n.classList.remove("active");
+      });
+    }
+    function o(n) {
+      e.slides[n].classList.add("active");
+    }
+    function r() {
+      e.slides.forEach((n, i) => {
+        n.addEventListener("click", () => {
+          a.current && a.current.moveToIdx(i);
+        });
+      });
+    }
+    e.on("created", () => {
+      a.current && (o(e.track.details.rel), r(), a.current.on("animationStarted", (n) => {
+        c();
+        const i = n.animator.targetIdx || 0;
+        o(n.track.absToRel(i)), e.moveToIdx(Math.min(e.track.details.maxIdx, i));
+      }));
+    });
+  };
+}
+export {
+  v as ThumbnailPlugin,
+  l as WheelControls
+};

package/lib/components/Checkbox/Checkbox.stories.d.ts

@@ -1,49 +1,14 @@
-import { Checkbox } from '.';
 import { StoryObj } from '@storybook/react';
+import { Checkbox } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, label, onClick, checked }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        label: {
-            description: string;
-            table: {};
-        };
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLabelElement> & import('./').CheckboxProps & import('react').RefAttributes<HTMLLabelElement>> & {
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLSpanElement> & import('./').CheckboxProps & import('react').RefAttributes<HTMLSpanElement>>;
     };
     args: {
-        label: string;
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,7 +1,11 @@
-export interface Props {
-    id?: string;
-    label: string;
-    onClick?: (label: string, isChecked: boolean) => void;
+import { HTMLAttributes } from 'react';
+
+export interface CheckboxProps {
+    label?: string;
+    onClick?: (isChecked: boolean) => void;
     checked?: boolean;
 }
-export declare const Checkbox: ({ id, label, onClick, checked }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLabelElement> & CheckboxProps & import('react').RefAttributes<HTMLLabelElement>> & {
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & CheckboxProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export { Checkbox };

package/lib/components/Checkbox/index.js

@@ -1,31 +1,28 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { useState as m } from "react";
-import d from "classnames";
-const u = ({ id: o, label: c, onClick: s, checked: a = !1 }) => {
-  const [e, t] = m(a), n = "checkbox-wrapper", h = d(
-    {
-      "bg-facebook": e
-    },
-    "h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer"
-  );
-  return /* @__PURE__ */ r("div", { id: o, className: n, children: /* @__PURE__ */ p("label", { className: "flex  hover:cursor-pointer", children: [
-    /* @__PURE__ */ r(
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as a, useState as d } from "react";
+const c = a(({ children: e, checked: s, onClick: o }, h) => {
+  const [r, b] = d(s);
+  return /* @__PURE__ */ p("label", { ref: h, className: "flex items-center gap-4 hover:cursor-pointer", children: [
+    /* @__PURE__ */ t(
       "input",
       {
-        className: h,
+        className: "h-6 w-6 rounded border-2",
         onChange: () => {
-          t(!e);
-        },
-        onClick: () => {
-          s == null || s(c, !e);
+          b(!r);
         },
+        onClick: () => o == null ? void 0 : o(!r),
         type: "checkbox",
-        checked: e
+        checked: r
       }
     ),
-    /* @__PURE__ */ r("span", { className: "my-auto px-2", children: c })
-  ] }) });
-};
+    e
+  ] });
+}), n = a(({ children: e }, s) => /* @__PURE__ */ t("span", { ref: s, children: e }));
+c.displayName = "Checkbox";
+n.displayName = "Checkbox.Label";
+const l = Object.assign(c, {
+  Label: n
+});
 export {
-  u as Checkbox
+  l as Checkbox
 };

package/lib/components/Collapsible/Collapsible.stories.d.ts

@@ -3,37 +3,18 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, preText, title, subtitle, imageProps, children, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').CollapsibleContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        HeaderContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLDivElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Subtitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
     parameters: {};
     argTypes: {
-        preText: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        title: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        subtitle: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        children: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
         id: {
             description: string;
             control: {
@@ -68,13 +49,7 @@ declare const meta: {
         };
     };
     args: {
-        preText: string;
-        title: string;
-        subtitle: string;
-        imageProps: {
-            src: string;
-        };
-        children: import("react/jsx-runtime").JSX.Element;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,12 +1,19 @@
-import { Props as imageProps } from '../Image';
+import { ImageProps } from '../Image';
+import { HTMLAttributes } from 'react';
 
-export interface Props {
-    id?: string;
-    className?: string;
-    preText?: string;
-    title?: string;
-    subtitle?: string;
-    imageProps?: imageProps;
-    children?: string | JSX.Element;
+export interface CollapsibleContextProps {
+    loading?: boolean;
+    expanded?: boolean;
+    setExpanded?: (expanded: boolean) => void;
 }
-export declare const Collapsible: ({ id, className, preText, title, subtitle, imageProps, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Collapsible: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CollapsibleContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    HeaderContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Image: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ImageProps & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Subtitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { Collapsible };