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

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

@@ -0,0 +1,121 @@
+import { jsx as e, jsxs as Q } from "react/jsx-runtime";
+import { Loader2 as N } from "lucide-react";
+import { useState as U, useRef as V, useId as W } from "react";
+import { useForm as X } from "../../hooks/useForm.js";
+import { FieldTemplate as Y } from "../../services/fieldTemplate.js";
+import { IconRenderer as i } from "../../services/iconRenderer.js";
+/* empty css          */
+function ue($) {
+  const {
+    name: t,
+    disabled: d,
+    title: C,
+    style: k,
+    variant: v = "solid",
+    label: z,
+    className: P = "",
+    prefix: f,
+    suffix: u,
+    isLoading: s = !1,
+    leftIcon: B,
+    readOnly: p,
+    onFocus: m,
+    onBlur: h,
+    unShowFieldTemplate: L = !1,
+    errorMessage: M,
+    showAsterisk: j,
+    rightIcon: x,
+    type: y = "text",
+    size: S = "md",
+    id: O,
+    value: g,
+    placeholder: w,
+    orientation: R,
+    ...b
+  } = $, { fieldErrors: c } = X(), [T, a] = U(!1), o = V(null), A = O || W(), F = M || (c == null ? void 0 : c[t]), D = !!F, r = d || s, n = { md: 20, lg: 20 }[S], I = x ? "right" : "left", E = I === "left" && s, q = I === "right" && s;
+  function G() {
+    r || !(o != null && o.current) || (a(!0), o.current.focus());
+  }
+  function H(l) {
+    a(!0), m && m(l);
+  }
+  function J(l) {
+    a(!1), h && h(l);
+  }
+  if (y === "hidden")
+    return /* @__PURE__ */ e(
+      "input",
+      {
+        style: { display: "none" },
+        readOnly: !0,
+        type: "text",
+        ref: o,
+        ...b
+      }
+    );
+  const K = `arkynInput ${f ? "hasPrefix" : ""} ${d ? "disabled" : ""} ${u ? "hasSuffix" : ""} ${v} ${S} ${r || p || s ? "opacity" : ""} ${D ? "errored" : ""} ${T ? "focused" : ""}`;
+  return /* @__PURE__ */ e(
+    Y,
+    {
+      name: t,
+      label: z,
+      showAsterisk: j,
+      className: P,
+      errorMessage: F,
+      unShowFieldTemplate: L,
+      orientation: R,
+      children: /* @__PURE__ */ Q(
+        "section",
+        {
+          title: C,
+          style: k,
+          onClick: G,
+          className: K,
+          children: [
+            /* @__PURE__ */ e(i, { iconSize: n, icon: f, className: "prefix" }),
+            /* @__PURE__ */ e(
+              i,
+              {
+                show: E,
+                iconSize: n,
+                className: "spinner",
+                icon: N
+              }
+            ),
+            /* @__PURE__ */ e(i, { show: !s, icon: B, iconSize: n }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                disabled: r,
+                readOnly: p,
+                ref: o,
+                onFocus: H,
+                onBlur: J,
+                type: y,
+                id: A,
+                name: t,
+                placeholder: r && g || w,
+                value: r ? void 0 : g,
+                ...b
+              }
+            ),
+            /* @__PURE__ */ e(i, { show: !s, icon: x, iconSize: n }),
+            /* @__PURE__ */ e(
+              i,
+              {
+                show: q,
+                iconSize: n,
+                className: "spinner",
+                icon: N
+              }
+            ),
+            /* @__PURE__ */ e(i, { iconSize: n, icon: u, className: "suffix" })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ue as Input
+};

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

@@ -0,0 +1,33 @@
+import { jsx as r } from "react/jsx-runtime";
+import { MapPinned as p } from "lucide-react";
+import { ClientMapView as s } from "./mapView.client.js";
+/* empty css           */
+import { ClientOnly as l } from "../clientOnly.js";
+function t({ className: e }) {
+  return /* @__PURE__ */ r("div", { className: "arkynMapViewPinnedEmpty " + e, children: /* @__PURE__ */ r(p, {}) });
+}
+function h(e) {
+  const {
+    coordinates: n,
+    zoom: f = 18,
+    accessToken: a,
+    className: o,
+    onMarkerClick: c,
+    ...m
+  } = e;
+  if (!n) return /* @__PURE__ */ r(t, { className: o });
+  const i = Array.isArray(n) ? n : [n];
+  return i.length === 0 ? /* @__PURE__ */ r(t, { className: o }) : /* @__PURE__ */ r(l, { fallback: /* @__PURE__ */ r(t, { className: o }), children: () => /* @__PURE__ */ r(
+    s,
+    {
+      accessToken: a,
+      coordinates: i,
+      center: i[0],
+      onMarkerClick: c,
+      ...m
+    }
+  ) });
+}
+export {
+  h as MapView
+};

package/dist/modules/components/mapView/mapView.client.js

@@ -0,0 +1,52 @@
+import { jsx as x } from "react/jsx-runtime";
+import n from "mapbox-gl";
+import { createRoot as y } from "react-dom/client";
+/* empty css           */
+import { useRef as g, useEffect as R } from "react";
+function B({
+  center: r,
+  coordinates: c,
+  onMarkerClick: p,
+  accessToken: d,
+  ...h
+}) {
+  const t = g(null), a = g(null), s = r || c[0];
+  return R(() => (n.accessToken = d, t.current = new n.Map({
+    container: a.current,
+    style: "mapbox://styles/mapbox/light-v11",
+    center: [s.lng, s.lat],
+    zoom: 13,
+    language: "pt-BR"
+  }), c.forEach((e) => {
+    const { lat: m, lng: i, popUp: l } = e, o = document.createElement("img");
+    o.className = "arkynMarker", o.src = "https://i.postimg.cc/mgKggjk7/Pin.png";
+    const u = new n.Marker(o).setLngLat([i, m]).addTo(t.current);
+    if (l) {
+      const f = document.createElement("div");
+      y(f).render(l);
+      const k = new n.Popup({
+        offset: 25,
+        closeButton: !1,
+        className: "arkynMapViewPopup"
+      }).setDOMContent(f);
+      u.setPopup(k);
+    }
+    o.addEventListener("click", () => {
+      p && p(e), t.current.flyTo({ center: [i, m], zoom: 15, duration: 1200 }), u.togglePopup();
+    });
+  }), () => {
+    var e;
+    (e = t.current) == null || e.remove();
+  }), []), /* @__PURE__ */ x(
+    "div",
+    {
+      id: "map-container",
+      ref: a,
+      style: { height: "100%", width: "100%", borderRadius: "8px" },
+      ...h
+    }
+  );
+}
+export {
+  B as ClientMapView
+};

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

@@ -0,0 +1,113 @@
+import { jsxs as $, jsx as e } from "react/jsx-runtime";
+import { InputMask as U } from "@react-input/mask";
+import { Loader2 as M } from "lucide-react";
+import { useState as X, useRef as Y, useId as Z, forwardRef as _ } from "react";
+import { useForm as ee } from "../../hooks/useForm.js";
+import { IconRenderer as r } from "../../services/iconRenderer.js";
+import { FieldError as oe } from "../fieldError/index.js";
+import { FieldLabel as se } from "../fieldLabel/index.js";
+import { FieldWrapper as re } from "../fieldWrapper/index.js";
+/* empty css          */
+const ne = _((a, t) => /* @__PURE__ */ e("input", { ref: t, ...a }));
+function Se(a) {
+  const {
+    name: t,
+    disabled: b,
+    title: y,
+    style: v,
+    variant: z = "solid",
+    separate: B,
+    mask: L,
+    showMask: P,
+    replacement: C,
+    label: d,
+    className: R = "",
+    prefix: m,
+    suffix: p,
+    isLoading: o = !1,
+    leftIcon: j,
+    readOnly: h,
+    onFocus: x,
+    onBlur: g,
+    errorMessage: E,
+    defaultValue: V,
+    showAsterisk: A,
+    rightIcon: w,
+    size: F = "md",
+    id: D,
+    value: I,
+    placeholder: S,
+    ...O
+  } = a, { fieldErrors: c } = ee(), [W, l] = X(!1), n = Y(null), k = D || Z(), f = E || (c == null ? void 0 : c[t]), q = !!f, i = b || o, s = { md: 20, lg: 20 }[F], N = w ? "right" : "left", G = N === "left" && o, H = N === "right" && o;
+  function J() {
+    i || !(n != null && n.current) || (l(!0), n.current.focus());
+  }
+  function K(u) {
+    l(!0), x && x(u);
+  }
+  function Q(u) {
+    l(!1), g && g(u);
+  }
+  const T = `arkynMaskedInput ${m ? "hasPrefix" : ""} ${p ? "hasSuffix" : ""} ${z} ${F} ${i || h || o ? "opacity" : ""} ${q ? "errored" : ""} ${W ? "focused" : ""}`;
+  return /* @__PURE__ */ $(re, { className: R, children: [
+    d && /* @__PURE__ */ e(se, { showAsterisk: A, htmlFor: k, children: d }),
+    /* @__PURE__ */ $(
+      "section",
+      {
+        title: y,
+        style: v,
+        onClick: J,
+        className: T,
+        children: [
+          /* @__PURE__ */ e(r, { iconSize: s, icon: m, className: "prefix" }),
+          /* @__PURE__ */ e(
+            r,
+            {
+              show: G,
+              iconSize: s,
+              className: "spinner",
+              icon: M
+            }
+          ),
+          /* @__PURE__ */ e(r, { show: !o, icon: j, iconSize: s }),
+          /* @__PURE__ */ e(
+            U,
+            {
+              component: ne,
+              mask: L,
+              replacement: C,
+              separate: B,
+              showMask: P,
+              ref: n,
+              onFocus: K,
+              onBlur: Q,
+              disabled: i,
+              readOnly: h,
+              id: k,
+              name: t,
+              defaultValue: V || void 0,
+              placeholder: i && I || S,
+              value: i ? void 0 : I,
+              ...O
+            }
+          ),
+          /* @__PURE__ */ e(r, { show: !o, icon: w, iconSize: s }),
+          /* @__PURE__ */ e(
+            r,
+            {
+              show: H,
+              iconSize: s,
+              className: "spinner",
+              icon: M
+            }
+          ),
+          /* @__PURE__ */ e(r, { iconSize: s, icon: p, className: "suffix" })
+        ]
+      }
+    ),
+    f && /* @__PURE__ */ e(oe, { children: f })
+  ] });
+}
+export {
+  Se as MaskedInput
+};

package/dist/modules/components/modal/modalContainer/index.js

@@ -0,0 +1,43 @@
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { AnimatePresence as m, motion as s } from "framer-motion";
+import { useScrollLock as d } from "../../../hooks/useScrollLock.js";
+import { ModalProvider as p } from "../modalContext.js";
+/* empty css           */
+function N(t) {
+  const {
+    isVisible: a,
+    makeInvisible: e,
+    children: o,
+    className: n = "",
+    ...r
+  } = t;
+  d(a);
+  const l = `arkynModalContainer ${a ? "visibleTrue" : "visibleFalse"} ${n}`;
+  return /* @__PURE__ */ i(p, { makeInvisible: e, children: /* @__PURE__ */ i(m, { children: a && /* @__PURE__ */ c("aside", { className: l.trim(), ...r, children: [
+    /* @__PURE__ */ i(
+      s.div,
+      {
+        className: "arkynModalContainerOverlay",
+        transition: { duration: 0.15, ease: "easeOut" },
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        onClick: e
+      }
+    ),
+    /* @__PURE__ */ i(
+      s.div,
+      {
+        className: "arkynModalContainerContent",
+        transition: { duration: 0.15, ease: "easeOut" },
+        initial: { opacity: 0, scale: 0.75 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0 },
+        children: o
+      }
+    )
+  ] }) }) });
+}
+export {
+  N as ModalContainer
+};

package/dist/modules/components/modal/modalContext.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as t, createContext as n } from "react";
+const o = n({});
+function d(e) {
+  return /* @__PURE__ */ r(o.Provider, { value: { makeInvisible: e.makeInvisible }, children: e.children });
+}
+function l() {
+  return t(o);
+}
+export {
+  d as ModalProvider,
+  l as useModal
+};

package/dist/modules/components/modal/modalFooter/index.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+/* empty css           */
+function l(o) {
+  const { alignment: t = "right", className: a, ...r } = o, s = `arkynModalFooter ${t} ${a}`;
+  return /* @__PURE__ */ e("footer", { className: s.trim(), ...r });
+}
+export {
+  l as ModalFooter
+};

package/dist/modules/components/modal/modalHeader/index.js

@@ -0,0 +1,28 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { X as i } from "lucide-react";
+import { useModal as c } from "../modalContext.js";
+/* empty css           */
+function h(o) {
+  const {
+    showCloseButton: a = !0,
+    className: s,
+    children: t,
+    ...r
+  } = o, { makeInvisible: l } = c(), n = `arkynModalHeader ${s}`;
+  return /* @__PURE__ */ m("header", { className: n.trim(), ...r, children: [
+    t,
+    a && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: l,
+        "aria-label": "Close modal button",
+        className: "arkynModalHeaderCloseButton",
+        children: /* @__PURE__ */ e(i, { size: 24 })
+      }
+    )
+  ] });
+}
+export {
+  h as ModalHeader
+};

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

@@ -0,0 +1,155 @@
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+import { useRef as ee, useId as te, useState as b } from "react";
+import { useForm as re } from "../../hooks/useForm.js";
+import { FieldTemplate as ne } from "../../services/fieldTemplate.js";
+import { IconRenderer as ie } from "../../services/iconRenderer.js";
+import { MultiSelectChevron as oe } from "./multiSelectChevron/index.js";
+import { MultiSelectContainer as le } from "./multiSelectContainer/index.js";
+import { MultiSelectContent as se } from "./multiSelectContent/index.js";
+import { MultiSelectMark as ce } from "./multiSelectMark/index.js";
+import { MultiSelectOption as ae } from "./multiSelectOption/index.js";
+import { MultiSelectOptionsContainer as fe } from "./multiSelectOptionsContainer/index.js";
+import { MultiSelectOverlay as ue } from "./multiSelectOverlay/index.js";
+import { MultiSelectSpinner as de } from "./multiSelectSpinner/index.js";
+function Ne(d) {
+  const {
+    name: m,
+    options: M,
+    className: v = "",
+    placeholder: T = "Selecione...",
+    closeOnSelect: j = !1,
+    defaultValue: B = [],
+    errorMessage: E,
+    isLoading: l = !1,
+    readOnly: p = !1,
+    isSearchable: H = !1,
+    id: V,
+    label: A,
+    optionMaxHeight: me,
+    showAsterisk: D,
+    leftIcon: g,
+    onSearch: O,
+    onChange: s,
+    onBlur: J,
+    notFoundText: R = "Sem opções disponíveis",
+    onFocus: C,
+    disabled: W = !1,
+    prefix: x,
+    size: c = "md",
+    value: q,
+    variant: G = "solid",
+    unShowFieldTemplate: K = !1,
+    orientation: P = "vertical"
+  } = d, { fieldErrors: h } = re(), n = ee(null), Q = V || te(), F = E || (h == null ? void 0 : h[m]), U = !!F, a = W || l || p, f = { md: 20, lg: 20 }[c], [I, X] = b(""), [i, w] = b(!1), [o, z] = b(B), u = q || o;
+  function L(e) {
+    return u.includes(e);
+  }
+  function Y(e) {
+    const r = M.find(($) => $.value === e);
+    return (r == null ? void 0 : r.label) || "";
+  }
+  function Z() {
+    a || !(n != null && n.current) || i || (w(!0), n.current.focus(), C && C());
+  }
+  function N() {
+    w(!1), J && n.current && n.current.blur();
+  }
+  function _(e) {
+    X(e), O && O(e);
+  }
+  function y(e) {
+    L(e) ? (z(o.filter((r) => r !== e)), s && s(o.filter((r) => r !== e))) : (z([...o, e]), s && s([...o, e])), j && N();
+  }
+  const k = M.filter((e) => !!(d.onSearch || !d.isSearchable || e.label.toLowerCase().includes(I.toLowerCase())));
+  return /* @__PURE__ */ t(
+    ne,
+    {
+      name: m,
+      label: A,
+      showAsterisk: D,
+      className: v,
+      errorMessage: F,
+      unShowFieldTemplate: K,
+      orientation: P,
+      children: /* @__PURE__ */ S(
+        le,
+        {
+          handleContainerFocus: Z,
+          disabled: a,
+          isError: U,
+          isFocused: i,
+          isLoading: l,
+          readOnly: p,
+          size: c,
+          variant: G,
+          prefixExists: !!x,
+          id: Q,
+          children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: n,
+                name: m,
+                value: JSON.stringify(u),
+                type: "hidden"
+              }
+            ),
+            /* @__PURE__ */ t(ie, { iconSize: f, icon: x, className: "prefix" }),
+            g && /* @__PURE__ */ t(g, { size: f, strokeWidth: 2.5 }),
+            /* @__PURE__ */ S(se, { size: c, children: [
+              u.map((e) => /* @__PURE__ */ t(
+                ce,
+                {
+                  label: Y(e),
+                  value: e,
+                  handleChangeValue: y,
+                  disabled: a
+                },
+                e
+              )),
+              u.length <= 0 && /* @__PURE__ */ t("p", { children: T })
+            ] }),
+            /* @__PURE__ */ S(
+              fe,
+              {
+                isFocused: i,
+                isSearchable: H,
+                search: I,
+                onSearch: _,
+                children: [
+                  k.map(({ label: e, value: r }) => /* @__PURE__ */ t(
+                    ae,
+                    {
+                      label: e,
+                      value: r,
+                      size: c,
+                      handleChangeValue: y,
+                      optionHasSelected: L
+                    },
+                    r
+                  )),
+                  k.length <= 0 && /* @__PURE__ */ t("p", { children: R })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              oe,
+              {
+                disabled: a,
+                isFocused: i,
+                readOnly: p,
+                iconSize: f,
+                isLoading: l
+              }
+            ),
+            /* @__PURE__ */ t(de, { iconSize: f, isLoading: l }),
+            /* @__PURE__ */ t(ue, { handleBlur: N, isFocused: i })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Ne as MultiSelect
+};

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

@@ -0,0 +1,22 @@
+import { jsx as e, Fragment as c } from "react/jsx-runtime";
+import { ChevronDown as a } from "lucide-react";
+/* empty css           */
+function g(n) {
+  const { iconSize: t, isLoading: o, disabled: i, readOnly: r, isFocused: s } = n, m = `arkynMultiSelectChevron ${i || r ? "notAnimate" : ""} ${s ? "focused" : ""}`;
+  return o ? /* @__PURE__ */ e(c, {}) : /* @__PURE__ */ e(
+    a,
+    {
+      className: m,
+      strokeWidth: 2.5,
+      style: {
+        minWidth: t,
+        minHeight: t,
+        maxWidth: t,
+        maxHeight: t
+      }
+    }
+  );
+}
+export {
+  g as MultiSelectChevron
+};

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

@@ -0,0 +1,30 @@
+import { jsx as p } from "react/jsx-runtime";
+/* empty css           */
+function P(e) {
+  const {
+    children: r,
+    handleContainerFocus: o,
+    disabled: i,
+    isError: s,
+    isLoading: t,
+    isFocused: n,
+    className: c,
+    readOnly: a,
+    variant: d,
+    size: l,
+    id: f,
+    prefixExists: u
+  } = e;
+  return /* @__PURE__ */ p(
+    "section",
+    {
+      id: f,
+      className: `arkynMultiSelectContainer ${u ? "hasPrefix" : ""} ${d} ${l} ${i || a || t ? "opacity" : ""} ${s ? "errored" : ""} ${n ? "focused" : ""} ${c}`,
+      onClick: o,
+      children: r
+    }
+  );
+}
+export {
+  P as MultiSelectContainer
+};

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

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+/* empty css           */
+function l(t) {
+  const { children: e, size: n } = t, o = `arkynMultiSelectContent ${n}`;
+  return /* @__PURE__ */ i("div", { className: o, children: e });
+}
+export {
+  l as MultiSelectContent
+};

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

@@ -0,0 +1,23 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { X as c } from "lucide-react";
+/* empty css           */
+function d(e) {
+  const { label: l, value: o, disabled: r, handleChangeValue: a } = e;
+  return /* @__PURE__ */ i("div", { className: "arkynMultiSelectMark", children: [
+    l,
+    /* @__PURE__ */ t(
+      "button",
+      {
+        disabled: r,
+        type: "button",
+        onClick: (n) => {
+          n.stopPropagation(), a(o);
+        },
+        children: /* @__PURE__ */ t(c, {})
+      }
+    )
+  ] });
+}
+export {
+  d as MultiSelectMark
+};

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

@@ -0,0 +1,14 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { Check as p } from "lucide-react";
+/* empty css           */
+function d(t) {
+  const { label: i, optionHasSelected: o, handleChangeValue: n, value: e, size: c } = t, l = o(e) ? "active" : "", a = `arkynMultiSelectOption ${c} ${l}`;
+  return /* @__PURE__ */ s("div", { onClick: () => n(e), className: a, children: [
+    i,
+    " ",
+    /* @__PURE__ */ r(p, {})
+  ] });
+}
+export {
+  d as MultiSelectOption
+};