@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/FieldDemo.native.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button, Field, FieldStyledContext, Form, Input, Paragraph, styled } from "tamagui";
+
+var DemoField = styled(Field, { gap: "2" });
+var DemoLabel = styled(Field.Label, {
+	color: "color11",
+	fontWeight: "500"
+});
+var DemoDescription = styled(Field.Description, {
+	color: "color9",
+	fontSize: "2"
+});
+var DemoError = styled(Field.Error, {
+	color: "red10",
+	fontSize: "2"
+});
+var DemoInput = styled(Input, {
+	context: FieldStyledContext,
+	variants: {
+		valid: { true: {} },
+		invalid: { true: { borderColor: "red9" } },
+		touched: { true: {} },
+		dirty: { true: {} },
+		filled: { true: {} },
+		focused: { true: {} }
+	}
+});
+function FieldInput(props) {
+	var field = Field.useFieldControl();
+	var controlRef = React.useRef(null);
+	var _props_value, _ref;
+	var valueRef = React.useRef((_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : props.defaultValue) !== null && _ref !== void 0 ? _ref : "");
+	React.useEffect(function() {
+		return field.registerControl({
+			id: field.ariaProps.id,
+			controlRef,
+			inputRef: controlRef,
+			getValue: function() {
+				return valueRef.current;
+			},
+			required: props.required,
+			disabled: props.disabled
+		});
+	}, [
+		field.ariaProps.id,
+		field.registerControl,
+		props.disabled,
+		props.required
+	]);
+	return /* @__PURE__ */ jsx(DemoInput, {
+		...props,
+		...field.ariaProps,
+		...field.dataProps,
+		ref: controlRef,
+		name: field.name,
+		disabled: field.disabled || props.disabled,
+		onFocus: function(event) {
+			var _props_onFocus;
+			field.onFocus();
+			(_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 ? void 0 : _props_onFocus.call(props, event);
+		},
+		onBlur: function(event) {
+			var _props_onBlur;
+			field.onBlur(valueRef.current);
+			(_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, event);
+		},
+		onChange: function(event) {
+			var _props_onChange;
+			valueRef.current = event.target.value;
+			field.onChange(event.target.value);
+			(_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, event);
+		}
+	});
+}
+function FieldDemo() {
+	var [status, setStatus] = React.useState("Fill out the form");
+	return /* @__PURE__ */ jsxs(Form, {
+		width: 360,
+		maxW: "90%",
+		gap: "4",
+		p: "5",
+		borderWidth: 1,
+		borderColor: "border-color",
+		rounded: "7",
+		bg: "color2",
+		boxShadow: "0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)",
+		onSubmit: function(values) {
+			setStatus(`Welcome, ${String(values.name)}`);
+		},
+		children: [
+			/* @__PURE__ */ jsxs(DemoField, {
+				name: "name",
+				children: [
+					/* @__PURE__ */ jsx(DemoLabel, { children: "Name" }),
+					/* @__PURE__ */ jsx(FieldInput, {
+						placeholder: "Ada Lovelace",
+						required: true
+					}),
+					/* @__PURE__ */ jsx(DemoDescription, { children: "This is shown on your profile." }),
+					/* @__PURE__ */ jsx(DemoError, {})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DemoField, {
+				name: "email",
+				validationMode: "onBlur",
+				validate: function(value) {
+					return String(value).endsWith("@example.com") ? null : "Use an @example.com address";
+				},
+				children: [
+					/* @__PURE__ */ jsx(DemoLabel, { children: "Email" }),
+					/* @__PURE__ */ jsx(FieldInput, {
+						type: "email",
+						placeholder: "ada@example.com",
+						required: true
+					}),
+					/* @__PURE__ */ jsx(DemoError, {})
+				]
+			}),
+			/* @__PURE__ */ jsx(Form.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					self: "flex-end",
+					height: 40,
+					px: "5",
+					rounded: "5",
+					bg: "color11 hover:color10",
+					color: "color1",
+					fontSize: "2",
+					fontWeight: "500",
+					children: "Create account"
+				})
+			}),
+			/* @__PURE__ */ jsx(Paragraph, {
+				color: "color9",
+				size: "2",
+				children: status
+			})
+		]
+	});
+}
+
+export { FieldDemo, FieldInput };
+//# sourceMappingURL=FieldDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDemo.native.js","names":[],"sources":["esm/FieldDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport * as React from \"react\";\nimport { Button, Field, FieldStyledContext, Form, Input, Paragraph, styled } from \"tamagui\";\nvar DemoField = styled(Field, {\n  gap: \"2\"\n});\nvar DemoLabel = styled(Field.Label, {\n  color: \"color11\",\n  fontWeight: \"500\"\n});\nvar DemoDescription = styled(Field.Description, {\n  color: \"color9\",\n  fontSize: \"2\"\n});\nvar DemoError = styled(Field.Error, {\n  color: \"red10\",\n  fontSize: \"2\"\n});\nvar DemoInput = styled(Input, {\n  context: FieldStyledContext,\n  variants: {\n    valid: {\n      true: {}\n    },\n    invalid: {\n      true: {\n        borderColor: \"red9\"\n      }\n    },\n    touched: {\n      true: {}\n    },\n    dirty: {\n      true: {}\n    },\n    filled: {\n      true: {}\n    },\n    focused: {\n      true: {}\n    }\n  }\n});\nfunction FieldInput(props) {\n  var field = Field.useFieldControl();\n  var controlRef = React.useRef(null);\n  var _props_value, _ref;\n  var valueRef = React.useRef((_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : props.defaultValue) !== null && _ref !== void 0 ? _ref : \"\");\n  React.useEffect(function() {\n    return field.registerControl({\n      id: field.ariaProps.id,\n      controlRef,\n      inputRef: controlRef,\n      getValue: function() {\n        return valueRef.current;\n      },\n      required: props.required,\n      disabled: props.disabled\n    });\n  }, [\n    field.ariaProps.id,\n    field.registerControl,\n    props.disabled,\n    props.required\n  ]);\n  return /* @__PURE__ */ _jsx(DemoInput, {\n    ...props,\n    ...field.ariaProps,\n    ...field.dataProps,\n    ref: controlRef,\n    name: field.name,\n    disabled: field.disabled || props.disabled,\n    onFocus: function(event) {\n      var _props_onFocus;\n      field.onFocus();\n      (_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 ? void 0 : _props_onFocus.call(props, event);\n    },\n    onBlur: function(event) {\n      var _props_onBlur;\n      field.onBlur(valueRef.current);\n      (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, event);\n    },\n    onChange: function(event) {\n      var _props_onChange;\n      valueRef.current = event.target.value;\n      field.onChange(event.target.value);\n      (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, event);\n    }\n  });\n}\nfunction FieldDemo() {\n  var [status, setStatus] = React.useState(\"Fill out the form\");\n  return /* @__PURE__ */ _jsxs(Form, {\n    width: 360,\n    maxW: \"90%\",\n    gap: \"4\",\n    p: \"5\",\n    borderWidth: 1,\n    borderColor: \"border-color\",\n    rounded: \"7\",\n    bg: \"color2\",\n    boxShadow: \"0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)\",\n    onSubmit: function(values) {\n      setStatus(`Welcome, ${String(values.name)}`);\n    },\n    children: [\n      /* @__PURE__ */ _jsxs(DemoField, {\n        name: \"name\",\n        children: [\n          /* @__PURE__ */ _jsx(DemoLabel, {\n            children: \"Name\"\n          }),\n          /* @__PURE__ */ _jsx(FieldInput, {\n            placeholder: \"Ada Lovelace\",\n            required: true\n          }),\n          /* @__PURE__ */ _jsx(DemoDescription, {\n            children: \"This is shown on your profile.\"\n          }),\n          /* @__PURE__ */ _jsx(DemoError, {})\n        ]\n      }),\n      /* @__PURE__ */ _jsxs(DemoField, {\n        name: \"email\",\n        validationMode: \"onBlur\",\n        validate: function(value) {\n          return String(value).endsWith(\"@example.com\") ? null : \"Use an @example.com address\";\n        },\n        children: [\n          /* @__PURE__ */ _jsx(DemoLabel, {\n            children: \"Email\"\n          }),\n          /* @__PURE__ */ _jsx(FieldInput, {\n            type: \"email\",\n            placeholder: \"ada@example.com\",\n            required: true\n          }),\n          /* @__PURE__ */ _jsx(DemoError, {})\n        ]\n      }),\n      /* @__PURE__ */ _jsx(Form.Trigger, {\n        asChild: true,\n        children: /* @__PURE__ */ _jsx(Button, {\n          self: \"flex-end\",\n          height: 40,\n          px: \"5\",\n          rounded: \"5\",\n          bg: \"color11 hover:color10\",\n          color: \"color1\",\n          fontSize: \"2\",\n          fontWeight: \"500\",\n          children: \"Create account\"\n        })\n      }),\n      /* @__PURE__ */ _jsx(Paragraph, {\n        color: \"color9\",\n        size: \"2\",\n        children: status\n      })\n    ]\n  });\n}\nexport {\n  FieldDemo,\n  FieldInput\n};\n//# sourceMappingURL=FieldDemo.js.map\n"],"mappings":"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"}

