@tamagui/sheet 3.0.0-beta.924.1 → 3.0.0

package/dist/jsx/useSheetState.mjs

@@ -0,0 +1,95 @@
+import React from "react";
+import { useControllableState } from "@tamagui/use-controllable-state";
+
+function useSheetState(props, state) {
+	const handleRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	const [frameSize, setFrameSize] = React.useState(0);
+	const [maxContentSize, setMaxContentSize] = React.useState(0);
+	const snapPointsMode = props.snapPointsMode ?? "percent";
+	const snapPointsProp = props.snapPoints ?? (snapPointsMode === "percent" ? [80] : snapPointsMode === "constant" ? [256] : ["fit"]);
+	const hasFit = snapPointsProp[0] === "fit";
+	const snapPoints = React.useMemo(() => props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp, [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]);
+	const [position_, setPositionImmediate] = useControllableState({
+		prop: props.position,
+		defaultProp: props.defaultPosition || (state.open ? 0 : -1),
+		onChange: props.onPositionChange,
+		strategy: state.strategy
+	});
+	const position = state.open === false ? -1 : position_;
+	const { open } = state;
+	const setPosition = React.useCallback((next) => {
+		if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
+			state.setOpen(false);
+		} else {
+			setPositionImmediate(next);
+		}
+	}, [
+		props.dismissOnSnapToBottom,
+		snapPoints.length,
+		setPositionImmediate,
+		state.setOpen
+	]);
+	if (process.env.NODE_ENV === "development") {
+		if (snapPointsMode === "mixed" && snapPoints.some((p) => {
+			if (typeof p === "string") {
+				if (p === "fit") {
+					return false;
+				}
+				if (p.endsWith("%")) {
+					const n = Number(p.slice(0, -1));
+					return n < 0 || n > 100;
+				}
+				return true;
+			}
+			return typeof p !== "number" || p < 0;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or \"fit\" when snapPointsMode is mixed");
+		}
+		if (snapPointsMode === "mixed" && snapPoints.indexOf("fit") > 0) {
+			console.warn("⚠️ Invalid snapPoint given, \"fit\" must be the first/largest snap point when snapPointsMode is mixed");
+		}
+		if (snapPointsMode === "fit" && (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) || snapPoints[0] !== "fit")) {
+			console.warn("⚠️ Invalid snapPoint given, there are no snap points when snapPointsMode is fit");
+		}
+		if (snapPointsMode === "constant" && snapPoints.some((p) => typeof p !== "number" || p < 0)) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant");
+		}
+		if (snapPointsMode === "percent" && snapPoints.some((p) => typeof p !== "number" || p < 0 || p > 100)) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent");
+		}
+	}
+	if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
+		setPositionImmediate(0);
+	}
+	const shouldSetPositionOpen = open && position < 0;
+	React.useEffect(() => {
+		if (shouldSetPositionOpen) {
+			setPosition(0);
+		}
+	}, [setPosition, shouldSetPositionOpen]);
+	return {
+		modal: !!props.modal,
+		open: state.open,
+		setOpen: state.setOpen,
+		hidden: !!state.isHidden,
+		contentRef,
+		handleRef,
+		frameSize,
+		setFrameSize,
+		maxContentSize,
+		dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
+		dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
+		scope: props.scope ?? "",
+		hasFit,
+		position,
+		snapPoints,
+		snapPointsMode,
+		setMaxContentSize,
+		setPosition,
+		setPositionImmediate
+	};
+}
+
+export { useSheetState };
+//# sourceMappingURL=useSheetState.mjs.map

