trepur_components 2.3.8 → 2.3.10

package/lib/components/Dialog/index.js

@@ -1,78 +1,16 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { Button as u } from "../Button/index.js";
-import { Image as B } from "../Image/index.js";
-import e from "classnames";
-const L = ({
-  id: f,
-  className: h,
-  title: d,
-  paragraph: x,
-  dismissText: w,
-  onDismissClick: N,
-  primaryCta: l,
-  secondaryCta: s,
-  imageUrl: n
-}) => {
-  const o = !!(l != null && l.children), m = !!(s != null && s.children), p = o && /* @__PURE__ */ t(
-    u,
-    {
-      ...l,
-      className: e(
-        {
-          "w-full": m
-        },
-        l == null ? void 0 : l.className,
-        "mt-2 w-full md:ml-6 md:mt-0"
-      )
-    }
-  ), i = m && /* @__PURE__ */ t(
-    u,
-    {
-      ...s,
-      className: e(
-        {
-          "w-full": o
-        },
-        s == null ? void 0 : s.className,
-        "mt-2 w-full md:ml-6 md:mt-0"
-      )
-    }
-  ), g = e(
-    {
-      "w-full": i
-    },
-    "flex flex-wrap pt-6 md:flex-nowrap"
-  ), v = e({}, "text-md font-regular");
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      id: f,
-      className: e(
-        h,
-        "mx-auto w-full rounded-xl bg-white p-6 text-ink md:w-[608px]"
-      ),
-      children: [
-        /* @__PURE__ */ c("div", { className: "relative pb-2", children: [
-          n !== void 0 && /* @__PURE__ */ t(B, { src: n, height: 3, width: 3 }),
-          /* @__PURE__ */ t(
-            "p",
-            {
-              className: "absolute right-0 top-0 cursor-pointer text-sm font-regular",
-              onClick: N,
-              children: w
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t("p", { className: v, children: d }),
-        /* @__PURE__ */ t("p", { className: "pt-1 font-light", children: x }),
-        (o || m) && /* @__PURE__ */ c("div", { className: g, children: [
-          p,
-          i
-        ] })
-      ]
-    }
-  );
-};
+import { jsx as a } from "react/jsx-runtime";
+import { Card as r } from "../Card/index.js";
+const n = ({
+  id: s,
+  className: i,
+  title: m,
+  paragraph: t,
+  dismissText: o,
+  onDismissClick: e,
+  primaryCta: p,
+  secondaryCta: l,
+  imageUrl: c
+}) => /* @__PURE__ */ a(r, { className: "max-w-[600px]" });
 export {
-  L as Dialog
+  n as Dialog
 };

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { Dropdown } from './';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & import('../Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+        List: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & import('react').RefAttributes<HTMLLIElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+export declare const Default: Story;

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

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../Button';
+import { HTMLAttributes } from 'react';
+
+export interface DropdownContextProps {
+    showDropdown?: boolean;
+    setShowDropdown?: (val: boolean) => void;
+}
+declare const Dropdown: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    List: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import('react').RefAttributes<HTMLLIElement>>;
+};
+export { Dropdown };

package/lib/components/Dropdown/index.js

@@ -0,0 +1,66 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { createContext as f, forwardRef as a, useState as D, useRef as b, useMemo as x, useContext as l } from "react";
+import { Button as d } from "../Button/index.js";
+import { faChevronDown as y } from "@fortawesome/fontawesome-free-solid";
+import { useClickOutside as C } from "./utils.js";
+const i = f(null), c = a(({ children: e }) => {
+  const [n, t] = D(!1), s = b(null), o = x(
+    () => ({
+      showDropdown: n,
+      setShowDropdown: t
+    }),
+    [n, t]
+  );
+  return C(s, () => {
+    t(!1);
+  }), /* @__PURE__ */ r(i.Provider, { value: o, children: /* @__PURE__ */ r("div", { ref: s, className: "relative inline-block text-left", children: e }) });
+}), m = a(({ children: e }) => {
+  const { showDropdown: n, setShowDropdown: t } = l(i) || {};
+  return /* @__PURE__ */ u(d, { onClick: () => t == null ? void 0 : t(!n), children: [
+    e,
+    /* @__PURE__ */ r(d.Icon, { icon: y })
+  ] });
+}), p = a(
+  ({ children: e }) => {
+    const { showDropdown: n } = l(i) || {};
+    return n ? /* @__PURE__ */ r(
+      "div",
+      {
+        className: "z-50 mt-2 w-48 rounded-lg border-2 bg-primary text-white",
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-labelledby": "menu-button",
+        children: /* @__PURE__ */ r("ul", { className: "py-1 text-sm", children: e })
+      }
+    ) : /* @__PURE__ */ r("div", {});
+  }
+), w = a(
+  ({ children: e, onClick: n }) => {
+    const { showDropdown: t, setShowDropdown: s } = l(i) || {};
+    return /* @__PURE__ */ r(
+      "li",
+      {
+        className: "px-4 py-2",
+        onClick: (o) => {
+          o == null || o.target, s == null || s(!1);
+        },
+        onKeyDown: (o) => {
+          o.key === "Enter" && (o == null || o.target);
+        },
+        children: e
+      }
+    );
+  }
+);
+c.displayName = "Dropdown";
+m.displayName = "Dropdown.Label";
+p.displayName = "Dropdown.List";
+w.displayName = "Dropdown.Item";
+const g = Object.assign(c, {
+  Label: m,
+  List: p,
+  Item: w
+});
+export {
+  g as Dropdown
+};

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

@@ -0,0 +1 @@
+export declare function useClickOutside(ref: any, onClickOutside: () => void): void;

package/lib/components/Dropdown/utils.js

@@ -0,0 +1,14 @@
+import { useEffect as u } from "react";
+function c(e, t) {
+  u(() => {
+    function n(o) {
+      e.current && !e.current.contains(o.target) && t();
+    }
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [e, t]);
+}
+export {
+  c as useClickOutside
+};

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

@@ -3,7 +3,11 @@ import { FileUploader } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, ctaText, text, imageUrl, onDrop, }: import('./').FileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').FileUploaderContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Input: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        FilePreview: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    };
     argTypes: {
         id: {
             description: string;
@@ -39,9 +43,7 @@ declare const meta: {
         };
     };
     args: {
-        ctaText: string;
-        text: string;
-        imageUrl: string;
+        children: import("react/jsx-runtime").JSX.Element[];
         onDrop: (files: any) => void;
     };
 };

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

@@ -1,9 +1,15 @@
-export interface FileUploaderProps {
-    id?: string;
-    className?: string;
-    ctaText: string;
-    text?: string;
-    imageUrl?: string;
-    onDrop?: ([]: Iterable<any>) => void;
+import { HTMLAttributes } from 'react';
+
+export interface FileUploaderContextProps {
+    fileList?: any;
+    setFileList: (open: any) => void;
+    inDropZone?: boolean;
+    setInDropZone?: (val: boolean) => void;
+    onDrop: React.DragEventHandler<HTMLDivElement> | undefined;
 }
-export declare const FileUploader: ({ id, className, ctaText, text, imageUrl, onDrop, }: FileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileUploader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & FileUploaderContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Input: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    FilePreview: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { FileUploader };

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

@@ -1,103 +1,17 @@
-import { Footer } from '.';
 import { StoryObj } from '@storybook/react';
+import { Footer } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, text, buttonProps, variant, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {
-        text: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        buttonProps: {
-            type: {
-                name: string;
-                value: string;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        variant: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            options: string[];
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-            defaultValue: string;
-            control: {
-                type: 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;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Bar: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Section: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Column: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     };
     args: {
-        text: string;
-        variant: string;
-        buttonProps: {
-            children: string;
-            onClick: import('@storybook/addon-actions').HandlerFunction;
-            href: string;
-            target: string;
-        };
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,10 +1,16 @@
-import { Props as buttonProps } from '../Button';
+import { HTMLAttributes } from 'react';
 
 export interface Props {
     id?: string;
     className?: string;
-    buttonProps?: buttonProps;
     text?: string;
     variant?: 'light' | 'dark';
 }
-export declare const Footer: ({ id, className, text, buttonProps, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Footer: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Bar: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Section: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Column: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Footer };

package/lib/components/Footer/index.js

@@ -1,36 +1,36 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { Button as r } from "../Button/index.js";
-import { Container as f } from "../Container/index.js";
-import x from "classnames";
-const C = ({
-  id: d,
-  className: m,
-  text: a,
-  buttonProps: e,
-  variant: c
-}) => {
-  const l = x(m, c === "dark" ? "bg-primary text-white" : "bg-white text-primary");
-  return /* @__PURE__ */ i("div", { id: d, className: l, children: /* @__PURE__ */ h(
-    f,
-    {
-      withPadding: !0,
-      className: "block h-auto flex-wrap items-center justify-between md:flex",
-      children: [
-        /* @__PURE__ */ i("p", { className: "pb-4 pt-8 text-center md:my-8 md:pb-0 md:pt-0", children: a }),
-        /* @__PURE__ */ i("div", { className: "pb-8 pt-4 text-center md:pb-0 md:pt-0", children: (e == null ? void 0 : e.children) !== void 0 && ((e == null ? void 0 : e.href) !== void 0 || (e == null ? void 0 : e.onClick) !== void 0) && /* @__PURE__ */ i(
-          r,
-          {
-            variant: c === "dark" ? "primary" : "secondary",
-            rounded: !0,
-            href: e == null ? void 0 : e.href,
-            onClick: e == null ? void 0 : e.onClick,
-            children: e == null ? void 0 : e.children
-          }
-        ) })
-      ]
-    }
-  ) });
-};
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import i from "clsx";
+const s = a(({ children: o, className: t }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: i(
+      "grid grid-cols-1 gap-y-12 bg-footer-bg p-8 text-footer-text",
+      t
+    ),
+    children: o
+  }
+)), n = a(({ children: o, className: t }, e) => /* @__PURE__ */ r("p", { ref: e, className: i("text-center", t), children: o })), m = a(({ children: o, className: t }, e) => /* @__PURE__ */ r("div", { ref: e, className: i("grid grid-cols-3 gap-12", t), children: o })), c = a(
+  ({ children: o, className: t }, e) => /* @__PURE__ */ r("div", { ref: e, className: t, children: o })
+), l = a(
+  ({ children: o, className: t }, e) => /* @__PURE__ */ r("div", { ref: e, className: t, children: o })
+), d = a(
+  ({ children: o, className: t }, e) => /* @__PURE__ */ r("div", { ref: e, className: t, children: o })
+);
+s.displayName = "Footer";
+n.displayName = "Footer.Bar";
+m.displayName = "Footer.Section";
+c.displayName = "Footer.Column";
+l.displayName = "Footer.Title";
+d.displayName = "Footer.Text";
+const u = Object.assign(s, {
+  Bar: n,
+  Section: m,
+  Column: c,
+  Title: l,
+  Text: d
+});
 export {
-  C as Footer
+  u as Footer
 };

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

@@ -1,133 +1,20 @@
-import { FooterNav } from '.';
 import { StoryObj } from '@storybook/react';
+import { FooterNav } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, backgroundColour, colour, hoverColour, hoverBgColour, footerItems, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        title: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        subtitle: {
-            type: {
-                name: string;
-                value: string;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        withAnimation: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: string;
-        };
-        withHoverEffect: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: string;
-        };
-        iconProps: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        large: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-            defaultValue: 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;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            href?: string | undefined;
+            onClick?: any;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Icon: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            icon: import('@fortawesome/fontawesome-svg-core').IconProp | import('@fortawesome/fontawesome-free-solid').IconDefinition;
+        } & import('react').RefAttributes<HTMLDivElement>>;
     };
     args: {
-        backgroundColour: string;
-        colour: string;
-        hoverColour: string;
-        footerItems: {
-            title: string;
-            href: string;
-            iconProps: {
-                icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
-            };
-            onClick: import('@storybook/addon-actions').HandlerFunction;
-        }[];
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,13 +1,15 @@
-import { Colours } from '../../utils/controls';
-import { FooterNavItemProps } from '../FooterNavItem';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/fontawesome-free-solid';
+import { HTMLAttributes } from 'react';
 
-export interface Props {
-    id: string;
-    className?: string;
-    backgroundColour?: Colours;
-    colour?: Colours;
-    hoverColour?: Colours;
-    hoverBgColour?: Colours;
-    footerItems: FooterNavItemProps[];
-}
-export declare const FooterNav: ({ id, className, backgroundColour, colour, hoverColour, hoverBgColour, footerItems, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FooterNav: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        href?: string | undefined;
+        onClick?: any;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Icon: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        icon: IconDefinition | IconProp;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { FooterNav };