@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/common/badge.mjs

@@ -0,0 +1,89 @@
+import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import l from "classnames";
+const y = {
+  rounded: "rounded-md",
+  pill: "rounded-full",
+  circle: "rounded-full"
+}, h = {
+  tiny: ["text-xs px-1.5 py-0.5 h-4", "w-2 h-2"],
+  small: ["text-xs px-2 py-1 h-5", "w-2.5 h-2.5"],
+  medium: ["text-sm px-2.5 py-1 h-6", "w-3 h-3"],
+  large: ["text-base px-3 py-1.5 h-7", "w-3.5 h-3.5"]
+}, f = {
+  primary: ["text-brand", "bg-brand", "border-brand"],
+  success: ["text-green-500", "bg-green-500", "border-green-500"],
+  info: ["text-blue-500", "bg-blue-500", "border-blue-500"],
+  warning: ["text-yellow-500", "bg-yellow-500", "border-yellow-500"],
+  danger: ["text-red-500", "bg-red-500", "border-red-500"],
+  gray: ["text-gray-500", "bg-gray-500", "border-gray-500"],
+  white: ["text-gray-900", "bg-white", "border-white"],
+  "light-dark": [
+    "text-light-dark dark:text-gray-200",
+    "border-light-dark dark:border-border"
+  ]
+}, w = {
+  active: "success",
+  inactive: "danger",
+  pending: "warning",
+  default: "gray"
+}, C = ({
+  children: t,
+  className: n,
+  status: d,
+  color: b,
+  size: g = "small",
+  variant: a = "solid",
+  shape: i = "pill",
+  withDot: s = !1,
+  ...c
+}) => {
+  const x = d ? w[d] : b || "gray", e = f[x], o = h[g];
+  let r = "";
+  switch (a) {
+    case "solid":
+      r = `${e[1]} text-white`;
+      break;
+    case "ghost":
+      r = `bg-transparent border-2 ${e[0]} ${e[2]}`;
+      break;
+    case "outline":
+      r = `bg-transparent border ${e[0]} ${e[2]}`;
+      break;
+    case "soft":
+      r = `${e[1]}/10 ${e[0]} border ${e[2]}/20`;
+      break;
+  }
+  const u = s && !t ? o[1] : "";
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      "data-tucu": "badge",
+      "data-variant": a,
+      className: l(
+        "inline-flex items-center justify-center font-medium transition-all duration-200",
+        y[i],
+        s && !t ? u : o[0],
+        r,
+        n
+      ),
+      ...c,
+      children: [
+        s && t && /* @__PURE__ */ m(
+          "span",
+          {
+            className: l(
+              "rounded-full mr-1.5",
+              o[1],
+              a === "solid" ? "bg-white/80" : e[1]
+            )
+          }
+        ),
+        t
+      ]
+    }
+  );
+};
+export {
+  C as Badge,
+  C as default
+};

package/components/common/collapse.mjs

