trepur_components 2.3.15 → 2.3.17

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

@@ -3,7 +3,7 @@ import { Button } from './';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & import('./').ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    component: import('react').ForwardRefExoticComponent<((import('react').HTMLAttributes<HTMLButtonElement> | import('react').HTMLAttributes<HTMLAnchorElement>) & import('./').ButtonProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
         Icon: import('react').ForwardRefExoticComponent<{
             icon: any;
         } & import('react').RefAttributes<SVGSVGElement>>;
@@ -22,3 +22,4 @@ export declare const Secondary: Story;
 export declare const Bordered: Story;
 export declare const Ghost: Story;
 export declare const Loading: Story;
+export declare const Link: Story;

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

@@ -4,8 +4,11 @@ export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'ghost' | 'bordered';
     disabled?: boolean;
     loading?: boolean;
+    type?: 'button' | 'link';
+    href?: string;
+    target?: string;
 }
-declare const Button: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
+declare const Button: import('react').ForwardRefExoticComponent<((HTMLAttributes<HTMLButtonElement> | HTMLAttributes<HTMLAnchorElement>) & ButtonProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{
         icon: any;
     } & import('react').RefAttributes<SVGSVGElement>>;

package/lib/components/Button/index.js

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

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

@@ -8,3 +8,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof HamburgerIcon>;
 export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;

package/lib/components/HamburgerIcon/index.js

@@ -1,29 +1,35 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as g, useState as d } from "react";
-import { Button as f } from "../Button/index.js";
-import o from "clsx";
-const n = g(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
-  const [t, m] = d(!1), p = (s) => {
-    m(!t), a == null || a(s);
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as p, useState as u } from "react";
+import r from "clsx";
+const s = p(({ className: i, onClick: a, variant: t = "primary" }, l) => {
+  const [o, g] = u(!1), m = (n) => {
+    g(!o), a == null || a(n);
   };
-  return /* @__PURE__ */ r(
-    f,
+  return /* @__PURE__ */ e(
+    "button",
     {
-      className: o("stroke-white", i),
+      className: r(
+        "h-13 w-13 rounded-xl stroke-white transition-all duration-300 ease-in-out",
+        {
+          "bg-button-primary-bg hover:bg-button-primary-hover": t === "primary",
+          "bg-button-secondary-bg hover:bg-button-secondary-hover": t === "secondary",
+          "bg-button-ghost-bg hover:bg-button-ghost-hover": t === "ghost"
+        },
+        i
+      ),
       ref: l,
-      onClick: (s) => {
-        p(s);
+      onClick: (n) => {
+        m(n);
       },
-      variant: e,
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ b(
         "svg",
         {
-          className: o(
+          className: r(
             "transition-backgroundColor mx-auto transform overflow-visible duration-500",
             {
-              "fill-button-primary-text": e === "primary",
-              "fill-button-secondary-text": e === "secondary",
-              "fill-button-ghost-text stroke-button-ghost-text": e === "ghost"
+              "fill-button-primary-text": t === "primary",
+              "fill-button-secondary-text": t === "secondary",
+              "fill-button-ghost-text stroke-button-ghost-text": t === "ghost"
             }
           ),
           width: "24",
@@ -31,35 +37,35 @@ const n = g(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
           viewBox: "0 0 24 15",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ e(
               "path",
               {
-                className: o(
+                className: r(
                   "origin-top-left transition-transform duration-200 ease-linear",
                   {
-                    "origin-top-left -translate-y-0.5 translate-x-1 rotate-45": t
+                    "origin-top-left -translate-y-0.5 translate-x-1 rotate-45": o
                   }
                 ),
                 d: "M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z"
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ e(
               "path",
               {
-                className: o("transition-opacity duration-200 ease-linear", {
-                  "opacity-0": t,
-                  "opacity-100": !t
+                className: r("transition-opacity duration-200 ease-linear", {
+                  "opacity-0": o,
+                  "opacity-100": !o
                 }),
                 d: "M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z"
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ e(
               "path",
               {
-                className: o(
+                className: r(
                   "origin-bottom-left transition-transform duration-200 ease-linear",
                   {
-                    "origin-bottom-left translate-x-1 translate-y-px -rotate-45": t
+                    "origin-bottom-left translate-x-1 translate-y-px -rotate-45": o
                   }
                 ),
                 d: "M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z"
@@ -71,8 +77,8 @@ const n = g(({ className: i, onClick: a, variant: e = "ghost" }, l) => {
     }
   );
 });
-n.displayName = "HamburgerIcon";
-const C = Object.assign(n);
+s.displayName = "HamburgerIcon";
+const f = Object.assign(s);
 export {
-  C as HamburgerIcon
+  f as HamburgerIcon
 };

package/lib/components/Nav/index.js

@@ -20,6 +20,7 @@ const l = y(null), v = o(({ children: a }, s) => {
       /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
         H,
         {
+          variant: "ghost",
           onClick: () => t == null ? void 0 : t(!n),
           className: "aspect-square"
         }

package/lib/styles/themes/penrithmrt.css

@@ -61,9 +61,9 @@ body.theme-penrithmrt {
 
   --color-button-ghost-active: #242424;
   --color-button-ghost-border: #ffffff00;
-  --color-button-ghost-bg: #0055ff00;
+  --color-button-ghost-bg: #cbcbcb00;
   --color-button-ghost-text: #3C2F71;
-  --color-button-ghost-hover: #bdbdbd;
+  --color-button-ghost-hover: #c8c7c7;
 
   --color-button-bordered-active: #242424;
   --color-button-bordered-border: #9d9d9d;
@@ -97,6 +97,6 @@ body.theme-penrithmrt {
 
   /* Nav */
   --color-nav-bg: #f3f4f6;
-  --color-nav-shadow-bg: #a4a4a4;
+  --color-nav-shadow-bg: #d1d5db;
   --color-nav-text: #3C2F71;
 }

package/package.json

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