lawgic-dev-kit 0.19.2 → 0.19.8

package/dist/components/atoms/FilterPill/FilterPill.js

@@ -0,0 +1,158 @@
+import { j as a } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as D } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faFilter as C, faX as I } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { useState as O } from "react";
+import "../../../contexts/themeContext.js";
+import "../../../_virtual/lodash.js";
+import "react-hook-form";
+import "../../../constants/countries.js";
+import "../ImageProfileInput/ImageProfileInput.validators.js";
+import $ from "../UncontrolledSelector/UncontrolledSelector.js";
+import L from "../UncontrolledTextInput/UncontrolledTextInput.js";
+import M from "../../molecules/FloatingMenu/FloatingMenu.js";
+import "../../molecules/InformationContainer/InformationContainer.js";
+import h from "../../molecules/UncontrolledDateInput/UncontrolledDateInput.js";
+const G = ({
+  filter: e,
+  filterControl: g,
+  translations: j = {}
+}) => {
+  var c, p, u, d, r, m, x, v, y, b;
+  const [k, l] = O(!0), { updateFilter: o, removeFilter: w } = g, S = !!(e != null && e.value), n = (t, s) => j[t] || s, N = (t, s = []) => {
+    const i = s.find((F) => F.value === t);
+    return i ? i.label : String(t);
+  };
+  return /* @__PURE__ */ a.jsx(
+    M,
+    {
+      open: k,
+      onClose: () => l(!1),
+      placement: "bottom",
+      className: "min-w-[400px]",
+      component: /* @__PURE__ */ a.jsxs("div", { children: [
+        /* @__PURE__ */ a.jsx("p", { children: n(e.key, e.label) }),
+        e.type === "date" ? /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ a.jsx("div", { className: "scale-[0.8] origin-left -mr-[10%] w-[125%]! relative z-99", children: /* @__PURE__ */ a.jsx(
+            h,
+            {
+              currentDate: (c = e.value) != null && c.startDate ? new Date(e.value.startDate) : null,
+              maxDate: (p = e.value) != null && p.endDate ? new Date(e.value.endDate) : void 0,
+              futureDates: !0,
+              onDateChange: (t) => o({
+                key: e.key,
+                value: {
+                  ...e.value || {},
+                  startDate: (t == null ? void 0 : t.toISOString()) || ""
+                },
+                label: e.label,
+                type: e.type
+              }),
+              label: "Fecha de inicio",
+              translatedKey: "start_date"
+            }
+          ) }),
+          /* @__PURE__ */ a.jsx("div", { className: "scale-[0.8] origin-left -mr-[10%] w-[125%]! ", children: /* @__PURE__ */ a.jsx(
+            h,
+            {
+              currentDate: (u = e.value) != null && u.endDate ? new Date(e.value.endDate) : null,
+              minDate: (d = e.value) != null && d.startDate ? new Date(e.value.startDate) : void 0,
+              onDateChange: (t) => o({
+                key: e.key,
+                value: {
+                  ...e.value || {},
+                  endDate: (t == null ? void 0 : t.toISOString()) || ""
+                },
+                label: e.label,
+                type: e.type
+              }),
+              label: "Fecha de fin",
+              futureDates: !0,
+              translatedKey: "end_date"
+            }
+          ) })
+        ] }) : e.type === "select" ? /* @__PURE__ */ a.jsx(
+          $,
+          {
+            className: "scale-[0.8] origin-left -mr-[10%] w-[125%]! p-0! m-0!",
+            value: e.value || "",
+            options: e.options || [],
+            label: "",
+            allowSearch: !0,
+            onChange: (t) => o({
+              key: e.key,
+              value: t,
+              label: e.label,
+              type: e.type
+            }),
+            placeholder: n(e.key, e.label)
+          }
+        ) : /* @__PURE__ */ a.jsx(
+          L,
+          {
+            size: "sm",
+            name: e.key,
+            value: e.value,
+            onChange: (t) => o({
+              key: e.key,
+              value: t,
+              label: e.label,
+              type: e.type
+            }),
+            placeholder: n(e.key, e.label)
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ a.jsxs(
+        "div",
+        {
+          className: `flex gap-[8px] items-center px-[12px] py-[8px] bg-blue-100 max-w-[400px] ${S && "border-1! border-blue-500!"} cursor-pointer transition ease-in-out rounded-full border border-transparent hover:border-blue-500`,
+          onClick: () => l(!0),
+          children: [
+            /* @__PURE__ */ a.jsxs("div", { className: "flex justify-between items-center gap-[6px] min-w-0", children: [
+              /* @__PURE__ */ a.jsx(
+                D,
+                {
+                  icon: e.icon || C,
+                  className: "text-[14px] text-blue-500"
+                }
+              ),
+              /* @__PURE__ */ a.jsx(
+                "p",
+                {
+                  className: "flex-1 min-w-0 text-[12px] font-semibold text-gray-800 truncate overflow-hidden whitespace-nowrap",
+                  title: e.type === "date" ? `${((r = e.value) == null ? void 0 : r.startDate) || "..."} - ${((m = e.value) == null ? void 0 : m.endDate) || "..."}` : String(
+                    e.value || n(e.key, e.label)
+                  ),
+                  children: e.value && (e.type === "date" ? (x = e.value) != null && x.startDate || (v = e.value) != null && v.endDate : e.value) ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+                    n(e.key, e.label),
+                    ":",
+                    " ",
+                    /* @__PURE__ */ a.jsx("span", { className: "text-gray-600 truncate overflow-hidden whitespace-nowrap", children: e.type === "date" ? `${(y = e.value) != null && y.startDate ? new Date(
+                      e.value.startDate
+                    ).toLocaleDateString() : "..."} - ${(b = e.value) != null && b.endDate ? new Date(
+                      e.value.endDate
+                    ).toLocaleDateString() : "..."}` : e.type === "select" ? N(
+                      e.value,
+                      e.options
+                    ) : String(e.value) })
+                  ] }) : n(e.key, e.label)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a.jsx(
+              "div",
+              {
+                className: "flex justify-center items-center",
+                onClick: () => w({ key: e.key }),
+                children: /* @__PURE__ */ a.jsx(D, { icon: I, className: "text-[10px] text-gray-400" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  G as default
+};

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

@@ -38,3 +38,4 @@ export * from './ThresholdProgressBar/index';
 export * from './CircleProgress/index';
 export * from './Switch/index';
 export * from './Pill/index';
+export * from './FilterPill/index';

package/dist/components/molecules/FiltersMenu/FiltersMenu.js

@@ -0,0 +1,49 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { faBarsFilter as x } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { FontAwesomeIcon as o } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { useState as p } from "react";
+import c from "../FloatingMenu/FloatingMenu.js";
+const g = ({ filters: r }) => {
+  const [l, s] = p(!1), a = () => s(!1), n = () => s(!0);
+  return /* @__PURE__ */ e.jsx(
+    c,
+    {
+      open: l,
+      onClose: a,
+      placement: "bottom-start",
+      className: "w-[326px] shadow-md px-0! text-base! py-12!",
+      component: /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-[10px]", children: [
+        /* @__PURE__ */ e.jsx("h4", { className: "px-24 text-lg font-semibold text-blue-900", children: "Filtros" }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex flex-col", children: r.map((t, i) => /* @__PURE__ */ e.jsxs(
+          "div",
+          {
+            className: "group flex gap-[8px] items-center px-[24px] py-[8px] hover:bg-blue-100 cursor-pointer transition ease-in-out",
+            onClick: t.onClick,
+            children: [
+              /* @__PURE__ */ e.jsx(
+                o,
+                {
+                  icon: t.icon,
+                  className: "text-[14px] text-gray-600 group-hover:text-blue-500"
+                }
+              ),
+              /* @__PURE__ */ e.jsx("p", { className: "text-[12px] text-gray-500 font-semibold group-hover:text-gray-800", children: t.label })
+            ]
+          },
+          i
+        )) })
+      ] }),
+      children: /* @__PURE__ */ e.jsx(
+        o,
+        {
+          icon: x,
+          onClick: n,
+          className: "transition text-[16px] ease-in-out duration-150 hover:text-gray-600 cursor-pointer"
+        }
+      )
+    }
+  );
+};
+export {
+  g as default
+};

package/dist/components/molecules/FloatingMenu/FloatingMenu.js

@@ -1,47 +1,54 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { useFloating as M, useClick as N, useDismiss as O, useInteractions as S, useTransitionStyles as b } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
-import k, { useState as w, useEffect as P } from "react";
+import { useFloating as M, useClick as N, useDismiss as O, useInteractions as S, useTransitionStyles as k } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import w, { useState as P, useEffect as _ } from "react";
 import "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import "../../../_virtual/lodash.js";
 import "../../../contexts/themeContext.js";
 import "react-hook-form";
 import "../InformationContainer/InformationContainer.js";
-import _ from "../../atoms/BoxContainer/BoxContainer.js";
+import z from "../../atoms/BoxContainer/BoxContainer.js";
 import "../../../constants/countries.js";
 import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
 import "fuse.js";
-import { autoUpdate as z } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { offset as B, flip as D, shift as T } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-const Z = ({
+import { autoUpdate as B } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as D, flip as T, shift as U } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const $ = ({
   open: e,
   onClose: s,
   component: i,
-  children: a,
+  children: n,
   placement: l = "bottom",
-  className: m = "",
-  strategy: f = "absolute",
+  className: f = "",
+  strategy: m = "absolute",
+  styles: c = {},
   offset: p = 8,
-  padding: c = 8
+  padding: d = 8
 }) => {
-  const [d, r] = w(e);
-  P(() => {
-    r(e);
+  const [u, o] = P(e);
+  _(() => {
+    o(e);
   }, [e]);
-  const u = () => {
-    r(!1), s == null || s();
-  }, { x: g, y: x, strategy: y, refs: n, context: o } = M({
-    strategy: f,
-    open: d,
+  const g = () => {
+    o(!1), s == null || s();
+  }, { x, y, strategy: h, refs: a, context: r } = M({
+    strategy: m,
+    open: u,
     onOpenChange: (I) => {
-      I || u();
+      !I && !e && g();
     },
-    middleware: [B(p), D(), T({ padding: c })],
-    whileElementsMounted: z,
+    middleware: [D(p), T(), U({ padding: d })],
+    whileElementsMounted: B,
     placement: l
-  }), h = N(o), j = O(o), { getReferenceProps: v, getFloatingProps: E } = S([
-    h,
-    j
-  ]), { isMounted: F, styles: R } = b(o, {
+  }), j = N(r, {
+    enabled: !1
+    // Deshabilitamos el click interno ya que está controlado externamente
+  }), b = O(r, {
+    enabled: !1
+    // Deshabilitamos dismiss cuando está controlado externamente por props
+  }), { getReferenceProps: v, getFloatingProps: E } = S([
+    j,
+    b
+  ]), { isMounted: F, styles: R } = k(r, {
     duration: {
       open: 200,
       close: 150
@@ -55,30 +62,31 @@ const Z = ({
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: n.setReference,
+        ref: a.setReference,
         ...v(),
         className: "reference-element",
-        children: a
+        children: n
       }
     ),
     F && /* @__PURE__ */ t.jsx(
       "div",
       {
-        ref: n.setFloating,
+        ref: a.setFloating,
         style: {
-          position: y,
-          top: x ?? 0,
-          left: g ?? 0,
+          position: h,
+          top: y ?? 0,
+          left: x ?? 0,
           ...R,
-          zIndex: 9999
+          zIndex: 999,
+          ...c
         },
         ...E(),
         className: "floating-element",
-        children: /* @__PURE__ */ t.jsx(_, { className: m, children: typeof i == "function" ? k.createElement(i) : i })
+        children: /* @__PURE__ */ t.jsx(z, { className: f, children: typeof i == "function" ? w.createElement(i) : i })
       }
     )
   ] });
 };
 export {
-  Z as default
+  $ as default
 };

package/dist/components/molecules/FloatingMenu/FloatingMenu.types.d.ts

@@ -6,6 +6,7 @@ export interface FloatingMenuProps {
     placement?: "top" | "bottom" | "left" | "right";
     className?: string;
     strategy?: "fixed" | "absolute";
+    styles?: React.CSSProperties;
     offset?: number;
     padding?: number;
 }

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SideModalProps } from './SideModal.types';
+declare const SideModal: React.FC<SideModalProps>;
+export default SideModal;

package/dist/components/molecules/SideModal/SideModal.js

@@ -0,0 +1,97 @@
+import { j as i } from "../../../_virtual/jsx-runtime.js";
+import { useEffect as x } from "react";
+import { AnimatePresence as u } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as r } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+const b = ({
+  open: e,
+  onClose: a,
+  children: s,
+  side: n = "right",
+  className: l = "",
+  backdropClassName: d = "",
+  width: o = "650px",
+  zIndex: m = 9999
+}) => {
+  x(() => {
+    const t = (p) => {
+      p.key === "Escape" && e && a();
+    };
+    return e && (document.addEventListener("keydown", t), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", t), document.body.style.overflow = "unset";
+    };
+  }, [e, a]);
+  const c = {
+    initial: {
+      x: n === "right" ? "100%" : "-100%"
+      // opacity: 0,
+    },
+    animate: {
+      x: 0,
+      // opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 30,
+        opacity: { duration: 0.2 }
+      }
+    },
+    exit: {
+      x: n === "right" ? "100%" : "-100%",
+      // opacity: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 30,
+        opacity: { duration: 0.15 }
+      }
+    }
+  }, f = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1, transition: { duration: 0.2 } },
+    exit: { opacity: 0, transition: { duration: 0.15 } }
+  };
+  return /* @__PURE__ */ i.jsx(u, { children: e && /* @__PURE__ */ i.jsxs("div", { className: `fixed inset-0 z-[${m}] flex`, children: [
+    /* @__PURE__ */ i.jsx(
+      r.div,
+      {
+        variants: f,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        className: `absolute inset-0 bg-black/50 backdrop-blur-[0.60px] ${d}`,
+        onClick: (t) => {
+          t.preventDefault(), t.stopPropagation(), a();
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: `relative flex w-full pointer-events-none ${n === "left" ? "justify-start" : "justify-end"}`,
+        children: /* @__PURE__ */ i.jsx(
+          r.div,
+          {
+            variants: c,
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            className: `
+                relative bg-white shadow-2xl h-full overflow-hidden flex flex-col pointer-events-auto
+                ${l}
+              `,
+            style: {
+              width: typeof o == "number" ? `${o}px` : o
+            },
+            onClick: (t) => {
+              t.preventDefault(), t.stopPropagation();
+            },
+            children: s
+          }
+        )
+      }
+    )
+  ] }) });
+};
+export {
+  b as default
+};

package/dist/components/molecules/SideModal/SideModal.types.d.ts

@@ -0,0 +1,10 @@
+export interface SideModalProps {
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    className?: string;
+    backdropClassName?: string;
+    width?: string | number;
+    zIndex?: number;
+}

package/dist/components/molecules/SideModal/index.d.ts

@@ -0,0 +1 @@
+export { default as SideModal } from './SideModal';

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

@@ -15,3 +15,5 @@ export * from './Tabs';
 export * from './UncontrolledDateInput';
 export * from './AutocompleteInput';
 export * from './PillsContainer';
+export * from './SideModal';
+export * from './FiltersMenu';