lawgic-dev-kit 0.21.6 → 0.22.4

package/dist/components/atoms/UncontrolledTextInput/UncontrolledTextInput.js

@@ -2,47 +2,47 @@ import { j as o } from "../../../_virtual/jsx-runtime.js";
 import { useTheme as h } from "../../../hooks/useTheme.js";
 import "react";
 const w = ({
-  label: x,
+  label: u,
   onChange: p,
-  value: s,
+  value: n,
   name: t,
   error: l,
   placeholder: i,
-  className: b = "",
+  className: g = "",
   disabled: e = !1,
-  disabledInput: n = !1,
-  size: g = "base",
+  disabledInput: s = !1,
+  size: d = "md",
   leftSide: a,
   rightSide: c,
-  ...d
+  ...b
 }) => {
-  const { t: u } = h(), r = {
+  const { t: x } = h(), r = {
     sm: {
-      container: "p-8",
-      text: "text-body-s",
-      label: "text-xs",
-      error: "text-xs",
-      gap: "gap-6"
+      container: "px-16 py-8",
+      text: "text-sm",
+      label: "text-sm",
+      error: "text-sm",
+      gap: "gap-8"
     },
-    base: {
+    md: {
       container: "p-16",
-      text: "text-body-m",
-      label: "text-label",
-      error: "text-label",
+      text: "text-14",
+      label: "text-14",
+      error: "text-14",
       gap: "gap-8"
     }
-  }[g];
+  }[d];
   return /* @__PURE__ */ o.jsxs(
     "label",
     {
-      className: `flex flex-col group select-none ${r.gap} ${e && "cursor-not-allowed"} ${b}`,
+      className: `flex flex-col group select-none ${r.gap} ${e && "cursor-not-allowed"} ${g}`,
       htmlFor: t,
       children: [
         /* @__PURE__ */ o.jsx(
           "h6",
           {
             className: `text-gray-600 font-600 group ${l && "!text-red-500"} ${r.label} ${e && "text-gray-300"}`,
-            children: x
+            children: u
           }
         ),
         /* @__PURE__ */ o.jsxs(
@@ -50,20 +50,14 @@ const w = ({
           {
             htmlFor: t,
             className: `
-					flex items-center justify-between gap-8 ${r.container}
-				
-				${l && "!border-red-500"} 
-
-				bg-light
-				
-				w-full h-full rounded-full border 
-				
-				${s && !e ? "border-blue-200" : "border-blue-100"} 
-				${!e && "group-hover:border-blue-300"} 
-				${e && "cursor-not-allowed"}
+          flex items-center justify-between gap-8 bg-light 
+          ${r.container} ${l && "!border-red-500"} rounded-full border 
+          ${n && !e ? "border-blue-200" : "border-blue-100"} 
+          ${!e && "group-hover:border-blue-300"} 
+          ${e && "cursor-not-allowed"}
 				
 				group-focus-within:border-blue-500 transition-colors duration-200 ease-in-out
-				${n && "hover:!cursor-pointer"}
+				${s && "hover:!cursor-pointer"}
 				group-disabled:bg-gray-500
 				`,
             children: [
@@ -71,23 +65,23 @@ const w = ({
               /* @__PURE__ */ o.jsx(
                 "input",
                 {
-                  ...d,
+                  ...b,
                   id: t,
                   name: t,
                   disabled: e,
                   placeholder: i,
-                  value: s,
+                  value: n,
                   onChange: (f) => {
                     p(f.target.value);
                   },
-                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 ${r.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${n && "pointer-events-none !select-none !caret-transparent"}`
+                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 ${r.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${s && "pointer-events-none !select-none !caret-transparent"}`
                 }
               ),
               c && c
             ]
           }
         ),
-        /* @__PURE__ */ o.jsx("h4", { className: `font-500 text-red-500 leading-none ${r.error}`, children: l && u(l || "", { x: u(t) }) })
+        /* @__PURE__ */ o.jsx("h4", { className: `font-500 text-red-500 leading-none ${r.error}`, children: l && x(l || "", { x: x(t) }) })
       ]
     }
   );

package/dist/components/atoms/UncontrolledTextInput/UncontrolledTextInput.types.d.ts

@@ -8,7 +8,7 @@ export type UncontrolledTextInputProps = {
     error?: string | undefined;
     disabled?: boolean;
     disabledInput?: boolean;
-    size?: 'sm' | 'base';
+    size?: 'sm' | 'md';
     leftSide?: React.ReactNode;
     rightSide?: React.ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;

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

@@ -4,11 +4,11 @@ import { translateBytes as O } from "../../../utils/files.js";
 import "../../../_virtual/lodash.js";
 import { FontAwesomeIcon as R } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import { useTheme as T } from "../../../hooks/useTheme.js";
-import U from "../Button/Button.js";
+import { faCloudUpload as U } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import z from "../Button/Button.js";
 import "react-hook-form";
 import "../../../constants/countries.js";
 import "../ImageProfileInput/ImageProfileInput.validators.js";
-import { faCloudUpload as z } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
 import A from "../TextButton/TextButton.js";
 import "fuse.js";
 import _ from "../LoadingProgress/LoadingProgress.js";
@@ -110,12 +110,12 @@ const le = ({
           /* @__PURE__ */ e.jsx("div", { className: "flex justify-center shrink-0", children: /* @__PURE__ */ e.jsx(
             R,
             {
-              icon: z,
+              icon: U,
               className: "text-blue-500 text-2xl"
             }
           ) }),
           /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-start text-left grow", children: /* @__PURE__ */ e.jsx("h3", { className: "font-600 text-lg text-dark", children: l(m) }) }),
-          /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(U, { color: "blue", variant: "transparent", children: l(h) }) }),
+          /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(z, { color: "blue", variant: "transparent", children: l(h) }) }),
           /* @__PURE__ */ e.jsx(
             "input",
             {

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

@@ -6,6 +6,7 @@ export * from './BoxContainer/index';
 export * from './Button/index';
 export * from './CenterModal/index';
 export * from './Checkbox/index';
+export * from './Chip/index';
 export * from './CountryInput/index';
 export * from './CountryLabel/index';
 export * from './CountrySelectInput/index';
@@ -31,7 +32,6 @@ export * from './Toast/index';
 export * from './UncontrolledSelector/index';
 export * from './UncontrolledTextInput/index';
 export * from './UploadContainer/index';
-export * from './Tooltip/index';
 export * from './LoadingProgress/index';
 export * from './ThresholdCircleProgress/index';
 export * from './ThresholdProgressBar/index';
@@ -40,3 +40,4 @@ export * from './Switch/index';
 export * from './Pill/index';
 export * from './FilterPill/index';
 export * from './ClickAwayListener/index';
+export * from './StepIndicator/index';

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

@@ -3,12 +3,12 @@ import { faChevronRight as le } from "../../../node_modules/@fortawesome/free-so
 import { faChevronLeft as ce } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
 import { useState as x, useEffect as I, useRef as U } from "react";
 import { FontAwesomeIcon as me } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faChevronDown as de } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
 import "../../../_virtual/lodash.js";
-import { useTheme as de } from "../../../hooks/useTheme.js";
+import { useTheme as pe } from "../../../hooks/useTheme.js";
 import R from "../FloatingMenu/FloatingMenu.js";
-import pe from "./PeriodToggle.js";
-import ue from "./TimeDisplay.js";
-import { faChevronDown as fe } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import ue from "./PeriodToggle.js";
+import fe from "./TimeDisplay.js";
 import { getColorVariants as ge } from "./CalendarSelector.styles.js";
 import "react-hook-form";
 import "../InformationContainer/InformationContainer.js";
@@ -46,7 +46,7 @@ const mt = ({
 }) => {
   const [n, w] = x(p), [O, j] = x(p), [f, Y] = x(p.getHours() % 12 || 12), [N, A] = x(
     p.getHours() >= 12 ? "PM" : "AM"
-  ), [k, H] = x(0), { t: K } = de(), c = ge(b), [L, F] = x(!1), [$, S] = x(!1);
+  ), [k, H] = x(0), { t: K } = pe(), c = ge(b), [L, F] = x(!1), [$, S] = x(!1);
   I(() => {
     w(p), j(p), Y(p.getHours() % 12 || 12), A(p.getHours() >= 12 ? "PM" : "AM");
   }, [p]);
@@ -165,7 +165,7 @@ const mt = ({
                 /^./,
                 (t) => t.toUpperCase()
               ) }),
-              /* @__PURE__ */ e.jsx(me, { icon: fe, className: "w-12 h-12" })
+              /* @__PURE__ */ e.jsx(me, { icon: de, className: "w-12 h-12" })
             ]
           }
         )
@@ -264,7 +264,7 @@ const mt = ({
             className: "!p-0 overflow-hidden",
             strategy: "fixed",
             children: /* @__PURE__ */ e.jsx(
-              ue,
+              fe,
               {
                 setHourMenuOpen: F,
                 hourMenuOpen: L,
@@ -274,7 +274,7 @@ const mt = ({
           }
         ),
         /* @__PURE__ */ e.jsx(
-          pe,
+          ue,
           {
             selectedPeriod: N,
             handlePeriodChange: te,

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

@@ -8,7 +8,7 @@ export type DateInputProps<T extends FieldValues = FieldValues> = {
     translateKey?: string;
     futureDates?: boolean;
     pastDates?: boolean;
-    size?: "sm" | "base";
+    size?: "sm" | "md";
 };
 declare const DateInput: <T extends FieldValues = FieldValues>({ control, name, showTimeSelector, label, translateKey, placeholder, futureDates, pastDates, size, }: DateInputProps<T>) => React.ReactElement;
 export default DateInput;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface EmptyStateProps {
+    image?: string;
+    title: string;
+    subtitle: string;
+    className?: string;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/dist/components/molecules/EmptyState/EmptyState.js

@@ -0,0 +1,16 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+const c = ({
+  image: s,
+  title: t,
+  subtitle: a,
+  className: l = ""
+}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col items-center justify-center gap-24 p-8 text-center w-full h-full min-h-[300px] ${l}`, children: [
+  s && /* @__PURE__ */ e.jsx("img", { src: s, alt: t, draggable: !1, className: "select-none" }),
+  /* @__PURE__ */ e.jsxs("div", { className: "space-y-16 max-w-[300px] select-none", children: [
+    /* @__PURE__ */ e.jsx("h3", { className: "text-[20px] font-bold text-blue-900 tracking-wide leading-[100%]", children: t }),
+    /* @__PURE__ */ e.jsx("p", { className: "text-base text-gray-500 max-w-sm leading-[150%]", children: a })
+  ] })
+] });
+export {
+  c as default
+};

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

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

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export type Option = {
+    label: string;
+    value: string | number;
+    dividerBefore?: boolean;
+    colors?: {
+        bgColor?: string;
+        textColor?: string;
+        dotColor?: string;
+    };
+};
+interface MultiSelectDropdownProps {
+    label?: string;
+    options: Option[];
+    selectedValues: string[];
+    onUpdate: (newSelectedValues: string[]) => void;
+    placeholder?: string;
+    allowSearch?: boolean;
+    className?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+}
+declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
+export default MultiSelectDropdown;

package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.js

@@ -0,0 +1,208 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import E, { useState as b, useRef as v, useCallback as _ } from "react";
+import { useFloating as q, useClick as H, useDismiss as Y, useInteractions as A, useTransitionStyles as G } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+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 "react-dom";
+import J from "../../atoms/Checkbox/Checkbox.js";
+import "../../../constants/countries.js";
+import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
+import "fuse.js";
+import { autoUpdate as K } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Q, flip as U, shift as X, size as Z, arrow as V } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const fe = ({
+  label: p,
+  options: u,
+  selectedValues: n,
+  onUpdate: m,
+  placeholder: k = "Seleccionar opciones",
+  allowSearch: w = !0,
+  className: N = "",
+  disabled: r = !1,
+  size: C = "md"
+}) => {
+  var y;
+  const [l, h] = b(!1), [i, f] = b(""), $ = v(null), z = v(null), o = {
+    sm: {
+      container: "px-16 py-8",
+      text: "text-sm",
+      label: "text-sm",
+      icon: "w-12 h-12",
+      checkboxSize: 16,
+      gap: "gap-8",
+      searchText: "text-sm",
+      searchIcon: "size-12"
+    },
+    md: {
+      container: "p-16",
+      text: "text-14",
+      label: "text-14",
+      icon: "w-16 h-16",
+      checkboxSize: 20,
+      gap: "gap-8",
+      searchText: "text-14",
+      searchIcon: "size-16"
+    }
+  }[C], { x: S, y: L, strategy: M, refs: x, context: d } = q({
+    open: l && !r,
+    onOpenChange: (t) => !r && h(t),
+    middleware: [
+      Q(8),
+      U(),
+      X({ padding: 8 }),
+      Z({
+        apply({ availableHeight: t, elements: s }) {
+          Object.assign(s.floating.style, {
+            maxHeight: `${Math.min(t - 10, 500)}px`
+          });
+        },
+        padding: 8
+      }),
+      V({ element: z })
+    ],
+    placement: "bottom-start",
+    whileElementsMounted: K
+  }), R = H(d, { enabled: !r }), B = Y(d), { getReferenceProps: I, getFloatingProps: T } = A([R, B]), { isMounted: F, styles: O } = G(d, {
+    duration: { open: 200, close: 150 },
+    initial: { opacity: 0, transform: "translateY(-4px)" }
+  }), P = _((t, s) => {
+    if (r) return;
+    let a;
+    s ? a = n.includes(t) ? n : [...n, t] : a = n.filter((c) => c !== t), m(a);
+  }, [n, m, r]), g = u.filter(
+    (t) => t.label.toLowerCase().includes(i.toLowerCase())
+  ), W = () => {
+    if (n.length === 0) return k;
+    const t = u.filter((s) => n.includes(s.value)).map((s) => s.label);
+    return t.length === 1 ? t[0] : `${t.length} seleccionados`;
+  }, D = I({
+    onClick: () => !r && h(!l)
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col select-none ${o.gap} ${r ? "cursor-not-allowed" : ""} ${N}`, children: [
+    p && /* @__PURE__ */ e.jsx("h6", { className: `text-gray-600 font-600 ${o.label} ${r ? "text-gray-300" : ""}`, children: p }),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: x.setReference,
+        className: `
+                    flex items-center justify-between rounded-full border transition-all duration-200
+                    ${o.container}
+                    ${r ? "bg-gray-50 border-gray-200 cursor-not-allowed" : "bg-blue-50 cursor-pointer"}
+                    ${!r && (l ? "border-blue-500" : "border-blue-100 hover:border-blue-300")}
+                `,
+        ...D,
+        children: [
+          /* @__PURE__ */ e.jsx("span", { className: `flex-grow text-left truncate font-600 ${o.text} ${r ? "text-gray-300" : "text-gray-500"}`, children: W() }),
+          /* @__PURE__ */ e.jsx(
+            "svg",
+            {
+              className: `${o.icon} transition-transform ${l ? "rotate-180" : ""} ${r ? "text-gray-300" : "text-gray-500"}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    F && !r && /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: x.setFloating,
+        style: {
+          position: M,
+          top: L ?? 0,
+          left: S ?? 0,
+          ...O,
+          width: (y = x.reference.current) == null ? void 0 : y.clientWidth,
+          zIndex: 50
+        },
+        className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
+        ...T(),
+        children: [
+          w && /* @__PURE__ */ e.jsx("div", { className: "sticky top-0 bg-white p-8 border-b border-gray-100 z-20", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 left-0 pl-12 flex items-center pointer-events-none", children: /* @__PURE__ */ e.jsx("svg", { className: `${o.searchIcon} text-gray-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
+            /* @__PURE__ */ e.jsx(
+              "input",
+              {
+                ref: $,
+                type: "text",
+                className: `w-full py-6 pl-36 pr-12 rounded-full focus:outline-none bg-gray-50 ${o.searchText}`,
+                placeholder: "Buscar...",
+                value: i,
+                onChange: (t) => f(t.target.value),
+                onClick: (t) => t.stopPropagation(),
+                autoFocus: !0
+              }
+            ),
+            i && /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                className: "absolute inset-y-0 right-0 pr-12 flex items-center",
+                onClick: (t) => {
+                  t.stopPropagation(), f("");
+                },
+                children: /* @__PURE__ */ e.jsx("svg", { className: "h-16 w-16 text-gray-400 hover:text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e.jsx("div", { className: "max-h-[450px] overflow-y-auto", children: g.length > 0 ? /* @__PURE__ */ e.jsx("div", { className: "py-4", children: g.map((t) => {
+            var a, c, j;
+            const s = n.includes(t.value);
+            return /* @__PURE__ */ e.jsxs(E.Fragment, { children: [
+              t.dividerBefore && /* @__PURE__ */ e.jsx("div", { className: "px-16 py-8", children: /* @__PURE__ */ e.jsx("hr", { className: "border-t border-gray-200" }) }),
+              /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: "flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer gap-12",
+                  onClick: () => P(t.value, !s),
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      J,
+                      {
+                        active: s,
+                        size: o.checkboxSize,
+                        variant: "square",
+                        className: "flex-shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsxs(
+                      "div",
+                      {
+                        className: `flex items-center rounded-[8px] py-4 px-8 gap-[6px] overflow-hidden ${((a = t.colors) == null ? void 0 : a.bgColor) || ""} ${((c = t.colors) == null ? void 0 : c.textColor) || ""}`,
+                        children: [
+                          ((j = t.colors) == null ? void 0 : j.dotColor) && /* @__PURE__ */ e.jsx(
+                            "span",
+                            {
+                              className: "size-6 rounded-full flex-shrink-0",
+                              style: { background: t.colors.dotColor }
+                            }
+                          ),
+                          /* @__PURE__ */ e.jsx("span", { className: `${o.text} font-semibold truncate`, children: t.label })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, t.value);
+          }) }) : /* @__PURE__ */ e.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
+            /* @__PURE__ */ e.jsx("svg", { className: "mx-auto h-24 w-24 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+            /* @__PURE__ */ e.jsxs("p", { className: "mt-8 text-body-s", children: [
+              "No se encontraron resultados para “",
+              i,
+              "”"
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  fe as default
+};

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

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

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type Option = {
+    label: string;
+    value: string | number;
+    dividerBefore?: boolean;
+    colors?: {
+        bgColor?: string;
+        textColor?: string;
+        dotColor?: string;
+    };
+};
+interface SingleSelectDropdownProps {
+    label?: string;
+    options: Option[];
+    selectedValue?: string | number | null;
+    onUpdate: (value: string | number | null) => void;
+    placeholder?: string;
+    allowSearch?: boolean;
+    className?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    showRadio?: boolean;
+}
+declare const SingleSelectDropdown: React.FC<SingleSelectDropdownProps>;
+export default SingleSelectDropdown;