trepur_components 2.3.25 → 2.3.27

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,7 +44,7 @@ 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;
 
   /* Footer */
@@ -74,5 +74,5 @@ body.theme-penrithmrt {
   /* 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)'
 };

package/lib/tailwind/colors.ts

@@ -8,29 +8,29 @@ export default {
     bg: 'var(--color-nav-bg)',
     text: 'var(--color-nav-text)',
     shadow: {
-      bg: 'var(--color-nav-shadow-bg)',
+      bg: 'var(--color-nav-shadow-bg)'
     }
   },
   loading: 'var(--color-loading)',
   footer: {
     bg: 'var(--color-footer-bg)',
-    text: 'var(--color-footer-text)',
+    text: 'var(--color-footer-text)'
   },
   error: {
     default: 'var(--color-error-default)',
-    light: 'var(--color-error-light)',
+    light: 'var(--color-error-light)'
   },
   warning: {
     default: 'var(--color-warning-default)',
-    light: 'var(--color-warning-light)',
+    light: 'var(--color-warning-light)'
   },
   info: {
     default: 'var(--color-info-default)',
-    light: 'var(--color-info-light)',
+    light: 'var(--color-info-light)'
   },
   success: {
     default: 'var(--color-success-default)',
-    light: 'var(--color-success-light)',
+    light: 'var(--color-success-light)'
   },
   button: {
     primary: {
@@ -38,62 +38,62 @@ export default {
       border: 'var(--color-button-primary-border)',
       bg: 'var(--color-button-primary-bg)',
       text: 'var(--color-button-primary-text)',
-      hover: 'var(--color-button-primary-hover)',
+      hover: 'var(--color-button-primary-hover)'
     },
     secondary: {
       active: 'var(--color-button-secondary-active)',
       border: 'var(--color-button-secondary-border)',
       bg: 'var(--color-button-secondary-bg)',
       text: 'var(--color-button-secondary-text)',
-      hover: 'var(--color-button-secondary-hover)',
+      hover: 'var(--color-button-secondary-hover)'
     },
     ghost: {
       active: 'var(--color-button-ghost-active)',
       border: 'var(--color-button-ghost-border)',
       bg: 'var(--color-button-ghost-bg)',
       text: 'var(--color-button-ghost-text)',
-      hover: 'var(--color-button-ghost-hover)',
+      hover: 'var(--color-button-ghost-hover)'
     },
     bordered: {
       active: 'var(--color-button-bordered-active)',
       border: 'var(--color-button-bordered-border)',
       bg: 'var(--color-button-bordered-bg)',
       text: 'var(--color-button-bordered-text)',
-      hover: 'var(--color-button-bordered-hover)',
+      hover: 'var(--color-button-bordered-hover)'
     },
     basic: {
       active: 'var(--color-button-basic-active)',
       border: 'var(--color-button-basic-border)',
       bg: 'var(--color-button-basic-bg)',
       text: 'var(--color-button-basic-text)',
-      hover: 'var(--color-button-basic-hover)',
-    },
+      hover: 'var(--color-button-basic-hover)'
+    }
   },
   tubestop: {
     station: {
       active: 'var(--color-tubestop-station-active)',
       complete: 'var(--color-tubestop-station-complete)',
-      future: 'var(--color-tubestop-station-future)',
+      future: 'var(--color-tubestop-station-future)'
     },
     line: {
       complete: 'var(--color-tubestop-line-complete)',
-      future: 'var(--color-tubestop-line-future)',
+      future: 'var(--color-tubestop-line-future)'
     },
     text: {
       active: 'var(--color-tubestop-text-active)',
       complete: 'var(--color-tubestop-text-complete)',
-      future: 'var(--color-tubestop-text-future)',
-    },
+      future: 'var(--color-tubestop-text-future)'
+    }
   },
   carousel: {
     arrow: {
       default: 'var(--color-carousel-arrow-default)',
-      hover: 'var(--color-carousel-arrow-hover)',
+      hover: 'var(--color-carousel-arrow-hover)'
     },
     dots: {
       default: 'var(--color-carousel-dots-inactive)',
       active: 'var(--color-carousel-dots-active)',
-      hover: 'var(--color-carousel-dots-hover)',
-    },
-  },
+      hover: 'var(--color-carousel-dots-hover)'
+    }
+  }
 };

package/lib/tailwind/container.ts

@@ -6,6 +6,6 @@ export default {
     sm: '1.5rem',
     lg: '1.5rem',
     xl: '1.5rem',
-    '2xl': '1.5rem',
-  },
+    '2xl': '1.5rem'
+  }
 };

package/lib/tailwind/preset.ts

@@ -17,37 +17,37 @@ const presetConfig: Config = {
     container,
     extend: {
       animation: {
-        'rest-bounce': 'rest-bounce 2s linear infinite',
+        'rest-bounce': 'rest-bounce 2s linear infinite'
       },
       boxShadow,
       colors,
 
       fontFamily: {
-        sans: ['Poppins', 'sans-serif'],
+        sans: ['Poppins', 'sans-serif']
       },
       keyframes: {
         'rest-bounce': {
           '0%': {
-            transform: 'translateY(0%)',
+            transform: 'translateY(0%)'
           },
           '20%': {
-            transform: 'translateY(-40%)',
+            transform: 'translateY(-40%)'
           },
           '40%': {
-            transform: 'translateY(0%)',
-          },
-        },
+            transform: 'translateY(0%)'
+          }
+        }
       },
       spacing,
       transitionProperty: {
         height: 'height',
-        'max-height': 'max-height',
+        'max-height': 'max-height'
       },
       transitionDelay: {
-        600: '600ms',
-      },
-    },
-  },
+        600: '600ms'
+      }
+    }
+  }
 };
 
 export default presetConfig;

package/lib/tailwind/spacing.ts

@@ -9,5 +9,5 @@ export default {
   '7.5': '1.875rem' /* 30px */,
   '8.5': '2.125rem' /* 34px */,
   '9.5': '2.375rem' /* 38px */,
-  13: '3.25rem' /* 52px */,
+  13: '3.25rem' /* 52px */
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.25",
+  "version": "2.3.27",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -31,7 +31,8 @@
     "lint:fix": "npm run lint -- --fix",
     "prettier:check": "prettier --check .",
     "prettier:fix": "prettier --write .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "verify": "npm run prettier:fix && npm run lint:fix"
   },
   "peerDependencies": {
     "@types/react": ">=17",
@@ -107,6 +108,7 @@
     "chromatic": "^10.1.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",