@multiplatform.one/forms 6.1.0 → 6.4.0

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

@@ -0,0 +1,32 @@
+function resolveEffectiveValidateOn(validateOn, hasSubmitted) {
+  if (validateOn === "submit" && hasSubmitted) {
+    return "blur-then-change";
+  }
+  return validateOn;
+}
+function composeValidator(existing, fallback) {
+  if (!existing) return fallback;
+  return function (args) {
+    var _existing;
+    return (_existing = existing(args)) !== null && _existing !== void 0 ? _existing : fallback(args);
+  };
+}
+function remapValidatorsForTiming(validators, effective) {
+  if (!validators || effective === "submit") return validators;
+  var onSubmit = validators.onSubmit;
+  if (typeof onSubmit !== "function") return validators;
+  var next = {
+    ...validators
+  };
+  var wantBlur = effective === "blur" || effective === "blur-then-change";
+  var wantChange = effective === "change" || effective === "blur-then-change";
+  if (wantBlur) {
+    next.onBlur = composeValidator(validators.onBlur, onSubmit);
+  }
+  if (wantChange) {
+    next.onChange = composeValidator(validators.onChange, onSubmit);
+  }
+  return next;
+}
+export { remapValidatorsForTiming, resolveEffectiveValidateOn };
+//# sourceMappingURL=validateOn.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["resolveEffectiveValidateOn","validateOn","hasSubmitted","composeValidator","existing","fallback","args","_existing","remapValidatorsForTiming","validators","effective","onSubmit","next","wantBlur","wantChange","onBlur","onChange"],"sources":["../../../src/Form/validateOn.ts"],"sourcesContent":[null],"mappings":"AAYO,SAASA,2BACdC,UAAA,EACAC,YAAA,EACqB;EACrB,IAAID,UAAA,KAAe,YAAYC,YAAA,EAAc;IAC3C,OAAO;EACT;EACA,OAAOD,UAAA;AACT;AAEA,SAASE,iBACPC,QAAA,EACAC,QAAA,EACuC;EACvC,IAAI,CAACD,QAAA,EAAU,OAAOC,QAAA;EACtB,OAAO,UAACC,IAAS;IACnB,IAAAC,SAAA;IAMO,OAAS,CAAAA,SAAA,GAAAH,QAAA,CAAAE,IACd,WACA,IAAAC,SACqC,cAAAA,SAAA,GAAAF,QAAA,CAAAC,IAAA;EACrC;AAEA;AACA,SAAIE,wBAAoBA,CAAAC,UAAY,EAAOC,SAAA;EAE3C,KAAAD,UAAwC,IAAGC,SAAA,KAAW,iBAAAD,UAAA;EACtD,IAAAE,QAAM,GAAAF,UAAW,CAAAE,QAAc;EAC/B,WAAMA,QAAa,eAAc,SAAAF,UAAY;EAE7C,IAAIG,IAAA;IACF,GAAAH;EAAc;EACD,IACXI,QAAA,GAAAH,SAAA,eAAAA,SAAA;EAAA,IACFI,UAAA,GAAAJ,SAAA,iBAAAA,SAAA;EACF,IAAAG,QAAA;IACAD,IAAI,CAAAG,MAAA,GAAYZ,gBAAA,CAAAM,UAAA,CAAAM,MAAA,EAAAJ,QAAA;EACd;EAAgB,IACdG,UAAA,EAAW;IAAAF,IACX,CAAAI,QAAA,GAAAb,gBAAA,CAAAM,UAAA,CAAAO,QAAA,EAAAL,QAAA;EAAA;EAEJ,OAAAC,IAAA;AACA;AACF,S","ignoreList":[]}

package/dist/esm/FormGrid.mjs

