@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/layouts/menus/collapsible-menu.mjs

@@ -0,0 +1,150 @@
+import { jsx as t, jsxs as i, Fragment as S } from "react/jsx-runtime";
+import { useState as T, useEffect as j } from "react";
+import o from "classnames";
+import { motion as g } from "framer-motion";
+import { ActiveLink as w } from "../../links/active-link.mjs";
+import { ChevronDown as k } from "../../icons/chevron-down.mjs";
+import { useLocation as E, useNavigate as L } from "react-router-dom";
+import M from "react-use/lib/useMeasure";
+function G({
+  name: h,
+  icon: m,
+  href: a,
+  path: n,
+  dropdownItems: l,
+  isActive: x,
+  onClick: s
+}) {
+  const b = E().pathname, v = L(), [p, c] = T(!1), [N, { height: y }] = M(), f = l && l.some((e) => e.href === b), z = (e) => /^https?:\/\//i.test(e), d = (e, r) => {
+    z(e) ? (window.location.href = e, r && r()) : (v(e), r && r());
+  }, u = (e, r) => {
+    d(e), r && setTimeout(() => {
+      r();
+    }, 200);
+  };
+  return j(() => {
+    f && c(!0);
+  }, []), /* @__PURE__ */ t("div", { className: "mb-[8px] min-h-[48px] list-none last:mb-[0px]", children: l?.length ? /* @__PURE__ */ i(S, { children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: o(
+          "relative flex h-[48px] cursor-pointer items-center justify-between whitespace-nowrap  rounded-[8px] px-[16px] text-sm transition-all",
+          f ? "text-white" : "text-gray-500 hover:text-brand dark:hover:text-white"
+        ),
+        onClick: () => c(!p),
+        onTouchStart: () => c(!p),
+        children: [
+          /* @__PURE__ */ i("span", { className: "z-[1] flex items-center ltr:mr-[12px] rtl:ml-[12px]", children: [
+            /* @__PURE__ */ t("span", { className: o("ltr:mr-[12px] rtl:ml-[12px]"), children: m }),
+            h
+          ] }),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: `z-[1] transition-transform duration-200 ${p ? "rotate-180" : ""}`,
+              children: /* @__PURE__ */ t(k, {})
+            }
+          ),
+          f && /* @__PURE__ */ t(
+            g.span,
+            {
+              className: o(
+                "absolute bottom-0 left-0 right-0 h-full w-full rounded-[8px] bg-brand opacity-0 shadow-large transition-opacity"
+              ),
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { duration: 0.5 }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          height: p ? y : 0
+        },
+        className: "ease-[cubic-bezier(0.33, 1, 0.68, 1)] overflow-hidden transition-all duration-[350ms]",
+        children: /* @__PURE__ */ t("ul", { ref: N, children: l.map((e, r) => /* @__PURE__ */ t("li", { className: "first:pt-[8px]", children: /* @__PURE__ */ t(
+          w,
+          {
+            onClick: () => {
+              d(
+                e.href ? e.href : e.path,
+                s
+              );
+            },
+            onTouchStart: () => {
+              u(
+                e.href ? e.href : e.path,
+                s
+              );
+            },
+            path: e.path,
+            href: e.href,
+            to: e.href ? e.href : e.path,
+            className: "flex items-center rounded-[8px] p-[12px] text-sm text-gray-500 transition-all before:h-[4px] before:w-[4px] before:rounded-full before:bg-gray-500 hover:text-brand ltr:pl-[24px] before:ltr:mr-[20px] rtl:pr-[24px] before:rtl:ml-[20px] dark:hover:text-white",
+            activeClassName: "!text-brand dark:!text-white dark:before:!bg-white before:!bg-brand before:!w-[8px] before:!h-[8px] before:-ml-[2px] before:ltr:!mr-[18px] before:rtl:!ml-[18px] !font-medium",
+            children: e.name
+          }
+        ) }, r)) })
+      }
+    )
+  ] }) : /* @__PURE__ */ i(
+    w,
+    {
+      onClick: () => {
+        d(a || n, s);
+      },
+      onTouchStart: () => {
+        u(a || n, s);
+      },
+      path: n,
+      href: a,
+      to: a || n,
+      className: o(
+        "relative flex h-[48px] items-center whitespace-nowrap rounded-[8px] px-[16px] text-sm text-gray-500 transition-all hover:text-brand dark:hover:text-white",
+        {
+          "bg-brand": x
+        }
+      ),
+      activeClassName: "!text-white",
+      children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: o(
+              "relative z-[1] duration-100 before:absolute before:-right-[12px] before:top-[50%] before:h-[4px] before:w-[4px] before:-translate-y-2/4 before:rounded-full before:bg-none ltr:mr-[12px] rtl:ml-[12px]",
+              {
+                "text-white": x,
+                "text-gray-500": !x && !h
+              }
+            ),
+            children: m
+          }
+        ),
+        /* @__PURE__ */ i("span", { className: "relative z-[1] ", children: [
+          " ",
+          h
+        ] }),
+        n === b && /* @__PURE__ */ t(
+          g.span,
+          {
+            className: o(
+              "absolute bottom-0 left-0 right-0 h-full w-full rounded-[8px] bg-brand opacity-0 shadow-large transition-opacity"
+            ),
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.5 }
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  G as CollapsibleMenu,
+  G as default
+};

