@multiplatform.one/forms 6.0.0

package/dist/esm/Form/form.spec.native.js

@@ -0,0 +1,365 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { YStack } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "../Button/index.native.js";
+import { Input } from "../fields/Input/index.native.js";
+import { Form, useFormContext } from "./index.native.js";
+var mockSetUrlState = vi.fn();
+vi.mock("@multiplatform.one/router", function () {
+  return {
+    useUrlState: vi.fn(function () {
+      return [{
+        name: "From URL"
+      }, mockSetUrlState];
+    })
+  };
+});
+describe("Form", function () {
+  describe("basic rendering", function () {
+    it("should render form with aria-label", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        onSubmit: vi.fn(),
+        "aria-label": "Test Form",
+        children: /* @__PURE__ */_jsx(YStack, {
+          children: "Content"
+        })
+      }));
+      var formElement = result.container.querySelector('[aria-label="Test Form"]');
+      expect(formElement === null || formElement === void 0 ? void 0 : formElement.getAttribute("aria-label")).toBe("Test Form");
+    });
+  });
+  describe("form submission", function () {
+    it("should handle form submission with default values", async function () {
+      var onSubmit = vi.fn();
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        formOptions: {
+          defaultValues: {
+            name: "John",
+            email: "john@example.com"
+          }
+        },
+        onSubmit,
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      var submitButton = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (submitButton) {
+          fireEvent.click(submitButton);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalledWith({
+          name: "John",
+          email: "john@example.com"
+        });
+      });
+    });
+    it("should handle form submission with provided form instance", async function () {
+      var onSubmit = vi.fn();
+      var TestComponent = function TestComponent2() {
+        var form = useForm({
+          defaultValues: {
+            name: "Jane"
+          },
+          onSubmit: async function onSubmit1(param) {
+            var {
+              value
+            } = param;
+            onSubmit(value);
+          }
+        });
+        return /* @__PURE__ */_jsx(Form, {
+          form,
+          onSubmit: function onSubmit2() {},
+          children: /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            testID: "submit-button",
+            children: "Submit"
+          })
+        });
+      };
+      var result = renderWithProviders(/* @__PURE__ */_jsx(TestComponent, {}));
+      var button = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalledWith({
+          name: "Jane"
+        });
+      });
+    });
+    it("should include readOnly field values in submit payload", async function () {
+      var onSubmit = vi.fn();
+      var result = renderWithProviders(/* @__PURE__ */_jsxs(Form, {
+        formOptions: {
+          defaultValues: {
+            editable: "editable value",
+            readOnlyField: "readonly value"
+          }
+        },
+        onSubmit,
+        children: [/* @__PURE__ */_jsx(Input, {
+          name: "editable",
+          label: "Editable"
+        }), /* @__PURE__ */_jsx(Input, {
+          name: "readOnlyField",
+          label: "Read only",
+          readOnly: true
+        }), /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })]
+      }));
+      var submitButton = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (submitButton) {
+          fireEvent.click(submitButton);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+          editable: "editable value",
+          readOnlyField: "readonly value"
+        }));
+      });
+    });
+    it("should keep disabled field values in submit payload", async function () {
+      var _onSubmit_mock_calls_;
+      var onSubmit = vi.fn();
+      var result = renderWithProviders(/* @__PURE__ */_jsxs(Form, {
+        formOptions: {
+          defaultValues: {
+            editable: "editable value",
+            disabledField: "disabled value"
+          }
+        },
+        onSubmit,
+        children: [/* @__PURE__ */_jsx(Input, {
+          name: "editable",
+          label: "Editable"
+        }), /* @__PURE__ */_jsx(Input, {
+          name: "disabledField",
+          label: "Disabled",
+          disabled: true
+        }), /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })]
+      }));
+      var submitButton = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (submitButton) {
+          fireEvent.click(submitButton);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalled();
+      });
+      var payload = (_onSubmit_mock_calls_ = onSubmit.mock.calls[0]) === null || _onSubmit_mock_calls_ === void 0 ? void 0 : _onSubmit_mock_calls_[0];
+      expect(payload).toEqual(expect.objectContaining({
+        editable: "editable value",
+        disabledField: "disabled value"
+      }));
+    });
+  });
+  describe("form context", function () {
+    it("should provide form context to children", function () {
+      var TestConsumer = function TestConsumer2() {
+        var form = useFormContext();
+        return /* @__PURE__ */_jsx(YStack, {
+          "data-testid": "form-context",
+          children: form ? "Has Context" : "No Context"
+        });
+      };
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        onSubmit: vi.fn(),
+        children: /* @__PURE__ */_jsx(TestConsumer, {})
+      }));
+      var formContext = result.container.querySelector('[data-testid="form-context"]');
+      expect(formContext === null || formContext === void 0 ? void 0 : formContext.textContent).toBe("Has Context");
+    });
+  });
+  describe("edge cases", function () {
+    it("should handle undefined onSubmit", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      var submitButton = result.container.querySelector('[data-testid="submit-button"]');
+      expect(function () {
+        if (submitButton) {
+          fireEvent.click(submitButton);
+        }
+      }).not.toThrow();
+    });
+    it("should handle async onSubmit", async function () {
+      var onSubmit = vi.fn().mockResolvedValue(void 0);
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        onSubmit,
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      var button = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalled();
+      });
+    });
+  });
+  describe("accessibility", function () {
+    it("should support aria attributes", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        onSubmit: vi.fn(),
+        "aria-label": "Test Form",
+        "aria-describedby": "form-description",
+        children: /* @__PURE__ */_jsx(YStack, {
+          children: "Test Content"
+        })
+      }));
+      var form = result.container.querySelector('[aria-label="Test Form"]');
+      expect(form === null || form === void 0 ? void 0 : form.getAttribute("aria-label")).toBe("Test Form");
+      expect(form === null || form === void 0 ? void 0 : form.getAttribute("aria-describedby")).toBe("form-description");
+    });
+  });
+  describe("form validation", function () {
+    it("should handle form validation errors", async function () {
+      var onSubmit = vi.fn();
+      var formOptions = {
+        defaultValues: {
+          name: ""
+        },
+        validators: {
+          onSubmit: function onSubmit2(param) {
+            var {
+              value
+            } = param;
+            if (!value.name) {
+              return "Name is required";
+            }
+            return void 0;
+          }
+        }
+      };
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        formOptions,
+        onSubmit,
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      var button = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+    it("should submit when validation passes", async function () {
+      var onSubmit = vi.fn();
+      var formOptions = {
+        defaultValues: {
+          name: "Valid Name"
+        },
+        validators: {
+          onSubmit: function onSubmit2(param) {
+            var {
+              value
+            } = param;
+            if (!value.name) {
+              return "Name is required";
+            }
+            return void 0;
+          }
+        }
+      };
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        formOptions,
+        onSubmit,
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      var button = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalledWith({
+          name: "Valid Name"
+        });
+      });
+    });
+  });
+  describe("form state management", function () {
+    it("should maintain form state between renders", async function () {
+      var onSubmit = vi.fn();
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        formOptions: {
+          defaultValues: {
+            name: "Initial"
+          }
+        },
+        onSubmit,
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      result.rerender(/* @__PURE__ */_jsx(Form, {
+        formOptions: {
+          defaultValues: {
+            name: "Initial"
+          }
+        },
+        onSubmit,
+        children: /* @__PURE__ */_jsx(Button, {
+          action: "submit",
+          testID: "submit-button",
+          children: "Submit"
+        })
+      }));
+      var button = result.container.querySelector('[data-testid="submit-button"]');
+      await act(async function () {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
+      await waitFor(function () {
+        expect(onSubmit).toHaveBeenCalledWith({
+          name: "Initial"
+        });
+      });
+    });
+  });
+});
+//# sourceMappingURL=form.spec.native.js.map

