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

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

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

package/dist/modules/components/select/selectChevron/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 = `arkynSelectChevron ${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 SelectChevron
+};

package/dist/modules/components/select/selectContainer/index.js

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

package/dist/modules/components/select/selectContent/index.js

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

package/dist/modules/components/select/selectOption/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 u(t) {
+  const { label: o, optionHasSelected: n, handleChangeValue: c, value: e, size: i } = t, a = n(e) ? "active" : "", l = `arkynSelectOption ${i} ${a}`;
+  return /* @__PURE__ */ s("div", { onClick: () => c(e), className: l, children: [
+    o,
+    " ",
+    /* @__PURE__ */ r(p, {})
+  ] });
+}
+export {
+  u as SelectOption
+};

package/dist/modules/components/select/selectOptionsContainer/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: `arkynSelectOptionsContainer ${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 SelectOptionsContainer
+};

package/dist/modules/components/select/selectOverlay/index.js

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

package/dist/modules/components/select/selectSpinner/index.js

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

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

@@ -0,0 +1,42 @@
+import { jsxs as p, jsx as g } from "react/jsx-runtime";
+import { useState as E, useRef as w, useEffect as b } from "react";
+/* empty css           */
+function N(f) {
+  const {
+    onChange: u,
+    value: d,
+    disabled: r = !1,
+    onDragging: s,
+    className: v = "",
+    ...h
+  } = f, [t, m] = E(!1), e = w(null), C = () => m(!0), i = () => m(!1), o = (a) => {
+    if (r || !t || !e.current) return;
+    const n = e.current.getBoundingClientRect(), l = a.clientX - n.left, c = Math.min(Math.max(l / n.width * 100, 0), 100);
+    u(c);
+  }, D = (a) => {
+    if (r || !e.current) return;
+    const n = e.current.getBoundingClientRect(), l = a.clientX - n.left, c = Math.min(Math.max(l / n.width * 100, 0), 100);
+    u(c);
+  };
+  b(() => (t ? (s && s(!0), document.addEventListener("mousemove", o), document.addEventListener("mouseup", i)) : (s && s(!1), document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", i)), () => {
+    document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", i);
+  }), [t]);
+  const M = `arkynSliderTrack ${t ? "isDragging" : "isNotDragging"} ${r ? "isDisabled" : "isEnabled"} ${v}`;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ...h,
+      className: M,
+      onMouseDown: C,
+      onClick: D,
+      ref: e,
+      children: [
+        /* @__PURE__ */ g("div", { className: "arkynSliderFill", style: { width: `${d}%` } }),
+        /* @__PURE__ */ g("div", { className: "arkynSliderThumb", style: { left: `${d}%` } })
+      ]
+    }
+  );
+}
+export {
+  N as Slider
+};

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

