lawgic-dev-kit 0.12.4 → 0.12.8

package/dist/components/molecules/CalendarSelector/CalendarSelector.js

@@ -1,124 +1,184 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { faChevronRight as J } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { faChevronLeft as K } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
-import { useState as c, useEffect as Q } from "react";
-import { FontAwesomeIcon as V } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faChevronRight as oe } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { faChevronLeft as ne } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
+import { useState as d, useEffect as $, useRef as H } from "react";
+import { FontAwesomeIcon as se } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import "../../../_virtual/lodash.js";
-import { useTheme as X } from "../../../hooks/useTheme.js";
-import k from "../FloatingMenu/FloatingMenu.js";
-import Z from "./PeriodToggle.js";
-import ee from "./TimeDisplay.js";
-import { faChevronDown as te } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { useTheme as ie } from "../../../hooks/useTheme.js";
+import Y from "../FloatingMenu/FloatingMenu.js";
+import ae from "./PeriodToggle.js";
+import le from "./TimeDisplay.js";
+import { faChevronDown as me } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
 import "react-hook-form";
+import "../../../_virtual/client.js";
+import "../../../dist/_virtual/jsx-runtime.js";
+import "../../../dist/node_modules/@fortawesome/react-fontawesome/index.es.js";
+import "../../../dist/node_modules/framer-motion/dist/es/context/LayoutGroupContext.js";
+import "../../../dist/node_modules/framer-motion/dist/es/context/MotionConfigContext.js";
+import "../../../dist/node_modules/motion-utils/dist/es/errors.js";
+import "../../../dist/node_modules/framer-motion/dist/es/render/html/utils/keys-transform.js";
+import "../../../dist/node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.js";
+import "../../../dist/node_modules/framer-motion/dist/es/value/types/color/hex.js";
+import "../../../dist/node_modules/framer-motion/dist/es/value/types/numbers/index.js";
+import "../../../dist/node_modules/framer-motion/dist/es/value/types/numbers/units.js";
+import "../../../dist/node_modules/framer-motion/dist/es/value/types/color/rgba.js";
+import "../../../dist/node_modules/framer-motion/dist/es/value/types/complex/filter.js";
+import "../../../dist/node_modules/framer-motion/dist/es/render/dom/value-types/type-int.js";
+import "../../../dist/node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.js";
+import "../../../dist/node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.js";
+import "../../../dist/node_modules/framer-motion/dist/es/projection/node/create-projection-node.js";
+import "../../../dist/node_modules/framer-motion/dist/es/context/LazyContext.js";
+import "../../../dist/node_modules/framer-motion/dist/es/motion/features/definitions.js";
+import "../../../dist/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.js";
+import "../../../dist/node_modules/framer-motion/dist/es/render/dom/utils/filter-props.js";
+import "../../../dist/_virtual/lodash.js";
+import "../../../dist/contexts/themeContext.js";
+import "../../../dist/constants/countries.js";
+import "../../../dist/components/atoms/ImageProfileInput/ImageProfileInput.validators.js";
 import "react-dom";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/render/html/utils/keys-transform.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/animation/optimized-appear/data-id.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/value/types/color/rgba.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/value/types/numbers/index.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/value/types/numbers/units.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/value/types/complex/filter.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/render/dom/value-types/type-int.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.js";
+import "../../../dist/node_modules/motion/dist/es/motion-utils/dist/es/errors.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/context/SwitchLayoutGroupContext.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/projection/node/create-projection-node.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/context/LazyContext.js";
+import "../../../dist/node_modules/motion/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.js";
+import "../../../dist/node_modules/@floating-ui/react/dist/floating-ui.react.js";
 import "../../../constants/countries.js";
-import P from "../../atoms/IconButton/IconButton.js";
+import I from "../../atoms/IconButton/IconButton.js";
 import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