package/dist/esm/Form/form.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useForm","act","fireEvent","waitFor","YStack","describe","expect","it","vi","renderWithProviders","Button","Input","Form","useFormContext","mockSetUrlState","fn","mock","useUrlState","name","result","onSubmit","children","formElement","container","querySelector","getAttribute","toBe","formOptions","defaultValues","email","action","testID","submitButton","click","toHaveBeenCalledWith","TestComponent","TestComponent2","form","onSubmit1","param","value","onSubmit2","button","editable","readOnlyField","label","readOnly","objectContaining","_onSubmit_mock_calls_","disabledField","disabled","toHaveBeenCalled","payload","calls","toEqual","TestConsumer","TestConsumer2","formContext","textContent","not","toThrow","mockResolvedValue","validators"],"sources":["../../../src/Form/form.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Form/index.mjs

@@ -0,0 +1,69 @@
+import { useUrlState } from "@multiplatform.one/router";
+import { useForm } from "@tanstack/react-form";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { Form as TamaguiForm } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+const FormContext = createContext(void 0);
+function useFormContext() {
+  return useContext(FormContext);
+}
+function Form({
+  children,
+  form: providedForm,
+  formOptions,
+  onSubmit,
+  syncWithUrl = false,
+  urlDebounceMs = 500,
+  submitText: _submitText,
+  ...tamaguiFormProps
+}) {
+  const [urlState, setUrlState] = useUrlState(formOptions?.defaultValues || {}, {
+    debounceMs: urlDebounceMs
+  });
+  const onSubmitRef = useRef(onSubmit);
+  useEffect(() => {
+    onSubmitRef.current = onSubmit;
+  }, [onSubmit]);
+  const defaultForm = useForm(providedForm ? {} : {
+    ...formOptions,
+    defaultValues: syncWithUrl ? urlState : formOptions?.defaultValues,
+    onSubmit: async ({
+      value,
+      formApi
+    }) => {
+      if (onSubmitRef.current) {
+        await onSubmitRef.current(value);
+      } else if (formOptions?.onSubmit) {
+        await formOptions.onSubmit({
+          value,
+          formApi,
+          meta: {}
+        });
+      }
+    }
+  });
+  const form = providedForm || defaultForm;
+  useEffect(() => {
+    if (!syncWithUrl) return;
+    const subscription = form.store.subscribe(() => {
+      const values = form.store.state.values;
+      setUrlState(values);
+    });
+    return () => subscription.unsubscribe();
+  }, [form, syncWithUrl, setUrlState]);
+  const handleSubmit = useMemo(() => e => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    void form.handleSubmit();
+  }, [form]);
+  return /* @__PURE__ */jsx(FormContext.Provider, {
+    value: form,
+    children: /* @__PURE__ */jsx(TamaguiForm, {
+      onSubmit: handleSubmit,
+      ...tamaguiFormProps,
+      children
+    })
+  });
+}
+export { Form, FormContext, useFormContext };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/Form/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useUrlState","useForm","createContext","useContext","useEffect","useMemo","useRef","Form","TamaguiForm","jsx","FormContext","useFormContext","children","form","providedForm","formOptions","onSubmit","syncWithUrl","urlDebounceMs","submitText","_submitText","tamaguiFormProps","urlState","setUrlState","defaultValues","debounceMs","onSubmitRef","current","defaultForm","value","formApi","meta","subscription","store","subscribe","values","state","unsubscribe","handleSubmit","e","preventDefault","stopPropagation","Provider"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAC5B,SAAyCC,OAAA,QAAe;AACxD,SAGEC,aAAA,EACAC,UAAA,EACAC,SAAA,EACAC,OAAA,EACAC,MAAA,QACK;AACP,SAASC,IAAA,IAAQC,WAAA,QAAuD;AAyGlE,SAAAC,GAAA;AAvGC,MAAMC,WAAA,GAAcR,aAAA,CAEzB,MAAS;AAEJ,SAASS,eAAA,EAAqD;EACnE,OAAOR,UAAA,CAAWO,WAAW;AAc/B;AAeO,SAASH,KAAkE;EAChFK,QAAA;EACAC,IAAA,EAAMC,YAAA;EACNC,WAAA;EACAC,QAAA;EACAC,WAAA,GAAc;EACdC,aAAA,GAAgB;EAChBC,UAAA,EAAYC,WAAA;EACZ,GAAGC;AACL,GAAyC;EAEvC,MAAM,CAACC,QAAA,EAAUC,WAAW,IAAIvB,WAAA,CAC9Be,WAAA,EAAaS,aAAA,IAAkB,CAAC,GAChC;IAAEC,UAAA,EAAYP;EAAc,CAC9B;EAGA,MAAMQ,WAAA,GAAcpB,MAAA,CAAOU,QAAQ;EACnCZ,SAAA,CAAU,MAAM;IACdsB,WAAA,CAAYC,OAAA,GAAUX,QAAA;EACxB,GAAG,CAACA,QAAQ,CAAC;EAIb,MAAMY,WAAA,GAAc3B,OAAA,CAClBa,YAAA,GACI,CAAC,IACD;IACE,GAAGC,WAAA;IACHS,aAAA,EAAeP,WAAA,GAAcK,QAAA,GAAWP,WAAA,EAAaS,aAAA;IACrDR,QAAA,EAAU,MAAAA,CAAO;MAAEa,KAAA;MAAOC;IAAQ,MAAM;MAEtC,IAAIJ,WAAA,CAAYC,OAAA,EAAS;QACvB,MAAMD,WAAA,CAAYC,OAAA,CAAQE,KAAK;MACjC,WAESd,WAAA,EAAaC,QAAA,EAAU;QAC9B,MAAMD,WAAA,CAAYC,QAAA,CAAS;UAAEa,KAAA;UAAOC,OAAA;UAASC,IAAA,EAAM,CAAC;QAAE,CAAQ;MAChE;IACF;EACF,CACN;EAEA,MAAMlB,IAAA,GAAOC,YAAA,IAAgBc,WAAA;EAG7BxB,SAAA,CAAU,MAAM;IACd,IAAI,CAACa,WAAA,EAAa;IAElB,MAAMe,YAAA,GAAenB,IAAA,CAAKoB,KAAA,CAAMC,SAAA,CAAU,MAAM;MAC9C,MAAMC,MAAA,GAAStB,IAAA,CAAKoB,KAAA,CAAMG,KAAA,CAAMD,MAAA;MAChCZ,WAAA,CAAYY,MAAM;IACpB,CAAC;IAED,OAAO,MAAMH,YAAA,CAAaK,WAAA,CAAY;EACxC,GAAG,CAACxB,IAAA,EAAMI,WAAA,EAAaM,WAAW,CAAC;EAEnC,MAAMe,YAAA,GAAejC,OAAA,CACnB,MAAOkC,CAAA,IAAkB;IACvBA,CAAA,EAAGC,cAAA,CAAe;IAClBD,CAAA,EAAGE,eAAA,CAAgB;IAEnB,KAAK5B,IAAA,CAAKyB,YAAA,CAAa;EACzB,GACA,CAACzB,IAAI,CACP;EAEA,OACE,eAAAJ,GAAA,CAACC,WAAA,CAAYgC,QAAA,EAAZ;IAAqBb,KAAA,EAAOhB,IAAA;IAC3BD,QAAA,iBAAAH,GAAA,CAACD,WAAA;MAAYQ,QAAA,EAAUsB,YAAA;MAAe,GAAGjB,gBAAA;MACtCT;IAAA,CACH;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/Form/index.native.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUrlState } from "@multiplatform.one/router";
+import { useForm } from "@tanstack/react-form";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { Form as TamaguiForm } from "tamagui";
+var FormContext = /* @__PURE__ */createContext(void 0);
+function useFormContext() {
+  return useContext(FormContext);
+}
+function Form(param) {
+  var {
+    children,
+    form: providedForm,
+    formOptions,
+    onSubmit,
+    syncWithUrl = false,
+    urlDebounceMs = 500,
+    submitText: _submitText,
+    ...tamaguiFormProps
+  } = param;
+  var [urlState, setUrlState] = useUrlState((formOptions === null || formOptions === void 0 ? void 0 : formOptions.defaultValues) || {}, {
+    debounceMs: urlDebounceMs
+  });
+  var onSubmitRef = useRef(onSubmit);
+  useEffect(function () {
+    onSubmitRef.current = onSubmit;
+  }, [onSubmit]);
+  var defaultForm = useForm(providedForm ? {} : {
+    ...formOptions,
+    defaultValues: syncWithUrl ? urlState : formOptions === null || formOptions === void 0 ? void 0 : formOptions.defaultValues,
+    onSubmit: async function onSubmit2(param2) {
+      var {
+        value,
+        formApi
+      } = param2;
+      if (onSubmitRef.current) {
+        await onSubmitRef.current(value);
+      } else if (formOptions === null || formOptions === void 0 ? void 0 : formOptions.onSubmit) {
+        await formOptions.onSubmit({
+          value,
+          formApi,
+          meta: {}
+        });
+      }
+    }
+  });
+  var form = providedForm || defaultForm;
+  useEffect(function () {
+    if (!syncWithUrl) return;
+    var subscription = form.store.subscribe(function () {
+      var values = form.store.state.values;
+      setUrlState(values);
+    });
+    return function () {
+      return subscription.unsubscribe();
+    };
+  }, [form, syncWithUrl, setUrlState]);
+  var handleSubmit = useMemo(function () {
+    return function (e) {
+      e === null || e === void 0 ? void 0 : e.preventDefault();
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      void form.handleSubmit();
+    };
+  }, [form]);
+  return /* @__PURE__ */_jsx(FormContext.Provider, {
+    value: form,
+    children: /* @__PURE__ */_jsx(TamaguiForm, {
+      onSubmit: handleSubmit,
+      ...tamaguiFormProps,
+      children
+    })
+  });
+}
+export { Form, FormContext, useFormContext };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/Form/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","useUrlState","useForm","createContext","useContext","useEffect","useMemo","useRef","Form","TamaguiForm","FormContext","useFormContext","param","children","form","providedForm","formOptions","onSubmit","syncWithUrl","urlDebounceMs","submitText","_submitText","tamaguiFormProps","urlState","setUrlState","defaultValues","debounceMs","onSubmitRef","current","defaultForm","onSubmit2","param2","value","formApi","meta","subscription","store","subscribe","values","state","unsubscribe","handleSubmit","e","preventDefault","stopPropagation","Provider"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAmB;AAC5B,SAAyCC,WAAA,QAAe;AACxD,SAAAC,OAAA;AAAA,SAGEC,aAAA,EAAAC,UAAA,EAAAC,SAAA,EAAAC,OAAA,EAAAC,MAAA;AAAA,SACAC,IAAA,IAAAC,WAAA;AAAA,IACAC,WAAA,kBAAAP,aAAA;AAAA,SACAQ,eAAA;EACA,OAAAP,UAAA,CAAAM,WAAA;AAAA;AAEF,SAASF,KAAAI,KAAQ;EAyGX;IAAAC,QAAA;IAAAC,IAAA,EAAAC,YAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,aAAA;IAAAC,UAAA,EAAAC,WAAA;IAAA,GAAAC;EAAA,IAAAV,KAAA;EAvGC,IAAM,CAAAW,QAAA,EAAAC,WAAc,IAAAvB,WAEhB,EAAAe,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAAS,aAAA;IAEJC,UAAS,EAAAP;EACd;EAcF,IAAAQ,WAAA,GAAApB,MAAA,CAAAU,QAAA;EAeOZ,SAAS,aAAkE;IAChFsB,WAAA,CAAAC,OAAA,GAAAX,QAAA;EACA,IACAA,QAAA,CACA;EACA,IAAAY,WAAc,GAAA3B,OAAA,CAAAa,YAAA;IACd,GAAAC,WAAgB;IAChBS,aAAY,EAAAP,WAAA,GAAAK,QAAA,GAAAP,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAAS,aAAA;IACZR,QAAG,iBAAAa,UAAAC,MAAA;MACoC;QAAAC,KAAA;QAAAC;MAAA,IAAAF,MAAA;MAEvC,IAAOJ,WAAU,CAAAC,OAAA,EAAW;QAC1B,MAAAD,WAAa,CAAAC,OAAA,CAAkBI,KAAC;MAC9B,WAAAhB,WAAY,KAAc,QAAAA,WAAA,uBAAAA,WAAA,CAAAC,QAAA;QAC9B,MAAAD,WAAA,CAAAC,QAAA;UAGMe,KAAA;UACNC,OAAU;UACRC,IAAA,EAAY;QACV;MAIJ;IACE;EAEI;EACK,IACHpB,IAAA,GAAAC,YAAe,IAAAc,WAAc;EAAwBxB,SACrD,aAAiB;IAEf,KAAAa,WAAI;IACF,IAAAiB,YAAM,GAAArB,IAAA,CAAYsB,KAAA,CAAAC,SAAa;MAAA,IACjCC,MAAA,GAESxB,IAAA,CAAAsB,KAAA,CAAAG,KAAa,CAAAD,MAAU;MAC9Bd,WAAM,CAAAc,MAAA;IAAwD;IAChE,OACF;MACF,OAAAH,YAAA,CAAAK,WAAA;IACN;EAEA,IAGA1B,IAAA,EACEI,WAAK,EAELM,WAAM,CACJ;EACA,IAAAiB,YAAY,GAAAnC,OAAM;IACpB,OAAC,UAAAoC,CAAA;MAEDA,CAAA,KAAO,QAAMA,CAAA,UAAa,aAAYA,CAAA,CAAAC,cAAA;MACpCD,CAAA,KAAM,QAAAA,CAAA,KAAa,cAAY,IAAAA,CAAA,CAAAE,eAAA;MAEnC,KAAM9B,IAAA,CAAA2B,YAAe;IACnB;EACE,IACA3B,IAAA,CAEA;EAAuB,OACzB,eAAAd,IAAA,CAAAU,WAAA,CAAAmC,QAAA;IACAb,KAAK,EAAAlB,IAAA;IACPD,QAAA,iBAAAb,IAAA,CAAAS,WAAA;MAEAQ,QACE,EAAAwB,YAAA;MAMJ,GAAAnB,gBAAA","ignoreList":[]}

