trepur_components 2.3.26 → 2.3.28

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,62 +65,15 @@ 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: {
-                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: {
-        type: string;
+        type: "facebook";
         href: string;
         onClick: import('@storybook/addon-actions').HandlerFunction;
     };

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

@@ -1,12 +1,11 @@
-import { SocialTypes } from '../../utils/controls';
 import { default as React } from 'react';
 
 export interface Props {
     id?: string;
     className?: string;
     onClick?: React.MouseEventHandler;
-    type?: SocialTypes;
+    type?: 'facebook' | 'instagram' | 'github' | 'linkedin';
     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;

package/lib/components/SplitCard/index.js

@@ -1,85 +1,85 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createContext as u, forwardRef as d, useMemo as N, useContext as c } from "react";
+import { createContext as u, forwardRef as o, useMemo as N, useContext as c } from "react";
 import h from "../../utils/matchMedia.js";
 import { Screens as y } from "../../utils/screens.js";
-import p from "clsx";
-const a = u(null), x = d(({ id: l, className: e, children: r, swapDesktop: t, swapMobile: i, ...s }, o) => {
+import d from "clsx";
+const a = u(null), x = o(({ className: r, children: l, swapDesktop: t, swapMobile: e, ...i }, s) => {
   const f = `(min-width: ${y.md})`, m = h(f), S = N(
     () => ({
       swapDesktop: t,
-      swapMobile: i,
+      swapMobile: e,
       isMd: m
     }),
-    [t, i, m]
+    [t, e, m]
   );
   return /* @__PURE__ */ n(a.Provider, { value: S, children: /* @__PURE__ */ n(
     "div",
     {
-      ref: o,
-      ...s,
-      className: p("grid grid-cols-1 md:grid-cols-2", e),
-      children: r
+      ref: s,
+      ...i,
+      className: d("grid grid-cols-1 md:grid-cols-2", r),
+      children: l
     }
   ) });
-}), g = d(({ className: l, children: e, ...r }, t) => {
-  const { swapDesktop: i, swapMobile: s, isMd: o } = c(a) || {};
+}), g = o(({ className: r, children: l, ...t }, e) => {
+  const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: t,
-      ...r,
-      className: p(
+      ref: e,
+      ...t,
+      className: d(
         "mx-auto flex items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
           "md:order-last lg:pl-12 lg:pr-20": i,
           "lg:pl-20 lg:pr-12": !i,
-          "order-last": !o && s
+          "order-last": !p && s
         },
-        l
+        r
       ),
-      children: e
+      children: l
     }
   );
-}), C = d(({ className: l, children: e, ...r }, t) => {
-  const { swapDesktop: i, swapMobile: s, isMd: o } = c(a) || {};
+}), C = o(({ className: r, children: l, ...t }, e) => {
+  const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: t,
-      ...r,
-      className: p(
+      ref: e,
+      ...t,
+      className: d(
         "flex h-full items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
           "md:order-first lg:pl-20 lg:pr-12": i,
           "lg:pl-12 lg:pr-20": !i,
-          "order-first": !o && s
+          "order-first": !p && s
         },
-        l
+        r
       ),
-      children: e
+      children: l
     }
   );
-}), M = d(({ className: l, children: e, ...r }, t) => /* @__PURE__ */ n(
+}), M = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n(
   "p",
   {
-    ref: t,
-    className: p(
+    ref: e,
+    className: d(
       "items-center text-6xl font-semibold tracking-wider md:text-4xl lg:text-6xl",
-      l
+      r
     ),
-    ...r,
-    children: e
+    ...t,
+    children: l
   }
-)), v = d(({ className: l, children: e, ...r }, t) => /* @__PURE__ */ n("p", { ref: t, className: p("text-lg", l), ...r, children: e }));
+)), v = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n("p", { ref: e, className: d("text-lg", r), ...t, children: l }));
 x.displayName = "SplitCard";
 g.displayName = "SplitCard.LeftContent";
 C.displayName = "SplitCard.RightContent";