-import { AnimatePresence as oe } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion as A } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import { startOfWeek as re } from "../../../node_modules/date-fns/startOfWeek.js";
-import { startOfMonth as ne } from "../../../node_modules/date-fns/startOfMonth.js";
-import { endOfWeek as se } from "../../../node_modules/date-fns/endOfWeek.js";
-import { endOfMonth as ie } from "../../../node_modules/date-fns/endOfMonth.js";
-import { eachDayOfInterval as ae } from "../../../node_modules/date-fns/eachDayOfInterval.js";
-import { isSameDay as le } from "../../../node_modules/date-fns/isSameDay.js";
-import { isSameMonth as ce } from "../../../node_modules/date-fns/isSameMonth.js";
-import { isToday as me } from "../../../node_modules/date-fns/isToday.js";
-import { subMonths as de } from "../../../node_modules/date-fns/subMonths.js";
-import { addMonths as pe } from "../../../node_modules/date-fns/addMonths.js";
-import { setHours as O } from "../../../node_modules/date-fns/setHours.js";
-import { setMinutes as H } from "../../../node_modules/date-fns/setMinutes.js";
-import { setSeconds as T } from "../../../node_modules/date-fns/setSeconds.js";
-import { formatDate as m } from "../../../node_modules/date-fns/format.js";
-import { es as j } from "../../../node_modules/date-fns/locale/es.js";
-const ze = ({
-  date: a,
-  onDateChange: C,
-  showTimeSelector: $ = !0,
-  maxDate: d
+import { AnimatePresence as ce } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as B } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+import { startOfWeek as pe } from "../../../node_modules/date-fns/startOfWeek.js";
+import { startOfMonth as de } from "../../../node_modules/date-fns/startOfMonth.js";
+import { endOfWeek as ue } from "../../../node_modules/date-fns/endOfWeek.js";
+import { endOfMonth as fe } from "../../../node_modules/date-fns/endOfMonth.js";
+import { eachDayOfInterval as xe } from "../../../node_modules/date-fns/eachDayOfInterval.js";
+import { isSameDay as he } from "../../../node_modules/date-fns/isSameDay.js";
+import { isSameMonth as ge } from "../../../node_modules/date-fns/isSameMonth.js";
+import { isToday as Me } from "../../../node_modules/date-fns/isToday.js";
+import { subMonths as ye } from "../../../node_modules/date-fns/subMonths.js";
+import { addMonths as ve } from "../../../node_modules/date-fns/addMonths.js";
+import { setHours as U } from "../../../node_modules/date-fns/setHours.js";
+import { setMinutes as R } from "../../../node_modules/date-fns/setMinutes.js";
+import { setSeconds as L } from "../../../node_modules/date-fns/setSeconds.js";
+import { formatDate as u } from "../../../node_modules/date-fns/format.js";
+import { es as h } from "../../../node_modules/date-fns/locale/es.js";
+const Lt = ({
+  date: m,
+  onDateChange: S,
+  showTimeSelector: _ = !0,
+  maxDate: g
 }) => {
-  const [i, p] = c(a), [b, h] = c(a), [f, w] = c(a.getHours() % 12 || 12), [g, N] = c(
-    a.getHours() >= 12 ? "PM" : "AM"
-  ), [y, D] = c(0), { t: Y } = X(), [F, M] = c(!1), [E, v] = c(!1);
-  Q(() => {
-    p(a), h(a), w(a.getHours() % 12 || 12), N(a.getHours() >= 12 ? "PM" : "AM");
-  }, [a]);
-  const B = () => {
-    D(-1), setTimeout(() => {
-      p(de(i));
+  const [i, M] = d(m), [E, w] = d(m), [y, k] = d(m.getHours() % 12 || 12), [b, A] = d(
+    m.getHours() >= 12 ? "PM" : "AM"
+  ), [C, O] = d(0), { t: W } = ie(), [P, j] = d(!1), [T, N] = d(!1);
+  $(() => {
+    M(m), w(m), k(m.getHours() % 12 || 12), A(m.getHours() >= 12 ? "PM" : "AM");
+  }, [m]);
+  const q = () => {
+    O(-1), setTimeout(() => {
+      M(ye(i));
     }, 10);
-  }, I = () => {
-    D(1), setTimeout(() => {
-      p(pe(i, 1));
+  }, z = () => {
+    O(1), setTimeout(() => {
+      M(ve(i, 1));
     }, 10);
-  }, U = (o) => {
-    if (d && o > d)
+  }, G = (t) => {
+    if (g && t > g)
       return;
-    const n = O(
-      H(T(o, 0), 0),
-      g === "AM" ? f % 12 : f % 12 + 12
+    const s = U(
+      R(L(t, 0), 0),
+      b === "AM" ? y % 12 : y % 12 + 12
     );
-    h(n), C(n);
-  }, L = (o) => {
-    w(o);
-    const n = O(
-      H(T(b, 0), 0),
-      g === "AM" ? o % 12 : o % 12 + 12
+    w(s), S(s);
+  }, J = (t) => {
+    k(t);
+    const s = U(
+      R(L(E, 0), 0),
+      b === "AM" ? t % 12 : t % 12 + 12
     );
-    h(n), C(n), M(!1);
-  }, R = (o) => {
-    N(o);
-  }, W = () => {
-    const o = /* @__PURE__ */ new Date(), n = [];
-    for (let t = 0; t <= 20; t++) {
-      const s = new Date(o.getFullYear(), o.getMonth() - t, 1);
-      n.push({
-        name: m(s, "MMMM", { locale: j }).replace(
-          /^./,
-          (r) => r.toUpperCase()
-        ),
-        index: s.getMonth(),
-        year: s.getFullYear(),
-        displayName: `${m(s, "MMMM", { locale: j }).replace(
+    w(s), S(s), j(!1);
+  }, K = (t) => {
+    A(t);
+  }, Q = () => {
+    const t = /* @__PURE__ */ new Date(), s = 20, c = 5, [n, D] = d(() => Array.from({ length: s + 1 }, (r, l) => {
+      const o = new Date(t.getFullYear(), t.getMonth() - l, 1);
+      return {
+        name: u(o, "MMMM", { locale: h }).replace(/^./, (f) => f.toUpperCase()),
+        index: o.getMonth(),
+        year: o.getFullYear(),
+        displayName: `${u(o, "MMMM", { locale: h }).replace(
           /^./,
-          (r) => r.toUpperCase()
-        )} ${s.getFullYear()}`
-      });
-    }
-    const l = (t, s) => {
-      const r = new Date(i);
-      r.setMonth(t), r.setFullYear(s), p(r), v(!1);
+          (f) => f.toUpperCase()
+        )} ${o.getFullYear()}`
+      };
+    })), a = H(null), p = H(null);
+    $(() => {
+      a.current && a.current.disconnect(), a.current = new IntersectionObserver((r) => {
+        r[0].isIntersecting && D((l) => {
+          const o = l[l.length - 1], f = new Date(o.year, o.index - 1, 1), te = Array.from({ length: c }, (we, re) => {
+            const x = new Date(f.getFullYear(), f.getMonth() - re, 1);
+            return {
+              name: u(x, "MMMM", { locale: h }).replace(/^./, (F) => F.toUpperCase()),
+              index: x.getMonth(),
+              year: x.getFullYear(),
+              displayName: `${u(x, "MMMM", { locale: h }).replace(
+                /^./,
+                (F) => F.toUpperCase()
+              )} ${x.getFullYear()}`
+            };
+          });
+          return [...l, ...te];
+        });
+      }), p.current && a.current.observe(p.current);
+    }, [n]);
+    const v = (r, l) => {
+      const o = new Date(i);
+      o.setMonth(r), o.setFullYear(l), M(o), N(!1);
     };
-    return /* @__PURE__ */ e.jsx("div", { className: "flex flex-col p-8 max-h-200 overflow-y-auto bg-light gap-4", children: n.map((t, s) => /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        onClick: () => l(t.index, t.year),
-        className: `text-start p-6 font-600 transition-all duration-100 rounded-lg hover:bg-gray-100 ${i.getMonth() === t.index && i.getFullYear() === t.year ? "bg-blue-100" : ""}`,
-        children: t.displayName
-      },
-      `${t.name}-${t.year}-${s}`
-    )) });
-  }, _ = () => /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mb-8", children: [
+    return /* @__PURE__ */ e.jsx("div", { className: "flex flex-col p-8 max-h-200 overflow-y-auto bg-light gap-4", children: n.map((r, l) => {
+      const o = l === n.length - 1;
+      return /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          ref: o ? p : null,
+          onClick: () => v(r.index, r.year),
+          className: `text-start p-6 font-600 transition-all duration-100 rounded-lg hover:bg-gray-100 ${i.getMonth() === r.index && i.getFullYear() === r.year ? "bg-blue-100" : ""}`,
+          children: r.displayName
+        },
+        `${r.name}-${r.year}-${l}`
+      );
+    }) });
+  }, V = () => /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mb-8", children: [
     /* @__PURE__ */ e.jsx(
-      k,
+      Y,
       {
-        open: E,
-        onClose: () => v(!1),
-        component: W,
+        open: T,
+        onClose: () => N(!1),
+        component: Q,
         placement: "bottom",
         className: "!p-0 overflow-hidden bg-light",
         strategy: "fixed",
         children: /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => v(!E),
+            onClick: () => N(!T),
             className: "hover:text-blue-500 transition-colors duration-150 flex gap-6 items-center",
             children: [
-              /* @__PURE__ */ e.jsx("h4", { className: "text-header-4", children: m(i, "MMMM yyyy", { locale: j }).replace(
+              /* @__PURE__ */ e.jsx("h4", { className: "text-header-4", children: u(i, "MMMM yyyy", { locale: h }).replace(
                 /^./,
-                (o) => o.toUpperCase()
+                (t) => t.toUpperCase()
               ) }),
-              /* @__PURE__ */ e.jsx(V, { icon: te, className: "w-12 h-12" })
+              /* @__PURE__ */ e.jsx(se, { icon: me, className: "w-12 h-12" })
             ]
           }
         )
@@ -126,41 +186,41 @@ const ze = ({
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8", children: [
       /* @__PURE__ */ e.jsx(
-        P,
+        I,
         {
           variant: "transparent",
           color: "gray",
-          icon: K,
-          onClick: B
+          icon: ne,
+          onClick: q
         }
       ),
       /* @__PURE__ */ e.jsx(
-        P,
+        I,
         {
           variant: "transparent",
           color: "gray",
-          icon: J,
-          onClick: I
+          icon: oe,
+          onClick: z
         }
       )
     ] })
-  ] }), q = () => {
-    const o = re(ne(i)), n = se(ie(i)), l = ae({ start: o, end: n });
-    return /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-7 gap-2", children: l.map((t, s) => {
-      const r = le(t, b), u = ce(t, i), S = me(t), x = d ? t > d : !1;
+  ] }), X = () => {
+    const t = pe(de(i)), s = ue(fe(i)), c = xe({ start: t, end: s });
+    return /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-7 gap-2", children: c.map((n, D) => {
+      const a = he(n, E), p = ge(n, i), v = Me(n), r = g ? n > g : !1;
       return /* @__PURE__ */ e.jsx(
-        A.div,
+        B.div,
         {
           className: `
                 p-2 text-center w-[40px] h-[40px] rounded-full flex items-center justify-center font-600 select-none
-                ${!u || x ? "text-gray-400 pointer-events-none" : "cursor-pointer"}
-                ${S && !r ? "text-blue-600" : ""}
+                ${!p || r ? "text-gray-400 pointer-events-none" : "cursor-pointer"}
+                ${v && !a ? "text-blue-600" : ""}
               `,
-          onClick: () => U(t),
+          onClick: () => G(n),
           initial: !1,
           animate: {
-            backgroundColor: r ? "#93C5FD" : "transparent",
-            color: r ? "#FFFFFF" : S ? "#2563EB" : u && !x ? "#000000" : "#9CA3AF"
+            backgroundColor: a ? "#93C5FD" : "transparent",
+            color: a ? "#FFFFFF" : v ? "#2563EB" : p && !r ? "#000000" : "#9CA3AF"
           },
           transition: {
             duration: 0.2,
@@ -170,62 +230,62 @@ const ze = ({
               ease: "easeOut"
             }
           },
-          whileHover: u && !r && !x ? {
+          whileHover: p && !a && !r ? {
             backgroundColor: "#E5E7EB"
           } : {},
-          whileTap: u && !x ? {
-            backgroundColor: r ? "#7AA5E0" : "#D1D5DB"
+          whileTap: p && !r ? {
+            backgroundColor: a ? "#7AA5E0" : "#D1D5DB"
           } : {},
-          children: m(t, "d")
+          children: u(n, "d")
         },
-        s
+        D
       );
     }) });
