@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/DialogDemo.native.js

@@ -1,196 +1,155 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, X } from "@tamagui/lucide-icons-2";
 import { useState } from "react";
 import { Adapt, Button, Dialog, Fieldset, Input, Label, Paragraph, Select, Sheet, TooltipSimple, Unspaced, View, XGroup, XStack } from "tamagui";
 import { SelectDemoContents } from "./SelectDemo.native.js";
+
 function DialogDemo() {
-  var [mode, setMode] = useState("plain");
-  return /* @__PURE__ */_jsxs(View, {
-    gap: "$4",
-    justify: "center",
-    items: "center",
-    children: [/* @__PURE__ */_jsxs(XGroup, {
-      children: [/* @__PURE__ */_jsx(XGroup.Item, {
-        children: /* @__PURE__ */_jsx(Button, {
-          size: "$3",
-          theme: mode === "plain" ? "accent" : void 0,
-          onPress: function () {
-            return setMode("plain");
-          },
-          children: "Plain"
-        })
-      }), /* @__PURE__ */_jsx(XGroup.Item, {
-        children: /* @__PURE__ */_jsx(Button, {
-          size: "$3",
-          theme: mode === "adapt" ? "accent" : void 0,
-          onPress: function () {
-            return setMode("adapt");
-          },
-          children: "Adapt to Sheet"
-        })
-      }), /* @__PURE__ */_jsx(XGroup.Item, {
-        children: /* @__PURE__ */_jsx(Button, {
-          size: "$3",
-          theme: mode === "keepMounted" ? "accent" : void 0,
-          onPress: function () {
-            return setMode("keepMounted");
-          },
-          children: "Keep Mounted"
-        })
-      })]
-    }), /* @__PURE__ */_jsx(DialogInstance, {
-      mode
-    })]
-  });
+	var [mode, setMode] = useState("plain");
+	return /* @__PURE__ */ jsxs(View, {
+		gap: "4",
+		justify: "center",
+		items: "center",
+		children: [/* @__PURE__ */ jsxs(XGroup, { children: [
+			/* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, {
+				size: "3",
+				theme: mode === "plain" ? "accent" : void 0,
+				onPress: function() {
+					return setMode("plain");
+				},
+				children: "Plain"
+			}) }),
+			/* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, {
+				size: "3",
+				theme: mode === "adapt" ? "accent" : void 0,
+				onPress: function() {
+					return setMode("adapt");
+				},
+				children: "Adapt to Sheet"
+			}) }),
+			/* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, {
+				size: "3",
+				theme: mode === "keepMounted" ? "accent" : void 0,
+				onPress: function() {
+					return setMode("keepMounted");
+				},
+				children: "Keep Mounted"
+			}) })
+		] }), /* @__PURE__ */ jsx(DialogInstance, { mode })]
+	});
 }
 function DialogInstance(param) {
-  var {
-    mode
-  } = param;
-  var [open, setOpen] = useState(false);
-  return /* @__PURE__ */_jsxs(Dialog, {
-    modal: true,
-    keepChildrenMounted: mode === "keepMounted",
-    open,
-    onOpenChange: setOpen,
-    children: [/* @__PURE__ */_jsx(Dialog.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(Button, {
-        children: /* @__PURE__ */_jsx(Button.Text, {
-          children: "Show Dialog"
-        })
-      })
-    }), mode === "adapt" && /* @__PURE__ */_jsx(Adapt, {
-      when: "maxMd",
-      platform: "touch",
-      children: /* @__PURE__ */_jsxs(Sheet, {
-        transition: "medium",
-        zIndex: 2e5,
-        modal: true,
-        dismissOnSnapToBottom: true,
-        unmountChildrenWhenHidden: true,
-        children: [/* @__PURE__ */_jsx(Sheet.Frame, {
-          p: "$4",
-          gap: "$4",
-          children: /* @__PURE__ */_jsx(Adapt.Contents, {})
-        }), /* @__PURE__ */_jsx(Sheet.Overlay, {
-          bg: "$background",
-          opacity: 0.5,
-          transition: "lazy",
-          enterStyle: {
-            opacity: 0
-          },
-          exitStyle: {
-            opacity: 0
-          }
-        })]
-      })
-    }), /* @__PURE__ */_jsxs(Dialog.Portal, {
-      children: [/* @__PURE__ */_jsx(Dialog.Overlay, {
-        bg: "$background",
-        opacity: 0.5,
-        animateOnly: ["transform", "opacity"],
-        transition: ["quicker", {
-          opacity: {
-            overshootClamping: true
-          }
-        }],
-        enterStyle: {
-          opacity: 0
-        },
-        exitStyle: {
-          opacity: 0
-        }
-      }), /* @__PURE__ */_jsx(Dialog.FocusScope, {
-        focusOnIdle: true,
-        children: /* @__PURE__ */_jsxs(Dialog.Content, {
-          transition: ["quicker", {
-            opacity: {
-              overshootClamping: true
-            }
-          }],
-          enterStyle: {
-            x: 0,
-            y: 20,
-            opacity: 0
-          },
-          exitStyle: {
-            x: 0,
-            y: 10,
-            opacity: 0,
-            scale: 0.95
-          },
-          gap: "$4",
-          children: [/* @__PURE__ */_jsx(Dialog.Title, {
-            children: "Edit profile"
-          }), /* @__PURE__ */_jsx(Dialog.Description, {
-            children: "Make changes to your profile here. Click save when you're done."
-          }), /* @__PURE__ */_jsxs(Fieldset, {
-            gap: "$4",
-            horizontal: true,
-            children: [/* @__PURE__ */_jsx(Label, {
-              width: 64,
-              htmlFor: "name",
-              children: "Name"
-            }), /* @__PURE__ */_jsx(Input, {
-              flex: 1,
-              id: "name",
-              defaultValue: "Nate Wienert"
-            })]
-          }), /* @__PURE__ */_jsxs(Fieldset, {
-            gap: "$4",
-            horizontal: true,
-            children: [/* @__PURE__ */_jsx(Label, {
-              width: 64,
-              htmlFor: "username",
-              children: /* @__PURE__ */_jsx(TooltipSimple, {
-                label: "Pick your favorite",
-                placement: "bottom-start",
-                children: /* @__PURE__ */_jsx(Paragraph, {
-                  children: "Food"
-                })
-              })
-            }), /* @__PURE__ */_jsx(XStack, {
-              flex: 1,
-              children: /* @__PURE__ */_jsx(SelectDemoContents, {
-                trigger: /* @__PURE__ */_jsx(Select.Trigger, {
-                  flex: 1,
-                  iconAfter: ChevronDown,
-                  borderRadius: "$4",
-                  children: /* @__PURE__ */_jsx(Select.Value, {
-                    placeholder: "Something"
-                  })
-                })
-              })
-            })]
-          }), /* @__PURE__ */_jsx(XStack, {
-            self: "flex-end",
-            gap: "$4",
-            children: /* @__PURE__ */_jsx(Dialog.Close, {
-              displayWhenAdapted: true,
-              asChild: true,
-              children: /* @__PURE__ */_jsx(Button, {
-                theme: "accent",
-                "aria-label": "Close",
-                children: "Save changes"
-              })
-            })
-          }), /* @__PURE__ */_jsx(Unspaced, {
-            children: /* @__PURE__ */_jsx(Dialog.Close, {
-              asChild: true,
-              children: /* @__PURE__ */_jsx(Button, {
-                position: "absolute",
-                r: "$3",
-                size: "$2",
-                circular: true,
-                icon: X
-              })
-            })
-          })]
-        })
-      })]
-    })]
-  });
+	var { mode } = param;
+	var [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Dialog, {
+		modal: true,
+		keepChildrenMounted: mode === "keepMounted",
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(Dialog.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Show Dialog" }) })
+			}),
+			mode === "adapt" && /* @__PURE__ */ jsx(Adapt, {
+				when: "max-md",
+				platform: "touch",
+				children: /* @__PURE__ */ jsxs(Sheet, {
+					transition: "medium",
+					zIndex: 2e5,
+					modal: true,
+					dismissOnSnapToBottom: true,
+					unmountChildrenWhenHidden: true,
+					children: [/* @__PURE__ */ jsxs(Sheet.Container, {
+						p: "4",
+						gap: "4",
+						children: [/* @__PURE__ */ jsx(Sheet.Background, {}), /* @__PURE__ */ jsx(Adapt.Contents, {})]
+					}), /* @__PURE__ */ jsx(Sheet.Overlay, {
+						bg: "background",
+						opacity: "0.5 enter:0 exit:0",
+						transition: "lazy"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+				bg: "background",
+				opacity: "0.5 enter:0 exit:0",
+				transition: ["quicker", { opacity: { overshootClamping: true } }],
+				animateOnly: ["transform", "opacity"]
+			}), /* @__PURE__ */ jsx(Dialog.FocusScope, {
+				focusOnIdle: true,
+				children: /* @__PURE__ */ jsxs(Dialog.Content, {
+					transition: ["quicker", { opacity: { overshootClamping: true } }],
+					x: "enter:0 exit:0",
+					y: "enter:20px exit:10px",
+					opacity: "enter:0 exit:0",
+					scale: "exit:0.95",
+					gap: "4",
+					children: [
+						/* @__PURE__ */ jsx(Dialog.Title, { children: "Edit profile" }),
+						/* @__PURE__ */ jsx(Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
+						/* @__PURE__ */ jsxs(Fieldset, {
+							gap: "4",
+							horizontal: true,
+							children: [/* @__PURE__ */ jsx(Label, {
+								width: 64,
+								htmlFor: "name",
+								children: "Name"
+							}), /* @__PURE__ */ jsx(Input, {
+								flex: 1,
+								id: "name",
+								defaultValue: "Nate Wienert"
+							})]
+						}),
+						/* @__PURE__ */ jsxs(Fieldset, {
+							gap: "4",
+							horizontal: true,
+							children: [/* @__PURE__ */ jsx(Label, {
+								width: 64,
+								htmlFor: "username",
+								children: /* @__PURE__ */ jsx(TooltipSimple, {
+									label: "Pick your favorite",
+									placement: "bottom-start",
+									children: /* @__PURE__ */ jsx(Paragraph, { children: "Food" })
+								})
+							}), /* @__PURE__ */ jsx(XStack, {
+								flex: 1,
+								children: /* @__PURE__ */ jsx(SelectDemoContents, { trigger: /* @__PURE__ */ jsxs(Select.Trigger, {
+									flex: 1,
+									borderRadius: "4",
+									children: [/* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }), /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })]
+								}) })
+							})]
+						}),
+						/* @__PURE__ */ jsx(XStack, {
+							self: "flex-end",
+							gap: "4",
+							children: /* @__PURE__ */ jsx(Dialog.Close, {
+								displayWhenAdapted: true,
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Button, {
+									theme: "accent",
+									"aria-label": "Close",
+									children: "Save changes"
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(Unspaced, { children: /* @__PURE__ */ jsx(Dialog.Close, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								position: "absolute",
+								r: "3",
+								size: "2",
+								circular: true,
+								icon: X
+							})
+						}) })
+					]
+				})
+			})] })
+		]
+	});
 }
+
 export { DialogDemo };
 //# sourceMappingURL=DialogDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","ChevronDown","X","useState","Adapt","Button","Dialog","Fieldset","Input","Label","Paragraph","Select","Sheet","TooltipSimple","Unspaced","View","XGroup","XStack","SelectDemoContents","DialogDemo","mode","setMode","gap","justify","items","children","Item","size","theme","onPress","DialogInstance","param","open","setOpen","modal","keepChildrenMounted","onOpenChange","Trigger","asChild","Text","when","platform","transition","zIndex","dismissOnSnapToBottom","unmountChildrenWhenHidden","Frame","p","Contents","Overlay","bg","opacity","enterStyle","exitStyle","Portal","animateOnly","overshootClamping","FocusScope","focusOnIdle","Content","x","y","scale","Title"],"sources":["../../src/DialogDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DialogDemo.native.js","names":[],"sources":["esm/DialogDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { ChevronDown, X } from \"@tamagui/lucide-icons-2\";\nimport { useState } from \"react\";\nimport { Adapt, Button, Dialog, Fieldset, Input, Label, Paragraph, Select, Sheet, TooltipSimple, Unspaced, View, XGroup, XStack } from \"tamagui\";\nimport { SelectDemoContents } from \"./SelectDemo\";\nfunction DialogDemo() {\n  var [mode, setMode] = useState(\"plain\");\n  return /* @__PURE__ */ _jsxs(View, {\n    gap: \"4\",\n    justify: \"center\",\n    items: \"center\",\n    children: [\n      /* @__PURE__ */ _jsxs(XGroup, {\n        children: [\n          /* @__PURE__ */ _jsx(XGroup.Item, {\n            children: /* @__PURE__ */ _jsx(Button, {\n              size: \"3\",\n              theme: mode === \"plain\" ? \"accent\" : void 0,\n              onPress: function() {\n                return setMode(\"plain\");\n              },\n              children: \"Plain\"\n            })\n          }),\n          /* @__PURE__ */ _jsx(XGroup.Item, {\n            children: /* @__PURE__ */ _jsx(Button, {\n              size: \"3\",\n              theme: mode === \"adapt\" ? \"accent\" : void 0,\n              onPress: function() {\n                return setMode(\"adapt\");\n              },\n              children: \"Adapt to Sheet\"\n            })\n          }),\n          /* @__PURE__ */ _jsx(XGroup.Item, {\n            children: /* @__PURE__ */ _jsx(Button, {\n              size: \"3\",\n              theme: mode === \"keepMounted\" ? \"accent\" : void 0,\n              onPress: function() {\n                return setMode(\"keepMounted\");\n              },\n              children: \"Keep Mounted\"\n            })\n          })\n        ]\n      }),\n      /* @__PURE__ */ _jsx(DialogInstance, {\n        mode\n      })\n    ]\n  });\n}\nfunction DialogInstance(param) {\n  var { mode } = param;\n  var [open, setOpen] = useState(false);\n  return /* @__PURE__ */ _jsxs(Dialog, {\n    modal: true,\n    keepChildrenMounted: mode === \"keepMounted\",\n    open,\n    onOpenChange: setOpen,\n    children: [\n      /* @__PURE__ */ _jsx(Dialog.Trigger, {\n        asChild: true,\n        children: /* @__PURE__ */ _jsx(Button, {\n          children: /* @__PURE__ */ _jsx(Button.Text, {\n            children: \"Show Dialog\"\n          })\n        })\n      }),\n      mode === \"adapt\" && /* @__PURE__ */ _jsx(Adapt, {\n        when: \"max-md\",\n        platform: \"touch\",\n        children: /* @__PURE__ */ _jsxs(Sheet, {\n          transition: \"medium\",\n          zIndex: 2e5,\n          modal: true,\n          dismissOnSnapToBottom: true,\n          unmountChildrenWhenHidden: true,\n          children: [\n            /* @__PURE__ */ _jsxs(Sheet.Container, {\n              p: \"4\",\n              gap: \"4\",\n              children: [\n                /* @__PURE__ */ _jsx(Sheet.Background, {}),\n                /* @__PURE__ */ _jsx(Adapt.Contents, {})\n              ]\n            }),\n            /* @__PURE__ */ _jsx(Sheet.Overlay, {\n              bg: \"background\",\n              opacity: \"0.5 enter:0 exit:0\",\n              transition: \"lazy\"\n            })\n          ]\n        })\n      }),\n      /* @__PURE__ */ _jsxs(Dialog.Portal, {\n        children: [\n          /* @__PURE__ */ _jsx(Dialog.Overlay, {\n            bg: \"background\",\n            opacity: \"0.5 enter:0 exit:0\",\n            transition: [\n              \"quicker\",\n              {\n                opacity: {\n                  overshootClamping: true\n                }\n              }\n            ],\n            animateOnly: [\n              \"transform\",\n              \"opacity\"\n            ]\n          }),\n          /* @__PURE__ */ _jsx(Dialog.FocusScope, {\n            focusOnIdle: true,\n            children: /* @__PURE__ */ _jsxs(Dialog.Content, {\n              transition: [\n                \"quicker\",\n                {\n                  opacity: {\n                    overshootClamping: true\n                  }\n                }\n              ],\n              x: \"enter:0 exit:0\",\n              y: \"enter:20px exit:10px\",\n              opacity: \"enter:0 exit:0\",\n              scale: \"exit:0.95\",\n              gap: \"4\",\n              children: [\n                /* @__PURE__ */ _jsx(Dialog.Title, {\n                  children: \"Edit profile\"\n                }),\n                /* @__PURE__ */ _jsx(Dialog.Description, {\n                  children: \"Make changes to your profile here. Click save when you're done.\"\n                }),\n                /* @__PURE__ */ _jsxs(Fieldset, {\n                  gap: \"4\",\n                  horizontal: true,\n                  children: [\n                    /* @__PURE__ */ _jsx(Label, {\n                      width: 64,\n                      htmlFor: \"name\",\n                      children: \"Name\"\n                    }),\n                    /* @__PURE__ */ _jsx(Input, {\n                      flex: 1,\n                      id: \"name\",\n                      defaultValue: \"Nate Wienert\"\n                    })\n                  ]\n                }),\n                /* @__PURE__ */ _jsxs(Fieldset, {\n                  gap: \"4\",\n                  horizontal: true,\n                  children: [\n                    /* @__PURE__ */ _jsx(Label, {\n                      width: 64,\n                      htmlFor: \"username\",\n                      children: /* @__PURE__ */ _jsx(TooltipSimple, {\n                        label: \"Pick your favorite\",\n                        placement: \"bottom-start\",\n                        children: /* @__PURE__ */ _jsx(Paragraph, {\n                          children: \"Food\"\n                        })\n                      })\n                    }),\n                    /* @__PURE__ */ _jsx(XStack, {\n                      flex: 1,\n                      children: /* @__PURE__ */ _jsx(SelectDemoContents, {\n                        trigger: /* @__PURE__ */ _jsxs(Select.Trigger, {\n                          flex: 1,\n                          borderRadius: \"4\",\n                          children: [\n                            /* @__PURE__ */ _jsx(Select.Value, {\n                              placeholder: \"Something\"\n                            }),\n                            /* @__PURE__ */ _jsx(Select.Icon, {\n                              children: /* @__PURE__ */ _jsx(ChevronDown, {})\n                            })\n                          ]\n                        })\n                      })\n                    })\n                  ]\n                }),\n                /* @__PURE__ */ _jsx(XStack, {\n                  self: \"flex-end\",\n                  gap: \"4\",\n                  children: /* @__PURE__ */ _jsx(Dialog.Close, {\n                    displayWhenAdapted: true,\n                    asChild: true,\n                    children: /* @__PURE__ */ _jsx(Button, {\n                      theme: \"accent\",\n                      \"aria-label\": \"Close\",\n                      children: \"Save changes\"\n                    })\n                  })\n                }),\n                /* @__PURE__ */ _jsx(Unspaced, {\n                  children: /* @__PURE__ */ _jsx(Dialog.Close, {\n                    asChild: true,\n                    children: /* @__PURE__ */ _jsx(Button, {\n                      position: \"absolute\",\n                      r: \"3\",\n                      size: \"2\",\n                      circular: true,\n                      icon: X\n                    })\n                  })\n                })\n              ]\n            })\n          })\n        ]\n      })\n    ]\n  });\n}\nexport {\n  DialogDemo\n};\n//# sourceMappingURL=DialogDemo.js.map\n"],"mappings":"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"}

package/dist/esm/FieldDemo.mjs

@@ -0,0 +1,136 @@
+import * as React from "react";
+import { Button, Field, FieldStyledContext, Form, Input, Paragraph, styled } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+const DemoField = styled(Field, { gap: "2" });
+const DemoLabel = styled(Field.Label, {
+	color: "color11",
+	fontWeight: "500"
+});
+const DemoDescription = styled(Field.Description, {
+	color: "color9",
+	fontSize: "2"
+});
+const DemoError = styled(Field.Error, {
+	color: "red10",
+	fontSize: "2"
+});
+const DemoInput = styled(Input, {
+	context: FieldStyledContext,
+	variants: {
+		valid: { true: {} },
+		invalid: { true: { borderColor: "red9" } },
+		touched: { true: {} },
+		dirty: { true: {} },
+		filled: { true: {} },
+		focused: { true: {} }
+	}
+});
+function FieldInput(props) {
+	const field = Field.useFieldControl();
+	const controlRef = React.useRef(null);
+	const valueRef = React.useRef(props.value ?? props.defaultValue ?? "");
+	React.useEffect(() => {
+		return field.registerControl({
+			id: field.ariaProps.id,
+			controlRef,
+			inputRef: controlRef,
+			getValue: () => 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: (event) => {
+			field.onFocus();
+			props.onFocus?.(event);
+		},
+		onBlur: (event) => {
+			field.onBlur(valueRef.current);
+			props.onBlur?.(event);
+		},
+		onChange: (event) => {
+			valueRef.current = event.target.value;
+			field.onChange(event.target.value);
+			props.onChange?.(event);
+		}
+	});
+}
+function FieldDemo() {
+	const [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: (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: (value) => 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.mjs.map

package/dist/esm/FieldDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDemo.js","names":[],"sources":["esm/FieldDemo.js"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Button,\n  Field,\n  FieldStyledContext,\n  Form,\n  Input,\n  Paragraph,\n  styled\n} from \"tamagui\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst DemoField = styled(Field, {\n  gap: \"2\"\n});\nconst DemoLabel = styled(Field.Label, {\n  color: \"color11\",\n  fontWeight: \"500\"\n});\nconst DemoDescription = styled(Field.Description, {\n  color: \"color9\",\n  fontSize: \"2\"\n});\nconst DemoError = styled(Field.Error, {\n  color: \"red10\",\n  fontSize: \"2\"\n});\nconst 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  const field = Field.useFieldControl();\n  const controlRef = React.useRef(null);\n  const valueRef = React.useRef(props.value ?? props.defaultValue ?? \"\");\n  React.useEffect(() => {\n    return field.registerControl({\n      id: field.ariaProps.id,\n      controlRef,\n      inputRef: controlRef,\n      getValue: () => valueRef.current,\n      required: props.required,\n      disabled: props.disabled\n    });\n  }, [field.ariaProps.id, field.registerControl, props.disabled, props.required]);\n  return /* @__PURE__ */ jsx(\n    DemoInput,\n    {\n      ...props,\n      ...field.ariaProps,\n      ...field.dataProps,\n      ref: controlRef,\n      name: field.name,\n      disabled: field.disabled || props.disabled,\n      onFocus: (event) => {\n        field.onFocus();\n        props.onFocus?.(event);\n      },\n      onBlur: (event) => {\n        field.onBlur(valueRef.current);\n        props.onBlur?.(event);\n      },\n      onChange: (event) => {\n        valueRef.current = event.target.value;\n        field.onChange(event.target.value);\n        props.onChange?.(event);\n      }\n    }\n  );\n}\nfunction FieldDemo() {\n  const [status, setStatus] = React.useState(\"Fill out the form\");\n  return /* @__PURE__ */ jsxs(\n    Form,\n    {\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: (values) => {\n        setStatus(`Welcome, ${String(values.name)}`);\n      },\n      children: [\n        /* @__PURE__ */ jsxs(DemoField, { name: \"name\", children: [\n          /* @__PURE__ */ jsx(DemoLabel, { children: \"Name\" }),\n          /* @__PURE__ */ jsx(FieldInput, { placeholder: \"Ada Lovelace\", required: true }),\n          /* @__PURE__ */ jsx(DemoDescription, { children: \"This is shown on your profile.\" }),\n          /* @__PURE__ */ jsx(DemoError, {})\n        ] }),\n        /* @__PURE__ */ jsxs(\n          DemoField,\n          {\n            name: \"email\",\n            validationMode: \"onBlur\",\n            validate: (value) => String(value).endsWith(\"@example.com\") ? null : \"Use an @example.com address\",\n            children: [\n              /* @__PURE__ */ jsx(DemoLabel, { children: \"Email\" }),\n              /* @__PURE__ */ jsx(FieldInput, { type: \"email\", placeholder: \"ada@example.com\", required: true }),\n              /* @__PURE__ */ jsx(DemoError, {})\n            ]\n          }\n        ),\n        /* @__PURE__ */ jsx(Form.Trigger, { asChild: true, 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: \"Create account\"\n          }\n        ) }),\n        /* @__PURE__ */ jsx(Paragraph, { color: \"color9\", size: \"2\", children: status })\n      ]\n    }\n  );\n}\nexport {\n  FieldDemo,\n  FieldInput\n};\n//# sourceMappingURL=FieldDemo.js.map\n"],"mappings":"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"}