@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/components/common/tooltip.mjs

@@ -0,0 +1,199 @@
+import { jsxs as I, jsx as R, Fragment as W } from "react/jsx-runtime";
+import N, { useState as z, useRef as E, useId as X, useCallback as $, useEffect as C } from "react";
+import { createPortal as Y } from "react-dom";
+import M from "classnames";
+import { useTheme as A } from "../../themes/hooks/use-theme.mjs";
+const Z = {
+  dark: "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900",
+  light: "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100 border border-border",
+  primary: "bg-brand text-white",
+  success: "bg-green-500 text-white",
+  info: "bg-blue-500 text-white",
+  warning: "bg-yellow-500 text-white",
+  danger: "bg-red-500 text-white"
+}, _ = {
+  dark: "text-gray-900 dark:text-gray-100",
+  light: "text-white dark:text-gray-800",
+  primary: "text-brand",
+  success: "text-green-500",
+  info: "text-blue-500",
+  warning: "text-yellow-500",
+  danger: "text-red-500"
+}, e = 6, L = 8;
+function q(o, t, h) {
+  const c = window.scrollX, n = window.scrollY, u = window.innerWidth, g = window.innerHeight, i = [h], d = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+  i.push(d[h]);
+  const f = ["top", "bottom", "left", "right"].filter((s) => !i.includes(s));
+  i.push(...f);
+  for (const s of i) {
+    const r = j(o, t, s, c, n);
+    if (G(r, t, u, g, c, n))
+      return { ...r, actualPlacement: s };
+  }
+  return {
+    ...j(o, t, h, c, n),
+    actualPlacement: h
+  };
+}
+function j(o, t, h, c, n) {
+  const u = o.left + o.width / 2 + c, g = o.top + o.height / 2 + n;
+  let i = 0, d = 0, f = 0, s = 0, r = "";
+  switch (h) {
+    case "top":
+      i = o.top + n - t.height - L, d = u - t.width / 2, f = t.height - 1, s = t.width / 2 - e, r = "rotate(180deg)";
+      break;
+    case "bottom":
+      i = o.bottom + n + L, d = u - t.width / 2, f = -e * 2 + 1, s = t.width / 2 - e, r = "rotate(0deg)";
+      break;
+    case "left":
+      i = g - t.height / 2, d = o.left + c - t.width - L, f = t.height / 2 - e, s = t.width - 1, r = "rotate(90deg)";
+      break;
+    case "right":
+      i = g - t.height / 2, d = o.right + c + L, f = t.height / 2 - e, s = -e * 2 + 1, r = "rotate(-90deg)";
+      break;
+  }
+  return { top: i, left: d, arrowTop: f, arrowLeft: s, arrowRotation: r };
+}
+function G(o, t, h, c, n, u) {
+  const g = n, i = u, d = n + h, f = u + c;
+  return o.left >= g && o.left + t.width <= d && o.top >= i && o.top + t.height <= f;
+}
+function J({
+  content: o,
+  placement: t = "top",
+  color: h,
+  arrow: c = !0,
+  enterDelay: n = 0,
+  leaveDelay: u = 100,
+  disabled: g = !1,
+  className: i,
+  children: d
+}) {
+  const { mode: f } = A(), s = h ?? (f === "dark" ? "light" : "dark"), [r, x] = z(!1), [a, H] = z(null), P = E(null), y = E(null), v = E(null), k = E(null), B = X(), m = $(() => {
+    v.current && (clearTimeout(v.current), v.current = null), k.current && (clearTimeout(k.current), k.current = null);
+  }, []), p = $(() => {
+    if (!P.current || !y.current) return;
+    const l = P.current.getBoundingClientRect(), w = y.current.getBoundingClientRect();
+    H(q(l, w, t));
+  }, [t]), F = $(() => {
+    g || (m(), n > 0 ? v.current = setTimeout(() => x(!0), n) : x(!0));
+  }, [g, n, m]), S = $(() => {
+    m(), u > 0 ? k.current = setTimeout(() => x(!1), u) : x(!1);
+  }, [u, m]);
+  C(() => {
+    if (r)
+      return p(), window.addEventListener("scroll", p, !0), window.addEventListener("resize", p), () => {
+        window.removeEventListener("scroll", p, !0), window.removeEventListener("resize", p);
+      };
+  }, [r, p]), C(() => {
+    r && y.current && p();
+  }, [r, p]), C(() => m, [m]);
+  const T = a?.actualPlacement ?? t, b = N.Children.only(d), O = N.cloneElement(b, {
+    ref: (l) => {
+      P.current = l;
+      const w = b.ref;
+      typeof w == "function" ? w(l) : w && typeof w == "object" && (w.current = l);
+    },
+    onMouseEnter: (l) => {
+      F(), b.props.onMouseEnter?.(l);
+    },
+    onMouseLeave: (l) => {
+      S(), b.props.onMouseLeave?.(l);
+    },
+    onFocus: (l) => {
+      F(), b.props.onFocus?.(l);
+    },
+    onBlur: (l) => {
+      S(), b.props.onBlur?.(l);
+    },
+    "aria-describedby": r ? B : void 0
+  }), V = r ? Y(
+    /* @__PURE__ */ I(
+      "div",
+      {
+        ref: y,
+        id: B,
+        role: "tooltip",
+        className: M(
+          "fixed z-99999 max-w-xs px-3 py-1.5 text-sm rounded-lg shadow-lg pointer-events-none",
+          "animate-in fade-in duration-150",
+          Z[s],
+          i
+        ),
+        style: a ? {
+          position: "absolute",
+          top: a.top,
+          left: a.left
+        } : {
+          position: "absolute",
+          top: -9999,
+          left: -9999
+        },
+        children: [
+          o,
+          c && a && /* @__PURE__ */ R(
+            "svg",
+            {
+              className: M(
+                "absolute pointer-events-none",
+                _[s]
+              ),
+              style: {
+                top: a.arrowTop,
+                left: a.arrowLeft,
+                transform: a.arrowRotation
+              },
+              width: e * 2,
+              height: e * 2,
+              viewBox: `0 0 ${e * 2} ${e * 2}`,
+              children: /* @__PURE__ */ R(
+                "polygon",
+                {
+                  points: `0,0 ${e * 2},0 ${e},${e}`,
+                  fill: "currentColor"
+                }
+              )
+            }
+          ),
+          c && a && s === "light" && /* @__PURE__ */ R(
+            "svg",
+            {
+              className: "absolute pointer-events-none text-gray-200 dark:text-gray-700",
+              style: {
+                top: a.arrowTop + (T === "top" ? 1 : T === "bottom" ? -1 : 0),
+                left: a.arrowLeft + (T === "left" ? 1 : T === "right" ? -1 : 0),
+                transform: a.arrowRotation,
+                zIndex: -1
+              },
+              width: e * 2,
+              height: e * 2,
+              viewBox: `0 0 ${e * 2} ${e * 2}`,
+              children: /* @__PURE__ */ R(
+                "polygon",
+                {
+                  points: `0,0 ${e * 2},0 ${e},${e}`,
+                  fill: "currentColor"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ I(W, { children: [
+    O,
+    V
+  ] });
+}
+J.displayName = "Tooltip";
+export {
+  J as Tooltip,
+  J as default
+};

package/components/dialog/drawer-container.mjs

@@ -0,0 +1,110 @@
+import { jsxs as D, Fragment as F, jsx as v } from "react/jsx-runtime";
+import { useState as w, useRef as g, useEffect as l } from "react";
+import { createPortal as S } from "react-dom";
+import o from "classnames";
+function L({
+  isOpen: r,
+  setIsOpen: s,
+  children: p,
+  position: E = "left",
+  backdrop: d = !0,
+  backdropClassName: c
+}) {
+  const [k, f] = w(!1), [i, m] = w(!1), n = g(null), b = g(null);
+  l(() => {
+    r && (b.current = document.activeElement);
+  }, [r]), l(() => {
+    if (r) {
+      document.body.style.overflow = "hidden", f(!0);
+      const t = setTimeout(() => {
+        m(!0);
+        const e = n.current?.querySelectorAll(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
+        e?.length ? e[0].focus() : n.current?.focus();
+      }, 0);
+      return () => clearTimeout(t);
+    } else {
+      m(!1);
+      const t = setTimeout(() => {
+        f(!1), document.body.style.overflow = "", b.current?.focus();
+      }, 300);
+      return () => clearTimeout(t);
+    }
+  }, [r]), l(() => () => {
+    document.body.style.overflow = "";
+  }, []);
+  const A = (t) => {
+    t.target === t.currentTarget && s(!1);
+  };
+  if (l(() => {
+    const t = (e) => {
+      if (e.key === "Escape" && r) {
+        s(!1);
+        return;
+      }
+      if (e.key === "Tab" && r && n.current) {
+        const a = Array.from(
+          n.current.querySelectorAll(
+            'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+          )
+        ).filter((h) => !h.hasAttribute("disabled") && h.getAttribute("aria-hidden") !== "true");
+        if (!a.length) {
+          e.preventDefault(), n.current.focus();
+          return;
+        }
+        const x = a[0], y = a[a.length - 1], u = document.activeElement;
+        if (e.shiftKey) {
+          (!u || u === x) && (e.preventDefault(), y.focus());
+          return;
+        }
+        u === y && (e.preventDefault(), x.focus());
+      }
+    };
+    if (r)
+      return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [r, s]), !k)
+    return null;
+  const C = o(
+    "fixed inset-0 w-screen h-dvh transition-opacity duration-300 ease-out",
+    i ? "opacity-100" : "opacity-0",
+    c ?? (d ? "bg-gray-700/10 backdrop-blur-xs" : "")
+  ), T = o(
+    "fixed inset-y-0 h-dvh max-h-dvh w-full max-w-full min-[500px]:w-auto pointer-events-none transition-transform duration-300 ease-out",
+    E === "left" ? o(
+      "ltr:left-0 rtl:right-0",
+      i ? "ltr:translate-x-0 rtl:translate-x-0" : "ltr:-translate-x-full rtl:translate-x-full"
+    ) : o(
+      "ltr:right-0 rtl:left-0",
+      i ? "translate-x-0" : "ltr:translate-x-full rtl:-translate-x-full"
+    )
+  );
+  return S(/* @__PURE__ */ D(F, { children: [
+    (d || c) && /* @__PURE__ */ v(
+      "div",
+      {
+        className: C,
+        onClick: A,
+        "aria-hidden": "true",
+        style: { zIndex: 50 }
+      }
+    ),
+    /* @__PURE__ */ v(
+      "div",
+      {
+        ref: n,
+        "data-tucu": "drawer",
+        className: T,
+        style: { zIndex: 51 },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Sidebar",
+        tabIndex: -1,
+        children: p
+      }
+    )
+  ] }), document.body);
+}
+export {
+  L as DrawerContainer
+};

package/components/dialog/drawer.mjs

@@ -0,0 +1,82 @@
+import { jsx as e } from "react/jsx-runtime";
+import { DrawerContainer as T } from "./drawer-container.mjs";
+import { Sidebar as b } from "./sidebar.mjs";
+import { SidebarMenu as l } from "./sidebar-menu.mjs";
+import { useTheme as A } from "../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as p } from "../../themes/config/index.mjs";
+function E({
+  onClose: c,
+  children: a,
+  type: O,
+  className: o,
+  menuItems: w,
+  position: r = "left",
+  title: m,
+  actionContent: s,
+  backdrop: C = !0,
+  logo: u,
+  isOpen: D,
+  setIsOpen: t
+}) {
+  const { layout: d } = A(), n = d === p.MACOS_TAHOE || d === p.MACOS_TAHOE_DOCK, f = () => {
+    t(!1), c?.();
+  };
+  return /* @__PURE__ */ e(
+    T,
+    {
+      isOpen: D,
+      setIsOpen: t,
+      position: r,
+      backdrop: n ? !1 : C,
+      backdropClassName: n ? "backdrop-blur-[2px] bg-transparent" : void 0,
+      children: (() => {
+        switch (O) {
+          case "sidebar":
+            return /* @__PURE__ */ e(
+              b,
+              {
+                onClose: f,
+                children: a,
+                className: o,
+                title: m,
+                logo: u,
+                actionContent: s,
+                position: r
+              }
+            );
+          case "sidebar-menu":
+            return /* @__PURE__ */ e(
+              l,
+              {
+                onClose: f,
+                children: a,
+                className: o,
+                menuItems: w || [],
+                title: m,
+                logo: u,
+                actionContent: s,
+                position: r
+              }
+            );
+          default:
+            return /* @__PURE__ */ e(
+              b,
+              {
+                onClose: f,
+                children: a,
+                className: o,
+                title: m,
+                logo: u,
+                actionContent: s,
+                position: r
+              }
+            );
+        }
+      })()
+    }
+  );
+}
+export {
+  E as Drawer,
+  E as default
+};

package/components/dialog/modal.mjs

@@ -0,0 +1,205 @@
+import { jsxs as d, Fragment as q, jsx as e } from "react/jsx-runtime";
+import { useState as C, useRef as N, useEffect as n, useCallback as p } from "react";
+import { createPortal as D } from "react-dom";
+import { CardContainer as G } from "../cards/card-container.mjs";
+import l from "classnames";
+import { Close as H } from "../icons/close.mjs";
+import { Typography as J } from "../typography/index.mjs";
+import { Button as h } from "../buttons/button/index.mjs";
+const K = ({
+  isOpen: t,
+  text: a,
+  closeable: o = !0,
+  hideButtons: E = !1,
+  children: T,
+  buttonContainer: c,
+  className: j,
+  titleContainerClassName: z,
+  contentClassName: I,
+  hideCloseButton: A = !1,
+  setIsOpen: s,
+  onSubmit: x,
+  onBack: y,
+  onClose: u
+}) => {
+  const [R, v] = C(!1), [w, b] = C(!1), m = N(null), f = N(null);
+  n(() => {
+    t && (f.current = document.activeElement);
+  }, [t]), n(() => {
+    !t && f.current && f.current.focus();
+  }, [t]), n(() => {
+    if (t) {
+      document.body.style.overflow = "hidden", v(!0);
+      const r = setTimeout(() => {
+        b(!0), m.current && m.current.focus();
+      }, 0);
+      return () => clearTimeout(r);
+    } else {
+      b(!1);
+      const r = setTimeout(() => {
+        v(!1), document.body.style.overflow = "";
+      }, 200);
+      return () => clearTimeout(r);
+    }
+  }, [t]), n(() => () => {
+    document.body.style.overflow = "";
+  }, []);
+  const B = p(() => {
+    s(!1);
+  }, [s]), i = p(() => {
+    u && u(), o && s(!1);
+  }, [u, o, s]), F = p(
+    (r) => {
+      r.target === r.currentTarget && o && i();
+    },
+    [o, i]
+  );
+  if (n(() => {
+    const r = (P) => {
+      P.key === "Escape" && t && o && i();
+    };
+    if (t)
+      return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [t, o, i]), !R)
+    return null;
+  const g = "modal-title", k = "modal-description", L = l(
+    "fixed inset-0 w-screen h-screen bg-gray-700/10 backdrop-blur-xs transition-opacity duration-300 ease-out",
+    w ? "opacity-100" : "opacity-0"
+  ), M = l(
+    "fixed inset-0 flex items-center justify-center p-[16px] transition-all duration-300 ease-out pointer-events-none",
+    w ? "opacity-100 scale-100" : "opacity-0 scale-105"
+  ), V = /* @__PURE__ */ d(q, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        "data-tucu": "modal-overlay",
+        className: L,
+        onClick: F,
+        "aria-hidden": "true",
+        style: { zIndex: 50 }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: M,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": a?.title ? g : void 0,
+        "aria-describedby": a?.content ? k : void 0,
+        style: { zIndex: 51 },
+        children: /* @__PURE__ */ d(
+          G,
+          {
+            "data-tucu": "modal",
+            className: l(
+              "relative w-full sm:max-w-[800px] h-fit! rounded-xl shadow-card pointer-events-auto",
+              j
+            ),
+            children: [
+              /* @__PURE__ */ d(
+                "span",
+                {
+                  ref: m,
+                  id: g,
+                  className: l(
+                    "flex w-full h-fit justify-between items-start pb-3 dark:text-white text-current",
+                    a?.title ? " border-b border-border" : "text-transparent dark:text-transparent",
+                    z
+                  ),
+                  tabIndex: -1,
+                  children: [
+                    /* @__PURE__ */ e(
+                      J,
+                      {
+                        tag: "span",
+                        className: "font-bold font-figtree text-[22px] font-600 leading-[100%] tracking-[0.022px]",
+                        children: a?.title || ""
+                      }
+                    ),
+                    !A && /* @__PURE__ */ e(
+                      h,
+                      {
+                        variant: "transparent",
+                        size: "mini",
+                        shape: "circle",
+                        onClick: i,
+                        "aria-label": o ? "Close modal" : "Close",
+                        children: /* @__PURE__ */ e(
+                          H,
+                          {
+                            className: "h-[18px] w-[18px] cursor-pointer text-gray-500 dark:text-gray-200",
+                            "aria-hidden": "true",
+                            width: 18,
+                            height: 18
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              a?.content && /* @__PURE__ */ e(
+                "p",
+                {
+                  id: k,
+                  className: "mt-[16px] text-sm/6 dark:text-white text-current",
+                  children: a.content
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: l(
+                    "flex flex-col w-full overflow-x-hidden overflow-y-auto max-h-[60vh] p-[8px] dark:text-white text-current mt-[16px]",
+                    I
+                  ),
+                  children: T
+                }
+              ),
+              c && /* @__PURE__ */ e("div", { className: "mt-[24px]", children: c }),
+              !E && !c && /* @__PURE__ */ d(
+                "div",
+                {
+                  "data-tucu": "modal-buttons",
+                  className: "mt-auto pt-6 flex w-full justify-end gap-[8px]",
+                  children: [
+                    /* @__PURE__ */ e(
+                      h,
+                      {
+                        size: "medium",
+                        shape: "rounded",
+                        variant: "ghost",
+                        onClick: () => {
+                          B(), y && y();
+                        },
+                        children: a?.backButton || "Close"
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      h,
+                      {
+                        size: "medium",
+                        shape: "rounded",
+                        onClick: () => {
+                          x && x();
+                        },
+                        children: a?.button || "Accept"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+  return D(V, document.body);
+};
+K.displayName = "Modal";
+export {
+  K as Modal,
+  K as default
+};