-  }, z = () => {
-    const o = Array.from({ length: 12 }, (l, t) => t + 1), n = () => /* @__PURE__ */ e.jsx("div", { className: "bg-white rounded-lg shadow-lg w-80 max-h-[150px] overflow-y-auto p-4 flex flex-col gap-4", children: o.map((l) => /* @__PURE__ */ e.jsxs(
+  }, Z = () => {
+    const t = Array.from({ length: 12 }, (c, n) => n + 1), s = () => /* @__PURE__ */ e.jsx("div", { className: "bg-white rounded-lg shadow-lg w-80 max-h-[150px] overflow-y-auto p-4 flex flex-col gap-4", children: t.map((c) => /* @__PURE__ */ e.jsxs(
       "button",
       {
-        onClick: () => L(l),
-        className: `w-full text-center py-2 transition-all duration-100 rounded-lg hover:bg-gray-100 ${l === f ? "text-blue-500 font-medium" : ""}`,
+        onClick: () => J(c),
+        className: `w-full text-center py-2 transition-all duration-100 rounded-lg hover:bg-gray-100 ${c === y ? "text-blue-500 font-medium" : ""}`,
         children: [
-          String(l).padStart(2, "0"),
+          String(c).padStart(2, "0"),
           ":00"
         ]
       },
-      l
+      c
     )) });
     return /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mt-4 mb-4", children: [
-      /* @__PURE__ */ e.jsx("h4", { className: "text-body-m font-medium", children: Y("time") }),
+      /* @__PURE__ */ e.jsx("h4", { className: "text-body-m font-medium", children: W("time") }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ e.jsx(
-          k,
+          Y,
           {
-            open: F,
-            onClose: () => M(!1),
-            component: n,
+            open: P,
+            onClose: () => j(!1),
+            component: s,
             placement: "bottom",
             className: "!p-0 overflow-hidden",
             strategy: "fixed",
             children: /* @__PURE__ */ e.jsx(
-              ee,
+              le,
               {
-                setHourMenuOpen: M,
-                hourMenuOpen: F,
-                selectedHour: f
+                setHourMenuOpen: j,
+                hourMenuOpen: P,
+                selectedHour: y
               }
             )
           }
         ),
         /* @__PURE__ */ e.jsx(
-          Z,
+          ae,
           {
-            selectedPeriod: g,
-            handlePeriodChange: R
+            selectedPeriod: b,
+            handlePeriodChange: K
           }
         )
       ] })
     ] });
