lawgic-dev-kit 0.8.2 → 0.8.6

package/dist/components/atoms/Avatar/Avatar.js

@@ -7,8 +7,9 @@ import { getImageUrl as E } from "../../../utils/images.js";
 import "../../../_virtual/lodash.js";
 import "../../../providers/ThemeProvider.js";
 import "../ImageProfileInput/ImageProfileInput.validators.js";
+import "../../../constants/countries.js";
 import "react-dom";
-const T = ({ containerProps: x = {}, imageProps: d = {}, src: m = "", alt: i = "", size: e = 30, user: t = null }) => {
+const V = ({ containerProps: x = {}, imageProps: d = {}, src: m = "", alt: i = "", size: e = 30, user: t = null }) => {
   const { className: p = " ", ...g } = x, { className: s = " ", ...v } = d, o = e + "px", n = e * 0.5 + "px", l = e * 0.4 + "px", [j, w] = W(!1), N = () => i ? h(i) : t ? h(t != null && t.first_name || t != null && t.last_name ? ((t == null ? void 0 : t.first_name) || "") + " " + ((t == null ? void 0 : t.last_name) || "") : t == null ? void 0 : t.email) : "#9CA1B6", c = (f) => {
     try {
       return f ? (new URL(f), !0) : !1;
@@ -95,5 +96,5 @@ const T = ({ containerProps: x = {}, imageProps: d = {}, src: m = "", alt: i = "
   );
 };
 export {
-  T as default
+  V as default
 };

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,5 +1,10 @@
 import { default as React } from 'react';
-declare const Checkbox: React.FC<{
+type ColorVariant = "blue" | "aqua" | "red" | "gray";
+type Variant = "rounded" | "square";
+interface CheckboxProps extends React.ComponentPropsWithoutRef<"div"> {
     active?: boolean | string | number;
-}>;
+    color?: ColorVariant;
+    variant?: Variant;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

package/dist/components/atoms/CountryLabel/CountryLabel.js

@@ -0,0 +1,32 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+const o = ({ country: s }) => {
+  const a = (e) => {
+    var r;
+    return e ? e.codeISO2 ? e.codeISO2.toLowerCase() : ((r = e.code) == null ? void 0 : r.toLowerCase()) || "" : "";
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-8", children: [
+    /* @__PURE__ */ t.jsx(
+      "img",
+      {
+        loading: "lazy",
+        width: "24",
+        height: "16",
+        className: "mr-2",
+        src: `https://flagcdn.com/w20/${a(
+          s
+        )}.png`,
+        srcSet: `https://flagcdn.com/w40/${a(
+          s
+        )}.png 2x`,
+        alt: s.label,
+        onError: (e) => {
+          e.currentTarget.style.display = "none";
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx("p", { className: "text-body-s text-gray-600", children: s.label })
+  ] });
+};
+export {
+  o as default
+};

package/dist/components/atoms/PhoneInput/PhoneInput.js

@@ -0,0 +1,282 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { useState as f, useRef as h, useEffect as A } from "react";
+import { useController as xe } from "../../../node_modules/react-hook-form/dist/index.esm.js";
+import { useFloating as be, useClick as we, useDismiss as Ce, useInteractions as ve, useTransitionStyles as je } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import { FontAwesomeIcon as Ne } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faChevronDown as ye } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { useTheme as Se } from "../../../providers/ThemeProvider.js";
+import Le from "../../../constants/countries.js";
+import { autoUpdate as Te } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Ie, flip as $e, shift as Ee, size as Oe, arrow as Pe } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const Ye = ({
+  name: v,
+  control: H,
+  label: Y = "phone_number",
+  placeholder: U = "enter_phone_number",
+  language: W = "en",
+  className: X = "",
+  translateKey: q,
+  countries: i = Le
+}) => {
+  var z, F, D, V;
+  const { t: l } = Se(), { field: s, fieldState: j } = xe({
+    name: v,
+    control: H,
+    rules: { validate: {} }
+  }), N = ((z = s.value) == null ? void 0 : z.split(" ")) || [], G = N[0] || "", J = N[1] || "", K = i.find((e) => G === e.phone), [c, g] = f(!1), [d, y] = f(""), [r, S] = f(
+    K || null
+  ), [L, T] = f(J), [Q, I] = f(!1), x = h(null), $ = h(null), E = h(null), b = h(null), { x: Z, y: ee, strategy: te, refs: O, context: w, placement: oe, middlewareData: P } = be({
+    open: c,
+    onOpenChange: g,
+    middleware: [
+      Ie(8),
+      $e(),
+      Ee({ padding: 8 }),
+      Oe({
+        apply({ availableHeight: e, elements: o }) {
+          Object.assign(o.floating.style, {
+            maxHeight: `${Math.min(e - 10, 300)}px`
+          });
+        },
+        padding: 8
+      }),
+      Pe({ element: $ })
+    ],
+    placement: "bottom-start",
+    whileElementsMounted: Te
+  }), ne = we(w), re = Ce(w), { getReferenceProps: se, getFloatingProps: le } = ve([
+    ne,
+    re
+  ]), { isMounted: ae, styles: ie } = je(w, {
+    duration: {
+      open: 200,
+      close: 150
+    },
+    initial: {
+      opacity: 0,
+      transform: "translateY(-4px)"
+    }
+  }), R = (Array.isArray(i) ? i : []).filter((e) => {
+    if (!d.trim()) return !0;
+    const o = W === "es" && e.labelES ? e.labelES.toLowerCase() : e.label.toLowerCase(), n = e.code ? e.code.toLowerCase() : "", a = e.phone ? e.phone.toLowerCase() : "";
+    return o.includes(d.toLowerCase()) || n.includes(d.toLowerCase()) || a.includes(d.toLowerCase());
+  }), ce = (e) => {
+    S(e), g(!1), y("");
+    const o = `${e.phone} ${L}`;
+    s.onChange(o), setTimeout(() => {
+      var n;
+      (n = E.current) == null || n.focus();
+    }, 100);
+  }, de = (e) => {
+    const o = e.target.value;
+    if (T(o), r) {
+      const n = `${r.phone} ${o}`;
+      s.onChange(n);
+    }
+  }, ue = () => {
+    g(!c), !c && x.current && setTimeout(() => {
+      var e;
+      (e = x.current) == null || e.focus();
+    }, 100);
+  }, B = () => {
+    setTimeout(() => {
+      c || s.onBlur();
+    }, 200);
+  }, pe = () => {
+    I(!0);
+  }, me = () => {
+    I(!1);
+  };
+  A(() => {
+    if (s.value) {
+      const e = s.value.split(" "), o = e[0] || "", n = e[1] || "", a = i.find(
+        (m) => m.phone === o
+      );
+      a && S(a), T(n);
+    }
+  }, [s.value, i]), A(() => {
+    const e = (o) => {
+      b.current && !b.current.contains(o.target) && s.onBlur();
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [s]);
+  const C = (e) => {
+    var o;
+    return e ? e.codeISO2 ? e.codeISO2.toLowerCase() : ((o = e.code) == null ? void 0 : o.toLowerCase()) || "" : "";
+  }, M = (F = P.arrow) == null ? void 0 : F.x, k = (D = P.arrow) == null ? void 0 : D.y, u = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  }[oe.split("-")[0]], fe = se({
+    onClick: ue,
+    onBlur: B
+  }), _ = () => j.error ? "border-red-500" : Q || c ? "border-blue-400" : "border-blue-100", he = l(Y), ge = l(U), p = (V = j.error) == null ? void 0 : V.message;
+  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${X}`, children: [
+    /* @__PURE__ */ t.jsx(
+      "label",
+      {
+        className: `text-gray-600 font-600 group ${p && "!text-red-500"} text-label`,
+        children: he
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        ref: b,
+        className: "flex items-center w-full",
+        onMouseEnter: pe,
+        onMouseLeave: me,
+        children: [
+          /* @__PURE__ */ t.jsxs(
+            "div",
+            {
+              ref: O.setReference,
+              className: `flex items-center justify-between text-lg max-w-120 font-600 bg-light rounded-l-full p-16 cursor-pointer border border-r-0 transition-all duration-200 ${p ? "border-red-500" : _()}`,
+              style: { minWidth: "140px" },
+              ...fe,
+              tabIndex: 0,
+              children: [
+                r != null && r.code ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center truncate", children: [
+                  C(r) && /* @__PURE__ */ t.jsx(
+                    "img",
+                    {
+                      loading: "lazy",
+                      width: "24",
+                      height: "16",
+                      className: "mr-2",
+                      src: `https://flagcdn.com/w20/${C(
+                        r
+                      )}.png`,
+                      srcSet: `https://flagcdn.com/w40/${C(
+                        r
+                      )}.png 2x`,
+                      alt: r.label,
+                      onError: (e) => {
+                        e.currentTarget.style.display = "none";
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsxs("span", { children: [
+                    "+",
+                    r.phone
+                  ] })
+                ] }) : /* @__PURE__ */ t.jsx("span", { className: "text-gray-500 truncate", children: l("select_country") }),
+                /* @__PURE__ */ t.jsx(
+                  Ne,
+                  {
+                    icon: ye,
+                    className: "w-14 h-14 min-w-14 min-h-14"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              ref: E,
+              type: "tel",
+              className: `flex-grow bg-light rounded-r-full font-600 text-lg p-16 border transition-all duration-200 ${p ? "border-red-500" : _()}`,
+              placeholder: ge,
+              value: L,
+              onChange: de,
+              onBlur: B
+            }
+          )
+        ]
+      }
+    ),
+    p && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: l(p, { x: l(q || "") || v }) }),
+    ae && /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        ref: O.setFloating,
+        style: {
+          position: te,
+          top: ee ?? 0,
+          left: Z ?? 0,
+          ...ie
+        },
+        className: "z-10 w-fit bg-white border border-blue-400 rounded-3xl shadow-lg overflow-auto max-w-120",
+        ...le(),
+        children: [
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              ref: $,
+              className: "absolute w-4 h-4 bg-white rotate-45 border-blue-400",
+              style: {
+                left: M != null ? `${M}px` : "",
+                top: k != null ? `${k}px` : "",
+                right: "",
+                bottom: "",
+                [u]: "-2px",
+                borderRight: u === "left" ? "1px solid" : "none",
+                borderBottom: u === "top" ? "1px solid" : "none",
+                borderLeft: u === "right" ? "1px solid" : "none",
+                borderTop: u === "bottom" ? "1px solid" : "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ t.jsx("div", { className: "sticky top-0 bg-white p-2 z-20 w-fit", children: /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              ref: x,
+              type: "text",
+              className: "w-fit p-16",
+              placeholder: l("search") + "...",
+              value: d,
+              onChange: (e) => y(e.target.value),
+              onClick: (e) => e.stopPropagation(),
+              onBlur: (e) => {
+                e.stopPropagation();
+              },
+              autoFocus: !0
+            }
+          ) }),
+          /* @__PURE__ */ t.jsx("div", { children: R.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "flex flex-col", children: R.map((e, o) => {
+            var a;
+            const n = e.codeISO2 ? e.codeISO2.toLowerCase() : ((a = e.code) == null ? void 0 : a.toLowerCase()) || "";
+            return /* @__PURE__ */ t.jsxs(
+              "li",
+              {
+                className: "flex items-center justify-between gap-10 px-16 py-8 transition-all duration-200 hover:bg-blue-100/50 cursor-pointer",
+                onClick: (m) => {
+                  m.stopPropagation(), ce(e);
+                },
+                children: [
+                  n && /* @__PURE__ */ t.jsx(
+                    "img",
+                    {
+                      loading: "lazy",
+                      width: "24",
+                      height: "16",
+                      className: "mr-2",
+                      src: `https://flagcdn.com/w20/${n}.png`,
+                      srcSet: `https://flagcdn.com/w40/${n}.png 2x`,
+                      alt: e.label,
+                      onError: (m) => {
+                        m.currentTarget.style.display = "none";
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsxs("span", { className: "text-gray-500", children: [
+                    "+",
+                    e.phone
+                  ] })
+                ]
+              },
+              `${e.code}-${o}`
+            );
+          }) }) : /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-gray-500", children: l("no_countries_found") }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Ye as default
+};

