trepur_components 2.3.22 → 2.3.24

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

@@ -24,3 +24,6 @@ export declare const Ghost: Story;
 export declare const Basic: Story;
 export declare const Loading: Story;
 export declare const Link: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;

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

@@ -7,6 +7,7 @@ export interface ButtonProps {
     type?: 'button' | 'link';
     href?: string;
     target?: string;
+    size?: 'sm' | 'md' | 'lg';
 }
 declare const Button: import('react').ForwardRefExoticComponent<((HTMLAttributes<HTMLButtonElement> | HTMLAttributes<HTMLAnchorElement>) & ButtonProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{

package/lib/components/Button/index.js

@@ -1,26 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { Icon as m } from "../Icon/index.js";
+import { Icon as g } from "../Icon/index.js";
 import s from "clsx";
-const g = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "button", ...e, children: o })), h = n(({ children: o, ...e }) => /* @__PURE__ */ r("div", { className: "inline-block", children: /* @__PURE__ */ r("a", { type: "button", className: "inline-grid", ...e, children: o }) })), a = n(
+const l = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "button", ...e, children: o })), x = n(({ children: o, ...e }) => /* @__PURE__ */ r("div", { className: "inline-block", children: /* @__PURE__ */ r("a", { type: "button", className: "inline-grid", ...e, children: o }) })), c = n(
   ({
     className: o,
     children: e,
     loading: t = !1,
     variant: b = "primary",
     type: i = "button",
-    disabled: y,
-    href: d,
+    disabled: h,
+    href: m,
     target: p,
-    ...l
+    size: a = "md"
   }) => /* @__PURE__ */ r(
-    i === "button" ? g : h,
+    i === "button" ? l : x,
     {
-      href: d,
+      href: m,
       target: p,
       disabled: t,
       className: s(
-        "font-regular flex items-center gap-2 rounded-lg border px-8 py-3 text-center text-lg",
+        "flex items-center gap-3 rounded border text-center",
         {
           "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": b === "primary" && !t,
@@ -28,20 +28,23 @@ const g = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "butt
           "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": b === "ghost" && !t,
           "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": b === "bordered" && !t,
           "border-button-basic-border bg-button-basic-bg text-button-basic-text hover:bg-button-basic-hover active:bg-button-basic-active": b === "basic" && !t,
-          "w-40 animate-pulse border-loading bg-loading": t
+          "w-40 animate-pulse border-loading bg-loading": t,
+          "px-12 py-3 text-base font-normal leading-4": a === "sm",
+          "px-12 py-3 text-lg font-normal leading-8": a === "md",
+          "px-12 py-4 text-xl font-normal leading-8": a === "lg"
         },
         o
       ),
       children: !t && e
     }
   )
-), c = n(({ className: o, ...e }, t) => /* @__PURE__ */ r("p", { className: s("text-md", o), ref: t, ...e })), u = n(({ icon: o }, e) => /* @__PURE__ */ r(m, { size: "md", ref: e, icon: o }));
-a.displayName = "Button";
-u.displayName = "Button.Icon";
-c.displayName = "Button.Label";
-const I = Object.assign(a, {
-  Icon: u,
-  Label: c
+), u = n(({ className: o, ...e }, t) => /* @__PURE__ */ r("p", { className: s("text-md", o), ref: t, ...e })), d = n(({ icon: o }, e) => /* @__PURE__ */ r(g, { size: "md", ref: e, icon: o }));
+c.displayName = "Button";
+d.displayName = "Button.Icon";
+u.displayName = "Button.Label";
+const I = Object.assign(c, {
+  Icon: d,
+  Label: u
 });
 export {
   I as Button

package/lib/components/Nav/index.js

@@ -1,115 +1,124 @@
-import { jsx as a, jsxs as i, Fragment as y } from "react/jsx-runtime";
-import { createContext as H, forwardRef as r, useState as m, useMemo as C, useContext as p, useRef as k } from "react";
-import { HamburgerIcon as w } from "../HamburgerIcon/index.js";
-import { faChevronDown as M } from "@fortawesome/fontawesome-free-solid";
+import { jsx as e, jsxs as i, Fragment as H } from "react/jsx-runtime";
+import { createContext as C, forwardRef as o, useState as m, useMemo as k, useContext as p, useRef as w } from "react";
+import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
+import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
 import n from "clsx";
-import { Icon as j } from "../Icon/index.js";
-const c = H(null), v = r(({ className: s, children: t }, e) => {
-  const [o, d] = m(!1), l = C(
+import { Icon as D } from "../Icon/index.js";
+const c = C(null), v = o(({ className: a, children: t }, s) => {
+  const [r, d] = m(!1), l = k(
     () => ({
-      expanded: o,
+      expanded: r,
       setExpanded: d
     }),
-    [o, d]
+    [r, d]
   );
-  return /* @__PURE__ */ a(c.Provider, { value: l, children: /* @__PURE__ */ a("div", { className: s, ref: e, children: t }) });
-}), N = r(
-  ({ className: s, children: t }, e) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ e(c.Provider, { value: l, children: /* @__PURE__ */ e("div", { className: a, ref: s, children: t }) });
+}), N = o(
+  ({ className: a, children: t }, s) => /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
-      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", s),
+      ref: s,
+      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", a),
       children: t
     }
   )
-), g = r(({ className: s, children: t }, e) => {
-  const { setExpanded: o, expanded: d } = p(c) || {};
-  return /* @__PURE__ */ i("div", { ref: e, className: n("flex h-full md:hidden", s), children: [
-    /* @__PURE__ */ a("div", { className: "my-auto", children: /* @__PURE__ */ a(
-      w,
+), f = o(({ className: a, children: t }, s) => {
+  const { setExpanded: r, expanded: d } = p(c) || {};
+  return /* @__PURE__ */ i("div", { ref: s, className: n("flex h-full md:hidden", a), children: [
+    /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
+      M,
       {
         variant: "ghost",
-        onClick: () => o == null ? void 0 : o(!d),
+        onClick: () => r == null ? void 0 : r(!d),
         className: "aspect-square"
       }
     ) }),
-    /* @__PURE__ */ a("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: t })
+    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: t })
   ] });
-}), f = r(({ className: s, children: t }, e) => /* @__PURE__ */ a(
+}), g = o(({ className: a, children: t }, s) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: s,
     className: n(
       "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
-      s
+      a
     ),
     children: t
   }
-)), u = r(
-  ({ className: s, children: t }, e) => {
-    const { expanded: o } = p(c) || {};
-    return o ? /* @__PURE__ */ a(
+)), x = o(
+  ({ className: a, children: t }, s) => {
+    const { expanded: r } = p(c) || {};
+    return r ? /* @__PURE__ */ e(
       "div",
       {
-        ref: e,
+        ref: s,
         className: n(
           "h-screen bg-nav-bg px-8 pb-12 pt-2 md:hidden",
-          s
+          a
         ),
-        children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: t })
+        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: t })
       }
-    ) : /* @__PURE__ */ a(y, {});
+    ) : /* @__PURE__ */ e(H, {});
   }
