@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/auth/sign-up-form.mjs

@@ -0,0 +1,226 @@
+import { jsx as e, jsxs as a, Fragment as N } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { AnchorLink as o } from "../links/anchor-link.mjs";
+import { Button as v } from "../buttons/button/index.mjs";
+import y from "classnames";
+import { EyeIcon as k } from "../icons/eye.mjs";
+import { EyeSlashIcon as C } from "../icons/eyeslash.mjs";
+import { Form as P } from "../forms/form.mjs";
+import { FormField as r } from "../forms/form-field.mjs";
+import { Input as t } from "../inputs/input.mjs";
+import { Checkbox as F } from "../inputs/checkbox.mjs";
+function V({
+  title: n,
+  description: l,
+  buttonText: c,
+  onSubmit: m,
+  isLoading: i = !1,
+  error: d,
+  className: u,
+  termsOfServicePath: p = "#",
+  privacyPolicyPath: h = "#",
+  children: g
+}) {
+  const [s, f] = w(!1);
+  function x(b) {
+    m && m(b);
+  }
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-tucu": "auth-form",
+      className: y("w-full max-w-md mx-auto", u),
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          "data-tucu": "auth-form-panel",
+          className: "bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg",
+          children: [
+            /* @__PURE__ */ e("h2", { className: "text-lg font-bold mb-6 text-center", children: n || "Sign Up" }),
+            l && /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6 text-center", children: l }),
+            /* @__PURE__ */ a("div", { className: "flex flex-col gap-4", children: [
+              g,
+              d && /* @__PURE__ */ e("div", { className: "mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-md text-sm dark:bg-red-900/20 dark:border-red-800 dark:text-red-400", children: d }),
+              /* @__PURE__ */ a(
+                P,
+                {
+                  onSubmit: x,
+                  className: "grid grid-cols-1 gap-4",
+                  useFormProps: {
+                    defaultValues: {
+                      firstName: "",
+                      lastName: "",
+                      email: "",
+                      password: "",
+                      agreeToTerms: !1
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-3", children: [
+                      /* @__PURE__ */ e(
+                        r,
+                        {
+                          name: "firstName",
+                          label: "First Name",
+                          rules: {
+                            required: "First name is required",
+                            minLength: {
+                              value: 2,
+                              message: "First name must be at least 2 characters"
+                            }
+                          },
+                          children: /* @__PURE__ */ e(
+                            t,
+                            {
+                              type: "text",
+                              placeholder: "First Name",
+                              inputClassName: "focus:ring-0! placeholder:text-[#6B7280]"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        r,
+                        {
+                          name: "lastName",
+                          label: "Last Name",
+                          rules: {
+                            required: "Last name is required",
+                            minLength: {
+                              value: 2,
+                              message: "Last name must be at least 2 characters"
+                            }
+                          },
+                          children: /* @__PURE__ */ e(
+                            t,
+                            {
+                              type: "text",
+                              placeholder: "Last Name",
+                              inputClassName: "focus:ring-0! placeholder:text-[#6B7280]"
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ e(
+                      r,
+                      {
+                        name: "email",
+                        label: "Email Address",
+                        rules: {
+                          required: "Email is required",
+                          pattern: {
+                            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                            message: "Invalid email address"
+                          }
+                        },
+                        children: /* @__PURE__ */ e(
+                          t,
+                          {
+                            type: "email",
+                            placeholder: "Email",
+                            inputClassName: "focus:ring-0! placeholder:text-[#6B7280]"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      r,
+                      {
+                        name: "password",
+                        label: "Password",
+                        rules: {
+                          required: "Password is required",
+                          minLength: {
+                            value: 8,
+                            message: "Password must be at least 8 characters"
+                          },
+                          pattern: {
+                            value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+                            message: "Password must contain at least one uppercase letter, one lowercase letter, and one number"
+                          }
+                        },
+                        children: /* @__PURE__ */ a("div", { className: "relative", children: [
+                          /* @__PURE__ */ e(
+                            t,
+                            {
+                              type: s ? "text" : "password",
+                              placeholder: "Password",
+                              inputClassName: "focus:ring-0! placeholder:text-[#6B7280] pr-12"
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            "span",
+                            {
+                              className: "absolute bottom-3 right-4 cursor-pointer text-[#6B7280] rtl:left-4 rtl:right-auto sm:bottom-3.5",
+                              onClick: () => f(!s),
+                              children: s ? /* @__PURE__ */ e(k, { className: "h-4 w-4 sm:h-5 sm:w-5" }) : /* @__PURE__ */ e(C, { className: "h-4 w-4 sm:h-5 sm:w-5" })
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      r,
+                      {
+                        name: "agreeToTerms",
+                        rules: {
+                          required: "You must agree to the terms and conditions"
+                        },
+                        children: /* @__PURE__ */ e(
+                          F,
+                          {
+                            iconClassName: "bg-brand rounded-sm mt-0.5",
+                            label: /* @__PURE__ */ a(N, { children: [
+                              "I've read and agree with",
+                              /* @__PURE__ */ e(
+                                o,
+                                {
+                                  to: p,
+                                  className: "ml-2 font-medium tracking-[0.5px] underline dark:text-gray-300",
+                                  children: "Terms of Service"
+                                }
+                              ),
+                              " and our ",
+                              /* @__PURE__ */ e(
+                                o,
+                                {
+                                  to: h,
+                                  className: "font-medium tracking-[0.5px] underline dark:text-gray-300",
+                                  children: "Privacy Policy"
+                                }
+                              )
+                            ] }),
+                            labelPlacement: "end",
+                            labelClassName: "ml-1.5 text-[#4B5563] text-sm! dark:text-gray-300 tracking-[0.5px] leading-7!",
+                            containerClassName: "items-start!",
+                            inputClassName: "mt-1 focus:ring-offset-1!",
+                            size: "sm"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      v,
+                      {
+                        type: "submit",
+                        fullWidth: !0,
+                        disabled: i,
+                        className: "uppercase",
+                        children: i ? "Creating account..." : c || "Sign up"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  V as SignUpForm,
+  V as default
+};

package/components/blockchain/coin-card.mjs

@@ -0,0 +1,60 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { Image as d } from "../utils/image.mjs";
+import { ArrowUp as x } from "../icons/arrow-up.mjs";
+import "swiper/modules";
+import "swiper/react";
+function f({
+  name: r,
+  symbol: l,
+  logo: i,
+  balance: m,
+  usdBalance: s,
+  change: c,
+  isChangePositive: a,
+  color: n = "#FDEDD4"
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-tucu": "coin-card",
+      className: "relative rounded-lg p-6 xl:p-8",
+      style: { backgroundColor: n },
+      children: [
+        /* @__PURE__ */ t("h4", { className: "mb-8 text-sm font-medium uppercase tracking-wider text-gray-900", children: r }),
+        /* @__PURE__ */ t("div", { className: "relative h-20 lg:h-24 xl:h-28 min-[1780px]:h-36", children: /* @__PURE__ */ t(d, { src: i, alt: r, height: 112, priority: "auto" }) }),
+        /* @__PURE__ */ e("div", { className: "mb-2 mt-8 text-sm font-medium tracking-wider text-gray-900 lg:text-lg 2xl:text-xl min-[1780px]:text-2xl", children: [
+          m,
+          /* @__PURE__ */ e("span", { className: "uppercase", children: [
+            " ",
+            l
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-between text-sm font-medium 2xl:text-sm", children: [
+          /* @__PURE__ */ e("span", { className: "tracking-wider text-gray-600", children: [
+            s,
+            " USD"
+          ] }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: `flex items-center  ${a ? "text-green-500" : "text-red-500"}`,
+              children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `ltr:mr-2 rtl:ml-2 ${a ? "" : "rotate-180"}`,
+                    children: /* @__PURE__ */ t(x, {})
+                  }
+                ),
+                c
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  f as CoinCard
+};

package/components/blockchain/coin-info-card.mjs

@@ -0,0 +1,62 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { Image as f } from "../utils/image.mjs";
+import n from "classnames";
+const h = {
+  small: "w-6 h-6",
+  medium: "w-8 h-8",
+  large: "w-8 h-8 sm:w-10 sm:h-10"
+};
+function d(t) {
+  let e = 0;
+  return t === "large" ? e = 40 : t === "medium" ? e = 32 : e = 24, e;
+}
+function w({
+  item: t,
+  className: e,
+  variant: r = "small",
+  imageClassName: m = "bg-brand rounded p-1"
+}) {
+  const { name: a, logo: c, balance: o, coinType: s } = t ?? {};
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-tucu": "coin-info-card",
+      className: n(
+        "flex items-center justify-between bg-white text-sm font-medium shadow-card dark:bg-light-dark p-3 tracking-wider rounded-lg sm:p-4",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: n(
+                "rounded-full flex items-center justify-center",
+                h[r]
+              ),
+              children: /* @__PURE__ */ l(
+                f,
+                {
+                  src: c,
+                  alt: a,
+                  width: d(r),
+                  height: d(r),
+                  className: m
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ i("div", { className: "ltr:ml-2 rtl:mr-2", children: [
+            a,
+            s && /* @__PURE__ */ l("span", { className: "block pt-0.5 text-sm font-normal capitalize text-gray-600 dark:text-gray-400", children: s })
+          ] })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "overflow-hidden text-ellipsis -tracking-wider ltr:pl-2 rtl:pr-2", children: o })
+      ]
+    }
+  );
+}
+export {
+  w as CoinInfoCard,
+  w as default
+};

package/components/blockchain/collection-card.mjs

@@ -0,0 +1,80 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Image as m } from "../utils/image.mjs";
+import u from "classnames";
+import { AnchorLink as a } from "../links/anchor-link.mjs";
+import { Avatar as f } from "../common/avatar.mjs";
+function v({ item: i, className: n = "" }) {
+  const { name: r, slug: o, title: s, cover_image: c, number_of_artwork: d, user: l } = i ?? {};
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-tucu": "collection-card",
+      className: u(
+        "group relative overflow-hidden rounded-lg transition-transform hover:-translate-y-1",
+        n
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "relative flex aspect-8/11 w-full justify-center overflow-hidden rounded-lg", children: /* @__PURE__ */ e(
+          m,
+          {
+            src: c,
+            placeholder: "blur",
+            width: 600,
+            priority: "auto",
+            alt: r
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "absolute left-0 top-0 z-5 flex h-full w-full flex-col justify-between bg-linear-to-t from-black p-5 md:p-6", children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              to: "/" + o,
+              className: "absolute left-0 top-0 z-10 h-full w-full"
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "flex justify-between gap-3", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: `inline-flex h-8 shrink-0 items-center rounded-2xl bg-white/20 px-4 text-sm font-medium uppercase -tracking-wide text-white
+          backdrop-blur-2xl`,
+              children: r
+            }
+          ) }),
+          /* @__PURE__ */ t("div", { className: "block", children: [
+            /* @__PURE__ */ e("h2", { className: "mb-1.5 truncate text-lg font-medium -tracking-wider text-white", children: s }),
+            /* @__PURE__ */ t("div", { className: "text-sm font-medium -tracking-wide text-[#B6AAA2]", children: [
+              d,
+              " Artworks"
+            ] }),
+            /* @__PURE__ */ t(
+              a,
+              {
+                to: "/" + l?.slug,
+                className: "relative z-10 mt-3.5 inline-flex items-center rounded-3xl bg-white/20 p-2 backdrop-blur-2xl",
+                children: [
+                  /* @__PURE__ */ e(
+                    f,
+                    {
+                      image: l?.avatar,
+                      alt: l?.name,
+                      size: "xs",
+                      className: "rounded-full"
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "truncate text-sm -tracking-wide text-white ltr:ml-2 ltr:pr-2 rtl:mr-2 rtl:pl-2", children: [
+                    "@",
+                    l?.name
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  v as CollectionCard,
+  v as default
+};

package/components/blockchain/collection-select-list.mjs

@@ -0,0 +1,128 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useState as p, useRef as g, useMemo as D, useEffect as y, useCallback as S } from "react";
+import x from "classnames";
+import { Search as H, X as E } from "lucide-react";
+import { Avatar as K } from "../common/avatar.mjs";
+import { Scrollbar as R } from "../common/scrollbar.mjs";
+function z({
+  collectionList: s,
+  onSelect: d,
+  placeholder: k = "Search collections...",
+  noResultsMessage: b = "No collections found",
+  className: v
+}) {
+  const [l, h] = p(""), [n, o] = p(-1), w = g(null), f = g(null), c = g([]), a = D(() => {
+    if (!l.trim()) return s;
+    const e = l.toLowerCase();
+    return s.filter(
+      (r) => r.name.toLowerCase().includes(e) || r.value.toLowerCase().includes(e)
+    );
+  }, [s, l]);
+  y(() => {
+    o(a.length > 0 ? 0 : -1);
+  }, [a.length]), y(() => {
+    n >= 0 && c.current[n] && c.current[n]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [n]);
+  const m = S(
+    (e) => {
+      d(e);
+    },
+    [d]
+  ), N = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), o((r) => r < a.length - 1 ? r + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), o((r) => r > 0 ? r - 1 : a.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault(), n >= 0 && a[n] && m(a[n].value);
+        break;
+      case "Home":
+        e.preventDefault(), o(0);
+        break;
+      case "End":
+        e.preventDefault(), o(a.length - 1);
+        break;
+    }
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: x(
+        "w-full rounded-xl bg-white shadow-large ring-1 ring-gray-200/60 dark:bg-gray-900 dark:ring-gray-800 dark:shadow-none",
+        v
+      ),
+      children: [
+        /* @__PURE__ */ u("div", { className: "relative flex items-center gap-2.5 border-b border-[var(--color-border)] px-4 py-3", children: [
+          /* @__PURE__ */ t(H, { className: "h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: f,
+              type: "text",
+              autoFocus: !0,
+              value: l,
+              onChange: (e) => h(e.target.value),
+              onKeyDown: N,
+              placeholder: k,
+              className: "flex-1 bg-transparent text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 outline-none"
+            }
+          ),
+          l && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                h(""), f.current?.focus();
+              },
+              className: "shrink-0 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors",
+              children: /* @__PURE__ */ t(E, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(
+          R,
+          {
+            autoHide: "scroll",
+            style: { maxHeight: "16rem" },
+            className: "py-2",
+            children: /* @__PURE__ */ t("ul", { ref: w, role: "listbox", children: a.length > 0 ? a.map((e, r) => {
+              const i = r === n;
+              return /* @__PURE__ */ u(
+                "li",
+                {
+                  ref: (C) => {
+                    c.current[r] = C;
+                  },
+                  role: "option",
+                  "aria-selected": i,
+                  onClick: () => m(e.value),
+                  onMouseEnter: () => o(r),
+                  className: x(
+                    "flex cursor-pointer items-center gap-3 px-4 py-2.5 transition-colors",
+                    "focus:outline-none",
+                    i && "bg-gray-100 dark:bg-gray-800",
+                    !i && "hover:bg-gray-100  dark:hover:bg-gray-800/50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ t(K, { image: e.icon, size: "xs", alt: e.name }),
+                    /* @__PURE__ */ t("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: e.name })
+                  ]
+                },
+                e.value
+              );
+            }) : /* @__PURE__ */ t("li", { className: "px-4 py-6 text-center", children: /* @__PURE__ */ t("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: b }) }) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as CollectionSelectList,
+  z as default
+};

package/components/blockchain/currency-swap-icons.mjs

@@ -0,0 +1,34 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { Bitcoin as o } from "../icons/bitcoin.mjs";
+import { Ethereum as c } from "../icons/ethereum.mjs";
+import { Tether as s } from "../icons/tether.mjs";
+import { Bnb as a } from "../icons/bnb.mjs";
+import { Usdc as l } from "../icons/usdc.mjs";
+import { Cardano as n } from "../icons/cardano.mjs";
+import { Doge as d } from "../icons/doge.mjs";
+const i = {
+  BTC: /* @__PURE__ */ r(o, {}),
+  ETH: /* @__PURE__ */ r(c, {}),
+  USDT: /* @__PURE__ */ r(s, {}),
+  BNB: /* @__PURE__ */ r(a, {}),
+  USDC: /* @__PURE__ */ r(l, {}),
+  ADA: /* @__PURE__ */ r(n, {}),
+  DOGE: /* @__PURE__ */ r(d, {})
+};
+function D({ from: t, to: m }) {
+  return /* @__PURE__ */ e("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ r("div", { className: "relative", children: i[t] }),
+      /* @__PURE__ */ r("div", { className: "ltr:-ml-1.5 rtl:-mr-1.5", children: i[m] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "whitespace-nowrap text-sm font-medium uppercase text-black ltr:ml-3 rtl:mr-3 dark:text-white", children: [
+      t,
+      "-",
+      m
+    ] })
+  ] });
+}
+export {
+  D as CurrencySwapIcons,
+  D as default
+};