package/dist/components/atoms/UploadContainer/UploadContainer.js

@@ -6,14 +6,15 @@ import { translateBytes as F } from "../../../utils/files.js";
 import "../../../_virtual/lodash.js";
 import "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import "../ImageProfileInput/ImageProfileInput.validators.js";
+import "../../../constants/countries.js";
 import "react-dom";
-const K = ({
+const q = ({
   title: h = "drag_and_drop_your_files_here",
   subtitle: d = null,
   buttonTitle: v = "choose_files",
   onUpload: j = () => {
   },
-  acceptedExtensions: n = [
+  acceptedExtensions: o = [
     "pdf",
     "png",
     "jpg",
@@ -24,24 +25,24 @@ const K = ({
     "xls",
     "xlsx"
   ],
-  maxSize: o = 1024
+  maxSize: n = 1024
   // en KB
 }) => {
-  const { t: l } = B(), [f, a] = g(!1), [m, i] = g(""), c = $(null), y = n.map((e) => `.${e}`).join(","), u = (e) => {
+  const { t: l } = B(), [m, a] = g(!1), [f, i] = g(""), c = $(null), y = o.map((e) => `.${e}`).join(","), u = (e) => {
     const r = [];
     let p = !1;
     Array.from(e).forEach((s) => {
       var x;
       const _ = ((x = s.name.split(".").pop()) == null ? void 0 : x.toLowerCase()) || "";
-      if (!n.includes(_)) {
+      if (!o.includes(_)) {
         i(
           `El archivo ${s.name} tiene una extensión no permitida.`
         ), p = !0;
         return;
       }
-      if (s.size > o * 1024) {
+      if (s.size > n * 1024) {
         i(
-          `El archivo ${s.name} excede el tamaño máximo de ${o}KB.`
+          `El archivo ${s.name} excede el tamaño máximo de ${n}KB.`
         ), p = !0;
         return;
       }
@@ -57,7 +58,7 @@ const K = ({
   }, C = (e) => {
     e.preventDefault(), e.stopPropagation(), a(!1);
   }, E = (e) => {
-    e.preventDefault(), e.stopPropagation(), f || a(!0);
+    e.preventDefault(), e.stopPropagation(), m || a(!0);
   }, w = (e) => {
     e.preventDefault(), e.stopPropagation(), a(!1);
     const r = e.dataTransfer.files;
@@ -67,7 +68,7 @@ const K = ({
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: `flex flex-col border-[1.4px] border-dashed rounded-2xl pt-28 p-32 text-center cursor-pointer transition-all duration-300 ${f ? "border-blue-400 bg-blue-100/50" : "border-gray-200 bg-white hover:border-blue-400"}`,
+        className: `flex flex-col border-[1.4px] border-dashed rounded-2xl pt-28 p-32 text-center cursor-pointer transition-all duration-300 ${m ? "border-blue-400 bg-blue-100/50" : "border-gray-200 bg-white hover:border-blue-400"}`,
         onDragEnter: N,
         onDragLeave: C,
         onDragOver: E,
@@ -101,15 +102,15 @@ const K = ({
         ]
       }
     ),
-    m && /* @__PURE__ */ t.jsx("div", { className: "mt-3 text-sm text-red-500", children: m }),
+    f && /* @__PURE__ */ t.jsx("div", { className: "mt-3 text-sm text-red-500", children: f }),
     /* @__PURE__ */ t.jsx("div", { className: "mt-10 w-full flex justify-center", children: /* @__PURE__ */ t.jsxs("span", { className: "text-gray-500 font-400 text-base", children: [
-      n.join(", ").toUpperCase(),
+      o.join(", ").toUpperCase(),
       " formats. Maximus size:",
       " ",
-      F(o, "mb")
+      F(n, "mb")
     ] }) })
   ] });
 };
 export {
-  K as default
+  q as default
 };

package/dist/components/atoms/index.d.ts

@@ -25,3 +25,6 @@ export * from './UncontrolledSelector/index';
 export * from './UncontrolledTextInput/index';
 export * from './UploadContainer/index';
 export * from './InformationDisclaimer/index';
+export * from './CountryLabel/index';
+export * from './PhoneInput/index';
+export * from './SidebarButton/index';

package/dist/components/molecules/AlertModal/AlertModal.js

@@ -8,14 +8,15 @@ import g from "../../atoms/BoxContainer/BoxContainer.js";
 import "react-dom";
 import a from "../../atoms/Button/Button.js";
 import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
+import "../../../constants/countries.js";
 import { AnimatePresence as u } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
 import { motion as n } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-const E = ({
+const I = ({
   title: s,
   description: r,
-  open: l,
+  open: o,
   onClose: i,
-  onConfirm: o,
+  onConfirm: l,
   onCancel: c
 }) => {
   const { t: e } = j(), m = {
@@ -46,11 +47,11 @@ const E = ({
       }
     }
   }, p = () => {
-    o(), i();
+    l(), i();
   }, d = () => {
     c(), i();
   };
-  return /* @__PURE__ */ t.jsx(u, { children: l && /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsx(u, { children: o && /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
     n.div,
     {
       className: "fixed inset-0 bg-black bg-opacity-50 z-9999 flex items-center justify-center",
@@ -107,5 +108,5 @@ const E = ({
   ) }) });
 };
 export {
-  E as default
+  I as default
 };

package/dist/components/molecules/CalendarSelector/CalendarSelector.d.ts

@@ -3,6 +3,7 @@ export type CalendarSelectorProps = {
     date: Date;
     onDateChange: (date: Date) => void;
     showTimeSelector?: boolean;
+    maxDate?: Date;
 };
 declare const CalendarSelector: React.FC<CalendarSelectorProps>;
 export default CalendarSelector;