@@ -0,0 +1,63 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as I, useId as R, useState as T } from "react";
+import { FieldTemplate as $ } from "../../services/fieldTemplate.js";
+/* empty css           */
+function M(i) {
+  const {
+    label: d,
+    size: h = "lg",
+    defaultChecked: u = !1,
+    checked: c = null,
+    value: t,
+    unCheckedValue: a = "",
+    name: n,
+    className: k = "",
+    onCheck: l,
+    id: m,
+    orientation: p = "horizontalReverse",
+    className: C = "",
+    showAsterisk: f,
+    errorMessage: b,
+    unShowFieldTemplate: N = !1,
+    ...w
+  } = i, y = I(null), S = m || R(), [o, v] = T(u), e = typeof c == "boolean" ? c : o;
+  function r() {
+    v(!o), l && l(e ? a : t || "checked");
+  }
+  const F = `arkynSwitch ${e ? "checkedTrue" : "checkedFalse"} ${h} ${k}`;
+  return /* @__PURE__ */ s(
+    $,
+    {
+      name: n,
+      label: d,
+      showAsterisk: f,
+      className: C,
+      errorMessage: b,
+      unShowFieldTemplate: N,
+      orientation: p,
+      children: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: r,
+          className: F,
+          ...w,
+          children: /* @__PURE__ */ s(
+            "input",
+            {
+              id: S,
+              type: "hidden",
+              name: n,
+              ref: y,
+              onClick: r,
+              value: e ? t || "checked" : a
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  M as Switch
+};

package/dist/modules/components/tab/tabButton/index.js

@@ -0,0 +1,30 @@
+import { jsx as C } from "react/jsx-runtime";
+import { useTab as f } from "../tabContext.js";
+/* empty css           */
+function h(e) {
+  const {
+    children: i,
+    disabled: l = !1,
+    className: n = "",
+    onClick: a,
+    value: s,
+    ...c
+  } = e, { disabled: o, currentTab: r, changeCurrentTab: b } = f(), t = o || l, d = `arkynTabButton ${t ? "isDisabled" : ""} ${r === s && s ? "isActive" : ""} ${n}`;
+  function u(m) {
+    b(s), a && a(m);
+  }
+  return /* @__PURE__ */ C(
+    "button",
+    {
+      onClick: u,
+      className: d.trim(),
+      ...c,
+      disabled: t,
+      type: "button",
+      children: i
+    }
+  );
+}
+export {
+  h as TabButton
+};

package/dist/modules/components/tab/tabContainer/index.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { TabProvider as d } from "../tabContext.js";
+/* empty css           */
+function N(n) {
+  const {
+    children: t,
+    onChange: a,
+    defaultValue: s,
+    disabled: o = !1,
+    className: i,
+    ...c
+  } = n, [m, l] = u(s || ""), b = `arkynTabContainer ${i || ""}`;
+  function f(r) {
+    l(r), a && a(r);
+  }
+  return /* @__PURE__ */ e(
+    d,
+    {
+      disabled: o,
+      currentTab: m,
+      changeCurrentTab: f,
+      children: /* @__PURE__ */ e("nav", { className: b.trim(), ...c, children: t })
+    }
+  );
+}
+export {
+  N as TabContainer
+};

package/dist/modules/components/tab/tabContext.js

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

package/dist/modules/components/table/tableBody/index.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Children as d } from "react";
+/* empty css           */
+function y(n) {
+  const {
+    emptyMessage: o = "Nenhum dado adicionado.",
+    className: r,
+    children: a,
+    ...s
+  } = n, t = `arkynTableBody ${r}`, c = d.count(a) === 0;
+  return /* @__PURE__ */ e("tbody", { className: t.trim(), ...s, children: c ? /* @__PURE__ */ e("tr", { className: "arkynTableBodyEmptyLine", children: /* @__PURE__ */ e("td", { colSpan: 100, children: /* @__PURE__ */ e("div", { children: o }) }) }) : a });
+}
+export {
+  y as TableBody
+};

package/dist/modules/components/table/tableCaption/index.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+/* empty css           */
+function c(e) {
+  const { className: n, children: s, ...t } = e, o = `arkynTableCaption ${n}`;
+  return /* @__PURE__ */ a("caption", { className: o.trim(), ...t, children: /* @__PURE__ */ a("div", { className: "arkynTableCaptionContent", children: s }) });
+}
+export {
+  c as TableCaption
+};

package/dist/modules/components/table/tableContainer/index.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+/* empty css           */
+function o(e) {
+  const { children: r, className: s, ...n } = e, t = `arkynTableContainer ${s}`;
+  return /* @__PURE__ */ a("div", { className: t.trim(), ...n, children: /* @__PURE__ */ a("table", { children: r }) });
+}
+export {
+  o as TableContainer
+};

package/dist/modules/components/table/tableFooter/index.js

@@ -0,0 +1,12 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+/* empty css           */
+function i(a) {
+  const { className: s, children: r, ...t } = a, o = `arkynTableFooter ${s}`;
+  return /* @__PURE__ */ n("tfoot", { className: o.trim(), ...t, children: [
+    /* @__PURE__ */ e("tr", { className: "spacingRow" }),
+    /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("th", { colSpan: 100, children: /* @__PURE__ */ e("div", { className: "arkynTableFooterContent", children: r }) }) })
+  ] });
+}
+export {
+  i as TableFooter
+};

package/dist/modules/components/table/tableHeader/index.js

@@ -0,0 +1,12 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+/* empty css           */
+function o(e) {
+  const { className: s, children: r, ...t } = e, c = `arkynTableHeader ${s}`;
+  return /* @__PURE__ */ l("thead", { className: c.trim(), ...t, children: [
+    /* @__PURE__ */ a("tr", { children: r }),
+    /* @__PURE__ */ a("tr", { className: "spacingRow" })
+  ] });
+}
+export {
+  o as TableHeader
+};

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

@@ -0,0 +1,70 @@
+import { jsxs as j, jsx as s } from "react/jsx-runtime";
+import { useState as w, useRef as S, useId as V } from "react";
+import { useForm as z } from "../../hooks/useForm.js";
+import { FieldLabel as A } from "../fieldLabel/index.js";
+import { FieldWrapper as L } from "../fieldWrapper/index.js";
+import { FieldError as O } from "../fieldError/index.js";
+/* empty css           */
+function X(F) {
+  const {
+    variant: h = "solid",
+    size: C = "md",
+    className: y,
+    errorMessage: x,
+    disabled: e = !1,
+    readOnly: c = !1,
+    label: n,
+    showAsterisk: T,
+    name: i,
+    onFocus: u,
+    onBlur: d,
+    title: $,
+    style: b,
+    value: f,
+    defaultValue: k,
+    placeholder: m,
+    id: v,
+    ...N
+  } = F, { fieldErrors: o } = z(), [g, a] = w(!1), r = S(null), p = v || V(), l = x || (o == null ? void 0 : o[i]), B = `arkynTextarea ${h} ${C} ${e || c ? "opacityTrue" : "opacityFalse"} ${!!l ? "errorTrue" : "errorFalse"} ${g ? "focusedTrue" : "focusedFalse"}`;
+  function E() {
+    e || !(r != null && r.current) || (a(!0), r.current.focus());
+  }
+  function I(t) {
+    a(!0), u && u(t);
+  }
+  function M(t) {
+    a(!1), d && d(t);
+  }
+  return /* @__PURE__ */ j(L, { className: y, children: [
+    n && /* @__PURE__ */ s(A, { htmlFor: p, showAsterisk: T, children: n }),
+    /* @__PURE__ */ s(
+      "section",
+      {
+        title: $,
+        style: b,
+        onClick: E,
+        className: B,
+        children: /* @__PURE__ */ s(
+          "textarea",
+          {
+            id: p,
+            disabled: e,
+            readOnly: c,
+            ref: r,
+            name: i,
+            onFocus: I,
+            onBlur: M,
+            defaultValue: k || "",
+            placeholder: e && f || m,
+            value: e ? void 0 : f,
+            ...N
+          }
+        )
+      }
+    ),
+    l && /* @__PURE__ */ s(O, { children: l })
+  ] });
+}
+export {
+  X as Textarea
+};

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

@@ -0,0 +1,46 @@
+import { jsxs as b, jsx as E } from "react/jsx-runtime";
+import { useId as x, useRef as L, useState as N, useEffect as j } from "react";
+/* empty css           */
+function z(f) {
+  const {
+    text: u,
+    size: p = "lg",
+    children: h,
+    orientation: e = "top",
+    className: g = "",
+    ...w
+  } = f, i = x(), n = L(null), [v, l] = N(e);
+  j(() => {
+    const r = () => {
+      if (!n.current) return;
+      const m = document.getElementById(i);
+      m && (l(e), requestAnimationFrame(() => {
+        const o = m.getBoundingClientRect(), d = window.innerWidth, a = window.innerHeight;
+        let t = e;
+        e === "left" && o.left < 0 ? t = "right" : e === "right" && o.right > d ? t = "left" : e === "top" && o.top < 0 ? t = "bottom" : e === "bottom" && o.bottom > a && (t = "top"), t === "right" && o.right > d ? t = "left" : t === "left" && o.left < 0 ? t = "right" : t === "bottom" && o.bottom > a ? t = "top" : t === "top" && o.top < 0 && (t = "bottom"), l(t);
+      }));
+    }, s = n.current;
+    if (!s) return;
+    const c = () => {
+      setTimeout(r, 1);
+    };
+    return s.addEventListener("mouseenter", c), window.addEventListener("resize", r), () => {
+      s.removeEventListener("mouseenter", c), window.removeEventListener("resize", r);
+    };
+  }, [e, i]);
+  const T = `arkynTooltip ${p} ${v} ${g}`;
+  return /* @__PURE__ */ b("div", { className: T.trim(), ...w, ref: n, children: [
+    h,
+    /* @__PURE__ */ E(
+      "div",
+      {
+        className: "arkynTooltipText",
+        id: i,
+        dangerouslySetInnerHTML: { __html: u }
+      }
+    )
+  ] });
+}
+export {
+  z as Tooltip
+};