trepur_components 2.3.24 → 2.3.25

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