trepur_components 2.3.24 → 2.3.26

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

@@ -4,7 +4,7 @@ export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'basic';
     disabled?: boolean;
     loading?: boolean;
-    type?: 'button' | 'link';
+    type?: 'button' | 'link' | 'submit';
     href?: string;
     target?: string;
     size?: 'sm' | 'md' | 'lg';

package/lib/components/Input/index.js

@@ -1,82 +1,82 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { createContext as I, forwardRef as s, useMemo as b, useRef as N, useContext as i } from "react";
-import h from "clsx";
-const d = I(null), u = s(({ children: n, errors: t, placeholder: e, ...r }, l) => {
-  const a = b(
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { createContext as b, forwardRef as a, useMemo as N, useRef as h, useContext as i } from "react";
+import m from "clsx";
+const d = b(null), p = a(({ children: r, errors: t, placeholder: n, ...e }, l) => {
+  const s = N(
     () => ({
       errors: t,
-      placeholder: e,
-      ...r
+      placeholder: n,
+      ...e
     }),
-    [t, r]
+    [t, e]
   );
-  return /* @__PURE__ */ o(d.Provider, { value: a, children: /* @__PURE__ */ o("div", { ref: l, children: n }) });
-}), m = s(
-  ({ children: n, ...t }, e) => {
-    const r = N(null);
+  return /* @__PURE__ */ o(d.Provider, { value: s, children: /* @__PURE__ */ o("div", { ref: l, children: r }) });
+}), u = a(
+  ({ children: r, ...t }, n) => {
+    const e = h(null);
     return /* @__PURE__ */ o(
       "div",
       {
         className: "mt-4 w-full",
         onClick: () => {
           var l;
-          return (l = r.current) == null ? void 0 : l.focus();
+          return (l = e.current) == null ? void 0 : l.focus();
         },
-        ref: e,
+        ref: n,
         ...t,
-        children: n
+        children: r
       }
     );
   }
-), p = s(({ children: n, required: t = !1 }, e) => /* @__PURE__ */ f(
+), c = a(({ className: r, children: t, required: n = !1 }, e) => /* @__PURE__ */ I(
   "div",
   {
     ref: e,
-    className: "text-md flex items-center rounded-2xl px-1 font-semibold",
+    className: m("flex px-1 text-sm font-normal leading-5", r),
     children: [
-      /* @__PURE__ */ o("p", { children: n }),
-      t && /* @__PURE__ */ o("p", { className: "font-semiBold text-lg", children: " *" })
+      /* @__PURE__ */ o("p", { children: t }),
+      n && /* @__PURE__ */ o("p", { className: "text-sm font-normal", children: " *" })
     ]
   }
-)), c = s(
-  ({ ...n }) => {
-    const { errors: t, placeholder: e } = i(d) || {};
+)), x = a(
+  ({ ...r }) => {
+    const { errors: t, placeholder: n } = i(d) || {};
     return /* @__PURE__ */ o(
       "input",
       {
-        placeholder: e,
-        className: h(
+        placeholder: n,
+        className: m(
           "text-ink text-md w-full rounded-md border border-gray-300 bg-white py-2 pl-4",
           {
             "border-error border-2": t != null
           }
         ),
-        ...n
+        ...r
       }
     );
   }
-), x = s(({ children: n, ...t }, e) => {
-  const { errors: r } = i(d) || {};
+), f = a(({ children: r, ...t }, n) => {
+  const { errors: e } = i(d) || {};
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: e,
+      ref: n,
       className: "text-md gap-y-2 pl-1 pt-2 font-semibold text-error-default",
       ...t,
-      children: r == null ? void 0 : r.map((l, a) => /* @__PURE__ */ o("p", { children: l }, `error-msg-${a + 1}`))
+      children: e == null ? void 0 : e.map((l, s) => /* @__PURE__ */ o("p", { children: l }, `error-msg-${s + 1}`))
     }
   );
 });
-u.displayName = "Input";
-m.displayName = "Input.Item";
-p.displayName = "Input.Label";
-c.displayName = "Input.Box";
-x.displayName = "Input.Validation";
-const C = Object.assign(u, {
-  Item: m,
-  Label: p,
-  Box: c,
-  Validation: x
+p.displayName = "Input";
+u.displayName = "Input.Item";
+c.displayName = "Input.Label";
+x.displayName = "Input.Box";
+f.displayName = "Input.Validation";
+const C = Object.assign(p, {
+  Item: u,
+  Label: c,
+  Box: x,
+  Validation: f
 });
 export {
   C as Input

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

@@ -29,3 +29,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Nav>;
 export declare const Default: Story;
+export declare const Loading: Story;

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

@@ -4,6 +4,7 @@ import { HTMLAttributes } from 'react';
 export interface NavContextProps {
     expanded?: boolean;
     setExpanded?: (val: boolean) => void;
+    loading?: boolean;
 }
 declare const Nav: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & NavContextProps & import('react').RefAttributes<HTMLDivElement>> & {
     Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/Nav/index.js

@@ -1,125 +1,140 @@
-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 { jsx as e, jsxs as p, Fragment as H } from "react/jsx-runtime";
+import { createContext as C, forwardRef as l, useState as v, useMemo as k, useContext as c, 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 d from "clsx";
 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(
+import { NavItem as F } from "../NavItem/index.js";
+const i = C(null), N = l(({ className: t, children: r, loading: a }, s) => {
+  const [o, n] = v(!1), m = k(
     () => ({
-      expanded: r,
-      setExpanded: d
+      expanded: o,
+      setExpanded: n,
+      loading: a
     }),
-    [r, d]
+    [o, n, 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(
+  return /* @__PURE__ */ e(i.Provider, { value: m, children: /* @__PURE__ */ e("div", { className: t, ref: s, children: r }) });
+}), f = l(
+  ({ className: t, children: r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: s,
-      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", a),
-      children: t
+      ref: a,
+      className: d("relative h-24 w-full bg-nav-bg px-2 py-2", t),
+      children: r
     }
   )
-), 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(
+), g = l(({ className: t, children: r }, a) => {
+  const { loading: s, setExpanded: o, expanded: n } = c(i) || {};
+  return /* @__PURE__ */ p("div", { ref: a, className: d("flex h-full md:hidden", t), children: [
+    !s && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
       M,
       {
         variant: "ghost",
-        onClick: () => r == null ? void 0 : r(!d),
+        onClick: () => o == null ? void 0 : o(!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: t })
+    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: r })
   ] });
-}), g = o(({ className: a, children: t }, s) => /* @__PURE__ */ e(
+}), u = l(({ className: t, children: r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: s,
-    className: n(
+    ref: a,
+    className: d(
       "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
-      a
+      t
     ),
-    children: t
+    children: r
   }
-)), x = o(
-  ({ className: a, children: t }, s) => {
-    const { expanded: r } = p(c) || {};
-    return r ? /* @__PURE__ */ e(
+)), x = l(
+  ({ className: t, children: r }, a) => {
+    const { expanded: s } = c(i) || {};
+    return s ? /* @__PURE__ */ e(
       "div",
       {
-        ref: s,
-        className: n(
+        ref: a,
+        className: d(
           "h-screen bg-nav-bg px-8 pb-12 pt-2 md:hidden",
-          a
+          t
         ),
-        children: /* @__PURE__ */ e("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: r })
       }
     ) : /* @__PURE__ */ e(H, {});
   }
-), u = o(
-  ({ className: a, children: t }, s) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: s,
-      className: n("my-4 md:flex md:gap-4 lg:gap-6", a),
-      children: t
-    }
-  )
-), b = o(({ className: a, label: t, children: s, active: r = !1 }) => {
-  const [d, l] = m(!1), y = w(null);
-  return /* @__PURE__ */ i(
+), h = l(
+  ({ className: t, children: r }, a) => {
+    const { loading: s } = c(i) || {};
+    return s ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
+        children: [...Array(5)].map((o, n) => /* @__PURE__ */ e(F, { loading: !0 }, n))
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
+        children: r
+      }
+    );
+  }
+), b = l(({ className: t, label: r, children: a, active: s = !1 }) => {
+  const [o, n] = v(!1), m = w(null);
+  return /* @__PURE__ */ p(
     "div",
     {
-      ref: y,
-      onClick: () => l(!0),
-      onMouseLeave: () => l(!1),
-      className: n(
+      ref: m,
+      onClick: () => n(!0),
+      onMouseLeave: () => n(!1),
+      className: d(
         "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": r,
-          "font-light": !r
+          "font-bold": s,
+          "font-light": !s
         },
-        a
+        t
       ),
       children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ e("p", { className: "text-lg", children: t }),
+        /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-lg", children: r }),
           /* @__PURE__ */ e(D, { size: "xs", icon: j })
         ] }),
-        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 }) })
+        o && /* @__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: a }) })
       ]
     }
   );
-}), 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";
-g.displayName = "Nav.DesktopHeader";
-f.displayName = "Nav.MobileHeader";
-h.displayName = "Nav.Logo";
-u.displayName = "Nav.Section";
+}), y = l(({ className: t, src: r, ...a }, s) => {
+  const { loading: o } = c(i) || {};
+  return o ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
+    "img",
+    {
+      className: d("h-20 flex-none", t),
+      ref: s,
+      src: r,
+      ...a
+    }
+  );
+});
+N.displayName = "Nav";
+f.displayName = "Nav.Header";
+u.displayName = "Nav.DesktopHeader";
+g.displayName = "Nav.MobileHeader";
+y.displayName = "Nav.Logo";
+h.displayName = "Nav.Section";
 x.displayName = "Nav.Body";
 b.displayName = "Nav.Folder";
-const R = Object.assign(v, {
-  Header: N,
-  DesktopHeader: g,
-  MobileHeader: f,
-  Section: u,
-  Logo: h,
+const A = Object.assign(N, {
+  Header: f,
+  DesktopHeader: u,
+  MobileHeader: g,
+  Section: h,
+  Logo: y,
   Body: x,
   Folder: b
 });
 export {
-  R as Nav
+  A as Nav
 };

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

@@ -4,8 +4,9 @@ import { NavItem } from './';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & {
-        href: string;
+        href?: string | undefined;
         active?: boolean | undefined;
+        loading?: boolean | undefined;
     } & import('react').RefAttributes<HTMLAnchorElement>> & {
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };
@@ -17,3 +18,4 @@ export default meta;
 type Story = StoryObj<typeof NavItem>;
 export declare const Default: Story;
 export declare const Active: Story;
+export declare const Loading: Story;

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

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
 
 declare const NavItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & {
-    href: string;
+    href?: string | undefined;
     active?: boolean | undefined;
+    loading?: boolean | undefined;
 } & import('react').RefAttributes<HTMLAnchorElement>> & {
     Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
 };

package/lib/components/NavItem/index.js

@@ -1,28 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
 import c from "clsx";
-const s = o(({ active: e, children: t, className: a, href: l, ...m }, f) => /* @__PURE__ */ r(
+const s = o(({ loading: r = !1, active: e, children: t, className: n, href: m, ...f }, i) => r ? /* @__PURE__ */ a("div", { className: "m-auto", children: /* @__PURE__ */ a("div", { className: "h-7 w-20 animate-pulse rounded-md bg-gray-300" }) }) : /* @__PURE__ */ a(
   "a",
   {
-    href: l,
-    ref: f,
+    href: m,
+    ref: i,
     className: c(
-      "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",
+      "m-auto inline-block 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-light": !e
       },
-      a
+      n
     ),
-    ...m,
+    ...f,
     children: t
   }
-)), n = o(({ className: e, ...t }, a) => /* @__PURE__ */ r("p", { className: "flex-none text-nowrap text-lg", ref: a, ...t }));
+)), l = o(({ className: r, ...e }, t) => /* @__PURE__ */ a("p", { className: "flex-none text-nowrap text-lg", ref: t, ...e }));
 s.displayName = "NavItem";
-n.displayName = "NavItem.Label";
-const N = Object.assign(s, {
-  Label: n
+l.displayName = "NavItem.Label";
+const b = Object.assign(s, {
+  Label: l
 });
 export {
-  N as NavItem
+  b as NavItem
 };

package/package.json

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