@arkyn/components 3.0.1-beta.154 → 3.0.1-beta.156

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -0,0 +1,46 @@
+import { jsx as a, Fragment as g, jsxs as S } from "react/jsx-runtime";
+import { Search as C } from "lucide-react";
+import { useRef as v, useState as w, useEffect as b } from "react";
+import { useScrollLock as k } from "../../../hooks/useScrollLock.js";
+import { Input as R } from "../../input/index.js";
+/* empty css           */
+function F(l) {
+  const { children: u, isFocused: e, isSearchable: n, search: m, onSearch: p } = l, t = v(null), [f, o] = w("bottom");
+  k(e), b(() => {
+    if (!e) return;
+    (() => {
+      if (!t.current) return;
+      const i = t.current.parentElement;
+      if (!i) return;
+      const c = i.getBoundingClientRect(), d = window.innerHeight, s = 300;
+      d - c.bottom < s && c.top > s ? o("top") : o("bottom");
+    })();
+  }, [e]);
+  function h(r) {
+    n && p(r.target.value);
+  }
+  return e ? /* @__PURE__ */ S(
+    "div",
+    {
+      ref: t,
+      className: `arkynMultiSelectOptionsContainer ${f}`,
+      children: [
+        n && /* @__PURE__ */ a(
+          R,
+          {
+            type: "search",
+            name: "search-select",
+            variant: "underline",
+            leftIcon: C,
+            value: m,
+            onChange: h
+          }
+        ),
+        u
+      ]
+    }
+  ) : /* @__PURE__ */ a(g, {});
+}
+export {
+  F as MultiSelectOptionsContainer
+};

package/dist/modules/components/multiSelect/multiSelectOverlay/index.js

@@ -0,0 +1,9 @@
+import { jsx as e, Fragment as i } from "react/jsx-runtime";
+/* empty css           */
+function o(r) {
+  const { isFocused: t, handleBlur: l } = r;
+  return t ? /* @__PURE__ */ e("aside", { className: "arkynMultiSelectOverlay", onClick: l }) : /* @__PURE__ */ e(i, {});
+}
+export {
+  o as MultiSelectOverlay
+};

package/dist/modules/components/multiSelect/multiSelectSpinner/index.js

@@ -0,0 +1,17 @@
+import { jsx as r, Fragment as n } from "react/jsx-runtime";
+import { Loader2 as o } from "lucide-react";
+/* empty css           */
+function c(e) {
+  const { iconSize: i, isLoading: t } = e;
+  return t ? /* @__PURE__ */ r(
+    o,
+    {
+      className: "arkynMultiSelectSpinner",
+      size: i,
+      strokeWidth: 2.5
+    }
+  ) : /* @__PURE__ */ r(n, {});
+}
+export {
+  c as MultiSelectSpinner
+};

package/dist/modules/components/pagination/chevronButton/index.js

@@ -0,0 +1,18 @@
+import { jsx as n } from "react/jsx-runtime";
+import { ChevronRight as i, ChevronLeft as a } from "lucide-react";
+/* empty css           */
+function s(o) {
+  const { orientation: t, handlePageChange: e, disabled: r } = o;
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: "arkynChevronPageButton",
+      disabled: r,
+      onClick: e,
+      children: { left: /* @__PURE__ */ n(a, {}), right: /* @__PURE__ */ n(i, {}) }[t]
+    }
+  );
+}
+export {
+  s as ChevronButton
+};

package/dist/modules/components/pagination/currentButton/index.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+/* empty css           */
+function e({ currentPage: t }) {
+  return /* @__PURE__ */ r("button", { className: "arkynPaginationCurrentButton", disabled: !0, children: t });
+}
+export {
+  e as CurrentButton
+};

package/dist/modules/components/pagination/index.js

