@e-burgos/tucu-ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,211 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as j, useEffect as E } from "react";
+import a from "classnames";
+import { motion as k } from "framer-motion";
+import { ActiveLink as u } from "../../links/active-link.mjs";
+import { ChevronDown as U } from "../../icons/chevron-down.mjs";
+import { useLocation as D, useNavigate as O } from "react-router-dom";
+import { useIsMobile as H } from "../../../hooks/use-is-mobile.mjs";
+import I from "react-use/lib/useMeasure";
+function W({
+  name: c,
+  icon: w,
+  path: n,
+  href: p,
+  dropdownItems: i,
+  isActive: T,
+  hide: h,
+  onClick: x
+}) {
+  const g = D().pathname, z = O(), d = H(), [N, f] = j(!1), [A, { height: C }] = I(), y = n?.toString()?.toLowerCase() === g?.toLowerCase(), b = i && i.some((e) => g.includes(e.path)), m = y || b || T;
+  E(() => {
+    b && f(!0);
+  }, [b]);
+  const S = (e) => /^https?:\/\//i.test(e), l = (e, r) => {
+    S(e) ? (window.location.href = e, r && r()) : (z(e), r && r());
+  }, M = (e, r) => {
+    l(e), f(!1), r && r();
+  }, L = () => {
+    f((e) => !e);
+  }, P = (e) => {
+    if (i?.length && d.isMobile) {
+      e?.preventDefault(), e?.stopPropagation(), L();
+      return;
+    }
+    l(o, x);
+  }, o = p || n;
+  return /* @__PURE__ */ s("div", { className: "mb-[8px] min-h-[48px] list-none last:mb-[0px]", children: [
+    !(i?.length && !h) && /* @__PURE__ */ s(
+      u,
+      {
+        onTouchStart: () => {
+          l(o, x);
+        },
+        onClick: () => {
+          l(o, x);
+        },
+        path: n,
+        href: p,
+        to: o,
+        className: a(
+          "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": m
+          }
+        ),
+        activeClassName: "text-white!",
+        children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: a(
+                "relative z-1 w-[24px] h-[24px] ml-[-4px] 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": m,
+                  "text-gray-500": !m && !c
+                }
+              ),
+              children: w
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "relative z-1", children: c }),
+          n === g && /* @__PURE__ */ t(
+            k.span,
+            {
+              className: a(
+                "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 }
+            }
+          )
+        ]
+      }
+    ),
+    i?.length && !h && /* @__PURE__ */ s(
+      "div",
+      {
+        onMouseEnter: () => {
+          d.isMobile || f(!0);
+        },
+        onMouseLeave: () => {
+          d.isMobile || f(!!b);
+        },
+        children: [
+          /* @__PURE__ */ s(
+            u,
+            {
+              activeClassName: "bg-brand text-white",
+              className: a(
+                "relative flex h-[48px] cursor-pointer items-center justify-between whitespace-nowrap rounded-[8px] px-[16px] text-sm transition-all",
+                "text-gray-500 hover:text-brand dark:hover:text-white",
+                h && "hidden",
+                m && "!text-white !bg-brand"
+              ),
+              path: n,
+              href: p,
+              to: o,
+              onClick: (e) => {
+                P(e);
+              },
+              children: [
+                /* @__PURE__ */ s("span", { className: "z-1 flex items-center ltr:mr-[12px] rtl:ml-[12px]", children: [
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: a(
+                        "relative z-1 w-[24px] h-[24px] ml-[-4px] 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]"
+                      ),
+                      children: w
+                    }
+                  ),
+                  c
+                ] }),
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `z-1 transition-transform duration-200 ${N ? "rotate-180" : ""}`,
+                    children: /* @__PURE__ */ t(U, {})
+                  }
+                ),
+                (y || b) && /* @__PURE__ */ t(
+                  k.span,
+                  {
+                    className: a(
+                      "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: N ? C : 0
+              },
+              className: "ease-[cubic-bezier(0.33, 1, 0.68, 1)] overflow-hidden transition-all duration-350",
+              children: /* @__PURE__ */ s("ul", { ref: A, children: [
+                d && /* @__PURE__ */ t(
+                  "li",
+                  {
+                    className: a("first:pt-[8px]", h && "hidden"),
+                    onTouchStart: () => M(o, x),
+                    children: /* @__PURE__ */ t(
+                      u,
+                      {
+                        path: n,
+                        href: p,
+                        to: o,
+                        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] ltr:before:mr-[20px] rtl:pr-[24px] rtl:before: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] ltr:before:mr-[18px]! rtl:before:ml-[18px]! font-medium!",
+                        onClick: () => {
+                          l(o, x);
+                        },
+                        children: c
+                      }
+                    )
+                  }
+                ),
+                i.map((e, r) => {
+                  const v = e.href ? e.href : e.path;
+                  return e.hide ? null : /* @__PURE__ */ t(
+                    "li",
+                    {
+                      className: a("first:pt-[8px]", e.hide && "hidden"),
+                      onTouchStart: () => M(v, e?.onClick),
+                      children: /* @__PURE__ */ t(
+                        u,
+                        {
+                          path: e.path,
+                          href: e.href,
+                          to: v,
+                          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] ltr:before:mr-[20px] rtl:pr-[24px] rtl:before: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] ltr:before:mr-[18px]! rtl:before:ml-[18px]! font-medium!",
+                          onClick: () => {
+                            l(v, e?.onClick);
+                          },
+                          children: e.name
+                        }
+                      )
+                    },
+                    r
+                  );
+                })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  W as MenuItem,
+  W as default
+};

package/components/layouts/root-layout.mjs

@@ -0,0 +1,93 @@
+import { jsx as O, jsxs as S } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { HorizontalLayout as R } from "./horizontal/index.mjs";
+import { AdminLayout as t } from "./admin-layout/index.mjs";
+import { CleanLayout as H } from "./clean-layout/index.mjs";
+import { MacOSLayout as d } from "./macos-layout/index.mjs";
+import { Toast as f } from "../notifications/toast.mjs";
+import { LAYOUT_OPTIONS as r } from "../../themes/config/index.mjs";
+import { ThemeBackground as C } from "../../themes/components/theme-background.mjs";
+const N = ({
+  logo: o,
+  layout: A,
+  children: _,
+  menuItems: M,
+  rightButton: T,
+  className: i,
+  headerClassName: p,
+  contentClassName: n,
+  fullWidth: E = !1
+}) => {
+  const [L, m] = c(!1);
+  if (A === r.CLEAN)
+    return /* @__PURE__ */ O(C, { children: /* @__PURE__ */ S(H, { className: i || n, children: [
+      _,
+      /* @__PURE__ */ O(f, {})
+    ] }) });
+  if (A === r.HORIZONTAL)
+    return /* @__PURE__ */ O(C, { children: /* @__PURE__ */ S(
+      R,
+      {
+        logo: o,
+        rightButton: T,
+        menuItems: M,
+        isOpen: L,
+        setIsOpen: m,
+        className: i,
+        headerClassName: p,
+        contentClassName: n,
+        fullWidth: E,
+        children: [
+          _,
+          /* @__PURE__ */ O(f, {})
+        ]
+      }
+    ) });
+  if (A === r.ADMIN)
+    return /* @__PURE__ */ O(C, { children: /* @__PURE__ */ S(
+      t,
+      {
+        logo: o,
+        rightButton: T,
+        menuItems: M,
+        isOpen: L,
+        setIsOpen: m,
+        className: i,
+        headerClassName: p,
+        contentClassName: n,
+        fullWidth: E,
+        children: [
+          _,
+          /* @__PURE__ */ O(f, {})
+        ]
+      }
+    ) });
+  if (A === r.MACOS || A === r.MACOS_CLEAN || A === r.MACOS_NAVBAR || A === r.MACOS_TAHOE || A === r.MACOS_TAHOE_DOCK || A === r.MACOS_TAHOE_CLEAN || A === r.MACOS_TAHOE_NAVBAR) {
+    const e = A === r.MACOS_TAHOE_CLEAN ? "macos-tahoe-clean" : A === r.MACOS_TAHOE_DOCK ? "tahoe-dock" : A === r.MACOS_TAHOE_NAVBAR ? "tahoe-navbar" : A === r.MACOS_TAHOE ? "tahoe" : A === r.MACOS_NAVBAR ? "sonoma-navbar" : A === r.MACOS_CLEAN ? "sonoma-clean" : "sonoma";
+    return /* @__PURE__ */ O(
+      d,
+      {
+        variant: e,
+        logo: o,
+        rightButton: T,
+        menuItems: M,
+        className: i,
+        headerClassName: p,
+        contentClassName: n,
+        fullWidth: E,
+        children: _
+      }
+    );
+  }
+  return /* @__PURE__ */ O(C, { children: /* @__PURE__ */ S(H, { className: i || n, children: [
+    _,
+    /* @__PURE__ */ O(f, {})
+  ] }) });
+};
+function I(o) {
+  return /* @__PURE__ */ O(N, { ...o });
+}
+export {
+  I as RootLayout,
+  I as default
+};

package/components/links/active-link.mjs

@@ -0,0 +1,26 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useLocation as e } from "react-router-dom";
+import i from "classnames";
+import { AnchorLink as m } from "./anchor-link.mjs";
+const L = ({
+  href: s,
+  path: o,
+  className: t,
+  activeClassName: r = "active",
+  ...n
+}) => {
+  const a = e().pathname;
+  return /* @__PURE__ */ c(
+    m,
+    {
+      className: i(t, {
+        [r]: a === o
+      }),
+      ...n
+    }
+  );
+};
+export {
+  L as ActiveLink,
+  L as default
+};

package/components/links/anchor-link.mjs

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Link as i } from "react-router-dom";
+const s = ({ to: r, ...e }) => ((t) => t ? /^https?:\/\//i.test(t) : !1)(r) ? /* @__PURE__ */ n(
+  "a",
+  {
+    rel: "noopener noreferrer",
+    title: e?.title ?? "",
+    href: r,
+    ...e
+  }
+) : /* @__PURE__ */ n(i, { to: r, ...e });
+export {
+  s as AnchorLink,
+  s as default
+};