-), x = r(
-  ({ className: s, children: t }, e) => /* @__PURE__ */ a(
+), u = o(
+  ({ className: a, children: t }, s) => /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
-      className: n("my-4 md:flex md:gap-4 lg:gap-8", s),
+      ref: s,
+      className: n("my-4 md:flex md:gap-4 lg:gap-6", a),
       children: t
     }
   )
-), h = r(({ label: s, children: t, active: e = !1 }) => {
-  const [o, d] = m(!1), l = k(null);
+), b = o(({ className: a, label: t, children: s, active: r = !1 }) => {
+  const [d, l] = m(!1), y = w(null);
   return /* @__PURE__ */ i(
     "div",
     {
-      ref: l,
-      onClick: () => d(!0),
-      onMouseLeave: () => d(!1),
+      ref: y,
+      onClick: () => l(!0),
+      onMouseLeave: () => l(!1),
       className: n(
-        "relative m-auto text-xl tracking-wider text-nav-text hover:cursor-pointer",
+        "relative m-auto py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
         {
-          "font-bold": e,
-          "font-normal": !e
-        }
+          "font-bold": r,
+          "font-light": !r
+        },
+        a
       ),
       children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-px ", children: [
-          /* @__PURE__ */ a("p", { children: s }),
-          /* @__PURE__ */ a(j, { icon: M })
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-lg", children: t }),
+          /* @__PURE__ */ e(D, { size: "xs", icon: j })
         ] }),
-        o && /* @__PURE__ */ a("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: t }) })
+        d && /* @__PURE__ */ e("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: s }) })
       ]
     }
   );
-}), b = r(({ className: s, src: t, ...e }, o) => /* @__PURE__ */ a("img", { className: n("h-20", s), ref: o, src: t, ...e }));
+}), h = o(({ className: a, src: t, ...s }, r) => /* @__PURE__ */ e(
+  "img",
+  {
+    className: n("h-20 flex-none", a),
+    ref: r,
+    src: t,
+    ...s
+  }
+));
 v.displayName = "Nav";
 N.displayName = "Nav.Header";
