trepur_components 2.3.8 → 2.3.10

package/lib/components/FooterNav/index.js

@@ -1,28 +1,38 @@
-import { jsx as i } from "react/jsx-runtime";
-import { FooterNavItem as e } from "../FooterNavItem/index.js";
-import d from "classnames";
-const t = ({
-  id: c,
-  className: l,
-  backgroundColour: s = "white",
-  colour: a = "black",
-  hoverColour: n = "black",
-  hoverBgColour: p = "black",
-  footerItems: o
-}) => {
-  const b = d(
-    l,
-    "fixed bottom-0 flex w-full justify-between px-4 border-t border-lightest-grey"
-  );
-  return /* @__PURE__ */ i("div", { id: c, className: b, children: o == null ? void 0 : o.map((r, u) => (r.iconProps.colour = a, r.iconProps.hoverColour = n, r.iconProps.hoverBgColour = p, r.iconProps.size = 2, /* @__PURE__ */ i(
-    e,
-    {
-      ...r,
-      backgroundColour: s
-    },
-    u
-  ))) });
-};
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import n from "clsx";
+import { Icon as p } from "../Icon/index.js";
+const l = s(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: n(
+      "border-lightest-grey fixed bottom-0 flex w-full justify-between border-t px-4",
+      t
+    ),
+    ref: a,
+    ...e,
+    children: o
+  }
+)), m = s(({ className: t, children: o, href: e, onClick: a, ...N }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: n(
+      "group w-full cursor-pointer py-2 text-center transition-all duration-500",
+      t
+    ),
+    ...N,
+    children: /* @__PURE__ */ r("a", { href: e, onClick: a, children: o })
+  }
+)), i = s(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ r("p", { className: (n("font-regular pt-0.5 text-xs"), t), ...e, children: o })), c = s(({ className: t, icon: o, ...e }) => /* @__PURE__ */ r(p, { icon: o, ...e }));
+l.displayName = "FooterNav";
+m.displayName = "FooterNav.Item";
+c.displayName = "FooterNav.Icon";
+i.displayName = "FooterNav.Label";
+const x = Object.assign(l, {
+  Item: m,
+  Label: i,
+  Icon: c
+});
 export {
-  t as FooterNav
+  x as FooterNav
 };

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

@@ -1,12 +1,12 @@
-import { Props as inputProps } from '../Input';
-import { Props as buttonProps } from '../Button';
+import { InputContextProps } from '../Input';
+import { ButtonProps } from '../Button';
 
 export interface Props {
     id?: string;
     className?: string;
     onSubmit?: () => void;
     ref?: string;
-    components?: Array<inputProps & buttonProps & {
+    components?: Array<InputContextProps & ButtonProps & {
         htmlType: string;
     }>;
 }

package/lib/components/Form/index.js

@@ -1,28 +1,17 @@
 import { jsx as l, Fragment as y } from "react/jsx-runtime";
-import { Button as N } from "../Button/index.js";
-import { Container as b } from "../Container/index.js";
+import { Button as u } from "../Button/index.js";
 import { Input as C } from "../Input/index.js";
-import s from "classnames";
-const I = ({ id: u, className: h, onSubmit: d, ref: f, components: a }) => /* @__PURE__ */ l(b, { withPadding: !0, children: /* @__PURE__ */ l("form", { id: u, ref: f, className: h, onSubmit: d, children: a == null ? void 0 : a.map((r, i) => (r == null ? void 0 : r.htmlType) === "Input" ? /* @__PURE__ */ l(
+import { Card as k } from "../Card/index.js";
+const T = ({ id: f, className: h, onSubmit: d, ref: b, components: i }) => /* @__PURE__ */ l(k, { children: /* @__PURE__ */ l("form", { id: f, ref: b, className: h, onSubmit: d, children: i == null ? void 0 : i.map((r, a) => (r == null ? void 0 : r.htmlType) === "Input" ? /* @__PURE__ */ l(
   C,
   {
-    className: s(r == null ? void 0 : r.className),
     label: r == null ? void 0 : r.label,
     placeholder: r == null ? void 0 : r.placeholder,
     type: r == null ? void 0 : r.type,
     name: r == null ? void 0 : r.name
   },
-  `input_${i + 0}`
-) : r.htmlType === "Button" ? /* @__PURE__ */ l(
-  N,
-  {
-    type: r == null ? void 0 : r.type,
-    onClick: r == null ? void 0 : r.onClick,
-    className: s(r == null ? void 0 : r.className),
-    children: r == null ? void 0 : r.children
-  },
-  `button_${i + 0}`
-) : /* @__PURE__ */ l(y, {})) }) });
+  `input_${a + 0}`
+) : r.htmlType === "Button" ? /* @__PURE__ */ l(u, { onClick: r == null ? void 0 : r.onClick, children: /* @__PURE__ */ l(u.Label, {}) }, `button_${a + 0}`) : /* @__PURE__ */ l(y, {})) }) });
 export {
-  I as Form
+  T as Form
 };

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

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

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

@@ -0,0 +1,7 @@
+import { ImageProps } from '../Image';
+import { HTMLAttributes } from 'react';
+
+declare const Gallery: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ImageProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Gallery };

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