package/components/list/list-Item.mjs

@@ -0,0 +1,51 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import l from "classnames";
+const y = ({
+  id: o,
+  label: r,
+  content: t,
+  icon: a,
+  onClick: g,
+  disabled: i,
+  className: s,
+  active: d,
+  ...p
+}) => {
+  const n = () => {
+    g?.();
+  };
+  return /* @__PURE__ */ e("li", { "data-tucu": "list-item", ...p, children: t ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: l(
+        "px-[12px] py-[8px] rounded-lg transition hover:bg-gray-200 dark:hover:bg-gray-700/50",
+        d && "bg-gray-100 dark:bg-gray-700",
+        s
+      ),
+      onClick: n,
+      children: t
+    }
+  ) : /* @__PURE__ */ x(
+    "button",
+    {
+      type: "button",
+      onClick: n,
+      disabled: i,
+      className: l(
+        "flex w-full items-center gap-[4px] rounded-lg px-[12px] py-[8px] text-sm font-medium uppercase text-gray-600 transition hover:bg-gray-200 hover:text-gray-900 dark:text-white dark:hover:bg-gray-700/50 disabled:opacity-50 disabled:cursor-not-allowed",
+        d && "bg-gray-100 dark:bg-gray-700 !text-gray-900 dark:!text-white",
+        s
+      ),
+      role: "menuitem",
+      "aria-disabled": i,
+      children: [
+        a && /* @__PURE__ */ e("span", { className: "w-[16px] h-[16px] flex items-center justify-center", children: a }),
+        r && /* @__PURE__ */ e("span", { className: "text-[14px]", children: r })
+      ]
+    }
+  ) }, o);
+};
+export {
+  y as ListItem,
+  y as default
+};

