@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/components/notifications/toast.mjs

@@ -0,0 +1,92 @@
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { useState as b, useCallback as c, useEffect as h } from "react";
+import { useToastStore as p } from "../../hooks/use-toast-store.mjs";
+import { Close as g } from "../icons/close.mjs";
+const x = () => {
+  const { toasts: s, dismissToast: o } = p(), [d, n] = b([]), u = typeof document < "u" && (document.documentElement.classList.contains("macos") || document.documentElement.classList.contains("macos-tahoe")), m = (e) => {
+    switch (e) {
+      case "destructive":
+        return "border-red-500 bg-red-500 text-white";
+      case "success":
+        return "border-green-500 bg-green-500 text-white";
+      case "warning":
+        return "border-yellow-500 bg-yellow-500 text-white";
+      case "info":
+        return "border-blue-500 bg-blue-500 text-white";
+      default:
+        return "border-border bg-white p-4 shadow-card dark:bg-light-dark";
+    }
+  }, a = c(
+    (e) => {
+      n(
+        (t) => t.map(
+          (r) => r.id === e.id ? { ...r, dismissing: !0 } : r
+        )
+      ), setTimeout(() => {
+        o(e.id);
+      }, 500);
+    },
+    [o]
+  ), f = c(
+    (e, t) => {
+      (e.key === "Escape" || e.key === " " || e.key === "Enter") && (e.preventDefault(), a(t));
+    },
+    [a]
+  );
+  return h(() => {
+    n(s);
+    const e = s.map((t) => {
+      const r = setTimeout(() => {
+        a(t);
+      }, t.timeout);
+      return { id: t.id, timer: r };
+    });
+    return () => {
+      e.forEach(({ timer: t }) => clearTimeout(t));
+    };
+  }, [s, a]), u ? null : /* @__PURE__ */ i(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Notifications",
+      "data-tucu": "toast-container",
+      className: "fixed top-4 right-4 flex w-[360px] flex-col gap-2 z-50",
+      children: d.map((e, t) => /* @__PURE__ */ l(
+        "div",
+        {
+          role: "alert",
+          "aria-live": "assertive",
+          "aria-atomic": "true",
+          "data-tucu": "toast",
+          "data-variant": e.variant,
+          className: `relative flex items-center justify-between space-x-2 border-border p-4 pr-6 rounded-md shadow-lg transform transition-all duration-300 ease-out 
+            ${e.dismissing ? "translate-x-[120%] opacity-0 scale-95" : "translate-x-0 opacity-100 scale-100"} 
+            ${m(e.variant)}`,
+          children: [
+            /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ i("span", { className: "dark:text-light mb-1 font-semibold text-md", children: e.title }),
+              /* @__PURE__ */ i("span", { className: "dark:text-light mr-3 font-normal text-sm", children: e.message })
+            ] }),
+            /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                className: "absolute right-3 top-3 p-1 rounded focus:outline-hidden focus:ring-2 focus:ring-current focus:ring-offset-1",
+                onClick: () => a(e),
+                onKeyDown: (r) => f(r, e),
+                "aria-label": `Dismiss ${e.title} notification`,
+                children: /* @__PURE__ */ i(g, { "aria-hidden": "true" })
+              }
+            )
+          ]
+        },
+        t
+      ))
+    }
+  );
+};
+x.displayName = "Toast";
+export {
+  x as Toast,
+  x as default
+};

package/components/table/basic-table.mjs

