lawgic-dev-kit 0.2.4 → 0.3.4

package/dist/components/atoms/SearchBar/index.js

@@ -0,0 +1,44 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { faMagnifyingGlass as a } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
+import { FontAwesomeIcon as i } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { useState as u, useRef as c } from "react";
+const m = () => {
+  const [t, n] = u(!1), s = c(null), l = () => {
+    n(!0), setTimeout(() => {
+      var r;
+      return (r = s.current) == null ? void 0 : r.focus();
+    }, 100);
+  }, o = () => {
+    n(!1);
+  };
+  return /* @__PURE__ */ e.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: `flex items-center justify-center bg-white shadow-md rounded-full transition-all duration-300 ease-in-out ${t ? "w-[200px] h-[40px]" : "size-[40px]"}`,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: l,
+            className: "size-[40px] flex items-center justify-center rounded-full hover:bg-gray-100 transition-all",
+            children: /* @__PURE__ */ e.jsx(i, { icon: a })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            ref: s,
+            type: "text",
+            className: `w-full outline-none bg-transparent transition-all ${t ? "w-full pr-[10px]" : "w-0"}`,
+            placeholder: "Buscar...",
+            onBlur: o,
+            style: { border: "none", outline: "none" }
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  m as SearchBar
+};

package/dist/components/atoms/SectionButton/SectionButton.js

@@ -0,0 +1,10 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import n from "./desktop/SectionButton.js";
+import s from "./mobile/SectionButton.js";
+const p = (e) => {
+  const { display: t, ...o } = e;
+  return t === "desktop" ? /* @__PURE__ */ r.jsx(n, { ...o }) : t === "mobile" ? /* @__PURE__ */ r.jsx(s, { ...o }) : null;
+};
+export {
+  p as default
+};

package/dist/components/atoms/SectionButton/desktop/SectionButton.js

