trepur_components 2.3.12 → 2.3.14

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

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

package/lib/styles/themes/penrithmrt.css

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

package/lib/tailwind/colors.ts

@@ -7,6 +7,9 @@ export default {
   nav: {
     bg: 'var(--color-nav-bg)',
     text: 'var(--color-nav-text)',
+    shadow: {
+      bg: 'var(--color-nav-shadow-bg)',
+    }
   },
   loading: 'var(--color-loading)',
   footer: {

package/package.json

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