@@ -0,0 +1,346 @@
+import { jsxs as g, Fragment as F, jsx as r } from "react/jsx-runtime";
+import { useState as V, useRef as z, useCallback as Y } from "react";
+import o from "classnames";
+import { LAYOUT_OPTIONS as E } from "../../themes/config/index.mjs";
+import { useTheme as q } from "../../themes/hooks/use-theme.mjs";
+const ee = ({
+  columns: d,
+  data: y,
+  rounded: m = !0,
+  border: s = !0,
+  className: _,
+  tableClassName: C,
+  headerClassName: L,
+  rowClassName: f,
+  containerClassName: A,
+  showHeader: p = !0,
+  hoverable: v = !0,
+  striped: x = !1,
+  maxRows: D = 10,
+  resizable: i = !0
+}) => {
+  const { layout: S } = q(), X = S === E.MACOS_TAHOE || S === E.MACOS_TAHOE_DOCK, [c, H] = V(
+    () => d.reduce((e, t) => (e[t.key] = t.width ?? 0, e), {})
+  ), k = z(null), w = z({}), M = Y(
+    (e, t) => {
+      e.preventDefault(), e.stopPropagation();
+      const l = w.current[t], a = c[t] || l?.getBoundingClientRect().width || 100;
+      k.current = {
+        key: t,
+        startX: e.clientX,
+        startWidth: a
+      };
+      const b = (h) => {
+        if (!k.current) return;
+        const { key: u, startX: j, startWidth: B } = k.current, P = d.find((N) => N.key === u)?.minWidth ?? 40, U = h.clientX - j, $ = Math.max(P, B + U);
+        H((N) => ({
+          ...N,
+          [u]: $
+        }));
+      }, n = () => {
+        k.current = null, document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", n), document.body.style.cursor = "", document.body.style.userSelect = "";
+      };
+      document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", b), document.addEventListener("mouseup", n);
+    },
+    [c, d]
+  ), R = (e, t) => {
+    const l = o("transition-colors", {
+      "hover:bg-gray-50/40 dark:hover:bg-gray-800/30": v,
+      "bg-gray-50/30 dark:bg-gray-800/20": x && t % 2 === 0
+    });
+    return typeof f == "function" ? o(l, f(e, t)) : o(l, f);
+  }, O = (e, t) => t[e.key], T = (e) => e.selected === !0 || e.isSelected === !0, W = D * 40;
+  return /* @__PURE__ */ g(F, { children: [
+    /* @__PURE__ */ r(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+        .basic-table-scroll::-webkit-scrollbar {
+          height: 8px;
+          width: 8px;
+        }
+        .basic-table-scroll::-webkit-scrollbar-track {
+          background: rgba(0, 0, 0, 0.05);
+          border-radius: 4px;
+        }
+        .basic-table-scroll::-webkit-scrollbar-thumb {
+          background-color: rgba(0, 0, 0, 0.2);
+          border-radius: 4px;
+        }
+        .basic-table-scroll::-webkit-scrollbar-thumb:hover {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+        .dark .basic-table-scroll::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.05);
+        }
+        .dark .basic-table-scroll::-webkit-scrollbar-thumb {
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+        .dark .basic-table-scroll::-webkit-scrollbar-thumb:hover {
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+        .basic-table-resize-handle {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 6px;
+          cursor: col-resize;
+          user-select: none;
+          z-index: 2;
+        }
+        .basic-table-resize-handle::after {
+          content: '';
+          position: absolute;
+          right: 2px;
+          top: 25%;
+          bottom: 25%;
+          width: 2px;
+          border-radius: 1px;
+          background: transparent;
+          transition: background-color 150ms ease;
+        }
+        .basic-table-resize-handle:hover::after {
+          background: rgba(0, 0, 0, 0.2);
+        }
+        .dark .basic-table-resize-handle:hover::after {
+          background: rgba(255, 255, 255, 0.25);
+        }
+      `
+        }
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        "data-tucu": "table-scroll",
+        className: o(
+          "overflow-x-auto basic-table-scroll min-w-0",
+          A,
+          _
+        ),
+        style: {
+          scrollbarWidth: "thin",
+          scrollbarColor: "var(--basic-table-scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--basic-table-scrollbar-track, rgba(0, 0, 0, 0.05))"
+        },
+        children: m ? /* @__PURE__ */ r(
+          "div",
+          {
+            "data-tucu": "table",
+            "data-rounded": m ? "true" : "false",
+            "data-border": s ? "true" : "false",
+            "data-striped": x ? "true" : "false",
+            "data-hoverable": v ? "true" : "false",
+            "data-show-header": p ? "true" : "false",
+            className: o(
+              "overflow-hidden relative z-0 isolate",
+              X ? "rounded-2xl" : "rounded-lg",
+              s && "border border-border"
+            ),
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                className: "overflow-x-auto overflow-y-auto",
+                style: { maxHeight: `${W}px` },
+                children: /* @__PURE__ */ g(
+                  "table",
+                  {
+                    "data-tucu": "table-element",
+                    className: o(
+                      "w-full border-separate border-spacing-0",
+                      !i && "min-w-max",
+                      C
+                    ),
+                    style: { tableLayout: i ? "fixed" : void 0 },
+                    children: [
+                      i && /* @__PURE__ */ r("colgroup", { children: d.map((e) => /* @__PURE__ */ r(
+                        "col",
+                        {
+                          style: c[e.key] ? { width: c[e.key] } : void 0
+                        },
+                        e.key
+                      )) }),
+                      p && /* @__PURE__ */ r(
+                        "thead",
+                        {
+                          "data-tucu": "table-header",
+                          className: "sticky top-0 z-10 bg-gray-100 dark:bg-gray-800",
+                          children: /* @__PURE__ */ r("tr", { className: o(L), children: d.map((e, t) => {
+                            const l = t === d.length - 1;
+                            return /* @__PURE__ */ g(
+                              "th",
+                              {
+                                ref: (a) => {
+                                  w.current[e.key] = a;
+                                },
+                                "data-tucu": "table-header-cell",
+                                className: o(
+                                  "px-3 py-2 text-left text-[11px] font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider relative",
+                                  s && "border-b border-border",
+                                  s && !l && "border-r border-r-gray-200 dark:border-r-gray-700",
+                                  e.headerClassName
+                                ),
+                                style: c[e.key] ? { width: c[e.key] } : void 0,
+                                children: [
+                                  /* @__PURE__ */ r("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap block", children: e.label }),
+                                  i && !l && /* @__PURE__ */ r(
+                                    "div",
+                                    {
+                                      className: "basic-table-resize-handle",
+                                      onMouseDown: (a) => M(a, e.key)
+                                    }
+                                  )
+                                ]
+                              },
+                              e.key
+                            );
+                          }) })
+                        }
+                      ),
+                      /* @__PURE__ */ r("tbody", { children: y.map((e, t) => {
+                        const l = t === y.length - 1;
+                        return /* @__PURE__ */ r(
+                          "tr",
+                          {
+                            "data-tucu": "table-row",
+                            "data-selected": T(e) ? "true" : void 0,
+                            className: R(e, t),
+                            children: d.map((a, b) => {
+                              const n = O(a, e), h = a.render ? a.render(n, e, t) : String(n ?? ""), u = b === d.length - 1;
+                              return /* @__PURE__ */ r(
+                                "td",
+                                {
+                                  "data-tucu": "table-cell",
+                                  className: o(
+                                    "px-3 py-2 text-sm text-gray-700 dark:text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap",
+                                    s && "border-b border-border dark:border-border/60",
+                                    s && !u && "border-r border-border dark:border-border/60",
+                                    s && l && "border-b-0",
+                                    a.className
+                                  ),
+                                  children: h
+                                },
+                                a.key
+                              );
+                            })
+                          },
+                          t
+                        );
+                      }) })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ) : /* @__PURE__ */ r(
+          "div",
+          {
+            "data-tucu": "table",
+            "data-rounded": m ? "true" : "false",
+            "data-border": s ? "true" : "false",
+            "data-striped": x ? "true" : "false",
+            "data-hoverable": v ? "true" : "false",
+            "data-show-header": p ? "true" : "false",
+            className: o("overflow-x-auto overflow-y-auto"),
+            style: { maxHeight: `${W}px` },
+            children: /* @__PURE__ */ g(
+              "table",
+              {
+                "data-tucu": "table-element",
+                className: o(
+                  "w-full border-collapse",
+                  !i && "min-w-max",
+                  s && "border border-border",
+                  C
+                ),
+                style: { tableLayout: i ? "fixed" : void 0 },
+                children: [
+                  i && /* @__PURE__ */ r("colgroup", { children: d.map((e) => /* @__PURE__ */ r(
+                    "col",
+                    {
+                      style: c[e.key] ? { width: c[e.key] } : void 0
+                    },
+                    e.key
+                  )) }),
+                  p && /* @__PURE__ */ r(
+                    "thead",
+                    {
+                      "data-tucu": "table-header",
+                      className: "sticky top-0 z-10 bg-gray-100 dark:bg-gray-800",
+                      children: /* @__PURE__ */ r("tr", { className: o(L), children: d.map((e, t) => {
+                        const l = t === d.length - 1;
+                        return /* @__PURE__ */ g(
+                          "th",
+                          {
+                            ref: (a) => {
+                              w.current[e.key] = a;
+                            },
+                            "data-tucu": "table-header-cell",
+                            className: o(
+                              "px-3 py-2 text-left text-[11px] font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider relative",
+                              s && "border-r border-b border-border",
+                              s && l && "border-r-0",
+                              e.headerClassName
+                            ),
+                            style: c[e.key] ? { width: c[e.key] } : void 0,
+                            children: [
+                              /* @__PURE__ */ r("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap block", children: e.label }),
+                              i && !l && /* @__PURE__ */ r(
+                                "div",
+                                {
+                                  className: "basic-table-resize-handle",
+                                  onMouseDown: (a) => M(a, e.key)
+                                }
+                              )
+                            ]
+                          },
+                          e.key
+                        );
+                      }) })
+                    }
+                  ),
+                  /* @__PURE__ */ r("tbody", { children: y.map((e, t) => {
+                    const l = t === y.length - 1;
+                    return /* @__PURE__ */ r(
+                      "tr",
+                      {
+                        "data-tucu": "table-row",
+                        "data-selected": T(e) ? "true" : void 0,
+                        className: R(e, t),
+                        children: d.map((a, b) => {
+                          const n = O(a, e), h = a.render ? a.render(n, e, t) : String(n ?? ""), u = b === d.length - 1;
+                          return /* @__PURE__ */ r(
+                            "td",
+                            {
+                              "data-tucu": "table-cell",
+                              className: o(
+                                "px-3 py-2 text-sm text-gray-700 dark:text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap",
+                                s && "border-r border-b border-border dark:border-border/60",
+                                s && u && "border-r-0",
+                                s && l && "border-b-0",
+                                a.className
+                              ),
+                              children: h
+                            },
+                            a.key
+                          );
+                        })
+                      },
+                      t
+                    );
+                  }) })
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  ee as BasicTable,
+  ee as default
+};

package/components/tabs/param-tab.mjs

@@ -0,0 +1,69 @@
+import { jsxs as C, jsx as t, Fragment as L } from "react/jsx-runtime";
+import { useMemo as k, useRef as N, useState as R, useCallback as j, useEffect as v } from "react";
+import { useNavigate as y, useLocation as d } from "react-router-dom";
+import { TabGroup as E, TabList as U, TabItem as q, TabPanels as B } from "./tab.mjs";
+import { TabPanel as X } from "./tab.mjs";
+import { useIsMounted as F } from "../../hooks/use-is-mounted.mjs";
+import { TabSelect as G } from "./tab-select.mjs";
+import { useBreakpoint as O } from "../../hooks/use-breakpoint.mjs";
+function M({
+  tabMenu: n,
+  children: u,
+  tabListClassName: h,
+  variant: o = "underline",
+  size: p = "medium",
+  showMobileSelect: f = !0
+}) {
+  const x = y(), T = d().pathname, c = d().search, r = k(() => new URLSearchParams(c), [c]), a = r.get("view"), b = F(), S = O(), g = N(null), [i, w] = R(0), I = j(
+    (e, s) => {
+      const l = new URLSearchParams(r);
+      return l.set(e, s), l.toString();
+    },
+    [r]
+  );
+  function m(e) {
+    x(T + "?" + I("view", n[e].path), {
+      replace: !0
+    });
+  }
+  v(() => {
+    if (a) {
+      const e = n.findIndex((s) => a === s.path);
+      e !== -1 && w(e);
+    }
+  }, [a, n]);
+  const P = f && b && ["xs", "sm"].indexOf(S) !== -1;
+  return /* @__PURE__ */ C(
+    E,
+    {
+      variant: o,
+      selectedIndex: i,
+      onChange: (e) => m(e),
+      children: [
+        /* @__PURE__ */ t(U, { variant: o, className: h, children: P ? /* @__PURE__ */ t("div", { ref: g, className: "w-full", children: /* @__PURE__ */ t(
+          G,
+          {
+            tabMenu: n,
+            selectedTabIndex: i,
+            onChange: (e) => m(e)
+          }
+        ) }) : /* @__PURE__ */ t(L, { children: n.map((e) => /* @__PURE__ */ t(
+          q,
+          {
+            variant: o,
+            size: p,
+            icon: e.icon,
+            children: e.title
+          },
+          e.path
+        )) }) }),
+        /* @__PURE__ */ t(B, { children: u })
+      ]
+    }
+  );
+}
+export {
+  M as ParamTab,
+  X as TabPanel,
+  M as default
+};

package/components/tabs/tab-select.mjs

@@ -0,0 +1,181 @@
+import { jsx as f, jsxs as H } from "react/jsx-runtime";
+import { forwardRef as z, useState as g, useRef as w, useImperativeHandle as O, useCallback as l, useEffect as m } from "react";
+import { createPortal as U } from "react-dom";
+import x from "classnames";
+import { ChevronDown as B } from "../icons/chevron-down.mjs";
+const K = z(
+  ({
+    tabMenu: c,
+    selectedTabIndex: d,
+    onChange: D
+  }, R) => {
+    const [r, E] = g(!1), [S, b] = g(!1), [o, s] = g(-1), [N, A] = g({}), a = w(null), h = w(null), y = w([]), L = w(null);
+    O(R, () => L.current);
+    const u = l(() => {
+      if (!a.current) return;
+      const e = a.current.getBoundingClientRect(), t = 200, i = window.innerHeight - e.bottom, p = e.top, k = i < t && p > i;
+      A({
+        position: "fixed",
+        ...k ? { bottom: window.innerHeight - e.top + 4 } : { top: e.bottom + 4 },
+        left: e.left,
+        width: e.width,
+        zIndex: 9999
+      });
+    }, []), v = l(() => {
+      u(), s(d), b(!1), E(!0);
+    }, [d, u]), n = l(() => {
+      b(!0);
+      const e = setTimeout(() => {
+        E(!1), b(!1), s(-1);
+      }, 100);
+      return () => clearTimeout(e);
+    }, []), I = l(() => {
+      r ? n() : v();
+    }, [r, v, n]), C = l(
+      (e) => {
+        D(e), n(), a.current?.focus();
+      },
+      [D, n]
+    );
+    m(() => {
+      if (!r) return;
+      const e = (t) => {
+        a.current && !a.current.contains(t.target) && h.current && !h.current.contains(t.target) && n();
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [r, n]), m(() => {
+      if (!r) return;
+      const e = (t) => {
+        t.key === "Escape" && (n(), a.current?.focus());
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [r, n]), m(() => {
+      if (!r) return;
+      const e = () => u();
+      return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+        window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+      };
+    }, [r, u]), m(() => {
+      o >= 0 && y.current[o] && y.current[o]?.scrollIntoView({
+        block: "nearest"
+      });
+    }, [o]);
+    const $ = (e) => {
+      if (!r) {
+        switch (e.key) {
+          case "ArrowDown":
+          case "ArrowUp":
+          case "Enter":
+          case " ":
+            e.preventDefault(), v();
+            break;
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), s(
+            (t) => t < c.length - 1 ? t + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault(), s(
+            (t) => t > 0 ? t - 1 : c.length - 1
+          );
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), o >= 0 && C(o);
+          break;
+        case "Escape":
+        case "Tab":
+          e.preventDefault(), n();
+          break;
+        case "Home":
+          e.preventDefault(), s(0);
+          break;
+        case "End":
+          e.preventDefault(), s(c.length - 1);
+          break;
+      }
+    }, j = r && U(
+      /* @__PURE__ */ f(
+        "div",
+        {
+          ref: h,
+          id: "tab-select-listbox",
+          role: "listbox",
+          tabIndex: -1,
+          "aria-activedescendant": o >= 0 ? `tab-select-option-${o}` : void 0,
+          style: N,
+          className: x(
+            "max-h-52 overflow-auto rounded-xl border border-border bg-white p-1.5 shadow-large dark:bg-gray-800",
+            "transition ease-in duration-100",
+            S ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"
+          ),
+          children: c.map((e, t) => {
+            const i = t === d, p = t === o;
+            return /* @__PURE__ */ f(
+              "button",
+              {
+                id: `tab-select-option-${t}`,
+                ref: (k) => {
+                  y.current[t] = k;
+                },
+                type: "button",
+                role: "option",
+                "aria-selected": i,
+                onClick: () => C(t),
+                onMouseEnter: () => s(t),
+                className: x(
+                  "w-full cursor-pointer rounded-lg px-4 py-2.5 text-left text-sm transition-colors",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand",
+                  i && "bg-gray-100 dark:bg-gray-700 font-medium text-gray-900 dark:text-white",
+                  !i && p && "bg-gray-200/70 dark:bg-gray-600/60 text-gray-900 dark:text-gray-100",
+                  !i && !p && "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                ),
+                children: e.title
+              },
+              `${e.path}-${t}`
+            );
+          })
+        }
+      ),
+      document.body
+    );
+    return /* @__PURE__ */ H("div", { ref: L, children: [
+      /* @__PURE__ */ H(
+        "button",
+        {
+          ref: a,
+          type: "button",
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": r,
+          "aria-controls": "tab-select-listbox",
+          onClick: I,
+          onKeyDown: $,
+          className: "flex w-full items-center justify-between rounded-lg border-2 border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 sm:px-5 sm:py-3.5",
+          children: [
+            /* @__PURE__ */ f("span", { className: "text-gray-900 dark:text-gray-100", children: c[d]?.title ?? c[0]?.title }),
+            /* @__PURE__ */ f(
+              B,
+              {
+                className: x(
+                  "h-auto w-3.5 transition-transform duration-200",
+                  r && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      j
+    ] });
+  }
+);
+K.displayName = "TabSelect";
+export {
+  K as TabSelect,
+  K as default
+};