@@ -1,79 +1,9 @@
-import { Greeting } from '.';
 import { StoryObj } from '@storybook/react';
+import { Greeting } from './';
 
 declare const meta: {
     title: string;
-    component: ({ morningMessage, afternoonMessage, eveningMessage, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        morningMessage: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        afternoonMessage: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        eveningMessage: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: 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;
-                };
-            };
-        };
-    };
+    component: any;
     args: {
         morningMessage: string;
     };

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

@@ -1,8 +1,7 @@
-export interface Props {
-    id?: string;
-    className?: string;
+export interface GreetingProps {
     morningMessage?: string;
     afternoonMessage?: string;
     eveningMessage?: string;
 }
-export declare const Greeting: ({ morningMessage, afternoonMessage, eveningMessage, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Greeting: any;
+export { Greeting };

package/lib/components/Greeting/index.js

@@ -1,13 +1,20 @@
-import { jsx as d } from "react/jsx-runtime";
-const m = ({
-  morningMessage: n = "Good morning",
-  afternoonMessage: s = "Good afternoon",
-  eveningMessage: i = "Good evening"
-}) => {
-  const o = /* @__PURE__ */ new Date(), r = `0${o.getHours().toString()}`.slice(-2), c = `0${o.getMinutes().toString()}`.slice(-2), g = `0${o.getSeconds().toString()}`.slice(-2), e = parseInt(`${r}${c}${g}`);
-  let t = "";
-  return e < 12e4 ? t = n : e > 115959 && e < 17e4 ? t = s : e > 165959 && (t = i), /* @__PURE__ */ d("p", { children: t });
-};
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { DateTime as n } from "luxon";
+const r = g(
+  ({
+    morningMessage: s = "Good morning",
+    afternoonMessage: m = "Good afternoon",
+    eveningMessage: d = "Good evening",
+    ...c
+  }, f) => {
+    const e = n.now(), t = n.now().set({ hour: 12, minute: 0, second: 0 }), i = n.now().set({ hour: 17, minute: 0, second: 0 });
+    let o = "";
+    return e < t ? o = s : e >= t && e < i ? o = m : e >= i && (o = d), /* @__PURE__ */ a("p", { ...c, ref: f, children: o });
+  }
+);
+r.displayName = "Greeting";
+const u = Object.assign(r);
 export {
-  m as Greeting
+  u as Greeting
 };

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

@@ -3,61 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, onClick, variant, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-        layout: string;
-    };
-    argTypes: {
-        onClick: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: 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;
-                };
-            };
-        };
-    };
+    component: any;
 };
 export default meta;
 type Story = StoryObj<typeof HamburgerIcon>;

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

