rhf-hero-ui/dist/index.js

React Components with React Hook Form and HeroUI

import e, { useState as N, useEffect as me, useMemo as I, useCallback as w } from "react";
import { DatePicker as ue, Input as _, InputOtp as ie, Select as de, SelectItem as ge, TimeInput as Ee, Textarea as fe, Autocomplete as he, AutocompleteItem as Ce, RadioGroup as pe, Radio as be, Checkbox as q, CheckboxGroup as ke, Card as ve, CardHeader as xe, Divider as ye, CardBody as Be, Table as z, TableHeader as J, TableColumn as Q, TableBody as X, TableRow as Y, TableCell as ee, Skeleton as we, Pagination as Ne, Button as R, Modal as Se, ModalContent as Ie, ModalHeader as Fe, ModalBody as Pe, ModalFooter as Me } from "@heroui/react";
import { useFormContext as k, Controller as v } from "react-hook-form";
const Ge = ({ name: n, rules: c, defaultValue: t = null, ...l }) => {
  const { control: r } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: r,
      name: n,
      rules: c,
      defaultValue: t,
      render: ({ field: o, formState: { errors: m } }) => /* @__PURE__ */ e.createElement(
        ue,
        {
          ...l,
          ...o,
          onChange: (a) => {
            o.onChange(a), l.onChange?.(a);
          },
          onBlur: (a) => {
            o.onBlur(), l.onBlur?.(a);
          },
          value: o.value,
          errorMessage: m[n] ? m[n]?.message : "",
          isInvalid: !!m[n]
        }
      )
    }
  );
}, We = ({ defaultValue: n = "", rules: c, name: t, classNames: l, ...r }) => {
  const { control: o } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: o,
      defaultValue: n,
      name: t,
      rules: c,
      render: ({ field: m, formState: { errors: a } }) => /* @__PURE__ */ e.createElement(
        _,
        {
          ...r,
          ...m,
          onChange: (u) => {
            m.onChange(u), r.onChange?.(u);
          },
          isInvalid: !!a[t],
          errorMessage: a[t] ? a[t]?.message : "",
          classNames: {
            ...l,
            input: `${l?.input || ""} ${a[t] ? "placeholder:text-danger" : ""}`
          }
        }
      )
    }
  );
}, Ke = ({ defaultValue: n = "", rules: c, name: t, classNames: l, ...r }) => {
  const { control: o } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: o,
      defaultValue: n,
      name: t,
      rules: c,
      render: ({ field: m, formState: { errors: a } }) => /* @__PURE__ */ e.createElement(
        ie,
        {
          ...r,
          ...m,
          onChange: (u) => {
            m.onChange(u), r.onChange?.(u);
          },
          isInvalid: !!a[t],
          errorMessage: a[t] ? a[t]?.message : "",
          classNames: {
            ...l,
            input: `${l?.input || ""} ${a[t] ? "placeholder:text-danger" : ""}`
          }
        }
      )
    }
  );
}, Ue = ({ name: n, rules: c, data: t, defaultSelectedKeys: l, disabledKeys: r, ...o }) => {
  const { control: m } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: m,
      rules: c,
      name: n,
      defaultValue: l?.toString() ?? void 0,
      render: ({ field: a, formState: { errors: u } }) => /* @__PURE__ */ e.createElement(
        de,
        {
          ...o,
          ...a,
          items: t,
          selectedKeys: a.value ? a.value.split(",") : [],
          errorMessage: u[n]?.message || "",
          isInvalid: !!u[n],
          disabledKeys: r
        },
        (i) => /* @__PURE__ */ e.createElement(ge, { ...i, key: i.key })
      )
    }
  );
}, Ze = ({ name: n, rules: c, defaultValue: t, ...l }) => {
  const { control: r } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: r,
      name: n,
      rules: c,
      defaultValue: t ?? null,
      render: ({ field: o, formState: { errors: m } }) => /* @__PURE__ */ e.createElement(
        Ee,
        {
          ...l,
          ...o,
          value: o.value,
          onChange: (a) => {
            o.onChange(a), l.onChange?.(a);
          },
          onBlur: (a) => {
            o.onBlur(), l.onBlur?.(a);
          },
          isInvalid: !!m[n],
          errorMessage: m[n] ? m[n]?.message : ""
        }
      )
    }
  );
}, _e = ({ defaultValue: n = "", rules: c, name: t, classNames: l, ...r }) => {
  const { control: o } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: o,
      defaultValue: n,
      name: t,
      rules: c,
      render: ({ field: m, formState: { errors: a } }) => /* @__PURE__ */ e.createElement(
        fe,
        {
          ...r,
          ...m,
          onChange: (u) => {
            m.onChange(u), r.onChange?.(u);
          },
          isInvalid: !!a[t],
          errorMessage: a[t] ? a[t]?.message : "",
          classNames: {
            ...l,
            input: `${l?.input || ""} ${a[t] ? "placeholder:text-danger" : ""}`
          }
        }
      )
    }
  );
}, qe = ({ onSelectionChange: n, defaultSelectedKey: c, name: t, data: l, rules: r, inputProps: o, ...m }) => {
  const { control: a } = k(), u = (i) => {
    n && n(i);
  };
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: a,
      defaultValue: c,
      name: t,
      rules: r,
      render: ({ field: i, formState: { errors: E } }) => /* @__PURE__ */ e.createElement(
        he,
        {
          ...m,
          ...i,
          selectedKey: i.value ?? "",
          defaultItems: l,
          onSelectionChange: (f) => {
            i.onChange(f), u(f);
          },
          onBlur: (f) => {
            i.onBlur(), m.onBlur?.(f);
          },
          isInvalid: !!E[t],
          errorMessage: E[t] ? E[t]?.message : "",
          inputProps: {
            ...o,
            classNames: {
              input: E[t] ? "placeholder:text-danger" : ""
            }
          }
        },
        l.map((f) => /* @__PURE__ */ e.createElement(Ce, { ...f, key: f.key }))
      )
    }
  );
}, ze = ({ data: n, rules: c, name: t, defaultValue: l, ...r }) => {
  const { control: o } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: o,
      rules: c,
      name: t,
      defaultValue: l ?? "",
      render: ({ field: m, formState: { errors: a } }) => /* @__PURE__ */ e.createElement(
        pe,
        {
          ...m,
          ...r,
          onChange: (u) => {
            m.onChange(u), r.onChange?.(u);
          },
          isInvalid: !!a[t],
          errorMessage: a[t] ? a[t]?.message : ""
        },
        n.map((u, i) => /* @__PURE__ */ e.createElement(be, { ...u, key: i }))
      )
    }
  );
}, Je = ({ rules: n, name: c, ...t }) => {
  const { control: l } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: l,
      rules: n,
      name: c,
      render: ({ field: r, formState: { errors: o } }) => /* @__PURE__ */ e.createElement(
        q,
        {
          ...r,
          ...t,
          isSelected: !!r.value,
          isInvalid: !!o[c]
        },
        t.children
      )
    }
  );
}, Qe = ({ defaultValue: n, rules: c, name: t, data: l, ...r }) => {
  const { control: o } = k();
  return /* @__PURE__ */ e.createElement(
    v,
    {
      control: o,
      rules: c,
      name: t,
      defaultValue: n ?? [],
      render: ({ field: m, formState: { errors: a } }) => /* @__PURE__ */ e.createElement(
        ke,
        {
          ...m,
          ...r,
          isInvalid: !!a[t],
          onChange: (u) => {
            m.onChange(u), r.onChange?.(u);
          }
        },
        l.map((u) => /* @__PURE__ */ e.createElement(q, { ...u, key: u.value }, u.children)),
        !!a[t] && /* @__PURE__ */ e.createElement("div", { "data-slot": "error-message", className: "text-tiny text-danger w-full" }, a[t]?.message ?? "")
      )
    }
  );
}, De = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6" }, /* @__PURE__ */ e.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 18.75 7.5-7.5 7.5 7.5" }), /* @__PURE__ */ e.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 7.5-7.5 7.5 7.5" })), He = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6" }, /* @__PURE__ */ e.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5" })), Xe = ({ title: n, color: c = "default", children: t, collapse: l = !1 }) => {
  const [r, o] = N(!0);
  return /* @__PURE__ */ e.createElement(ve, { className: "mb-5" }, /* @__PURE__ */ e.createElement(xe, { className: `bg-${c} px-5 text-white flex justify-between` }, n, l && /* @__PURE__ */ e.createElement("div", { onClick: () => o(!r), className: "cursor-pointer" }, r ? /* @__PURE__ */ e.createElement(De, null) : /* @__PURE__ */ e.createElement(He, null))), /* @__PURE__ */ e.createElement(ye, null), /* @__PURE__ */ e.createElement(Be, { className: `p-5 ${r ? "" : "hidden"}` }, t));
}, Re = ({ size: n, columns: c }) => /* @__PURE__ */ e.createElement(z, { "aria-label": "cargando" }, /* @__PURE__ */ e.createElement(J, null, c.map(
  (t) => /* @__PURE__ */ e.createElement(Q, { ...c, key: t.key }, t.title)
)), /* @__PURE__ */ e.createElement(X, null, Array.from(
  { length: n },
  (t, l) => /* @__PURE__ */ e.createElement(Y, { key: l }, () => /* @__PURE__ */ e.createElement(ee, null, /* @__PURE__ */ e.createElement(we, { className: "h-5 w-4/5 rounded-lg" })))
))), je = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5" }, /* @__PURE__ */ e.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })), Le = (n, c) => {
  const [t, l] = N(n);
  return me(() => {
    const r = setTimeout(() => {
      l(n);
    }, c);
    return () => {
      clearTimeout(r);
    };
  }, [n, c]), t;
}, Ye = ({
  hideFilterSearch: n,
  loading: c,
  isVirtualized: t,
  onSelect: l,
  selectionMode: r,
  inputSearch: o,
  hideRowsPerPageOptions: m,
  extraTopContent: a,
  cellClass: u,
  rows: i = [],
  columns: E = [],
  keyRow: f = "id",
  localText: h = {
    emptyContent: "No hay datos.",
    rowsPerPage: "Filas por pagina"
  },
  rowsPerPageOptions: j = { default: 10, options: [5, 10, 15] },
  ...M
}) => {
  const [F, L] = N(""), [B, te] = N(j.default), [C, S] = N(1), [A, O] = N(/* @__PURE__ */ new Set()), [x, ne] = N(), T = !!Le(F, 500), D = I(() => [...A].length, [A]), ae = w((s) => {
    O(s);
    let d = [];
    r === "single" ? d = i.find((g) => g[f] == [...s][0]) : s === "all" ? (d = i, O(new Set(i.map((g) => g[f])))) : d = i.filter((g) => [...s].includes(g[f])), l && l(d);
  }, [l, i, r, f]), H = I(() => {
    let s = [...i];
    return T && (s = s.filter(
      (d) => Object.values(d).some(
        (g, b) => {
          const y = Object.keys(d)[b], p = E.find((ce) => ce.key == y);
          return !p || g == null || !g ? !1 : (p.onFilter ? p.onFilter(g) : g).toString().toLowerCase().includes(F.toLowerCase());
        }
      )
    )), s;
  }, [F, T, i, E]), P = Math.ceil(H.length / B) || 1, $ = I(() => x === void 0 ? H : [...H].sort((s, d) => {
    const g = E.find((Z) => Z.key === x.column), b = g?.onOrder ? g.onOrder(s[x.column]) : s[x.column], y = g?.onOrder ? g.onOrder(d[x.column]) : d[x.column];
    let p = 0;
    return !b && !y && (p = 0), b || (p = -1), y || (p = 1), typeof b == "number" && typeof y == "number" && (p = b - y), typeof b == "string" && typeof y == "string" && (p = (b ?? "").localeCompare(y ?? "")), x.direction === "descending" ? -p : p;
  }), [x, H, E]), le = I(() => {
    if (t) return $;
    const s = (C - 1) * B, d = s + B;
    return $.slice(s, d);
  }, [$, C, B, t]), V = w(() => {
    L(""), S(1);
  }, []), G = w(() => {
    C < P && S(C + 1);
  }, [C, P]), W = w(() => {
    C > 1 && S(C - 1);
  }, [C]), K = w((s) => {
    te(Number(s.target.value)), S(1);
  }, []), U = w((s) => {
    s ? (L(s), S(1)) : L("");
  }, []), re = w((s, d) => {
    const g = E.find((b) => b.key === d);
    return g.format ? /* @__PURE__ */ e.createElement("div", null, g.format({
      value: s[d],
      row: s
    })) : /* @__PURE__ */ e.createElement("p", { title: s[d] }, s[d]);
  }, [E]), oe = I(
    () => /* @__PURE__ */ e.createElement("div", { className: "py-2 px-2 mt-2 flex justify-between items-center" }, /* @__PURE__ */ e.createElement("span", { className: "w-[30%] text-small text-default-400" }, D > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, D, " ", D === 1 ? h?.items?.[0] ?? "fila seleccionada" : h?.items?.[1] ?? "filas seleccionadas")), !t && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
      Ne,
      {
        isCompact: !0,
        showControls: !0,
        showShadow: !0,
        page: C,
        total: P,
        onChange: S,
        color: M.color
      }
    ), /* @__PURE__ */ e.createElement("div", { className: "hidden sm:flex w-[30%] justify-end gap-2" }, /* @__PURE__ */ e.createElement(R, { isDisabled: C === 1, size: "sm", variant: "flat", onPress: W }, h.paginateButtons?.[0] ?? "Atrás"), /* @__PURE__ */ e.createElement(R, { isDisabled: C === P, size: "sm", variant: "flat", onPress: G }, h.paginateButtons?.[1] ?? "Siguiente")))),
    [
      C,
      P,
      G,
      W,
      D,
      M.color,
      t,
      h.paginateButtons,
      h.items
    ]
  ), se = I(() => /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-4 relative pb-2" }, /* @__PURE__ */ e.createElement("div", { className: "flex justify-between gap-3 items-end" }, !n && /* @__PURE__ */ e.createElement(
    _,
    {
      ...o,
      className: o?.className ?? "w-full sm:max-w-[44%]",
      placeholder: o?.placeholder ?? "Buscar...",
      startContent: /* @__PURE__ */ e.createElement(je, null),
      value: F,
      onClear: () => V(),
      onValueChange: U,
      isClearable: !0
    }
  ), a), /* @__PURE__ */ e.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ e.createElement("span", { className: "text-default-400 text-small" }, "Total ", i.length, " ", i.length == 1 ? h?.items?.[0] ?? "dato" : h?.items?.[1] ?? "datos"), !m && !t && /* @__PURE__ */ e.createElement("label", { className: "flex items-center text-default-400 text-small" }, h.rowsPerPage, ":", /* @__PURE__ */ e.createElement(
    "select",
    {
      className: "bg-transparent outline-none text-default-400 text-small cursor-pointer",
      onChange: K,
      defaultValue: B
    },
    j.options.map(
      (s) => /* @__PURE__ */ e.createElement("option", { key: s, value: s }, s)
    )
  )))), [
    F,
    i.length,
    V,
    K,
    h.rowsPerPage,
    o,
    a,
    U,
    B,
    t,
    n,
    m,
    j,
    h.items
  ]);
  return /* @__PURE__ */ e.createElement(e.Fragment, null, c ? /* @__PURE__ */ e.createElement(Re, { columns: E, size: B }) : /* @__PURE__ */ e.createElement(e.Fragment, null, se, /* @__PURE__ */ e.createElement(
    z,
    {
      ...M,
      "aria-label": M["aria-label"] ?? "Tabla de resultados",
      isVirtualized: t,
      sortDescriptor: x,
      onSortChange: ne,
      selectedKeys: A,
      onSelectionChange: ae,
      selectionMode: r
    },
    /* @__PURE__ */ e.createElement(J, { columns: E }, (s) => /* @__PURE__ */ e.createElement(Q, { ...s, children: void 0, key: s.key })),
    /* @__PURE__ */ e.createElement(X, { emptyContent: h.emptyContent, items: le }, (s) => /* @__PURE__ */ e.createElement(Y, { key: s[f] }, (d) => /* @__PURE__ */ e.createElement(ee, { className: u }, re(s, d))))
  ), oe));
};
function et({ display: n, onClose: c, children: t, title: l, cancelButton: r, acceptButton: o, ...m }) {
  return /* @__PURE__ */ e.createElement(Se, { isOpen: n, onOpenChange: c, ...m }, /* @__PURE__ */ e.createElement(Ie, null, /* @__PURE__ */ e.createElement(Fe, { className: "flex flex-col gap-1" }, l), /* @__PURE__ */ e.createElement(Pe, null, t), /* @__PURE__ */ e.createElement(Me, null, r && /* @__PURE__ */ e.createElement(R, { ...r, onPress: c }), o && /* @__PURE__ */ e.createElement(R, { ...o }))));
}
export {
  Ye as DataTable,
  et as Modal,
  Xe as Panel,
  qe as RHFAutocomplete,
  Je as RHFCheckbox,
  Qe as RHFCheckboxGroup,
  Ge as RHFDate,
  We as RHFInput,
  Ke as RHFInputOtp,
  ze as RHFRadioGroup,
  Ue as RHFSelect,
  _e as RHFTextArea,
  Ze as RHFTime
};