package/components/layouts/menus/expandable-sidebar.mjs

@@ -0,0 +1,158 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { useState as w, useRef as v, useEffect as N } from "react";
+import { useLocation as y } from "react-router-dom";
+import { motion as k } from "framer-motion";
+import i from "classnames";
+import { Logo as m } from "../../logos/logo.mjs";
+import { Button as g } from "../../buttons/button/index.mjs";
+import { Close as C } from "../../icons/close.mjs";
+import { TagIcon as f } from "../../icons/tag-icon.mjs";
+import { MenuItem as u } from "./menu-item.mjs";
+import { useIsMobile as M } from "../../../hooks/use-is-mobile.mjs";
+import j from "react-use/lib/useClickAway";
+const s = (p) => p.map((l) => ({
+  name: l.name,
+  icon: l.icon,
+  path: l.path,
+  href: l.href,
+  hide: l.hide,
+  ...l.dropdownItems && {
+    dropdownItems: l?.dropdownItems?.map((a) => ({
+      name: a.name,
+      ...a?.icon && { icon: a.icon },
+      path: a.path,
+      href: a.href,
+      hide: a.hide
+    }))
+  }
+}));
+function F({
+  logo: p,
+  className: l,
+  menuItems: a
+}) {
+  const c = y().pathname, [o, t] = w(!1), { isMobile: d } = M(), x = v(null);
+  j(x, () => {
+    t(!1);
+  }), N(() => {
+    setTimeout(d ? () => {
+      t(!0);
+    } : () => {
+      t(!1);
+    }, 100);
+  }, [d]);
+  function b(e) {
+    return e?.map((n) => n.href).includes(c);
+  }
+  return /* @__PURE__ */ h(
+    "aside",
+    {
+      ref: x,
+      "data-tucu": "expandable-sidebar",
+      onMouseEnter: () => t(!0),
+      onMouseLeave: () => t(!1),
+      onTouchStart: () => t(!0),
+      className: i(
+        o ? "ltr:border-r rtl:border-l border-dashed border-border min-[500px]:w-[320px] xl:w-[288px] 2xl:w-[320px] bg-light-dark" : "w-[96px] border-dashed border-border ltr:border-r rtl:border-l 2xl:w-[112px]",
+        "top-0 z-40 h-full max-w-full duration-200 ltr:left-0 rtl:right-0 dark:border-border xl:fixed bg-light-dark",
+        l
+      ),
+      children: [
+        /* @__PURE__ */ h(
+          "div",
+          {
+            className: i(
+              "relative flex h-[96px] items-center  overflow-hidden px-[24px] py-[16px] pt-[0px] 2xl:px-[32px] min-[1780px]:pt-[24px]",
+              o ? "flex-start" : "justify-center"
+            ),
+            children: [
+              o ? /* @__PURE__ */ r(m, { ...p }) : /* @__PURE__ */ r("div", { onClick: () => t(!o), children: /* @__PURE__ */ r(
+                m,
+                {
+                  ...p,
+                  isoType: !0,
+                  name: "",
+                  secondName: ""
+                }
+              ) }),
+              o && /* @__PURE__ */ r("div", { className: "md:hidden", children: /* @__PURE__ */ r(
+                g,
+                {
+                  title: "Close",
+                  color: "white",
+                  shape: "circle",
+                  variant: "transparent",
+                  size: "small",
+                  onClick: () => t(!1),
+                  children: /* @__PURE__ */ r(C, { className: "h-auto w-[10px]" })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "custom-scrollbar -mt-[16px] overflow-hidden overflow-y-auto 2xl:-mt-[28px]",
+              o ? "h-[calc(100%-190px)]" : "h-[calc(100%-170px)]"
+            ),
+            children: /* @__PURE__ */ r("div", { className: "px-[24px] pb-[20px] 2xl:px-[32px]", children: o ? /* @__PURE__ */ r("div", { className: "mt-[20px] 2xl:mt-[32px]", children: s(a)?.length && s(a).map((e, n) => /* @__PURE__ */ r(
+              u,
+              {
+                path: e.path,
+                onClick: () => t(!1),
+                name: e.name,
+                href: e?.href,
+                icon: /* @__PURE__ */ r("span", { className: "w-[24px] h-[24px] flex items-center justify-center", children: e?.icon || /* @__PURE__ */ r(f, {}) }),
+                dropdownItems: e?.dropdownItems
+              },
+              "drawer-full" + e.name + n
+            )) }) : /* @__PURE__ */ r(
+              "div",
+              {
+                className: "mt-[20px] 2xl:mt-[32px]",
+                onClick: () => t(!o),
+                children: s(a)?.length && !s(a).some((e) => e.hide) && s(a).map((e, n) => /* @__PURE__ */ r(
+                  u,
+                  {
+                    path: e.path,
+                    isActive: e.href === c || e.dropdownItems && b(e.dropdownItems),
+                    href: e.href,
+                    name: "",
+                    icon: /* @__PURE__ */ r("span", { className: "w-[24px] h-[24px] flex items-center justify-center", children: e?.icon || /* @__PURE__ */ r(f, {}) })
+                  },
+                  "drawer" + e.name + n
+                ))
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "sticky bottom-[20px] mt-[12px] 2xl:mt-[48px]",
+              o && "px-[32px]"
+            ),
+            children: !o && /* @__PURE__ */ r(
+              k.div,
+              {
+                initial: { x: 50, y: -5 },
+                animate: {
+                  x: 0,
+                  y: 0
+                },
+                className: "cursor-pointer pb-[8px]"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  F as ExpandableSidebar,
+  F as default
+};

package/components/layouts/menus/horizontal-nav-menu.mjs

@@ -0,0 +1,208 @@
+import { jsx as r, jsxs as s, Fragment as v } from "react/jsx-runtime";
+import { Fragment as u } from "react";
+import { ActiveLink as x } from "../../links/active-link.mjs";
+import { ChevronDown as N } from "../../icons/chevron-down.mjs";
+import { ChevronRight as b } from "../../icons/chevron-right.mjs";
+import n from "classnames";
+import { useLocation as y } from "react-router-dom";
+const k = (c, o) => {
+  const l = (a) => o.includes(a) && a !== "/" || a === "/" && o === "/";
+  return c.map((a) => ({
+    name: a.name,
+    icon: a.icon,
+    path: a.path,
+    href: a.href,
+    hide: a.hide,
+    isActive: l(a.path),
+    onClick: a.onClick,
+    dropdownItems: a.dropdownItems,
+    ...a.dropdownItems && {
+      dropdownItems: a?.dropdownItems?.map((i) => ({
+        name: i.name,
+        ...i?.icon && { icon: i.icon },
+        path: i.path,
+        href: i.href,
+        hide: i.hide,
+        isActive: l(i.path),
+        onClick: i.onClick,
+        ...a.dropdownItems && {
+          dropdownItems: i?.dropdownItems?.map((e) => ({
+            name: e.name,
+            ...e?.icon && { icon: e.icon },
+            path: e.path,
+            href: e.href,
+            hide: e.hide,
+            isActive: l(e.path),
+            onClick: e.onClick
+          }))
+        }
+      }))
+    }
+  }));
+};
+function S({
+  menuItems: c,
+  className: o,
+  dropboxClassName: l
+}) {
+  const i = y().pathname;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: n(
+        "flex items-center min-w-0 overflow-visible xl:px-[36px] 2xl:px-[56px] min-[1780px]:px-[64px]",
+        o
+      ),
+      children: /* @__PURE__ */ r("ul", { className: "relative flex items-center min-w-0 gap-[16px] 2xl:gap-[24px]", children: k(c, i).map((e, h) => {
+        const d = e.href ? e.href : e.path;
+        return /* @__PURE__ */ r(u, { children: e.dropdownItems && !e.hide ? /* @__PURE__ */ s(
+          "li",
+          {
+            className: n(
+              "group/parent relative min-w-0",
+              e.isActive && "text-brand"
+            ),
+            children: [
+              /* @__PURE__ */ s(
+                x,
+                {
+                  path: e.path,
+                  href: e.href,
+                  to: d,
+                  className: "flex w-full items-center text-sm font-medium uppercase text-foreground/60 transition hover:text-foreground hover:cursor-pointer",
+                  children: [
+                    e.icon && /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: n(
+                          "w-[16px] h-[16px] flex items-center justify-center mr-[6px]",
+                          e.isActive && "text-brand"
+                        ),
+                        children: e.icon
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: n(
+                          "text-[11px] sm:text-[12px] md:text-[13px] lg:text-[14px] overflow-hidden text-ellipsis whitespace-nowrap",
+                          e.isActive && "text-brand"
+                        ),
+                        children: e.name
+                      }
+                    ),
+                    /* @__PURE__ */ r("span", { className: "z-[1] transition-transform duration-200 ltr:ml-[12px] rtl:mr-[12px]", children: /* @__PURE__ */ r(
+                      N,
+                      {
+                        className: n(
+                          "h-[10px] w-[10px]",
+                          e.isActive && "text-brand"
+                        )
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                "ul",
+                {
+                  className: n(
+                    "invisible absolute right-0 z-50 border border-border top-[130%] mt-[8px] w-[256px] rounded-[8px] bg-light-dark p-[12px] opacity-0 shadow-large transition-all group-hover/parent:visible group-hover/parent:top-full group-hover/parent:opacity-100 ltr:right-0 rtl:left-0",
+                    l
+                  ),
+                  children: e.dropdownItems.map((t, f) => /* @__PURE__ */ r(
+                    "li",
+                    {
+                      className: n(
+                        "group relative",
+                        t.hide && "hidden",
+                        t.isActive && "text-brand"
+                      ),
+                      children: t.dropdownItems ? /* @__PURE__ */ s(v, { children: [
+                        /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between rounded-[8px] px-[12px] py-[8px] text-sm font-medium uppercase text-foreground/60 transition hover:text-foreground dark:hover:bg-gray-700/50", children: [
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: n(
+                                "text-[12px]",
+                                t.isActive && "text-brand"
+                              ),
+                              children: t.name
+                            }
+                          ),
+                          /* @__PURE__ */ r("span", { className: "z-[1] -mt-[4px] transition-transform duration-200 ltr:ml-[12px] rtl:mr-[12px]", children: /* @__PURE__ */ r(b, { className: "h-[10px] w-[10px]" }) })
+                        ] }),
+                        /* @__PURE__ */ r("ul", { className: "invisible absolute left-[107%] right-0 top-[130%] w-[256px] rounded-[8px] bg-white p-[12px] opacity-0 shadow-large transition-all group-hover:visible group-hover/parent:top-0 group-hover:opacity-100 ltr:right-0 rtl:left-0 dark:bg-gray-800", children: t?.dropdownItems?.map(
+                          (p, m) => {
+                            const g = p.href ? p.href : p.path;
+                            return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+                              x,
+                              {
+                                path: p.path,
+                                href: p.href,
+                                to: g,
+                                className: "block rounded-[8px] px-[12px] py-[8px] text-sm font-medium uppercase text-foreground/60 transition hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-700/50",
+                                activeClassName: n(
+                                  "bg-gray-100 dark:bg-gray-700 my-[4px] last:mb-[0px] first:mt-[0px] !text-foreground",
+                                  p.isActive && "!bg-brand !text-white"
+                                ),
+                                children: /* @__PURE__ */ r("span", { className: n("text-[12px]"), children: p.name })
+                              }
+                            ) }, p.name + m.toString());
+                          }
+                        ) })
+                      ] }) : /* @__PURE__ */ s(
+                        x,
+                        {
+                          to: t.href ? t.href : t.path,
+                          path: t.path,
+                          href: t.href,
+                          onClick: t.onClick,
+                          onTouchStart: t.onClick,
+                          className: "flex items-center gap-[4px] rounded-[8px] px-[12px] py-[8px] text-sm font-medium uppercase text-foreground/60 transition hover:bg-gray-200 hover:text-foreground dark:hover:bg-gray-700/50",
+                          activeClassName: n(
+                            "bg-gray-100 dark:bg-gray-700 my-[4px] last:mb-[0px] first:mt-[0px] !text-foreground",
+                            t.isActive && "!bg-brand !text-white"
+                          ),
+                          children: [
+                            t.icon && /* @__PURE__ */ r("span", { className: "w-[16px] h-[16px] flex items-center justify-center mr-[6px]", children: t.icon }),
+                            /* @__PURE__ */ r("span", { className: "text-[14px]", children: t.name })
+                          ]
+                        }
+                      )
+                    },
+                    `${t.name}-${f}`
+                  ))
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ r(
+          "li",
+          {
+            className: n("min-w-0", e.isActive && "text-brand"),
+            "data-active": e.isActive,
+            children: /* @__PURE__ */ r(
+              x,
+              {
+                path: e.path,
+                href: e.href,
+                to: e.href ? e.href : e.path,
+                className: "mx-[8px] text-[13px] font-medium uppercase transition first:ml-[0px] last:mr-[0px] text-foreground/60 hover:text-foreground 2xl:mx-[12px] 2xl:text-sm min-[1780px]:mx-[16px]",
+                activeClassName: n("active", "text-brand!"),
+                children: /* @__PURE__ */ s("span", { className: "z-1 flex items-center ltr:mr-[12px] rtl:ml-[12px]", children: [
+                  e.icon && /* @__PURE__ */ r("span", { className: "w-[16px] h-[16px] flex items-center justify-center mr-[6px]", children: e.icon }),
+                  /* @__PURE__ */ r("span", { className: "text-[11px] sm:text-[12px] md:text-[13px] lg:text-[14px] overflow-hidden text-ellipsis whitespace-nowrap", children: e.name })
+                ] })
+              }
+            )
+          }
+        ) }, `layout-${e.name}-${h}`);
+      }) })
+    }
+  );
+}
+export {
+  S as HorizontalNavMenu,
+  S as default
+};