@@ -1,7 +1,2 @@
-import { default as React } from 'react';
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-    onClick?: React.MouseEventHandler;
-    variant?: 'primary' | 'secondary' | 'tertiary';
-}
-export declare const HamburgerIcon: ({ id, className, onClick, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HamburgerIcon: any;
+export { HamburgerIcon };

package/lib/components/HamburgerIcon/index.js

@@ -1,60 +1,30 @@
-import { jsx as r, jsxs as y } from "react/jsx-runtime";
-import { useState as u } from "react";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as d, useState as f } from "react";
 import { Button as g } from "../Button/index.js";
-import e from "classnames";
-const b = ({
-  id: s,
-  className: n,
-  onClick: a,
-  variant: t = "primary"
-}) => {
-  const [o, l] = u(!1), m = e(
-    {
-      "transition-all duration-500 outline-none fill-primary": t === "secondary",
-      "transition-all duration-500 outline-none fill-secondary": t === "primary",
-      "transition-all duration-500 outline-none fill-tertiary": t === "tertiary"
-    },
-    n
-  ), p = e(
-    {
-      "origin-top-left -translate-y-0.5 translate-x-1 rotate-45": o
-    },
-    "origin-top-left duration-200 ease-linear transition-transform"
-  ), c = e(
-    {
-      "opacity-0": o,
-      "opacity-100": !o
-    },
-    "duration-200 ease-linear transition-opacity"
-  ), d = e(
-    {
-      "origin-bottom-left translate-x-1 translate-y-px -rotate-45": o
-    },
-    "origin-bottom-left duration-200 ease-linear transition-transform"
-  ), f = (i) => {
-    l(!o), a == null || a(i);
+import o from "clsx";
+const n = d(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
+  const [t, m] = f(!1), p = (s) => {
+    m(!t), a == null || a(s);
   };
   return /* @__PURE__ */ r(
     g,
     {
-      id: s,
-      className: m,
-      onClick: (i) => {
-        f(i);
+      className: o("stroke-white", i),
+      ref: l,
+      onClick: (s) => {
+        p(s);
       },
-      variant: t,
-      type: "icon",
-      label: "Mobile menu toggle",
-      children: /* @__PURE__ */ y(
+      variant: e,
+      children: /* @__PURE__ */ c(
         "svg",
         {
-          className: e(
+          className: o(
+            "transition-backgroundColor mx-auto transform overflow-visible duration-500",
             {
-              "fill-primary": t === "primary",
-              "fill-secondary": t === "secondary",
-              "fill-tertiary": t === "tertiary"
-            },
-            "transition-backgroundColor mx-auto transform overflow-visible duration-500"
+              "fill-button-primary-text": e === "primary",
+              "fill-button-secondary-text": e === "secondary",
+              "fill-button-ghost-text": e === "ghost"
+            }
           ),
           width: "24",
           height: "24",
@@ -64,21 +34,34 @@ const b = ({
             /* @__PURE__ */ r(
               "path",
               {
-                className: p,
+                className: o(
+                  "origin-top-left transition-transform duration-200 ease-linear",
+                  {
+                    "origin-top-left -translate-y-0.5 translate-x-1 rotate-45": t
+                  }
+                ),
                 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__ */ r(
               "path",
               {
-                className: c,
+                className: o("transition-opacity duration-200 ease-linear", {
+                  "opacity-0": t,
+                  "opacity-100": !t
+                }),
                 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__ */ r(
               "path",
               {
-                className: d,
+                className: o(
+                  "origin-bottom-left transition-transform duration-200 ease-linear",
+                  {
+                    "origin-bottom-left translate-x-1 translate-y-px -rotate-45": t
+                  }
+                ),
                 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"
               }
             )
@@ -87,7 +70,9 @@ const b = ({
       )
     }
   );
-};
+});
+n.displayName = "HamburgerIcon";
+const C = Object.assign(n);
 export {
-  b as HamburgerIcon
+  C as HamburgerIcon
 };

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

@@ -1,43 +1,9 @@
-import { Icon } from '.';
 import { StoryObj } from '@storybook/react';
+import { Icon } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, icon, colour, size, onClick }: import('.').IconProps) => 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;
-                };
-            };
-        };
-    };
+    component: any;
     args: {
         icon: import('@fortawesome/fontawesome-free-solid').IconDefinition;
     };
@@ -45,3 +11,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Icon>;
 export declare const Default: Story;
+export declare const Colour: Story;
+export declare const Size: Story;
+export declare const Annimation: Story;

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

@@ -1,10 +1,10 @@
 import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/fontawesome-free-solid';
 
 export interface IconProps {
-    id?: string;
-    icon: IconProp;
-    colour?: string;
-    size?: SizeProp;
-    onClick?: () => void;
+    className?: string;
+    icon: IconProp | IconDefinition;
+    size: SizeProp;
 }
-export declare const Icon: ({ id, icon, colour, size, onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const Icon: any;
+export { Icon };

package/lib/components/Icon/index.js

@@ -1,15 +1,23 @@
-import { jsx as c } from "react/jsx-runtime";
-import { FontAwesomeIcon as e } from "@fortawesome/react-fontawesome";
-const x = ({ id: o, icon: r, colour: t, size: m = "1x", onClick: n }) => /* @__PURE__ */ c(
-  e,
-  {
-    onClick: n,
-    id: o,
-    icon: r,
-    size: m,
-    color: t
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
+const o = i(
+  (n, r) => {
+    const { className: s, size: t, icon: e, ...c } = n;
+    return /* @__PURE__ */ m(
+      a,
+      {
+        className: s,
+        ref: r,
+        icon: e,
+        size: t,
+        ...c
+      }
+    );
   }
 );
+o.displayName = "Icon";
+const d = Object.assign(o);
 export {
-  x as Icon
+  d as Icon
 };