-f.displayName = "Nav.DesktopHeader";
-g.displayName = "Nav.MobileHeader";
-b.displayName = "Nav.Logo";
-x.displayName = "Nav.Section";
-u.displayName = "Nav.Body";
-h.displayName = "Nav.Folder";
+g.displayName = "Nav.DesktopHeader";
+f.displayName = "Nav.MobileHeader";
+h.displayName = "Nav.Logo";
+u.displayName = "Nav.Section";
+x.displayName = "Nav.Body";
+b.displayName = "Nav.Folder";
 const R = Object.assign(v, {
   Header: N,
-  DesktopHeader: f,
-  MobileHeader: g,
-  Section: x,
-  Logo: b,
-  Body: u,
-  Folder: h
+  DesktopHeader: g,
+  MobileHeader: f,
+  Section: u,
+  Logo: h,
+  Body: x,
+  Folder: b
 });
 export {
   R as Nav

package/lib/components/NavItem/index.js

@@ -1,34 +1,27 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
 import c from "clsx";
-const n = o(({ active: e, children: t, className: a, href: m, ...l }, f) => /* @__PURE__ */ r(
+const s = o(({ active: e, children: t, className: a, href: l, ...m }, f) => /* @__PURE__ */ r(
   "a",
   {
-    href: m,
+    href: l,
     ref: f,
     className: c(
-      "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",
+      "m-auto py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
       {
         "font-bold": e,
-        "font-normal": !e
+        "font-light": !e
       },
       a
     ),
-    ...l,
+    ...m,
     children: t
   }
-)), s = o(({ className: e, ...t }, a) => /* @__PURE__ */ r(
-  "p",
-  {
-    className: "flex-none text-nowrap text-xl tracking-wider",
-    ref: a,
-    ...t
-  }
-));
-n.displayName = "NavItem";
-s.displayName = "NavItem.Label";
-const N = Object.assign(n, {
-  Label: s
+)), n = o(({ className: e, ...t }, a) => /* @__PURE__ */ r("p", { className: "flex-none text-nowrap text-lg", ref: a, ...t }));
+s.displayName = "NavItem";
+n.displayName = "NavItem.Label";
+const N = Object.assign(s, {
+  Label: n
 });
 export {
   N as NavItem

package/lib/styles/themes/penrithmrt.css

@@ -1,36 +1,6 @@
 body.theme-penrithmrt {
-  --color-ink: #495863;
-  --color-transparent: transparent;
-  --color-white: #ffffff;
-  --color-black: #000000;
-  --color-red: #bb0a1e;
-  --color-grey: #2c373b;
-  --color-light-grey: #495c63;
-  --color-lightest-grey: #f5f5f5;
-  --color-primary-strict: #ff007d;
-  --color-border: #d0d0d0;
-  --color-border-lightest: #eeeeee;
-  --color-border-light: #d8d8d8;
-  --color-border-dark: #616161;
-  --color-facebook: #3b5999;
-  --color-whatsapp: #25d366;
-  --color-twitter: #55acee;
-  --color-linkedin: #0a66c2;
-  --color-email: #c71610;
-  --color-github: #171515;
-  --color-instagram: #8a3ab9;
-  --color-interactive-facebook: #2d4474;
-  --color-interactive-whatsapp: #25d566;
-  --color-interactive-twitter: #55acee;
-  --color-interactive-linkedin: #0a66c2;
-  --color-interactive-instagram: #6d2e92;
-  --color-interactive-email: #9f110c;
-  --color-interactive-github: #000000;
-  --color-gold: #e2b13c;
-  --color-linkedin: #0e76a8;
-
   --color-primary: #3C2F71;
-  --color-secondary: #c71f1f;
+  --color-secondary: #E94439;
   --color-tertiary: #921457;
 
   --color-loading: #a3a3a3;
@@ -55,7 +25,7 @@ body.theme-penrithmrt {
 
   --color-button-secondary-active: #c71f1f;
   --color-button-secondary-border: #c71f1f;
-  --color-button-secondary-bg: #c71f1f;
+  --color-button-secondary-bg: #E94439;
   --color-button-secondary-text: #ffffff;
   --color-button-secondary-hover: #c71f1f;
 

package/lib/tailwind/preset.ts

@@ -23,46 +23,7 @@ const presetConfig: Config = {
       colors,
 
       fontFamily: {
-        noto: ['Noto Sans JP', 'DM Sans', ...defaultTheme.fontFamily.sans],
-        sans: ['DM Sans', 'Noto Sans JP', ...defaultTheme.fontFamily.sans],
-      },
-      fontSize: {
-        xs: [
-          '0.75rem',
-          {
-            lineHeight: '1.1rem',
-          },
-        ],
-        xl: [
-          '1.25rem',
-          {
-            lineHeight: '1.875rem',
-          },
-        ],
-        '2xl': [
-          '1.5rem',
-          {
-            lineHeight: '2.25rem',
-          },
-        ],
-        '3xl': [
-          '1.875rem',
-          {
-            lineHeight: '2.75rem',
-          },
-        ],
-        '4xl': [
-          '2.25rem',
-          {
-            lineHeight: '3.25rem',
-          },
-        ],
-        '5xl': [
-          '3rem',
-          {
-            lineHeight: '4rem',
-          },
-        ],
+        sans: ['Poppins', 'sans-serif'],
       },
       keyframes: {
         'rest-bounce': {

package/lib/tailwind/spacing.ts

@@ -10,5 +10,4 @@ export default {
   '8.5': '2.125rem' /* 34px */,
   '9.5': '2.375rem' /* 38px */,
   13: '3.25rem' /* 52px */,
-  'app-header-height': 'var(--app-header-height, 0)',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.22",
+  "version": "2.3.24",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -47,6 +47,7 @@
     "@fortawesome/fontawesome-free-regular": "^5.1.0-3",
     "@fortawesome/fontawesome-free-solid": "^5.1.0-3",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",