@@ -0,0 +1,58 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useState as f, useEffect as h } from "react";
+import { useTheme as p } from "../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as a } from "../../themes/config/index.mjs";
+import { Plus as b } from "../icons/plus.mjs";
+import O from "react-use/lib/useMeasure";
+function M({
+  label: n,
+  children: d,
+  initialOpen: s = !1,
+  className: l
+}) {
+  const [e, o] = f(!1), [c, { height: m }] = O(), { layout: t } = p(), u = t === a.MACOS || t === a.MACOS_TAHOE || t === a.MACOS_TAHOE_DOCK ? 24 : 0;
+  return h(() => {
+    s && o(!0);
+  }, [s]), /* @__PURE__ */ i(
+    "div",
+    {
+      "data-tucu": "collapse",
+      "data-open": e ? "true" : "false",
+      className: `ease-[cubic-bezier(0.33, 1, 0.68, 1)] relative mb-5 overflow-hidden rounded-lg bg-white shadow-card transition-all duration-350 last:mb-0 hover:shadow-transaction dark:bg-light-dark ${l} ${e ? "shadow-transaction" : "shadow-card"}`,
+      style: { height: e ? 54 + m + u : 54 },
+      children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            "data-tucu": "collapse-trigger",
+            className: "flex h-13 w-full items-center justify-between px-5 py-2 text-sm font-medium uppercase tracking-wider text-gray-900 dark:text-white",
+            onClick: () => o(!e),
+            children: [
+              n,
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: `shrink-0 transition-transform duration-200 ltr:ml-4 rtl:mr-4 ${e ? "rotate-45" : ""}`,
+                  children: /* @__PURE__ */ r(b, { className: "" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            "data-tucu": "collapse-content",
+            className: `border-t border-dashed ${e ? "border-border" : "border-transparent"}`,
+            ref: c,
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  M as Collapse,
+  M as default
+};

package/components/common/key-value-row.mjs

@@ -0,0 +1,28 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import e from "classnames";
+function l({
+  label: a,
+  value: r,
+  mono: s,
+  accent: n,
+  className: x
+}) {
+  return /* @__PURE__ */ m("div", { className: e("flex items-center justify-between py-1.5", x), children: [
+    /* @__PURE__ */ t("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: a }),
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: e(
+          "text-xs font-medium",
+          s && "font-mono tabular-nums",
+          n ? "text-brand" : "text-gray-900 dark:text-gray-100"
+        ),
+        children: r
+      }
+    )
+  ] });
+}
+export {
+  l as KeyValueRow,
+  l as default
+};

package/components/common/pagination.mjs

@@ -0,0 +1,77 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { ChevronLeft as u, ChevronRight as y } from "lucide-react";
+import l from "classnames";
+function g({
+  currentPage: a,
+  totalPages: r,
+  onPageChange: s,
+  windowSize: e = 2,
+  className: h
+}) {
+  if (r <= 1) return null;
+  const i = [];
+  i.push(1);
+  const d = Math.max(2, a - e), n = Math.min(r - 1, a + e);
+  d > 2 && i.push("ellipsis");
+  for (let t = d; t <= n; t++) i.push(t);
+  return n < r - 1 && i.push("ellipsis"), r > 1 && i.push(r), /* @__PURE__ */ c(
+    "div",
+    {
+      "data-tucu": "pagination",
+      className: l("flex items-center gap-1", h),
+      children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            "data-tucu": "pagination-btn",
+            onClick: () => s(a - 1),
+            disabled: a <= 1,
+            className: "rounded-lg p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            children: /* @__PURE__ */ o(u, { className: "h-4 w-4" })
+          }
+        ),
+        i.map(
+          (t, p) => t === "ellipsis" ? /* @__PURE__ */ o(
+            "span",
+            {
+              "data-tucu": "pagination-ellipsis",
+              className: "px-1 text-gray-500 dark:text-gray-400",
+              children: "..."
+            },
+            `ellipsis-${p}`
+          ) : /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              "data-tucu": "pagination-page",
+              "data-active": t === a,
+              onClick: () => s(t),
+              className: l(
+                "h-8 min-w-8 rounded-lg px-2 text-sm font-medium transition-colors",
+                t === a ? "bg-brand text-white" : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100"
+              ),
+              children: t
+            },
+            t
+          )
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            "data-tucu": "pagination-btn",
+            onClick: () => s(a + 1),
+            disabled: a >= r,
+            className: "rounded-lg p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            children: /* @__PURE__ */ o(y, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  g as Pagination,
+  g as default
+};

package/components/common/scrollbar-native.mjs

@@ -0,0 +1,27 @@
+import { jsx as c } from "react/jsx-runtime";
+import { Scrollbar as n } from "./scrollbar.mjs";
+function d({
+  options: r,
+  style: o,
+  className: t,
+  autoHide: i = "scroll",
+  children: l,
+  ...a
+}) {
+  const e = r?.scrollbars?.autoHide || i;
+  return /* @__PURE__ */ c(
+    n,
+    {
+      style: o,
+      className: t,
+      autoHide: e,
+      direction: "vertical",
+      ...a,
+      children: l
+    }
+  );
+}
+export {
+  d as ScrollbarNative,
+  d as default
+};

package/components/common/scrollbar.mjs

@@ -0,0 +1,196 @@
+import { jsxs as $, jsx as y } from "react/jsx-runtime";
+import { useRef as L, useState as b, useCallback as u, useEffect as _ } from "react";
+import p from "classnames";
+function ot({
+  children: B,
+  style: F,
+  className: G,
+  autoHide: n = "scroll",
+  direction: e = "vertical",
+  scrollbarStyle: M
+}) {
+  const i = L(null), g = L(null), I = L(null), O = L(null), [, j] = b(!1), [J, v] = b(n === "never"), [f, A] = b(!1), [w, K] = b({ x: 0, y: 0 }), [E, P] = b({ x: 0, y: 0 }), [m, C] = b(!1), [W, U] = b({ x: 0, y: 0 }), x = L(null), T = u(() => {
+    if (!i.current || !g.current) return;
+    const t = i.current, o = g.current, h = I.current, d = O.current;
+    if (e === "vertical" || e === "both") {
+      const c = o.scrollHeight, l = t.clientHeight, r = l / c, a = Math.max(r * l, 20), s = t.scrollTop, S = c - l, Y = S > 0 ? s / S * (l - a) : 0;
+      h && (h.style.height = `${a}px`, h.style.transform = `translateY(${Y}px)`, h.style.display = r < 1 ? "block" : "none");
+    }
+    if (e === "horizontal" || e === "both") {
+      const c = o.scrollWidth, l = t.clientWidth, r = l / c, a = Math.max(r * l, 20), s = t.scrollLeft, S = c - l, Y = S > 0 ? s / S * (l - a) : 0;
+      d && (d.style.width = `${a}px`, d.style.transform = `translateX(${Y}px)`, d.style.display = r < 1 ? "block" : "none");
+    }
+  }, [e]), k = u(() => {
+    T(), j(!0), n === "scroll" && (v(!0), x.current && clearTimeout(x.current), x.current = setTimeout(() => {
+      j(!1), !f && !m && v(!1);
+    }, 1e3));
+  }, [n, f, m, T]), V = u((t) => {
+    t.preventDefault(), A(!0), K({ x: t.clientX, y: t.clientY }), P({
+      x: i.current?.scrollLeft || 0,
+      y: i.current?.scrollTop || 0
+    });
+  }, []), z = u(
+    (t) => {
+      if (!f || !i.current || !g.current) return;
+      const o = i.current, h = g.current, d = t.clientX - w.x, c = t.clientY - w.y;
+      if (e === "vertical" || e === "both") {
+        const l = h.scrollHeight, r = o.clientHeight, s = (l - r) / (r - 20);
+        o.scrollTop = E.y + c * s;
+      }
+      if (e === "horizontal" || e === "both") {
+        const l = h.scrollWidth, r = o.clientWidth, s = (l - r) / (r - 20);
+        o.scrollLeft = E.x + d * s;
+      }
+    },
+    [f, w, E, e]
+  ), D = u(() => {
+    A(!1), n === "scroll" && setTimeout(() => v(!1), 1e3);
+  }, [n]), R = u(
+    (t) => {
+      if (t.touches.length === 1) {
+        const o = t.touches[0];
+        C(!0), U({ x: o.clientX, y: o.clientY }), n === "scroll" && v(!0);
+      }
+    },
+    [n]
+  ), N = u(
+    (t) => {
+      if (!(!m || !i.current || !g.current) && (t.preventDefault(), t.touches.length === 1)) {
+        const o = t.touches[0], h = o.clientX - W.x, d = o.clientY - W.y, c = i.current, l = g.current;
+        if (e === "vertical" || e === "both") {
+          const r = l.scrollHeight, a = c.clientHeight, s = r - a;
+          s > 0 && (c.scrollTop = Math.max(
+            0,
+            Math.min(s, c.scrollTop - d)
+          ));
+        }
+        if (e === "horizontal" || e === "both") {
+          const r = l.scrollWidth, a = c.clientWidth, s = r - a;
+          s > 0 && (c.scrollLeft = Math.max(
+            0,
+            Math.min(s, c.scrollLeft - h)
+          ));
+        }
+        U({ x: o.clientX, y: o.clientY });
+      }
+    },
+    [m, W, e]
+  ), X = u(() => {
+    C(!1), n === "scroll" && setTimeout(() => v(!1), 1e3);
+  }, [n]), Q = u(() => {
+    (n === "move" || n === "leave") && v(!0);
+  }, [n]), Z = u(() => {
+    n === "leave" && !f && !m && v(!1);
+  }, [n, f, m]);
+  _(() => {
+    const t = i.current;
+    if (!t) return;
+    const o = new ResizeObserver(T);
+    return o.observe(t), t.addEventListener("scroll", k), document.addEventListener("mousemove", z), document.addEventListener("mouseup", D), document.addEventListener("touchmove", N, { passive: !1 }), document.addEventListener("touchend", X), T(), () => {
+      o.disconnect(), t.removeEventListener("scroll", k), document.removeEventListener("mousemove", z), document.removeEventListener("mouseup", D), document.removeEventListener("touchmove", N), document.removeEventListener("touchend", X), x.current && clearTimeout(x.current);
+    };
+  }, [
+    k,
+    z,
+    D,
+    N,
+    X,
+    T
+  ]);
+  const q = J || n === "never";
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: p("relative", G),
+      style: { overflow: "hidden", ...F },
+      onMouseEnter: Q,
+      onMouseLeave: Z,
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            ref: i,
+            className: p(
+              "h-full max-h-[inherit] w-full overflow-auto scrollbar-hide",
+              "touch-pan-xy"
+            ),
+            onTouchStart: R,
+            style: {
+              WebkitOverflowScrolling: "touch",
+              touchAction: "pan-y pan-x"
+            },
+            children: /* @__PURE__ */ y("div", { ref: g, children: B })
+          }
+        ),
+        (e === "vertical" || e === "both") && /* @__PURE__ */ $(
+          "div",
+          {
+            className: p(
+              "absolute right-0.5 top-0.5 bottom-0.5 w-1.5 transition-opacity duration-300 z-10 rounded-full",
+              q ? "opacity-100" : "opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ y(
+                "div",
+                {
+                  className: "absolute right-0 top-0 w-full h-full rounded-full",
+                  style: { ...M?.track }
+                }
+              ),
+              /* @__PURE__ */ y(
+                "div",
+                {
+                  ref: I,
+                  className: p(
+                    "absolute right-0 top-0 w-full rounded-full cursor-pointer transition-colors duration-200",
+                    "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500",
+                    (f || m) && "bg-gray-400 dark:bg-gray-500"
+                  ),
+                  style: M?.thumb,
+                  onMouseDown: V,
+                  onTouchStart: R
+                }
+              )
+            ]
+          }
+        ),
+        (e === "horizontal" || e === "both") && /* @__PURE__ */ $(
+          "div",
+          {
+            className: p(
+              "absolute bottom-0.5 left-0.5 right-0.5 h-1.5 transition-opacity duration-300 z-10 rounded-full",
+              q ? "opacity-100" : "opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ y(
+                "div",
+                {
+                  className: "absolute bottom-0 left-0 h-full w-full rounded-full",
+                  style: { ...M?.track }
+                }
+              ),
+              /* @__PURE__ */ y(
+                "div",
+                {
+                  ref: O,
+                  className: p(
+                    "absolute bottom-0 left-0 h-full rounded-full cursor-pointer transition-colors duration-200",
+                    "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500",
+                    (f || m) && "bg-gray-400 dark:bg-gray-500"
+                  ),
+                  style: M?.thumb,
+                  onMouseDown: V,
+                  onTouchStart: R
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ot as Scrollbar,
+  ot as default
+};

package/components/common/skeleton.mjs

@@ -0,0 +1,70 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import h from "classnames";
+const v = {
+  rectangle: "rounded-none",
+  circle: "rounded-full",
+  text: "rounded-sm h-4",
+  rounded: "rounded-md"
+}, b = {
+  tiny: "h-4",
+  small: "h-8",
+  medium: "h-16",
+  large: "h-32",
+  full: "h-full"
+}, p = {
+  pulse: "animate-pulse",
+  wave: "skeleton-wave",
+  shimmer: "skeleton-shimmer",
+  none: ""
+};
+function x({
+  animation: e = "shimmer",
+  shape: u = "rounded",
+  size: c = "medium",
+  width: r,
+  height: n,
+  count: s = 1,
+  className: g,
+  ...t
+}) {
+  const l = h(
+    "bg-gray-200 dark:bg-gray-800 w-full relative overflow-hidden",
+    v[u],
+    !n && b[c],
+    p[e],
+    g
+  ), i = {
+    ...r && { width: r },
+    ...n && { height: n }
+  }, d = e === "shimmer" && /* @__PURE__ */ a(
+    "div",
+    {
+      className: "absolute inset-0 -translate-x-full",
+      style: {
+        background: "linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%)",
+        animation: "shimmer 2s ease-in-out infinite"
+      }
+    }
+  ), o = e === "wave" && /* @__PURE__ */ a(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        background: "linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100%)",
+        backgroundSize: "200% 100%",
+        animation: "wave 2s ease-in-out infinite"
+      }
+    }
+  );
+  return s > 1 ? /* @__PURE__ */ a("div", { className: "space-y-2", children: Array.from({ length: s }).map((k, f) => /* @__PURE__ */ m("div", { className: l, style: i, ...t, children: [
+    d,
+    o
+  ] }, f)) }) : /* @__PURE__ */ m("div", { className: l, style: i, ...t, children: [
+    d,
+    o
+  ] });
+}
+export {
+  x as Skeleton,
+  x as default
+};

package/components/common/stepper.mjs

@@ -0,0 +1,57 @@
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import n from "classnames";
+function x({
+  steps: i,
+  currentStep: d,
+  onStepChange: s,
+  className: g
+}) {
+  return /* @__PURE__ */ a("div", { className: n("flex items-center gap-2", g), children: i.map((l, e) => {
+    const r = e === d, t = e < d;
+    return /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          onClick: () => s?.(e),
+          disabled: !s,
+          className: n(
+            "flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+            r && "bg-brand/10 text-brand",
+            t && "text-green-500",
+            !r && !t && "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100",
+            !s && "cursor-default"
+          ),
+          children: [
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: n(
+                  "flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold",
+                  r && "bg-brand text-white",
+                  t && "bg-green-500 text-white",
+                  !r && !t && "bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
+                ),
+                children: l.icon || e + 1
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: "hidden sm:inline", children: l.label })
+          ]
+        }
+      ),
+      e < i.length - 1 && /* @__PURE__ */ a(
+        "div",
+        {
+          className: n(
+            "h-px w-6",
+            t ? "bg-green-500" : "bg-gray-200 dark:bg-gray-700"
+          )
+        }
+      )
+    ] }, l.id);
+  }) });
+}
+export {
+  x as Stepper,
+  x as default
+};