-  }, G = {
+  }, ee = {
     slideNextEnter: {
       x: 300,
       opacity: 0
@@ -260,22 +320,22 @@ const ze = ({
     }
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "rounded-3xl max-w-[300px] mx-auto bg-white p-24 relative overflow-hidden", children: [
-    _(),
-    /* @__PURE__ */ e.jsx(oe, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ e.jsx(
-      A.div,
+    V(),
+    /* @__PURE__ */ e.jsx(ce, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ e.jsx(
+      B.div,
       {
-        variants: G,
-        initial: y === 1 ? "slideNextEnter" : y === -1 ? "slidePrevEnter" : !1,
+        variants: ee,
+        initial: C === 1 ? "slideNextEnter" : C === -1 ? "slidePrevEnter" : !1,
         animate: "center",
-        exit: y === 1 ? "slideNextExit" : "slidePrevExit",
+        exit: C === 1 ? "slideNextExit" : "slidePrevExit",
         className: "w-full",
-        children: q()
+        children: X()
       },
-      m(i, "yyyy-MM")
+      u(i, "yyyy-MM")
     ) }),
-    $ && z()
+    _ && Z()
   ] });
 };
 export {
-  ze as default
+  Lt as default
 };

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

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { Control, FieldValues, Path } from 'react-hook-form';
 export type DateInputProps<T extends FieldValues = FieldValues> = {
     control: Control<T>;
@@ -6,6 +5,7 @@ export type DateInputProps<T extends FieldValues = FieldValues> = {
     label?: string;
     placeholder?: string;
     showTimeSelector?: boolean;
+    translateKey?: string;
 };
-declare const DateInput: <T extends FieldValues = FieldValues>({ control, name, showTimeSelector, label, placeholder }: DateInputProps<T>) => React.ReactElement;
+declare const DateInput: <T extends FieldValues = FieldValues>({ control, name, showTimeSelector, label, translateKey, placeholder }: DateInputProps<T>) => React.ReactElement;
 export default DateInput;

package/dist/components/molecules/DateInput/DateInput.js

@@ -1,66 +1,79 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { useState as x } from "react";
-import { useController as C } from "react-hook-form";
-import g from "../CalendarSelector/CalendarSelector.js";
-import h from "../../atoms/UncontrolledTextInput/UncontrolledTextInput.js";
-import j from "../FloatingMenu/FloatingMenu.js";
-import { FontAwesomeIcon as D } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { faX as S } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { useTheme as I } from "../../../hooks/useTheme.js";
-import { formatLocalizedDate as v } from "../../../utils/dates.js";
-import "../../../_virtual/lodash.js";
-import "../../../constants/countries.js";
-import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
-import "react-dom";
-const O = ({ control: l, name: n, showTimeSelector: m = !1, label: p, placeholder: i }) => {
+import { j as m } from "../../../_virtual/jsx-runtime.js";
+import { useState as C, useEffect as F } from "react";
+import { useController as M } from "react-hook-form";
+import { faX as E } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { FontAwesomeIcon as V } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import k from "../FloatingMenu/FloatingMenu.js";
+import A from "../CalendarSelector/CalendarSelector.js";
+import B from "../../atoms/UncontrolledTextInput/UncontrolledTextInput.js";
+import { useTheme as K } from "../../../hooks/useTheme.js";
+import { formatDate as O } from "../../../node_modules/date-fns/format.js";
+const D = (a) => O(a, "dd/MM/yyyy"), N = (a) => {
+  const [t, n, o] = a.split("/");
+  if ((t == null ? void 0 : t.length) === 2 && (n == null ? void 0 : n.length) === 2 && (o == null ? void 0 : o.length) === 4) {
+    const l = new Date(Number(o), Number(n) - 1, Number(t));
+    return isNaN(l.getTime()) ? null : l;
+  }
+  return null;
+}, Q = ({ control: a, name: t, showTimeSelector: n = !1, label: o, translateKey: l = "", placeholder: j }) => {
   const {
-    field: { value: e = /* @__PURE__ */ new Date(), onChange: a, onBlur: u },
-    fieldState: { error: o }
-  } = C({ name: n, control: l }), { t: f } = I(), c = f(n), [d, s] = x(!1);
-  return /* @__PURE__ */ t.jsx(
-    j,
+    field: { value: i, onChange: p, onBlur: I },
+    fieldState: { error: u }
+  } = M({ name: t, control: a }), { t: g } = K(), b = g(t), S = g(l), [T, c] = C(!1), [h, r] = C("");
+  F(() => {
+    i instanceof Date && !isNaN(i.getTime()) ? r(D(i)) : r("");
+  }, [i]);
+  const x = N(h), v = (e) => {
+    const s = e.replace(/\D/g, "").slice(0, 8), f = [];
+    s.length > 0 && f.push(s.slice(0, 2)), s.length > 2 && f.push(s.slice(2, 4)), s.length > 4 && f.push(s.slice(4, 8));
+    const d = f.join("/");
+    if (r(d), c(!1), d.length === 10) {
+      const y = N(d);
+      p(y);
+    }
+  }, w = () => {
+    p(null), r("");
+  };
+  return /* @__PURE__ */ m.jsx(
+    k,
     {
-      open: d,
+      open: T,
       strategy: "fixed",
       padding: 0,
       offset: 0,
-      onClose: () => s(!1),
-      className: "!p-0",
-      component: /* @__PURE__ */ t.jsx(
-        g,
+      onClose: () => c(!1),
+      className: "p-0!",
+      component: /* @__PURE__ */ m.jsx(
+        A,
         {
-          date: e || /* @__PURE__ */ new Date(),
-          onDateChange: (r) => {
-            a(r);
+          date: x || /* @__PURE__ */ new Date(),
+          onDateChange: (e) => {
+            r(D(e)), p(e), c(!1);
           },
-          showTimeSelector: m
+          showTimeSelector: n,
+          maxDate: /* @__PURE__ */ new Date()
         }
       ),
-      children: /* @__PURE__ */ t.jsx(
-        h,
+      children: /* @__PURE__ */ m.jsx(
+        B,
         {
-          onBlur: u,
-          name: c,
-          label: p,
-          onFocus: (r) => {
-            r.preventDefault(), s(!0);
+          onBlur: I,
+          name: S || b,
+          label: o,
+          value: h,
+          onFocus: (e) => {
+            e.preventDefault(), c(!0);
           },
-          value: e && v(e) || "",
           disabledInput: !0,
-          onChange: () => {
-          },
-          onSelect: () => {
-          },
-          onSelectCapture: () => {
-          },
-          placeholder: i,
-          error: o == null ? void 0 : o.message,
-          rightSide: e && /* @__PURE__ */ t.jsx(
-            D,
+          onChange: (e) => v(e),
+          placeholder: j,
+          error: u == null ? void 0 : u.message,
+          rightSide: !!x && /* @__PURE__ */ m.jsx(
+            V,
             {
-              icon: S,
+              icon: E,
               className: "text-gray-500 cursor-pointer",
-              onClick: () => a(null)
+              onClick: w
             }
           )
         }
@@ -69,5 +82,5 @@ const O = ({ control: l, name: n, showTimeSelector: m = !1, label: p, placeholde
   );
 };
 export {
-  O as default
+  Q as default
 };