trepur_components 2.3.6 → 2.3.8

package/lib/components/CarouselThumbnail/index.js

@@ -0,0 +1,205 @@
+import { jsx as l, jsxs as te } from "react/jsx-runtime";
+import { ComponentWrapper as ne } from "../ComponentWrapper/index.js";
+import p from "classnames";
+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 }
+    }
+  }, [Q, U] = u(
+    {
+      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
+      }
+    },
+    [H]
+  ), [Z] = u(
+    {
+      initial: 0,
+      slides: {
+        perView: 4,
+        spacing: 10
+      }
+    },
+    [J(U)]
+  );
+  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
+          }
+        ),
+        /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
+          "div",
+          {
+            ref: Z,
+            className: "keen-slider thumbnail h-24 w-16 rounded-b-2xl",
+            children: o != null && o
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  pe as CarouselThumbnail
+};

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

@@ -0,0 +1,52 @@
+import { Checkbox } from '.';
+import { StoryObj } from '@storybook/react';
+
+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;
+                };
+            };
+        };
+    };
+    args: {
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Checked: Story;
+export declare const Unchecked: Story;

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

@@ -0,0 +1,7 @@
+export interface Props {
+    id?: string;
+    label: string;
+    onClick?: (label: string, isChecked: boolean) => void;
+    checked?: boolean;
+}
+export declare const Checkbox: ({ id, label, onClick, checked }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Checkbox/index.js

@@ -0,0 +1,31 @@
+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(
+      "input",
+      {
+        className: h,
+        onChange: () => {
+          t(!e);
+        },
+        onClick: () => {
+          s == null || s(c, !e);
+        },
+        type: "checkbox",
+        checked: e
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: "my-auto px-2", children: c })
+  ] }) });
+};
+export {
+  u as Checkbox
+};

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

@@ -0,0 +1,82 @@
+import { Collapsible } from '.';
+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;
+    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: {
+                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;
+                };
+            };
+        };
+    };
+    args: {
+        preText: string;
+        title: string;
+        subtitle: string;
+        imageProps: {
+            src: string;
+        };
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { Props as imageProps } from '../Image';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    preText?: string;
+    title?: string;
+    subtitle?: string;
+    imageProps?: imageProps;
+    children?: string | JSX.Element;
+}
+export declare const Collapsible: ({ id, className, preText, title, subtitle, imageProps, children, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Collapsible/index.js

@@ -0,0 +1,88 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useState as N, useEffect as H } from "react";
+import { HorizontalLine as b } from "../HorizontalLine/index.js";
+import { Icon as w } from "../Icon/index.js";
+import { Image as C } from "../Image/index.js";
+import { faChevronUp as E, faChevronDown as S } from "@fortawesome/fontawesome-free-solid";
+import x from "classnames";
+const U = ({
+  id: h,
+  className: p,
+  preText: a,
+  title: m,
+  subtitle: c,
+  imageProps: d,
+  children: r
+}) => {
+  const [o, g] = N(!1);
+  H(() => {
+    var i;
+    const s = document.getElementsByClassName("collapsible");
+    let e;
+    for (e = 0; e < s.length; e++)
+      (i = s[e]) == null || i.addEventListener("click", function(L) {
+        const l = this.nextElementSibling, y = l.scrollHeight.toString();
+        l.style.maxHeight === "0px" ? l.style.maxHeight = `${y}px` : l.style.maxHeight = "0px";
+      });
+  });
+  const f = x(
+    p,
+    "w-full border-b border-lightest-grey duration-300 hover:cursor-pointer transition-opactiy"
+  ), u = x(
+    {
+      "mb-4 mt-2 max-h-max": o,
+      "max-h-0": !o
+    },
+    "w-auto overflow-hidden px-4"
+  ), v = (s) => {
+    const e = s.currentTarget.nextElementSibling, i = e.scrollHeight.toString();
+    o ? e.style.maxHeight = "0px" : e.style.maxHeight = `${i}px`, g(!o);
+  };
+  return /* @__PURE__ */ n("div", { id: h, className: f, children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        onClick: (s) => {
+          v(s);
+        },
+        className: "flex h-24 px-4 sm:pr-8",
+        children: [
+          d !== void 0 && /* @__PURE__ */ t(
+            C,
+            {
+              ...d,
+              width: 3,
+              height: 3,
+              className: " my-auto flex-none rounded-2xl"
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "mx-4 my-auto grid w-full", children: [
+            a !== void 0 && /* @__PURE__ */ t("h4", { className: "truncate text-xxs text-light-grey md:text-xs", children: a }),
+            m !== void 0 && /* @__PURE__ */ t("h4", { className: "truncate text-sm md:text-md", children: m }),
+            c !== void 0 && /* @__PURE__ */ t("h5", { className: "truncate text-xs md:text-sm", children: c })
+          ] }),
+          r !== void 0 && /* @__PURE__ */ t("div", { className: "my-auto flex-none", children: /* @__PURE__ */ t(
+            w,
+            {
+              icon: o ? E : S
+            }
+          ) })
+        ]
+      }
+    ),
+    r !== void 0 && /* @__PURE__ */ n(
+      "div",
+      {
+        className: u,
+        style: { transition: "max-height 0.2s ease-out" },
+        children: [
+          /* @__PURE__ */ t(b, { colour: "grey" }),
+          /* @__PURE__ */ t("div", { className: "pb-2 pt-4", children: r })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  U as Collapsible
+};

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

@@ -0,0 +1,116 @@
+import { Column } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, children, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        sm: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        md: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        lg: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        xl: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        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;
+                };
+            };
+        };
+    };
+    args: {
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        className: string;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Column>;
+export declare const Default: Story;

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

@@ -0,0 +1,10 @@
+export interface Props {
+    id?: string;
+    className?: string;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    children?: any;
+}
+export declare const Column: ({ id, children, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Column/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+const n = ({
+  id: o,
+  children: r
+}) => /* @__PURE__ */ t("div", { id: o, children: r });
+export {
+  n as Column
+};

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

@@ -0,0 +1,77 @@
+import { ComponentWrapper } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, description, bgColour, children, styles, withContainerPadding, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        maxWidth: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            control: {
+                type: string;
+                min: number;
+                step: number;
+            };
+            defaultValue: string;
+        };
+        children: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        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;
+                };
+            };
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ComponentWrapper>;
+export declare const Default: Story;