-const k = Object.assign(x, {
+const j = Object.assign(x, {
   LeftContent: g,
   RightContent: C,
   Title: M,
   Text: v
 });
 export {
-  k as SplitCard
+  j as SplitCard
 };

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

@@ -1,8 +1,5 @@
-import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-
 export interface StarProps {
     stars?: 1 | 2 | 3 | 4 | 5;
-    size?: SizeProp;
 }
 declare const Stars: any;
 export { Stars };

package/lib/components/Stars/index.js

@@ -3,20 +3,20 @@ import { forwardRef as c } from "react";
 import { Icon as i } from "../Icon/index.js";
 import { faStar as n } from "@fortawesome/fontawesome-free-solid";
 import f from "clsx";
-const o = c(({ className: s, stars: a = 0, size: p }, e) => {
-  const m = () => [...Array(5)].map((d, r) => /* @__PURE__ */ t(
+const o = c(({ className: a, stars: s = 0 }, e) => {
+  const m = () => [...Array(5)].map((p, r) => /* @__PURE__ */ t(
     i,
     {
-      className: r < a ? "text-star" : "",
+      className: r < s ? "text-star" : "",
       icon: n,
       size: "2x"
     },
     `checked_star_${r}`
   ));
-  return /* @__PURE__ */ t("div", { ref: e, className: f("flex", s), children: m() });
+  return /* @__PURE__ */ t("div", { ref: e, className: f("flex", a), children: m() });
 });
 o.displayName = "Stars";
-const _ = Object.assign(o);
+const N = Object.assign(o);
 export {
-  _ as Stars
+  N as Stars
 };

package/lib/components/Testimonial/index.js

@@ -1,22 +1,38 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { Card as u } from "../Card/index.js";
-import { Image as x } from "../Image/index.js";
+import { Card as x } from "../Card/index.js";
+import { Image as N } from "../Image/index.js";
 import o from "clsx";
-const n = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i(u, { ref: a, className: o("grid gap-4", s), ...t, children: e })), l = m(({ className: s, src: e, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: "mx-auto w-40 ", children: /* @__PURE__ */ i(x, { className: "rounded-full", src: e, ...t }) })), r = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("h3", { ref: a, className: "text-center text-lg font-medium", ...t, children: e })), c = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: o("text-center", s), ...t, children: e })), T = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i(
+const n = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s(x, { ref: a, className: o("grid gap-4", t), ...i, children: e })), l = m(({ className: t, src: e, ...i }, a) => /* @__PURE__ */ s("div", { ref: a, className: o("mx-auto w-40", t), children: /* @__PURE__ */ s(N, { className: "rounded-full", src: e, ...i }) })), r = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s(
+  "h3",
+  {
+    ref: a,
+    className: o("text-center text-lg font-medium", t),
+    ...i,
+    children: e
+  }
+)), c = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s("div", { ref: a, className: o("text-center", t), ...i, children: e })), T = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s(
+  "p",
+  {
+    ref: a,
+    className: o("text-md font-regular text-sm", t),
+    ...i,
+    children: e
+  }
+)), d = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: o("font-regular text-sm", t), ...i, children: e })), p = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s(
   "p",
   {
     ref: a,
-    className: o("text-md font-regular text-sm", s),
-    ...t,
+    className: o("text-md text-center font-light", t),
+    ...i,
     children: e
   }
-)), N = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("p", { ref: a, className: "font-regular text-sm", ...t, children: e })), d = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("p", { className: o("text-md text-center font-light"), ...t, children: e })), p = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i(
+)), u = m(({ className: t, children: e, ...i }, a) => /* @__PURE__ */ s(
   "p",
   {
     ref: a,
-    className: o("text-center text-sm font-medium", s),
-    ...t,
+    className: o("text-center text-sm font-medium", t),
+    ...i,
     children: e
   }
 ));
@@ -25,17 +41,17 @@ l.displayName = "Testimonial.Image";
 r.displayName = "Testimonial.Title";
 c.displayName = "Testimonial.Section";
 T.displayName = "Testimonial.Position";