package/dist/esm/FormsDemo.mjs

@@ -1,52 +1,82 @@
-import React from "react";
-import { Button, Form, Spinner, AnimatePresence, YStack } from "tamagui";
+import * as React from "react";
+import { Button, Field, Form, Paragraph, Spinner, YStack } from "tamagui";
+import { FieldInput } from "./FieldDemo.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function FormsDemo(props) {
-  const [status, setStatus] = React.useState("off");
-  React.useEffect(() => {
-    if (status === "submitting") {
-      const timer = setTimeout(() => setStatus("off"), 2e3);
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [status]);
-  return /* @__PURE__ */jsx(Form, {
-    items: "center",
-    gap: "$2",
-    onSubmit: () => setStatus("submitting"),
-    borderWidth: 1,
-    rounded: "$4",
-    bg: "$color2",
-    borderColor: "$borderColor",
-    minW: 350,
-    p: "$6",
-    children: /* @__PURE__ */jsx(Form.Trigger, {
-      asChild: true,
-      disabled: status !== "off",
-      children: /* @__PURE__ */jsxs(YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */jsx(Button, {
-          children: "Submit"
-        }), /* @__PURE__ */jsx(YStack, {
-          width: "100%",
-          height: 40,
-          justifyContent: "center",
-          alignItems: "center",
-          children: /* @__PURE__ */jsx(AnimatePresence, {
-            children: status === "submitting" ? /* @__PURE__ */jsx(Spinner, {
-              transition: "medium",
-              enterStyle: {
-                opacity: 0
-              },
-              alignSelf: "center",
-              width: 8
-            }, "spinner") : null
-          })
-        })]
-      })
-    })
-  });
+
+function FormsDemo() {
+	const [status, setStatus] = React.useState("idle");
+	React.useEffect(() => {
+		if (status !== "submitting") {
+			return;
+		}
+		const timer = setTimeout(() => setStatus("idle"), 1200);
+		return () => clearTimeout(timer);
+	}, [status]);
+	return /* @__PURE__ */ jsxs(Form, {
+		width: 350,
+		maxW: "90%",
+		gap: "4",
+		borderWidth: 1,
+		rounded: "7",
+		bg: "color2",
+		borderColor: "border-color",
+		p: "6",
+		boxShadow: "0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)",
+		onSubmit: () => setStatus("submitting"),
+		children: [
+			/* @__PURE__ */ jsxs(Field, {
+				name: "email",
+				gap: "2",
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, {
+						color: "color11",
+						fontWeight: "500",
+						children: "Email"
+					}),
+					/* @__PURE__ */ jsx(FieldInput, {
+						type: "email",
+						placeholder: "ada@example.com",
+						required: true
+					}),
+					/* @__PURE__ */ jsx(Field.Description, {
+						color: "color9",
+						fontSize: "2",
+						children: "Form collects this value by field name."
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						color: "red10",
+						fontSize: "2"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Form.Trigger, {
+				asChild: true,
+				disabled: status !== "idle",
+				children: /* @__PURE__ */ jsx(Button, {
+					self: "flex-end",
+					height: 40,
+					px: "5",
+					rounded: "5",
+					bg: "color11 hover:color10",
+					color: "color1",
+					fontSize: "2",
+					fontWeight: "500",
+					children: "Submit"
+				})
+			}),
+			/* @__PURE__ */ jsx(YStack, {
+				height: 24,
+				items: "center",
+				justify: "center",
+				children: status === "submitting" ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : /* @__PURE__ */ jsx(Paragraph, {
+					color: "color9",
+					size: "2",
+					children: "Ready"
+				})
+			})
+		]
+	});
 }
+
 export { FormsDemo };
 //# sourceMappingURL=FormsDemo.mjs.map

package/dist/esm/FormsDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","Button","Form","Spinner","AnimatePresence","YStack","jsx","jsxs","FormsDemo","props","status","setStatus","useState","useEffect","timer","setTimeout","clearTimeout","items","gap","onSubmit","borderWidth","rounded","bg","borderColor","minW","p","children","Trigger","asChild","disabled","width","height","justifyContent","alignItems","transition","enterStyle","opacity","alignSelf"],"sources":["../../src/FormsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAElB,SACEC,MAAA,EACAC,IAAA,EAEAC,OAAA,EACAC,eAAA,EAKAC,MAAA,QACK;AA2BC,SACEC,GAAA,EADFC,IAAA;AAzBD,SAASC,UAAUC,KAAA,EAA6B;EACrD,MAAM,CAACC,MAAA,EAAQC,SAAS,IAAIX,KAAA,CAAMY,QAAA,CAA6C,KAAK;EAEpFZ,KAAA,CAAMa,SAAA,CAAU,MAAM;IACpB,IAAIH,MAAA,KAAW,cAAc;MAC3B,MAAMI,KAAA,GAAQC,UAAA,CAAW,MAAMJ,SAAA,CAAU,KAAK,GAAG,GAAI;MACrD,OAAO,MAAM;QACXK,YAAA,CAAaF,KAAK;MACpB;IACF;EACF,GAAG,CAACJ,MAAM,CAAC;EAEX,OACE,eAAAJ,GAAA,CAACJ,IAAA;IACCe,KAAA,EAAM;IACNC,GAAA,EAAI;IACJC,QAAA,EAAUA,CAAA,KAAMR,SAAA,CAAU,YAAY;IACtCS,WAAA,EAAa;IACbC,OAAA,EAAQ;IACRC,EAAA,EAAG;IACHC,WAAA,EAAY;IACZC,IAAA,EAAM;IACNC,CAAA,EAAE;IAEFC,QAAA,iBAAApB,GAAA,CAACJ,IAAA,CAAKyB,OAAA,EAAL;MAAaC,OAAA,EAAO;MAACC,QAAA,EAAUnB,MAAA,KAAW;MACzCgB,QAAA,iBAAAnB,IAAA,CAACF,MAAA;QAAOa,GAAA,EAAI;QACVQ,QAAA,kBAAApB,GAAA,CAACL,MAAA;UAAOyB,QAAA;QAAA,CAAM,GACd,eAAApB,GAAA,CAACD,MAAA;UAAOyB,KAAA,EAAM;UAAOC,MAAA,EAAQ;UAAIC,cAAA,EAAe;UAASC,UAAA,EAAW;UAClEP,QAAA,iBAAApB,GAAA,CAACF,eAAA;YACEsB,QAAA,EAAAhB,MAAA,KAAW,eACV,eAAAJ,GAAA,CAACH,OAAA;cACC+B,UAAA,EAAW;cACXC,UAAA,EAAY;gBAAEC,OAAA,EAAS;cAAE;cACzBC,SAAA,EAAU;cAEVP,KAAA,EAAO;YAAA,GADH,SAEN,IACE;UAAA,CACN;QAAA,CACF;MAAA,CACF;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"file":"FormsDemo.js","names":[],"sources":["esm/FormsDemo.js"],"sourcesContent":["import * as React from \"react\";\nimport { Button, Field, Form, Paragraph, Spinner, YStack } from \"tamagui\";\nimport { FieldInput } from \"./FieldDemo\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FormsDemo() {\n  const [status, setStatus] = React.useState(\"idle\");\n  React.useEffect(() => {\n    if (status !== \"submitting\") {\n      return;\n    }\n    const timer = setTimeout(() => setStatus(\"idle\"), 1200);\n    return () => clearTimeout(timer);\n  }, [status]);\n  return /* @__PURE__ */ jsxs(\n    Form,\n    {\n      width: 350,\n      maxW: \"90%\",\n      gap: \"4\",\n      borderWidth: 1,\n      rounded: \"7\",\n      bg: \"color2\",\n      borderColor: \"border-color\",\n      p: \"6\",\n      boxShadow: \"0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)\",\n      onSubmit: () => setStatus(\"submitting\"),\n      children: [\n        /* @__PURE__ */ jsxs(Field, { name: \"email\", gap: \"2\", children: [\n          /* @__PURE__ */ jsx(Field.Label, { color: \"color11\", fontWeight: \"500\", children: \"Email\" }),\n          /* @__PURE__ */ jsx(FieldInput, { type: \"email\", placeholder: \"ada@example.com\", required: true }),\n          /* @__PURE__ */ jsx(Field.Description, { color: \"color9\", fontSize: \"2\", children: \"Form collects this value by field name.\" }),\n          /* @__PURE__ */ jsx(Field.Error, { color: \"red10\", fontSize: \"2\" })\n        ] }),\n        /* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== \"idle\", children: /* @__PURE__ */ jsx(\n          Button,\n          {\n            self: \"flex-end\",\n            height: 40,\n            px: \"5\",\n            rounded: \"5\",\n            bg: \"color11 hover:color10\",\n            color: \"color1\",\n            fontSize: \"2\",\n            fontWeight: \"500\",\n            children: \"Submit\"\n          }\n        ) }),\n        /* @__PURE__ */ jsx(YStack, { height: 24, items: \"center\", justify: \"center\", children: status === \"submitting\" ? /* @__PURE__ */ jsx(Spinner, { size: \"small\" }) : /* @__PURE__ */ jsx(Paragraph, { color: \"color9\", size: \"2\", children: \"Ready\" }) })\n      ]\n    }\n  );\n}\nexport {\n  FormsDemo\n};\n//# sourceMappingURL=FormsDemo.js.map\n"],"mappings":";;;;;;AAIA,SAAS,YAAY;CACnB,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,MAAM;CACjD,MAAM,gBAAgB;EACpB,IAAI,WAAW,cAAc;GAC3B;EACF;EACA,MAAM,QAAQ,iBAAiB,UAAU,MAAM,GAAG,IAAI;EACtD,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,MAAM,CAAC;CACX,OAAuB,qBACrB,MACA;EACE,OAAO;EACP,MAAM;EACN,KAAK;EACL,aAAa;EACb,SAAS;EACT,IAAI;EACJ,aAAa;EACb,GAAG;EACH,WAAW;EACX,gBAAgB,UAAU,YAAY;EACtC,UAAU;GACQ,qBAAK,OAAO;IAAE,MAAM;IAAS,KAAK;IAAK,UAAU;KAC/C,oBAAI,MAAM,OAAO;MAAE,OAAO;MAAW,YAAY;MAAO,UAAU;KAAQ,CAAC;KAC3E,oBAAI,YAAY;MAAE,MAAM;MAAS,aAAa;MAAmB,UAAU;KAAK,CAAC;KACjF,oBAAI,MAAM,aAAa;MAAE,OAAO;MAAU,UAAU;MAAK,UAAU;KAA0C,CAAC;KAC9G,oBAAI,MAAM,OAAO;MAAE,OAAO;MAAS,UAAU;KAAI,CAAC;IACpE;GAAE,CAAC;GACa,oBAAI,KAAK,SAAS;IAAE,SAAS;IAAM,UAAU,WAAW;IAAQ,UAA0B,oBACxG,QACA;KACE,MAAM;KACN,QAAQ;KACR,IAAI;KACJ,SAAS;KACT,IAAI;KACJ,OAAO;KACP,UAAU;KACV,YAAY;KACZ,UAAU;IACZ,CACF;GAAE,CAAC;GACa,oBAAI,QAAQ;IAAE,QAAQ;IAAI,OAAO;IAAU,SAAS;IAAU,UAAU,WAAW,eAA+B,oBAAI,SAAS,EAAE,MAAM,QAAQ,CAAC,IAAoB,oBAAI,WAAW;KAAE,OAAO;KAAU,MAAM;KAAK,UAAU;IAAQ,CAAC;GAAE,CAAC;EACzP;CACF,CACF;AACF"}

package/dist/esm/FormsDemo.native.js

@@ -1,56 +1,88 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Button, Form, Spinner, AnimatePresence, YStack } from "tamagui";
-function FormsDemo(props) {
-  var [status, setStatus] = React.useState("off");
-  React.useEffect(function () {
-    if (status === "submitting") {
-      var timer = setTimeout(function () {
-        return setStatus("off");
-      }, 2e3);
-      return function () {
-        clearTimeout(timer);
-      };
-    }
-  }, [status]);
-  return /* @__PURE__ */_jsx(Form, {
-    items: "center",
-    gap: "$2",
-    onSubmit: function () {
-      return setStatus("submitting");
-    },
-    borderWidth: 1,
-    rounded: "$4",
-    bg: "$color2",
-    borderColor: "$borderColor",
-    minW: 350,
-    p: "$6",
-    children: /* @__PURE__ */_jsx(Form.Trigger, {
-      asChild: true,
-      disabled: status !== "off",
-      children: /* @__PURE__ */_jsxs(YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */_jsx(Button, {
-          children: "Submit"
-        }), /* @__PURE__ */_jsx(YStack, {
-          width: "100%",
-          height: 40,
-          justifyContent: "center",
-          alignItems: "center",
-          children: /* @__PURE__ */_jsx(AnimatePresence, {
-            children: status === "submitting" ? /* @__PURE__ */_jsx(Spinner, {
-              transition: "medium",
-              enterStyle: {
-                opacity: 0
-              },
-              alignSelf: "center",
-              width: 8
-            }, "spinner") : null
-          })
-        })]
-      })
-    })
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button, Field, Form, Paragraph, Spinner, YStack } from "tamagui";
+import { FieldInput } from "./FieldDemo.native.js";
+
+function FormsDemo() {
+	var [status, setStatus] = React.useState("idle");
+	React.useEffect(function() {
+		if (status !== "submitting") {
+			return;
+		}
+		var timer = setTimeout(function() {
+			return setStatus("idle");
+		}, 1200);
+		return function() {
+			return clearTimeout(timer);
+		};
+	}, [status]);
+	return /* @__PURE__ */ jsxs(Form, {
+		width: 350,
+		maxW: "90%",
+		gap: "4",
+		borderWidth: 1,
+		rounded: "7",
+		bg: "color2",
+		borderColor: "border-color",
+		p: "6",
+		boxShadow: "0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)",
+		onSubmit: function() {
+			return setStatus("submitting");
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Field, {
+				name: "email",
+				gap: "2",
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, {
+						color: "color11",
+						fontWeight: "500",
+						children: "Email"
+					}),
+					/* @__PURE__ */ jsx(FieldInput, {
+						type: "email",
+						placeholder: "ada@example.com",
+						required: true
+					}),
+					/* @__PURE__ */ jsx(Field.Description, {
+						color: "color9",
+						fontSize: "2",
+						children: "Form collects this value by field name."
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						color: "red10",
+						fontSize: "2"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Form.Trigger, {
+				asChild: true,
+				disabled: status !== "idle",
+				children: /* @__PURE__ */ jsx(Button, {
+					self: "flex-end",
+					height: 40,
+					px: "5",
+					rounded: "5",
+					bg: "color11 hover:color10",
+					color: "color1",
+					fontSize: "2",
+					fontWeight: "500",
+					children: "Submit"
+				})
+			}),
+			/* @__PURE__ */ jsx(YStack, {
+				height: 24,
+				items: "center",
+				justify: "center",
+				children: status === "submitting" ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : /* @__PURE__ */ jsx(Paragraph, {
+					color: "color9",
+					size: "2",
+					children: "Ready"
+				})
+			})
+		]
+	});
 }
+
 export { FormsDemo };
 //# sourceMappingURL=FormsDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","Button","Form","Spinner","AnimatePresence","YStack","FormsDemo","props","status","setStatus","useState","useEffect","timer","setTimeout","clearTimeout","items","gap","onSubmit","borderWidth","rounded","bg","borderColor","minW","p","children","Trigger","asChild","disabled","width","height","justifyContent","alignItems","transition","enterStyle"],"sources":["../../src/FormsDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA;AAElB,OAAAC,KAAA;AAAA,SACEC,MAAA,EAAAC,IAAA,EAAAC,OAAA,EAAAC,eAAA,EAAAC,MAAA;AAAA,SACAC,UAAAC,KAAA;EAEA,KAAAC,MAAA,EAAAC,SAAA,IAAAT,KAAA,CAAAU,QAAA;EACAV,KAAA,CAAAW,SAAA;IAKA,IAAAH,MAAA;MAAA,IACKI,KAAA,GAAAC,UAAA;QA2BC,OAAAJ,SAAA;MAzBD,GAAS;MACd,OAAO,YAAQ;QAETK,YAAU,CAAAF,KAAM;MACpB;IACE;EACA,IACEJ,MAAA,CAAkB;EACpB,OACF,eAAAX,IAAA,CAAAK,IAAA;IACFa,KAAI,UAAO;IAEXC,GAAA,EACE;IAACC,QAAA,WAAAA,CAAA;MAAA,OAAAR,SAAA;IAAA;IACOS,WACF;IAAAC,OACJ,MAAU;IAA4BC,EACtC;IAAaC,WACL;IAAAC,IACR,EAAG;IAAAC,CAAA,EACH;IAAYC,QACN,iBAAA3B,IAAA,CAAAK,IAAA,CAAAuB,OAAA;MACNC,OAAE;MAEFC,QAAA,EAAAnB,MAAA;MAEIgB,QAAA,iBAACzB,KAAA,CAAOM,MAAA;QACRW,GAAA;QAGMQ,QAAC,kBAAA3B,IAAA,CAAAI,MAAA;UACCuB,QAAA;QAAW,EACX,EAAyB,eACf3B,IAAA,CAAAQ,MAAA;UAEVuB,KAAA,EAAO;UAAAC,MAAA;UADHC,cAAA;UAGJC,UAER;UAEJP,QAAA,iBAAA3B,IAAA,CAAAO,eAAA;YAAAoB,QAAA,EAAAhB,MAAA,mCAAAX,IAAA,CAAAM,OAAA;cACF6B,UAAA;cAEJC,UAAA","ignoreList":[]}
+{"version":3,"file":"FormsDemo.native.js","names":[],"sources":["esm/FormsDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport * as React from \"react\";\nimport { Button, Field, Form, Paragraph, Spinner, YStack } from \"tamagui\";\nimport { FieldInput } from \"./FieldDemo\";\nfunction FormsDemo() {\n  var [status, setStatus] = React.useState(\"idle\");\n  React.useEffect(function() {\n    if (status !== \"submitting\") {\n      return;\n    }\n    var timer = setTimeout(function() {\n      return setStatus(\"idle\");\n    }, 1200);\n    return function() {\n      return clearTimeout(timer);\n    };\n  }, [\n    status\n  ]);\n  return /* @__PURE__ */ _jsxs(Form, {\n    width: 350,\n    maxW: \"90%\",\n    gap: \"4\",\n    borderWidth: 1,\n    rounded: \"7\",\n    bg: \"color2\",\n    borderColor: \"border-color\",\n    p: \"6\",\n    boxShadow: \"0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)\",\n    onSubmit: function() {\n      return setStatus(\"submitting\");\n    },\n    children: [\n      /* @__PURE__ */ _jsxs(Field, {\n        name: \"email\",\n        gap: \"2\",\n        children: [\n          /* @__PURE__ */ _jsx(Field.Label, {\n            color: \"color11\",\n            fontWeight: \"500\",\n            children: \"Email\"\n          }),\n          /* @__PURE__ */ _jsx(FieldInput, {\n            type: \"email\",\n            placeholder: \"ada@example.com\",\n            required: true\n          }),\n          /* @__PURE__ */ _jsx(Field.Description, {\n            color: \"color9\",\n            fontSize: \"2\",\n            children: \"Form collects this value by field name.\"\n          }),\n          /* @__PURE__ */ _jsx(Field.Error, {\n            color: \"red10\",\n            fontSize: \"2\"\n          })\n        ]\n      }),\n      /* @__PURE__ */ _jsx(Form.Trigger, {\n        asChild: true,\n        disabled: status !== \"idle\",\n        children: /* @__PURE__ */ _jsx(Button, {\n          self: \"flex-end\",\n          height: 40,\n          px: \"5\",\n          rounded: \"5\",\n          bg: \"color11 hover:color10\",\n          color: \"color1\",\n          fontSize: \"2\",\n          fontWeight: \"500\",\n          children: \"Submit\"\n        })\n      }),\n      /* @__PURE__ */ _jsx(YStack, {\n        height: 24,\n        items: \"center\",\n        justify: \"center\",\n        children: status === \"submitting\" ? /* @__PURE__ */ _jsx(Spinner, {\n          size: \"small\"\n        }) : /* @__PURE__ */ _jsx(Paragraph, {\n          color: \"color9\",\n          size: \"2\",\n          children: \"Ready\"\n        })\n      })\n    ]\n  });\n}\nexport {\n  FormsDemo\n};\n//# sourceMappingURL=FormsDemo.js.map\n"],"mappings":";;;;;;AAIA,SAAS,YAAY;CACnB,IAAI,CAAC,QAAQ,aAAa,MAAM,SAAS,MAAM;CAC/C,MAAM,UAAU,WAAW;EACzB,IAAI,WAAW,cAAc;GAC3B;EACF;EACA,IAAI,QAAQ,WAAW,WAAW;GAChC,OAAO,UAAU,MAAM;EACzB,GAAG,IAAI;EACP,OAAO,WAAW;GAChB,OAAO,aAAa,KAAK;EAC3B;CACF,GAAG,CACD,MACF,CAAC;CACD,OAAuB,qBAAM,MAAM;EACjC,OAAO;EACP,MAAM;EACN,KAAK;EACL,aAAa;EACb,SAAS;EACT,IAAI;EACJ,aAAa;EACb,GAAG;EACH,WAAW;EACX,UAAU,WAAW;GACnB,OAAO,UAAU,YAAY;EAC/B;EACA,UAAU;GACQ,qBAAM,OAAO;IAC3B,MAAM;IACN,KAAK;IACL,UAAU;KACQ,oBAAK,MAAM,OAAO;MAChC,OAAO;MACP,YAAY;MACZ,UAAU;KACZ,CAAC;KACe,oBAAK,YAAY;MAC/B,MAAM;MACN,aAAa;MACb,UAAU;KACZ,CAAC;KACe,oBAAK,MAAM,aAAa;MACtC,OAAO;MACP,UAAU;MACV,UAAU;KACZ,CAAC;KACe,oBAAK,MAAM,OAAO;MAChC,OAAO;MACP,UAAU;KACZ,CAAC;IACH;GACF,CAAC;GACe,oBAAK,KAAK,SAAS;IACjC,SAAS;IACT,UAAU,WAAW;IACrB,UAA0B,oBAAK,QAAQ;KACrC,MAAM;KACN,QAAQ;KACR,IAAI;KACJ,SAAS;KACT,IAAI;KACJ,OAAO;KACP,UAAU;KACV,YAAY;KACZ,UAAU;IACZ,CAAC;GACH,CAAC;GACe,oBAAK,QAAQ;IAC3B,QAAQ;IACR,OAAO;IACP,SAAS;IACT,UAAU,WAAW,eAA+B,oBAAK,SAAS,EAChE,MAAM,QACR,CAAC,IAAoB,oBAAK,WAAW;KACnC,OAAO;KACP,MAAM;KACN,UAAU;IACZ,CAAC;GACH,CAAC;EACH;CACF,CAAC;AACH"}

package/dist/esm/Grid.mjs

@@ -2,41 +2,38 @@ import { isWeb } from "@tamagui/core";
 import { XStack } from "@tamagui/stacks";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-function Grid({
-  children,
-  columns,
-  itemMinWidth = 200,
-  gap
-}) {
-  if (isWeb) {
-    return /* @__PURE__ */jsx("div", {
-      style: {
-        gap,
-        display: "grid",
-        justifyContent: "stretch",
-        gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
-      },
-      children
-    });
-  }
-  const childrenList = React.Children.toArray(children);
-  return /* @__PURE__ */jsx(XStack, {
-    items: "center",
-    justify: "center",
-    flexWrap: "wrap",
-    children: childrenList.map((child, i) => {
-      if (!child) {
-        return null;
-      }
-      return /* @__PURE__ */jsx(XStack, {
-        flex: 1,
-        minW: itemMinWidth,
-        mr: gap,
-        mb: gap,
-        children: child
-      }, i);
-    })
-  });
+
+function Grid({ children, columns, itemMinWidth = 200, gap }) {
+	if (isWeb) {
+		return /* @__PURE__ */ jsx("div", {
+			style: {
+				gap,
+				display: "grid",
+				justifyContent: "stretch",
+				gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
+			},
+			children
+		});
+	}
+	const childrenList = React.Children.toArray(children);
+	return /* @__PURE__ */ jsx(XStack, {
+		items: "center",
+		justify: "center",
+		flexWrap: "wrap",
+		children: childrenList.map((child, i) => {
+			if (!child) {
+				return null;
+			}
+			return /* @__PURE__ */ jsx(XStack, {
+				flex: 1,
+				minW: itemMinWidth,
+				mr: gap,
+				mb: gap,
+				children: child
+			}, i);
+		})
+	});
 }
+
 export { Grid };
 //# sourceMappingURL=Grid.mjs.map

package/dist/esm/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["isWeb","XStack","React","jsx","Grid","children","columns","itemMinWidth","gap","style","display","justifyContent","gridTemplateColumns","childrenList","Children","toArray","items","justify","flexWrap","map","child","i","flex","minW","mr","mb"],"sources":["../../src/Grid.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,KAAA,QAAa;AACtB,SAASC,MAAA,QAAc;AACvB,OAAOC,KAAA,MAAW;AAYZ,SAAAC,GAAA;AAHC,SAASC,KAAK;EAAEC,QAAA;EAAUC,OAAA;EAASC,YAAA,GAAe;EAAKC;AAAI,GAAc;EAC9E,IAAIR,KAAA,EAAO;IACT,OACE,eAAAG,GAAA,CAAC;MACCM,KAAA,EAAO;QACLD,GAAA;QACAE,OAAA,EAAS;QACTC,cAAA,EAAgB;QAChBC,mBAAA,EAAqB,4BAA4BL,YAAY;MAC/D;MAECF;IAAA,CACH;EAEJ;EAEA,MAAMQ,YAAA,GAAeX,KAAA,CAAMY,QAAA,CAASC,OAAA,CAAQV,QAAQ;EAEpD,OACE,eAAAF,GAAA,CAACF,MAAA;IAAOe,KAAA,EAAM;IAASC,OAAA,EAAQ;IAASC,QAAA,EAAS;IAC9Cb,QAAA,EAAAQ,YAAA,CAAaM,GAAA,CAAI,CAACC,KAAA,EAAOC,CAAA,KAAM;MAC9B,IAAI,CAACD,KAAA,EAAO;QACV,OAAO;MACT;MAGA,OACE,eAAAjB,GAAA,CAACF,MAAA;QAAeqB,IAAA,EAAM;QAAGC,IAAA,EAAMhB,YAAA;QAAciB,EAAA,EAAIhB,GAAA;QAAKiB,EAAA,EAAIjB,GAAA;QACvDH,QAAA,EAAAe;MAAA,GADUC,CAEb;IAEJ,CAAC;EAAA,CACH;AAEJ","ignoreList":[]}
+{"version":3,"file":"Grid.js","names":[],"sources":["esm/Grid.js"],"sourcesContent":["import { isWeb } from \"@tamagui/core\";\nimport { XStack } from \"@tamagui/stacks\";\nimport React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nfunction Grid({ children, columns, itemMinWidth = 200, gap }) {\n  if (isWeb) {\n    return /* @__PURE__ */ jsx(\n      \"div\",\n      {\n        style: {\n          gap,\n          display: \"grid\",\n          justifyContent: \"stretch\",\n          gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`\n        },\n        children\n      }\n    );\n  }\n  const childrenList = React.Children.toArray(children);\n  return /* @__PURE__ */ jsx(XStack, { items: \"center\", justify: \"center\", flexWrap: \"wrap\", children: childrenList.map((child, i) => {\n    if (!child) {\n      return null;\n    }\n    return /* @__PURE__ */ jsx(XStack, { flex: 1, minW: itemMinWidth, mr: gap, mb: gap, children: child }, i);\n  }) });\n}\nexport {\n  Grid\n};\n//# sourceMappingURL=Grid.js.map\n"],"mappings":";;;;;;AAIA,SAAS,KAAK,EAAE,UAAU,SAAS,eAAe,KAAK,OAAO;CAC5D,IAAI,OAAO;EACT,OAAuB,oBACrB,OACA;GACE,OAAO;IACL;IACA,SAAS;IACT,gBAAgB;IAChB,qBAAqB,4BAA4B,aAAa;GAChE;GACA;EACF,CACF;CACF;CACA,MAAM,eAAe,MAAM,SAAS,QAAQ,QAAQ;CACpD,OAAuB,oBAAI,QAAQ;EAAE,OAAO;EAAU,SAAS;EAAU,UAAU;EAAQ,UAAU,aAAa,KAAK,OAAO,MAAM;GAClI,IAAI,CAAC,OAAO;IACV,OAAO;GACT;GACA,OAAuB,oBAAI,QAAQ;IAAE,MAAM;IAAG,MAAM;IAAc,IAAI;IAAK,IAAI;IAAK,UAAU;GAAM,GAAG,CAAC;EAC1G,CAAC;CAAE,CAAC;AACN"}