package/dist/esm/FormGrid.mjs

@@ -0,0 +1,36 @@
+import { Children } from "react";
+import { XStack, YStack, isWeb } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+function FormGrid({
+  columns = 2,
+  gap = 16,
+  children
+}) {
+  if (isWeb) {
+    return /* @__PURE__ */jsx("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: `${gap}px`
+      },
+      children
+    });
+  }
+  const childArray = Children.toArray(children);
+  const rows = [];
+  for (let i = 0; i < childArray.length; i += columns) {
+    rows.push(childArray.slice(i, i + columns));
+  }
+  return /* @__PURE__ */jsx(YStack, {
+    gap,
+    children: rows.map((row, rowIndex) => /* @__PURE__ */jsx(XStack, {
+      gap,
+      children: row.map((child, colIndex) => /* @__PURE__ */jsx(YStack, {
+        flex: 1,
+        children: child
+      }, colIndex))
+    }, rowIndex))
+  });
+}
+export { FormGrid };
+//# sourceMappingURL=FormGrid.mjs.map

package/dist/esm/FormGrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","XStack","YStack","isWeb","jsx","FormGrid","columns","gap","children","style","display","gridTemplateColumns","childArray","toArray","rows","i","length","push","slice","map","row","rowIndex","child","colIndex","flex"],"sources":["../../src/FormGrid.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,QAAgC;AACzC,SAASC,MAAA,EAAQC,MAAA,EAAQC,KAAA,QAAa;AAqBhC,SAAAC,GAAA;AAHC,SAASC,SAAS;EAAEC,OAAA,GAAU;EAAGC,GAAA,GAAM;EAAIC;AAAS,GAAkB;EAC3E,IAAIL,KAAA,EAAO;IACT,OACE,eAAAC,GAAA,CAAC;MACCK,KAAA,EAAO;QACLC,OAAA,EAAS;QACTC,mBAAA,EAAqB,UAAUL,OAAO;QACtCC,GAAA,EAAK,GAAGA,GAAG;MACb;MAECC;IAAA,CACH;EAEJ;EAEA,MAAMI,UAAA,GAAaZ,QAAA,CAASa,OAAA,CAAQL,QAAQ;EAC5C,MAAMM,IAAA,GAAsB,EAAC;EAC7B,SAASC,CAAA,GAAI,GAAGA,CAAA,GAAIH,UAAA,CAAWI,MAAA,EAAQD,CAAA,IAAKT,OAAA,EAAS;IACnDQ,IAAA,CAAKG,IAAA,CAAKL,UAAA,CAAWM,KAAA,CAAMH,CAAA,EAAGA,CAAA,GAAIT,OAAO,CAAC;EAC5C;EAEA,OACE,eAAAF,GAAA,CAACF,MAAA;IAAOK,GAAA;IACLC,QAAA,EAAAM,IAAA,CAAKK,GAAA,CAAI,CAACC,GAAA,EAAKC,QAAA,KACd,eAAAjB,GAAA,CAACH,MAAA;MAAsBM,GAAA;MACpBC,QAAA,EAAAY,GAAA,CAAID,GAAA,CAAI,CAACG,KAAA,EAAOC,QAAA,KACf,eAAAnB,GAAA,CAACF,MAAA;QAAsBsB,IAAA,EAAM;QAC1BhB,QAAA,EAAAc;MAAA,GADUC,QAEb,CACD;IAAA,GALUF,QAMb,CACD;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/FormGrid.native.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { XStack, YStack, isWeb } from "tamagui";
+function FormGrid(param) {
+  var {
+    columns = 2,
+    gap = 16,
+    children
+  } = param;
+  if (isWeb) {
+    return /* @__PURE__ */_jsx("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: `${gap}px`
+      },
+      children
+    });
+  }
+  var childArray = Children.toArray(children);
+  var rows = [];
+  for (var i = 0; i < childArray.length; i += columns) {
+    rows.push(childArray.slice(i, i + columns));
+  }
+  return /* @__PURE__ */_jsx(YStack, {
+    gap,
+    children: rows.map(function (row, rowIndex) {
+      return /* @__PURE__ */_jsx(XStack, {
+        gap,
+        children: row.map(function (child, colIndex) {
+          return /* @__PURE__ */_jsx(YStack, {
+            flex: 1,
+            children: child
+          }, colIndex);
+        })
+      }, rowIndex);
+    })
+  });
+}
+export { FormGrid };
+//# sourceMappingURL=FormGrid.native.js.map