@@ -1,28 +1,106 @@
-import { Children } from "react";
-import { XStack, YStack, isWeb } from "tamagui";
+import { Children, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { XStack, YStack, isWeb, useMedia } from "tamagui";
 import { jsx } from "react/jsx-runtime";
+const FORM_GRID_COLLAPSE_WIDTH = 480;
+function resolveWideColumns(columns, maxColumns) {
+  return Math.min(columns, maxColumns);
+}
 function FormGrid({
-  columns = 2,
+  columns = 1,
+  maxColumns = 2,
   gap = 16,
   children
 }) {
+  const wideColumns = resolveWideColumns(columns, maxColumns);
   if (isWeb) {
-    return /* @__PURE__ */jsx("div", {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`
-      },
+    return /* @__PURE__ */jsx(FormGridWeb, {
+      columns: wideColumns,
+      maxColumns,
+      gap,
       children
     });
   }
+  return /* @__PURE__ */jsx(FormGridNative, {
+    columns: wideColumns,
+    gap,
+    children
+  });
+}
+function FormGridWeb({
+  columns,
+  maxColumns,
+  gap,
+  children
+}) {
+  const ref = useRef(null);
+  const [containerWide, setContainerWide] = useState(true);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || columns <= 1) {
+      setContainerWide(true);
+      return;
+    }
+    const update = width => {
+      setContainerWide(width >= FORM_GRID_COLLAPSE_WIDTH);
+    };
+    update(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") {
+      const onResize = () => update(el.getBoundingClientRect().width);
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }
+    const ro = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? el.getBoundingClientRect().width;
+      update(width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [columns]);
+  const effectiveColumns = columns <= 1 || !containerWide ? 1 : columns;
+  const style = {
+    display: "grid",
+    gap: `${gap}px`,
+    gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
+    // Enable container queries for consumers / CSS extensions (DG-FORM-09).
+    containerType: columns > 1 ? "inline-size" : void 0
+  };
+  return /* @__PURE__ */jsx("div", {
+    ref,
+    "data-mpo-form-grid": "",
+    "data-columns": effectiveColumns,
+    "data-max-columns": maxColumns,
+    "data-requested-columns": columns,
+    style,
+    children
+  });
+}
+function FormGridNative({
+  columns,
+  gap,
+  children
+}) {
+  const media = useMedia();
+  const canUseDomResize = typeof window !== "undefined" && typeof window.addEventListener === "function" && typeof window.innerWidth === "number";
+  const [domViewportWide, setDomViewportWide] = useState(() => canUseDomResize ? window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH : true);
+  useEffect(() => {
+    if (!canUseDomResize) return;
+    const handler = () => setDomViewportWide(window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH);
+    handler();
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, [canUseDomResize]);
+  const viewportWide = canUseDomResize ? domViewportWide : media.gtSm === true;
+  const effectiveColumns = columns <= 1 || !viewportWide ? 1 : columns;
   const childArray = Children.toArray(children);
   const rows = [];
-  for (let i = 0; i < childArray.length; i += columns) {
-    rows.push(childArray.slice(i, i + columns));
+  for (let i = 0; i < childArray.length; i += effectiveColumns) {
+    rows.push(childArray.slice(i, i + effectiveColumns));
   }
   return /* @__PURE__ */jsx(YStack, {
     gap,
+    "data-columns": effectiveColumns,
+    "data-max-columns": columns,
+    "data-requested-columns": columns,
     children: rows.map((row, rowIndex) => /* @__PURE__ */jsx(XStack, {
       gap,
       children: row.map((child, colIndex) => /* @__PURE__ */jsx(YStack, {
@@ -32,5 +110,5 @@ function FormGrid({
     }, rowIndex))
   });
 }
-export { FormGrid };
+export { FORM_GRID_COLLAPSE_WIDTH, FormGrid };
 //# sourceMappingURL=FormGrid.mjs.map

package/dist/esm/FormGrid.mjs.map

@@ -1 +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":[]}
+{"version":3,"names":["Children","useEffect","useLayoutEffect","useRef","useState","XStack","YStack","isWeb","useMedia","jsx","FORM_GRID_COLLAPSE_WIDTH","resolveWideColumns","columns","maxColumns","Math","min","FormGrid","gap","children","wideColumns","FormGridWeb","FormGridNative","ref","containerWide","setContainerWide","el","current","update","width","getBoundingClientRect","ResizeObserver","onResize","window","addEventListener","removeEventListener","ro","entries","contentRect","observe","disconnect","effectiveColumns","style","display","gridTemplateColumns","containerType","media","canUseDomResize","innerWidth","domViewportWide","setDomViewportWide","handler","viewportWide","gtSm","childArray","toArray","rows","i","length","push","slice","map","row","rowIndex","child","colIndex","flex"],"sources":["../../src/FormGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/FormGrid.native.js

@@ -1,29 +1,123 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from "react";
-import { XStack, YStack, isWeb } from "tamagui";
+import { Children, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { XStack, YStack, isWeb, useMedia } from "tamagui";
+var FORM_GRID_COLLAPSE_WIDTH = 480;
+function resolveWideColumns(columns, maxColumns) {
+  return Math.min(columns, maxColumns);
+}
 function FormGrid(param) {
   var {
-    columns = 2,
+    columns = 1,
+    maxColumns = 2,
     gap = 16,
     children
   } = param;
+  var wideColumns = resolveWideColumns(columns, maxColumns);
   if (isWeb) {
-    return /* @__PURE__ */_jsx("div", {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`
-      },
+    return /* @__PURE__ */_jsx(FormGridWeb, {
+      columns: wideColumns,
+      maxColumns,
+      gap,
       children
     });
   }
+  return /* @__PURE__ */_jsx(FormGridNative, {
+    columns: wideColumns,
+    gap,
+    children
+  });
+}
+function FormGridWeb(param) {
+  var {
+    columns,
+    maxColumns,
+    gap,
+    children
+  } = param;
+  var ref = useRef(null);
+  var [containerWide, setContainerWide] = useState(true);
+  useLayoutEffect(function () {
+    var el = ref.current;
+    if (!el || columns <= 1) {
+      setContainerWide(true);
+      return;
+    }
+    var update = function update2(width) {
+      setContainerWide(width >= FORM_GRID_COLLAPSE_WIDTH);
+    };
+    update(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") {
+      var onResize = function onResize2() {
+        return update(el.getBoundingClientRect().width);
+      };
+      window.addEventListener("resize", onResize);
+      return function () {
+        return window.removeEventListener("resize", onResize);
+      };
+    }
+    var ro = new ResizeObserver(function (entries) {
+      var _ref;
+      var _entries_;
+      var width = (_ref = (_entries_ = entries[0]) === null || _entries_ === void 0 ? void 0 : _entries_.contentRect.width) !== null && _ref !== void 0 ? _ref : el.getBoundingClientRect().width;
+      update(width);
+    });
+    ro.observe(el);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [columns]);
+  var effectiveColumns = columns <= 1 || !containerWide ? 1 : columns;
+  var style = {
+    display: "grid",
+    gap: `${gap}px`,
+    gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
+    // Enable container queries for consumers / CSS extensions (DG-FORM-09).
+    containerType: columns > 1 ? "inline-size" : void 0
+  };
+  return /* @__PURE__ */_jsx("div", {
+    ref,
+    "data-mpo-form-grid": "",
+    "data-columns": effectiveColumns,
+    "data-max-columns": maxColumns,
+    "data-requested-columns": columns,
+    style,
+    children
+  });
+}
+function FormGridNative(param) {
+  var {
+    columns,
+    gap,
+    children
+  } = param;
+  var media = useMedia();
+  var canUseDomResize = typeof window !== "undefined" && typeof window.addEventListener === "function" && typeof window.innerWidth === "number";
+  var [domViewportWide, setDomViewportWide] = useState(function () {
+    return canUseDomResize ? window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH : true;
+  });
+  useEffect(function () {
+    if (!canUseDomResize) return;
+    var handler = function handler2() {
+      return setDomViewportWide(window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH);
+    };
+    handler();
+    window.addEventListener("resize", handler);
+    return function () {
+      return window.removeEventListener("resize", handler);
+    };
+  }, [canUseDomResize]);
+  var viewportWide = canUseDomResize ? domViewportWide : media.gtSm === true;
+  var effectiveColumns = columns <= 1 || !viewportWide ? 1 : columns;
   var childArray = Children.toArray(children);
   var rows = [];
-  for (var i = 0; i < childArray.length; i += columns) {
-    rows.push(childArray.slice(i, i + columns));
+  for (var i = 0; i < childArray.length; i += effectiveColumns) {
+    rows.push(childArray.slice(i, i + effectiveColumns));
   }
   return /* @__PURE__ */_jsx(YStack, {
     gap,
+    "data-columns": effectiveColumns,
+    "data-max-columns": columns,
+    "data-requested-columns": columns,
     children: rows.map(function (row, rowIndex) {
       return /* @__PURE__ */_jsx(XStack, {
         gap,
@@ -37,5 +131,5 @@ function FormGrid(param) {
     })
   });
 }
-export { FormGrid };
+export { FORM_GRID_COLLAPSE_WIDTH, FormGrid };
 //# sourceMappingURL=FormGrid.native.js.map

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

@@ -1 +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":[]}
+{"version":3,"names":["jsx","_jsx","Children","useEffect","useLayoutEffect","useRef","useState","XStack","YStack","isWeb","useMedia","FORM_GRID_COLLAPSE_WIDTH","resolveWideColumns","columns","maxColumns","Math","min","FormGrid","param","gap","children","wideColumns","FormGridWeb","FormGridNative","ref","containerWide","setContainerWide","el","current","update","update2","width","getBoundingClientRect","ResizeObserver","onResize","onResize2","window","addEventListener","removeEventListener","ro","entries","_ref","_entries_","contentRect","observe","disconnect","effectiveColumns","style","display","gridTemplateColumns","containerType","media","canUseDomResize","innerWidth","domViewportWide","setDomViewportWide","handler","handler2","viewportWide","gtSm","childArray","toArray","rows","i","length","push","slice"],"sources":["../../src/FormGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/FormSection.mjs

@@ -0,0 +1,77 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, YStack, isWeb } from "tamagui";
+import { formReadableMaxWidth } from "./formSpacing.mjs";
+import { formFieldGap, formReadableMaxWidth as formReadableMaxWidth2, formSectionGap } from "./formSpacing.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormSection({
+  label,
+  children,
+  maxWidth = formReadableMaxWidth,
+  gap,
+  testID,
+  fieldset = true
+}) {
+  const useFieldset = fieldset && isWeb;
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const resolvedGap = gap ?? knobProps.gap.gap;
+  return /* @__PURE__ */jsxs(YStack, {
+    ...(useFieldset ? {
+      render: "fieldset"
+    } : {}),
+    "data-mpo-form-section": "",
+    "data-mpo-fieldset": useFieldset ? "" : void 0,
+    "data-field-gap": String(resolvedGap),
+    "data-testid": testID,
+    gap: resolvedGap,
+    width: "100%",
+    maxWidth: maxWidth === "fluid" ? void 0 : maxWidth,
+    alignSelf: maxWidth === "fluid" ? void 0 : "flex-start",
+    ...(useFieldset ? {
+      style: {
+        borderWidth: 0,
+        margin: 0,
+        minWidth: 0,
+        padding: 0
+      }
+    } : {}),
+    children: [label ? useFieldset ? /* @__PURE__ */jsx(Text, {
+      render: "legend",
+      fontWeight: "600",
+      fontSize: "$5",
+      style: {
+        padding: 0,
+        marginBottom: 0,
+        float: "left",
+        width: "100%"
+      },
+      children: label
+    }) : /* @__PURE__ */jsx(Text, {
+      fontWeight: "600",
+      fontSize: "$5",
+      role: "heading",
+      "aria-level": 3,
+      children: label
+    }) : null, children]
+  });
+}
+const Fieldset = FormSection;
+function FormSectionStack({
+  children,
+  gap
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const resolvedGap = gap ?? knobProps.gapLg.gap;
+  return /* @__PURE__ */jsx(YStack, {
+    "data-mpo-form-section-stack": "",
+    "data-section-gap": String(resolvedGap),
+    gap: resolvedGap,
+    width: "100%",
+    children
+  });
+}
+export { Fieldset, FormSection, FormSectionStack, formFieldGap, formReadableMaxWidth2 as formReadableMaxWidth, formSectionGap };
+//# sourceMappingURL=FormSection.mjs.map

package/dist/esm/FormSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","Text","YStack","isWeb","formReadableMaxWidth","formFieldGap","formReadableMaxWidth2","formSectionGap","jsx","jsxs","FormSection","label","children","maxWidth","gap","testID","fieldset","useFieldset","knobProps","resolvedGap","render","String","width","alignSelf","style","borderWidth","margin","minWidth","padding","fontWeight","fontSize","marginBottom","float","role","Fieldset","FormSectionStack","gapLg"],"sources":["../../src/FormSection.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,gBAAA,QAAwB;AACjC,SAASC,IAAA,EAAMC,MAAA,EAAQC,KAAA,QAAa;AACpC,SAASC,oBAAA,QAA4B;AA8HrC,SAASC,YAAA,EAAcD,oBAAA,IAAAE,qBAAA,EAAsBC,cAAA,QAAsB;AA7E/D,SAwBMC,GAAA,EAxBNC,IAAA;AAbG,SAASC,YAAY;EAC1BC,KAAA;EACAC,QAAA;EACAC,QAAA,GAAWT,oBAAA;EACXU,GAAA;EACAC,MAAA;EACAC,QAAA,GAAW;AACb,GAAqB;EACnB,MAAMC,WAAA,GAAcD,QAAA,IAAYb,KAAA;EAChC,MAAM;IAAEe;EAAU,IAAIlB,gBAAA,CAAiB;EACvC,MAAMmB,WAAA,GAAcL,GAAA,IAAOI,SAAA,CAAUJ,GAAA,CAAIA,GAAA;EAEzC,OACE,eAAAL,IAAA,CAACP,MAAA;IACE,IAAIe,WAAA,GAAc;MAAEG,MAAA,EAAQ;IAAoB,IAAI,CAAC;IACtD,yBAAsB;IACtB,qBAAmBH,WAAA,GAAc,KAAK;IACtC,kBAAgBI,MAAA,CAAOF,WAAW;IAClC,eAAaJ,MAAA;IACbD,GAAA,EAAKK,WAAA;IACLG,KAAA,EAAM;IACNT,QAAA,EAAUA,QAAA,KAAa,UAAU,SAAYA,QAAA;IAC7CU,SAAA,EAAWV,QAAA,KAAa,UAAU,SAAY;IAE7C,IAAII,WAAA,GACD;MACEO,KAAA,EAAO;QACLC,WAAA,EAAa;QACbC,MAAA,EAAQ;QACRC,QAAA,EAAU;QACVC,OAAA,EAAS;MACX;IACF,IACA,CAAC;IAEJhB,QAAA,GAAAD,KAAA,GACCM,WAAA,GACE,eAAAT,GAAA,CAACP,IAAA;MACCmB,MAAA,EAAO;MACPS,UAAA,EAAW;MACXC,QAAA,EAAS;MAETN,KAAA,EAAO;QAAEI,OAAA,EAAS;QAAGG,YAAA,EAAc;QAAGC,KAAA,EAAO;QAAQV,KAAA,EAAO;MAAO;MAElEV,QAAA,EAAAD;IAAA,CACH,IAEA,eAAAH,GAAA,CAACP,IAAA;MAAK4B,UAAA,EAAW;MAAMC,QAAA,EAAS;MAAKG,IAAA,EAAK;MAAU,cAAY;MAC7DrB,QAAA,EAAAD;IAAA,CACH,IAEA,MACHC,QAAA;EAAA,CACH;AAEJ;AAMO,MAAMsB,QAAA,GAAWxB,WAAA;AAcjB,SAASyB,iBAAiB;EAAEvB,QAAA;EAAUE;AAAI,GAA0B;EACzE,MAAM;IAAEI;EAAU,IAAIlB,gBAAA,CAAiB;EACvC,MAAMmB,WAAA,GAAcL,GAAA,IAAOI,SAAA,CAAUkB,KAAA,CAAMtB,GAAA;EAC3C,OACE,eAAAN,GAAA,CAACN,MAAA;IACC,+BAA4B;IAC5B,oBAAkBmB,MAAA,CAAOF,WAAW;IACpCL,GAAA,EAAKK,WAAA;IACLG,KAAA,EAAM;IAELV;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/FormSection.native.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, YStack, isWeb } from "tamagui";
+import { formReadableMaxWidth } from "./formSpacing.native.js";
+import { formFieldGap, formReadableMaxWidth as formReadableMaxWidth2, formSectionGap } from "./formSpacing.native.js";
+function FormSection(param) {
+  var {
+    label,
+    children,
+    maxWidth = formReadableMaxWidth,
+    gap,
+    testID,
+    fieldset = true
+  } = param;
+  var useFieldset = fieldset && isWeb;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;
+  return /* @__PURE__ */_jsxs(YStack, {
+    ...(useFieldset ? {
+      render: "fieldset"
+    } : {}),
+    "data-mpo-form-section": "",
+    "data-mpo-fieldset": useFieldset ? "" : void 0,
+    "data-field-gap": String(resolvedGap),
+    "data-testid": testID,
+    gap: resolvedGap,
+    width: "100%",
+    maxWidth: maxWidth === "fluid" ? void 0 : maxWidth,
+    alignSelf: maxWidth === "fluid" ? void 0 : "flex-start",
+    // Reset browser fieldset chrome; we own spacing via tokens.
+    ...(useFieldset ? {
+      style: {
+        borderWidth: 0,
+        margin: 0,
+        minWidth: 0,
+        padding: 0
+      }
+    } : {}),
+    children: [label ? useFieldset ? /* @__PURE__ */_jsx(Text, {
+      render: "legend",
+      fontWeight: "600",
+      fontSize: "$5",
+      // legend is inline by default; stretch to a full heading row
+      style: {
+        padding: 0,
+        marginBottom: 0,
+        float: "left",
+        width: "100%"
+      },
+      children: label
+    }) : /* @__PURE__ */_jsx(Text, {
+      fontWeight: "600",
+      fontSize: "$5",
+      role: "heading",
+      "aria-level": 3,
+      children: label
+    }) : null, children]
+  });
+}
+var Fieldset = FormSection;
+function FormSectionStack(param) {
+  var {
+    children,
+    gap
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gapLg.gap;
+  return /* @__PURE__ */_jsx(YStack, {
+    "data-mpo-form-section-stack": "",
+    "data-section-gap": String(resolvedGap),
+    gap: resolvedGap,
+    width: "100%",
+    children
+  });
+}
+export { Fieldset, FormSection, FormSectionStack, formFieldGap, formReadableMaxWidth2 as formReadableMaxWidth, formSectionGap };
+//# sourceMappingURL=FormSection.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useResolvedKnobs","Text","YStack","isWeb","formReadableMaxWidth","formFieldGap","formReadableMaxWidth2","formSectionGap","FormSection","param","label","children","maxWidth","gap","testID","fieldset","useFieldset","knobProps","resolvedGap","render","String","width","alignSelf","style","borderWidth","margin","minWidth","padding","fontWeight","fontSize","marginBottom","float","role","Fieldset","FormSectionStack","gapLg"],"sources":["../../src/FormSection.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAwB;AACjC,SAASC,gBAAc,kCAAa;AACpC,SAASC,IAAA,EAAAC,MAAA,EAAAC,KAAA,iBAA4B;AA8HrC,SAASC,oBAAc;AA7EnB,SAwBMC,YAxBN,EAAAD,oBAAA,IAAAE,qBAAA,EAAAC,cAAA;AAbG,SAASC,YAAYC,KAAA;EAC1B;IAAAC,KAAA;IAAAC,QAAA;IAAAC,QAAA,GAAAR,oBAAA;IAAAS,GAAA;IAAAC,MAAA;IAAAC,QAAA;EAAA,IAAAN,KAAA;EACA,IAAAO,WAAA,GAAAD,QAAA,IAAAZ,KAAA;EACA;IAAAc;EAAW,IAAAjB,gBAAA;EACX,IAAAkB,WAAA,GAAAL,GAAA,aAAAA,GAAA,cAAAA,GAAA,GAAAI,SAAA,CAAAJ,GAAA,CAAAA,GAAA;EACA,sBAAAd,KAAA,CAAAG,MAAA;IACA,IAAAc,WAAW;MACQG,MAAA;IACnB,IAAM;IACN,uBAAsB;IACtB,mBAAoB,EAAAH,WAAO,GAAU,KAAI;IAEzC,gBACE,EAAAI,MAAA,CAAAF,WAAA;IAAC,eAAAJ,MAAA;IAAAD,GAAA,EAAAK,WAAA;IAAAG,KACM;IAAiDT,QACtD,EAAAA,QAAA,YAAsB,YAAAA,QAAA;IAAAU,SACtB,EAAAV,QAAA,KAAmB,eAAc,IAAK;IAAA;IACJ,IAClCI,WAAA,GAAa;MACbO,KAAK;QACLC,WAAM;QACNC,MAAA,EAAU;QACVC,QAAA,EAAW;QAEVC,OAAI;MACD;IACS,MACL;IAAahB,QACb,GAAQD,KACR,GAAAM,WAAU,kBAAAnB,IAAA,CAAAI,IAAA;MAAAkB,MACV,UAAS;MACXS,UAAA;MACFC,QACC;MAEJ;MAAAN,KAAA;QAEII,OAAA;QAAAG,YAAA;QAAAC,KACC,QAAO;QAAAV,KACP;MAAW;MACFV,QAET,EAAAD;IAAmE,oBAElEb,IAAA,CAAAI,IAAA;MAAA2B,UAAA;MACHC,QAEA;MAKHG,IAAA;MAAA;MAAArB,QAAA,EAAAD;IACH,WAEJC,QAAA;EAoBO;AACL;AACA,IAAAsB,QAAM,GAAAzB,WAAc;AACpB,SACE0B,iBAAAzB,KAAA;EAAA,IAAC;IAAAE,QAAA;IAAAE;EAAA,IAAAJ,KAAA;EAAA;IAAAQ;EAAA,IAAAjB,gBAAA;EAAA,IACCkB,WAAA,GAAAL,GAAA,aAAAA,GAA4B,cAAAA,GAAA,GAAAI,SAAA,CAAAkB,KAAA,CAAAtB,GAAA;EAAA,OAC5B,eAAAhB,IAAkB,CAAAK,MAAO;IAAW,6BAC/B;IAAA,kBACC,EAAAkB,MAAA,CAAAF,WAAA;IAAAL,GAEL,EAAAK,WAAA;IAAAG,KAAA;IACHV;EAEJ","ignoreList":[]}