package/dist/jsx/useSheetState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetState.js","names":[],"sources":["jsx/useSheetState.js"],"sourcesContent":["import React from \"react\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nfunction useSheetState(props, state) {\n  const handleRef = React.useRef(null);\n  const contentRef = React.useRef(null);\n  const [frameSize, setFrameSize] = React.useState(0);\n  const [maxContentSize, setMaxContentSize] = React.useState(0);\n  const snapPointsMode = props.snapPointsMode ?? \"percent\";\n  const snapPointsProp = props.snapPoints ?? (snapPointsMode === \"percent\" ? [80] : snapPointsMode === \"constant\" ? [256] : [\"fit\"]);\n  const hasFit = snapPointsProp[0] === \"fit\";\n  const snapPoints = React.useMemo(\n    () => props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,\n    [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]\n  );\n  const [position_, setPositionImmediate] = useControllableState({\n    prop: props.position,\n    defaultProp: props.defaultPosition || (state.open ? 0 : -1),\n    onChange: props.onPositionChange,\n    strategy: state.strategy\n  });\n  const position = state.open === false ? -1 : position_;\n  const { open } = state;\n  const setPosition = React.useCallback(\n    (next) => {\n      if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {\n        state.setOpen(false);\n      } else {\n        setPositionImmediate(next);\n      }\n    },\n    [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]\n  );\n  if (process.env.NODE_ENV === \"development\") {\n    if (snapPointsMode === \"mixed\" && snapPoints.some((p) => {\n      if (typeof p === \"string\") {\n        if (p === \"fit\") {\n          return false;\n        }\n        if (p.endsWith(\"%\")) {\n          const n = Number(p.slice(0, -1));\n          return n < 0 || n > 100;\n        }\n        return true;\n      }\n      return typeof p !== \"number\" || p < 0;\n    })) {\n      console.warn(\n        '\\u26A0\\uFE0F Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or \"fit\" when snapPointsMode is mixed'\n      );\n    }\n    if (snapPointsMode === \"mixed\" && snapPoints.indexOf(\"fit\") > 0) {\n      console.warn(\n        '\\u26A0\\uFE0F Invalid snapPoint given, \"fit\" must be the first/largest snap point when snapPointsMode is mixed'\n      );\n    }\n    if (snapPointsMode === \"fit\" && (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) || snapPoints[0] !== \"fit\")) {\n      console.warn(\n        \"\\u26A0\\uFE0F Invalid snapPoint given, there are no snap points when snapPointsMode is fit\"\n      );\n    }\n    if (snapPointsMode === \"constant\" && snapPoints.some((p) => typeof p !== \"number\" || p < 0)) {\n      console.warn(\n        \"\\u26A0\\uFE0F Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant\"\n      );\n    }\n    if (snapPointsMode === \"percent\" && snapPoints.some((p) => typeof p !== \"number\" || p < 0 || p > 100)) {\n      console.warn(\n        \"\\u26A0\\uFE0F Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent\"\n      );\n    }\n  }\n  if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {\n    setPositionImmediate(0);\n  }\n  const shouldSetPositionOpen = open && position < 0;\n  React.useEffect(() => {\n    if (shouldSetPositionOpen) {\n      setPosition(0);\n    }\n  }, [setPosition, shouldSetPositionOpen]);\n  return {\n    modal: !!props.modal,\n    open: state.open,\n    setOpen: state.setOpen,\n    hidden: !!state.isHidden,\n    contentRef,\n    handleRef,\n    frameSize,\n    setFrameSize,\n    maxContentSize,\n    dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,\n    dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,\n    scope: props.scope ?? \"\",\n    hasFit,\n    position,\n    snapPoints,\n    snapPointsMode,\n    setMaxContentSize,\n    setPosition,\n    setPositionImmediate\n  };\n}\nexport {\n  useSheetState\n};\n//# sourceMappingURL=useSheetState.js.map\n"],"mappings":";;;;AAEA,SAAS,cAAc,OAAO,OAAO;CACnC,MAAM,YAAY,MAAM,OAAO,IAAI;CACnC,MAAM,aAAa,MAAM,OAAO,IAAI;CACpC,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,CAAC;CAClD,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAS,CAAC;CAC5D,MAAM,iBAAiB,MAAM,kBAAkB;CAC/C,MAAM,iBAAiB,MAAM,eAAe,mBAAmB,YAAY,CAAC,EAAE,IAAI,mBAAmB,aAAa,CAAC,GAAG,IAAI,CAAC,KAAK;CAChI,MAAM,SAAS,eAAe,OAAO;CACrC,MAAM,aAAa,MAAM,cACjB,MAAM,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI,gBAC7D,CAAC,KAAK,UAAU,cAAc,GAAG,MAAM,qBAAqB,CAC9D;CACA,MAAM,CAAC,WAAW,wBAAwB,qBAAqB;EAC7D,MAAM,MAAM;EACZ,aAAa,MAAM,oBAAoB,MAAM,OAAO,IAAI,CAAC;EACzD,UAAU,MAAM;EAChB,UAAU,MAAM;CAClB,CAAC;CACD,MAAM,WAAW,MAAM,SAAS,QAAQ,CAAC,IAAI;CAC7C,MAAM,EAAE,SAAS;CACjB,MAAM,cAAc,MAAM,aACvB,SAAS;EACR,IAAI,MAAM,yBAAyB,SAAS,WAAW,SAAS,GAAG;GACjE,MAAM,QAAQ,KAAK;EACrB,OAAO;GACL,qBAAqB,IAAI;EAC3B;CACF,GACA;EAAC,MAAM;EAAuB,WAAW;EAAQ;EAAsB,MAAM;CAAO,CACtF;CACA,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC1C,IAAI,mBAAmB,WAAW,WAAW,MAAM,MAAM;GACvD,IAAI,OAAO,MAAM,UAAU;IACzB,IAAI,MAAM,OAAO;KACf,OAAO;IACT;IACA,IAAI,EAAE,SAAS,GAAG,GAAG;KACnB,MAAM,IAAI,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;KAC/B,OAAO,IAAI,KAAK,IAAI;IACtB;IACA,OAAO;GACT;GACA,OAAO,OAAO,MAAM,YAAY,IAAI;EACtC,CAAC,GAAG;GACF,QAAQ,KACN,oJACF;EACF;EACA,IAAI,mBAAmB,WAAW,WAAW,QAAQ,KAAK,IAAI,GAAG;GAC/D,QAAQ,KACN,uGACF;EACF;EACA,IAAI,mBAAmB,UAAU,WAAW,YAAY,MAAM,wBAAwB,IAAI,MAAM,WAAW,OAAO,QAAQ;GACxH,QAAQ,KACN,iFACF;EACF;EACA,IAAI,mBAAmB,cAAc,WAAW,MAAM,MAAM,OAAO,MAAM,YAAY,IAAI,CAAC,GAAG;GAC3F,QAAQ,KACN,wGACF;EACF;EACA,IAAI,mBAAmB,aAAa,WAAW,MAAM,MAAM,OAAO,MAAM,YAAY,IAAI,KAAK,IAAI,GAAG,GAAG;GACrG,QAAQ,KACN,gHACF;EACF;CACF;CACA,IAAI,QAAQ,MAAM,yBAAyB,aAAa,WAAW,SAAS,GAAG;EAC7E,qBAAqB,CAAC;CACxB;CACA,MAAM,wBAAwB,QAAQ,WAAW;CACjD,MAAM,gBAAgB;EACpB,IAAI,uBAAuB;GACzB,YAAY,CAAC;EACf;CACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;CACvC,OAAO;EACL,OAAO,CAAC,CAAC,MAAM;EACf,MAAM,MAAM;EACZ,SAAS,MAAM;EACf,QAAQ,CAAC,CAAC,MAAM;EAChB;EACA;EACA;EACA;EACA;EACA,uBAAuB,MAAM,yBAAyB;EACtD,uBAAuB,MAAM,yBAAyB;EACtD,OAAO,MAAM,SAAS;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/jsx/useSheetState.native.cjs