@@ -0,0 +1,60 @@
+import { j as e } from "../../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as u } from "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { resolveSectionButtonClasses as x } from "./SectionButton.styles.js";
+import { resolveIconClasses as f } from "../../IconButton/IconButton.styles.js";
+const v = ({
+  label: o,
+  href: a,
+  onClick: r,
+  active: p = !1,
+  disabled: s = !1,
+  className: n,
+  icon: t
+}) => {
+  const m = (c) => {
+    if (s) {
+      c.preventDefault();
+      return;
+    }
+    r == null || r(c);
+  }, l = `${x(p)} ${s ? "!text-gray-300 cursor-not-allowed !bg-transparent" : ""}`;
+  return a ? /* @__PURE__ */ e.jsxs(
+    "a",
+    {
+      href: a,
+      className: `${l} ${n || ""}`,
+      onClick: m,
+      "aria-disabled": s,
+      children: [
+        t && /* @__PURE__ */ e.jsx(
+          u,
+          {
+            icon: t,
+            className: f()
+          }
+        ),
+        o
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsxs(
+    "button",
+    {
+      className: `${l} ${n || ""}`,
+      onClick: m,
+      disabled: s,
+      children: [
+        t && /* @__PURE__ */ e.jsx(
+          u,
+          {
+            icon: t,
+            className: f()
+          }
+        ),
+        o
+      ]
+    }
+  );
+};
+export {
+  v as default
+};

package/dist/components/atoms/SectionButton/desktop/SectionButton.styles.js

@@ -0,0 +1,11 @@
+import { clsx as t } from "../../../../node_modules/clsx/dist/clsx.js";
+const s = "w-fit transition-colors ease-in-out duration-200 flex items-center justify-center gap-12 px-24 py-7 text-base rounded-full font-[600] bg-transparent", o = {
+  true: "bg-blue-100 text-blue-500 hover:bg-blue-100/80 active:bg-blue-100/50",
+  false: "text-gray-800 hover:bg-blue-100/40 hover:text-blue-500 active:bg-blue-100/20 active:text-blue-500"
+}, r = (e = !1) => t(
+  s,
+  o[String(e)]
+);
+export {
+  r as resolveSectionButtonClasses
+};

package/dist/components/atoms/SectionButton/mobile/MobileSectionButton.styles.js

@@ -0,0 +1,19 @@
+import { clsx as e } from "../../../../node_modules/clsx/dist/clsx.js";
+const s = "w-fit transition-colors ease-in-out duration-150 flex gap-10 items-center justify-center text-xs rounded-full font-[600] bg-transparent", n = {
+  true: "text-blue-500",
+  false: "text-gray-800 hover:text-blue-500 active:text-blue-500"
+}, o = "bg-transparent p-16", r = {
+  true: "bg-blue-100 text-blue-500",
+  false: "text-gray-800"
+  // Removed commented out styles
+}, i = (t = !1) => e(
+  s,
+  n[String(t)]
+), l = (t = !1) => e(
+  o,
+  r[String(t)]
+);
+export {
+  l as resolveIconButtonClassesMobile,
+  i as resolveSectionButtonClassesMobile
+};

package/dist/components/atoms/SectionButton/mobile/SectionButton.js

@@ -0,0 +1,59 @@
+import { j as e } from "../../../../_virtual/jsx-runtime.js";
+import { resolveSectionButtonClassesMobile as m, resolveIconButtonClassesMobile as p } from "./MobileSectionButton.styles.js";
+import x from "../../IconButton/IconButton.js";
+import { resolveSectionButtonClasses as c } from "../desktop/SectionButton.styles.js";
+import { FontAwesomeIcon as f } from "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+const $ = ({
+  label: s,
+  href: n,
+  onClick: t,
+  active: o = !1,
+  disabled: r = !1,
+  icon: u,
+  className: a = ""
+}) => {
+  const l = (i) => {
+    if (r) {
+      i.preventDefault();
+      return;
+    }
+    t == null || t(i);
+  };
+  return n ? /* @__PURE__ */ e.jsxs(
+    "a",
+    {
+      href: n,
+      onClick: l,
+      className: `${m(
+        o
+      )} flex flex-col items-center group ${a}`,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          x,
+          {
+            icon: u,
+            variant: o ? "transparent" : "invisible",
+            disabled: r,
+            size: "sm",
+            className: `${p(o)} group group-hover:!text-blue-500 duration-150 group-hover:!bg-blue-100 `
+          }
+        ),
+        /* @__PURE__ */ e.jsx("p", { className: "group group-hover:!text-blue-500 duration-150", children: s })
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsxs(
+    "button",
+    {
+      className: `${c(o)} ${r ? "!text-gray-300 cursor-not-allowed !bg-transparent" : ""} ${a}`,
+      onClick: l,
+      "aria-disabled": r,
+      children: [
+        /* @__PURE__ */ e.jsx(f, { icon: u }),
+        s
+      ]
+    }
+  );
+};
+export {
+  $ as default
+};

package/dist/components/atoms/SelectDropdown/SelectDropdown.js

@@ -0,0 +1,178 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { useFloating as B, useClick as H, useDismiss as U, useInteractions as W, useTransitionStyles as Y } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import { useState as b, useRef as k, useEffect as q } from "react";
+import { Controller as G } from "../../../node_modules/react-hook-form/dist/index.esm.js";
+import { useTheme as J } from "../../../providers/ThemeProvider.js";
+import { autoUpdate as K } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Q, flip as V, shift as X, size as Z, arrow as _ } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const ie = ({
+  options: l,
+  name: n,
+  control: c,
+  label: d = "Select an option",
+  placeholder: p = "Type to search...",
+  className: r = "",
+  input: u = !0
+}) => /* @__PURE__ */ e.jsx(
+  G,
+  {
+    name: n,
+    control: c,
+    render: ({ field: { onChange: f, value: a }, fieldState: { error: s } }) => /* @__PURE__ */ e.jsx(
+      ee,
+      {
+        options: l,
+        value: a,
+        onChange: f,
+        label: d,
+        placeholder: p,
+        error: s == null ? void 0 : s.message,
+        className: r,
+        input: u
+      }
+    )
+  }
+), ee = ({
+  options: l,
+  value: n,
+  onChange: c,
+  label: d = "Select an option",
+  placeholder: p = "Type to search...",
+  error: r,
+  className: u = "",
+  input: f = !0
+}) => {
+  const { t: a } = J(), [s, m] = b(!1), [x, j] = b(""), [y, w] = b(
+    n || null
+  ), h = k(null), C = k(null), { x: T, y: O, strategy: $, refs: v, context: g } = B({
+    open: s,
+    onOpenChange: m,
+    middleware: [
+      Q(8),
+      V(),
+      X({ padding: 8 }),
+      Z({
+        apply({ availableHeight: t, elements: o }) {
+          Object.assign(o.floating.style, {
+            maxHeight: `${Math.min(t - 10, 300)}px`
+          });
+        },
+        padding: 8
+      }),
+      _({ element: C })
+    ],
+    placement: "bottom-start",
+    whileElementsMounted: K
+  }), L = H(g), R = U(g), { getReferenceProps: F, getFloatingProps: P } = W([
+    L,
+    R
+  ]), { isMounted: N, styles: D } = Y(g, {
+    duration: { open: 200, close: 150 },
+    initial: { opacity: 0, transform: "translateY(-4px)" }
+  }), S = (() => {
+    const t = Array.isArray(l) ? l : [];
+    if (!x.trim()) return t;
+    const o = x.toLowerCase();
+    return t.filter((i) => {
+      const A = i.label.toLowerCase(), I = i.key.toLowerCase();
+      return A.includes(o) || I.includes(o);
+    });
+  })(), M = (t) => {
+    w(t), m(!1), j(""), c(t);
+  }, z = () => {
+    m(!s), !s && h.current && setTimeout(() => {
+      var t;
+      return (t = h.current) == null ? void 0 : t.focus();
+    }, 100);
+  };
+  q(() => {
+    w(n);
+  }, [n]);
+  const E = F({
+    onClick: z
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${u}`, children: [
+    /* @__PURE__ */ e.jsx(
+      "label",
+      {
+        className: `text-gray-600 font-600 group ${r && "!text-red-500"} text-label`,
+        children: d
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: v.setReference,
+        className: `flex items-center justify-between bg-light rounded-full p-16 cursor-pointer
+          border transition-all duration-200 hover:border-blue-400
+          ${r && "border-red-500 hover:border-red-600"} ${N ? "border-blue-400" : "border-blue-100"}`,
+        ...E,
+        children: [
+          y ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ e.jsx("span", { className: "flex-grow", children: a(y.label) }) }) : /* @__PURE__ */ e.jsx("span", { className: "text-gray-500", children: p }),
+          /* @__PURE__ */ e.jsx(
+            "svg",
+            {
+              className: `w-16 h-16 transition-transform ${s ? "transform rotate-180" : ""}`,
+              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"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ e.jsx("p", { className: "mt-1 text-sm text-red-600", children: r }),
+    N && /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: v.setFloating,
+        style: {
+          position: $,
+          top: O ?? 0,
+          left: T ?? 0,
+          ...D
+        },
+        className: "z-10 w-full bg-white border border-blue-400 rounded-3xl shadow-lg overflow-auto",
+        ...P(),
+        children: [
+          f && /* @__PURE__ */ e.jsx("div", { className: "sticky top-0 bg-white p-2 z-20", children: /* @__PURE__ */ e.jsx(
+            "input",
+            {
+              ref: h,
+              type: "text",
+              className: "w-full p-16",
+              placeholder: "Search...",
+              value: x,
+              onChange: (t) => j(t.target.value),
+              onClick: (t) => t.stopPropagation(),
+              autoFocus: !0
+            }
+          ) }),
+          /* @__PURE__ */ e.jsx("div", { className: "", children: S.length > 0 ? /* @__PURE__ */ e.jsx("ul", { children: S.map((t, o) => /* @__PURE__ */ e.jsx(
+            "li",
+            {
+              className: "flex items-center justify-between px-16 py-8 transition-all duration-200 hover:bg-blue-100/50 cursor-pointer",
+              onClick: (i) => {
+                i.stopPropagation(), M(t);
+              },
+              children: /* @__PURE__ */ e.jsx("span", { children: a(t.label) })
+            },
+            `${t.key}-${o}`
+          )) }) : /* @__PURE__ */ e.jsx("div", { className: "px-3 py-2 text-gray-500", children: "No options found" }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ie as default
+};

package/dist/components/atoms/Tab/Tab.js

@@ -0,0 +1,23 @@
+import { j as s } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as m } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { resolveTabClasses as x } from "./Tab.styles.js";
+const p = ({ label: o, icon: t, isSelected: e, onClick: r, variant: a = "default", direction: l = "row" }) => /* @__PURE__ */ s.jsxs(
+  "button",
+  {
+    className: `${x(a, e)} w-full ${l === "row" && "!flex-row"}`,
+    onClick: r,
+    children: [
+      t && /* @__PURE__ */ s.jsx(
+        m,
+        {
+          icon: t,
+          className: `${e ? "text-blue-500" : "text-gray-700"} w-20 h-20`
+        }
+      ),
+      /* @__PURE__ */ s.jsx("span", { className: "text-lg font-semibold", children: o })
+    ]
+  }
+);
+export {
+  p as default
+};

package/dist/components/atoms/Tab/Tab.styles.js

@@ -0,0 +1,15 @@
+import { clsx as l } from "../../../node_modules/clsx/dist/clsx.js";
+const r = "flex w-full h-full gap-12 px-10 py-6 items-center justify-center", s = {
+  default: "flex-row rounded-full text-blue-500",
+  underline: "flex-col border-b-[1.3px] px-24 pb-16 text-gray-700"
+}, a = {
+  true: "text-blue-500 border-b-blue-500",
+  false: "text-gray-700 border-b-gray-700"
+}, o = (e = "underline", t = !1) => l(
+  r,
+  s[e],
+  a[String(t)]
+);
+export {
+  o as resolveTabClasses
+};

package/dist/components/atoms/TextButton/TextButton.js

@@ -0,0 +1,23 @@
+import { j as n } from "../../../_virtual/jsx-runtime.js";
+import { resolveTextButtonClasses as u } from "./TextButton.styles.js";
+import { useTheme as a } from "../../../providers/ThemeProvider.js";
+const c = ({
+  color: t,
+  children: o,
+  className: e,
+  ...s
+}) => {
+  const { defaultColorScheme: r } = a(), m = t || r;
+  return /* @__PURE__ */ n.jsx(
+    "button",
+    {
+      type: "button",
+      className: u(m) + " " + e,
+      ...s,
+      children: o
+    }
+  );
+};
+export {
+  c as default
+};

package/dist/components/atoms/TextButton/TextButton.styles.js

@@ -0,0 +1,13 @@
+import { clsx as e } from "../../../node_modules/clsx/dist/clsx.js";
+const a = "transition-colors ease-in-out duration-200 flex items-center justify-center text-body-m rounded-full w-fit font-[600] leading-normal disabled:cursor-not-allowed disabled:text-gray-300", r = {
+  blue: "text-blue-500 hover:text-blue-600 active:text-blue-700",
+  aqua: "text-aqua-500 hover:text-aqua-600 active:text-aqua-700",
+  red: "text-red-500 hover:text-red-600 active:text-red-700",
+  gray: "text-gray-500 hover:text-gray-600 active:text-gray-700"
+}, s = (t = "blue") => e(
+  a,
+  r[t]
+);
+export {
+  s as resolveTextButtonClasses
+};

package/dist/components/atoms/TextInput/TextInput.js

@@ -0,0 +1,81 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { useController as m } from "../../../node_modules/react-hook-form/dist/index.esm.js";
+import { useTheme as j } from "../../../providers/ThemeProvider.js";
+const v = ({
+  label: u,
+  control: d,
+  name: e,
+  placeholder: c,
+  className: g = "",
+  disabled: l = !1,
+  leftSide: o,
+  rightSide: a,
+  ...x
+}) => {
+  const {
+    field: { value: s = "", onChange: f, ref: i, onBlur: p },
+    fieldState: { error: t }
+  } = m({ name: e, control: d }), { t: n } = j(), b = n(e);
+  return /* @__PURE__ */ r.jsxs(
+    "label",
+    {
+      className: `flex flex-col group gap-8 select-none ${l && "cursor-not-allowed"} ${g}`,
+      htmlFor: e,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          "h6",
+          {
+            className: `text-gray-600 font-600 group ${t && "!text-red-500"} text-label ${l && "text-gray-300"}`,
+            children: u
+          }
+        ),
+        /* @__PURE__ */ r.jsxs(
+          "label",
+          {
+            htmlFor: e,
+            className: `
+					flex items-center justify-between gap-8 p-16
+				
+				${t && "!border-red-500"} 
+
+				bg-light
+				
+				w-full h-full rounded-full border 
+				
+				${s && !l ? "border-blue-200" : "border-blue-100"} 
+				${!l && "group-hover:border-blue-300"} 
+				${l && "cursor-not-allowed"}
+				
+				group-focus-within:border-blue-500 transition-colors duration-200 ease-in-out
+				
+				group-disabled:bg-gray-500
+				`,
+            children: [
+              o && o,
+              /* @__PURE__ */ r.jsx(
+                "input",
+                {
+                  id: e,
+                  name: e,
+                  disabled: l,
+                  placeholder: c,
+                  value: s,
+                  onChange: (h) => f(h.target.value),
+                  onBlur: p,
+                  ref: i,
+                  className: "group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none",
+                  ...x
+                }
+              ),
+              a && a
+            ]
+          }
+        ),
+        /* @__PURE__ */ r.jsx("h4", { className: "font-500 text-label text-red-500 leading-none", children: (t == null ? void 0 : t.message) && n(t.message, { x: b }) })
+      ]
+    }
+  );
+};
+export {
+  v as default
+};

package/dist/components/atoms/Toast/Toast.js

@@ -0,0 +1,113 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { faCircleInfo as c, faXmark as p, faCircleExclamation as y, faTriangleExclamation as h, faCircleCheck as w } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
+import { FontAwesomeIcon as x } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { useState as j, useEffect as f } from "react";
+import { AnimatePresence as N } from "../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as T } from "../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const k = 500, D = ({
+  id: d,
+  content: b,
+  type: u = "info",
+  duration: s = 0,
+  onClose: o
+}) => {
+  const [n, m] = j(!0);
+  let t = c, a, r, i;
+  switch (u) {
+    case "success":
+      a = "text-green-500", r = "bg-green-50", i = "border-green-500", t = w;
+      break;
+    case "error":
+      a = "text-red-500", r = "bg-red-50", i = "border-red-500", t = h;
+      break;
+    case "warning":
+      a = "text-yellow-500", r = "bg-yellow-50", i = "border-yellow-500", t = y;
+      break;
+    case "loading":
+      a = "text-gray-500", r = "bg-gray-50", i = "border-gray-500", t = c;
+      break;
+    case "info":
+    default:
+      a = "text-blue-500", r = "bg-blue-50", i = "border-blue-500", t = c;
+  }
+  f(() => {
+    if (s === 0) return;
+    const l = setTimeout(() => {
+      m(!1);
+    }, s);
+    return () => clearTimeout(l);
+  }, [s]), f(() => {
+    if (!n) {
+      const l = setTimeout(o, k);
+      return () => clearTimeout(l);
+    }
+  }, [n, o]);
+  const g = {
+    initial: {
+      opacity: 0,
+      y: 50,
+      scale: 0.9
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        duration: 0.3,
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: {
+      opacity: 0,
+      y: 20,
+      scale: 0.95,
+      transition: {
+        duration: 0.2,
+        ease: "easeOut"
+      }
+    }
+  };
+  return /* @__PURE__ */ e.jsx(N, { onExitComplete: o, children: n && /* @__PURE__ */ e.jsx(
+    T.div,
+    {
+      id: d,
+      className: `toast w-[320px] rounded-xl border-[1.5px] p-8 shadow-md ${r} ${i}`,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: g,
+      layout: !0,
+      children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center p-3", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-6", children: [
+          /* @__PURE__ */ e.jsx(
+            x,
+            {
+              icon: t,
+              className: `w-20 h-20 min-h-20 min-w-20 ${a}`
+            }
+          ),
+          /* @__PURE__ */ e.jsx("span", { className: "text-gray-800 font-medium text-base", children: b })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: () => m(!1),
+            className: "text-gray-500 transition-all hover:text-gray-700 flex items-center",
+            children: /* @__PURE__ */ e.jsx(
+              x,
+              {
+                icon: p,
+                className: "w-20 h-20 min-h-20 min-w-20"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) });
+};
+export {
+  D as default
+};