@levo-so/react 0.0.1-alpha → 0.1.0

package/dist/CurrencyWidget-DRMqUgbP.js

@@ -0,0 +1,60 @@
+import { j as t } from "./jsx-runtime-B6kdoens.js";
+import { useController as j } from "react-hook-form";
+import { NumericFormat as F } from "react-number-format";
+import { h as w, j as C, k } from "./CollectionFormBuilder-a0pzMkWL.js";
+import { c as N } from "./cn-C9QoOYNG.js";
+const V = ({
+  field: r,
+  ...m
+}) => {
+  var u, c;
+  const { key: d = "", label: n = "", helper_text: p = "", readonly: e = !1 } = r, o = d, {
+    field: { value: f, onBlur: a, onChange: l, ref: h, ...x },
+    fieldState: s
+  } = j({
+    name: o,
+    rules: w(r)
+  }), b = !!(r != null && r.required), g = (u = s == null ? void 0 : s.error) == null ? void 0 : u.message, i = (c = r == null ? void 0 : r.options) == null ? void 0 : c.currency_code;
+  return /* @__PURE__ */ t.jsxs(
+    C,
+    {
+      ref: h,
+      error: g,
+      helperText: p,
+      readOnly: e,
+      children: [
+        n && /* @__PURE__ */ t.jsx(k, { htmlFor: o, isRequired: b, children: n }),
+        /* @__PURE__ */ t.jsx(
+          F,
+          {
+            thousandSeparator: !0,
+            prefix: i || "$",
+            thousandsGroupStyle: i === "₹" ? "lakh" : "thousand",
+            suffix: "",
+            allowNegative: !1,
+            id: o,
+            onValueChange: (y) => {
+              const { value: v } = y;
+              l && l(v);
+            },
+            onBlur: () => {
+              a && a();
+            },
+            value: f,
+            readOnly: e,
+            className: N(
+              "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+              e && "focus-visible:ring-0"
+            ),
+            ...x,
+            ...m
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as CurrencyWidget,
+  V as default
+};

package/dist/DateTimeWidget-FmBvE_lk.js

@@ -0,0 +1,103 @@
+import { j as e } from "./jsx-runtime-B6kdoens.js";
+import { Calendar as w, X as F } from "lucide-react";
+import { useRef as y } from "react";
+import k from "react-flatpickr";
+import { useController as C } from "react-hook-form";
+import { h as N, j as z, k as R } from "./CollectionFormBuilder-a0pzMkWL.js";
+import { c as l } from "./cn-C9QoOYNG.js";
+const D = ({
+  field: r,
+  enableTime: x,
+  ...b
+}) => {
+  var p;
+  const { key: h = "", label: a = "", helper_text: v = "", readonly: d = !1 } = r, o = h, {
+    field: { value: u, onBlur: m, onChange: s, ...g },
+    fieldState: i
+  } = C({
+    name: o,
+    rules: N(r)
+  }), j = !!(r != null && r.required), c = (p = i == null ? void 0 : i.error) == null ? void 0 : p.message, n = y(null);
+  return /* @__PURE__ */ e.jsxs(z, { helperText: v, readOnly: d, error: c, children: [
+    a && /* @__PURE__ */ e.jsx(R, { htmlFor: o, isRequired: j, children: a }),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: n,
+        className: "h-9 w-full relative rounded-md [&_.flatpickr-wrapper]:w-full  [&_.flatpickr-calendar]:z-50",
+        children: [
+          /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: l(
+                "absolute left-0 top-0 bottom-0 w-9 flex items-center justify-center rounded-l-md overflow-hidden pointer-events-none"
+              ),
+              children: /* @__PURE__ */ e.jsx(w, { size: "20px", className: "text-muted-foreground" })
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              id: o,
+              className: l(
+                "flex h-9 w-full relative rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 pl-10 !max-w-none",
+                c && "border-destructive focus-visible:ring-destructive",
+                d && "focus-visible:ring-0"
+              ),
+              options: x ? {
+                dateFormat: "F j, Y h:i K",
+                position: "auto",
+                enableTime: !0,
+                allowInput: !0,
+                static: !1,
+                positionElement: n.current ?? void 0
+              } : {
+                altInput: !0,
+                altFormat: "F j, Y",
+                dateFormat: "d-m-Y",
+                position: "auto",
+                static: !1,
+                positionElement: n.current ?? void 0
+              },
+              value: u,
+              onChange: (t) => {
+                var f;
+                s && s((f = t[0]) == null ? void 0 : f.toISOString());
+              },
+              onBlur: () => {
+                m && m();
+              },
+              autoComplete: "off",
+              "aria-autocomplete": "none",
+              autoSave: "off",
+              ...g,
+              ...b
+            }
+          ),
+          u && /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: l(
+                "absolute right-0 top-0 bottom-0 w-9 z-10 flex items-center justify-center rounded-l-md overflow-hidden"
+              ),
+              children: /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (t) => {
+                    t == null || t.preventDefault(), t == null || t.stopPropagation(), s && s(o, null);
+                  },
+                  children: /* @__PURE__ */ e.jsx(F, { size: "20px", className: "text-muted-foreground" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  D as DateTimeWidget,
+  D as default
+};

package/dist/DefaultFormVariant-BzHB74Ie.js

@@ -0,0 +1,80 @@
+import { j as e } from "./jsx-runtime-B6kdoens.js";
+import { FormProvider as S } from "react-hook-form";
+import { m as b, F as y } from "./CollectionFormBuilder-a0pzMkWL.js";
+import { u as F, S as N } from "./useLevoForm-CR3q-L5Z.js";
+import { c as m } from "./cn-C9QoOYNG.js";
+import { B as g } from "./Spinner-CuUosd-S.js";
+const E = () => {
+  var d;
+  const {
+    schema: l,
+    containerStyles: i,
+    uiConfig: o,
+    isInternal: x,
+    submitButtonConfig: r,
+    isDisabled: c
+  } = b(), {
+    methods: t,
+    allFormValues: p,
+    isError: u,
+    isLoading: h,
+    handleContentId: j,
+    handleSubmit: f
+  } = F({
+    schema: l,
+    saveToRemote: !0
+  }), {
+    formState: { isSubmitting: v }
+  } = t;
+  return /* @__PURE__ */ e.jsxs(S, { ...t, children: [
+    /* @__PURE__ */ e.jsx(
+      N,
+      {
+        getContentId: (s) => j(s),
+        isError: u,
+        currentValues: p
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: m("w-full", i), children: /* @__PURE__ */ e.jsxs(
+      "form",
+      {
+        className: m(
+          "w-full bg-white rounded-md border border-[rgb(229, 231, 235)] flex flex-col gap-6 px-4 md:px-8 py-6",
+          h && "opacity-50 pointer-events-none"
+        ),
+        id: "collection-form",
+        onSubmit: f,
+        children: [
+          (d = l == null ? void 0 : l.sections) == null ? void 0 : d.map((s) => {
+            var n;
+            return /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+              !(o != null && o.hideSectionHeadings) && /* @__PURE__ */ e.jsx("p", { className: m("mb-4 text-lg font-semibold"), children: s == null ? void 0 : s.label }),
+              /* @__PURE__ */ e.jsx("div", { className: m("flex flex-col gap-4"), children: (n = s == null ? void 0 : s.fields) == null ? void 0 : n.map((a) => a && !a.hidden ? /* @__PURE__ */ e.jsx(
+                y,
+                {
+                  field: a,
+                  isInternal: x
+                },
+                a == null ? void 0 : a.key
+              ) : null) })
+            ] }, s.id);
+          }),
+          (r == null ? void 0 : r.show) && /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-end mt-6", children: /* @__PURE__ */ e.jsx(
+            g,
+            {
+              className: r == null ? void 0 : r.styles,
+              loadingText: "Saving",
+              isLoading: v,
+              disabled: c,
+              type: "submit",
+              children: (r == null ? void 0 : r.text) || "Save"
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  E as default
+};

package/dist/DropdownWidget-CW0GSjwE.js

@@ -0,0 +1,115 @@
+"use client";
+import { j as i } from "./jsx-runtime-B6kdoens.js";
+import { useState as f, useEffect as j } from "react";
+import { useController as k } from "react-hook-form";
+import D from "react-select";
+import { h as N, j as q, k as B } from "./CollectionFormBuilder-a0pzMkWL.js";
+import { I as L } from "./Input-2CvZ90f8.js";
+import { c as x } from "./cn-C9QoOYNG.js";
+const G = ({
+  field: s,
+  ...r
+}) => {
+  var O;
+  const [t, w] = f([]), [h, g] = f(""), [I, b] = f(!1), {
+    key: S = "",
+    label: p = "",
+    helper_text: C = "",
+    readonly: v = !1,
+    values: n = [],
+    options: y = {}
+  } = s, u = S, {
+    field: { value: o, onBlur: P, onChange: a, disabled: E, ...F },
+    fieldState: c
+  } = k({
+    name: u,
+    rules: N(s)
+  }), M = !!(s != null && s.required), R = (O = c == null ? void 0 : c.error) == null ? void 0 : O.message, d = !!(y != null && y.custom_input);
+  return j(() => {
+    if (n != null && n.length) {
+      const l = [...n == null ? void 0 : n.map((m) => ({
+        label: m,
+        value: m
+      }))];
+      d && l.push({
+        label: "Other, Please Specify",
+        value: "Other"
+      }), w(l);
+    }
+  }, [n, d]), j(() => {
+    !(r != null && r.isMulti) && d && typeof o == "string" && o && (t == null ? void 0 : t.findIndex(
+      (e) => (e == null ? void 0 : e.value) !== "Other" && (e == null ? void 0 : e.value) === o
+    )) === -1 && (b(!0), g(o));
+  }, [o]), /* @__PURE__ */ i.jsxs(q, { error: R, helperText: C, readOnly: v, children: [
+    p && /* @__PURE__ */ i.jsx(B, { htmlFor: u, isRequired: M, children: p }),
+    /* @__PURE__ */ i.jsx(
+      D,
+      {
+        id: u,
+        value: I ? {
+          label: "Other, Please Specify",
+          value: "Other"
+        } : o ? r != null && r.isMulti ? t == null ? void 0 : t.filter(
+          (e) => o == null ? void 0 : o.includes(e == null ? void 0 : e.value)
+        ) : t == null ? void 0 : t.find((e) => (e == null ? void 0 : e.value) === o) : null,
+        onChange: (e) => {
+          d && (e == null ? void 0 : e.value) === "Other" && (e == null ? void 0 : e.label) === "Other, Please Specify" ? (b(!0), a(h)) : (b(!1), r != null && r.isMulti ? a(e == null ? void 0 : e.map((l) => l == null ? void 0 : l.value)) : a(e == null ? void 0 : e.value));
+        },
+        onBlur: () => P(),
+        options: t,
+        isDisabled: E,
+        menuPlacement: "auto",
+        ...F,
+        ...r,
+        unstyled: !0,
+        classNames: {
+          container: () => x("w-full min-w-none h-auto min-h-none"),
+          control: ({ isFocused: e, isMulti: l, isDisabled: m }) => x(
+            "w-full  pl-3",
+            l ? "!min-h-9 h-auto" : "h-9 !min-h-none",
+            "rounded-md border bg-transparent hover:cursor-pointer border-input text-sm shadow-sm transition-colors",
+            "flex ",
+            e && "outline-none ring-1 ring-ring",
+            v && "ring-0",
+            m && "cursor-not-allowed opacity-50"
+          ),
+          input: () => "",
+          valueContainer: () => "gap-[4px] py-1",
+          singleValue: () => "",
+          multiValue: () => "bg-gray-100 rounded items-center py-0.5 pl-2 pr-1 gap-1.5",
+          multiValueLabel: () => "py-0.5",
+          multiValueRemove: () => "border border-gray-200 bg-white hover:bg-red-50 hover:text-red-800 text-gray-500 hover:border-red-300 rounded-md",
+          indicatorsContainer: () => "",
+          clearIndicator: () => "text-gray-500 p-1 rounded-md hover:bg-red-50 hover:text-red-800",
+          indicatorSeparator: () => "",
+          dropdownIndicator: () => "p-1 hover:bg-gray-100 text-gray-500 rounded-md hover:text-black",
+          menu: () => "p-1 mt-2 border border-gray-200 bg-white rounded-md",
+          groupHeading: () => "ml-3 mt-2 mb-1 text-gray-500 text-sm",
+          placeholder: () => "text-gray-500 pl-1 py-0.5",
+          option: ({ isSelected: e, isFocused: l }) => x(
+            "text-sm font-medium hover:cursor-pointer px-3 py-2 rounded",
+            l && "bg-gray-100 active:bg-gray-200",
+            e && "text-white bg-primary/80"
+          ),
+          noOptionsMessage: () => "text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm"
+        }
+      }
+    ),
+    d && /* @__PURE__ */ i.jsx("div", { className: "w-full", children: /* @__PURE__ */ i.jsx(
+      L,
+      {
+        name: `select-other-${u}`,
+        value: h,
+        onChange: (e) => {
+          a == null || a(e.target.value), g(e.target.value);
+        },
+        className: "mt-4",
+        placeholder: "Other, Please Specify"
+      }
+    ) })
+  ] });
+};
+export {
+  G as DropdownWidget,
+  G as default
+};

package/dist/EmailWidget-Nyc76pT8.js

@@ -0,0 +1,42 @@
+import { j as t } from "./jsx-runtime-B6kdoens.js";
+import y from "react";
+import { useController as C } from "react-hook-form";
+import { G as F } from "./Spinner-CuUosd-S.js";
+import { h as I, j as R, k as V } from "./CollectionFormBuilder-a0pzMkWL.js";
+import { I as b } from "./Input-2CvZ90f8.js";
+function w(e) {
+  return F({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M1.75 3h20.5c.966 0 1.75.784 1.75 1.75v14a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 18.75v-14C0 3.784.784 3 1.75 3ZM1.5 7.412V18.75c0 .138.112.25.25.25h20.5a.25.25 0 0 0 .25-.25V7.412l-9.52 6.433c-.592.4-1.368.4-1.96 0Zm0-2.662v.852l10.36 7a.25.25 0 0 0 .28 0l10.36-7V4.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z" }, child: [] }] })(e);
+}
+const E = ({ field: e, ...c }) => {
+  var l;
+  const { key: u = "", label: s = "", helper_text: d = "", readonly: p = !1 } = e, r = u, {
+    field: { value: h, onBlur: x, onChange: g, ...f },
+    fieldState: a
+  } = C({
+    name: r,
+    rules: I(e)
+  }), j = !!(e != null && e.required), v = (l = a == null ? void 0 : a.error) == null ? void 0 : l.message;
+  return /* @__PURE__ */ t.jsxs(R, { error: v, helperText: d, children: [
+    s && /* @__PURE__ */ t.jsx(V, { htmlFor: r, isRequired: j, children: s }),
+    /* @__PURE__ */ t.jsx(
+      b,
+      {
+        id: r,
+        type: "email",
+        leftIcon: /* @__PURE__ */ t.jsx("div", { className: "w-full h-full flex items-center justify-center bg-muted", children: /* @__PURE__ */ t.jsx(w, { size: "20px", className: "text-muted-foreground" }) }),
+        value: h || "",
+        onChange: (o) => {
+          var n, m, i;
+          return g((i = (m = (n = o == null ? void 0 : o.target) == null ? void 0 : n.value) == null ? void 0 : m.trim()) == null ? void 0 : i.toLocaleLowerCase());
+        },
+        onBlur: x,
+        readOnly: p,
+        ...f,
+        ...c
+      }
+    )
+  ] });
+}, k = y.memo(E);
+export {
+  k as default
+};