@@ -0,0 +1,131 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSheetState_exports = {};
+__export(useSheetState_exports, { useSheetState: () => useSheetState });
+module.exports = __toCommonJS(useSheetState_exports);
+var import_react = __toESM(require("react"), 1);
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+function useSheetState(props, state) {
+	var handleRef = import_react.default.useRef(null);
+	var contentRef = import_react.default.useRef(null);
+	var [frameSize, setFrameSize] = import_react.default.useState(0);
+	var [maxContentSize, setMaxContentSize] = import_react.default.useState(0);
+	var _props_snapPointsMode;
+	var snapPointsMode = (_props_snapPointsMode = props.snapPointsMode) !== null && _props_snapPointsMode !== void 0 ? _props_snapPointsMode : "percent";
+	var _props_snapPoints;
+	var snapPointsProp = (_props_snapPoints = props.snapPoints) !== null && _props_snapPoints !== void 0 ? _props_snapPoints : snapPointsMode === "percent" ? [80] : snapPointsMode === "constant" ? [256] : ["fit"];
+	var hasFit = snapPointsProp[0] === "fit";
+	var snapPoints = import_react.default.useMemo(function() {
+		return props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp;
+	}, [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]);
+	var [position_, setPositionImmediate] = (0, import_use_controllable_state.useControllableState)({
+		prop: props.position,
+		defaultProp: props.defaultPosition || (state.open ? 0 : -1),
+		onChange: props.onPositionChange,
+		strategy: state.strategy
+	});
+	var position = state.open === false ? -1 : position_;
+	var { open } = state;
+	var setPosition = import_react.default.useCallback(function(next) {
+		if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
+			state.setOpen(false);
+		} else {
+			setPositionImmediate(next);
+		}
+	}, [
+		props.dismissOnSnapToBottom,
+		snapPoints.length,
+		setPositionImmediate,
+		state.setOpen
+	]);
+	if (process.env.NODE_ENV === "development") {
+		if (snapPointsMode === "mixed" && snapPoints.some(function(p) {
+			if (typeof p === "string") {
+				if (p === "fit") {
+					return false;
+				}
+				if (p.endsWith("%")) {
+					var n = Number(p.slice(0, -1));
+					return n < 0 || n > 100;
+				}
+				return true;
+			}
+			return typeof p !== "number" || p < 0;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or \"fit\" when snapPointsMode is mixed");
+		}
+		if (snapPointsMode === "mixed" && snapPoints.indexOf("fit") > 0) {
+			console.warn("⚠️ Invalid snapPoint given, \"fit\" must be the first/largest snap point when snapPointsMode is mixed");
+		}
+		if (snapPointsMode === "fit" && (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) || snapPoints[0] !== "fit")) {
+			console.warn("⚠️ Invalid snapPoint given, there are no snap points when snapPointsMode is fit");
+		}
+		if (snapPointsMode === "constant" && snapPoints.some(function(p) {
+			return typeof p !== "number" || p < 0;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant");
+		}
+		if (snapPointsMode === "percent" && snapPoints.some(function(p) {
+			return typeof p !== "number" || p < 0 || p > 100;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent");
+		}
+	}
+	if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
+		setPositionImmediate(0);
+	}
+	var shouldSetPositionOpen = open && position < 0;
+	import_react.default.useEffect(function() {
+		if (shouldSetPositionOpen) {
+			setPosition(0);
+		}
+	}, [setPosition, shouldSetPositionOpen]);
+	var _props_dismissOnOverlayPress, _props_dismissOnSnapToBottom, _props_scope;
+	return {
+		modal: !!props.modal,
+		open: state.open,
+		setOpen: state.setOpen,
+		hidden: !!state.isHidden,
+		contentRef,
+		handleRef,
+		frameSize,
+		setFrameSize,
+		maxContentSize,
+		dismissOnOverlayPress: (_props_dismissOnOverlayPress = props.dismissOnOverlayPress) !== null && _props_dismissOnOverlayPress !== void 0 ? _props_dismissOnOverlayPress : true,
+		dismissOnSnapToBottom: (_props_dismissOnSnapToBottom = props.dismissOnSnapToBottom) !== null && _props_dismissOnSnapToBottom !== void 0 ? _props_dismissOnSnapToBottom : false,
+		scope: (_props_scope = props.scope) !== null && _props_scope !== void 0 ? _props_scope : "",
+		hasFit,
+		position,
+		snapPoints,
+		snapPointsMode,
+		setMaxContentSize,
+		setPosition,
+		setPositionImmediate
+	};
+}

package/dist/jsx/useSheetState.native.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSheetState_exports = {};
+__export(useSheetState_exports, { useSheetState: () => useSheetState });
+module.exports = __toCommonJS(useSheetState_exports);
+var import_react = __toESM(require("react"), 1);
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+function useSheetState(props, state) {
+	var handleRef = import_react.default.useRef(null);
+	var contentRef = import_react.default.useRef(null);
+	var [frameSize, setFrameSize] = import_react.default.useState(0);
+	var [maxContentSize, setMaxContentSize] = import_react.default.useState(0);
+	var _props_snapPointsMode;
+	var snapPointsMode = (_props_snapPointsMode = props.snapPointsMode) !== null && _props_snapPointsMode !== void 0 ? _props_snapPointsMode : "percent";
+	var _props_snapPoints;
+	var snapPointsProp = (_props_snapPoints = props.snapPoints) !== null && _props_snapPoints !== void 0 ? _props_snapPoints : snapPointsMode === "percent" ? [80] : snapPointsMode === "constant" ? [256] : ["fit"];
+	var hasFit = snapPointsProp[0] === "fit";
+	var snapPoints = import_react.default.useMemo(function() {
+		return props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp;
+	}, [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]);
+	var [position_, setPositionImmediate] = (0, import_use_controllable_state.useControllableState)({
+		prop: props.position,
+		defaultProp: props.defaultPosition || (state.open ? 0 : -1),
+		onChange: props.onPositionChange,
+		strategy: state.strategy
+	});
+	var position = state.open === false ? -1 : position_;
+	var { open } = state;
+	var setPosition = import_react.default.useCallback(function(next) {
+		if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
+			state.setOpen(false);
+		} else {
+			setPositionImmediate(next);
+		}
+	}, [
+		props.dismissOnSnapToBottom,
+		snapPoints.length,
+		setPositionImmediate,
+		state.setOpen
+	]);
+	if (process.env.NODE_ENV === "development") {
+		if (snapPointsMode === "mixed" && snapPoints.some(function(p) {
+			if (typeof p === "string") {
+				if (p === "fit") {
+					return false;
+				}
+				if (p.endsWith("%")) {
+					var n = Number(p.slice(0, -1));
+					return n < 0 || n > 100;
+				}
+				return true;
+			}
+			return typeof p !== "number" || p < 0;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or \"fit\" when snapPointsMode is mixed");
+		}
+		if (snapPointsMode === "mixed" && snapPoints.indexOf("fit") > 0) {
+			console.warn("⚠️ Invalid snapPoint given, \"fit\" must be the first/largest snap point when snapPointsMode is mixed");
+		}
+		if (snapPointsMode === "fit" && (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) || snapPoints[0] !== "fit")) {
+			console.warn("⚠️ Invalid snapPoint given, there are no snap points when snapPointsMode is fit");
+		}
+		if (snapPointsMode === "constant" && snapPoints.some(function(p) {
+			return typeof p !== "number" || p < 0;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant");
+		}
+		if (snapPointsMode === "percent" && snapPoints.some(function(p) {
+			return typeof p !== "number" || p < 0 || p > 100;
+		})) {
+			console.warn("⚠️ Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent");
+		}
+	}
+	if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
+		setPositionImmediate(0);
+	}
+	var shouldSetPositionOpen = open && position < 0;
+	import_react.default.useEffect(function() {
+		if (shouldSetPositionOpen) {
+			setPosition(0);
+		}
+	}, [setPosition, shouldSetPositionOpen]);
+	var _props_dismissOnOverlayPress, _props_dismissOnSnapToBottom, _props_scope;
+	return {
+		modal: !!props.modal,
+		open: state.open,
+		setOpen: state.setOpen,
+		hidden: !!state.isHidden,
+		contentRef,
+		handleRef,
+		frameSize,
+		setFrameSize,
+		maxContentSize,
+		dismissOnOverlayPress: (_props_dismissOnOverlayPress = props.dismissOnOverlayPress) !== null && _props_dismissOnOverlayPress !== void 0 ? _props_dismissOnOverlayPress : true,
+		dismissOnSnapToBottom: (_props_dismissOnSnapToBottom = props.dismissOnSnapToBottom) !== null && _props_dismissOnSnapToBottom !== void 0 ? _props_dismissOnSnapToBottom : false,
+		scope: (_props_scope = props.scope) !== null && _props_scope !== void 0 ? _props_scope : "",
+		hasFit,
+		position,
+		snapPoints,
+		snapPointsMode,
+		setMaxContentSize,
+		setPosition,
+		setPositionImmediate
+	};
+}
+
+//# sourceMappingURL=useSheetState.native.js.map

package/dist/jsx/useSheetState.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetState.native.js","names":[],"sources":["jsx/useSheetState.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar useSheetState_exports = {};\n__export(useSheetState_exports, {\n  useSheetState: () => useSheetState\n});\nmodule.exports = __toCommonJS(useSheetState_exports);\nvar import_react = __toESM(require(\"react\"), 1);\nvar import_use_controllable_state = require(\"@tamagui/use-controllable-state\");\nfunction useSheetState(props, state) {\n  var handleRef = import_react.default.useRef(null);\n  var contentRef = import_react.default.useRef(null);\n  var [frameSize, setFrameSize] = import_react.default.useState(0);\n  var [maxContentSize, setMaxContentSize] = import_react.default.useState(0);\n  var _props_snapPointsMode;\n  var snapPointsMode = (_props_snapPointsMode = props.snapPointsMode) !== null && _props_snapPointsMode !== void 0 ? _props_snapPointsMode : \"percent\";\n  var _props_snapPoints;\n  var snapPointsProp = (_props_snapPoints = props.snapPoints) !== null && _props_snapPoints !== void 0 ? _props_snapPoints : snapPointsMode === \"percent\" ? [\n    80\n  ] : snapPointsMode === \"constant\" ? [\n    256\n  ] : [\n    \"fit\"\n  ];\n  var hasFit = snapPointsProp[0] === \"fit\";\n  var snapPoints = import_react.default.useMemo(function() {\n    return props.dismissOnSnapToBottom ? [\n      ...snapPointsProp,\n      0\n    ] : snapPointsProp;\n  }, [\n    JSON.stringify(snapPointsProp),\n    props.dismissOnSnapToBottom\n  ]);\n  var [position_, setPositionImmediate] = (0, import_use_controllable_state.useControllableState)({\n    prop: props.position,\n    defaultProp: props.defaultPosition || (state.open ? 0 : -1),\n    onChange: props.onPositionChange,\n    strategy: state.strategy\n  });\n  var position = state.open === false ? -1 : position_;\n  var { open } = state;\n  var setPosition = import_react.default.useCallback(function(next) {\n    if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {\n      state.setOpen(false);\n    } else {\n      setPositionImmediate(next);\n    }\n  }, [\n    props.dismissOnSnapToBottom,\n    snapPoints.length,\n    setPositionImmediate,\n    state.setOpen\n  ]);\n  if (process.env.NODE_ENV === \"development\") {\n    if (snapPointsMode === \"mixed\" && snapPoints.some(function(p) {\n      if (typeof p === \"string\") {\n        if (p === \"fit\") {\n          return false;\n        }\n        if (p.endsWith(\"%\")) {\n          var n = Number(p.slice(0, -1));\n          return n < 0 || n > 100;\n        }\n        return true;\n      }\n      return typeof p !== \"number\" || p < 0;\n    })) {\n      console.warn('\\u26A0\\uFE0F Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or \"fit\" when snapPointsMode is mixed');\n    }\n    if (snapPointsMode === \"mixed\" && snapPoints.indexOf(\"fit\") > 0) {\n      console.warn('\\u26A0\\uFE0F Invalid snapPoint given, \"fit\" must be the first/largest snap point when snapPointsMode is mixed');\n    }\n    if (snapPointsMode === \"fit\" && (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) || snapPoints[0] !== \"fit\")) {\n      console.warn(\"\\u26A0\\uFE0F Invalid snapPoint given, there are no snap points when snapPointsMode is fit\");\n    }\n    if (snapPointsMode === \"constant\" && snapPoints.some(function(p) {\n      return typeof p !== \"number\" || p < 0;\n    })) {\n      console.warn(\"\\u26A0\\uFE0F Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant\");\n    }\n    if (snapPointsMode === \"percent\" && snapPoints.some(function(p) {\n      return typeof p !== \"number\" || p < 0 || p > 100;\n    })) {\n      console.warn(\"\\u26A0\\uFE0F Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent\");\n    }\n  }\n  if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {\n    setPositionImmediate(0);\n  }\n  var shouldSetPositionOpen = open && position < 0;\n  import_react.default.useEffect(function() {\n    if (shouldSetPositionOpen) {\n      setPosition(0);\n    }\n  }, [\n    setPosition,\n    shouldSetPositionOpen\n  ]);\n  var _props_dismissOnOverlayPress, _props_dismissOnSnapToBottom, _props_scope;\n  return {\n    modal: !!props.modal,\n    open: state.open,\n    setOpen: state.setOpen,\n    hidden: !!state.isHidden,\n    contentRef,\n    handleRef,\n    frameSize,\n    setFrameSize,\n    maxContentSize,\n    dismissOnOverlayPress: (_props_dismissOnOverlayPress = props.dismissOnOverlayPress) !== null && _props_dismissOnOverlayPress !== void 0 ? _props_dismissOnOverlayPress : true,\n    dismissOnSnapToBottom: (_props_dismissOnSnapToBottom = props.dismissOnSnapToBottom) !== null && _props_dismissOnSnapToBottom !== void 0 ? _props_dismissOnSnapToBottom : false,\n    scope: (_props_scope = props.scope) !== null && _props_scope !== void 0 ? _props_scope : \"\",\n    hasFit,\n    position,\n    snapPoints,\n    snapPointsMode,\n    setMaxContentSize,\n    setPosition,\n    setPositionImmediate\n  };\n}\n//# sourceMappingURL=useSheetState.js.map\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/sheet",
-  "version": "3.0.0-beta.924.1",
+  "version": "3.0.0",
   "license": "MIT",
   "source": "src/index.ts",
   "type": "module",
@@ -43,29 +43,33 @@
     "clean": "tamagui-build clean"
   },
   "dependencies": {
-    "@tamagui/adapt": "3.0.0-beta.924.1",
-    "@tamagui/animate-presence": "3.0.0-beta.924.1",
-    "@tamagui/animations-react-native": "3.0.0-beta.924.1",
-    "@tamagui/compose-refs": "3.0.0-beta.924.1",
-    "@tamagui/constants": "3.0.0-beta.924.1",
-    "@tamagui/core": "3.0.0-beta.924.1",
-    "@tamagui/helpers": "3.0.0-beta.924.1",
-    "@tamagui/native": "3.0.0-beta.924.1",
-    "@tamagui/portal": "3.0.0-beta.924.1",
-    "@tamagui/remove-scroll": "3.0.0-beta.924.1",
-    "@tamagui/scroll-view": "3.0.0-beta.924.1",
-    "@tamagui/stacks": "3.0.0-beta.924.1",
-    "@tamagui/use-constant": "3.0.0-beta.924.1",
-    "@tamagui/use-controllable-state": "3.0.0-beta.924.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.924.1",
-    "@tamagui/z-index-stack": "3.0.0-beta.924.1"
+    "@tamagui/adapt": "3.0.0",
+    "@tamagui/animate-presence": "3.0.0",
+    "@tamagui/animation-helpers": "3.0.0",
+    "@tamagui/animations-react-native": "3.0.0",
+    "@tamagui/compose-refs": "3.0.0",
+    "@tamagui/constants": "3.0.0",
+    "@tamagui/core": "3.0.0",
+    "@tamagui/helpers": "3.0.0",
+    "@tamagui/native": "3.0.0",
+    "@tamagui/portal": "3.0.0",
+    "@tamagui/react-native-pan-responder": "3.0.0",
+    "@tamagui/react-native-types": "3.0.0",
+    "@tamagui/react-native-use-responder-events": "3.0.0",
+    "@tamagui/remove-scroll": "3.0.0",
+    "@tamagui/scroll-view": "3.0.0",
+    "@tamagui/stacks": "3.0.0",
+    "@tamagui/use-constant": "3.0.0",
+    "@tamagui/use-controllable-state": "3.0.0",
+    "@tamagui/use-did-finish-ssr": "3.0.0",
+    "@tamagui/z-index-stack": "3.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.924.1",
+    "@tamagui/build": "3.0.0",
     "react": "19.2.3",
-    "react-native": "0.86.2",
-    "react-native-gesture-handler": "~2.32.0",
-    "react-native-safe-area-context": "~5.7.0"
+    "react-native": "0.87.1",
+    "react-native-gesture-handler": "3.3.0",
+    "react-native-safe-area-context": "5.10.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -83,5 +87,6 @@
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",
     "directory": "code/ui/sheet"
-  }
+  },
+  "releaseSourceCommit": "15fbca480b143f876f6975601e23a17d3f90d2ee"
 }

package/src/Sheet.tsx

@@ -6,6 +6,7 @@ import {
   createStyledHOC,
   styled,
   View,
+  type GetProps,
   type TamaguiElement,
   type ViewProps,
 } from '@tamagui/core'
@@ -17,8 +18,7 @@ import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 import { StackZIndexContext } from '@tamagui/z-index-stack'
 import type { FunctionComponent, Ref } from 'react'
 import { useContext, useEffect, useMemo, useRef } from 'react'
-import type { View as RNView } from 'react-native'
-import { Platform } from 'react-native'
+import type { ViewInstance as RNView } from '@tamagui/react-native-types'
 import {
   SHEET_BACKGROUND_NAME,
   SHEET_CONTAINER_NAME,
@@ -48,7 +48,7 @@ type SheetStyleShorthandProps = {
 }
 
 type SheetViewProps<ExtraProps extends object = {}> = SheetScopedProps<
-  ViewProps & SheetStyleShorthandProps & ExtraProps
+  GetProps<typeof View> & SheetStyleShorthandProps & ExtraProps
 >
 
 const SheetHandleFrame = styled(XStack, {
@@ -95,7 +95,6 @@ const SheetContainerFrame = styled(YStack, {
   position: 'relative',
   zIndex: 0,
   width: '100%',
-  maxHeight: '100%',
 })
 
 const SheetBackgroundFrame = styled(YStack, {
@@ -211,7 +210,7 @@ export const SheetContainer = createStyledHOC(
     forwardedRef
   ) => {
     const context = useSheetContext(scope)
-    const { hasFit, disableRemoveScroll, frameSize, contentRef, open } = context
+    const { hasFit, frameSize, contentRef, open } = context
     const composedContentRef = useComposedRefs(forwardedRef, contentRef)
     const offscreenSize = useSheetOffscreenSize(context)
     const stableFrameSize = useRef(frameSize)
@@ -223,6 +222,26 @@ export const SheetContainer = createStyledHOC(
     }, [open, frameSize])
 
     const sheetContents = useMemo(() => {
+      if (context.onlyShowContainer) {
+        return (
+          <SheetContainerFrame
+            ref={composedContentRef}
+            flex={hasFit ? 0 : 1}
+            flexBasis={hasFit ? 'auto' : undefined}
+            maxHeight={hasFit ? undefined : '100%'}
+            pointerEvents={open ? 'auto' : 'none'}
+            data-state={open ? 'open' : 'closed'}
+            {...props}
+            onLayout={composeEventHandlers(props.onLayout, (event) => {
+              context.setFrameSize(event.nativeEvent.layout.height)
+            })}
+          >
+            <StackZIndexContext zIndex={resolveViewZIndex(props.zIndex)}>
+              {children}
+            </StackZIndexContext>
+          </SheetContainerFrame>
+        )
+      }
       const shouldUseFixedHeight = hasFit && !open && stableFrameSize.current
 
       return (
@@ -230,6 +249,7 @@ export const SheetContainer = createStyledHOC(
           ref={composedContentRef}
           flex={hasFit && open ? 0 : 1}
           flexBasis={hasFit ? 'auto' : undefined}
+          maxHeight="100%"
           height={
             shouldUseFixedHeight
               ? stableFrameSize.current
@@ -250,10 +270,21 @@ export const SheetContainer = createStyledHOC(
           )}
         </SheetContainerFrame>
       )
-    }, [open, props, frameSize, offscreenSize, adjustPaddingForOffscreenContent, hasFit])
+    }, [
+      open,
+      props,
+      frameSize,
+      offscreenSize,
+      adjustPaddingForOffscreenContent,
+      hasFit,
+      context.onlyShowContainer,
+      context.setFrameSize,
+    ])
+
+    if (context.onlyShowContainer) return sheetContents
 
     return (
-      <RemoveScroll enabled={!disableRemoveScroll && context.open}>
+      <RemoveScroll enabled={!context.disableRemoveScroll && context.open}>
         {sheetContents}
       </RemoveScroll>
     )
@@ -275,6 +306,7 @@ export const SheetBackground = createStyledHOC(
     forwardedRef
   ) => {
     const context = useSheetContext(scope)
+    if (context.onlyShowContainer) return null
     const bottomOverflow = isWeb
       ? Math.max(context.frameSize, getMaxViewportHeight())
       : context.frameSize
@@ -302,17 +334,12 @@ export const SheetRoot = createRefComponent<RNView, SheetProps>(
     const isShowingAdaptNonSheet =
       shouldUseAdapt && !adaptContext.active && adaptContext.open
 
-    let SheetImplementation = SheetImplementationCustom
-
-    if (props.native && Platform.OS === 'ios') {
-      if (process.env.TAMAGUI_TARGET === 'native') {
-        const impl = getNativeSheet('ios')
-        if (impl) {
-          // @ts-expect-error accepting external sheet implementation
-          SheetImplementation = impl
-        }
-      }
-    }
+    const nativeImplementation =
+      props.native === true ||
+      (Array.isArray(props.native) && props.native.includes('ios'))
+        ? getNativeSheet('ios')
+        : null
+    const SheetImplementation = nativeImplementation ?? SheetImplementationCustom
 
     if (isShowingAdaptNonSheet || isShowingNonSheet || !hydrated) {
       return null

package/src/SheetDragSurface.native.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { PanResponder, View } from 'react-native'
+
+import { getGestureHandlerState } from './gestureState'
+import type { SheetDragSurfaceProps } from './types'
+
+/**
+ * The surface the sheet is dragged by.
+ *
+ * With react-native-gesture-handler set up the drag is a `Gesture.Pan`, which
+ * needs a native View of its own to attach to. Without it the drag runs on
+ * PanResponder, the same as web.
+ */
+export function SheetDragSurface({
+  gestureHandlerEnabled,
+  panGesture,
+  panConfig,
+  children,
+}: SheetDragSurfaceProps) {
+  const { GestureDetector } = getGestureHandlerState()
+
+  const panHandlers = React.useMemo(
+    () => (panConfig ? PanResponder.create(panConfig).panHandlers : undefined),
+    [panConfig]
+  )
+
+  if (gestureHandlerEnabled && panGesture && GestureDetector) {
+    return (
+      <GestureDetector gesture={panGesture}>
+        <View style={{ flex: 1 }} collapsable={false}>
+          {children}
+        </View>
+      </GestureDetector>
+    )
+  }
+
+  return (
+    <View {...panHandlers} style={{ flex: 1, width: '100%', height: '100%' }}>
+      {children}
+    </View>
+  )
+}