trepur_components 2.3.6 → 2.3.8

package/lib/components/Image/index.js

@@ -0,0 +1,99 @@
+import { jsxs as u, Fragment as w, jsx as l } from "react/jsx-runtime";
+import { useState as z } from "react";
+import o from "classnames";
+const E = ({
+  id: p,
+  className: f,
+  src: d,
+  altText: v,
+  title: x,
+  rounded: y = !1,
+  roundedFull: L = !1,
+  height: s = 8,
+  width: a = 8,
+  overlayText: e,
+  centerAligned: N = !1,
+  bordered: b = !1
+}) => {
+  const [c, t] = z(!1), m = o({
+    "opacity-80": c,
+    "opacity-0": !c
+  }), r = o({
+    "w-6": a === 1,
+    "w-10": a === 2,
+    "w-14": a === 3,
+    "w-16": a === 4,
+    "w-20": a === 5,
+    "w-24": a === 6,
+    "w-28": a === 7,
+    "w-32": a === 8,
+    "w-36": a === 9,
+    "w-40": a === 10,
+    "w-44": a === 11,
+    "w-full": a === void 0 || ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(a)
+  }), n = o({
+    "h-6": s === 1,
+    "h-10": s === 2,
+    "h-14": s === 3,
+    "h-16": s === 4,
+    "h-20": s === 5,
+    "h-24": s === 6,
+    "h-28": s === 7,
+    "h-32": s === 8,
+    "h-36": s === 9,
+    "h-40": s === 10,
+    "h-44": s === 11,
+    "h-full": s === void 0 || ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(s)
+  }), i = o(
+    {
+      "rounded-2xl": y,
+      "rounded-full": L,
+      "mx-auto": N,
+      "border-4 border-primary": b
+    },
+    f,
+    r,
+    n
+  ), C = o(
+    r,
+    n,
+    m,
+    "absolute z-10 bg-white transition-opacity duration-700"
+  ), j = o(
+    r,
+    n,
+    m,
+    "absolute z-20 flex transition-opacity duration-700"
+  );
+  return /* @__PURE__ */ u("div", { className: i, children: [
+    e !== void 0 && /* @__PURE__ */ u(w, { children: [
+      /* @__PURE__ */ l("div", { className: C }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: j,
+          onMouseEnter: () => {
+            t(!0);
+          },
+          onMouseLeave: () => {
+            t(!1);
+          },
+          children: /* @__PURE__ */ l("p", { className: "m-auto text-center text-primary", children: e })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l(
+      "img",
+      {
+        id: p,
+        className: i,
+        src: d,
+        alt: v ?? e,
+        title: x ?? e
+      }
+    )
+  ] });
+};
+export {
+  E as Image
+};

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

@@ -0,0 +1,69 @@
+import { ImageInfo } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, bgColour, textColour, contentTitle, text, image, swapDesktop, swapMobile, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        bgColour: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: 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;
+        contentTitle: string;
+        text: string;
+        image: string;
+        swapDesktop: boolean;
+        swapMobile: boolean;
+        bgColour: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ImageInfo>;
+export declare const Default: Story;

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

@@ -0,0 +1,14 @@
+import { Colours } from '../../utils/controls';
+
+export interface Props {
+    id: string;
+    className?: string;
+    bgColour?: Colours;
+    textColour?: string;
+    contentTitle?: string;
+    text?: string;
+    image: string;
+    swapDesktop?: boolean;
+    swapMobile?: boolean;
+}
+export declare const ImageInfo: ({ id, className, bgColour, textColour, contentTitle, text, image, swapDesktop, swapMobile, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,63 @@
+import { ImageLink } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        title: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        image: {
+            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: {
+        image: string;
+        link: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ImageLink>;
+export declare const Default: Story;

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

@@ -0,0 +1,14 @@
+import { Props as buttonProps } from '../Button';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    image?: string;
+    altText?: string;
+    title?: string;
+    link?: string;
+    rounded?: boolean;
+    openInNewTab?: boolean;
+    buttonProps?: buttonProps;
+}
+export declare const ImageLink: ({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/ImageLink/index.js

@@ -0,0 +1,39 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { Button as f } from "../Button/index.js";
+import m from "classnames";
+const u = ({
+  id: t,
+  className: c,
+  image: a,
+  altText: s,
+  title: r,
+  link: i,
+  rounded: o,
+  openInNewTab: d,
+  buttonProps: e
+}) => {
+  const n = m(
+    c,
+    "mx-1 mb-2 cursor-pointer overflow-hidden text-center hover:opacity-50 md:mx-1 md:mb-2 lg:mx-3 lg:mb-5 max-w-96"
+  ), x = m({
+    "rounded-full": o
+  });
+  return /* @__PURE__ */ l("a", { id: t, href: i, ...d && { target: "blank" }, children: /* @__PURE__ */ h(
+    "div",
+    {
+      className: m(
+        x,
+        n,
+        "relative overflow-hidden"
+      ),
+      children: [
+        /* @__PURE__ */ l("img", { src: a, alt: s, className: "h-full w-full object-cover" }),
+        r !== void 0 && /* @__PURE__ */ l("h1", { className: "absolute inset-x-0 top-0 mt-4 bg-black py-2 text-center text-white", children: r }),
+        (e == null ? void 0 : e.children) !== void 0 && /* @__PURE__ */ l(f, { className: "absolute inset-x-0 bottom-0 mx-8 mb-4 text-center", children: e.children })
+      ]
+    }
+  ) });
+};
+export {
+  u as ImageLink
+};

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

@@ -0,0 +1,48 @@
+import { ImageLinkList } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, items }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        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: {
+        items: any;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ImageLinkList>;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+import { Props as imageLinkProps } from '../ImageLink';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    items?: imageLinkProps[];
+}
+export declare const ImageLinkList: ({ id, className, items }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/ImageLinkList/index.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import m from "classnames";
+import { ImageLink as e } from "../ImageLink/index.js";
+const d = ({ id: t, className: l, items: r }) => {
+  const o = m(l, "grid sm:grid-cols-2 md:grid-cols-4");
+  return /* @__PURE__ */ i("div", { id: t, className: o, children: r == null ? void 0 : r.map((a, s) => /* @__PURE__ */ i(
+    e,
+    {
+      altText: a.altText,
+      image: a.image,
+      title: a.title
+    },
+    `image_link_${s + 0}`
+  )) });
+};
+export {
+  d as ImageLinkList
+};

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

@@ -0,0 +1,54 @@
+import { InformationIcon } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, subtitle, withAnimation, iconProps, large, }: import('.').InformationIconProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        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;
+        subtitle: string;
+        withAnimation: boolean;
+        backgroundColour: string;
+        iconProps: {
+            icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
+            hollow: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof InformationIcon>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { IconProps } from '../Icon';
+
+export interface InformationIconProps {
+    id: string;
+    className?: string;
+    title: string;
+    subtitle?: string | number;
+    withAnimation?: boolean;
+    iconProps: IconProps;
+    large?: boolean;
+}
+export declare const InformationIcon: ({ id, className, title, subtitle, withAnimation, iconProps, large, }: InformationIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/InformationIcon/index.js

@@ -0,0 +1,65 @@
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { useRef as S, useEffect as y } from "react";
+import { Icon as E } from "../Icon/index.js";
+import L from "../../utils/matchMedia.js";
+import a from "classnames";
+const F = ({
+  id: r,
+  className: v,
+  title: m,
+  subtitle: e,
+  withAnimation: w = !1,
+  iconProps: l,
+  large: c = !0
+}) => {
+  const d = S(!1), I = L("max-width: 768px"), N = a(
+    {
+      "py-8": c,
+      "pb-4": !c,
+      "pt-4": !c
+    },
+    v,
+    "rounded-2xl text-center sm:flex sm:text-left grid gap-6"
+  ), b = a({
+    "font-light sm:font-semiBold": e !== void 0
+  }), g = a(
+    "text-xxl font-medium sm:text-xs sm:font-regular"
+  );
+  y(() => {
+    if (typeof e == "number") {
+      const s = document.getElementById(`${r}_number`), t = new IntersectionObserver(
+        (i, f) => {
+          i.forEach((o) => {
+            o.intersectionRatio >= 0.1 && !d.current && (d.current = !0, M(
+              document.getElementById(`${r}_number`),
+              0,
+              e,
+              3e3
+            ));
+          });
+        },
+        { threshold: 1 }
+      );
+      s != null && w && t.observe(s);
+    }
+  }, []);
+  const M = (s, t, i, f) => {
+    let o;
+    const x = (p) => {
+      o = p;
+      const u = Math.min((p - o) / f, 1);
+      s.innerHTML = Math.floor(u * (i - t) + t), u < 1 && window.requestAnimationFrame(x);
+    };
+    window.requestAnimationFrame(x);
+  };
+  return /* @__PURE__ */ h("div", { id: r, className: N, children: [
+    /* @__PURE__ */ n("div", { className: "sm:h-full", children: l !== void 0 && /* @__PURE__ */ n(E, { ...l, size: I ? "3x" : "2x" }) }),
+    /* @__PURE__ */ h("div", { className: "mt-8 flex flex-col-reverse sm:mt-0 sm:block sm:pr-4 md:pr-8", children: [
+      m !== void 0 && m !== "" && /* @__PURE__ */ n("p", { className: b, children: m }),
+      e !== void 0 && e !== "" && /* @__PURE__ */ n("p", { className: g, children: e })
+    ] })
+  ] });
+};
+export {
+  F as InformationIcon
+};

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

@@ -0,0 +1,55 @@
+import { InformationIconBlock } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, description, bgColour, icons, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        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;
+        icons: {
+            name: string;
+            value: string;
+            icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
+        }[];
+        bgColour: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof InformationIconBlock>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { Colours } from '../../utils/controls';
+import { IconProps } from '../Icon';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    description?: string;
+    bgColour?: Colours;
+    icons?: IconProps[];
+}
+export declare const InformationIconBlock: ({ id, className, title, description, bgColour, icons, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,114 @@
+import { Input } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, label, type, name, placeholder, onChange, onBlur, onFocus, onClick, withValidation, errors, errorState, value, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        label: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        placeholder: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        bold: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        required: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        withValidation: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        errors: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        value: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        bgColour: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: 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: {
+        label: string;
+        placeholder: string;
+        errors: never[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;