trepur_components 2.3.9 → 2.3.10

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

@@ -0,0 +1,76 @@
+import { MenuButton } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, backgroundColour, menuItems, onClick, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        backgroundColour: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: string;
+        };
+        menuItems: {
+            description: string;
+            control: string;
+            table: {
+                type: {
+                    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: {
+        backgroundColour: string;
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+        menuItems: {
+            name: string;
+            href: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof MenuButton>;
+export declare const Default: Story;

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

@@ -0,0 +1,14 @@
+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;

package/lib/components/MenuButton/index.js

@@ -0,0 +1,56 @@
+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(
+    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: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        id: s,
+        className: m,
+        onClick: () => {
+          i(!r);
+        },
+        children: [
+          /* @__PURE__ */ t("div", { className: "mx-auto my-auto", onClick: (n) => e == null ? void 0 : e(n), children: /* @__PURE__ */ o(
+            "svg",
+            {
+              width: "18",
+              height: "24",
+              viewBox: "0 0 24 15",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ t("path", { d: "M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z" }),
+                /* @__PURE__ */ t("path", { d: "M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z" }),
+                /* @__PURE__ */ t("path", { d: "M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            c,
+            {
+              src: "https://picsum.photos/300/300",
+              className: "mx-auto my-auto h-8 w-8 rounded-full object-contain"
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(l, {}) })
+  ] }) : /* @__PURE__ */ t(h, {});
+};
+export {
+  H as MenuButton
+};

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

@@ -0,0 +1,67 @@
+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;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        id: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            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;
+                };
+            };
+        };
+        onOverlayClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+        };
+    };
+    args: {
+        visible: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const _Modal: (args: any) => React.ReactElement;
+export default meta;

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

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

package/lib/components/Modal/index.js

@@ -0,0 +1,45 @@
+import { jsx as a, Fragment as l, jsxs as w } from "react/jsx-runtime";
+import { useState as c, useEffect as k } from "react";
+import u from "classnames";
+const g = ({
+  id: d,
+  className: m,
+  children: o,
+  visible: t = !1,
+  onOverlayClick: f,
+  mobileGutter: p,
+  animationStyle: x = "fade"
+}) => {
+  const [s, r] = c(!t), [i, n] = c(t);
+  k(() => {
+    let e;
+    return t ? (r(!1), e = setTimeout(() => {
+      n(!0);
+    }, 100)) : (n(!1), e = setTimeout(() => {
+      r(!0);
+    }, 300)), () => {
+      clearTimeout(e);
+    };
+  }, [t]);
+  const y = u(
+    {
+      "opacity-100": !s && i
+    },
+    "block h-screen w-screen fixed right-0 top-0 z-50 opacity-0 transition-opacity duration-300 ease-linear ease-out",
+    m
+  ), h = u(
+    {
+      "opacity-100": i,
+      "px-4 md:px-0": p,
+      "transition-transform duration-300 ease-linear ease-out opacity-100 translate-y-full": x === "slideBottom"
+    },
+    " mx-auto flex w-full md:w-auto fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform opacity-0 transition-opacity duration-300 ease-linear ease-out"
+  );
+  return s ? /* @__PURE__ */ a(l, {}) : /* @__PURE__ */ w(l, { children: [
+    /* @__PURE__ */ a("div", { id: d, className: y, onClick: f }),
+    o && /* @__PURE__ */ a("div", { className: h, children: o })
+  ] });
+};
+export {
+  g as Modal
+};

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

@@ -0,0 +1,32 @@
+import { Nav } from '..';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').NavContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            logo: string;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        DesktopHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        LeftSection: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        RightSection: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Logo: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+        Body: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Folder: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            label: string;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        docs: {
+            story: {
+                iframe: string;
+            };
+        };
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Nav>;
+export declare const Default: Story;

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

@@ -0,0 +1,21 @@
+import { ImageProps } from '../Image';
+import { HTMLAttributes } from 'react';
+
+export interface NavContextProps {
+    expanded?: boolean;
+    setExpanded?: (val: boolean) => void;
+}
+declare const Nav: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & NavContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        logo: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    DesktopHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    LeftSection: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    RightSection: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Logo: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+    Body: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Folder: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        label: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Nav };

package/lib/components/Nav/index.js

@@ -0,0 +1,82 @@
+import { jsx as e, jsxs as d, Fragment as y } from "react/jsx-runtime";
+import { createContext as b, forwardRef as n, useState as c, useMemo as w, useContext as m, useRef as C } from "react";
+import { HamburgerIcon as H } from "../HamburgerIcon/index.js";
+import { faChevronDown as L } from "@fortawesome/fontawesome-free-solid";
+import p from "clsx";
+import { Icon as S } from "../Icon/index.js";
+const i = b(null), v = n(({ children: a }, s) => {
+  const [r, t] = c(!1), o = w(
+    () => ({
+      expanded: r,
+      setExpanded: t
+    }),
+    [r, t]
+  );
+  return /* @__PURE__ */ e(i.Provider, { value: o, children: /* @__PURE__ */ e("div", { children: a }) });
+}), N = n(({ children: a, logo: s }, r) => {
+  const { setExpanded: t, expanded: o } = m(i) || {};
+  return /* @__PURE__ */ d("div", { ref: r, className: p("relative h-20 w-full bg-nav px-2 py-2"), children: [
+    /* @__PURE__ */ d("div", { className: "flex h-full md:hidden", children: [
+      /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
+        H,
+        {
+          onClick: () => t == null ? void 0 : t(!o),
+          className: "aspect-square"
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-full w-28 -translate-x-1/2 -translate-y-1/2 transform", children: /* @__PURE__ */ e(l, { src: s }) })
+    ] }),
+    a
+  ] });
+}), f = n(
+  ({ children: a }, s) => {
+    const { expanded: r } = m(i) || {};
+    return r ? /* @__PURE__ */ e("div", { className: "h-screen bg-nav px-8 pb-12 pt-20 md:hidden", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: a }) }) : /* @__PURE__ */ e(y, {});
+  }
+), u = n(({ children: a }, s) => /* @__PURE__ */ e("div", { className: "hidden grid-cols-7 gap-8 md:grid", children: a })), x = n(({ children: a }, s) => /* @__PURE__ */ e("div", { className: "col-span-3 my-4 justify-between text-center md:flex", children: a })), g = n(({ label: a, children: s }) => {
+  const [r, t] = c(!1), o = C(null);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: o,
+      onClick: () => t(!0),
+      onMouseLeave: () => t(!1),
+      className: "mx-auto text-xl font-normal tracking-wider text-white hover:cursor-pointer",
+      children: [
+        /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("p", { children: a }),
+          /* @__PURE__ */ e(S, { icon: L })
+        ] }),
+        r && /* @__PURE__ */ e("div", { className: "mb:pb-2 grid grid-cols-1 bg-nav md:gap-5 md:pt-8", children: s })
+      ]
+    }
+  );
+}), l = n(({ className: a, src: s, ...r }, t) => /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
+  "img",
+  {
+    className: p("rounded-full", a),
+    ref: t,
+    src: s,
+    ...r
+  }
+) })), h = n(({ children: a }, s) => /* @__PURE__ */ e("div", { className: "col-span-3 my-4 justify-between text-center md:flex", children: a }));
+v.displayName = "Nav";
+N.displayName = "Nav.Header";
+u.displayName = "Nav.DesktopHeader";
+l.displayName = "Nav.Logo";
+x.displayName = "Nav.LeftSection";
+h.displayName = "Nav.RightSection";
+f.displayName = "Nav.Body";
+g.displayName = "Nav.Folder";
+const I = Object.assign(v, {
+  Header: N,
+  DesktopHeader: u,
+  LeftSection: x,
+  RightSection: h,
+  Logo: l,
+  Body: f,
+  Folder: g
+});
+export {
+  I as Nav
+};

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

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+import { NavItem } from './';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & {
+        href: string;
+    } & import('react').RefAttributes<HTMLAnchorElement>> & {
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
+    args: {
+        className: string;
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+
+declare const NavItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+} & import('react').RefAttributes<HTMLAnchorElement>> & {
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { NavItem };

package/lib/components/NavItem/index.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import i from "clsx";
+const s = o(({ children: t, className: a, href: e, ...l }, n) => /* @__PURE__ */ r(
+  "a",
+  {
+    href: e,
+    ref: n,
+    className: i(
+      "mx-auto h-8 py-0 text-white after:block after:scale-x-0 after:border-b-4 after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
+      a
+    ),
+    ...l,
+    children: t
+  }
+)), m = o(({ className: t, ...a }, e) => /* @__PURE__ */ r("p", { className: "text-xl font-normal tracking-wider", ref: e, ...a }));
+s.displayName = "NavItem";
+m.displayName = "NavItem.Label";
+const N = Object.assign(s, {
+  Label: m
+});
+export {
+  N as NavItem
+};

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

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react';
+import { Pill } from './';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').PillProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Icon: import('react').ForwardRefExoticComponent<{
+            icon: any;
+        } & import('react').RefAttributes<SVGSVGElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Pill>;
+export declare const Default: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Success: Story;
+export declare const Info: Story;

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+
+export type PickU<T, K extends keyof T> = T extends any ? {
+    [P in K]: T[P];
+} : never;
+export type PillVariant = 'default' | 'warning' | 'error' | 'info' | 'success';
+export interface PillProps {
+    variant?: PillVariant;
+    loading?: boolean;
+}
+declare const Pill: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & PillProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Icon: import('react').ForwardRefExoticComponent<{
+        icon: any;
+    } & import('react').RefAttributes<SVGSVGElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { Pill };

package/lib/components/Pill/index.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import s from "clsx";
+import { Icon as a } from "../Icon/index.js";
+const i = t(({ children: l, variant: e = "default" }, r) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: r,
+    className: s(
+      "inline-grid grid-flow-col items-center gap-1 rounded-full border px-2 py-0.5",
+      {
+        "": e === "default",
+        "border-error-default bg-error-light text-error-default": e === "error",
+        "border-info-default bg-info-light text-info-default": e === "info",
+        "border-success-default bg-success-light text-success-default": e === "success",
+        "border-warning-default bg-warning-light text-warning-default": e === "warning"
+      }
+    ),
+    children: l
+  }
+)), d = t(({ className: l, ...e }, r) => /* @__PURE__ */ o("p", { className: s("text-xs", l), ref: r, ...e })), n = t(({ icon: l }, e) => /* @__PURE__ */ o(a, { size: "xs", ref: e, icon: l }));
+i.displayName = "Pill";
+n.displayName = "Pill.Icon";
+d.displayName = "Chip.Label";
+const m = Object.assign(i, {
+  Icon: n,
+  Label: d
+});
+export {
+  m as Pill
+};

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

@@ -0,0 +1,86 @@
+import { Search } from '.';
+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;
+    parameters: {};
+    argTypes: {
+        leftIconProps: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        rightIconProps: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        placeholder: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        text: {
+            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: {
+        placeholder: string;
+        leftIconProps: {
+            type: string;
+            className: string;
+            bgColour: string;
+        };
+        rightIconProps: {
+            type: string;
+            className: string;
+            bgColour: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Search>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { IconProps } from '../Icon';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    onChange?: (val: string | number) => void;
+    placeholder?: string;
+    text?: string;
+    leftIconProps?: IconProps;
+    rightIconProps?: IconProps;
+}
+export declare const Search: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps, }: Props) => import("react/jsx-runtime").JSX.Element;