trepur_components 2.3.25 → 2.3.27

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

@@ -1,14 +1,12 @@
-import { Colours } from '../../utils/controls';
 import { default as React } from 'react';
 
 export interface Props {
     id?: string;
     className?: string;
-    backgroundColour?: Colours;
     menuItems: Array<{
         name: string;
         href: string;
     }>;
     onClick?: React.MouseEventHandler;
 }
-export declare const MenuButton: ({ id, className, backgroundColour, menuItems, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: ({ id, className, menuItems, onClick }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/MenuButton/index.js

@@ -1,27 +1,21 @@
 import { jsx as t, Fragment as h, jsxs as o } from "react/jsx-runtime";
 import { useState as u } from "react";
 import { Dropdown as l } from "../Dropdown/index.js";
-import { Image as c } from "../Image/index.js";
-import p from "classnames";
-const H = ({
-  id: s,
-  className: d,
-  backgroundColour: w = "white",
-  menuItems: a,
-  onClick: e
-}) => {
-  const [r, i] = u(!1), m = p(
+import { Image as p } from "../Image/index.js";
+import c from "classnames";
+const g = ({ id: s, className: d, menuItems: m, onClick: e }) => {
+  const [r, a] = u(!1), i = c(
     d,
     "h-[45px] w-[80px] overflow-hidden rounded-full border-2 border-lightest-grey my-auto flex cursor-pointer justify-between pl-2 text-center hover:shadow-md"
   );
-  return a ? /* @__PURE__ */ o("div", { children: [
+  return m ? /* @__PURE__ */ o("div", { children: [
     /* @__PURE__ */ o(
       "div",
       {
         id: s,
-        className: m,
+        className: i,
         onClick: () => {
-          i(!r);
+          a(!r);
         },
         children: [
           /* @__PURE__ */ t("div", { className: "mx-auto my-auto", onClick: (n) => e == null ? void 0 : e(n), children: /* @__PURE__ */ o(
@@ -39,7 +33,7 @@ const H = ({
             }
           ) }),
           /* @__PURE__ */ t(
-            c,
+            p,
             {
               src: "https://picsum.photos/300/300",
               className: "mx-auto my-auto h-8 w-8 rounded-full object-contain"
@@ -52,5 +46,5 @@ const H = ({
   ] }) : /* @__PURE__ */ t(h, {});
 };
 export {
-  H as MenuButton
+  g as MenuButton
 };

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, children, visible, onOverlayClick, mobileGutter, animationStyle, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, children, visible, onOverlayClick, mobileGutter, animationStyle }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         docs: {
             description: {

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

@@ -7,4 +7,4 @@ export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
     mobileGutter?: boolean;
     animationStyle?: 'fade' | 'slideBottom';
 }
-export declare const Modal: ({ id, className, children, visible, onOverlayClick, mobileGutter, animationStyle, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ id, className, children, visible, onOverlayClick, mobileGutter, animationStyle }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Nav/index.js

@@ -1,135 +1,139 @@
-import { jsx as e, jsxs as c, Fragment as v } from "react/jsx-runtime";
-import { createContext as C, forwardRef as n, useState as N, useMemo as k, useContext as m, useRef as w } from "react";
+import { jsx as e, jsxs as p, Fragment as H } from "react/jsx-runtime";
+import { createContext as C, forwardRef as l, useState as v, useMemo as k, useContext as c, useRef as w } from "react";
 import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
 import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
-import l from "clsx";
+import d from "clsx";
 import { Icon as D } from "../Icon/index.js";
 import { NavItem as F } from "../NavItem/index.js";
-const i = C(null), f = n(({ className: a, children: t, loading: r }, o) => {
-  const [s, d] = N(!1), p = k(
+const i = C(null), N = l(({ className: t, children: r, loading: a }, s) => {
+  const [o, n] = v(!1), m = k(
     () => ({
-      expanded: s,
-      setExpanded: d,
-      loading: r
+      expanded: o,
+      setExpanded: n,
+      loading: a
     }),
-    [s, d]
+    [o, n, a]
   );
-  return /* @__PURE__ */ e(i.Provider, { value: p, children: /* @__PURE__ */ e("div", { className: a, ref: o, children: t }) });
-}), g = n(
-  ({ className: a, children: t }, r) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(i.Provider, { value: m, children: /* @__PURE__ */ e("div", { className: t, ref: s, children: r }) });
+}), f = l(
+  ({ className: t, children: r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: r,
-      className: l("relative h-24 w-full bg-nav-bg px-2 py-2", a),
-      children: t
+      ref: a,
+      className: d("relative h-24 w-full bg-nav-bg px-2 py-2", t),
+      children: r
     }
   )
-), u = n(({ className: a, children: t }, r) => {
-  const { loading: o, setExpanded: s, expanded: d } = m(i) || {};
-  return /* @__PURE__ */ c("div", { ref: r, className: l("flex h-full md:hidden", a), children: [
-    !o && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
+), g = l(({ className: t, children: r }, a) => {
+  const { loading: s, setExpanded: o, expanded: n } = c(i) || {};
+  return /* @__PURE__ */ p("div", { ref: a, className: d("flex h-full md:hidden", t), children: [
+    !s && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
       M,
       {
         variant: "ghost",
-        onClick: () => s == null ? void 0 : s(!d),
+        onClick: () => o == null ? void 0 : o(!n),
         className: "aspect-square"
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: t })
+    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: r })
   ] });
-}), x = n(({ className: a, children: t }, r) => /* @__PURE__ */ e(
+}), u = l(({ className: t, children: r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: r,
-    className: l(
+    ref: a,
+    className: d(
       "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
-      a
+      t
     ),
-    children: t
+    children: r
   }
-)), h = n(
-  ({ className: a, children: t }, r) => {
-    const { expanded: o } = m(i) || {};
-    return o ? /* @__PURE__ */ e(
+)), x = l(
+  ({ className: t, children: r }, a) => {
+    const { expanded: s } = c(i) || {};
+    return s ? /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
-        className: l(
+        ref: a,
+        className: d(
           "h-screen bg-nav-bg px-8 pb-12 pt-2 md:hidden",
-          a
+          t
         ),
-        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: t })
+        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: r })
       }
-    ) : /* @__PURE__ */ e(v, {});
+    ) : /* @__PURE__ */ e(H, {});
   }
-), b = n(
-  ({ className: a, children: t }, r) => {
-    const { loading: o } = m(i) || {};
-    return /* @__PURE__ */ e(
+), h = l(
+  ({ className: t, children: r }, a) => {
+    const { loading: s } = c(i) || {};
+    return s ? /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
-        className: l("my-4 md:flex md:gap-4 lg:gap-6", a),
-        children: /* @__PURE__ */ c(v, { children: [
-          o && [...Array(5)].map((s) => /* @__PURE__ */ e(F, { loading: !0 })),
-          !o && t
-        ] })
+        ref: a,
+        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
+        children: [...Array(5)].map((o, n) => /* @__PURE__ */ e(F, { loading: !0 }, n))
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
+        children: r
       }
     );
   }
-), y = n(({ className: a, label: t, children: r, active: o = !1 }) => {
-  const [s, d] = N(!1), p = w(null);
-  return /* @__PURE__ */ c(
+), b = l(({ className: t, label: r, children: a, active: s = !1 }) => {
+  const [o, n] = v(!1), m = w(null);
+  return /* @__PURE__ */ p(
     "div",
     {
-      ref: p,
-      onClick: () => d(!0),
-      onMouseLeave: () => d(!1),
-      className: l(
+      ref: m,
+      onClick: () => n(!0),
+      onMouseLeave: () => n(!1),
+      className: d(
         "relative m-auto py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
         {
-          "font-bold": o,
-          "font-light": !o
+          "font-bold": s,
+          "font-light": !s
         },
-        a
+        t
       ),
       children: [
-        /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ e("p", { className: "text-lg", children: t }),
+        /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-lg", children: r }),
           /* @__PURE__ */ e(D, { size: "xs", icon: j })
         ] }),
-        s && /* @__PURE__ */ e("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: r }) })
+        o && /* @__PURE__ */ e("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: a }) })
       ]
     }
   );
-}), H = n(({ className: a, src: t, ...r }, o) => {
-  const { loading: s } = m(i) || {};
-  return s ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
+}), y = l(({ className: t, src: r, ...a }, s) => {
+  const { loading: o } = c(i) || {};
+  return o ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
     "img",
     {
-      className: l("h-20 flex-none", a),
-      ref: o,
-      src: t,
-      ...r
+      className: d("h-20 flex-none", t),
+      ref: s,
+      src: r,
+      ...a
     }
   );
 });
-f.displayName = "Nav";
-g.displayName = "Nav.Header";
-x.displayName = "Nav.DesktopHeader";
-u.displayName = "Nav.MobileHeader";
-H.displayName = "Nav.Logo";
-b.displayName = "Nav.Section";
-h.displayName = "Nav.Body";
-y.displayName = "Nav.Folder";
-const A = Object.assign(f, {
-  Header: g,
-  DesktopHeader: x,
-  MobileHeader: u,
-  Section: b,
-  Logo: H,
-  Body: h,
-  Folder: y
+N.displayName = "Nav";
+f.displayName = "Nav.Header";
+u.displayName = "Nav.DesktopHeader";
+g.displayName = "Nav.MobileHeader";
+y.displayName = "Nav.Logo";
+h.displayName = "Nav.Section";
+x.displayName = "Nav.Body";
+b.displayName = "Nav.Folder";
+const A = Object.assign(N, {
+  Header: f,
+  DesktopHeader: u,
+  MobileHeader: g,
+  Section: h,
+  Logo: y,
+  Body: x,
+  Folder: b
 });
 export {
   A as Nav

package/lib/components/NavItem/index.js

@@ -1,28 +1,35 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
-import c from "clsx";
-const s = o(({ loading: r = !1, active: e, children: t, className: n, href: m, ...f }, i) => r ? /* @__PURE__ */ a("div", { className: "m-auto", children: /* @__PURE__ */ a("div", { className: "h-7 w-20 animate-pulse rounded-md bg-gray-300" }) }) : /* @__PURE__ */ a(
+import n from "clsx";
+const l = o(({ loading: t = !1, active: e, children: r, className: m, href: f, ...i }, c) => t ? /* @__PURE__ */ a("div", { className: "m-auto", children: /* @__PURE__ */ a("div", { className: "h-7 w-20 animate-pulse rounded-md bg-gray-300" }) }) : /* @__PURE__ */ a(
   "a",
   {
-    href: m,
-    ref: i,
-    className: c(
+    href: f,
+    ref: c,
+    className: n(
       "m-auto inline-block py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
       {
         "font-bold": e,
         "font-light": !e
       },
-      n
+      m
     ),
-    ...f,
-    children: t
+    ...i,
+    children: r
   }
-)), l = o(({ className: r, ...e }, t) => /* @__PURE__ */ a("p", { className: "flex-none text-nowrap text-lg", ref: t, ...e }));
-s.displayName = "NavItem";
-l.displayName = "NavItem.Label";
-const b = Object.assign(s, {
-  Label: l
+)), s = o(({ className: t, ...e }, r) => /* @__PURE__ */ a(
+  "p",
+  {
+    className: n("flex-none text-nowrap text-lg", t),
+    ref: r,
+    ...e
+  }
+));
+l.displayName = "NavItem";
+s.displayName = "NavItem.Label";
+const x = Object.assign(l, {
+  Label: s
 });
 export {
-  b as NavItem
+  x as NavItem
 };

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     argTypes: {
         leftIconProps: {
@@ -69,16 +69,6 @@ declare const meta: {
     };
     args: {
         placeholder: string;
-        leftIconProps: {
-            type: string;
-            className: string;
-            bgColour: string;
-        };
-        rightIconProps: {
-            type: string;
-            className: string;
-            bgColour: string;
-        };
     };
 };
 export default meta;

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

@@ -9,4 +9,4 @@ export interface Props {
     leftIconProps?: IconProps;
     rightIconProps?: IconProps;
 }
-export declare const Search: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { Select } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, options, value, label, onClick, required, fullWidth, }: import('./').SelectProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, options, value, label, onClick, required, fullWidth }: import('./').SelectProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     argTypes: {
         label: {

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

@@ -8,4 +8,4 @@ export interface SelectProps {
     fullWidth?: boolean;
     required?: boolean;
 }
-export declare const Select: ({ id, className, options, value, label, onClick, required, fullWidth, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ id, className, options, value, label, onClick, required, fullWidth }: SelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, title, subTitle, description, bgColour, size, iconProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, subTitle, description, size, iconProps }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
         id: {
             description: string;
@@ -42,12 +42,8 @@ declare const meta: {
         title: string;
         subTitle: string;
         description: string;
-        bgColour: string;
-        size: string;
-        iconProps: {
-            icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
-            onClick: import('@storybook/addon-actions').HandlerFunction;
-        };
+        bgColour: "white";
+        size: "large";
     };
 };
 export default meta;

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

@@ -12,4 +12,4 @@ export interface Props {
     size?: 'small' | 'medium' | 'large';
     iconProps?: IconProps;
 }
-export declare const Showcase: ({ id, className, title, subTitle, description, bgColour, size, iconProps, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Showcase: ({ title, subTitle, description, size, iconProps }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, children, bgColour, showNav, leftExpand, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, children, showNav, leftExpand }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         backgrounds: {
             default: string;
@@ -14,18 +14,10 @@ declare const meta: {
         };
     };
     argTypes: {
-        navLinks: {
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
         bgColour: {
             type: {
-                name: string;
-                required: boolean;
+                name: "string";
+                required: false;
             };
             options: string[];
             description: string;
@@ -72,7 +64,7 @@ declare const meta: {
     };
     args: {
         children: import("react/jsx-runtime").JSX.Element;
-        showNav: boolean;
+        showNav: true;
     };
 };
 export default meta;

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

@@ -3,10 +3,10 @@ import { Colours } from '../../utils/controls';
 export interface Props {
     id: string;
     className: string;
-    children: any;
+    children: React.ReactNode;
     getNavStatus: (asSideBar: boolean, open: boolean) => void;
     bgColour?: Colours;
     showNav?: boolean;
     leftExpand?: boolean;
 }
-export declare const SideNav: ({ id, className, children, bgColour, showNav, leftExpand, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNav: ({ id, className, children, showNav, leftExpand }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, onClick, type, href, openInNewTab, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, onClick, type, href, openInNewTab }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -14,8 +14,8 @@ declare const meta: {
     argTypes: {
         onClick: {
             type: {
-                name: string;
-                required: boolean;
+                name: "function";
+                required: false;
             };
             description: string;
             action: string;
@@ -30,8 +30,8 @@ declare const meta: {
         };
         type: {
             type: {
-                name: string;
-                required: boolean;
+                name: "string";
+                required: false;
             };
             options: string[];
             description: string;
@@ -50,8 +50,8 @@ declare const meta: {
         };
         href: {
             type: {
-                name: string;
-                required: boolean;
+                name: "string";
+                required: false;
             };
             description: string;
             table: {
@@ -65,27 +65,12 @@ declare const meta: {
         };
         openInNewTab: {
             type: {
-                name: string;
-                required: boolean;
+                name: "boolean";
+                required: false;
             };
             description: string;
             defaultValue: string;
         };
-        children: {
-            type: {
-                name: string;
-                value: string;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
         id: {
             description: string;
             control: {
@@ -120,7 +105,7 @@ declare const meta: {
         };
     };
     args: {
-        type: string;
+        type: "facebook";
         href: string;
         onClick: import('@storybook/addon-actions').HandlerFunction;
     };

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

@@ -9,4 +9,4 @@ export interface Props {
     href?: string;
     openInNewTab?: boolean;
 }
-export declare const SocialButton: ({ id, className, onClick, type, href, openInNewTab, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SocialButton: ({ id, className, onClick, type, href, openInNewTab }: Props) => import("react/jsx-runtime").JSX.Element;