trepur_components 2.3.11 → 2.3.13

package/lib/components/Button/index.js

@@ -15,7 +15,7 @@ const a = n(
     {
       disabled: t,
       className: s(
-        "flex h-[38px] items-center gap-2 rounded-lg border px-4 py-2 text-center text-sm",
+        "flex items-center gap-2 rounded-lg border px-8 py-3 text-center text-lg font-thin",
         {
           "duration-200": !t,
           "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active": r === "primary" && !t,
@@ -34,10 +34,10 @@ const a = n(
 a.displayName = "Button";
 c.displayName = "Button.Icon";
 u.displayName = "Button.Label";
-const y = Object.assign(a, {
+const x = Object.assign(a, {
   Icon: c,
   Label: u
 });
 export {
-  y as Button
+  x as Button
 };

package/lib/components/Nav/index.js

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

package/lib/components/NavItem/index.js

@@ -7,7 +7,7 @@ const n = o(({ children: t, className: e, href: a, ...m }, l) => /* @__PURE__ */
     href: a,
     ref: l,
     className: f(
-      "text-nav-text after:border-nav-text mx-auto h-8 py-0 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",
+      "m-auto h-8 py-0 text-nav-text after:block after:scale-x-0 after:border-b-4 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
       e
     ),
     ...m,

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

@@ -1,18 +1,16 @@
-import { SplitCard } from '.';
 import { StoryObj } from '@storybook/react';
+import { SplitCard } from './';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').SplitCardContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').SplitCardContextProps & import('react').RefAttributes<HTMLDivElement>> & {
         LeftContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         RightContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
         Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };
     args: {
-        className: string;
         swapDesktop: true;
-        swapMobile: true;
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };

package/lib/components/SplitCard/index.js

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

package/lib/components/index.d.ts

@@ -4,6 +4,7 @@ import { Timeline } from './Timeline';
 import { TextArea } from './TextArea';
 import { Testimonial } from './Testimonial';
 import { Stars } from './Stars';
+import { SplitCard } from './SplitCard';
 import { Select } from './Select';
 import { Search } from './Search';
 import { Pill } from './Pill';
@@ -34,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, 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/index.js

@@ -3,15 +3,15 @@ import { AlertBar as m } from "./components/AlertBar/index.js";
 import { Breadcrumbs as x } from "./components/Breadcrumbs/index.js";
 import { Button as a } from "./components/Button/index.js";
 import { CalendarComponent as n } from "./components/Calendar/index.js";
-import { Card as u } from "./components/Card/index.js";
+import { Card as d } from "./components/Card/index.js";
 import { Checkbox as C } from "./components/Checkbox/index.js";
 import { Carousel as c } from "./components/Carousel/index.js";
 import { CarouselThumbnail as I } from "./components/CarouselThumbnail/index.js";
 import { Collapsible as g } from "./components/Collapsible/index.js";
-import { Counter as h } from "./components/Counter/index.js";
-import { DetailUpdater as A } from "./components/DetailUpdater/index.js";
-import { Dialog as F } from "./components/Dialog/index.js";
-import { Dropdown as S } from "./components/Dropdown/index.js";
+import { Counter as S } from "./components/Counter/index.js";
+import { DetailUpdater as v } from "./components/DetailUpdater/index.js";
+import { Dialog as D } from "./components/Dialog/index.js";
+import { Dropdown as N } from "./components/Dropdown/index.js";
 import { Form as k } from "./components/Form/index.js";
 import { Footer as G } from "./components/Footer/index.js";
 import { FooterNav as U } from "./components/FooterNav/index.js";
@@ -27,27 +27,28 @@ import { NavItem as _ } from "./components/NavItem/index.js";
 import { Pill as oo } from "./components/Pill/index.js";
 import { Search as eo } from "./components/Search/index.js";
 import { Select as mo } from "./components/Select/index.js";
-import { Stars as xo } from "./components/Stars/index.js";
-import { Testimonial as ao } from "./components/Testimonial/index.js";
-import { TextArea as no } from "./components/TextArea/index.js";
-import { Timeline as uo } from "./components/Timeline/index.js";
-import { Tubestops as so } from "./components/Tubestops/index.js";
-import { Video as bo } from "./components/Video/index.js";
+import { SplitCard as xo } from "./components/SplitCard/index.js";
+import { Stars as ao } from "./components/Stars/index.js";
+import { Testimonial as no } from "./components/Testimonial/index.js";
+import { TextArea as uo } from "./components/TextArea/index.js";
+import { Timeline as so } from "./components/Timeline/index.js";
+import { Tubestops as bo } from "./components/Tubestops/index.js";
+import { Video as To } from "./components/Video/index.js";
 export {
   e as Accordion,
   m as AlertBar,
   x as Breadcrumbs,
   a as Button,
   n as CalendarComponent,
-  u as Card,
+  d as Card,
   c as Carousel,
   I as CarouselThumbnail,
   C as Checkbox,
   g as Collapsible,
-  h as Counter,
-  A as DetailUpdater,
-  F as Dialog,
-  S as Dropdown,
+  S as Counter,
+  v as DetailUpdater,
+  D as Dialog,
+  N as Dropdown,
   G as Footer,
   U as FooterNav,
   k as Form,
@@ -63,10 +64,11 @@ export {
   oo as Pill,
   eo as Search,
   mo as Select,
-  xo as Stars,
-  ao as Testimonial,
-  no as TextArea,
-  uo as Timeline,
-  so as Tubestops,
-  bo as Video
+  xo as SplitCard,
+  ao as Stars,
+  no as Testimonial,
+  uo as TextArea,
+  so as Timeline,
+  bo as Tubestops,
+  To as Video
 };

package/lib/styles/themes/penrithmrt.css

@@ -96,6 +96,6 @@ body.theme-penrithmrt {
   --color-carousel-arrow-hover: #ae127a;
 
   /* Nav */
-  --color-nav-bg: #c8c6c6;
+  --color-nav-bg: #f3f4f6;
   --color-nav-text: #3C2F71;
 }

package/lib/utils/matchMedia.js

@@ -0,0 +1,9 @@
+const a = (e) => {
+  if (typeof window > "u")
+    return !1;
+  const t = window.matchMedia(e);
+  return t == null ? void 0 : t.matches;
+};
+export {
+  a as default
+};

package/lib/utils/screens.js

@@ -0,0 +1,10 @@
+const x = {
+  xs: "320px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
+};
+export {
+  x as Screens
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,