package/dist/esm/FormGrid.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Children","XStack","YStack","isWeb","FormGrid","param","columns","gap","children","style","display","gridTemplateColumns","childArray","toArray","rows","i","length","push","slice","map","row","rowIndex"],"sources":["../../src/FormGrid.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAgC;AACzC,SAASC,QAAQ,QAAQ;AAqBnB,SAAAC,MAAA,EAAAC,MAAA,EAAAC,KAAA;AAHC,SAASC,SAASC,KAAE;EACzB,IAAI;IAAAC,OAAO;IAAAC,GAAA;IAAAC;EAAA,IAAAH,KAAA;EACT,IAAAF,KACE;IAAA,OAAC,eAAAJ,IAAA;MAAAU,KAAA;QACCC,OAAO;QAAAC,mBACI,YAAAL,OAAA;QAAAC,GACT,KAAAA,GAAA;MAAsC;MAC3BC;IACb;EAEC;EAAA,IACHI,UAAA,GAAAZ,QAAA,CAAAa,OAAA,CAAAL,QAAA;EAEJ,IAAAM,IAAA;EAEA,SAAMC,CAAA,MAAAA,CAAA,GAAaH,UAAS,CAAAI,MAAQ,EAAAD,CAAA,IAAQT,OAAA;IAC5CQ,IAAM,CAAAG,IAAA,CAAAL,UAAuB,CAAAM,KAAA,CAAAH,CAAA,EAAAA,CAAA,GAAAT,OAAA;EAC7B;EACE,OAAK,eAAgBP,IAAA,CAAAG,MAAS,EAAI;IACpCK,GAAA;IAEAC,QACE,EAAAM,IAAA,CAAAK,GAAA,WAACC,GAAA,EAAAC,QACE;MAWP,sBAAAtB,IAAA,CAAAE,MAAA","ignoreList":[]}