-N.displayName = "Testimonial.Date";
-d.displayName = "Testimonial.Text";
-p.displayName = "Testimonial.AuthorDetails";
+d.displayName = "Testimonial.Date";
+p.displayName = "Testimonial.Text";
+u.displayName = "Testimonial.AuthorDetails";
 const I = Object.assign(n, {
   Image: l,
   Title: r,
   Section: c,
   Position: T,
-  Date: N,
-  Text: d,
-  AuthorDetails: p
+  Date: d,
+  Text: p,
+  AuthorDetails: u
 });
 export {
   I as Testimonial

package/lib/components/TextArea/index.js

@@ -1,69 +1,69 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
-import { createContext as A, forwardRef as o, useMemo as T, useRef as N, useContext as x } from "react";
-const d = A(null), i = o(({ children: l, errors: e, placeholder: t, ...r }, n) => {
-  const s = T(
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { createContext as A, forwardRef as o, useMemo as T, useRef as N, useContext as d } from "react";
+const s = A(null), x = o(({ children: e, errors: a, placeholder: t, ...l }, n) => {
+  const p = T(
     () => ({
-      errors: e,
+      errors: a,
       placeholder: t,
-      ...r
+      ...l
     }),
-    [e, r]
+    [a, l]
   );
-  return /* @__PURE__ */ a(d.Provider, { value: s, children: /* @__PURE__ */ a("div", { ref: n, children: l }) });
-}), c = o(
-  ({ children: l, ...e }, t) => {
-    const r = N(null);
-    return /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(s.Provider, { value: p, children: /* @__PURE__ */ r("div", { ref: n, children: e }) });
+}), i = o(
+  ({ children: e, ...a }, t) => {
+    const l = N(null);
+    return /* @__PURE__ */ r(
       "div",
       {
         className: "mt-4 w-full",
         onClick: () => {
           var n;
-          return (n = r.current) == null ? void 0 : n.focus();
+          return (n = l.current) == null ? void 0 : n.focus();
         },
         ref: t,
-        ...e,
-        children: l
+        ...a,
+        children: e
       }
     );
   }
-), m = o(({ children: l, required: e = !1 }, t) => /* @__PURE__ */ f("div", { ref: t, className: "font-regular text-md flex rounded-2xl px-1", children: [
-  /* @__PURE__ */ a("p", { children: l }),
-  e && /* @__PURE__ */ a("p", { className: "font-semiBold text-lg", children: " *" })
-] })), u = o(
-  ({ ...l }) => {
-    const { errors: e, placeholder: t } = x(d) || {};
-    return /* @__PURE__ */ a(
+), m = o(({ children: e, required: a = !1 }, t) => /* @__PURE__ */ f("div", { ref: t, className: "font-regular text-md flex rounded-2xl px-1", children: [
+  /* @__PURE__ */ r("p", { children: e }),
+  a && /* @__PURE__ */ r("p", { className: "font-semiBold text-lg", children: " *" })
+] })), c = o(
+  () => {
+    const { placeholder: e } = d(s) || {};
+    return /* @__PURE__ */ r(
       "textarea",
       {
         className: "text-ink text-md w-full rounded-md border border-gray-300  py-2 pl-4",
-        placeholder: t
+        placeholder: e
       }
     );
   }
-), p = o(({ children: l, ...e }, t) => {
-  const { errors: r } = x(d) || {};
-  return /* @__PURE__ */ a(
+), u = o(({ ...e }, a) => {
+  const { errors: t } = d(s) || {};
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: t,
+      ref: a,
       className: "text-md gap-y-2 font-semibold text-error-default",
       ...e,
-      children: r == null ? void 0 : r.map((n, s) => /* @__PURE__ */ a("p", { children: n }, `error-msg-${s + 1}`))
+      children: t == null ? void 0 : t.map((l, n) => /* @__PURE__ */ r("p", { children: l }, `error-msg-${n + 1}`))
     }
   );
 });
-i.displayName = "TextArea";
-c.displayName = "TextArea.Item";
+x.displayName = "TextArea";
+i.displayName = "TextArea.Item";
 m.displayName = "TextArea.Label";
-u.displayName = "TextArea.Box";
-p.displayName = "TextArea.Validation";
-const h = Object.assign(i, {
-  Item: c,
+c.displayName = "TextArea.Box";
+u.displayName = "TextArea.Validation";
+const g = Object.assign(x, {
+  Item: i,
   Label: m,
-  Box: u,
-  Validation: p
+  Box: c,
+  Validation: u
 });
 export {
-  h as TextArea
+  g as TextArea
 };

package/lib/components/index.d.ts

@@ -35,4 +35,4 @@ import { Breadcrumbs } from './Breadcrumbs';
 import { AlertBar } from './AlertBar';
 import { Accordion } from './Accordion';
 
-export { Accordion, AlertBar, Breadcrumbs, Button, CalendarComponent, Card, Checkbox, Carousel, CarouselThumbnail, Collapsible, Counter, DetailUpdater, Dialog, Dropdown, Form, Footer, FooterNav, Greeting, Icon, Image, ImageCard, Input, MenuButton, Modal, Nav, NavItem, Pill, Search, Select, SplitCard, Stars, Testimonial, TextArea, Timeline, Tubestops, Video, };
+export { Accordion, AlertBar, Breadcrumbs, Button, CalendarComponent, Card, Checkbox, Carousel, CarouselThumbnail, Collapsible, Counter, DetailUpdater, Dialog, Dropdown, Form, Footer, FooterNav, Greeting, Icon, Image, ImageCard, Input, MenuButton, Modal, Nav, NavItem, Pill, Search, Select, SplitCard, Stars, Testimonial, TextArea, Timeline, Tubestops, Video };

package/lib/styles/themes/penrithmrt.css

@@ -1,38 +1,38 @@
 body.theme-penrithmrt {
-  --color-primary: #3C2F71;
-  --color-secondary: #E94439;
+  --color-primary: #3c2f71;
+  --color-secondary: #e94439;
   --color-tertiary: #921457;
 
   --color-loading: #a3a3a3;
 
   /* pill */
-  --color-error-default: #b91c1c;
+  --color-error-default: #ffffff;
   --color-warning-default: #a16207;
   --color-success-default: #047857;
   --color-info-default: #0369a1;
 
-  --color-error-light: #fca5a5;
+  --color-error-light: #e94439;
   --color-warning-light: #fde047;
   --color-success-light: #6ee7b7;
   --color-info-light: #7dd3fc;
 
   /* Button */
-  --color-button-primary-active: #3C2F71;
-  --color-button-primary-border: #3C2F71;
-  --color-button-primary-bg: #3C2F71;
+  --color-button-primary-active: #3c2f71;
+  --color-button-primary-border: #3c2f71;
+  --color-button-primary-bg: #3c2f71;
   --color-button-primary-text: #ffffff;
-  --color-button-primary-hover: #3C2F71;
+  --color-button-primary-hover: #3c2f71;
 
   --color-button-secondary-active: #c71f1f;
   --color-button-secondary-border: #c71f1f;
-  --color-button-secondary-bg: #E94439;
+  --color-button-secondary-bg: #e94439;
   --color-button-secondary-text: #ffffff;
   --color-button-secondary-hover: #c71f1f;
 
   --color-button-ghost-active: #242424;
   --color-button-ghost-border: #ffffff00;
   --color-button-ghost-bg: #cbcbcb00;
-  --color-button-ghost-text: #3C2F71;
+  --color-button-ghost-text: #3c2f71;
   --color-button-ghost-hover: #c8c7c7;
 
   --color-button-bordered-active: #242424;
@@ -44,9 +44,16 @@ body.theme-penrithmrt {
   --color-button-basic-active: #acacac;
   --color-button-basic-border: #ffffff;
   --color-button-basic-bg: #ffffff;
-  --color-button-basic-text: #3C2F71;
+  --color-button-basic-text: #3c2f71;
   --color-button-basic-hover: #cecece;
 
+  /* Carousel */
+  --color-carousel-arrow-default: '#3c2f71';
+  --color-carousel-arrow-hover: '#e94439';
+  --color-carousel-dots-default: '#3c2f71';
+  --color-carousel-dots-active: '#e94439';
+  --color-carousel-dots-hover: '#e94439';
+  
   /* Footer */
   --color-footer-bg: #1b54c6;
   --color-footer-text: #ffffff;
@@ -64,15 +71,8 @@ body.theme-penrithmrt {
   --color-tubestop-text-complete: #c9c8c8;
   --color-tubestop-text-future: #5b5b5b;
 
-  /* Carousel */
-  --color-carousel-dots-active: #1a1dd9;
-  --color-carousel-dots-default: #2c2525;
-  --color-carousel-dots-hover: #1a1dd9;
-  --color-carousel-arrow-default: #31a3dd;
-  --color-carousel-arrow-hover: #ae127a;
-
   /* Nav */
   --color-nav-bg: #f3f4f6;
   --color-nav-shadow-bg: #d1d5db;
-  --color-nav-text: #3C2F71;
+  --color-nav-text: #3c2f71;
 }

package/lib/tailwind/boxShadow.ts

@@ -5,5 +5,5 @@ export default {
   DEFAULT: 'var(--shadow)',
   md: 'var(--shadow-md)',
   lg: 'var(--shadow-lg)',
-  xl: 'var(--shadow-xl)',
+  xl: 'var(--shadow-xl)'
 };