package/components/list/list-container.mjs

@@ -0,0 +1,119 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useState as v, useRef as y, useCallback as S, useEffect as z } from "react";
+import p from "classnames";
+import { ChevronDown as A } from "../icons/chevron-down.mjs";
+import { ListItem as P } from "./list-Item.mjs";
+const U = () => /* @__PURE__ */ c(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "text-gray-600 dark:text-gray-300",
+    children: [
+      /* @__PURE__ */ o("circle", { cx: "8", cy: "4", r: "1.5", fill: "currentColor" }),
+      /* @__PURE__ */ o("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" }),
+      /* @__PURE__ */ o("circle", { cx: "8", cy: "12", r: "1.5", fill: "currentColor" })
+    ]
+  }
+), Q = ({
+  label: a,
+  items: C,
+  triggerIcon: k,
+  className: N,
+  dropdownClassName: M,
+  position: r = "bottom",
+  align: n = "end",
+  isOpen: h,
+  onOpenChange: m,
+  keepOpen: D = !1,
+  trigger: d = "hover",
+  closeDelay: E = 500
+}) => {
+  const [I, L] = v(!1), [j, H] = v({}), f = y(null), l = y(null), i = h !== void 0 ? h : I, u = (t) => {
+    m ? m(t) : L(t);
+  }, s = () => {
+    l.current && (clearTimeout(l.current), l.current = null);
+  }, w = S(() => {
+    if (!f.current) return;
+    const t = f.current.getBoundingClientRect(), R = 300, T = 280, b = window.innerHeight - t.bottom, W = t.top, B = r === "top" || r === "bottom" && b < R && W > b, e = {
+      position: "fixed",
+      zIndex: 9999
+    };
+    r === "left" || r === "right" ? (r === "left" ? e.right = window.innerWidth - t.left + 4 : e.left = t.right + 4, n === "start" ? e.top = t.top : n === "end" ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2) : (B ? e.bottom = window.innerHeight - t.top + 4 : e.top = t.bottom + 4, n === "start" ? e.left = t.left : n === "end" ? e.right = window.innerWidth - t.right : (e.left = t.left + t.width / 2, e.transform = "translateX(-50%)"), n !== "end" && e.left !== void 0 && (typeof e.left == "number" ? e.left : 0) + T > window.innerWidth && (e.left = void 0, e.right = 8)), e.left !== void 0 && typeof e.left == "number" && e.left < 0 && (e.left = 8), H(e);
+  }, [r, n]), O = () => {
+    d === "hover" && (s(), w(), u(!0));
+  }, x = () => {
+    d === "hover" && !D && (s(), l.current = setTimeout(() => {
+      u(!1);
+    }, E));
+  }, g = () => {
+    d === "click" && (i || w(), u(!i));
+  };
+  return z(() => () => s(), []), /* @__PURE__ */ c(
+    "div",
+    {
+      className: p("group/options relative inline-block", N),
+      onMouseEnter: O,
+      onMouseLeave: x,
+      children: [
+        /* @__PURE__ */ c(
+          "button",
+          {
+            ref: f,
+            type: "button",
+            "data-tucu": "list-trigger",
+            onClick: g,
+            className: "flex items-center justify-center w-full h-[32px] border border-border bg-light-dark rounded-full transition-colors hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring-[2px] focus:ring-offset-[2px] focus:ring-brand/50",
+            "aria-label": "Options menu",
+            "aria-haspopup": "true",
+            "aria-expanded": i,
+            children: [
+              a && /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-[8px] w-full px-[12px]", children: [
+                /* @__PURE__ */ o("span", { className: "text-[14px] font-medium", children: a }),
+                /* @__PURE__ */ o(
+                  A,
+                  {
+                    className: p(
+                      "w-[10px] h-[10px] transition-transform duration-200",
+                      i && "rotate-180"
+                    )
+                  }
+                )
+              ] }),
+              !a && (k || /* @__PURE__ */ o(U, {}))
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          "ul",
+          {
+            "data-tucu": "list-dropdown",
+            style: i ? j : {
+              position: "fixed",
+              zIndex: 9999,
+              visibility: "hidden",
+              pointerEvents: "none"
+            },
+            onMouseEnter: s,
+            onMouseLeave: x,
+            className: p(
+              "w-auto min-w-[200px] max-w-[280px] border border-border overflow-hidden rounded-lg bg-light-dark p-[8px] shadow-large transition-opacity duration-200",
+              i ? "visible opacity-100" : "invisible opacity-0 pointer-events-none",
+              M
+            ),
+            role: "menu",
+            "aria-orientation": "vertical",
+            children: C.map((t) => /* @__PURE__ */ o(P, { ...t, onClick: g }, t.id))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Q as ListContainer,
+  Q as default
+};

package/components/loaders/loader.mjs

@@ -0,0 +1,94 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import m from "classnames";
+const i = {
+  blink: "animate-blink",
+  scaleUp: "animate-scale-up",
+  moveUp: "animate-move-up"
+}, s = {
+  small: "w-1.5 h-1.5",
+  medium: "w-2.5 h-2.5",
+  large: "w-3 h-3"
+}, r = {
+  primary: "bg-brand",
+  gray: "bg-gray-500",
+  success: "bg-green-500",
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  warning: "bg-orange-500"
+};
+function c(e) {
+  return e === "small" ? "relative top-1.5" : "relative top-3";
+}
+function t(e, n) {
+  return e === "moveUp" && n === "small" ? "animate-move-up-small" : i[e];
+}
+function y({
+  tag: e = "div",
+  color: n = "primary",
+  size: a = "medium",
+  variant: l = "moveUp",
+  showOnlyThreeDots: d,
+  className: u
+}) {
+  return /* @__PURE__ */ p(
+    e,
+    {
+      "data-tucu": "loader",
+      className: m(
+        "flex items-center gap-2",
+        l === "moveUp" && c(a),
+        u
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: m(
+              "rounded-full",
+              t(l, a),
+              s[a],
+              r[n]
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: m(
+              "animation-delay-200 rounded-full",
+              t(l, a),
+              s[a],
+              r[n]
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: m(
+              "animation-delay-500 rounded-full",
+              t(l, a),
+              s[a],
+              r[n]
+            )
+          }
+        ),
+        l === "moveUp" && !d ? /* @__PURE__ */ o(
+          "span",
+          {
+            className: m(
+              "animation-delay-700 rounded-full",
+              t(l, a),
+              s[a],
+              r[n]
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  y as Loader,
+  y as default
+};