@@ -0,0 +1,84 @@
+import { jsxs as o, jsx as e, Fragment as P } from "react/jsx-runtime";
+import { ChevronButton as C } from "./chevronButton/index.js";
+import { CurrentButton as B } from "./currentButton/index.js";
+import { PageButton as r } from "./pageButton/index.js";
+import { PaginationService as S } from "./paginationService.js";
+import { Spread as u } from "./spread/index.js";
+/* empty css           */
+function O(d) {
+  const {
+    totalCountRegisters: m,
+    siblingsCount: p,
+    currentPage: b,
+    registerPerPage: c,
+    onChange: f,
+    ...v
+  } = d, {
+    currentPage: a,
+    siblingsCount: t,
+    previousPages: x,
+    nextPages: R,
+    lastPage: n,
+    handlePageChange: s,
+    handleMinusChange: h,
+    handlePlusChange: l
+  } = new S({
+    totalCountRegisters: m,
+    currentPage: b,
+    registerPerPage: c,
+    siblingsCount: p,
+    onChange: f
+  });
+  return /* @__PURE__ */ o("div", { className: "arkynPagination", ...v, children: [
+    /* @__PURE__ */ e(
+      C,
+      {
+        orientation: "left",
+        handlePageChange: h,
+        disabled: a <= 1
+      }
+    ),
+    a > 1 + t && /* @__PURE__ */ o(P, { children: [
+      /* @__PURE__ */ e(r, { page: 1, handlePageChange: () => s(1) }),
+      a > 2 + t && /* @__PURE__ */ e(u, {})
+    ] }),
+    x.map((g, i) => /* @__PURE__ */ e(
+      r,
+      {
+        page: g,
+        handlePageChange: h
+      },
+      i
+    )),
+    /* @__PURE__ */ e(B, { currentPage: a }),
+    R.map((g, i) => /* @__PURE__ */ e(
+      r,
+      {
+        page: g,
+        handlePageChange: l
+      },
+      i
+    )),
+    a + t < n && /* @__PURE__ */ o(P, { children: [
+      a + 1 + t < n && /* @__PURE__ */ e(u, {}),
+      /* @__PURE__ */ e(
+        r,
+        {
+          page: n,
+          handlePageChange: () => s(n)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      C,
+      {
+        orientation: "right",
+        handlePageChange: l,
+        disabled: a >= n
+      }
+    )
+  ] });
+}
+export {
+  O as Pagination
+};

package/dist/modules/components/pagination/pageButton/index.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+/* empty css           */
+function i(n) {
+  const { page: t, handlePageChange: a } = n;
+  return /* @__PURE__ */ o("button", { className: "arkynPaginationPageButton", onClick: a, children: t });
+}
+export {
+  i as PageButton
+};

package/dist/modules/components/pagination/paginationService.js

@@ -0,0 +1,49 @@
+var g = Object.defineProperty;
+var r = (a, e, i) => e in a ? g(a, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[e] = i;
+var t = (a, e, i) => r(a, typeof e != "symbol" ? e + "" : e, i);
+class P {
+  constructor(e) {
+    t(this, "currentPage");
+    t(this, "totalCountRegisters");
+    t(this, "registerPerPage");
+    t(this, "siblingsCount");
+    t(this, "lastPage");
+    t(this, "onChange");
+    t(this, "previousPages");
+    t(this, "nextPages");
+    t(this, "handlePageChange", (e) => {
+      e < 1 || e > this.lastPage || this.onChange && (this.currentPage = e, this.onChange(this.currentPage));
+    });
+    t(this, "handlePlusChange", () => {
+      this.currentPage >= this.lastPage || this.onChange && (this.currentPage += 1, this.onChange(this.currentPage));
+    });
+    t(this, "handleMinusChange", () => {
+      this.currentPage <= 1 || this.onChange && (this.currentPage -= 1, this.onChange(this.currentPage));
+    });
+    this.totalCountRegisters = e.totalCountRegisters, this.currentPage = e.currentPage, this.registerPerPage = (e == null ? void 0 : e.registerPerPage) || 20, this.siblingsCount = (e == null ? void 0 : e.siblingsCount) || 2, this.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage), this.onChange = e == null ? void 0 : e.onChange, this.previousPages = this.generatePreviousPages(
+      this.currentPage,
+      this.siblingsCount
+    ), this.nextPages = this.generateNextPages(
+      this.currentPage,
+      this.siblingsCount
+    );
+  }
+  generatePagesArray(e, i) {
+    return [...new Array(i - e)].map((n, s) => e + s + 1).filter((n) => n > 0);
+  }
+  generatePreviousPages(e, i) {
+    return e > 1 ? this.generatePagesArray(
+      e - 1 - i,
+      e - 1
+    ) : [];
+  }
+  generateNextPages(e, i) {
+    return e < this.lastPage ? this.generatePagesArray(
+      e,
+      Math.min(e + i, this.lastPage)
+    ) : [];
+  }
+}
+export {
+  P as PaginationService
+};

package/dist/modules/components/pagination/spread/index.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Ellipsis as i } from "lucide-react";
+/* empty css           */
+function n() {
+  return /* @__PURE__ */ r("p", { className: "arkynPaginationSpread", children: /* @__PURE__ */ r(i, {}) });
+}
+export {
+  n as Spread
+};

package/dist/modules/components/phoneInput/index.js

@@ -0,0 +1,152 @@
+import { jsx as n, jsxs as V } from "react/jsx-runtime";
+import { formatToPhone as ee, findCountryMask as ne, removeNonNumeric as oe } from "@arkyn/shared";
+import { countries as m } from "@arkyn/templates";
+import { useState as r, useRef as k, useId as te } from "react";
+import { useForm as re } from "../../hooks/useForm.js";
+import { FieldTemplate as se } from "../../services/fieldTemplate.js";
+import { PhoneInputContainer as ae } from "./phoneInputContainer/index.js";
+import { PhoneInputCountriesOverlay as ue } from "./phoneInputCountriesOverlay/index.js";
+import { PhoneInputCountryOption as ie } from "./phoneInputCountryOption/index.js";
+import { PhoneInputCountryOptionsContainer as le } from "./phoneInputCountryOptionsContainer/index.js";
+import { PhoneInputCountrySelector as ce } from "./phoneInputCountrySelector/index.js";
+import { PhoneInputMask as fe } from "./phoneInputMask/index.js";
+function be(M) {
+  const {
+    defaultCountryIso: pe,
+    value: h,
+    label: N,
+    className: S = "",
+    disabled: x = !1,
+    errorMessage: R,
+    isLoading: C = !1,
+    readOnly: s = !1,
+    size: a = "md",
+    defaultValue: u = "",
+    variant: T = "solid",
+    showAsterisk: B,
+    name: l,
+    onChange: y,
+    searchCountryPlaceholder: L = "Pesquisar país",
+    notFoundCountryText: j = "Nenhum país encontrado",
+    id: A,
+    unShowFieldTemplate: D = !1,
+    orientation: q = "vertical"
+  } = M, z = m.find((e) => e.iso === "BR"), E = u ? ee(u) : "", G = u ? ne(u)[1] : z, [I, o] = r(!1), [F, H] = r(""), [c, f] = r(!1), [J, O] = r(E), P = h !== void 0 ? h : J, [i, K] = r(G), { fieldErrors: p } = re(), Q = k(null), U = A || te(), v = R || (p == null ? void 0 : p[l]), W = !!v, t = x || C, d = k(null);
+  function X() {
+    t || I || c || (o(!0), d.current && d.current.focus());
+  }
+  function Y() {
+    f(!0), o(!0);
+  }
+  function Z() {
+    f(!1), o(!1);
+  }
+  function _() {
+    o(!0);
+  }
+  function $() {
+    o(!1);
+  }
+  function g(e) {
+    return e.name.toLowerCase().includes(F.toLowerCase());
+  }
+  function w(e) {
+    let b = i.code;
+    return b += oe(e || P), b;
+  }
+  return /* @__PURE__ */ n(
+    se,
+    {
+      name: l,
+      label: N,
+      showAsterisk: B,
+      className: S,
+      errorMessage: v,
+      unShowFieldTemplate: D,
+      orientation: q,
+      children: /* @__PURE__ */ V(
+        ae,
+        {
+          disabled: t,
+          isError: W,
+          isLoading: C,
+          isFocused: I,
+          readOnly: s,
+          size: a,
+          variant: T,
+          onFocus: X,
+          children: [
+            /* @__PURE__ */ n(
+              ce,
+              {
+                currentCountry: i,
+                onClick: Y,
+                size: a
+              }
+            ),
+            /* @__PURE__ */ V(
+              le,
+              {
+                isOpen: t || s ? !1 : c,
+                search: F,
+                placeholder: L,
+                onSearch: H,
+                children: [
+                  m.filter((e) => g(e)).map((e) => /* @__PURE__ */ n(
+                    ie,
+                    {
+                      country: e,
+                      handleChangeValue: () => {
+                        K(e), f(!1), O("");
+                      },
+                      isActive: e.iso === i.iso,
+                      size: a
+                    },
+                    e.iso
+                  )),
+                  m.filter((e) => g(e)).length === 0 && /* @__PURE__ */ n("p", { children: j })
+                ]
+              }
+            ),
+            /* @__PURE__ */ n(
+              ue,
+              {
+                isOpen: t || s ? !1 : c,
+                onClick: Z
+              }
+            ),
+            /* @__PURE__ */ n(
+              fe,
+              {
+                id: U,
+                ref: d,
+                readonly: s,
+                currentCountry: i,
+                value: P,
+                disabled: t,
+                onBlur: $,
+                onFocus: _,
+                size: a,
+                onChange: (e) => {
+                  O(e), y && y(w(e));
+                }
+              }
+            ),
+            /* @__PURE__ */ n(
+              "input",
+              {
+                ref: Q,
+                type: "hidden",
+                name: l,
+                value: w()
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  be as PhoneInput
+};

package/dist/modules/components/phoneInput/phoneInputContainer/index.js

@@ -0,0 +1,20 @@
+import { jsx as m } from "react/jsx-runtime";
+/* empty css           */
+function N(o) {
+  const {
+    children: e,
+    onFocus: s,
+    disabled: r,
+    isError: n,
+    isLoading: a,
+    isFocused: c,
+    className: t = "",
+    readOnly: i,
+    variant: d,
+    size: u
+  } = o, l = `arkynPhoneInputContainer ${d} ${u} ${r || i || a ? "opacity" : ""} ${n ? "errored" : ""} ${c ? "focused" : ""} ${t}`;
+  return /* @__PURE__ */ m("section", { className: l.trim(), onClick: s, children: e });
+}
+export {
+  N as PhoneInputContainer
+};

package/dist/modules/components/phoneInput/phoneInputCountriesOverlay/index.js

@@ -0,0 +1,9 @@
+import { jsx as n, Fragment as o } from "react/jsx-runtime";
+/* empty css           */
+function a(r) {
+  const { isOpen: e, onClick: t } = r;
+  return e ? /* @__PURE__ */ n("aside", { className: "arkynPhoneInputCountriesOverlay", onClick: t }) : /* @__PURE__ */ n(o, {});
+}
+export {
+  a as PhoneInputCountriesOverlay
+};

package/dist/modules/components/phoneInput/phoneInputCountryOption/index.js

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Check as r } from "lucide-react";
+/* empty css           */
+function u(t) {
+  const { country: n, isActive: c, handleChangeValue: a, size: o } = t, s = `arkynPhoneInputCountryOption ${o} ${c ? "active" : ""}`;
+  return /* @__PURE__ */ i("div", { onClick: () => a(n), className: s, children: [
+    /* @__PURE__ */ e("img", { src: n.flag, alt: n.name, className: "flag" }),
+    n.name,
+    " ",
+    /* @__PURE__ */ e("span", { children: n.code }),
+    /* @__PURE__ */ e(r, { className: "check" })
+  ] });
+}
+export {
+  u as PhoneInputCountryOption
+};

package/dist/modules/components/phoneInput/phoneInputCountryOptionsContainer/index.js

@@ -0,0 +1,44 @@
+import { jsx as s, Fragment as d, jsxs as g } from "react/jsx-runtime";
+import { useRef as y, useState as P, useEffect as S } from "react";
+import { useScrollLock as k } from "../../../hooks/useScrollLock.js";
+/* empty css           */
+function x(a) {
+  const { children: p, isOpen: e, onSearch: u, search: l, placeholder: h } = a, t = y(null), [m, n] = P("bottom");
+  function f(o) {
+    u(o.target.value);
+  }
+  return k(e), S(() => {
+    if (!e) return;
+    (() => {
+      if (!t.current) return;
+      const r = t.current.parentElement;
+      if (!r) return;
+      const i = r.getBoundingClientRect(), C = window.innerHeight, c = 300;
+      C - i.bottom < c && i.top > c ? n("top") : n("bottom");
+    })();
+  }, [e]), e ? /* @__PURE__ */ g(
+    "div",
+    {
+      className: `arkynPhoneInputCountryOptionsContainer ${m}`,
+      ref: t,
+      children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            type: "search",
+            name: "search-select",
+            className: "arkynPhoneInputCountryOptionsContainerSearchSelect",
+            value: l,
+            id: "input-search",
+            placeholder: h,
+            onChange: f
+          }
+        ),
+        p
+      ]
+    }
+  ) : /* @__PURE__ */ s(d, {});
+}
+export {
+  x as PhoneInputCountryOptionsContainer
+};

package/dist/modules/components/phoneInput/phoneInputCountrySelector/index.js

@@ -0,0 +1,22 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { ChevronDown as i } from "lucide-react";
+import { Divider as c } from "../../divider/index.js";
+/* empty css           */
+function p(t) {
+  const { currentCountry: r, onClick: n } = t;
+  return /* @__PURE__ */ e("div", { className: "phoneInputSelectCountry", onClick: n, children: [
+    /* @__PURE__ */ o(
+      "img",
+      {
+        className: "flag",
+        src: r.flag,
+        alt: r.name
+      }
+    ),
+    /* @__PURE__ */ o(i, { className: "chevronDown", strokeWidth: 2.5 }),
+    /* @__PURE__ */ o(c, { orientation: "vertical" })
+  ] });
+}
+export {
+  p as PhoneInputCountrySelector
+};

package/dist/modules/components/phoneInput/phoneInputMask/index.js

@@ -0,0 +1,62 @@
+import { jsx as r } from "react/jsx-runtime";
+import { InputMask as I } from "@react-input/mask";
+import { forwardRef as g, useState as v, useEffect as x } from "react";
+import { clear as E, getMask as L, MAX_LENGTH as w, applyMask as B, TYPES as N } from "../../../utils/phoneInputUtilities.js";
+/* empty css          */
+const P = g((o, n) => /* @__PURE__ */ r("input", { ref: n, ...o })), A = g(
+  (o, n) => {
+    const {
+      onFocus: u,
+      readonly: d,
+      onBlur: l,
+      size: h,
+      onChange: s,
+      value: p,
+      currentCountry: t,
+      disabled: m,
+      id: c
+    } = o, [k, M] = v(!1), i = typeof t.mask == "string" ? t.mask : t.mask[0];
+    x(() => {
+      k ? s(i) : M(!0);
+    }, [t]);
+    const f = `phoneInputMask ${h}`;
+    function y(a) {
+      let e = E(a.target.value);
+      const C = L(e);
+      e.length > w || (e = B(e, N[C]), a.target.value = e, s(e));
+    }
+    return t.code === "+55" ? /* @__PURE__ */ r(
+      "input",
+      {
+        id: c,
+        value: p,
+        onChange: y,
+        className: f,
+        onFocus: u,
+        onBlur: l,
+        disabled: m,
+        ref: n
+      }
+    ) : /* @__PURE__ */ r(
+      I,
+      {
+        id: c,
+        value: p,
+        readOnly: d,
+        onChange: (a) => s(a.target.value),
+        className: f,
+        component: P,
+        onFocus: u,
+        onBlur: l,
+        disabled: m,
+        mask: i,
+        showMask: !0,
+        replacement: { _: /\d/ },
+        ref: n
+      }
+    );
+  }
+);
+export {
+  A as PhoneInputMask
+};

package/dist/modules/components/popover/index.js

@@ -0,0 +1,37 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { motion as v } from "framer-motion";
+import { useState as f } from "react";
+import { useScrollLock as u } from "../../hooks/useScrollLock.js";
+/* empty css           */
+function N(t) {
+  const {
+    children: s,
+    button: n,
+    closeOnClick: a,
+    className: r = "",
+    orientation: l = "bottomLeft"
+  } = t, [e, i] = f(!1), c = `arkynPopover ${l} ${e ? "visibleTrue" : "visibleFalse"} ${r}`;
+  function m() {
+    e || i(!0);
+  }
+  return u(e), /* @__PURE__ */ p("div", { className: c, onClick: m, children: [
+    n,
+    /* @__PURE__ */ o(
+      v.div,
+      {
+        style: { visibility: e ? "visible" : "hidden" },
+        transition: { ease: "easeOut", duration: 0 },
+        initial: { opacity: 0 },
+        animate: { opacity: e ? 1 : 0 },
+        exit: { opacity: 0 },
+        onClick: () => a && i(!1),
+        className: "arkynPopoverContent",
+        children: s
+      }
+    ),
+    e && /* @__PURE__ */ o("div", { onClick: () => i(!1), className: "arkynPopoverOverlay" })
+  ] });
+}
+export {
+  N as Popover
+};

package/dist/modules/components/radio/radioBox/index.js

@@ -0,0 +1,43 @@
+import { jsxs as z, jsx as $ } from "react/jsx-runtime";
+import { useRadioGroup as N } from "../radioContext.js";
+/* empty css           */
+function B(r) {
+  const {
+    value: e,
+    size: n,
+    disabled: i,
+    children: d,
+    className: t = "",
+    onClick: o,
+    onFocus: a,
+    ...u
+  } = r, {
+    handleChange: l,
+    size: b,
+    value: m,
+    isError: C,
+    disabled: h
+  } = N(), p = m === e, k = n || b, c = i || h, F = `arkynRadioBox ${k} ${p ? "checkedTrue" : "checkedFalse"} ${C ? "errorTrue" : "errorFalse"} ${c ? "disabledTrue" : "disabledFalse"} ${t}`;
+  function f(s) {
+    o && o(s), l(e);
+  }
+  function x(s) {
+    a && a(s), l(e);
+  }
+  return /* @__PURE__ */ z("label", { className: F.trim(), children: [
+    /* @__PURE__ */ $(
+      "button",
+      {
+        type: "button",
+        disabled: c,
+        onClick: f,
+        onFocus: x,
+        ...u
+      }
+    ),
+    d
+  ] });
+}
+export {
+  B as RadioBox
+};